Add latest changes from gitlab-org/gitlab@13-2-stable-ee

4 files changed, 716 insertions, 0 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
new file mode 100644
index 00000000000..18c9f82f052
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -0,0 +1,563 @@
+<script>
+import {
+  GlAlert,
+  GlButton,
+  GlForm,
+  GlFormGroup,
+  GlFormInput,
+  GlFormInputGroup,
+  GlFormTextarea,
+  GlLink,
+  GlModal,
+  GlModalDirective,
+  GlSprintf,
+  GlFormSelect,
+} from '@gitlab/ui';
+import { debounce } from 'lodash';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+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,
+  serviceOptions,
+  JSON_VALIDATE_DELAY,
+  targetPrometheusUrlPlaceholder,
+  targetOpsgenieUrlPlaceholder,
+} from '../constants';
+
+export default {
+  i18n,
+  csrf,
+  targetOpsgenieUrlPlaceholder,
+  targetPrometheusUrlPlaceholder,
+  components: {
+    GlAlert,
+    GlButton,
+    GlForm,
+    GlFormGroup,
+    GlFormInput,
+    GlFormInputGroup,
+    GlFormSelect,
+    GlFormTextarea,
+    GlLink,
+    GlModal,
+    GlSprintf,
+    ClipboardButton,
+    ToggleButton,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  props: {
+    prometheus: {
+      type: Object,
+      required: true,
+      validator: ({ activated }) => {
+        return activated !== undefined;
+      },
+    },
+    generic: {
+      type: Object,
+      required: true,
+      validator: ({ formPath }) => {
+        return formPath !== undefined;
+      },
+    },
+    opsgenie: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activated: {
+        generic: this.generic.activated,
+        prometheus: this.prometheus.activated,
+        opsgenie: this.opsgenie?.activated,
+      },
+      loading: false,
+      authorizationKey: {
+        generic: this.generic.initialAuthorizationKey,
+        prometheus: this.prometheus.prometheusAuthorizationKey,
+      },
+      selectedEndpoint: serviceOptions[0].value,
+      options: serviceOptions,
+      targetUrl: null,
+      feedback: {
+        variant: 'danger',
+        feedbackMessage: null,
+        isFeedbackDismissed: false,
+      },
+      serverError: null,
+      testAlert: {
+        json: null,
+        error: null,
+      },
+      canSaveForm: false,
+    };
+  },
+  computed: {
+    sections() {
+      return [
+        {
+          text: this.$options.i18n.usageSection,
+          url: this.generic.alertsUsageUrl,
+        },
+        {
+          text: this.$options.i18n.setupSection,
+          url: this.generic.alertsSetupUrl,
+        },
+      ];
+    },
+    isPrometheus() {
+      return this.selectedEndpoint === 'prometheus';
+    },
+    isOpsgenie() {
+      return this.selectedEndpoint === 'opsgenie';
+    },
+    selectedService() {
+      switch (this.selectedEndpoint) {
+        case 'generic': {
+          return {
+            url: this.generic.url,
+            authKey: this.authorizationKey.generic,
+            active: this.activated.generic,
+            resetKey: this.resetGenericKey.bind(this),
+          };
+        }
+        case 'prometheus': {
+          return {
+            url: this.prometheus.prometheusUrl,
+            authKey: this.authorizationKey.prometheus,
+            active: this.activated.prometheus,
+            resetKey: this.resetPrometheusKey.bind(this),
+            targetUrl: this.prometheus.prometheusApiUrl,
+          };
+        }
+        case 'opsgenie': {
+          return {
+            targetUrl: this.opsgenie.opsgenieMvcTargetUrl,
+            active: this.activated.opsgenie,
+          };
+        }
+        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.selectedService.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.selectedService.targetUrl) {
+        this.canSaveForm = true;
+      }
+    },
+  },
+  mounted() {
+    if (
+      this.activated.prometheus ||
+      this.activated.generic ||
+      !this.opsgenie.opsgenieMvcIsAvailable
+    ) {
+      this.removeOpsGenieOption();
+    } else if (this.activated.opsgenie) {
+      this.setOpsgenieAsDefault();
+    }
+  },
+  methods: {
+    createUserErrorMessage(errors) {
+      // eslint-disable-next-line prefer-destructuring
+      this.serverError = Object.values(errors)[0][0];
+    },
+    setOpsgenieAsDefault() {
+      this.options = this.options.map(el => {
+        if (el.value !== 'opsgenie') {
+          return { ...el, disabled: true };
+        }
+        return { ...el, disabled: false };
+      });
+      this.selectedEndpoint = this.options.find(({ value }) => value === 'opsgenie').value;
+      if (this.targetUrl === null) {
+        this.targetUrl = this.selectedService.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.selectedService.targetUrl;
+    },
+    dismissFeedback() {
+      this.serverError = null;
+      this.feedback = { ...this.feedback, feedbackMessage: null };
+      this.isFeedbackDismissed = false;
+    },
+    resetGenericKey() {
+      return service
+        .updateGenericKey({ endpoint: this.generic.formPath, params: { service: { token: '' } } })
+        .then(({ data: { token } }) => {
+          this.authorizationKey.generic = token;
+          this.setFeedback({ feedbackMessage: this.$options.i18n.authKeyRest, variant: 'success' });
+        })
+        .catch(() => {
+          this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' });
+        });
+    },
+    resetPrometheusKey() {
+      return service
+        .updatePrometheusKey({ endpoint: this.prometheus.prometheusResetKeyPath })
+        .then(({ data: { token } }) => {
+          this.authorizationKey.prometheus = token;
+          this.setFeedback({ feedbackMessage: this.$options.i18n.authKeyRest, variant: 'success' });
+        })
+        .catch(() => {
+          this.setFeedback({ feedbackMessage: this.$options.i18n.errorKeyMsg, variant: 'danger' });
+        });
+    },
+    toggleService(value) {
+      this.canSaveForm = true;
+      if (this.isPrometheus) {
+        this.activated.prometheus = value;
+      } else {
+        this.activated[this.selectedEndpoint] = value;
+      }
+    },
+    toggle(value) {
+      return this.isPrometheus ? this.togglePrometheusActive(value) : this.toggleActivated(value);
+    },
+    toggleActivated(value) {
+      this.loading = true;
+      return service
+        .updateGenericActive({
+          endpoint: this[this.selectedEndpoint].formPath,
+          params: this.isOpsgenie
+            ? { service: { opsgenie_mvc_target_url: this.targetUrl, opsgenie_mvc_enabled: value } }
+            : { service: { active: value } },
+        })
+        .then(() => {
+          this.activated[this.selectedEndpoint] = 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);
+        })
+        .catch(({ response: { data: { errors } = {} } = {} }) => {
+          this.createUserErrorMessage(errors);
+          this.setFeedback({
+            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
+            variant: 'danger',
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+          this.canSaveForm = false;
+        });
+    },
+    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.activated.prometheus = value;
+          this.toggleSuccess(value);
+          this.removeOpsGenieOption();
+        })
+        .catch(({ response: { data: { errors } = {} } = {} }) => {
+          this.createUserErrorMessage(errors);
+          this.setFeedback({
+            feedbackMessage: `${this.$options.i18n.errorMsg}.`,
+            variant: 'danger',
+          });
+        })
+        .finally(() => {
+          this.loading = false;
+          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',
+        });
+      }
+    },
+    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.validateJson();
+      return service
+        .updateTestAlert({
+          endpoint: this.selectedService.url,
+          data: this.testAlert.json,
+          authKey: this.selectedService.authKey,
+        })
+        .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.toggle(this.selectedService.active);
+    },
+    onReset() {
+      this.testAlert.json = null;
+      this.dismissFeedback();
+      this.targetUrl = this.selectedService.targetUrl;
+
+      if (this.canSaveForm) {
+        this.canSaveForm = false;
+        this.activated[this.selectedEndpoint] = this[this.selectedEndpoint].activated;
+      }
+    },
+  },
+};
+</script>
+
+<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(selectedService.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>
+    <gl-form @submit.prevent="onSubmit" @reset.prevent="onReset">
+      <gl-form-group
+        :label="$options.i18n.integrationsLabel"
+        label-for="integrations"
+        label-class="label-bold"
+      >
+        <gl-form-select
+          v-model="selectedEndpoint"
+          :options="options"
+          data-testid="alert-settings-select"
+          @change="resetFormValues"
+        />
+        <span class="gl-text-gray-400">
+          <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"
+                target="_blank"
+                >{{ content }}</gl-link
+              >
+            </template>
+          </gl-sprintf>
+        </span>
+      </gl-form-group>
+      <gl-form-group
+        :label="$options.i18n.activeLabel"
+        label-for="activated"
+        label-class="label-bold"
+      >
+        <toggle-button
+          id="activated"
+          :disabled-input="loading"
+          :is-loading="loading"
+          :value="selectedService.active"
+          @change="toggleService"
+        />
+      </gl-form-group>
+      <gl-form-group
+        v-if="isOpsgenie || isPrometheus"
+        :label="$options.i18n.apiBaseUrlLabel"
+        label-for="api-url"
+        label-class="label-bold"
+      >
+        <gl-form-input
+          id="api-url"
+          v-model="targetUrl"
+          type="url"
+          :placeholder="baseUrlPlaceholder"
+          :disabled="!selectedService.active"
+        />
+        <span class="gl-text-gray-400">
+          {{ $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-input-group id="url" readonly :value="selectedService.url">
+            <template #append>
+              <clipboard-button
+                :text="selectedService.url"
+                :title="$options.i18n.copyToClipboard"
+                class="gl-m-0!"
+              />
+            </template>
+          </gl-form-input-group>
+          <span class="gl-text-gray-400">
+            {{ prometheusInfo }}
+          </span>
+        </gl-form-group>
+        <gl-form-group
+          :label="$options.i18n.authKeyLabel"
+          label-for="authorization-key"
+          label-class="label-bold"
+        >
+          <gl-form-input-group
+            id="authorization-key"
+            class="gl-mb-2"
+            readonly
+            :value="selectedService.authKey"
+          >
+            <template #append>
+              <clipboard-button
+                :text="selectedService.authKey || ''"
+                :title="$options.i18n.copyToClipboard"
+                class="gl-m-0!"
+              />
+            </template>
+          </gl-form-input-group>
+          <gl-button v-gl-modal.authKeyModal :disabled="!selectedService.active" class="gl-mt-3">{{
+            $options.i18n.resetKey
+          }}</gl-button>
+          <gl-modal
+            modal-id="authKeyModal"
+            :title="$options.i18n.resetKey"
+            :ok-title="$options.i18n.resetKey"
+            ok-variant="danger"
+            @ok="selectedService.resetKey"
+          >
+            {{ $options.i18n.restKeyInfo }}
+          </gl-modal>
+        </gl-form-group>
+        <gl-form-group
+          :label="$options.i18n.alertJson"
+          label-for="alert-json"
+          label-class="label-bold"
+          :invalid-feedback="testAlert.error"
+        >
+          <gl-form-textarea
+            id="alert-json"
+            v-model.trim="testAlert.json"
+            :disabled="!selectedService.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 variant="default" category="primary" :disabled="!canSaveConfig" @click="onReset">
+          {{ __('Cancel') }}
+        </gl-button>
+      </div>
+    </gl-form>
+  </div>
+</template>
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
new file mode 100644
index 00000000000..d15e8619df4
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -0,0 +1,50 @@
+import { s__ } from '~/locale';
+
+export const i18n = {
+  usageSection: s__(
+    'AlertSettings|You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.',
+  ),
+  setupSection: s__(
+    "AlertSettings|Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
+  ),
+  errorMsg: s__('AlertSettings|There was an error updating the alert settings'),
+  errorKeyMsg: s__(
+    'AlertSettings|There was an error while trying to reset the key. Please refresh the page to try again.',
+  ),
+  restKeyInfo: s__(
+    'AlertSettings|Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.',
+  ),
+  endPointActivated: s__('AlertSettings|Alerts endpoint successfully activated.'),
+  changesSaved: s__('AlertSettings|Your changes were successfully updated.'),
+  prometheusInfo: s__('AlertSettings|Add URL and auth key to your Prometheus config file'),
+  integrationsInfo: s__(
+    'AlertSettings|Learn more about our %{linkStart}upcoming integrations%{linkEnd}',
+  ),
+  resetKey: s__('AlertSettings|Reset key'),
+  copyToClipboard: s__('AlertSettings|Copy'),
+  integrationsLabel: s__('AlertSettings|Integrations'),
+  apiBaseUrlLabel: s__('AlertSettings|API URL'),
+  authKeyLabel: s__('AlertSettings|Authorization key'),
+  urlLabel: s__('AlertSettings|Webhook URL'),
+  activeLabel: s__('AlertSettings|Active'),
+  apiBaseUrlHelpText: s__('AlertSettings|URL cannot be blank and must start with http or https'),
+  testAlertInfo: s__('AlertSettings|Test alert payload'),
+  alertJson: s__('AlertSettings|Alert test payload'),
+  alertJsonPlaceholder: s__('AlertSettings|Enter test alert JSON....'),
+  testAlertFailed: s__('AlertSettings|Test failed. Do you still want to save your changes anyway?'),
+  testAlertSuccess: s__(
+    'AlertSettings|Test alert sent successfully. If you have made other changes, please save them now.',
+  ),
+  authKeyRest: s__('AlertSettings|Authorization key has been successfully reset'),
+};
+
+export const serviceOptions = [
+  { value: 'generic', text: s__('AlertSettings|Generic') },
+  { value: 'prometheus', text: s__('AlertSettings|External Prometheus') },
+  { value: 'opsgenie', text: s__('AlertSettings|Opsgenie') },
+];
+
+export const JSON_VALIDATE_DELAY = 250;
+
+export const targetPrometheusUrlPlaceholder = 'http://prometheus.example.com/';
+export const targetOpsgenieUrlPlaceholder = 'https://app.opsgenie.com/alert/list/';
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
new file mode 100644
index 00000000000..a4c2bf6b18e
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import AlertSettingsForm from './components/alerts_settings_form.vue';
+
+export default el => {
+  if (!el) {
+    return null;
+  }
+
+  const {
+    prometheusActivated,
+    prometheusUrl,
+    prometheusAuthorizationKey,
+    prometheusFormPath,
+    prometheusResetKeyPath,
+    prometheusApiUrl,
+    activated: activatedStr,
+    alertsSetupUrl,
+    alertsUsageUrl,
+    formPath,
+    authorizationKey,
+    url,
+    opsgenieMvcAvailable,
+    opsgenieMvcFormPath,
+    opsgenieMvcEnabled,
+    opsgenieMvcTargetUrl,
+  } = el.dataset;
+
+  const genericActivated = parseBoolean(activatedStr);
+  const prometheusIsActivated = parseBoolean(prometheusActivated);
+  const opsgenieMvcActivated = parseBoolean(opsgenieMvcEnabled);
+  const opsgenieMvcIsAvailable = parseBoolean(opsgenieMvcAvailable);
+
+  const props = {
+    prometheus: {
+      activated: prometheusIsActivated,
+      prometheusUrl,
+      prometheusAuthorizationKey,
+      prometheusFormPath,
+      prometheusResetKeyPath,
+      prometheusApiUrl,
+    },
+    generic: {
+      alertsSetupUrl,
+      alertsUsageUrl,
+      activated: genericActivated,
+      formPath,
+      initialAuthorizationKey: authorizationKey,
+      url,
+    },
+    opsgenie: {
+      formPath: opsgenieMvcFormPath,
+      activated: opsgenieMvcActivated,
+      opsgenieMvcTargetUrl,
+      opsgenieMvcIsAvailable,
+    },
+  };
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(AlertSettingsForm, {
+        props,
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/alerts_settings/services/index.js b/app/assets/javascripts/alerts_settings/services/index.js
new file mode 100644
index 00000000000..c49992d4f57
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/services/index.js
@@ -0,0 +1,36 @@
+/* eslint-disable @gitlab/require-i18n-strings */
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  updateGenericKey({ endpoint, params }) {
+    return axios.put(endpoint, params);
+  },
+  updatePrometheusKey({ endpoint }) {
+    return axios.post(endpoint);
+  },
+  updateGenericActive({ endpoint, params }) {
+    return axios.put(endpoint, params);
+  },
+  updatePrometheusActive({ endpoint, params: { token, config, url, redirect } }) {
+    const data = new FormData();
+    data.set('_method', 'put');
+    data.set('authenticity_token', token);
+    data.set('service[manual_configuration]', config);
+    data.set('service[api_url]', url);
+    data.set('redirect_to', redirect);
+
+    return axios.post(endpoint, data, {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    });
+  },
+  updateTestAlert({ endpoint, data, authKey }) {
+    return axios.post(endpoint, data, {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authKey}`,
+      },
+    });
+  },
+};