Alerts list status tab filter (no BE integration)

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -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>

app/assets/javascripts/alert_management/constants.js

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

app/assets/stylesheets/pages/alerts_list.scss

@@ -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;
+    }
+  }
 }

app/controllers/projects/alert_management_controller.rb

@@ -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

locale/gitlab.pot

@@ -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 ""
 

spec/frontend/alert_management/components/alert_management_list_spec.js

 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({