Commit 2a92cd62 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Phil Hughes

Alerts list status tab filter (no BE integration)

parent 6440be5d
......@@ -8,10 +8,15 @@ import {
GlIcon,
GlNewDropdown,
GlNewDropdownItem,
GlTabs,
GlTab,
GlBadge,
} from '@gitlab/ui';
import { s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import getAlerts from '../graphql/queries/getAlerts.query.graphql';
import { ALERTS_STATUS, ALERTS_STATUS_TABS } from '../constants';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
......@@ -59,10 +64,11 @@ export default {
},
],
statuses: {
triggered: s__('AlertManagement|Triggered'),
acknowledged: s__('AlertManagement|Acknowledged'),
resolved: s__('AlertManagement|Resolved'),
[ALERTS_STATUS.TRIGGERED]: s__('AlertManagement|Triggered'),
[ALERTS_STATUS.ACKNOWLEDGED]: s__('AlertManagement|Acknowledged'),
[ALERTS_STATUS.RESOLVED]: s__('AlertManagement|Resolved'),
},
statusTabs: ALERTS_STATUS_TABS,
components: {
GlEmptyState,
GlLoadingIcon,
......@@ -73,7 +79,11 @@ export default {
GlNewDropdown,
GlNewDropdownItem,
GlIcon,
GlTabs,
GlTab,
GlBadge,
},
mixins: [glFeatureFlagsMixin()],
props: {
projectPath: {
type: String,
......@@ -102,6 +112,7 @@ export default {
variables() {
return {
projectPath: this.projectPath,
status: this.statusFilter,
};
},
update(data) {
......@@ -118,6 +129,7 @@ export default {
errored: false,
isAlertDismissed: false,
isErrorAlertDismissed: false,
statusFilter: this.$options.statusTabs[0].status,
};
},
computed: {
......@@ -131,6 +143,11 @@ export default {
return this.$apollo.queries.alerts.loading;
},
},
methods: {
filterALertsByStatus(tabIndex) {
this.statusFilter = this.$options.statusTabs[tabIndex].status;
},
},
};
</script>
......@@ -144,6 +161,17 @@ export default {
{{ $options.i18n.errorMsg }}
</gl-alert>
<gl-tabs v-if="glFeatures.alertListStatusFilteringEnabled" @input="filterALertsByStatus">
<gl-tab v-for="tab in $options.statusTabs" :key="tab.status">
<template slot="title">
<span>{{ tab.title }}</span>
<gl-badge v-if="alerts" size="sm" class="gl-tab-counter-badge">
{{ alerts.length }}
</gl-badge>
</template>
</gl-tab>
</gl-tabs>
<h4 class="d-block d-md-none my-3">
{{ s__('AlertManagement|Alerts') }}
</h4>
......
import { s__ } from '~/locale';
export const ALERTS_STATUS = {
OPEN: 'open',
TRIGGERED: 'triggered',
ACKNOWLEDGED: 'acknowledged',
RESOLVED: 'resolved',
ALL: 'all',
};
export const ALERTS_STATUS_TABS = [
{
title: s__('AlertManagement|Open'),
status: ALERTS_STATUS.OPEN,
},
{
title: s__('AlertManagement|Triggered'),
status: ALERTS_STATUS.TRIGGERED,
},
{
title: s__('AlertManagement|Acknowledged'),
status: ALERTS_STATUS.ACKNOWLEDGED,
},
{
title: s__('AlertManagement|Resolved'),
status: ALERTS_STATUS.RESOLVED,
},
{
title: s__('AlertManagement|All alerts'),
status: ALERTS_STATUS.ALL,
},
];
......@@ -74,4 +74,14 @@
}
}
}
.gl-tab-nav-item {
color: $gl-gray-600;
> .gl-tab-counter-badge {
color: inherit;
@include gl-font-sm;
background-color: $white-normal;
}
}
}
......@@ -3,6 +3,9 @@
class Projects::AlertManagementController < Projects::ApplicationController
before_action :ensure_list_feature_enabled, only: :index
before_action :ensure_detail_feature_enabled, only: :details
before_action do
push_frontend_feature_flag(:alert_list_status_filtering_enabled)
end
def index
end
......
......@@ -1712,6 +1712,9 @@ msgstr ""
msgid "AlertManagement|Alerts"
msgstr ""
msgid "AlertManagement|All alerts"
msgstr ""
msgid "AlertManagement|Authorize external service"
msgstr ""
......@@ -1742,6 +1745,9 @@ msgstr ""
msgid "AlertManagement|No alerts to display."
msgstr ""
msgid "AlertManagement|Open"
msgstr ""
msgid "AlertManagement|Overview"
msgstr ""
......
import { mount } from '@vue/test-utils';
import { GlEmptyState, GlTable, GlAlert, GlLoadingIcon, GlNewDropdown, GlIcon } from '@gitlab/ui';
import {
GlEmptyState,
GlTable,
GlAlert,
GlLoadingIcon,
GlNewDropdown,
GlBadge,
GlIcon,
GlTab,
} from '@gitlab/ui';
import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
import { ALERTS_STATUS_TABS } from '../../../../app/assets/javascripts/alert_management/constants';
import mockAlerts from '../mocks/alerts.json';
......@@ -12,6 +22,8 @@ describe('AlertManagementList', () => {
const findAlert = () => wrapper.find(GlAlert);
const findLoader = () => wrapper.find(GlLoadingIcon);
const findStatusDropdown = () => wrapper.find(GlNewDropdown);
const findStatusFilterTabs = () => wrapper.findAll(GlTab);
const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
function mountComponent({
props = {
......@@ -20,6 +32,8 @@ describe('AlertManagementList', () => {
},
data = {},
loading = false,
alertListStatusFilteringEnabled = false,
stubs = {},
} = {}) {
wrapper = mount(AlertManagementList, {
propsData: {
......@@ -28,6 +42,9 @@ describe('AlertManagementList', () => {
emptyAlertSvgPath: 'illustration/path',
...props,
},
provide: {
glFeatures: { alertListStatusFilteringEnabled },
},
data() {
return data;
},
......@@ -40,6 +57,7 @@ describe('AlertManagementList', () => {
},
},
},
stubs,
});
}
......@@ -59,6 +77,56 @@ describe('AlertManagementList', () => {
});
});
describe('Status Filter Tabs', () => {
describe('alertListStatusFilteringEnabled feature flag enabled', () => {
beforeEach(() => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: mockAlerts },
loading: false,
alertListStatusFilteringEnabled: true,
stubs: {
GlTab: true,
},
});
});
it('should display filter tabs for all statuses', () => {
const tabs = findStatusFilterTabs().wrappers;
tabs.forEach((tab, i) => {
expect(tab.text()).toContain(ALERTS_STATUS_TABS[i].title);
});
});
it('should have number of items badge along with status tab', () => {
expect(findNumberOfAlertsBadge().length).toEqual(ALERTS_STATUS_TABS.length);
expect(
findNumberOfAlertsBadge()
.at(0)
.text(),
).toEqual(`${mockAlerts.length}`);
});
});
describe('alertListStatusFilteringEnabled feature flag disabled', () => {
beforeEach(() => {
mountComponent({
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
data: { alerts: mockAlerts },
loading: false,
alertListStatusFilteringEnabled: false,
stubs: {
GlTab: true,
},
});
});
it('should NOT display tabs', () => {
expect(findStatusFilterTabs()).not.toExist();
});
});
});
describe('Alerts table', () => {
it('loading state', () => {
mountComponent({
......
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