diff --git a/public/app/features/alerting/unified/components/rules/RuleDetails.tsx b/public/app/features/alerting/unified/components/rules/RuleDetails.tsx index 3d1ebf2023d..fb19c3f2d18 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'; @@ -31,6 +32,7 @@ export const RuleDetails: FC = ({ rule }) => {
+ {} {!!rule.labels && !!Object.keys(rule.labels).length && ( @@ -48,6 +50,35 @@ export const RuleDetails: FC = ({ 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 && ( + + Every {every} + + )} + {forDuration && ( + + {forDuration} + + )} + + ); +}; + 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 61cd9f346b7..5e157d7d5ed 100644 --- a/public/app/features/alerting/unified/components/rules/RuleHealth.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleHealth.tsx @@ -11,6 +11,7 @@ interface Prom { export const RuleHealth: FC = ({ rule }) => { const style = useStyles2(getStyle); + if (rule.health === 'err' || rule.health === 'error') { return ( @@ -21,6 +22,7 @@ export const RuleHealth: FC = ({ rule }) => { ); } + 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)}; - } `, });