Changes the delete custom metric alert

ee/app/assets/javascripts/pages/projects/prometheus/metrics/edit/delete_custom_metric_modal.vue

+<script>
+import { GlModal, GlModalDirective, GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlModal,
+    GlButton,
+  },
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
+  props: {
+    deleteMetricUrl: {
+      type: String,
+      required: true,
+    },
+    csrfToken: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$refs.form.submit();
+    },
+  },
+  descriptionText: s__(
+    `Metrics|You're about to permanently delete this metric. This cannot be undone.`,
+  ),
+  modalId: 'delete-custom-metric-modal',
+};
+</script>
+<template>
+  <div class="d-inline-block float-right mr-3">
+    <gl-button v-gl-modal="$options.modalId" variant="danger"> {{ __('Delete') }} </gl-button>
+    <gl-modal
+      :title="s__('Metrics|Delete metric?')"
+      :ok-title="s__('Metrics|Delete metric')"
+      :modal-id="$options.modalId"
+      ok-variant="danger"
+      @ok="onSubmit"
+    >
+      {{ $options.descriptionText }}
+
+      <form ref="form" :action="deleteMetricUrl" method="post">
+        <input type="hidden" name="_method" value="delete" />
+        <input :value="csrfToken" type="hidden" name="authenticity_token" />
+      </form>
+    </gl-modal>
+  </div>
+</template>

ee/app/assets/javascripts/pages/projects/prometheus/metrics/edit/index.js

+import Vue from 'vue';
+import csrf from '~/lib/utils/csrf';
+import DeleteCustomMetricModal from './delete_custom_metric_modal.vue';
+
+const initDeleteCustomMetricLogic = () => {
+  const deleteCustomMetricModalEl = document.getElementById('delete-custom-metric-modal-wrapper');
+
+  if (deleteCustomMetricModalEl) {
+    const { deleteMetricUrl } = deleteCustomMetricModalEl.dataset;
+
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: deleteCustomMetricModalEl,
+      components: {
+        DeleteCustomMetricModal,
+      },
+      methods: {},
+      render(createElement) {
+        return createElement('delete-custom-metric-modal', {
+          props: { deleteMetricUrl, csrfToken: csrf.token },
+        });
+      },
+    });
+  }
+};
+
+document.addEventListener('DOMContentLoaded', initDeleteCustomMetricLogic);

ee/app/views/projects/prometheus/metrics/_form.html.haml

@@ -56,4 +56,4 @@
       = f.submit save_button_text, class: 'btn btn-success'
       = link_to _('Cancel'), edit_project_service_path(project, PrometheusService), class: 'btn btn-default float-right'
       - if metric.persisted?
-        = link_to _('Delete'), project_prometheus_metric_path(project, metric), data: { confirm: s_("This will delete the custom metric, Are you sure?") }, method: :delete, class: "btn btn-danger float-right append-right-default"
+        #delete-custom-metric-modal-wrapper{ data: { delete_metric_url: project_prometheus_metric_path(project, metric) } }

ee/changelogs/unreleased/jivl-add-vue-modal-delete-custom-metric.yml

+---
+title: Change the delete custom metric alert
+merge_request: 8430
+author:
+type: changed

ee/spec/features/projects/services/prometheus_custom_metrics_spec.rb

+require 'spec_helper'
+
+describe 'Prometheus custom metrics', :js do
+  let(:project) { create(:project) }
+  let(:user) { create(:user) }
+  let!(:prometheus_metric) { create(:prometheus_metric, project: project) }
+
+  before do
+    project.add_maintainer(user)
+    sign_in(user)
+
+    visit(project_settings_integrations_path(project))
+
+    click_link('Prometheus')
+
+    fill_in_prometheus_integration
+
+    click_link('Prometheus')
+  end
+
+  def fill_in_prometheus_integration
+    check('Active')
+    fill_in('API URL', with: 'http://prometheus.example.com')
+    click_button('Save changes')
+  end
+
+  it 'Deletes a custom metric' do
+    wait_for_requests
+
+    first('.custom-metric-link-bold').click
+
+    click_button('Delete')
+    click_button('Delete metric')
+
+    wait_for_requests
+
+    expect(all('.custom-metric-link-bold').count).to eq(0)
+  end
+end

locale/gitlab.pot

@@ -5253,6 +5253,12 @@ msgstr ""
 msgid "Metrics|Create metric"
 msgstr ""
 
+msgid "Metrics|Delete metric"
+msgstr ""
+
+msgid "Metrics|Delete metric?"
+msgstr ""
+
 msgid "Metrics|Edit metric"
 msgstr ""
 
@@ -5328,6 +5334,9 @@ msgstr ""
 msgid "Metrics|Y-axis label"
 msgstr ""
 
+msgid "Metrics|You're about to permanently delete this metric. This cannot be undone."
+msgstr ""
+
 msgid "Metrics|e.g. HTTP requests"
 msgstr ""
 
@@ -8451,9 +8460,6 @@ msgstr ""
 msgid "This user will be the author of all events in the activity feed that are the result of an update, like new branches being created or new commits being pushed to existing branches. Upon creation or when reassigning you can only assign yourself to be the mirror user."
 msgstr ""
 
-msgid "This will delete the custom metric, Are you sure?"
-msgstr ""
-
 msgid "Those emails automatically become issues (with the comments becoming the email conversation) listed here."
 msgstr ""