From 88a829e10338acfd3d20dffd14b766c995678089 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Fri, 11 Nov 2022 14:26:43 +0100
Subject: [PATCH] Fix: don't show an error when receiver status is not
 available (#58638)

---
 .../alerting/unified/api/receiversApi.ts      | 30 +++++++++++--------
 .../components/receivers/ReceiversTable.tsx   |  6 ++--
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/public/app/features/alerting/unified/api/receiversApi.ts b/public/app/features/alerting/unified/api/receiversApi.ts
index 3dc45ba8215..1b9166ae96c 100644
--- a/public/app/features/alerting/unified/api/receiversApi.ts
+++ b/public/app/features/alerting/unified/api/receiversApi.ts
@@ -1,19 +1,20 @@
-import { ContactPointsState, ReceiversStateDTO } from 'app/types';
+import { ContactPointsState } from 'app/types';
 
 import { CONTACT_POINTS_STATE_INTERVAL_MS } from '../utils/constants';
-import { getDatasourceAPIUid } from '../utils/datasource';
 
 import { alertingApi } from './alertingApi';
-import { contactPointsStateDtoToModel } from './grafana';
+import { fetchContactPointsState } from './grafana';
 
 export const receiversApi = alertingApi.injectEndpoints({
   endpoints: (build) => ({
-    contactPointsState: build.query<ContactPointsState, string>({
-      query: (amSourceName) => ({
-        url: `/api/alertmanager/${getDatasourceAPIUid(amSourceName)}/config/api/v1/receivers`,
-      }),
-      transformResponse: (receivers: ReceiversStateDTO[]) => {
-        return contactPointsStateDtoToModel(receivers);
+    contactPointsState: build.query<ContactPointsState, { amSourceName: string }>({
+      queryFn: async ({ amSourceName }) => {
+        try {
+          const contactPointsState = await fetchContactPointsState(amSourceName);
+          return { data: contactPointsState };
+        } catch (error) {
+          return { error: error };
+        }
       },
     }),
   }),
@@ -21,9 +22,12 @@ export const receiversApi = alertingApi.injectEndpoints({
 
 export const useGetContactPointsState = (alertManagerSourceName: string) => {
   const contactPointsStateEmpty: ContactPointsState = { receivers: {}, errorCount: 0 };
-  const { currentData: contactPointsState } = receiversApi.useContactPointsStateQuery(alertManagerSourceName ?? '', {
-    skip: !alertManagerSourceName,
-    pollingInterval: CONTACT_POINTS_STATE_INTERVAL_MS,
-  });
+  const { currentData: contactPointsState } = receiversApi.useContactPointsStateQuery(
+    { amSourceName: alertManagerSourceName ?? '' },
+    {
+      skip: !alertManagerSourceName,
+      pollingInterval: CONTACT_POINTS_STATE_INTERVAL_MS,
+    }
+  );
   return contactPointsState ?? contactPointsStateEmpty;
 };
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index 42f9b455210..d274fe7c4b5 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -117,13 +117,13 @@ function ReceiverHealth({ errorsByReceiver, someWithNoAttempt }: ReceiverHealthP
     <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
   );
 }
+
 const useContactPointsState = (alertManagerName: string) => {
-  const contactPointsState = useGetContactPointsState(alertManagerName ?? '');
+  const contactPointsState = useGetContactPointsState(alertManagerName);
   const receivers: ReceiversState = contactPointsState?.receivers ?? {};
-  const errorStateAvailable = Object.keys(receivers).length > 0; // this logic can change depending on how we implement this in the BE
+  const errorStateAvailable = Object.keys(receivers).length > 0;
   return { contactPointsState, errorStateAvailable };
 };
-
 interface ReceiverItem {
   name: string;
   types: string[];