Organize alerts by status in list view (BE integration)

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>

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],
   },
 ];

app/assets/javascripts/alert_management/graphql/queries/getAlerts.query.graphql

 #import "../fragments/listItem.fragment.graphql"
 
-query getAlerts($projectPath: ID!) {
+query getAlerts($projectPath: ID!, $statuses: [AlertManagementStatus!]) {
   project(fullPath: $projectPath) {
-    alertManagementAlerts {
+      alertManagementAlerts(statuses: $statuses)  {
       nodes {
         ...AlertListItem
       }

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', () => {

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"
     }
   ]