From 33f66e6350180860382c62f49481ff7aa6e465af Mon Sep 17 00:00:00 2001
From: Virginia Cepeda <virginia.cepeda@grafana.com>
Date: Fri, 3 Mar 2023 11:13:55 -0300
Subject: [PATCH] Alerting: Show paused status in rules group accordion
 (#64068)

* Show paused status in group accordion

* Fix linting

* display number of paused alerts within normal label
---
 .../unified/components/rules/RuleStats.tsx     | 18 ++++++++++++++++--
 .../unified/components/rules/RulesTable.tsx    |  5 ++---
 .../features/alerting/unified/utils/rules.ts   |  5 +++++
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/RuleStats.tsx b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
index e52c2756072..0655643d5ca 100644
--- a/public/app/features/alerting/unified/components/rules/RuleStats.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleStats.tsx
@@ -6,7 +6,7 @@ import { Badge } from '@grafana/ui';
 import { CombinedRule, CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting';
 import { PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
-import { isAlertingRule, isRecordingRule, isRecordingRulerRule } from '../../utils/rules';
+import { isAlertingRule, isRecordingRule, isRecordingRulerRule, isGrafanaRulerRulePaused } from '../../utils/rules';
 
 interface Props {
   includeTotal?: boolean;
@@ -20,6 +20,7 @@ const emptyStats = {
   [PromAlertingRuleState.Firing]: 0,
   [PromAlertingRuleState.Pending]: 0,
   [PromAlertingRuleState.Inactive]: 0,
+  paused: 0,
   error: 0,
 } as const;
 
@@ -31,6 +32,9 @@ export const RuleStats: FC<Props> = ({ group, namespaces, includeTotal }) => {
 
     const calcRule = (rule: CombinedRule) => {
       if (rule.promRule && isAlertingRule(rule.promRule)) {
+        if (isGrafanaRulerRulePaused(rule)) {
+          stats.paused += 1;
+        }
         stats[rule.promRule.state] += 1;
       }
       if (ruleHasError(rule)) {
@@ -82,7 +86,17 @@ export const RuleStats: FC<Props> = ({ group, namespaces, includeTotal }) => {
     );
   }
 
-  if (calculated[PromAlertingRuleState.Inactive]) {
+  if (calculated[PromAlertingRuleState.Inactive] && calculated.paused) {
+    statsComponents.push(
+      <Badge
+        color="green"
+        key="paused"
+        text={`${calculated[PromAlertingRuleState.Inactive]} normal (${calculated.paused} paused)`}
+      />
+    );
+  }
+
+  if (calculated[PromAlertingRuleState.Inactive] && !calculated.paused) {
     statsComponents.push(
       <Badge color="green" key="inactive" text={`${calculated[PromAlertingRuleState.Inactive]} normal`} />
     );
diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
index 04780159320..25fb1dc5f91 100644
--- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx
@@ -8,7 +8,7 @@ import { CombinedRule } from 'app/types/unified-alerting';
 import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../../core/constants';
 import { useHasRuler } from '../../hooks/useHasRuler';
 import { Annotation } from '../../utils/constants';
-import { isGrafanaRulerRule } from '../../utils/rules';
+import { isGrafanaRulerRule, isGrafanaRulerRulePaused } from '../../utils/rules';
 import { DynamicTable, DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable';
 import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines';
 import { ProvisioningBadge } from '../Provisioning';
@@ -117,8 +117,7 @@ function useColumns(showSummaryColumn: boolean, showGroupColumn: boolean) {
 
           const isDeleting = !!(hasRuler(rulesSource) && rulerRulesLoaded(rulesSource) && promRule && !rulerRule);
           const isCreating = !!(hasRuler(rulesSource) && rulerRulesLoaded(rulesSource) && rulerRule && !promRule);
-          const isGrafanaManagedRule = isGrafanaRulerRule(rulerRule);
-          const isPaused = isGrafanaManagedRule && Boolean(rulerRule.grafana_alert.is_paused);
+          const isPaused = isGrafanaRulerRulePaused(rule);
 
           return <RuleState rule={rule} isDeleting={isDeleting} isCreating={isCreating} isPaused={isPaused} />;
         },
diff --git a/public/app/features/alerting/unified/utils/rules.ts b/public/app/features/alerting/unified/utils/rules.ts
index af1ad2c6456..c90e8f7b021 100644
--- a/public/app/features/alerting/unified/utils/rules.ts
+++ b/public/app/features/alerting/unified/utils/rules.ts
@@ -5,6 +5,7 @@ import {
   Alert,
   AlertingRule,
   CloudRuleIdentifier,
+  CombinedRule,
   CombinedRuleGroup,
   CombinedRuleWithLocation,
   GrafanaRuleIdentifier,
@@ -55,6 +56,10 @@ export function isGrafanaRulerRule(rule?: RulerRuleDTO): rule is RulerGrafanaRul
   return typeof rule === 'object' && 'grafana_alert' in rule;
 }
 
+export function isGrafanaRulerRulePaused(rule: CombinedRule) {
+  return rule.rulerRule && isGrafanaRulerRule(rule.rulerRule) && Boolean(rule.rulerRule.grafana_alert.is_paused);
+}
+
 export function alertInstanceKey(alert: Alert): string {
   return JSON.stringify(alert.labels);
 }