Merge branch '214528' into 'master'

Add severity icon for list view

See merge request gitlab-org/gitlab!30472

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

@@ -5,6 +5,7 @@ import {
   GlLoadingIcon,
   GlTable,
   GlAlert,
+  GlIcon,
   GlNewDropdown,
   GlNewDropdownItem,
 } from '@gitlab/ui';
@@ -64,6 +65,7 @@ export default {
     TimeAgo,
     GlNewDropdown,
     GlNewDropdownItem,
+    GlIcon,
   },
   props: {
     projectPath: {
@@ -144,6 +146,18 @@ export default {
         fixed
         stacked="md"
       >
+        <template #cell(severity)="{ item }">
+          <div class="d-inline-flex align-items-center justify-content-between">
+            <gl-icon
+              class="mr-2"
+              :size="12"
+              :name="`severity-${item.severity.toLowerCase()}`"
+              :class="`icon-${item.severity.toLowerCase()}`"
+            />
+            {{ item.severity }}
+          </div>
+        </template>
+
         <template #cell(startedAt)="{ item }">
           <time-ago :time="item.startedAt" />
         </template>

app/assets/stylesheets/pages/alerts_list.scss

 .alert-management-list {
+  .icon-critical {
+    color: $red-800;
+  }
+
+  .icon-high {
+    color: $red-600;
+  }
+
+  .icon-medium {
+    color: $orange-400;
+  }
+
+  .icon-low {
+    color: $orange-300;
+  }
+
+  .icon-info {
+    color: $blue-400;
+  }
+
+  .icon-unknown {
+    color: $gray-400;
+  }
+
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
     color: $gray-700;

changelogs/unreleased/214528.yml

+---
+title: Add severity icons for alert management
+merge_request: 30472
+author:
+type: changed

spec/frontend/alert_management/components/alert_management_list_spec.js

 import { mount } from '@vue/test-utils';
-import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown } from '@gitlab/ui';
+import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown, GlIcon } from '@gitlab/ui';
 import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
 
 import mockAlerts from '../mocks/alerts.json';
@@ -113,5 +113,22 @@ 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);
+      });
+    });
   });
 });