Add latest changes from gitlab-org/gitlab@master

5 files changed, 164 insertions, 3 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 0ceea21fda3..cebe501139c 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -394,6 +394,7 @@ export default {
         >
           <dashboards-dropdown
             id="monitor-dashboards-dropdown"
+            data-qa-selector="dashboards_filter_dropdown"
             class="mb-0 d-flex"
             toggle-class="dropdown-menu-toggle"
             :default-branch="defaultBranch"
@@ -458,6 +459,7 @@ export default {
           label-size="sm"
           label-for="monitor-time-window-dropdown"
           class="col-sm-auto col-md-auto col-lg-auto"
+          data-qa-selector="show_last_dropdown"
         >
           <date-time-picker
             ref="dateTimePicker"
@@ -533,6 +535,7 @@ export default {
               v-if="selectedDashboard.can_edit"
               class="mt-1 js-edit-link"
               :href="selectedDashboard.project_blob_path"
+              data-qa-selector="edit_dashboard_button"
               >{{ __('Edit dashboard') }}</gl-button
             >
 
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
index e678957c1e5..58eb8a9df8e 100644
--- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
+++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue
@@ -92,8 +92,7 @@ export default {
     <p class="text-muted">
       {{
         s__(`Metrics|You can save a copy of this dashboard to your repository
-      so it can be customized. Select a file name and branch to 
-      save it.`)
+      so it can be customized. Select a file name and branch to save it.`)
       }}
     </p>
     <gl-form-group
@@ -104,7 +103,13 @@ export default {
       label-size="sm"
       label-for="fileName"
     >
-      <gl-form-input id="fileName" ref="fileName" v-model="form.fileName" :required="true" />
+      <gl-form-input
+        id="fileName"
+        ref="fileName"
+        v-model="form.fileName"
+        data-qa-selector="duplicate_dashboard_filename_field"
+        :required="true"
+      />
     </gl-form-group>
     <gl-form-group :label="__('Branch')" label-size="sm" label-for="branch">
       <gl-form-radio-group
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
index 2d77f2686f7..56016cb980c 100644
--- a/app/assets/javascripts/pages/projects/services/edit/index.js
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -1,5 +1,6 @@
 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import PrometheusAlerts from '~/prometheus_alerts';
 import initAlertsSettings from '~/alerts_service_settings';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -12,5 +13,6 @@ document.addEventListener('DOMContentLoaded', () => {
     prometheusMetrics.loadActiveMetrics();
   }
 
+  PrometheusAlerts();
   initAlertsSettings(document.querySelector('.js-alerts-service-settings'));
 });
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,
+        },
+      });
+    },
+  });
+};