fix Alert State filter for dev perspective Alerts

frontend/packages/dev-console/src/components/monitoring/alerts/MonitoringAlerts.tsx

@@ -11,16 +11,16 @@ import { FilterToolbar } from '@console/internal/components/filter-toolbar';
 import { getAlertsAndRules } from '@console/internal/components/monitoring/utils';
 import { monitoringSetRules, monitoringLoaded, sortList } from '@console/internal/actions/ui';
 import { useURLPoll } from '@console/internal/components/utils/url-poll-hook';
-import { PrometheusRulesResponse, Rules } from '@console/internal/components/monitoring/types';
+import { PrometheusRulesResponse, Rule } from '@console/internal/components/monitoring/types';
 import { PROMETHEUS_TENANCY_BASE_PATH } from '@console/internal/components/graphs';
 import { RootState } from '@console/internal/redux';
 import { alertingRuleStateOrder } from '@console/internal/reducers/monitoring';
-import { getFilteredRows } from '@console/internal/components/factory';
 import {
   monitoringAlertRows,
   monitoringAlertColumn,
   alertFilters,
   applyListSort,
+  getFilteredRows,
 } from './monitoring-alerts-utils';
 import './MonitoringAlerts.scss';
 import { getURLSearchParams } from '@console/internal/components/utils';
@@ -32,7 +32,7 @@ type MonitoringAlertsProps = {
 };
 
 type StateProps = {
-  rules: Rules;
+  rules: Rule[];
   filters: { [key: string]: any };
   listSorts: { [key: string]: any };
 };

frontend/packages/dev-console/src/components/monitoring/alerts/__tests__/MonitoringAlerts.spec.tsx

@@ -16,11 +16,7 @@ describe('MonitoringAlerts', () => {
       path: '',
       url: '',
     },
-    rules: {
-      data: [],
-      loaded: true,
-      loadError: '',
-    },
+    rules: [],
     filters: Map({}),
     listSorts: Map({}),
   };

frontend/packages/dev-console/src/components/monitoring/alerts/__tests__/monitoring-alerts-utils.spec.tsx

@@ -1,4 +1,4 @@
-import { RuleStates } from '@console/internal/components/monitoring/types';
+import { AlertStates } from '@console/internal/components/monitoring/types';
 import { getAlertsAndRules } from '@console/internal/components/monitoring/utils';
 import { rules } from '@console/shared/src/utils/__mocks__/alerts-and-rules-data';
 import { monitoringAlertRows } from '../monitoring-alerts-utils';
@@ -16,8 +16,14 @@ describe('monitoring-alerts-utils', () => {
   });
   it('row should be collapse if rule state is not FIRING', () => {
     const alertRules = getAlertsAndRules(rules?.data).rules;
-    alertRules[0].state = RuleStates.Inactive;
+    alertRules[1].alerts[0].state = AlertStates.NotFiring;
     const rows = monitoringAlertRows(alertRules, [''], 'ns');
-    expect(rows[0].isOpen).toBe(undefined);
+    expect(rows[1].isOpen).toBe(undefined);
+    alertRules[0].alerts[0].state = AlertStates.Pending;
+    const rows1 = monitoringAlertRows(alertRules, [''], 'ns');
+    expect(rows1[0].isOpen).toBe(false);
+    alertRules[0].alerts[0].state = AlertStates.Firing;
+    const rows2 = monitoringAlertRows(alertRules, [''], 'ns');
+    expect(rows2[0].isOpen).toBe(true);
   });
 });

frontend/packages/dev-console/src/components/monitoring/alerts/monitoring-alerts-utils.tsx

@@ -13,19 +13,26 @@ import {
   StateCounts,
   Severity,
   AlertState,
-  alertsRowFilters,
   severityRowFilter,
+  alertStateFilter,
 } from '@console/internal/components/monitoring/alerting';
+import { RowFilter } from '@console/internal/components/filter-toolbar';
 import { Kebab } from '@console/internal/components/utils';
 import {
   alertDescription,
   alertState,
   alertSeverityOrder,
   alertingRuleStateOrder,
 } from '@console/internal/reducers/monitoring';
-import { Alert, Rule, RuleStates } from '@console/internal/components/monitoring/types';
+import {
+  Alert,
+  Rule,
+  RuleStates,
+  AlertStates,
+} from '@console/internal/components/monitoring/types';
 import { YellowExclamationTriangleIcon } from '@console/shared';
 import { labelsToParams } from '@console/internal/components/monitoring/utils';
