Internationalize alert severity

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -15,7 +15,7 @@ import {
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import getAlerts from '../graphql/queries/getAlerts.query.graphql';
-import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants';
+import { ALERTS_STATUS, ALERTS_STATUS_TABS, ALERTS_SEVERITY_LABELS } from '../constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
@@ -68,6 +68,7 @@ export default {
     [ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
     [ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
   },
+  severityLabels: ALERTS_SEVERITY_LABELS,
   statusTabs: ALERTS_STATUS_TABS,
   components: {
     GlEmptyState,
@@ -185,14 +186,17 @@ export default {
         stacked="md"
       >
         <template #cell(severity)="{ item }">
-          <div class="d-inline-flex align-items-center justify-content-between">
+          <div
+            class="d-inline-flex align-items-center justify-content-between"
+            data-testid="severityField"
+          >
             <gl-icon
               class="mr-2"
               :size="12"
               :name="`severity-${item.severity.toLowerCase()}`"
               :class="`icon-${item.severity.toLowerCase()}`"
             />
-            {{ item.severity }}
+            {{ $options.severityLabels[item.severity] }}
           </div>
         </template>
 

app/assets/javascripts/alert_management/constants.js

 import { s__ } from '~/locale';
 
+export const ALERTS_SEVERITY_LABELS = {
+  CRITICAL: s__('AlertManagement|Critical'),
+  HIGH: s__('AlertManagement|High'),
+  MEDIUM: s__('AlertManagement|Medium'),
+  LOW: s__('AlertManagement|Low'),
+  INFO: s__('AlertManagement|Info'),
+  UNKNOWN: s__('AlertManagement|Unknown'),
+};
+
 export const ALERTS_STATUS = {
   OPEN: 'open',
   TRIGGERED: 'triggered',

locale/gitlab.pot

@@ -1721,6 +1721,9 @@ msgstr ""
 msgid "AlertManagement|Create issue"
 msgstr ""
 
+msgid "AlertManagement|Critical"
+msgstr ""
+
 msgid "AlertManagement|Display alerts from all your monitoring tools directly within GitLab. Streamline the investigation of your alerts and the escalation of alerts to incidents."
 msgstr ""
 
@@ -1739,6 +1742,18 @@ msgstr ""
 msgid "AlertManagement|Full Alert Details"
 msgstr ""
 
+msgid "AlertManagement|High"
+msgstr ""
+
+msgid "AlertManagement|Info"
+msgstr ""
+
+msgid "AlertManagement|Low"
+msgstr ""
+
+msgid "AlertManagement|Medium"
+msgstr ""
+
 msgid "AlertManagement|More information"
 msgstr ""
 
@@ -1778,6 +1793,9 @@ msgstr ""
 msgid "AlertManagement|Triggered"
 msgstr ""
 
+msgid "AlertManagement|Unknown"
+msgstr ""
+
 msgid "AlertService|%{linkStart}Learn more%{linkEnd} about configuring this endpoint to receive alerts."
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -26,6 +26,7 @@ describe('AlertManagementList', () => {
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
+  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
 
   function mountComponent({
     props = {
@@ -201,6 +202,20 @@ describe('AlertManagementList', () => {
       });
     });
 
+    it('Internationalizes severity text', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: mockAlerts, errored: false },
+        loading: false,
+      });
+
+      expect(
+        findSeverityFields()
+          .at(0)
+          .text(),
+      ).toBe('Critical');
+    });
+
     describe('handle date fields', () => {
       it('should display time ago dates when values provided', () => {
         mountComponent({

spec/frontend/alert_management/mocks/alerts.json

@@ -2,7 +2,7 @@
     {
       "iid": "1527542",
       "title": "SyntaxError: Invalid or unexpected token",
-      "severity": "Critical",
+      "severity": "CRITICAL",
       "eventCount": 7,
       "startedAt": "2020-04-17T23:18:14.996Z",
       "endedAt": "2020-04-17T23:18:14.996Z",
@@ -11,7 +11,7 @@
     {
       "iid": "1527542",
       "title": "Some otherr alert Some otherr alert Some otherr alert Some otherr alert Some otherr alert Some otherr alert",
-      "severity": "Medium",
+      "severity": "MEDIUM",
       "eventCount": 1,
       "startedAt": "2020-04-17T23:18:14.996Z",
       "endedAt": "2020-04-17T23:18:14.996Z",
@@ -20,7 +20,7 @@
     {
       "iid": "1527542",
       "title": "SyntaxError: Invalid or unexpected token",
-      "severity": "Low",
+      "severity": "LOW",
       "eventCount": 4,
       "startedAt": "2020-04-17T23:18:14.996Z",
       "endedAt": "2020-04-17T23:18:14.996Z",