From ab4171770e7fa78edc857e7dda20426382f9e367 Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konrad.lalik@grafana.com>
Date: Thu, 9 Jun 2022 10:58:57 +0200
Subject: [PATCH] Alerting: Unify alert status labels on the alert list panel
 (#50240)

We do not use the "Inactive" state anywhere in the alerting product, this PR removes the Inactive state filter and instead uses the "Normal" state filter. Backwards compatibility has been added to the alert list panel.

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .../app/plugins/panel/alertlist/UnifiedAlertList.tsx   | 10 +++++++++-
 public/app/plugins/panel/alertlist/module.tsx          |  6 ------
 public/app/plugins/panel/alertlist/types.ts            |  2 +-
 .../panel/alertlist/unified-alerting/UngroupedView.tsx |  6 ++++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index 3d423a8a843..53ae44a13a9 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
@@ -30,6 +30,14 @@ export function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   const dispatch = useDispatch();
   const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);
 
+  // backwards compat for "Inactive" state filter
+  useEffect(() => {
+    if (props.options.stateFilter.inactive === true) {
+      props.options.stateFilter.normal = true; // enable the normal filter
+    }
+    props.options.stateFilter.inactive = undefined; // now disable inactive
+  }, [props.options.stateFilter]);
+
   useEffect(() => {
     dispatch(fetchAllPromRulesAction());
     const interval = setInterval(() => dispatch(fetchAllPromRulesAction()), RULE_LIST_POLL_INTERVAL_MS);
@@ -127,7 +135,7 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
     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)
+      (options.stateFilter.normal && rule.rule.state === PromAlertingRuleState.Inactive)
     );
   });
 
diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx
index 1b0bcf65a87..fae016c8469 100644
--- a/public/app/plugins/panel/alertlist/module.tsx
+++ b/public/app/plugins/panel/alertlist/module.tsx
@@ -284,12 +284,6 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       defaultValue: true,
       category: ['Alert state filter'],
     })
-    .addBooleanSwitch({
-      path: 'stateFilter.inactive',
-      name: 'Inactive',
-      defaultValue: false,
-      category: ['Alert state filter'],
-    })
     .addBooleanSwitch({
       path: 'stateFilter.noData',
       name: 'No Data',
diff --git a/public/app/plugins/panel/alertlist/types.ts b/public/app/plugins/panel/alertlist/types.ts
index 76983e8922a..ec79c8b1e0f 100644
--- a/public/app/plugins/panel/alertlist/types.ts
+++ b/public/app/plugins/panel/alertlist/types.ts
@@ -40,7 +40,7 @@ export interface AlertListOptions {
 interface StateFilter {
   firing: boolean;
   pending: boolean;
-  inactive: boolean;
+  inactive?: boolean; // backwards compat
   noData: boolean;
   normal: boolean;
   error: boolean;
diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
index 2091462e634..08d8a328b03 100644
--- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
+++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data';
 import { Icon, IconName, useStyles2 } from '@grafana/ui';
 import alertDef from 'app/features/alerting/state/alertDef';
-import { alertStateToState, getFirstActiveAt } from 'app/features/alerting/unified/utils/rules';
+import { alertStateToReadable, alertStateToState, getFirstActiveAt } from 'app/features/alerting/unified/utils/rules';
 import { PromRuleWithLocation } from 'app/types/unified-alerting';
 import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
@@ -44,7 +44,9 @@ const UngroupedModeView: FC<UngroupedModeProps> = ({ rules, options }) => {
                     {rule.name}
                   </div>
                   <div className={styles.alertDuration}>
-                    <span className={stateStyle[alertStateToState(rule.state)]}>{rule.state.toUpperCase()}</span>{' '}
+                    <span className={stateStyle[alertStateToState(rule.state)]}>
+                      {alertStateToReadable(rule.state)}
+                    </span>{' '}
                     {firstActiveAt && rule.state !== PromAlertingRuleState.Inactive && (
                       <>
                         for{' '}