From 50d3404de3a887c6b9331ab88be92f7ec9b2ace8 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Wed, 23 Jan 2019 15:24:25 +1100
Subject: [PATCH 01/15] Add Alerts section to Prometheus Settings page

Allow configuring alerts for external Prometheus servers
---
 .../services/prometheus/_alerts.html.haml     | 13 +++++++++
 .../services/prometheus/_show.html.haml       |  9 +++++++
 .../pages/projects/services/edit/index.js     |  3 +++
 .../javascripts/prometheus_alerts/index.js    | 13 +++++++++
 .../prometheus_alerts/reset_key.vue           | 27 +++++++++++++++++++
 5 files changed, 65 insertions(+)
 create mode 100644 app/views/projects/services/prometheus/_alerts.html.haml
 create mode 100644 ee/app/assets/javascripts/prometheus_alerts/index.js
 create mode 100644 ee/app/assets/javascripts/prometheus_alerts/reset_key.vue

diff --git a/app/views/projects/services/prometheus/_alerts.html.haml b/app/views/projects/services/prometheus/_alerts.html.haml
new file mode 100644
index 00000000000000..0f6944e62024f8
--- /dev/null
+++ b/app/views/projects/services/prometheus/_alerts.html.haml
@@ -0,0 +1,13 @@
+- learn_more_path = '/TODO'
+- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
+%p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+
+- url = 'https://gitlab.biz/group/project/prometheus/alerts/notify.json'
+
+.form-group
+  .input-group
+    = text_field_tag 'alerts-url', url, label: _('URL'), readonly: true, class: "form-control js-select-on-focus"
+    %span.input-group-append
+      = clipboard_button(text: url, placement: "left", class: "btn btn-default")
+
+#js-settings-prometheus-alerts{ data: { authorization_key: 'TODO1232456789', change_key_url: '/update_key_todo' } }
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index 9d4574c4590200..71d1cb140f4a35 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -8,3 +8,12 @@
 
   .col-lg-9
     = render 'projects/services/prometheus/metrics', project: @project
+
+.row.py-4.border-top.js-prometheus-alerts
+  .col-lg-3
+    %h4.prepend-top-0
+      = s_('Alerts')
+    %p
+      = _('Receive alerts from manually configured Prometheus servers.')
+  .col-lg-9
+    = render 'projects/services/prometheus/alerts', project: @project
diff --git a/ee/app/assets/javascripts/pages/projects/services/edit/index.js b/ee/app/assets/javascripts/pages/projects/services/edit/index.js
index 42139b804ffd9c..9e1a16174b417e 100644
--- a/ee/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/ee/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -1,5 +1,6 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusMetrics from 'ee/prometheus_metrics/prometheus_metrics';
+import PrometheusAlerts from 'ee/prometheus_alerts';
 
 document.addEventListener('DOMContentLoaded', () => {
   const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
@@ -14,4 +15,6 @@ document.addEventListener('DOMContentLoaded', () => {
       prometheusMetrics.setNoIntegrationActiveState();
     }
   }
+
+  PrometheusAlerts();
 });
