[v9.0.x] Alerting: Unify alert status labels on the alert list panel (#50488)

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
Co-authored-by: Konrad Lalik <konrad.lalik@grafana.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{' '}