Alerting: Fix alert panel instance-based rules filtering (#52583)

.betterer.results

@@ -8645,12 +8645,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "public/app/plugins/panel/alertlist/UnifiedAlertList.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/plugins/panel/annolist/AnnoListPanel.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

public/app/features/alerting/state/alertDef.ts

@@ -1,5 +1,6 @@
 import { isArray, reduce } from 'lodash';
 
+import { IconName } from '@grafana/ui';
 import { QueryPartDef, QueryPart } from 'app/features/alerting/state/query_part';
 
 const alertQueryDef = new QueryPartDef({
@@ -87,7 +88,13 @@ function normalizeAlertState(state: string) {
   return state.toLowerCase().replace(/_/g, '').split(' ')[0];
 }
 
-function getStateDisplayModel(state: string) {
+interface AlertStateDisplayModel {
+  text: string;
+  iconClass: IconName;
+  stateClass: string;
+}
+
+function getStateDisplayModel(state: string): AlertStateDisplayModel {
   const normalizedState = normalizeAlertState(state);
 
   switch (normalizedState) {

public/app/plugins/panel/alertlist/AlertInstances.tsx

@@ -29,6 +29,8 @@ export const AlertInstances: FC<Props> = ({ alerts, options }) => {
     setDisplayInstances((display) => !display);
   }, []);
 
+  // TODO Filtering instances here has some implications
+  // If a rule has 0 instances after filtering there is no way not to show that rule
   const filteredAlerts = useMemo(
     (): Alert[] => filterAlerts(options, sortAlerts(options.sortOrder, alerts)) ?? [],
     [alerts, options]

public/app/plugins/panel/alertlist/UnifiedAlertList.tsx

@@ -25,6 +25,7 @@ import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 import { GroupMode, SortOrder, UnifiedAlertListOptions } from './types';
 import GroupedModeView from './unified-alerting/GroupedView';
 import UngroupedModeView from './unified-alerting/UngroupedView';
+import { filterAlerts } from './util';
 
 export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   const dispatch = useDispatch();
@@ -143,14 +144,15 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
     const replacedLabelFilter = replaceVariables(options.alertInstanceLabelFilter);
     const matchers = parseMatchers(replacedLabelFilter);
     // Reduce rules and instances to only those that match
-    filteredRules = filteredRules.reduce((rules, rule) => {
+    filteredRules = filteredRules.reduce<PromRuleWithLocation[]>((rules, rule) => {
       const filteredAlerts = (rule.rule.alerts ?? []).filter(({ labels }) => labelsMatchMatchers(labels, matchers));
       if (filteredAlerts.length) {
         rules.push({ ...rule, rule: { ...rule.rule, alerts: filteredAlerts } });
       }
       return rules;
-    }, [] as PromRuleWithLocation[]);
+    }, []);
   }
+
   if (options.folder) {
     filteredRules = filteredRules.filter((rule) => {
       return rule.namespaceName === options.folder.title;
@@ -166,6 +168,19 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
     );
   }
 
+  // Remove rules having 0 instances
+  // AlertInstances filters instances and we need to prevent situation
+  // when we display a rule with 0 instances
+  filteredRules = filteredRules.reduce<PromRuleWithLocation[]>((rules, rule) => {
+    const filteredAlerts = filterAlerts(options, rule.rule.alerts ?? []);
+    if (filteredAlerts.length) {
+      // We intentionally don't set alerts to filteredAlerts
+      // because later we couldn't display that some alerts are hidden (ref AlertInstances filtering)
+      rules.push(rule);
+    }
+    return rules;
+  }, []);
+
   return filteredRules;
 }
 

public/app/plugins/panel/alertlist/unified-alerting/GroupedView.tsx

@@ -2,11 +2,12 @@ import React, { FC, useMemo } from 'react';
 
 import { useStyles2 } from '@grafana/ui';
 import { AlertLabel } from 'app/features/alerting/unified/components/AlertLabel';
-import { PromRuleWithLocation } from 'app/types/unified-alerting';
+import { Alert, PromRuleWithLocation } from 'app/types/unified-alerting';
 
 import { AlertInstances } from '../AlertInstances';
 import { getStyles } from '../UnifiedAlertList';
 import { GroupedRules, UnifiedAlertListOptions } from '../types';
+import { filterAlerts } from '../util';
 
 type GroupedModeProps = {
   rules: PromRuleWithLocation[];
@@ -19,7 +20,7 @@ const GroupedModeView: FC<GroupedModeProps> = ({ rules, options }) => {
   const groupBy = options.groupBy;
 
   const groupedRules = useMemo<GroupedRules>(() => {
-    const groupedRules = new Map();
+    const groupedRules = new Map<string, Alert[]>();
 
     const hasInstancesWithMatchingLabels = (rule: PromRuleWithLocation) =>
       groupBy ? alertHasEveryLabel(rule, groupBy) : true;
@@ -33,8 +34,19 @@ const GroupedModeView: FC<GroupedModeProps> = ({ rules, options }) => {
       });
     });
 
-    return groupedRules;
-  }, [groupBy, rules]);
+    // Remove groups having no instances
+    // This is different from filtering Rules without instances that we do in UnifiedAlertList
+    const filteredGroupedRules = Array.from(groupedRules.entries()).reduce((acc, [groupKey, groupAlerts]) => {
+      const filteredAlerts = filterAlerts(options, groupAlerts);
+      if (filteredAlerts.length > 0) {
+        acc.set(groupKey, filteredAlerts);
+      }
+
+      return acc;
+    }, new Map<string, Alert[]>());
+
+    return filteredGroupedRules;
+  }, [groupBy, rules, options]);
 
   return (
     <>

public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { FC } from 'react';
 
 import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
-import { Icon, IconName, useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 import alertDef from 'app/features/alerting/state/alertDef';
 import { alertStateToReadable, alertStateToState, getFirstActiveAt } from 'app/features/alerting/unified/utils/rules';
 import { PromRuleWithLocation } from 'app/types/unified-alerting';
@@ -33,7 +33,7 @@ const UngroupedModeView: FC<UngroupedModeProps> = ({ rules, options }) => {
             <li className={styles.alertRuleItem} key={`alert-${namespaceName}-${groupName}-${rule.name}-${index}`}>
               <div className={stateStyle.icon}>
                 <Icon
-                  name={alertDef.getStateDisplayModel(rule.state).iconClass as IconName}
+                  name={alertDef.getStateDisplayModel(rule.state).iconClass}
                   className={stateStyle[alertStateToState(rule.state)]}
                   size={'lg'}
                 />