diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue')
| -rw-r--r-- | app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue | 179 |
1 files changed, 83 insertions, 96 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue index f0bb8b0a90f..f885afae378 100644 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue +++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue @@ -14,9 +14,11 @@ import { GlFormSelect, } from '@gitlab/ui'; import { debounce } from 'lodash'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { s__ } from '~/locale'; +import { doesHashExistInUrl } from '~/lib/utils/url_utility'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ToggleButton from '~/vue_shared/components/toggle_button.vue'; +import IntegrationsList from './alerts_integrations_list.vue'; import csrf from '~/lib/utils/csrf'; import service from '../services'; import { @@ -25,7 +27,9 @@ import { JSON_VALIDATE_DELAY, targetPrometheusUrlPlaceholder, targetOpsgenieUrlPlaceholder, + sectionHash, } from '../constants'; +import createFlash, { FLASH_TYPES } from '~/flash'; export default { i18n, @@ -46,11 +50,11 @@ export default { GlSprintf, ClipboardButton, ToggleButton, + IntegrationsList, }, directives: { 'gl-modal': GlModalDirective, }, - mixins: [glFeatureFlagsMixin()], inject: ['prometheus', 'generic', 'opsgenie'], data() { return { @@ -148,6 +152,20 @@ export default { ? this.$options.targetOpsgenieUrlPlaceholder : this.$options.targetPrometheusUrlPlaceholder; }, + integrations() { + return [ + { + name: s__('AlertSettings|HTTP endpoint'), + type: s__('AlertsIntegrations|HTTP endpoint'), + activated: this.generic.activated, + }, + { + name: s__('AlertSettings|External Prometheus'), + type: s__('AlertsIntegrations|Prometheus'), + activated: this.prometheus.activated, + }, + ]; + }, }, watch: { 'testAlert.json': debounce(function debouncedJsonValidate() { @@ -173,9 +191,12 @@ export default { this.authKey = this.selectedService.authKey ?? ''; }, methods: { - createUserErrorMessage(errors = { error: [''] }) { - // eslint-disable-next-line prefer-destructuring - this.serverError = errors.error[0]; + createUserErrorMessage(errors = {}) { + const error = Object.entries(errors)?.[0]; + if (error) { + const [field, [msg]] = error; + this.serverError = `${field} ${msg}`; + } }, setOpsgenieAsDefault() { this.options = this.options.map(el => { @@ -245,29 +266,11 @@ export default { ? { service: { opsgenie_mvc_target_url: this.targetUrl, opsgenie_mvc_enabled: value } } : { service: { active: value } }, }) - .then(() => { - this.active = value; - this.toggleSuccess(value); - - if (!this.isOpsgenie && value) { - if (!this.selectedService.authKey) { - return window.location.reload(); - } - - return this.removeOpsGenieOption(); - } - - if (this.isOpsgenie && value) { - return this.setOpsgenieAsDefault(); - } - - // eslint-disable-next-line no-return-assign - return (this.options = serviceOptions); - }) + .then(() => this.notifySuccessAndReload()) .catch(({ response: { data: { errors } = {} } = {} }) => { this.createUserErrorMessage(errors); this.setFeedback({ - feedbackMessage: `${this.$options.i18n.errorMsg}.`, + feedbackMessage: this.$options.i18n.errorMsg, variant: 'danger', }); }) @@ -276,6 +279,12 @@ export default { this.canSaveForm = false; }); }, + reload() { + if (!doesHashExistInUrl(sectionHash)) { + window.location.hash = sectionHash; + } + window.location.reload(); + }, togglePrometheusActive(value) { this.loading = true; return service @@ -288,15 +297,11 @@ export default { redirect: window.location, }, }) - .then(() => { - this.active = value; - this.toggleSuccess(value); - this.removeOpsGenieOption(); - }) + .then(() => this.notifySuccessAndReload()) .catch(({ response: { data: { errors } = {} } = {} }) => { this.createUserErrorMessage(errors); this.setFeedback({ - feedbackMessage: `${this.$options.i18n.errorMsg}.`, + feedbackMessage: this.$options.i18n.errorMsg, variant: 'danger', }); }) @@ -305,18 +310,9 @@ export default { this.canSaveForm = false; }); }, - toggleSuccess(value) { - if (value) { - this.setFeedback({ - feedbackMessage: this.$options.i18n.endPointActivated, - variant: 'info', - }); - } else { - this.setFeedback({ - feedbackMessage: this.$options.i18n.changesSaved, - variant: 'info', - }); - } + notifySuccessAndReload() { + createFlash({ message: this.$options.i18n.changesSaved, type: FLASH_TYPES.NOTICE }); + setTimeout(() => this.reload(), 1000); }, setFeedback({ feedbackMessage, variant }) { this.feedback = { feedbackMessage, variant }; @@ -375,47 +371,50 @@ export default { <template> <div> - <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback"> - {{ feedback.feedbackMessage }} - <br /> - <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i> - <gl-button - v-if="showAlertSave" - variant="danger" - category="primary" - class="gl-display-block gl-mt-3" - @click="toggle(active)" - > - {{ __('Save anyway') }} - </gl-button> - </gl-alert> - <div data-testid="alert-settings-description" class="gl-mt-5"> - <p v-for="section in sections" :key="section.text"> - <gl-sprintf :message="section.text"> - <template #link="{ content }"> - <gl-link :href="section.url" target="_blank">{{ content }}</gl-link> - </template> - </gl-sprintf> - </p> - </div> + <integrations-list :integrations="integrations" /> + <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset"> - <gl-form-group - :label="$options.i18n.integrationsLabel" - label-for="integrations" - label-class="label-bold" - > + <h5 class="gl-font-lg gl-my-5">{{ $options.i18n.integrationsLabel }}</h5> + + <gl-alert v-if="showFeedbackMsg" :variant="feedback.variant" @dismiss="dismissFeedback"> + {{ feedback.feedbackMessage }} + <br /> + <i v-if="serverError">{{ __('Error message:') }} {{ serverError }}</i> + <gl-button + v-if="showAlertSave" + variant="danger" + category="primary" + class="gl-display-block gl-mt-3" + @click="toggle(active)" + > + {{ __('Save anyway') }} + </gl-button> + </gl-alert> + + <div data-testid="alert-settings-description"> + <p v-for="section in sections" :key="section.text"> + <gl-sprintf :message="section.text"> + <template #link="{ content }"> + <gl-link :href="section.url" target="_blank">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + </div> + + <gl-form-group label-for="integration-type" :label="$options.i18n.integration"> <gl-form-select + id="integration-type" v-model="selectedEndpoint" :options="options" data-testid="alert-settings-select" @change="resetFormValues" /> - <span class="gl-text-gray-200"> + <span class="gl-text-gray-500"> <gl-sprintf :message="$options.i18n.integrationsInfo"> <template #link="{ content }"> <gl-link class="gl-display-inline-block" - href="https://gitlab.com/groups/gitlab-org/-/epics/3362" + href="https://gitlab.com/groups/gitlab-org/-/epics/4390" target="_blank" >{{ content }}</gl-link > @@ -423,11 +422,7 @@ export default { </gl-sprintf> </span> </gl-form-group> - <gl-form-group - :label="$options.i18n.activeLabel" - label-for="activated" - label-class="label-bold" - > + <gl-form-group :label="$options.i18n.activeLabel" label-for="activated"> <toggle-button id="activated" :disabled-input="loading" @@ -440,7 +435,6 @@ export default { v-if="isOpsgenie || isPrometheus" :label="$options.i18n.apiBaseUrlLabel" label-for="api-url" - label-class="label-bold" > <gl-form-input id="api-url" @@ -449,12 +443,12 @@ export default { :placeholder="baseUrlPlaceholder" :disabled="!active" /> - <span class="gl-text-gray-200"> + <span class="gl-text-gray-500"> {{ $options.i18n.apiBaseUrlHelpText }} </span> </gl-form-group> <template v-if="!isOpsgenie"> - <gl-form-group :label="$options.i18n.urlLabel" label-for="url" label-class="label-bold"> + <gl-form-group :label="$options.i18n.urlLabel" label-for="url"> <gl-form-input-group id="url" readonly :value="selectedService.url"> <template #append> <clipboard-button @@ -464,15 +458,11 @@ export default { /> </template> </gl-form-input-group> - <span class="gl-text-gray-200"> + <span class="gl-text-gray-500"> {{ prometheusInfo }} </span> </gl-form-group> - <gl-form-group - :label="$options.i18n.authKeyLabel" - label-for="authorization-key" - label-class="label-bold" - > + <gl-form-group :label="$options.i18n.authKeyLabel" label-for="authorization-key"> <gl-form-input-group id="authorization-key" class="gl-mb-2" readonly :value="authKey"> <template #append> <clipboard-button @@ -498,7 +488,6 @@ export default { <gl-form-group :label="$options.i18n.alertJson" label-for="alert-json" - label-class="label-bold" :invalid-feedback="testAlert.error" > <gl-form-textarea @@ -511,16 +500,11 @@ export default { max-rows="10" /> </gl-form-group> - <div class="gl-display-flex gl-justify-content-end"> - <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{ - $options.i18n.testAlertInfo - }}</gl-button> - </div> + <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{ + $options.i18n.testAlertInfo + }}</gl-button> </template> <div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between"> - <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset"> - {{ __('Cancel') }} - </gl-button> <gl-button variant="success" category="primary" @@ -529,6 +513,9 @@ export default { > {{ __('Save changes') }} </gl-button> + <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset"> + {{ __('Cancel') }} + </gl-button> </div> </gl-form> </div> |