From a812818457f1c0f96a2c2e8d5013ccb22edf8fa6 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Mon, 19 Dec 2022 15:22:08 +0100
Subject: [PATCH] Alerting: Show unknown badge instead of Error in group rule
 modal in case of  Mimir unknown interval (#60515)

* Show unknown badge instead of Error in group rule modal in case of  Mimir unknown interval

* Use red Badge with xclamation-circle icon in case of Error in ForBadge

* Fix typo
---
 .../components/rules/EditRuleGroupModal.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

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 <Badge color="orange" icon="exclamation-triangle" text={'Error'} tooltip={message} />;
+function ForBadge({ message, error }: { message: string; error?: boolean }) {
+  if (error) {
+    return <Badge color="red" icon="exclamation-circle" text={'Error'} tooltip={message} />;
+  } else {
+    return <Badge color="orange" icon="exclamation-triangle" text={'Unknown'} tooltip={message} />;
+  }
 }
 
 export const getNumberEvaluationsToStartAlerting = (forDuration: string, currentEvaluation: string) => {
@@ -132,6 +136,7 @@ export const RulesForGroupTable = ({
 
   const { watch } = useFormContext<FormValues>();
   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 <ForError message={'Invalid evaluation interval format'} />;
-          }
-          if (numberEvaluations === 0) {
-            return <ForError message="Invalid 'For' value: it should be greater or equal to evaluation interval." />;
+          if (unknownCurrentInterval) {
+            return <ForBadge message="#Evaluations not available." />;
           } else {
-            return <>{numberEvaluations}</>;
+            if (!isValidEvaluation(currentInterval)) {
+              return <ForBadge message={'Invalid evaluation interval format'} error />;
+            }
+            if (numberEvaluations === 0) {
+              return (
+                <ForBadge message="Invalid 'For' value: it should be greater or equal to evaluation interval." error />
+              );
+            } else {
+              return <>{numberEvaluations}</>;
+            }
           }
         },
         size: 0.6,
       },
     ];
-  }, [currentInterval]);
+  }, [currentInterval, unknownCurrentInterval]);
 
   return (
     <div className={styles.tableWrapper}>