Surface incident Severity in the Incident List

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -23,6 +23,8 @@ import { s__ } from '~/locale';
 import { mergeUrlParams, joinPaths, visitUrl } from '~/lib/utils/url_utility';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
+import SeverityToken from '~/sidebar/components/severity/severity.vue';
+import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants';
 import { I18N, DEFAULT_PAGE_SIZE, INCIDENT_SEARCH_DELAY, INCIDENT_STATUS_TABS } from '../constants';
 
 const TH_TEST_ID = { 'data-testid': 'incident-management-created-at-sort' };
@@ -44,6 +46,12 @@ export default {
   i18n: I18N,
   statusTabs: INCIDENT_STATUS_TABS,
   fields: [
+    {
+      key: 'severity',
+      label: s__('IncidentManagement|Severity'),
+      thClass: `gl-pointer-events-none`,
+      tdClass,
+    },
     {
       key: 'title',
       label: s__('IncidentManagement|Incident'),
@@ -82,6 +90,7 @@ export default {
     PublishedCell: () => import('ee_component/incidents/components/published_cell.vue'),
     GlBadge,
     GlEmptyState,
+    SeverityToken,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -280,6 +289,9 @@ export default {
 
       this.sort = `${sortingColumn}_${sortingDirection}`;
     },
+    getSeverity(severity) {
+      return INCIDENT_SEVERITY[severity];
+    },
   },
 };
 </script>
@@ -348,6 +360,10 @@ export default {
       @row-clicked="navigateToIncidentDetails"
       @sort-changed="fetchSortedData"
     >
+      <template #cell(severity)="{ item }">
+        <severity-token :severity="getSeverity(item.severity)" />
+      </template>
+
       <template #cell(title)="{ item }">
         <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
           <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>

app/assets/javascripts/incidents/graphql/queries/get_incidents.query.graphql

@@ -40,6 +40,7 @@ query getIncidents(
           }
         }
         statusPagePublishedIncident
+        severity
       }
       pageInfo {
         hasNextPage

changelogs/unreleased/230980-severity-in-incident-list.yml

+---
+title: Surface incident severity and icon in the Incident List table
+merge_request: 40112
+author:
+type: added

doc/operations/incident_management/incidents.md

@@ -13,12 +13,18 @@ For users with at least Developer [permissions](../../user/permissions.md), the
 Incident Management list is available at **Operations > Incidents**
 in your project's sidebar. The list contains the following metrics:
 
-![Incident List](./img/incident_list_sort_v13_3.png)
+![Incident List](img/incident_list_v13_4.png)
 
 - **Status** - To filter incidents by their status, click **Open**, **Closed**,
   or **All** above the incident list.
 - **Search** - The Incident list supports a simple free text search, which filters
   on the **Title** and **Incident** fields.
+- **Severity** - Severity of a particular incident. Can have one of the following values:
+  - `Critical - S1`
+  - `High - S2`
+  - `Medium - S3`
+  - `Low - S4`
+  - `Unknown`
 - **Incident** - The description of the incident, which attempts to capture the
   most meaningful data.
 - **Date created** - How long ago the incident was created. This field uses the

locale/gitlab.pot

@@ -13336,6 +13336,9 @@ msgstr ""
 msgid "IncidentManagement|Published to status page"
 msgstr ""
 
+msgid "IncidentManagement|Severity"
+msgstr ""
+
 msgid "IncidentManagement|There are no closed incidents"
 msgstr ""
 

spec/frontend/incidents/components/incidents_list_spec.js

@@ -13,6 +13,7 @@ import {
 } from '@gitlab/ui';
 import { visitUrl, joinPaths, mergeUrlParams } from '~/lib/utils/url_utility';
 import IncidentsList from '~/incidents/components/incidents_list.vue';
+import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { I18N, INCIDENT_STATUS_TABS } from '~/incidents/constants';
 import mockIncidents from '../mocks/incidents.json';
@@ -51,6 +52,7 @@ describe('Incidents List', () => {
   const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
   const findStatusTabs = () => wrapper.find(GlTabs);
   const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findSeverity = () => wrapper.findAll(SeverityToken);
 
   function mountComponent({ data = { incidents: [], incidentsCount: {} }, loading = false }) {
     wrapper = mount(IncidentsList, {
@@ -182,6 +184,10 @@ describe('Incidents List', () => {
         );
       });
     });
+
+    it('renders severity per row', () => {
+      expect(findSeverity().length).toBe(mockIncidents.length);
+    });
   });
 
   describe('Create Incident', () => {

spec/frontend/incidents/mocks/incidents.json

@@ -4,7 +4,8 @@
     "title": "New: Incident",
     "createdAt": "2020-06-03T15:46:08Z",
     "assignees": {},
-    "state": "opened"
+    "state": "opened",
+    "severity": "CRITICAL"
   },
   {
     "iid": "14",
@@ -20,20 +21,23 @@
         }
       ]
     },
-    "state": "opened"
+    "state": "opened",
+    "severity": "HIGH"
   },
   {
     "iid": "13",
     "title": "Create issue3",
     "createdAt": "2020-05-19T08:53:55Z",
     "assignees": {},
-    "state": "closed"
+    "state": "closed",
+    "severity": "LOW"
   },
   {
     "iid": "12",
     "title": "Create issue2",
     "createdAt": "2020-05-18T17:13:35Z",
     "assignees": {},
-    "state": "closed"
+    "state": "closed",
+    "severity": "MEDIUM"
   }
 ]