1 files changed, 12 insertions, 11 deletions
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
index 8d5eb24ed1d..672761af1cf 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
@@ -3,6 +3,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
+import { PAGE_CONFIG } from '../constants';
 
 export default {
   i18n: {
@@ -11,11 +12,6 @@ export default {
     ),
     UPDATE_ALERT_STATUS_INSTRUCTION: s__('AlertManagement|Please try again.'),
   },
-  statuses: {
-    TRIGGERED: s__('AlertManagement|Triggered'),
-    ACKNOWLEDGED: s__('AlertManagement|Acknowledged'),
-    RESOLVED: s__('AlertManagement|Resolved'),
-  },
   components: {
     GlDropdown,
     GlDropdownItem,
@@ -42,6 +38,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    statuses: {
+      type: Object,
+      required: false,
+      default: () => PAGE_CONFIG.OPERATIONS.STATUSES,
+    },
   },
   computed: {
     dropdownClass() {
@@ -57,13 +58,13 @@ export default {
           mutation: updateAlertStatusMutation,
           variables: {
             iid: this.alert.iid,
-            status: status.toUpperCase(),
+            status,
             projectPath: this.projectPath,
           },
         })
         .then((resp) => {
           if (this.trackAlertStatusUpdateOptions) {
-            this.trackStatusUpdate(status);
+            this.trackStatusUpdate(this.statuses[status]);
           }
           const errors = resp.data?.updateAlertStatus?.errors || [];
 
@@ -99,7 +100,7 @@ export default {
     <gl-dropdown
       ref="dropdown"
       right
-      :text="$options.statuses[alert.status]"
+      :text="statuses[alert.status]"
       class="w-100"
       toggle-class="dropdown-menu-toggle"
       @keydown.esc.native="$emit('hide-dropdown')"
@@ -110,12 +111,12 @@ export default {
       </p>
       <div class="dropdown-content dropdown-body">
         <gl-dropdown-item
-          v-for="(label, field) in $options.statuses"
+          v-for="(label, field) in statuses"
           :key="field"
           data-testid="statusDropdownItem"
-          :active="label.toUpperCase() === alert.status"
+          :active="field === alert.status"
           :active-class="'is-active'"
-          @click="updateAlertStatus(label)"
+          @click="updateAlertStatus(field)"
         >
           {{ label }}
         </gl-dropdown-item>