+import { getAllTableFilters } from '@console/internal/components/factory';
 import SilenceAlert from './SilenceAlert';
 
 const viewAlertRule = (rule: Rule, ns: string) => ({
@@ -77,22 +84,22 @@ export const monitoringAlertRows = (
 ) => {
   const rows = [];
   _.forEach(alertrules, (rls) => {
+    const states = _.map(rls.alerts, (a) => a.state);
     rows.push({
-      ...(rls.state !== RuleStates.Inactive && {
+      ...(!_.isEmpty(states) && {
         isOpen:
-          (rls.state === RuleStates.Firing && !_.includes(collapsedRowsIds, rls.id)) ||
-          (rls.state !== RuleStates.Firing && _.includes(collapsedRowsIds, rls.id)),
+          (_.includes(states, AlertStates.Firing) && !_.includes(collapsedRowsIds, rls.id)) ||
+          (!_.includes(states, AlertStates.Firing) && _.includes(collapsedRowsIds, rls.id)),
       }),
       cells: [
         {
-          title:
-            rls.state !== 'firing' ? (
-              rls.name
-            ) : (
-              <>
-                <YellowExclamationTriangleIcon /> {rls.name}
-              </>
-            ),
+          title: !_.includes(states, AlertStates.Firing) ? (
+            rls.name
+          ) : (
+            <>
+              <YellowExclamationTriangleIcon /> {rls.name}
+            </>
+          ),
           id: rls.id,
         },
         {
@@ -145,15 +152,35 @@ export const monitoringAlertRows = (
   return rows;
 };
 
-export const alertFilters = [
-  {
-    filterGroupName: 'Alert State',
-    type: 'alert-state',
-    reducer: alertState,
-    items: [...alertsRowFilters[0].items, ...[{ id: 'inactive', title: 'Inactive' }]],
-  },
-  severityRowFilter,
-];
+export const getFilteredRows = (_filters, rowFilters: RowFilter[], rules: Rule[]) => {
+  if (_.isEmpty(_filters)) {
+    return rules;
+  }
+
+  const allTableFilters = getAllTableFilters(rowFilters);
+  let filteredRules = rules;
+  _.each(_filters, (value, name) => {
+    const filter = allTableFilters[name];
+    if (_.isFunction(filter)) {
+      if (name === 'alert-state') {
+        if (!_.isEmpty(value.selected)) {
+          filteredRules = _.filter(
+            filteredRules,
+            (o) =>
+              _.filter(o.alerts, (a) => filter(value, a)).length > 0 ||
+              (value.selected.has('inactive') && _.isEmpty(o.alerts)),
+          );
+        }
+      } else {
+        filteredRules = _.filter(filteredRules, (o) => filter(value, o));
+      }
+    }
+  });
+
+  return filteredRules;
+};
+
+export const alertFilters: RowFilter[] = [alertStateFilter, severityRowFilter];
 
 const setOrderBy = (orderBy: SortByDirection, data: Rule[]): Rule[] => {
   return orderBy === SortByDirection.asc ? data : data.reverse();

frontend/public/components/factory/table.tsx

@@ -76,12 +76,12 @@ const rowFiltersToFilterFuncs = (rowFilters) => {
     .reduce((acc, f) => ({ ...acc, [f.type]: f.filter }), {});
 };
 
-const getAllTableFilters = (rowFilters) => ({
+export const getAllTableFilters = (rowFilters) => ({
   ...tableFilters,
   ...rowFiltersToFilterFuncs(rowFilters),
 });
 
-export const getFilteredRows = (_filters, rowFilters, objects) => {
+const getFilteredRows = (_filters, rowFilters, objects) => {
   if (_.isEmpty(_filters)) {
     return objects;
   }

frontend/public/components/monitoring/alerting.tsx

@@ -1309,19 +1309,21 @@ const ruleAlertStateFilter = (filter, rule: Rule) =>
   _.some(rule.alerts, (a) => filter.selected.has(a.state)) ||
   _.isEmpty(filter.selected);
 
+export const alertStateFilter: RowFilter = {
+  filter: ruleAlertStateFilter,
+  filterGroupName: 'Alert State',
+  isMatch: ruleHasAlertState,
+  items: [
+    { id: AlertStates.Firing, title: 'Firing' },
+    { id: AlertStates.Pending, title: 'Pending' },
+    { id: AlertStates.Silenced, title: 'Silenced' },
+    { id: AlertStates.NotFiring, title: 'Not Firing' },
+  ],
+  type: 'alerting-rule-has-alert-state',
+};
+
 const rulesRowFilters: RowFilter[] = [
-  {
-    filter: ruleAlertStateFilter,
-    filterGroupName: 'Alert State',
-    isMatch: ruleHasAlertState,
-    items: [
-      { id: AlertStates.Firing, title: 'Firing' },
-      { id: AlertStates.Pending, title: 'Pending' },
-      { id: AlertStates.Silenced, title: 'Silenced' },
-      { id: AlertStates.NotFiring, title: 'Not Firing' },
-    ],
-    type: 'alerting-rule-has-alert-state',
-  },
+  alertStateFilter,
   severityRowFilter,
   {
     defaultSelected: [AlertSource.Platform],