Alerting: Adds interval and For to alert rule details (#53211) (#53660)

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';
 
@@ -31,6 +32,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} />
@@ -48,6 +50,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;

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

@@ -11,6 +11,7 @@ interface Prom {
 
 export const RuleHealth: FC<Prom> = ({ rule }) => {
   const style = useStyles2(getStyle);
+
   if (rule.health === 'err' || rule.health === 'error') {
     return (
       <Tooltip theme="error" content={rule.lastError || 'No error message provided.'}>
@@ -21,6 +22,7 @@ export const RuleHealth: FC<Prom> = ({ rule }) => {
       </Tooltip>
     );
   }
+
   return <>{rule.health}</>;
 };
 
@@ -28,9 +30,9 @@ const getStyle = (theme: GrafanaTheme2) => ({
   warn: css`
     display: inline-flex;
     flex-direction: row;
+    align-items: center;
+    gap: ${theme.spacing(1)};
+
     color: ${theme.colors.warning.text};
-    & > * + * {
-      margin-left: ${theme.spacing(1)};
-    }
   `,
 });