diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue index 6b2cee10fbb0c91e32676c022f90a2f1c95fe520..857e5717045d1bd42dc9e71c37bdec2e9dec231a 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_list.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue @@ -10,7 +10,6 @@ import { GlDropdownItem, GlTabs, GlTab, - GlBadge, } from '@gitlab/ui'; import createFlash from '~/flash'; import { s__ } from '~/locale'; @@ -87,7 +86,6 @@ export default { GlIcon, GlTabs, GlTab, - GlBadge, }, mixins: [glFeatureFlagsMixin()], props: { @@ -118,7 +116,7 @@ export default { variables() { return { projectPath: this.projectPath, - status: this.statusFilter, + statuses: this.statusFilter, }; }, update(data) { @@ -135,7 +133,7 @@ export default { errored: false, isAlertDismissed: false, isErrorAlertDismissed: false, - statusFilter: this.$options.statusTabs[0].status, + statusFilter: this.$options.statusTabs[4].filters, }; }, computed: { @@ -151,7 +149,7 @@ export default { }, methods: { filterALertsByStatus(tabIndex) { - this.statusFilter = this.$options.statusTabs[tabIndex].status; + this.statusFilter = this.$options.statusTabs[tabIndex].filters; }, capitalizeFirstCharacter, updateAlertStatus(status, iid) { @@ -190,9 +188,6 @@ export default { <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> diff --git a/app/assets/javascripts/alert_management/constants.js b/app/assets/javascripts/alert_management/constants.js index ddaf8242b684ec80815bca27f4bbb9743ba412c7..9df01d9d0b559e0f8d0b2f7eeb78a3228556bfee 100644 --- a/app/assets/javascripts/alert_management/constants.js +++ b/app/assets/javascripts/alert_management/constants.js @@ -10,32 +10,37 @@ export const ALERTS_SEVERITY_LABELS = { }; export const ALERTS_STATUS = { - OPEN: 'open', - TRIGGERED: 'triggered', - ACKNOWLEDGED: 'acknowledged', - RESOLVED: 'resolved', - ALL: 'all', + OPEN: 'OPEN', + TRIGGERED: 'TRIGGERED', + ACKNOWLEDGED: 'ACKNOWLEDGED', + RESOLVED: 'RESOLVED', + ALL: 'ALL', }; export const ALERTS_STATUS_TABS = [ { title: s__('AlertManagement|Open'), status: ALERTS_STATUS.OPEN, + filters: [ALERTS_STATUS.TRIGGERED, ALERTS_STATUS.ACKNOWLEDGED], }, { title: s__('AlertManagement|Triggered'), status: ALERTS_STATUS.TRIGGERED, + filters: [ALERTS_STATUS.TRIGGERED], }, { title: s__('AlertManagement|Acknowledged'), status: ALERTS_STATUS.ACKNOWLEDGED, + filters: [ALERTS_STATUS.ACKNOWLEDGED], }, { title: s__('AlertManagement|Resolved'), status: ALERTS_STATUS.RESOLVED, + filters: [ALERTS_STATUS.RESOLVED], }, { title: s__('AlertManagement|All alerts'), status: ALERTS_STATUS.ALL, + filters: [ALERTS_STATUS.TRIGGERED, ALERTS_STATUS.ACKNOWLEDGED, ALERTS_STATUS.RESOLVED], }, ]; diff --git a/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql b/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql index 5fbc235f9d68c3a7eba7e34edccd47c5563df6ca..54b66389d5be9357e34bf13c23a48388fbe13578 100644 --- a/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql +++ b/app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql @@ -1,8 +1,8 @@ #import "../fragments/listItem.fragment.graphql" -query getAlerts($projectPath: ID!) { +query getAlerts($projectPath: ID!, $statuses: [AlertManagementStatus!]) { project(fullPath: $projectPath) { - alertManagementAlerts { + alertManagementAlerts(statuses: $statuses) { nodes { ...AlertListItem } diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js index e47e2e97e2856ba935ef3faf1682da48ec0279a5..cb8e25c537cbb0297f6c2504190b5270018b6c49 100644 --- a/spec/frontend/alert_management/components/alert_management_list_spec.js +++ b/spec/frontend/alert_management/components/alert_management_list_spec.js @@ -5,7 +5,6 @@ import { GlAlert, GlLoadingIcon, GlDropdown, - GlBadge, GlIcon, GlTab, GlDropdownItem, @@ -28,7 +27,6 @@ describe('AlertManagementList', () => { const findLoader = () => wrapper.find(GlLoadingIcon); const findStatusDropdown = () => wrapper.find(GlDropdown); const findStatusFilterTabs = () => wrapper.findAll(GlTab); - const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge); const findDateFields = () => wrapper.findAll(TimeAgo); const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem); const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]'); @@ -106,15 +104,6 @@ describe('AlertManagementList', () => { 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', () => { diff --git a/spec/frontend/alert_management/mocks/alerts.json b/spec/frontend/alert_management/mocks/alerts.json index 5e6b96aed7162d9919f84df827c66dffe79b7f1e..b67e2cfc52ee4c2d1749b48ff3b4d9ff7408c927 100644 --- a/spec/frontend/alert_management/mocks/alerts.json +++ b/spec/frontend/alert_management/mocks/alerts.json @@ -6,7 +6,7 @@ "eventCount": 7, "startedAt": "2020-04-17T23:18:14.996Z", "endedAt": "2020-04-17T23:18:14.996Z", - "status": "triggered" + "status": "TRIGGERED" }, { "iid": "1527543", @@ -15,7 +15,7 @@ "eventCount": 1, "startedAt": "2020-04-17T23:18:14.996Z", "endedAt": "2020-04-17T23:18:14.996Z", - "status": "acknowledged" + "status": "ACKNOWLEDGED" }, { "iid": "1527544", @@ -24,6 +24,6 @@ "eventCount": 4, "startedAt": "2020-04-17T23:18:14.996Z", "endedAt": "2020-04-17T23:18:14.996Z", - "status": "resolved" + "status": "RESOLVED" } ]