diff --git a/ee/app/assets/javascripts/prometheus_alerts/index.js b/ee/app/assets/javascripts/prometheus_alerts/index.js
new file mode 100644
index 00000000000000..2dbb1b77f41005
--- /dev/null
+++ b/ee/app/assets/javascripts/prometheus_alerts/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import ResetKey from './reset_key.vue';
+
+export default () => {
+  const el = document.querySelector('#js-settings-prometheus-alerts');
+
+  new Vue({
+    el,
+    render(createElement) {
+      return createElement(ResetKey);
+    },
+  });
+};
\ No newline at end of file
diff --git a/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
new file mode 100644
index 00000000000000..8b4746090436aa
--- /dev/null
+++ b/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
@@ -0,0 +1,27 @@
+<script>
+import { GlFormInput, GlModal } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'
+
+export default {
+  components: {
+    GlFormInput,
+    GlModal,
+    ClipboardButton,
+  },
+  data() {
+    return {
+      key: '1234',
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="form-group">
+    <label for="authorization-key">{{__('Authorization key')}}</label>
+    <div class="input-group">
+      <gl-form-input id="authorization-key" :readonly="true" :value="key" />
+      <clipboard-button :text="key" :title="__('Copy key')" />
+    </div>
+  </div>
+</template>
-- 
GitLab


From d7630ae9731274c0ba90618c8e62808fdbb0ab03 Mon Sep 17 00:00:00 2001
From: Peter Leitzen <pleitzen@gitlab.com>
Date: Wed, 23 Jan 2019 12:57:00 +0100
Subject: [PATCH 02/15] Use real notification URL

---
 app/views/projects/services/prometheus/_alerts.html.haml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/projects/services/prometheus/_alerts.html.haml b/app/views/projects/services/prometheus/_alerts.html.haml
index 0f6944e62024f8..51b188202327e1 100644
--- a/app/views/projects/services/prometheus/_alerts.html.haml
+++ b/app/views/projects/services/prometheus/_alerts.html.haml
@@ -2,12 +2,12 @@
 - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
 %p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
-- url = 'https://gitlab.biz/group/project/prometheus/alerts/notify.json'
+- notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 
 .form-group
   .input-group
-    = text_field_tag 'alerts-url', url, label: _('URL'), readonly: true, class: "form-control js-select-on-focus"
+    = text_field_tag 'alerts-url', notify_url, label: _('URL'), readonly: true, class: "form-control js-select-on-focus"
     %span.input-group-append
-      = clipboard_button(text: url, placement: "left", class: "btn btn-default")
+      = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
 
 #js-settings-prometheus-alerts{ data: { authorization_key: 'TODO1232456789', change_key_url: '/update_key_todo' } }
-- 
GitLab


From 3bbe9dc800934304bfbf39a0449bb66bc0fde4b5 Mon Sep 17 00:00:00 2001
From: Peter Leitzen <pleitzen@gitlab.com>
Date: Wed, 23 Jan 2019 13:00:12 +0100
Subject: [PATCH 03/15] Use real alert token

---
 app/views/projects/services/prometheus/_alerts.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/projects/services/prometheus/_alerts.html.haml b/app/views/projects/services/prometheus/_alerts.html.haml
index 51b188202327e1..1bb19a8341514f 100644
--- a/app/views/projects/services/prometheus/_alerts.html.haml
+++ b/app/views/projects/services/prometheus/_alerts.html.haml
@@ -2,6 +2,7 @@
 - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
 %p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
 
+- authorization_key = @project.alerting_setting.try(:token)
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 
 .form-group
@@ -10,4 +11,4 @@
     %span.input-group-append
       = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
 
-#js-settings-prometheus-alerts{ data: { authorization_key: 'TODO1232456789', change_key_url: '/update_key_todo' } }
+#js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: '/update_key_todo' } }
-- 
GitLab


From 2f18785b6de0a26018217795c439425446b496d0 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Thu, 24 Jan 2019 14:33:47 +1100
Subject: [PATCH 04/15] Move template to EE

---
 .../services/prometheus/_alerts.html.haml     | 14 -----------
 .../services/prometheus/_show.html.haml       |  9 +-------
 .../prometheus/_external_alerts.html.haml     | 23 +++++++++++++++++++
 3 files changed, 24 insertions(+), 22 deletions(-)
 delete mode 100644 app/views/projects/services/prometheus/_alerts.html.haml
 create mode 100644 ee/app/views/projects/services/prometheus/_external_alerts.html.haml

diff --git a/app/views/projects/services/prometheus/_alerts.html.haml b/app/views/projects/services/prometheus/_alerts.html.haml
deleted file mode 100644
index 1bb19a8341514f..00000000000000
--- a/app/views/projects/services/prometheus/_alerts.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- learn_more_path = '/TODO'
-- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
-%p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-
-- authorization_key = @project.alerting_setting.try(:token)
-- notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
-
-.form-group
-  .input-group
-    = text_field_tag 'alerts-url', notify_url, label: _('URL'), readonly: true, class: "form-control js-select-on-focus"
-    %span.input-group-append
-      = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
-
-#js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: '/update_key_todo' } }
diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index 71d1cb140f4a35..a1b23ebed7c706 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -9,11 +9,4 @@
   .col-lg-9
     = render 'projects/services/prometheus/metrics', project: @project
 
-.row.py-4.border-top.js-prometheus-alerts
-  .col-lg-3
-    %h4.prepend-top-0
-      = s_('Alerts')
-    %p
-      = _('Receive alerts from manually configured Prometheus servers.')
-  .col-lg-9
-    = render 'projects/services/prometheus/alerts', project: @project
+= render_if_exists 'projects/services/prometheus/external_alerts', project: @project
\ No newline at end of file
diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
new file mode 100644
index 00000000000000..f81a72a63006a4
--- /dev/null
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -0,0 +1,23 @@
+- return unless can?(current_user, :read_prometheus_alerts, @project)
+
+- learn_more_path = '/TODO'
+- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
+- authorization_key = @project.alerting_setting.try(:token)
+- notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
+
+.row.py-4.border-top.js-prometheus-alerts
+  .col-lg-3
+    %h4.prepend-top-0
+      = s_('Alerts')
+    %p
+      = _('Receive alerts from manually configured Prometheus servers.')
+  .col-lg-9
+    %p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    .form-group
+      = label_tag :notify_url, _('URL')
+      .input-group
+        = text_field_tag 'alerts-url', notify_url, readonly: true, class: "form-control js-select-on-focus"
+        %span.input-group-append
+          = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
+
+    #js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: '/update_key_todo' } }
\ No newline at end of file
-- 
GitLab


From 598cfd16f8b48941698b4b5435f7b79b56d1e899 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Thu, 24 Jan 2019 14:58:35 +1100
Subject: [PATCH 05/15] Fix modal text, and cleanup template

---
 .../prometheus_alerts/reset_key.vue           | 27 ++++++++++++++-----
 .../prometheus/_external_alerts.html.haml     |  4 +--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
index 8b4746090436aa..267a7a233ca338 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
@@ -1,13 +1,17 @@
 <script>
-import { GlFormInput, GlModal } from '@gitlab/ui';
+import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'
 
 export default {
   components: {
+    GlButton,
     GlFormInput,
     GlModal,
     ClipboardButton,
   },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
   data() {
     return {
       key: '1234',
@@ -17,11 +21,22 @@ export default {
 </script>
 
 <template>
-  <div class="form-group">
-    <label for="authorization-key">{{__('Authorization key')}}</label>
-    <div class="input-group">
-      <gl-form-input id="authorization-key" :readonly="true" :value="key" />
-      <clipboard-button :text="key" :title="__('Copy key')" />
+  <div>
+    <div class="form-group">
+      <label for="authorization-key">{{__('Authorization key')}}</label>
+      <div class="input-group">
+        <gl-form-input id="authorization-key" :readonly="true" :value="key" />
+        <clipboard-button :text="key" :title="__('Copy to clipboard')" />
+      </div>
     </div>
+    <gl-modal
+      modal-id="authKeyModal"
+      title="Reset authorization key?"
+      ok-title="Reset authorization key"
+      ok-variant="danger"
+    >
+      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>{{ __('Reset key') }}</gl-button>
   </div>
 </template>
diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index f81a72a63006a4..a697077445586f 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -2,8 +2,8 @@
 
 - learn_more_path = '/TODO'
 - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
-- authorization_key = @project.alerting_setting.try(:token)
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
+- authorization_key = @project.alerting_setting.try(:token)
 
 .row.py-4.border-top.js-prometheus-alerts
   .col-lg-3
@@ -16,7 +16,7 @@
     .form-group
       = label_tag :notify_url, _('URL')
       .input-group
-        = text_field_tag 'alerts-url', notify_url, readonly: true, class: "form-control js-select-on-focus"
+        = text_field_tag 'notify_url', notify_url, readonly: true, class: "form-control js-select-on-focus"
         %span.input-group-append
           = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
 
-- 
GitLab


From 87acf7943fd8769efcceb281e00fbb06a872d362 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Mon, 28 Jan 2019 16:03:00 +1100
Subject: [PATCH 06/15] Send resetKey request to backend

Init reset_key component with props from template
Add i18n for modal text
Add component specs
---
 .../components/reset_key.vue                  | 70 +++++++++++++++++++
 .../javascripts/prometheus_alerts/index.js    | 15 +++-
 .../prometheus_alerts/reset_key.vue           | 42 -----------
 .../prometheus/_external_alerts.html.haml     |  2 +-
 .../components/reset_key_spec.js              | 58 +++++++++++++++
 5 files changed, 142 insertions(+), 45 deletions(-)
 create mode 100644 ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
 delete mode 100644 ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
 create mode 100644 ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
new file mode 100644
index 00000000000000..e6ca2ebdaccd4d
--- /dev/null
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -0,0 +1,70 @@
+<script>
+import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+
+export default {
+  components: {
+    GlButton,
+    GlFormInput,
+    GlModal,
+    ClipboardButton,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
+  props: {
+    initialAuthorizationKey: {
+      type: String,
+      required: true,
+    },
+    changeKeyUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      authorizationKey: '',
+    };
+  },
+  created() {
+    this.authorizationKey = this.initialAuthorizationKey;
+  },
+  methods: {
+    resetKey() {
+      axios.get(this.changeKeyUrl).then(res => {
+        this.authorizationKey = res.data.token;
+      }).catch(() => {
+        Flash(__('Failed to reset key. Please try again.'));
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="form-group">
+      <label for="authorization-key">{{__('Authorization key')}}</label>
+      <div class="input-group">
+        <gl-form-input id="authorization-key" :readonly="true" :value="authorizationKey" />
+        <span class="input-group-append">
+          <clipboard-button :text="authorizationKey" :title="__('Copy to clipboard')" />
+        </span>
+      </div>
+    </div>
+    <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>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/prometheus_alerts/index.js b/ee/app/assets/javascripts/prometheus_alerts/index.js
index 2dbb1b77f41005..e046f5cc244602 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/index.js
+++ b/ee/app/assets/javascripts/prometheus_alerts/index.js
@@ -1,13 +1,24 @@
 import Vue from 'vue';
-import ResetKey from './reset_key.vue';
+import ResetKey from './components/reset_key.vue';
 
 export default () => {
   const el = document.querySelector('#js-settings-prometheus-alerts');
 
+  const {
+    authorizationKey,
+    changeKeyUrl,
+  } = el.dataset;
+
+  // eslint-disable-next-line no-new
   new Vue({
     el,
     render(createElement) {
-      return createElement(ResetKey);
+      return createElement(ResetKey, {
+        props: {
+          initialAuthorizationKey: authorizationKey || '',
+          changeKeyUrl,
+        },
+      });
     },
   });
 };
\ No newline at end of file
diff --git a/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
deleted file mode 100644
index 267a7a233ca338..00000000000000
--- a/ee/app/assets/javascripts/prometheus_alerts/reset_key.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'
-
-export default {
-  components: {
-    GlButton,
-    GlFormInput,
-    GlModal,
-    ClipboardButton,
-  },
-  directives: {
-    'gl-modal': GlModalDirective,
-  },
-  data() {
-    return {
-      key: '1234',
-    };
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="form-group">
-      <label for="authorization-key">{{__('Authorization key')}}</label>
-      <div class="input-group">
-        <gl-form-input id="authorization-key" :readonly="true" :value="key" />
-        <clipboard-button :text="key" :title="__('Copy to clipboard')" />
-      </div>
-    </div>
-    <gl-modal
-      modal-id="authKeyModal"
-      title="Reset authorization key?"
-      ok-title="Reset authorization key"
-      ok-variant="danger"
-    >
-      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>{{ __('Reset key') }}</gl-button>
-  </div>
-</template>
diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index a697077445586f..451b2ac99ce899 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -18,6 +18,6 @@
       .input-group
         = text_field_tag 'notify_url', notify_url, readonly: true, class: "form-control js-select-on-focus"
         %span.input-group-append
-          = clipboard_button(text: notify_url, placement: "left", class: "btn btn-default")
+          = clipboard_button(text: notify_url, class: "btn btn-default")
 
     #js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: '/update_key_todo' } }
\ No newline at end of file
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
new file mode 100644
index 00000000000000..0a39391a920811
--- /dev/null
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -0,0 +1,58 @@
+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import ResetKey from 'ee/prometheus_alerts/components/reset_key.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Dashboard', () => {
+  let Component;
+  let mock;
+  let vm;
+
+  const props = {
+    initialAuthorizationKey: 'abcd1234',
+    changeKeyUrl: '/updateKeyUrl',
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    Component = Vue.extend(ResetKey);
+
+    setFixtures('<div class="flash-container"></div><div id="reset-key"></div>');
+
+    vm = mountComponent(Component, props, '#reset-key');
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('shows auth key and copy button', () => {
+    expect(vm.$el.querySelector('#authorization-key').value).toEqual('abcd1234');
+    expect(vm.$el).toContainElement('button[data-original-title="Copy to clipboard"]');
+    expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Reset key');
+  });
+
+  it('reset updates key', (done) => {
+    mock.onGet(props.changeKeyUrl).reply(200, { token: 'newToken' });
+
+    vm.resetKey();
+
+    setTimeout(() => {
+      expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
+      done();
+    });
+  });
+
+  it('reset key failure shows error', (done) => {
+    mock.onGet(props.changeKeyUrl).reply(500);
+
+    vm.resetKey();
+
+    setTimeout(() => {
+      expect(vm.$el.querySelector('#authorization-key').value).toEqual(props.initialAuthorizationKey);
+      expect(document.querySelector('.flash-container').innerText.trim()).toEqual('Failed to reset key. Please try again.');
+      done();
+    });
+  });
+});
-- 
GitLab


From f1e290a584322c615c7e3e615a872c08a5eb78a6 Mon Sep 17 00:00:00 2001
From: Peter Leitzen <pleitzen@gitlab.com>
Date: Tue, 29 Jan 2019 12:01:14 +0100
Subject: [PATCH 07/15] Fill-in change key url

---
 .../projects/services/prometheus/_external_alerts.html.haml     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index 451b2ac99ce899..f6d4f2b42dc931 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -20,4 +20,4 @@
         %span.input-group-append
           = clipboard_button(text: notify_url, class: "btn btn-default")
 
-    #js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: '/update_key_todo' } }
\ No newline at end of file
+    #js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
-- 
GitLab


From 0a2d2bc7fc664756092e6a1eafa259368d3e45cb Mon Sep 17 00:00:00 2001
From: Peter Leitzen <pleitzen@gitlab.com>
Date: Tue, 29 Jan 2019 12:02:34 +0100
Subject: [PATCH 08/15] Prefer POST to reset tokens

That prevents these requests to be cached by proxies.
---
 .../javascripts/prometheus_alerts/components/reset_key.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index e6ca2ebdaccd4d..984b7b0621b9d7 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -35,7 +35,7 @@ export default {
   },
   methods: {
     resetKey() {
-      axios.get(this.changeKeyUrl).then(res => {
+      axios.post(this.changeKeyUrl).then(res => {
         this.authorizationKey = res.data.token;
       }).catch(() => {
         Flash(__('Failed to reset key. Please try again.'));
-- 
GitLab


From d7e18fd849ee3614f0792965a0f4bb509fbe3f12 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Thu, 31 Jan 2019 14:08:30 +1100
Subject: [PATCH 09/15] Move notifyUrl to  vue

Real help page path link
Fix up some test and translation typos
---
 .../services/prometheus/_show.html.haml       |  2 +-
 .../components/reset_key.vue                  | 41 +++++++++++++------
 .../javascripts/prometheus_alerts/index.js    |  8 ++--
 .../prometheus/_external_alerts.html.haml     | 15 ++-----
 .../components/reset_key_spec.js              | 24 +++++++----
 locale/gitlab.pot                             | 27 ++++++++++++
 6 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/app/views/projects/services/prometheus/_show.html.haml b/app/views/projects/services/prometheus/_show.html.haml
index a1b23ebed7c706..6aafa85e99a720 100644
--- a/app/views/projects/services/prometheus/_show.html.haml
+++ b/app/views/projects/services/prometheus/_show.html.haml
@@ -9,4 +9,4 @@
   .col-lg-9
     = render 'projects/services/prometheus/metrics', project: @project
 
-= render_if_exists 'projects/services/prometheus/external_alerts', project: @project
\ No newline at end of file
+= render_if_exists 'projects/services/prometheus/external_alerts', project: @project
diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 984b7b0621b9d7..69f52f1493a21a 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -1,13 +1,15 @@
 <script>
-import { GlButton, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'
+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 { __ } from '~/locale';
 import Flash from '~/flash';
 
 export default {
+  copyToClipboard: __('Copy to clipboard'),
   components: {
     GlButton,
+    GlFormGroup,
     GlFormInput,
     GlModal,
     ClipboardButton,
@@ -24,6 +26,10 @@ export default {
       type: String,
       required: true,
     },
+    notifyUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -35,11 +41,14 @@ export default {
   },
   methods: {
     resetKey() {
-      axios.post(this.changeKeyUrl).then(res => {
-        this.authorizationKey = res.data.token;
-      }).catch(() => {
-        Flash(__('Failed to reset key. Please try again.'));
-      });
+      axios
+        .post(this.changeKeyUrl)
+        .then(res => {
+          this.authorizationKey = res.data.token;
+        })
+        .catch(() => {
+          Flash(__('Failed to reset key. Please try again.'));
+        });
     },
   },
 };
@@ -47,15 +56,22 @@ export default {
 
 <template>
   <div>
-    <div class="form-group">
-      <label for="authorization-key">{{__('Authorization key')}}</label>
+    <gl-form-group :label="__('URL')" label-for="notify-url">
+      <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">
       <div class="input-group">
         <gl-form-input id="authorization-key" :readonly="true" :value="authorizationKey" />
         <span class="input-group-append">
-          <clipboard-button :text="authorizationKey" :title="__('Copy to clipboard')" />
+          <clipboard-button :text="authorizationKey" :title="$options.copyToClipboard" />
         </span>
       </div>
-    </div>
+    </gl-form-group>
     <gl-modal
       modal-id="authKeyModal"
       :title="__('Reset authorization key?')"
@@ -63,7 +79,8 @@ export default {
       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.
+      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>
   </div>
diff --git a/ee/app/assets/javascripts/prometheus_alerts/index.js b/ee/app/assets/javascripts/prometheus_alerts/index.js
index e046f5cc244602..4a7e3851f9d655 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/index.js
+++ b/ee/app/assets/javascripts/prometheus_alerts/index.js
@@ -4,10 +4,7 @@ import ResetKey from './components/reset_key.vue';
 export default () => {
   const el = document.querySelector('#js-settings-prometheus-alerts');
 
-  const {
-    authorizationKey,
-    changeKeyUrl,
-  } = el.dataset;
+  const { authorizationKey, changeKeyUrl, notifyUrl } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -17,8 +14,9 @@ export default () => {
         props: {
           initialAuthorizationKey: authorizationKey || '',
           changeKeyUrl,
+          notifyUrl,
         },
       });
     },
   });
-};
\ No newline at end of file
+};
diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index f6d4f2b42dc931..bfa794df47da79 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -1,6 +1,6 @@
 - return unless can?(current_user, :read_prometheus_alerts, @project)
 
-- learn_more_path = '/TODO'
+- learn_more_path = help_page_path('administration/monitoring/prometheus/index', anchor: 'configuring-prometheus')
 - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 - authorization_key = @project.alerting_setting.try(:token)
@@ -8,16 +8,9 @@
 .row.py-4.border-top.js-prometheus-alerts
   .col-lg-3
     %h4.prepend-top-0
-      = s_('Alerts')
+      = _('Alerts')
     %p
       = _('Receive alerts from manually configured Prometheus servers.')
   .col-lg-9
-    %p= s_('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-    .form-group
-      = label_tag :notify_url, _('URL')
-      .input-group
-        = text_field_tag 'notify_url', notify_url, readonly: true, class: "form-control js-select-on-focus"
-        %span.input-group-append
-          = clipboard_button(text: notify_url, class: "btn btn-default")
-
-    #js-settings-prometheus-alerts{ data: { authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
+    %p= _('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
+    #js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
index 0a39391a920811..71d5b03bf4c643 100644
--- a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -12,6 +12,7 @@ describe('Dashboard', () => {
   const props = {
     initialAuthorizationKey: 'abcd1234',
     changeKeyUrl: '/updateKeyUrl',
+    notifyUrl: '/root/autodevops-deploy/prometheus/alerts/notify.json',
   };
 
   beforeEach(() => {
@@ -25,16 +26,18 @@ describe('Dashboard', () => {
 
   afterEach(() => {
     mock.restore();
+    vm.$destroy();
   });
 
-  it('shows auth key and copy button', () => {
-    expect(vm.$el.querySelector('#authorization-key').value).toEqual('abcd1234');
+  it('shows fields and buttons', () => {
+    expect(vm.$el.querySelector('#notify-url').value).toEqual(props.notifyUrl);
+    expect(vm.$el.querySelector('#authorization-key').value).toEqual(props.initialAuthorizationKey);
     expect(vm.$el).toContainElement('button[data-original-title="Copy to clipboard"]');
     expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Reset key');
   });
 
-  it('reset updates key', (done) => {
-    mock.onGet(props.changeKeyUrl).reply(200, { token: 'newToken' });
+  it('reset updates key', done => {
+    mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
 
     vm.resetKey();
 
@@ -44,14 +47,19 @@ describe('Dashboard', () => {
     });
   });
 
-  it('reset key failure shows error', (done) => {
-    mock.onGet(props.changeKeyUrl).reply(500);
+  it('reset key failure shows error', done => {
+    mock.onPost(props.changeKeyUrl).replyOnce(500);
 
     vm.resetKey();
 
     setTimeout(() => {
-      expect(vm.$el.querySelector('#authorization-key').value).toEqual(props.initialAuthorizationKey);
-      expect(document.querySelector('.flash-container').innerText.trim()).toEqual('Failed to reset key. Please try again.');
+      expect(vm.$el.querySelector('#authorization-key').value).toEqual(
+        props.initialAuthorizationKey,
+      );
+
+      expect(document.querySelector('.flash-container').innerText.trim()).toEqual(
+        'Failed to reset key. Please try again.',
+      );
       done();
     });
   });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a666a28fae071b..9008c4b12450b8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -607,6 +607,9 @@ msgid_plural "Alerts"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Alerts"
+msgstr ""
+
 msgid "All"
 msgstr ""
 
@@ -1051,6 +1054,9 @@ msgstr ""
 msgid "Authorization code:"
 msgstr ""
 
+msgid "Authorization key"
+msgstr ""
+
 msgid "Authorization was granted by entering your username and password in the application."
 msgstr ""
 
@@ -3797,6 +3803,9 @@ msgstr ""
 msgid "Failed to remove the pipeline schedule"
 msgstr ""
 
+msgid "Failed to reset key. Please try again."
+msgstr ""
+
 msgid "Failed to signing using smartcard authentication"
 msgstr ""
 
@@ -7607,6 +7616,9 @@ msgstr ""
 msgid "Real-time features"
 msgstr ""
 
+msgid "Receive alerts from manually configured Prometheus servers."
+msgstr ""
+
 msgid "Recent searches"
 msgstr ""
 
@@ -7822,9 +7834,18 @@ msgstr ""
 msgid "Resend invite"
 msgstr ""
 
+msgid "Reset authorization key"
+msgstr ""
+
+msgid "Reset authorization key?"
+msgstr ""
+
 msgid "Reset health check access token"
 msgstr ""
 
+msgid "Reset key"
+msgstr ""
+
 msgid "Reset runners registration token"
 msgstr ""
 
@@ -9777,6 +9798,9 @@ msgstr ""
 msgid "To preserve performance only <strong>%{display_size} of %{real_size}</strong> files are displayed."
 msgstr ""
 
+msgid "To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab."
+msgstr ""
+
 msgid "To set up SAML authentication for your group through an identity provider like Azure, Okta, Onelogin, Ping Identity, or your custom SAML 2.0 provider:"
 msgstr ""
 
@@ -9921,6 +9945,9 @@ msgstr ""
 msgid "Type"
 msgstr ""
 
+msgid "URL"
+msgstr ""
+
 msgid "Unable to load the diff. %{button_try_again}"
 msgstr ""
 
-- 
GitLab


From 6ee4ba16aa8d575b1d0646c4ef1af09f18588062 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Mon, 4 Feb 2019 10:02:26 +1100
Subject: [PATCH 10/15] Make initial key generation button clearer. Fix Label
 UI

---
 .../components/reset_key.vue                  | 43 ++++++----
 .../components/reset_key_spec.js              | 82 +++++++++++++------
 locale/gitlab.pot                             |  6 ++
 3 files changed, 88 insertions(+), 43 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 69f52f1493a21a..34a6c40fb51cc9 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -33,12 +33,9 @@ export default {
   },
   data() {
     return {
-      authorizationKey: '',
+      authorizationKey: this.initialAuthorizationKey,
     };
   },
-  created() {
-    this.authorizationKey = this.initialAuthorizationKey;
-  },
   methods: {
     resetKey() {
       axios
@@ -56,7 +53,7 @@ export default {
 
 <template>
   <div>
-    <gl-form-group :label="__('URL')" label-for="notify-url">
+    <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">
@@ -64,7 +61,11 @@ export default {
         </span>
       </div>
     </gl-form-group>
-    <gl-form-group :label="__('Authorization key')" label-for="authorization-key">
+    <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">
@@ -72,16 +73,24 @@ export default {
         </span>
       </div>
     </gl-form-group>
-    <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 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>
 </template>
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
index 71d5b03bf4c643..120a73a853d420 100644
--- a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -18,10 +18,7 @@ describe('Dashboard', () => {
   beforeEach(() => {
     mock = new MockAdapter(axios);
     Component = Vue.extend(ResetKey);
-
     setFixtures('<div class="flash-container"></div><div id="reset-key"></div>');
-
-    vm = mountComponent(Component, props, '#reset-key');
   });
 
   afterEach(() => {
@@ -29,38 +26,71 @@ describe('Dashboard', () => {
     vm.$destroy();
   });
 
-  it('shows fields and buttons', () => {
-    expect(vm.$el.querySelector('#notify-url').value).toEqual(props.notifyUrl);
-    expect(vm.$el.querySelector('#authorization-key').value).toEqual(props.initialAuthorizationKey);
-    expect(vm.$el).toContainElement('button[data-original-title="Copy to clipboard"]');
-    expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Reset key');
-  });
+  describe('authorization key exists', () => {
+    beforeEach(() => {
+      props.initialAuthorizationKey = 'abcd1234';
+      vm = mountComponent(Component, props, '#reset-key');
+    });
+
+    it('shows fields and buttons', () => {
+      expect(vm.$el.querySelector('#notify-url').value).toEqual(props.notifyUrl);
+      expect(vm.$el.querySelector('#authorization-key').value).toEqual(
+        props.initialAuthorizationKey,
+      );
+
+      expect(vm.$el).toContainElement('button[data-original-title="Copy to clipboard"]');
+      expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Reset key');
+    });
+
+    it('reset updates key', done => {
+      mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
 
-  it('reset updates key', done => {
-    mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
+      vm.resetKey();
 
-    vm.resetKey();
+      setTimeout(() => {
+        expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
+        done();
+      });
+    });
+
+    it('reset key failure shows error', done => {
+      mock.onPost(props.changeKeyUrl).replyOnce(500);
+
+      vm.resetKey();
 
-    setTimeout(() => {
-      expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
-      done();
+      setTimeout(() => {
+        expect(vm.$el.querySelector('#authorization-key').value).toEqual(
+          props.initialAuthorizationKey,
+        );
+
+        expect(document.querySelector('.flash-container').innerText.trim()).toEqual(
+          'Failed to reset key. Please try again.',
+        );
+        done();
+      });
     });
   });
 
-  it('reset key failure shows error', done => {
-    mock.onPost(props.changeKeyUrl).replyOnce(500);
+  describe('authorization key has not been set', () => {
+    beforeEach(() => {
+      props.initialAuthorizationKey = '';
+      vm = mountComponent(Component, props, '#reset-key');
+    });
 
-    vm.resetKey();
+    it('shows Generate Key button', () => {
+      expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Generate key');
+      expect(vm.$el.querySelector('#authorization-key').value).toEqual('');
+    });
 
-    setTimeout(() => {
-      expect(vm.$el.querySelector('#authorization-key').value).toEqual(
-        props.initialAuthorizationKey,
-      );
+    it('Generate key button triggers key change', done => {
+      mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
 
-      expect(document.querySelector('.flash-container').innerText.trim()).toEqual(
-        'Failed to reset key. Please try again.',
-      );
-      done();
+      vm.$el.querySelector('.js-reset-auth-key').click();
+
+      setTimeout(() => {
+        expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
+        done();
+      });
     });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9008c4b12450b8..b25eae4bd8dbc2 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4154,6 +4154,9 @@ msgstr ""
 msgid "Generate a default set of labels"
 msgstr ""
 
+msgid "Generate key"
+msgstr ""
+
 msgid "Geo"
 msgstr ""
 
@@ -7849,6 +7852,9 @@ msgstr ""
 msgid "Reset runners registration token"
 msgstr ""
 
+msgid "Resetting the authorization key will invalidate the previous key. Existing alert configurations will need to be updated with the new key."
+msgstr ""
+
 msgid "Resolve all discussions in new issue"
 msgstr ""
 
-- 
GitLab


From 949af083c2042cab084aa21d05a2d13fc33831f8 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Mon, 4 Feb 2019 22:11:22 +1100
Subject: [PATCH 11/15] use vue test utils for specs

---
 .../components/reset_key.vue                  |  4 +-
 .../components/reset_key_spec.js              | 60 ++++++++++---------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 34a6c40fb51cc9..77c89bbfd44fc2 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -3,7 +3,7 @@ import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
-import Flash from '~/flash';
+import createFlash from '~/flash';
 
 export default {
   copyToClipboard: __('Copy to clipboard'),
@@ -44,7 +44,7 @@ export default {
           this.authorizationKey = res.data.token;
         })
         .catch(() => {
-          Flash(__('Failed to reset key. Please try again.'));
+          createFlash(__('Failed to reset key. Please try again.'));
         });
     },
   },
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
index 120a73a853d420..804f008f9221ed 100644
--- a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -1,15 +1,17 @@
-import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import ResetKey from 'ee/prometheus_alerts/components/reset_key.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { GlModal } from '@gitlab/ui';
 
-describe('Dashboard', () => {
+describe('ResetKey', () => {
   let Component;
   let mock;
   let vm;
+  const localVue = createLocalVue();
 
-  const props = {
+  const propsData = {
     initialAuthorizationKey: 'abcd1234',
     changeKeyUrl: '/updateKeyUrl',
     notifyUrl: '/root/autodevops-deploy/prometheus/alerts/notify.json',
@@ -17,50 +19,52 @@ describe('Dashboard', () => {
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    Component = Vue.extend(ResetKey);
+    Component = localVue.extend(ResetKey);
     setFixtures('<div class="flash-container"></div><div id="reset-key"></div>');
   });
 
   afterEach(() => {
     mock.restore();
-    vm.$destroy();
+    vm.destroy();
   });
 
   describe('authorization key exists', () => {
     beforeEach(() => {
-      props.initialAuthorizationKey = 'abcd1234';
-      vm = mountComponent(Component, props, '#reset-key');
+      propsData.initialAuthorizationKey = 'abcd1234';
+      vm = shallowMount(Component, {
+        propsData
+      });
     });
 
     it('shows fields and buttons', () => {
-      expect(vm.$el.querySelector('#notify-url').value).toEqual(props.notifyUrl);
-      expect(vm.$el.querySelector('#authorization-key').value).toEqual(
-        props.initialAuthorizationKey,
+      expect(vm.find('#notify-url').attributes('value')).toEqual(propsData.notifyUrl);
+      expect(vm.find('#authorization-key').attributes('value')).toEqual(
+        propsData.initialAuthorizationKey,
       );
 
-      expect(vm.$el).toContainElement('button[data-original-title="Copy to clipboard"]');
-      expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Reset key');
+      expect(vm.findAll(ClipboardButton).length).toBe(2);
+      expect(vm.find('.js-reset-auth-key').text()).toEqual('Reset key');
     });
 
     it('reset updates key', done => {
-      mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
+      mock.onPost(propsData.changeKeyUrl).replyOnce(200, { token: 'newToken' });
 
-      vm.resetKey();
+      vm.find(GlModal).vm.$emit('ok');
 
       setTimeout(() => {
-        expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
+        expect(vm.find('#authorization-key').attributes('value')).toEqual('newToken');
         done();
       });
     });
 
     it('reset key failure shows error', done => {
-      mock.onPost(props.changeKeyUrl).replyOnce(500);
+      mock.onPost(propsData.changeKeyUrl).replyOnce(500);
 
-      vm.resetKey();
+      vm.find(GlModal).vm.$emit('ok');
 
       setTimeout(() => {
-        expect(vm.$el.querySelector('#authorization-key').value).toEqual(
-          props.initialAuthorizationKey,
+        expect(vm.find('#authorization-key').attributes('value')).toEqual(
+          propsData.initialAuthorizationKey,
         );
 
         expect(document.querySelector('.flash-container').innerText.trim()).toEqual(
@@ -73,22 +77,24 @@ describe('Dashboard', () => {
 
   describe('authorization key has not been set', () => {
     beforeEach(() => {
-      props.initialAuthorizationKey = '';
-      vm = mountComponent(Component, props, '#reset-key');
+      propsData.initialAuthorizationKey = '';
+      vm = shallowMount(Component, {
+        propsData,
+      });
     });
 
     it('shows Generate Key button', () => {
-      expect(vm.$el.querySelector('.js-reset-auth-key').innerText).toEqual('Generate key');
-      expect(vm.$el.querySelector('#authorization-key').value).toEqual('');
+      expect(vm.find('.js-reset-auth-key').text()).toEqual('Generate key');
+      expect(vm.find('#authorization-key').attributes('value')).toEqual('');
     });
 
     it('Generate key button triggers key change', done => {
-      mock.onPost(props.changeKeyUrl).replyOnce(200, { token: 'newToken' });
+      mock.onPost(propsData.changeKeyUrl).replyOnce(200, { token: 'newToken' });
 
-      vm.$el.querySelector('.js-reset-auth-key').click();
+      vm.find('.js-reset-auth-key').vm.$emit('click');
 
       setTimeout(() => {
-        expect(vm.$el.querySelector('#authorization-key').value).toEqual('newToken');
+        expect(vm.find('#authorization-key').attributes('value')).toEqual('newToken');
         done();
       });
     });
-- 
GitLab


From 0ef9e63a05bcfb2291cf5f514a8a7df6db03f9f4 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Mon, 4 Feb 2019 22:16:32 +1100
Subject: [PATCH 12/15] use default prop value for empty key

---
 .../javascripts/prometheus_alerts/components/reset_key.vue     | 3 ++-
 ee/app/assets/javascripts/prometheus_alerts/index.js           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 77c89bbfd44fc2..23f43498d08bb5 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -20,7 +20,8 @@ export default {
   props: {
     initialAuthorizationKey: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     changeKeyUrl: {
       type: String,
diff --git a/ee/app/assets/javascripts/prometheus_alerts/index.js b/ee/app/assets/javascripts/prometheus_alerts/index.js
index 4a7e3851f9d655..2e14ac1adecc23 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/index.js
+++ b/ee/app/assets/javascripts/prometheus_alerts/index.js
@@ -12,7 +12,7 @@ export default () => {
     render(createElement) {
       return createElement(ResetKey, {
         props: {
-          initialAuthorizationKey: authorizationKey || '',
+          initialAuthorizationKey: authorizationKey,
           changeKeyUrl,
           notifyUrl,
         },
-- 
GitLab


From 83775573b2814112968649b1d29fe3189c632362 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Tue, 5 Feb 2019 15:05:23 +1100
Subject: [PATCH 13/15] Move static info from haml to Vue

---
 .../components/reset_key.vue                  | 103 +++++++++++-------
 .../prometheus/_external_alerts.html.haml     |  12 +-
 .../components/reset_key_spec.js              |   2 +-
 3 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 23f43498d08bb5..c9bb95d026f273 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -2,11 +2,21 @@
 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 { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
 
 export default {
   copyToClipboard: __('Copy to clipboard'),
+  sectionDescription: sprintf(
+    __(
+      'To receive alerts from manunally 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="https://docs.gitlab.com/ee/administration/monitoring/prometheus/index.html#configuring-prometheus" target="_blank" rel="noopener noreferrer">`,
+      linkEnd: '</a>',
+    },
+    false,
+  ),
   components: {
     GlButton,
     GlFormGroup,
@@ -53,45 +63,58 @@ export default {
 </script>
 
 <template>
-  <div>
-    <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"
+  <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="$options.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"
       >
-        {{
-          __(
-            '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 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/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index bfa794df47da79..21024b81d25fd9 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -1,16 +1,6 @@
 - return unless can?(current_user, :read_prometheus_alerts, @project)
 
-- learn_more_path = help_page_path('administration/monitoring/prometheus/index', anchor: 'configuring-prometheus')
-- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learn_more_path }
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 - authorization_key = @project.alerting_setting.try(:token)
 
-.row.py-4.border-top.js-prometheus-alerts
-  .col-lg-3
-    %h4.prepend-top-0
-      = _('Alerts')
-    %p
-      = _('Receive alerts from manually configured Prometheus servers.')
-  .col-lg-9
-    %p= _('To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-    #js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
+#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
index 804f008f9221ed..343dae351039b3 100644
--- a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -32,7 +32,7 @@ describe('ResetKey', () => {
     beforeEach(() => {
       propsData.initialAuthorizationKey = 'abcd1234';
       vm = shallowMount(Component, {
-        propsData
+        propsData,
       });
     });
 
-- 
GitLab


From 7f867c681a67ed6457f8736656c2ed580282a37c Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Tue, 5 Feb 2019 20:12:17 +1100
Subject: [PATCH 14/15] Update translations

---
 locale/gitlab.pot | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b25eae4bd8dbc2..80f1563eded2f8 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9804,7 +9804,7 @@ msgstr ""
 msgid "To preserve performance only <strong>%{display_size} of %{real_size}</strong> files are displayed."
 msgstr ""
 
-msgid "To receive alerts from manunally configured Prometheus services, add the following URL and Authorization key to your Prometheus webhook config file. Learn more about %{link_start}configuring Prometheus%{link_end} to send alerts to GitLab."
+msgid "To receive alerts from manunally 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."
 msgstr ""
 
 msgid "To set up SAML authentication for your group through an identity provider like Azure, Okta, Onelogin, Ping Identity, or your custom SAML 2.0 provider:"
-- 
GitLab


From bda92353c1639704f9581df841992bc8197b3261 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Tue, 5 Feb 2019 22:55:18 +1100
Subject: [PATCH 15/15] Don't build links on frontend

---
 .../components/reset_key.vue                  | 26 +++++++++++--------
 .../javascripts/prometheus_alerts/index.js    |  3 ++-
 .../prometheus/_external_alerts.html.haml     |  3 ++-
 .../components/reset_key_spec.js              |  1 +
 locale/gitlab.pot                             |  2 +-
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index c9bb95d026f273..72ae4d7585da6a 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/ee/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -7,16 +7,6 @@ import createFlash from '~/flash';
 
 export default {
   copyToClipboard: __('Copy to clipboard'),
-  sectionDescription: sprintf(
-    __(
-      'To receive alerts from manunally 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="https://docs.gitlab.com/ee/administration/monitoring/prometheus/index.html#configuring-prometheus" target="_blank" rel="noopener noreferrer">`,
-      linkEnd: '</a>',
-    },
-    false,
-  ),
   components: {
     GlButton,
     GlFormGroup,
@@ -41,10 +31,24 @@ export default {
       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: {
@@ -73,7 +77,7 @@ export default {
       </p>
     </div>
     <div class="col-lg-9">
-      <p v-html="$options.sectionDescription"></p>
+      <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" />
diff --git a/ee/app/assets/javascripts/prometheus_alerts/index.js b/ee/app/assets/javascripts/prometheus_alerts/index.js
index 2e14ac1adecc23..10ff65dfddde8c 100644
--- a/ee/app/assets/javascripts/prometheus_alerts/index.js
+++ b/ee/app/assets/javascripts/prometheus_alerts/index.js
@@ -4,7 +4,7 @@ import ResetKey from './components/reset_key.vue';
 export default () => {
   const el = document.querySelector('#js-settings-prometheus-alerts');
 
-  const { authorizationKey, changeKeyUrl, notifyUrl } = el.dataset;
+  const { authorizationKey, changeKeyUrl, notifyUrl, learnMoreUrl } = el.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -15,6 +15,7 @@ export default () => {
           initialAuthorizationKey: authorizationKey,
           changeKeyUrl,
           notifyUrl,
+          learnMoreUrl,
         },
       });
     },
diff --git a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
index 21024b81d25fd9..ab2cc84ddbf2ae 100644
--- a/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
+++ b/ee/app/views/projects/services/prometheus/_external_alerts.html.haml
@@ -2,5 +2,6 @@
 
 - notify_url = notify_project_prometheus_alerts_url(@project, format: :json)
 - authorization_key = @project.alerting_setting.try(:token)
+- learn_more_url = help_page_path('administration/monitoring/prometheus/index', anchor: 'configuring-prometheus')
 
-#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project) } }
+#js-settings-prometheus-alerts{ data: { notify_url: notify_url, authorization_key: authorization_key, change_key_url: reset_alerting_token_project_settings_operations_path(@project), learn_more_url: learn_more_url } }
diff --git a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
index 343dae351039b3..87c006bc4cc232 100644
--- a/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
+++ b/ee/spec/javascripts/prometheus_alerts/components/reset_key_spec.js
@@ -15,6 +15,7 @@ describe('ResetKey', () => {
     initialAuthorizationKey: 'abcd1234',
     changeKeyUrl: '/updateKeyUrl',
     notifyUrl: '/root/autodevops-deploy/prometheus/alerts/notify.json',
+    learnMoreUrl: '/learnMore',
   };
 
   beforeEach(() => {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 80f1563eded2f8..b63ec541f69079 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -9804,7 +9804,7 @@ msgstr ""
 msgid "To preserve performance only <strong>%{display_size} of %{real_size}</strong> files are displayed."
 msgstr ""
 
-msgid "To receive alerts from manunally 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."
+msgid "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."
 msgstr ""
 
 msgid "To set up SAML authentication for your group through an identity provider like Azure, Okta, Onelogin, Ping Identity, or your custom SAML 2.0 provider:"
-- 
GitLab