From 5191870c24d3750f3f97482a7977f47c76bf1da2 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Thu, 2 Jun 2022 15:44:03 +0200
Subject: [PATCH] Alerting: Fix alert list panel showing firing alerts with no
 instances (#50069)

---
 .../panel/alertlist/AlertInstances.tsx        | 21 +++++++++++++++----
 .../panel/alertlist/UnifiedAlertList.tsx      | 20 +++++++++---------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/AlertInstances.tsx b/public/app/plugins/panel/alertlist/AlertInstances.tsx
index 8fd3cd5dfe6..7a4e7abbbbb 100644
--- a/public/app/plugins/panel/alertlist/AlertInstances.tsx
+++ b/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;
   `,
 });
diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index 194b7ceea09..3d423a8a843 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/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);