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>

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)
     );
   });
 

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',

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;

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{' '}