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

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;

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};
   `,
 });