Commit dafe094a authored by David O'Regan's avatar David O'Regan

Merge branch '299031-alert-events-column' into 'master'

Add event count column to threat alerts

See merge request gitlab-org/gitlab!54616
parents 218571ef a0a68df1
......@@ -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"
......
......@@ -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'),
......
---
title: Add event count column to threat alerts
merge_request: 54616
author:
type: added
......@@ -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);
});
......
......@@ -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',
......
......@@ -30657,6 +30657,9 @@ msgstr ""
msgid "ThreatMonitoring|Environment"
msgstr ""
msgid "ThreatMonitoring|Events"
msgstr ""
msgid "ThreatMonitoring|Hide dismissed alerts"
msgstr ""
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment