diff options
Diffstat (limited to 'app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue')
| -rw-r--r-- | app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue | 494 |
1 files changed, 0 insertions, 494 deletions
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue deleted file mode 100644 index 0246315bdc5..00000000000 --- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form_old.vue +++ /dev/null @@ -1,494 +0,0 @@ -<script> -import { - GlAlert, - GlButton, - GlForm, - GlFormGroup, - GlFormInput, - GlFormInputGroup, - GlFormTextarea, - GlLink, - GlModal, - GlModalDirective, - GlSprintf, - GlFormSelect, -} from '@gitlab/ui'; -import { debounce } from 'lodash'; -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 csrf from '~/lib/utils/csrf'; -import service from '../services'; -import { - i18n, - integrationTypes, - JSON_VALIDATE_DELAY, - targetPrometheusUrlPlaceholder, - targetOpsgenieUrlPlaceholder, - sectionHash, -} from '../constants'; -import createFlash, { FLASH_TYPES } from '~/flash'; - -export default { - i18n, - csrf, - targetOpsgenieUrlPlaceholder, - targetPrometheusUrlPlaceholder, - components: { - GlAlert, - GlButton, - GlForm, - GlFormGroup, - GlFormInput, - GlFormInputGroup, - GlFormSelect, - GlFormTextarea, - GlLink, - GlModal, - GlSprintf, - ClipboardButton, - ToggleButton, - }, - directives: { - 'gl-modal': GlModalDirective, - }, - inject: ['prometheus', 'generic', 'opsgenie'], - data() { - return { - loading: false, - selectedIntegration: integrationTypes[0].value, - options: integrationTypes, - active: false, - token: '', - targetUrl: '', - feedback: { - variant: 'danger', - feedbackMessage: '', - isFeedbackDismissed: false, - }, - testAlert: { - json: null, - error: null, - }, - canSaveForm: false, - serverError: null, - }; - }, - computed: { - sections() { - return [ - { - text: this.$options.i18n.usageSection, - url: this.generic.alertsUsageUrl, - }, - { - text: this.$options.i18n.setupSection, - url: this.generic.alertsSetupUrl, - }, - ]; - }, - isPrometheus() { - return this.selectedIntegration === 'PROMETHEUS'; - }, - isOpsgenie() { - return this.selectedIntegration === 'OPSGENIE'; - }, - selectedIntegrationType() { - switch (this.selectedIntegration) { - case 'HTTP': { - return { - url: this.generic.url, - token: this.generic.token, - active: this.generic.active, - resetKey: this.resetKey.bind(this), - }; - } - case 'PROMETHEUS': { - return { - url: this.prometheus.url, - token: this.prometheus.token, - active: this.prometheus.active, - resetKey: this.resetKey.bind(this, 'PROMETHEUS'), - targetUrl: this.prometheus.prometheusApiUrl, - }; - } - case 'OPSGENIE': { - return { - targetUrl: this.opsgenie.opsgenieMvcTargetUrl, - active: this.opsgenie.active, - }; - } - default: { - return {}; - } - } - }, - showFeedbackMsg() { - return this.feedback.feedbackMessage && !this.isFeedbackDismissed; - }, - showAlertSave() { - return ( - this.feedback.feedbackMessage === this.$options.i18n.testAlertFailed && - !this.isFeedbackDismissed - ); - }, - prometheusInfo() { - return this.isPrometheus ? this.$options.i18n.prometheusInfo : ''; - }, - jsonIsValid() { - return this.testAlert.error === null; - }, - canTestAlert() { - return this.active && this.testAlert.json !== null; - }, - canSaveConfig() { - return !this.loading && this.canSaveForm; - }, - baseUrlPlaceholder() { - return this.isOpsgenie - ? this.$options.targetOpsgenieUrlPlaceholder - : this.$options.targetPrometheusUrlPlaceholder; - }, - }, - watch: { - 'testAlert.json': debounce(function debouncedJsonValidate() { - this.validateJson(); - }, JSON_VALIDATE_DELAY), - targetUrl(oldVal, newVal) { - if (newVal && oldVal !== this.selectedIntegrationType.targetUrl) { - this.canSaveForm = true; - } - }, - }, - mounted() { - if (this.prometheus.active || this.generic.active || !this.opsgenie.opsgenieMvcIsAvailable) { - this.removeOpsGenieOption(); - } else if (this.opsgenie.active) { - this.setOpsgenieAsDefault(); - } - this.active = this.selectedIntegrationType.active; - this.token = this.selectedIntegrationType.token ?? ''; - }, - methods: { - 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 => { - if (el.value !== 'OPSGENIE') { - return { ...el, disabled: true }; - } - return { ...el, disabled: false }; - }); - this.selectedIntegration = this.options.find(({ value }) => value === 'OPSGENIE').value; - if (this.targetUrl === null) { - this.targetUrl = this.selectedIntegrationType.targetUrl; - } - }, - removeOpsGenieOption() { - this.options = this.options.map(el => { - if (el.value !== 'OPSGENIE') { - return { ...el, disabled: false }; - } - return { ...el, disabled: true }; - }); - }, - resetFormValues() { - this.testAlert.json = null; - this.targetUrl = this.selectedIntegrationType.targetUrl; - this.active = this.selectedIntegrationType.active; - }, - dismissFeedback() { - this.serverError = null; - this.feedback = { ...this.feedback, feedbackMessage: null }; - this.isFeedbackDismissed = false; - }, - resetKey(key) { - const fn = key === 'PROMETHEUS' ? this.resetPrometheusKey() : this.resetGenericKey(); - - return fn - .then(({ data: { token } }) => { - this.token = token; - this.setFeedback({ feedbackMessage: this.$options.i18n.tokenRest, variant: 'success' }); - }) - .catch(() => { - this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' }); - }); - }, - resetGenericKey() { - this.dismissFeedback(); - return service.updateGenericKey({ - endpoint: this.generic.formPath, - params: { service: { token: '' } }, - }); - }, - resetPrometheusKey() { - return service.updatePrometheusKey({ endpoint: this.prometheus.prometheusResetKeyPath }); - }, - toggleService(value) { - this.canSaveForm = true; - this.active = value; - }, - toggle(value) { - return this.isPrometheus ? this.togglePrometheusActive(value) : this.toggleActivated(value); - }, - toggleActivated(value) { - this.loading = true; - const path = this.isOpsgenie ? this.opsgenie.formPath : this.generic.formPath; - return service - .updateGenericActive({ - endpoint: path, - params: this.isOpsgenie - ? { service: { opsgenie_mvc_target_url: this.targetUrl, opsgenie_mvc_enabled: value } } - : { service: { active: value } }, - }) - .then(() => this.notifySuccessAndReload()) - .catch(({ response: { data: { errors } = {} } = {} }) => { - this.createUserErrorMessage(errors); - this.setFeedback({ - feedbackMessage: this.$options.i18n.errorMsg, - variant: 'danger', - }); - }) - .finally(() => { - this.loading = false; - this.canSaveForm = false; - }); - }, - reload() { - if (!doesHashExistInUrl(sectionHash)) { - window.location.hash = sectionHash; - } - window.location.reload(); - }, - togglePrometheusActive(value) { - this.loading = true; - return service - .updatePrometheusActive({ - endpoint: this.prometheus.prometheusFormPath, - params: { - token: this.$options.csrf.token, - config: value, - url: this.targetUrl, - redirect: window.location, - }, - }) - .then(() => this.notifySuccessAndReload()) - .catch(({ response: { data: { errors } = {} } = {} }) => { - this.createUserErrorMessage(errors); - this.setFeedback({ - feedbackMessage: this.$options.i18n.errorMsg, - variant: 'danger', - }); - }) - .finally(() => { - this.loading = false; - this.canSaveForm = false; - }); - }, - notifySuccessAndReload() { - createFlash({ message: this.$options.i18n.changesSaved, type: FLASH_TYPES.NOTICE }); - setTimeout(() => this.reload(), 1000); - }, - setFeedback({ feedbackMessage, variant }) { - this.feedback = { feedbackMessage, variant }; - }, - validateJson() { - this.testAlert.error = null; - try { - JSON.parse(this.testAlert.json); - } catch (e) { - this.testAlert.error = JSON.stringify(e.message); - } - }, - validateTestAlert() { - this.loading = true; - this.dismissFeedback(); - this.validateJson(); - return service - .updateTestAlert({ - endpoint: this.selectedIntegrationType.url, - data: this.testAlert.json, - token: this.selectedIntegrationType.token, - }) - .then(() => { - this.setFeedback({ - feedbackMessage: this.$options.i18n.testAlertSuccess, - variant: 'success', - }); - }) - .catch(() => { - this.setFeedback({ - feedbackMessage: this.$options.i18n.testAlertFailed, - variant: 'danger', - }); - }) - .finally(() => { - this.loading = false; - }); - }, - onSubmit() { - this.dismissFeedback(); - this.toggle(this.active); - }, - onReset() { - this.testAlert.json = null; - this.dismissFeedback(); - this.targetUrl = this.selectedIntegrationType.targetUrl; - - if (this.canSaveForm) { - this.canSaveForm = false; - this.active = this.selectedIntegrationType.active; - } - }, - }, -}; -</script> - -<template> - <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset"> - <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="selectedIntegration" - :options="options" - data-testid="alert-settings-select" - @change="resetFormValues" - /> - <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/4390" - target="_blank" - >{{ content }}</gl-link - > - </template> - </gl-sprintf> - </span> - </gl-form-group> - <gl-form-group :label="$options.i18n.activeLabel" label-for="active"> - <toggle-button - id="active" - :disabled-input="loading" - :is-loading="loading" - :value="active" - @change="toggleService" - /> - </gl-form-group> - <gl-form-group - v-if="isOpsgenie || isPrometheus" - :label="$options.i18n.apiBaseUrlLabel" - label-for="api-url" - > - <gl-form-input - id="api-url" - v-model="targetUrl" - type="url" - :placeholder="baseUrlPlaceholder" - :disabled="!active" - /> - <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"> - <gl-form-input-group id="url" readonly :value="selectedIntegrationType.url"> - <template #append> - <clipboard-button - :text="selectedIntegrationType.url" - :title="$options.i18n.copyToClipboard" - class="gl-m-0!" - /> - </template> - </gl-form-input-group> - <span class="gl-text-gray-500"> - {{ prometheusInfo }} - </span> - </gl-form-group> - <gl-form-group :label="$options.i18n.tokenLabel" label-for="authorization-key"> - <gl-form-input-group id="authorization-key" class="gl-mb-2" readonly :value="token"> - <template #append> - <clipboard-button - :text="token" - :title="$options.i18n.copyToClipboard" - class="gl-m-0!" - /> - </template> - </gl-form-input-group> - <gl-button v-gl-modal.tokenModal :disabled="!active" class="gl-mt-3">{{ - $options.i18n.resetKey - }}</gl-button> - <gl-modal - modal-id="tokenModal" - :title="$options.i18n.resetKey" - :ok-title="$options.i18n.resetKey" - ok-variant="danger" - @ok="selectedIntegrationType.resetKey" - > - {{ $options.i18n.restKeyInfo }} - </gl-modal> - </gl-form-group> - <gl-form-group - :label="$options.i18n.alertJson" - label-for="alert-json" - :invalid-feedback="testAlert.error" - > - <gl-form-textarea - id="alert-json" - v-model.trim="testAlert.json" - :disabled="!active" - :state="jsonIsValid" - :placeholder="$options.i18n.alertJsonPlaceholder" - rows="6" - max-rows="10" - /> - </gl-form-group> - - <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 variant="success" category="primary" :disabled="!canSaveConfig" @click="onSubmit"> - {{ __('Save changes') }} - </gl-button> - <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset"> - {{ __('Cancel') }} - </gl-button> - </div> - </gl-form> -</template> |