Alerting: Add support for unknown rule state (#105052)

Add support for unknown rule state

public/app/features/alerting/unified/components/rule-viewer/StateBadges.tsx

@@ -48,6 +48,10 @@ export const StateBadge = ({ state, health }: StateBadgeProps) => {
       color = 'warning';
       stateLabel = 'Recovering';
       break;
+    case PromAlertingRuleState.Unknown:
+      color = 'info';
+      stateLabel = 'Unknown';
+      break;
   }
 
   // if the rule is in "error" health we don't really care about the state
@@ -65,7 +69,7 @@ export const StateBadge = ({ state, health }: StateBadgeProps) => {
 };
 
 // the generic badge component
-type BadgeColor = 'success' | 'error' | 'warning';
+type BadgeColor = 'success' | 'error' | 'warning' | 'info';
 
 interface BadgeProps {
   color: BadgeColor;

public/app/features/alerting/unified/components/rules/RuleListStateView.tsx

@@ -36,6 +36,7 @@ export const RuleListStateView = ({ namespaces }: Props) => {
       [PromAlertingRuleState.Pending, []],
       [PromAlertingRuleState.Recovering, []],
       [PromAlertingRuleState.Inactive, []],
+      [PromAlertingRuleState.Unknown, []],
     ]);
 
     namespaces.forEach((namespace) =>
@@ -75,6 +76,7 @@ const STATE_TITLES: Record<PromAlertingRuleState, string> = {
   [PromAlertingRuleState.Pending]: 'Pending',
   [PromAlertingRuleState.Inactive]: 'Normal',
   [PromAlertingRuleState.Recovering]: 'Recovering',
+  [PromAlertingRuleState.Unknown]: 'Unknown',
 };
 
 const RulesByState = ({ state, rules }: { state: PromAlertingRuleState; rules: CombinedRule[] }) => {

public/app/features/alerting/unified/rule-list/StateView.tsx

@@ -34,6 +34,7 @@ export const StateView = ({ namespaces }: Props) => {
       [PromAlertingRuleState.Pending, []],
       [PromAlertingRuleState.Recovering, []],
       [PromAlertingRuleState.Inactive, []],
+      [PromAlertingRuleState.Unknown, []],
     ]);
 
     namespaces.forEach((namespace) =>
@@ -70,6 +71,7 @@ const STATE_TITLES: Record<PromAlertingRuleState, string> = {
   [PromAlertingRuleState.Pending]: 'Pending',
   [PromAlertingRuleState.Inactive]: 'Normal',
   [PromAlertingRuleState.Recovering]: 'Recovering',
+  [PromAlertingRuleState.Unknown]: 'Unknown',
 };
 
 const RulesByState = ({ state, rules }: { state: PromAlertingRuleState; rules: CombinedRule[] }) => {

public/app/features/alerting/unified/rule-list/components/RuleListIcon.tsx

@@ -29,13 +29,15 @@ const icons: Record<PromAlertingRuleState, IconName> = {
   [PromAlertingRuleState.Pending]: 'circle',
   [PromAlertingRuleState.Recovering]: 'exclamation-circle',
   [PromAlertingRuleState.Firing]: 'exclamation-circle',
+  [PromAlertingRuleState.Unknown]: 'question-circle',
 };
 
-const color: Record<PromAlertingRuleState, 'success' | 'error' | 'warning'> = {
+const color: Record<PromAlertingRuleState, 'success' | 'error' | 'warning' | 'info'> = {
   [PromAlertingRuleState.Inactive]: 'success',
   [PromAlertingRuleState.Pending]: 'warning',
   [PromAlertingRuleState.Recovering]: 'warning',
   [PromAlertingRuleState.Firing]: 'error',
+  [PromAlertingRuleState.Unknown]: 'info',
 };
 
 const stateNames: Record<PromAlertingRuleState, string> = {
@@ -43,6 +45,7 @@ const stateNames: Record<PromAlertingRuleState, string> = {
   [PromAlertingRuleState.Pending]: 'Pending',
   [PromAlertingRuleState.Firing]: 'Firing',
   [PromAlertingRuleState.Recovering]: 'Recovering',
+  [PromAlertingRuleState.Unknown]: 'Unknown',
 };
 
 const operationIcons: Record<RuleOperation, IconName> = {

public/app/features/alerting/unified/utils/misc.ts

@@ -222,6 +222,7 @@ const alertStateSortScore = {
   [PromAlertingRuleState.Inactive]: 2,
   [GrafanaAlertState.NoData]: 3,
   [GrafanaAlertState.Normal]: 4,
+  [PromAlertingRuleState.Unknown]: 5,
 };
 
 export function sortAlerts(sortOrder: SortOrder, alerts: Alert[]): Alert[] {

public/app/types/unified-alerting-dto.ts

@@ -13,6 +13,7 @@ export enum PromAlertingRuleState {
   Inactive = 'inactive',
   Pending = 'pending',
   Recovering = 'recovering',
+  Unknown = 'unknown',
 }
 
 export enum GrafanaAlertState {