From e9980a9bb8335a94bf6b25de401bac343bff6bfc Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Thu, 11 Aug 2022 18:49:21 +0200
Subject: [PATCH] Alerting: Adds interval and For to alert rule details
 (#53211)

---
 .../unified/components/rules/RuleDetails.tsx  | 31 +++++++++++++++++++
 .../unified/components/rules/RuleHealth.tsx   |  7 ++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
index f3b02d859ad..6c102205073 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx
@@ -5,6 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 import { CombinedRule } from 'app/types/unified-alerting';
 
+import { isRecordingRulerRule } from '../../utils/rules';
 import { AlertLabels } from '../AlertLabels';
 import { DetailsField } from '../DetailsField';
 
@@ -36,6 +37,7 @@ export const RuleDetails: FC<Props> = ({ rule }) => {
       <RuleDetailsActionButtons rule={rule} rulesSource={rulesSource} />
       <div className={styles.wrapper}>
         <div className={styles.leftSide}>
+          {<EvaluationBehaviorSummary rule={rule} />}
           {!!rule.labels && !!Object.keys(rule.labels).length && (
             <DetailsField label="Labels" horizontal={true}>
               <AlertLabels labels={rule.labels} />
@@ -53,6 +55,35 @@ export const RuleDetails: FC<Props> = ({ rule }) => {
   );
 };
 
+interface EvaluationBehaviorSummaryProps {
+  rule: CombinedRule;
+}
+
+const EvaluationBehaviorSummary = ({ rule }: EvaluationBehaviorSummaryProps) => {
+  let forDuration: string | undefined;
+  let every = rule.group.interval;
+
+  // recording rules don't have a for duration
+  if (!isRecordingRulerRule(rule.rulerRule)) {
+    forDuration = rule.rulerRule?.for;
+  }
+
+  return (
+    <>
+      {every && (
+        <DetailsField label="Evaluate" horizontal={true}>
+          Every {every}
+        </DetailsField>
+      )}
+      {forDuration && (
+        <DetailsField label="For" horizontal={true}>
+          {forDuration}
+        </DetailsField>
+      )}
+    </>
+  );
+};
+
 export const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     display: flex;
diff --git a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
index e31ebb3d496..5e157d7d5ed 100644
--- a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx
@@ -30,10 +30,9 @@ const getStyle = (theme: GrafanaTheme2) => ({
   warn: css`
     display: inline-flex;
     flex-direction: row;
-    color: ${theme.colors.warning.text};
+    align-items: center;
+    gap: ${theme.spacing(1)};
 
-    & > * + * {
-      margin-left: ${theme.spacing(1)};
-    }
+    color: ${theme.colors.warning.text};
   `,
 });