Show No attempts instead of OK when there is no attempt for notifier (#56494)

public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx

@@ -87,23 +87,40 @@ function ReceiverError({ errorCount, errorDetail }: ReceiverErrorProps) {
       color="orange"
       icon="exclamation-triangle"
       text={`${errorCount} ${pluralize('error', errorCount)}`}
-      tooltip={errorDetail}
+      tooltip={errorDetail ?? 'Error'}
     />
   );
 }
-interface ReceiverHealthProps {
-  errorsByReceiver: number;
+interface NotifierHealthProps {
+  errorsByNotifier: number;
   errorDetail?: string;
+  lastNotify: string;
 }
 
-function ReceiverHealth({ errorsByReceiver, errorDetail }: ReceiverHealthProps) {
-  return errorsByReceiver > 0 ? (
-    <ReceiverError errorCount={errorsByReceiver} errorDetail={errorDetail} />
+function NotifierHealth({ errorsByNotifier, errorDetail, lastNotify }: NotifierHealthProps) {
+  const noErrorsColor = isLastNotifyNullDate(lastNotify) ? 'orange' : 'green';
+  const noErrorsText = isLastNotifyNullDate(lastNotify) ? 'No attempts' : 'OK';
+  return errorsByNotifier > 0 ? (
+    <ReceiverError errorCount={errorsByNotifier} errorDetail={errorDetail} />
   ) : (
-    <Badge color="green" text="OK" tooltip="No errors detected" />
+    <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
   );
 }
 
+interface ReceiverHealthProps {
+  errorsByReceiver: number;
+  someWithNoAttempt: boolean;
+}
+
+function ReceiverHealth({ errorsByReceiver, someWithNoAttempt }: ReceiverHealthProps) {
+  const noErrorsColor = someWithNoAttempt ? 'orange' : 'green';
+  const noErrorsText = someWithNoAttempt ? 'No attempts' : 'OK';
+  return errorsByReceiver > 0 ? (
+    <ReceiverError errorCount={errorsByReceiver} />
+  ) : (
+    <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
+  );
+}
 const useContactPointsState = (alertManagerName: string) => {
   const contactPointsStateRequest = useUnifiedAlertingSelector((state) => state.contactPointsState);
   const { result: contactPointsState } = (alertManagerName && contactPointsStateRequest) || initialAsyncRequestState;
@@ -135,11 +152,10 @@ type NotifierItemTableProps = DynamicTableItemProps<NotifierStatus>;
 interface NotifiersTableProps {
   notifiersState: NotifiersState;
 }
+const isLastNotifyNullDate = (lastNotify: string) => lastNotify === '0001-01-01T00:00:00.000Z';
 
 function LastNotify({ lastNotifyDate }: { lastNotifyDate: string }) {
-  const isLastNotifyNullDate = lastNotifyDate === '0001-01-01T00:00:00.000Z';
-
-  if (isLastNotifyNullDate) {
+  if (isLastNotifyNullDate(lastNotifyDate)) {
     return <>{'-'}</>;
   } else {
     return (
@@ -158,8 +174,14 @@ function NotifiersTable({ notifiersState }: NotifiersTableProps) {
       {
         id: 'health',
         label: 'Health',
-        renderCell: ({ data: { lastError } }) => {
-          return <ReceiverHealth errorsByReceiver={lastError ? 1 : 0} errorDetail={lastError ?? undefined} />;
+        renderCell: ({ data: { lastError, lastNotify } }) => {
+          return (
+            <NotifierHealth
+              errorsByNotifier={lastError ? 1 : 0}
+              errorDetail={lastError ?? undefined}
+              lastNotify={lastNotify}
+            />
+          );
         },
         size: 0.5,
       },
@@ -190,16 +212,18 @@ function NotifiersTable({ notifiersState }: NotifiersTableProps) {
     ];
   }
   const notifierRows: NotifierItemTableProps[] = Object.entries(notifiersState).flatMap((typeState) =>
-    typeState[1].map((notifierStatus, index) => ({
-      id: index,
-      data: {
-        type: typeState[0],
-        lastError: notifierStatus.lastNotifyAttemptError,
-        lastNotify: notifierStatus.lastNotifyAttempt,
-        lastNotifyDuration: notifierStatus.lastNotifyAttemptDuration,
-        sendResolved: notifierStatus.sendResolved,
-      },
-    }))
+    typeState[1].map((notifierStatus, index) => {
+      return {
+        id: index,
+        data: {
+          type: typeState[0],
+          lastError: notifierStatus.lastNotifyAttemptError,
+          lastNotify: notifierStatus.lastNotifyAttempt,
+          lastNotifyDuration: notifierStatus.lastNotifyAttemptDuration,
+          sendResolved: notifierStatus.sendResolved,
+        },
+      };
+    })
   );
 
   return <DynamicTable items={notifierRows} cols={getNotifierColumns()} />;
@@ -317,6 +341,15 @@ export const ReceiversTable: FC<Props> = ({ config, alertManagerName }) => {
     </ReceiversSection>
   );
 };
+const errorsByReceiver = (contactPointsState: ContactPointsState, receiverName: string) =>
+  contactPointsState?.receivers[receiverName]?.errorCount ?? 0;
+
+const someNotifiersWithNoAttempt = (contactPointsState: ContactPointsState, receiverName: string) => {
+  const notifiers = Object.values(contactPointsState?.receivers[receiverName]?.notifiers ?? {});
+  const hasSomeWitNoAttempt =
+    notifiers.length === 0 || notifiers.flat().some((status) => isLastNotifyNullDate(status.lastNotifyAttempt));
+  return hasSomeWitNoAttempt;
+};
 
 function useGetColumns(
   alertManagerName: string,
@@ -354,9 +387,14 @@ function useGetColumns(
     id: 'health',
     label: 'Health',
     renderCell: ({ data: { name } }) => {
-      const errorsByReceiver = (contactPointsState: ContactPointsState, receiverName: string) =>
-        contactPointsState?.receivers[receiverName]?.errorCount ?? 0;
-      return contactPointsState && <ReceiverHealth errorsByReceiver={errorsByReceiver(contactPointsState, name)} />;
+      return (
+        contactPointsState && (
+          <ReceiverHealth
+            errorsByReceiver={errorsByReceiver(contactPointsState, name)}
+            someWithNoAttempt={someNotifiersWithNoAttempt(contactPointsState, name)}
+          />
+        )
+      );
     },
     size: 1,
   };