2 files changed, 151 insertions, 0 deletions
diff --git a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
new file mode 100644
index 00000000000..3a03cd409a6
--- /dev/null
+++ b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -0,0 +1,124 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import axios from '~/lib/utils/axios_utils';
+import { __, sprintf } from '~/locale';
+import createFlash from '~/flash';
+
+export default {
+  copyToClipboard: __('Copy'),
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+    GlModal,
+    ClipboardButton,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
+  props: {
+    initialAuthorizationKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    changeKeyUrl: {
+      type: String,
+      required: true,
+    },
+    notifyUrl: {
+      type: String,
+      required: true,
+    },
+    learnMoreUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      authorizationKey: this.initialAuthorizationKey,
+      sectionDescription: sprintf(
+        __(
+          'To receive alerts from manually configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{linkStart}configuring Prometheus%{linkEnd} to send alerts to GitLab.',
+        ),
+        {
+          linkStart: `<a href="${this.learnMoreUrl}" target="_blank" rel="noopener noreferrer">`,
+          linkEnd: '</a>',
+        },
+        false,
+      ),
+    };
+  },
+  methods: {
+    resetKey() {
+      axios
+        .post(this.changeKeyUrl)
+        .then(res => {
+          this.authorizationKey = res.data.token;
+        })
+        .catch(() => {
+          createFlash(__('Failed to reset key. Please try again.'));
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="row py-4 border-top js-prometheus-alerts">
+    <div class="col-lg-3">
+      <h4 class="mt-0">
+        {{ __('Alerts') }}
+      </h4>
+      <p>
+        {{ __('Receive alerts from manually configured Prometheus servers.') }}
+      </p>
+    </div>
+    <div class="col-lg-9">
+      <p v-html="sectionDescription"></p>
+      <gl-form-group :label="__('URL')" label-for="notify-url" label-class="label-bold">
+        <div class="input-group">
+          <gl-form-input id="notify-url" :readonly="true" :value="notifyUrl" />
+          <span class="input-group-append">
+            <clipboard-button :text="notifyUrl" :title="$options.copyToClipboard" />
+          </span>
+        </div>
+      </gl-form-group>
+      <gl-form-group
+        :label="__('Authorization key')"
+        label-for="authorization-key"
+        label-class="label-bold"
+      >
+        <div class="input-group">
+          <gl-form-input id="authorization-key" :readonly="true" :value="authorizationKey" />
+          <span class="input-group-append">
+            <clipboard-button :text="authorizationKey" :title="$options.copyToClipboard" />
+          </span>
+        </div>
+      </gl-form-group>
+      <template v-if="authorizationKey.length > 0">
+        <gl-modal
+          modal-id="authKeyModal"
+          :title="__('Reset authorization key?')"
+          :ok-title="__('Reset authorization key')"
+          ok-variant="danger"
+          @ok="resetKey"
+        >
+          {{
+            __(
+              'Resetting the authorization key will invalidate the previous key. Existing alert configurations will need to be updated with the new key.',
+            )
+          }}
+        </gl-modal>
+        <gl-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{
+          __('Reset key')
+        }}</gl-button>
+      </template>
+      <gl-button v-else class="js-reset-auth-key" @click="resetKey">{{
+        __('Generate key')
+      }}</gl-button>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/prometheus_alerts/index.js b/app/assets/javascripts/prometheus_alerts/index.js
new file mode 100644
index 00000000000..a42f19e5245
--- /dev/null
+++ b/app/assets/javascripts/prometheus_alerts/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import ResetKey from './components/reset_key.vue';
+
+export default () => {
+  const el = document.querySelector('#js-settings-prometheus-alerts');
+
+  if (!el) {
+    return;
+  }
+
+  const { authorizationKey, changeKeyUrl, notifyUrl, learnMoreUrl } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    render(createElement) {
+      return createElement(ResetKey, {
+        props: {
+          initialAuthorizationKey: authorizationKey,
+          changeKeyUrl,
+          notifyUrl,
+          learnMoreUrl,
+        },
+      });
+    },
+  });
+};