Commit ec7de355 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska

Merge branch '291085-hide-dismissed' into 'master'

Add filter to hide dismissed alerts

See merge request gitlab-org/gitlab!49975
parents d0e105bd d431f594
<script>
import { GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
import { s__ } from '~/locale';
import { DEFAULT_FILTERS } from './constants';
export default {
DEFAULT_DISMISSED_FILTER: true,
components: { GlFormCheckbox, GlFormGroup },
i18n: {
HIDE_DISMISSED_TITLE: s__('ThreatMonitoring|Hide dismissed alerts'),
},
methods: {
changeDismissedFilter(filtered) {
const newFilters = filtered ? DEFAULT_FILTERS : {};
this.$emit('filter-change', newFilters);
},
},
};
</script>
<template>
<div
class="gl-pt-3 gl-px-3 gl-bg-gray-10 gl-display-flex gl-justify-content-end gl-align-items-center"
>
<gl-form-group label-size="sm">
<gl-form-checkbox
class="gl-mt-3"
:checked="$options.DEFAULT_DISMISSED_FILTER"
@change="changeDismissedFilter"
>
{{ $options.i18n.HIDE_DISMISSED_TITLE }}
</gl-form-checkbox>
</gl-form-group>
</div>
</template>
......@@ -14,7 +14,8 @@ import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import { convertToSnakeCase } from '~/lib/utils/text_utility';
// TODO once backend is settled, update by either abstracting this out to app/assets/javascripts/graphql_shared or create new, modified query in #287757
import getAlerts from '~/alert_management/graphql/queries/get_alerts.query.graphql';
import { FIELDS, MESSAGES, PAGE_SIZE, STATUSES } from './constants';
import { DEFAULT_FILTERS, FIELDS, MESSAGES, PAGE_SIZE, STATUSES } from './constants';
import AlertFilters from './alert_filters.vue';
import AlertStatus from './alert_status.vue';
export default {
......@@ -26,6 +27,7 @@ export default {
},
components: {
AlertStatus,
AlertFilters,
GlAlert,
GlIntersectionObserver,
GlLink,
......@@ -47,6 +49,7 @@ export default {
firstPageSize: this.$options.PAGE_SIZE,
projectPath: this.projectPath,
sort: this.sort,
...this.filters,
};
},
update: ({ project }) => project?.alertManagementAlerts.nodes || [],
......@@ -63,6 +66,7 @@ export default {
alerts: [],
errored: false,
errorMsg: '',
filters: DEFAULT_FILTERS,
isErrorAlertDismissed: false,
pageInfo: {},
sort: 'STARTED_AT_DESC',
......@@ -118,6 +122,9 @@ export default {
this.errored = true;
this.errorMsg = msg;
},
handleFilterChange(newFilters) {
this.filters = newFilters;
},
handleStatusUpdate() {
this.$apollo.queries.alerts.refetch();
},
......@@ -126,6 +133,7 @@ export default {
</script>
<template>
<div>
<alert-filters @filter-change="handleFilterChange" />
<gl-alert v-if="showNoAlertsMsg" data-testid="threat-alerts-unconfigured" :dismissible="false">
<gl-sprintf :message="$options.i18n.MESSAGES.CONFIGURE">
<template #link="{ content }">
......
......@@ -45,3 +45,5 @@ export const FIELDS = [
];
export const PAGE_SIZE = 20;
export const DEFAULT_FILTERS = { statuses: ['TRIGGERED', 'ACKNOWLEDGED'] };
import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
import { GlFormCheckbox } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
describe('AlertFilters component', () => {
let wrapper;
const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox);
const createWrapper = () => {
wrapper = shallowMount(AlertFilters);
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('default state', () => {
it('"hide dismissed checkbox" is checked', () => {
createWrapper();
const checkbox = findGlFormCheckbox();
expect(checkbox.exists()).toBe(true);
expect(checkbox.attributes('checked')).toBeTruthy();
});
});
describe('dismissed alerts filter', () => {
beforeEach(() => {
createWrapper();
});
it('emits an event with no filters on filter deselect', async () => {
const checkbox = findGlFormCheckbox();
checkbox.vm.$emit('change', false);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('filter-change')).toEqual([[{}]]);
});
it('emits an event with the default filters on filter select', async () => {
const checkbox = findGlFormCheckbox();
checkbox.vm.$emit('change', true);
await wrapper.vm.$nextTick();
expect(wrapper.emitted('filter-change')).toEqual([[DEFAULT_FILTERS]]);
});
});
});
import { GlIntersectionObserver, GlSkeletonLoading } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import AlertsList from 'ee/threat_monitoring/components/alerts/alerts_list.vue';
import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
import { DEFAULT_FILTERS } from 'ee/threat_monitoring/components/alerts/constants';
import { mockAlerts } from '../../mock_data';
const alerts = mockAlerts;
......@@ -25,7 +27,9 @@ 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']");
......@@ -43,12 +47,14 @@ describe('AlertsList component', () => {
mocks: {
$apollo,
},
propsData: defaultProps,
provide: {
documentationPath: '#',
projectPath: '#',
},
stubs: {
AlertStatus: true,
AlertFilters: true,
GlAlert: true,
GlLoadingIcon: true,
GlIntersectionObserver: true,
......@@ -70,6 +76,22 @@ describe('AlertsList component', () => {
createWrapper({ data: { alerts, pageInfo } });
});
it('shows threat monitoring alert filters', () => {
expect(findAlertFilters().exists()).toBe(true);
});
it('does have the default filters initially', () => {
expect(wrapper.vm.filters).toEqual(DEFAULT_FILTERS);
});
it('does update its filters on filter event emitted', async () => {
const newFilters = { statuses: [] };
expect(wrapper.vm.filters).toEqual(DEFAULT_FILTERS);
findAlertFilters().vm.$emit('filter-change', newFilters);
await wrapper.vm.$nextTick();
expect(wrapper.vm.filters).toEqual(newFilters);
});
it('does show all columns', () => {
expect(findStartedAtColumn().exists()).toBe(true);
expect(findIdColumn().exists()).toBe(true);
......
......@@ -28713,6 +28713,9 @@ msgstr ""
msgid "ThreatMonitoring|Environment"
msgstr ""
msgid "ThreatMonitoring|Hide dismissed alerts"
msgstr ""
msgid "ThreatMonitoring|In review"
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