Add event count column to threat alerts

- add event count column
- update tests
- add expanded wrapper to tests

ee/app/assets/javascripts/threat_monitoring/components/alerts/alerts_list.vue

@@ -193,6 +193,12 @@ export default {
         </gl-link>
       </template>
 
+      <template #cell(eventCount)="{ item }">
+        <div data-testid="threat-alerts-event-count">
+          {{ item.eventCount }}
+        </div>
+      </template>
+
       <template #cell(status)="{ item }">
         <alert-status
           :alert="item"

ee/app/assets/javascripts/threat_monitoring/components/alerts/constants.js

@@ -34,6 +34,13 @@ export const FIELDS = [
     label: s__('ThreatMonitoring|Name'),
     thClass: `gl-bg-white! gl-pointer-events-none`,
   },
+  {
+    key: 'eventCount',
+    label: s__('ThreatMonitoring|Events'),
+    thClass: `gl-bg-white! gl-w-10p gl-text-right`,
+    tdClass: `gl-pl-6! gl-text-right`,
+    sortable: true,
+  },
   {
     key: 'status',
     label: s__('ThreatMonitoring|Status'),

ee/changelogs/unreleased/299031-alert-events-column.yml

+---
+title: Add event count column to threat alerts
+merge_request: 54616
+author:
+type: added

ee/spec/frontend/threat_monitoring/components/alerts/alerts_list_spec.js

@@ -4,6 +4,7 @@ import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.v
 import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
 import AlertsList from 'ee/threat_monitoring/components/alerts/alerts_list.vue';
 import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { mockAlerts } from '../../mock_data';
 
 const alerts = mockAlerts;
@@ -29,41 +30,43 @@ describe('AlertsList component', () => {
   };
   const defaultProps = { filters: DEFAULT_FILTERS };
 
-  const findAlertFilters = () => wrapper.find(AlertFilters);
-  const findUnconfiguredAlert = () => wrapper.find("[data-testid='threat-alerts-unconfigured']");
-  const findErrorAlert = () => wrapper.find("[data-testid='threat-alerts-error']");
-  const findStartedAtColumn = () => wrapper.find("[data-testid='threat-alerts-started-at']");
-  const findStartedAtColumnHeader = () =>
-    wrapper.find("[data-testid='threat-alerts-started-at-header']");
-  const findIdColumn = () => wrapper.find("[data-testid='threat-alerts-id']");
-  const findStatusColumn = () => wrapper.find(AlertStatus);
-  const findStatusColumnHeader = () => wrapper.find("[data-testid='threat-alerts-status-header']");
-  const findEmptyState = () => wrapper.find("[data-testid='threat-alerts-empty-state']");
-  const findGlIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
-  const findGlSkeletonLoading = () => wrapper.find(GlSkeletonLoading);
+  const findAlertFilters = () => wrapper.findComponent(AlertFilters);
+  const findUnconfiguredAlert = () => wrapper.findByTestId('threat-alerts-unconfigured');
+  const findErrorAlert = () => wrapper.findByTestId('threat-alerts-error');
+  const findStartedAtColumn = () => wrapper.findByTestId('threat-alerts-started-at');
+  const findStartedAtColumnHeader = () => wrapper.findByTestId('threat-alerts-started-at-header');
+  const findIdColumn = () => wrapper.findByTestId('threat-alerts-id');
+  const findEventCountColumn = () => wrapper.findByTestId('threat-alerts-event-count');
+  const findStatusColumn = () => wrapper.findComponent(AlertStatus);
+  const findStatusColumnHeader = () => wrapper.findByTestId('threat-alerts-status-header');
+  const findEmptyState = () => wrapper.findByTestId('threat-alerts-empty-state');
+  const findGlIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findGlSkeletonLoading = () => wrapper.findComponent(GlSkeletonLoading);
 
   const createWrapper = ({ $apollo = apolloMock, data = {}, stubs = {} } = {}) => {
-    wrapper = mount(AlertsList, {
-      mocks: {
-        $apollo,
-      },
-      propsData: defaultProps,
-      provide: {
-        documentationPath: '#',
-        projectPath: '#',
-      },
-      stubs: {
-        AlertStatus: true,
-        AlertFilters: true,
-        GlAlert: true,
-        GlLoadingIcon: true,
-        GlIntersectionObserver: true,
-        ...stubs,
-      },
-      data() {
-        return data;
-      },
-    });
+    wrapper = extendedWrapper(
+      mount(AlertsList, {
+        mocks: {
+          $apollo,
+        },
+        propsData: defaultProps,
+        provide: {
+          documentationPath: '#',
+          projectPath: '#',
+        },
+        stubs: {
+          AlertStatus: true,
+          AlertFilters: true,
+          GlAlert: true,
+          GlLoadingIcon: true,
+          GlIntersectionObserver: true,
+          ...stubs,
+        },
+        data() {
+          return data;
+        },
+      }),
+    );
   };
 
   afterEach(() => {
@@ -95,6 +98,7 @@ describe('AlertsList component', () => {
     it('does show all columns', () => {
       expect(findStartedAtColumn().exists()).toBe(true);
       expect(findIdColumn().exists()).toBe(true);
+      expect(findEventCountColumn().exists()).toBe(true);
       expect(findStatusColumn().exists()).toBe(true);
     });
 

ee/spec/frontend/threat_monitoring/mock_data.js

@@ -94,24 +94,28 @@ export const formattedMockNetworkPolicyStatisticsResponse = {
 export const mockAlerts = [
   {
     iid: '01',
+    eventCount: '1',
     title: 'Issue 01',
     status: 'TRIGGERED',
     startedAt: '2020-11-19T18:36:23Z',
   },
   {
     iid: '02',
+    eventCount: '2',
     title: 'Issue 02',
     status: 'ACKNOWLEDGED',
     startedAt: '2020-11-16T21:59:28Z',
   },
   {
     iid: '03',
+    eventCount: '3',
     title: 'Issue 03',
     status: 'RESOLVED',
     startedAt: '2020-11-13T20:03:04Z',
   },
   {
     iid: '04',
+    eventCount: '4',
     title: 'Issue 04',
     status: 'IGNORED',
     startedAt: '2020-10-29T13:37:55Z',

locale/gitlab.pot

@@ -30588,6 +30588,9 @@ msgstr ""
 msgid "ThreatMonitoring|Environment"
 msgstr ""
 
+msgid "ThreatMonitoring|Events"
+msgstr ""
+
 msgid "ThreatMonitoring|Hide dismissed alerts"
 msgstr ""