Auto-select single metric alert

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

@@ -177,6 +177,13 @@ export default {
         prometheus_metric_id: this.prometheusMetricId,
       });
     },
+    handleShown() {
+      if (this.configuredAlert) {
+        this.selectQuery(this.configuredAlert);
+      } else if (this.relevantQueries.length === 1) {
+        this.selectQuery(this.relevantQueries[0].metricId);
+      }
+    },
     resetAlertData() {
       this.operator = null;
       this.threshold = null;
@@ -212,7 +219,7 @@ export default {
     :ok-disabled="formDisabled"
     @ok="handleSubmit"
     @hidden="handleHidden"
-    @shown="selectQuery(configuredAlert)"
+    @shown="handleShown"
   >
     <div v-if="errorMessage" class="alert-modal-message danger_message">{{ errorMessage }}</div>
     <div class="alert-form">

changelogs/unreleased/210232-select-the-first-option-if-there-is-only-one-metric-option-on-a.yml

+---
+title: Select the first option if there is only one metric option on alerts dropdown.
+merge_request: 29857
+author: Gilang Gumilar
+type: added

spec/frontend/monitoring/components/alert_widget_form_spec.js

@@ -127,6 +127,38 @@ describe('AlertWidgetForm', () => {
     expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]);
   });
 
+  it('sets selectedAlert to the first relevantQueries if there is only one option on modal show', () => {
+    createComponent({
+      ...propsWithAlertData,
+      configuredAlert: '',
+    });
+
+    modal().vm.$emit('shown');
+
+    expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]);
+  });
+
+  it('does not set selectedAlert to the first relevantQueries if there is more than one option on modal show', () => {
+    createComponent({
+      relevantQueries: [
+        {
+          metricId: '8',
+          alertPath: 'alert',
+          label: 'alert-label',
+        },
+        {
+          metricId: '9',
+          alertPath: 'alert',
+          label: 'alert-label',
+        },
+      ],
+    });
+
+    modal().vm.$emit('shown');
+
+    expect(wrapper.vm.selectedAlert).toEqual({});
+  });
+
   describe('with existing alert', () => {
     beforeEach(() => {
       createComponent(propsWithAlertData);