diff --git a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx index c6ef58599cb..2f0c2c39c91 100644 --- a/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx +++ b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx @@ -29,8 +29,12 @@ interface AlertInfo { forDuration: string; evaluationsToFire: number; } -function ForError({ message }: { message: string }) { - return ; +function ForBadge({ message, error }: { message: string; error?: boolean }) { + if (error) { + return ; + } else { + return ; + } } export const getNumberEvaluationsToStartAlerting = (forDuration: string, currentEvaluation: string) => { @@ -132,6 +136,7 @@ export const RulesForGroupTable = ({ const { watch } = useFormContext(); const currentInterval = watch('groupInterval'); + const unknownCurrentInterval = !Boolean(currentInterval); const rows: AlertsWithForTableProps[] = rules .slice() @@ -165,19 +170,25 @@ export const RulesForGroupTable = ({ id: 'numberEvaluations', label: '#Evaluations', renderCell: ({ data: { evaluationsToFire: numberEvaluations } }) => { - if (!isValidEvaluation(currentInterval)) { - return ; - } - if (numberEvaluations === 0) { - return ; + if (unknownCurrentInterval) { + return ; } else { - return <>{numberEvaluations}; + if (!isValidEvaluation(currentInterval)) { + return ; + } + if (numberEvaluations === 0) { + return ( + + ); + } else { + return <>{numberEvaluations}; + } } }, size: 0.6, }, ]; - }, [currentInterval]); + }, [currentInterval, unknownCurrentInterval]); return (