Pre-populate prometheus alert modal

ee/app/assets/javascripts/monitoring/components/alert_widget.vue

@@ -104,6 +104,9 @@ export default {
     formattedFiringAlerts() {
       return this.firingAlerts.map(alert => this.formatAlertSummary(alert.alert_path));
     },
+    configuredAlert() {
+      return this.hasAlerts ? values(this.alertsToManage)[0].metricId : '';
+    },
   },
   created() {
     this.service = new AlertsService({ alertsEndpoint: this.alertsEndpoint });
@@ -271,6 +274,7 @@ export default {
       :alerts-to-manage="alertsToManage"
       :relevant-queries="relevantQueries"
       :error-message="errorMessage"
+      :configured-alert="configuredAlert"
       :modal-id="modalId"
       @create="handleCreate"
       @update="handleUpdate"

ee/app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -61,6 +61,11 @@ export default {
       required: false,
       default: '',
     },
+    configuredAlert: {
+      type: String,
+      required: false,
+      default: '',
+    },
     alertsToManage: {
       type: Object,
       required: false,
@@ -207,6 +212,7 @@ export default {
     :ok-disabled="formDisabled"
     @ok="handleSubmit"
     @hidden="handleHidden"
+    @shown="selectQuery(configuredAlert)"
   >
     <div v-if="errorMessage" class="alert-modal-message danger_message">{{ errorMessage }}</div>
     <div class="alert-form">

ee/changelogs/unreleased/212596-pre-populate-prometheus-alert-modal.yml

+---
+title: Pre-populate prometheus alert modal
+merge_request: 28291
+author: Gilang Gumilar
+type: added

ee/spec/frontend/monitoring/components/alert_widget_form_spec.js

@@ -26,6 +26,7 @@ describe('AlertWidgetForm', () => {
     alertsToManage: {
       alert: { alert_path: alertPath, operator: '<', threshold: 5, metricId },
     },
+    configuredAlert: metricId,
   };
 
   function createComponent(props = {}) {
@@ -118,6 +119,14 @@ describe('AlertWidgetForm', () => {
     expect(wrapper.vm.prometheusMetricId).toBe(null);
   });
 
+  it('sets selectedAlert to the provided configuredAlert on modal show', () => {
+    createComponent(propsWithAlertData);
+
+    modal().vm.$emit('shown');
+
+    expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]);
+  });
+
   describe('with existing alert', () => {
     beforeEach(() => {
       createComponent(propsWithAlertData);