Alerting: Fix alert list panel showing firing alerts with no instances (#50069)

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
+import { noop } from 'lodash';
 import pluralize from 'pluralize';
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { GrafanaTheme2, PanelProps } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -31,12 +32,24 @@ export const AlertInstances: FC<Props> = ({ alerts, options }) => {
     [alerts, options]
   );
 
+  const hiddenInstances = alerts.length - filteredAlerts.length;
+
+  const uncollapsible = filteredAlerts.length > 0;
+  const toggleShowInstances = uncollapsible ? toggleDisplayInstances : noop;
+
+  useEffect(() => {
+    if (filteredAlerts.length === 0) {
+      setDisplayInstances(false);
+    }
+  }, [filteredAlerts]);
+
   return (
     <div>
       {options.groupMode === GroupMode.Default && (
-        <div className={styles.instance} onClick={() => toggleDisplayInstances()}>
-          <Icon name={displayInstances ? 'angle-down' : 'angle-right'} size={'md'} />
+        <div className={uncollapsible ? styles.clickable : ''} onClick={() => toggleShowInstances()}>
+          {uncollapsible && <Icon name={displayInstances ? 'angle-down' : 'angle-right'} size={'md'} />}
           <span>{`${filteredAlerts.length} ${pluralize('instance', filteredAlerts.length)}`}</span>
+          {hiddenInstances > 0 && <span>, {`${hiddenInstances} hidden by filters`}</span>}
         </div>
       )}
       {displayInstances && <AlertInstancesTable instances={filteredAlerts} />}
@@ -45,7 +58,7 @@ export const AlertInstances: FC<Props> = ({ alerts, options }) => {
 };
 
 const getStyles = (_: GrafanaTheme2) => ({
-  instance: css`
+  clickable: css`
     cursor: pointer;
   `,
 });

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

@@ -60,7 +60,7 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
     [props, promRulesRequests]
   );
 
-  const noAlertsMessage = rules.length ? '' : 'No alerts';
+  const noAlertsMessage = rules.length === 0 ? 'No alerts matching filters' : undefined;
 
   if (
     !contextSrv.hasPermission(AccessControlAction.AlertingRuleRead) &&
@@ -122,15 +122,15 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
       name.toLocaleLowerCase().includes(replacedName.toLocaleLowerCase())
     );
   }
-  if (Object.values(options.stateFilter).some((value) => value)) {
-    filteredRules = filteredRules.filter((rule) => {
-      return (
-        (options.stateFilter.firing && rule.rule.state === PromAlertingRuleState.Firing) ||
-        (options.stateFilter.pending && rule.rule.state === PromAlertingRuleState.Pending) ||
-        (options.stateFilter.inactive && rule.rule.state === PromAlertingRuleState.Inactive)
-      );
-    });
-  }
+
+  filteredRules = filteredRules.filter((rule) => {
+    return (
+      (options.stateFilter.firing && rule.rule.state === PromAlertingRuleState.Firing) ||
+      (options.stateFilter.pending && rule.rule.state === PromAlertingRuleState.Pending) ||
+      (options.stateFilter.inactive && rule.rule.state === PromAlertingRuleState.Inactive)
+    );
+  });
+
   if (options.alertInstanceLabelFilter) {
     const replacedLabelFilter = replaceVariables(options.alertInstanceLabelFilter);
     const matchers = parseMatchers(replacedLabelFilter);