diff options
Diffstat (limited to 'app/assets')
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, + }, + }); + }, + }); +}; |