Merge branch 'tr-revert-hide-severity' into 'master'

Render severity on alert management list view

See merge request gitlab-org/gitlab!31993

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

@@ -16,7 +16,7 @@ import createFlash from '~/flash';
 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';
 import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -33,6 +33,11 @@ export default {
     ),
   },
   fields: [
+    {
+      key: 'severity',
+      label: s__('AlertManagement|Severity'),
+      tdClass: `${tdClass} rounded-top text-capitalize`,
+    },
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
@@ -68,6 +73,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,
@@ -203,6 +209,21 @@ export default {
         fixed
         stacked="md"
       >
+        <template #cell(severity)="{ item }">
+          <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()}`"
+            />
+            {{ $options.severityLabels[item.severity] }}
+          </div>
+        </template>
+
         <template #cell(startedAt)="{ item }">
           <time-ago v-if="item.startedAt" :time="item.startedAt" />
         </template>

locale/gitlab.pot

@@ -1787,6 +1787,9 @@ msgstr ""
 msgid "AlertManagement|Service"
 msgstr ""
 
+msgid "AlertManagement|Severity"
+msgstr ""
+
 msgid "AlertManagement|Start time"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -6,6 +6,7 @@ import {
   GlLoadingIcon,
   GlDropdown,
   GlBadge,
+  GlIcon,
   GlTab,
   GlDropdownItem,
 } from '@gitlab/ui';
@@ -30,6 +31,7 @@ describe('AlertManagementList', () => {
   const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
   const findDateFields = () => wrapper.findAll(TimeAgo);
   const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
+  const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
 
   function mountComponent({
     props = {
@@ -189,6 +191,37 @@ describe('AlertManagementList', () => {
       expect(findStatusDropdown().exists()).toBe(true);
     });
 
+    it('shows correct severity icons', () => {
+      mountComponent({
+        props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+        data: { alerts: mockAlerts, errored: false },
+        loading: false,
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.find(GlTable).exists()).toBe(true);
+        expect(
+          findAlertsTable()
+            .find(GlIcon)
+            .classes('icon-critical'),
+        ).toBe(true);
+      });
+    });
+
+    it('renders 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({
@@ -200,6 +233,7 @@ describe('AlertManagementList', () => {
                 status: 'acknowledged',
                 startedAt: '2020-03-17T23:18:14.996Z',
                 endedAt: '2020-04-17T23:18:14.996Z',
+                severity: 'high',
               },
             ],
             errored: false,
@@ -219,6 +253,7 @@ describe('AlertManagementList', () => {
                 status: 'acknowledged',
                 startedAt: null,
                 endedAt: null,
+                severity: 'high',
               },
             ],
             errored: false,