diff options
Diffstat (limited to 'app/assets/javascripts/incidents_settings')
6 files changed, 18 insertions, 217 deletions
diff --git a/app/assets/javascripts/incidents_settings/components/alerts_form.vue b/app/assets/javascripts/incidents_settings/components/alerts_form.vue deleted file mode 100644 index e8daad8811e..00000000000 --- a/app/assets/javascripts/incidents_settings/components/alerts_form.vue +++ /dev/null @@ -1,145 +0,0 @@ -<script> -import { - GlButton, - GlSprintf, - GlLink, - GlIcon, - GlFormGroup, - GlFormCheckbox, - GlDropdown, - GlDropdownItem, -} from '@gitlab/ui'; -import { - I18N_ALERT_SETTINGS_FORM, - NO_ISSUE_TEMPLATE_SELECTED, - TAKING_INCIDENT_ACTION_DOCS_LINK, - ISSUE_TEMPLATES_DOCS_LINK, -} from '../constants'; - -export default { - components: { - GlButton, - GlSprintf, - GlLink, - GlFormGroup, - GlIcon, - GlFormCheckbox, - GlDropdown, - GlDropdownItem, - }, - inject: ['service', 'alertSettings'], - data() { - return { - templates: [NO_ISSUE_TEMPLATE_SELECTED, ...this.alertSettings.templates], - createIssueEnabled: this.alertSettings.createIssue, - issueTemplate: this.alertSettings.issueTemplateKey, - sendEmailEnabled: this.alertSettings.sendEmail, - autoCloseIncident: this.alertSettings.autoCloseIncident, - loading: false, - }; - }, - i18n: I18N_ALERT_SETTINGS_FORM, - TAKING_INCIDENT_ACTION_DOCS_LINK, - ISSUE_TEMPLATES_DOCS_LINK, - computed: { - issueTemplateHeader() { - return this.issueTemplate || NO_ISSUE_TEMPLATE_SELECTED.name; - }, - formData() { - return { - create_issue: this.createIssueEnabled, - issue_template_key: this.issueTemplate, - send_email: this.sendEmailEnabled, - auto_close_incident: this.autoCloseIncident, - }; - }, - }, - methods: { - selectIssueTemplate(templateKey) { - this.issueTemplate = templateKey; - }, - isTemplateSelected(templateKey) { - return templateKey === this.issueTemplate; - }, - updateAlertsIntegrationSettings() { - this.loading = true; - - this.service.updateSettings(this.formData).catch(() => { - this.loading = false; - }); - }, - }, -}; -</script> - -<template> - <div> - <p> - <gl-sprintf :message="$options.i18n.introText"> - <template #docsLink> - <gl-link :href="$options.TAKING_INCIDENT_ACTION_DOCS_LINK" target="_blank"> - <span>{{ $options.i18n.introLinkText }}</span> - </gl-link> - </template> - </gl-sprintf> - </p> - <form ref="settingsForm" @submit.prevent="updateAlertsIntegrationSettings"> - <gl-form-group class="gl-pl-0"> - <gl-form-checkbox v-model="createIssueEnabled" data-qa-selector="create_issue_checkbox"> - <span>{{ $options.i18n.createIncident.label }}</span> - </gl-form-checkbox> - </gl-form-group> - - <gl-form-group - label-size="sm" - label-for="alert-integration-settings-issue-template" - class="col-8 col-md-9 gl-px-6" - > - <label class="gl-display-inline-flex" for="alert-integration-settings-issue-template"> - {{ $options.i18n.incidentTemplate.label }} - <gl-link :href="$options.ISSUE_TEMPLATES_DOCS_LINK" target="_blank"> - <gl-icon name="question" :size="12" /> - </gl-link> - </label> - <gl-dropdown - id="alert-integration-settings-issue-template" - data-qa-selector="incident_templates_dropdown" - :text="issueTemplateHeader" - :block="true" - > - <gl-dropdown-item - v-for="template in templates" - :key="template.key" - data-qa-selector="incident_templates_item" - :is-check-item="true" - :is-checked="isTemplateSelected(template.key)" - @click="selectIssueTemplate(template.key)" - > - {{ template.name }} - </gl-dropdown-item> - </gl-dropdown> - </gl-form-group> - - <gl-form-group class="gl-pl-0 gl-mb-5"> - <gl-form-checkbox v-model="sendEmailEnabled"> - <span>{{ $options.i18n.sendEmail.label }}</span> - </gl-form-checkbox> - </gl-form-group> - <gl-form-group class="gl-pl-0 gl-mb-5"> - <gl-form-checkbox v-model="autoCloseIncident"> - <span>{{ $options.i18n.autoCloseIncidents.label }}</span> - </gl-form-checkbox> - </gl-form-group> - <gl-button - ref="submitBtn" - data-qa-selector="save_changes_button" - :disabled="loading" - variant="success" - type="submit" - class="js-no-auto-disable" - > - {{ $options.i18n.saveBtnLabel }} - </gl-button> - </form> - </div> -</template> diff --git a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue index 0746725153d..af4905deef4 100644 --- a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue +++ b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue @@ -1,7 +1,6 @@ <script> import { GlButton, GlTabs, GlTab } from '@gitlab/ui'; import { INTEGRATION_TABS_CONFIG, I18N_INTEGRATION_TABS } from '../constants'; -import AlertsSettingsForm from './alerts_form.vue'; import PagerDutySettingsForm from './pagerduty_form.vue'; export default { @@ -9,11 +8,15 @@ export default { GlButton, GlTabs, GlTab, - AlertsSettingsForm, PagerDutySettingsForm, ServiceLevelAgreementForm: () => import('ee_component/incidents_settings/components/service_level_agreement_form.vue'), }, + computed: { + activeTabs() { + return this.$options.tabs.filter((tab) => tab.active); + }, + }, tabs: INTEGRATION_TABS_CONFIG, i18n: I18N_INTEGRATION_TABS, }; @@ -23,7 +26,7 @@ export default { <section id="incident-management-settings" data-qa-selector="incidents_settings_content" - class="settings no-animate qa-incident-management-settings" + class="settings no-animate" > <div class="settings-header"> <h4 @@ -42,15 +45,14 @@ export default { <div class="settings-content"> <gl-tabs> + <service-level-agreement-form /> <gl-tab - v-for="(tab, index) in $options.tabs" - v-if="tab.active" + v-for="(tab, index) in activeTabs" :key="`${tab.title}_${index}`" :title="tab.title" > <component :is="tab.component" class="gl-pt-3" :data-testid="`${tab.component}-tab`" /> </gl-tab> - <service-level-agreement-form /> </gl-tabs> </div> </section> diff --git a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue index b56dd66342a..866d2ff399e 100644 --- a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue +++ b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue @@ -11,7 +11,6 @@ import { GlModal, GlModalDirective, } from '@gitlab/ui'; -import { isEqual } from 'lodash'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { I18N_PAGERDUTY_SETTINGS_FORM, CONFIGURE_PAGERDUTY_WEBHOOK_DOCS_LINK } from '../constants'; @@ -50,14 +49,8 @@ export default { pagerduty_active: this.active, }; }, - isFormUpdated() { - return isEqual(this.pagerDutySettings, { - active: this.active, - webhookUrl: this.webhookUrl, - }); - }, isSaveDisabled() { - return this.isFormUpdated || this.loading || this.resettingWebhook; + return this.loading || this.resettingWebhook; }, webhookUpdateAlertMsg() { return this.webhookUpdateFailed @@ -123,13 +116,15 @@ export default { </template> </gl-sprintf> </p> - <form ref="settingsForm" @submit.prevent="updatePagerDutyIntegrationSettings"> + <form ref="settingsForm"> <gl-form-group class="col-8 col-md-9 gl-p-0"> <gl-toggle id="active" v-model="active" + :disabled="isSaveDisabled" :is-loading="loading" :label="$options.i18n.activeToggle.label" + @change="updatePagerDutyIntegrationSettings" /> </gl-form-group> @@ -166,15 +161,6 @@ export default { {{ $options.i18n.webhookUrl.restKeyInfo }} </gl-modal> </gl-form-group> - <gl-button - ref="submitBtn" - :disabled="isSaveDisabled" - variant="success" - type="submit" - class="js-no-auto-disable" - > - {{ $options.i18n.saveBtnLabel }} - </gl-button> </form> </div> </template> diff --git a/app/assets/javascripts/incidents_settings/constants.js b/app/assets/javascripts/incidents_settings/constants.js index d479838b491..54e4bab6c10 100644 --- a/app/assets/javascripts/incidents_settings/constants.js +++ b/app/assets/javascripts/incidents_settings/constants.js @@ -3,11 +3,6 @@ import { __, s__ } from '~/locale'; /* Integration tabs constants */ export const INTEGRATION_TABS_CONFIG = [ { - title: s__('IncidentSettings|Alert integration'), - component: 'AlertsSettingsForm', - active: true, - }, - { title: s__('IncidentSettings|PagerDuty integration'), component: 'PagerDutySettingsForm', active: true, @@ -23,38 +18,10 @@ export const I18N_INTEGRATION_TABS = { headerText: s__('IncidentSettings|Incidents'), expandBtnLabel: __('Expand'), subHeaderText: s__( - 'IncidentSettings|Set up integrations with external tools to help better manage incidents.', + 'IncidentSettings|Fine-tune incident settings and set up integrations with external tools to help better manage incidents.', ), }; -/* Alerts integration settings constants */ - -export const I18N_ALERT_SETTINGS_FORM = { - saveBtnLabel: __('Save changes'), - introText: __('Action to take when receiving an alert. %{docsLink}'), - introLinkText: __('More information.'), - createIncident: { - label: __('Create an incident. Incidents are created for each alert triggered.'), - }, - incidentTemplate: { - label: __('Incident template (optional)'), - }, - sendEmail: { - label: __('Send a single email notification to Owners and Maintainers for new alerts.'), - }, - autoCloseIncidents: { - label: __( - 'Automatically close associated incident when a recovery alert notification resolves an alert', - ), - }, -}; - -export const NO_ISSUE_TEMPLATE_SELECTED = { key: '', name: __('No template selected') }; -export const TAKING_INCIDENT_ACTION_DOCS_LINK = - '/help/operations/metrics/alerts#trigger-actions-from-alerts'; -export const ISSUE_TEMPLATES_DOCS_LINK = - '/help/user/project/description_templates#create-an-issue-template'; - /* PagerDuty integration settings constants */ export const I18N_PAGERDUTY_SETTINGS_FORM = { diff --git a/app/assets/javascripts/incidents_settings/incidents_settings_service.js b/app/assets/javascripts/incidents_settings/incidents_settings_service.js index 82b94c08381..83fd29a058e 100644 --- a/app/assets/javascripts/incidents_settings/incidents_settings_service.js +++ b/app/assets/javascripts/incidents_settings/incidents_settings_service.js @@ -1,4 +1,4 @@ -import { deprecatedCreateFlash as createFlash } from '~/flash'; +import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import { refreshCurrentPage } from '~/lib/utils/url_utility'; import { ERROR_MSG } from './constants'; @@ -22,7 +22,10 @@ export default class IncidentsSettingsService { .catch(({ response }) => { const message = response?.data?.message || ''; - createFlash(`${ERROR_MSG} ${message}`, 'alert'); + createFlash({ + message: `${ERROR_MSG} ${message}`, + type: 'alert', + }); }); } diff --git a/app/assets/javascripts/incidents_settings/index.js b/app/assets/javascripts/incidents_settings/index.js index e9ba4294519..62c48a40026 100644 --- a/app/assets/javascripts/incidents_settings/index.js +++ b/app/assets/javascripts/incidents_settings/index.js @@ -13,14 +13,9 @@ export default () => { const { dataset: { operationsSettingsEndpoint, - templates, - createIssue, - issueTemplateKey, - sendEmail, pagerdutyActive, pagerdutyWebhookUrl, pagerdutyResetKeyPath, - autoCloseIncident, slaActive, slaMinutes, slaFeatureAvailable, @@ -32,13 +27,6 @@ export default () => { el, provide: { service, - alertSettings: { - templates: JSON.parse(templates), - createIssue: parseBoolean(createIssue), - issueTemplateKey, - sendEmail: parseBoolean(sendEmail), - autoCloseIncident: parseBoolean(autoCloseIncident), - }, pagerDutySettings: { active: parseBoolean(pagerdutyActive), webhookUrl: pagerdutyWebhookUrl, |