Change domain listing failure message (#983)

* Change domain listing failure message

* fix typecheck

* remove unnessary comments

Author: Assem-Uber

src/views/domains-page/config/domains-page-error-banner.config.ts

@@ -1,11 +1,10 @@
 import { MdWarning } from 'react-icons/md';
 
-import { type Props } from '../domains-page-error-banner/domains-page-error-banner.types';
+import { getDomainsErrorMessage } from '../domains-page-error-banner/helpers/get-domains-error-message';
 
 const domainsPageErrorBannerConfig = {
   icon: MdWarning,
-  getErrorMessage: ({ failedClusters }: Props) =>
-    `Failed to fetch domains for following clusters: ${failedClusters.join(', ')}`,
+  getErrorMessage: getDomainsErrorMessage,
 };
 
 export default domainsPageErrorBannerConfig;

src/views/domains-page/domains-page-error-banner/__tests__/domains-page-error-banner.test.tsx

@@ -8,19 +8,26 @@ import { type Props } from '../domains-page-error-banner.types';
 jest.mock('../../config/domains-page-error-banner.config', () => ({
   icon: () => <div data-testid="mock-error-icon" />,
   getErrorMessage: ({ failedClusters }: Props) =>
-    `Mock message for clusters failure: ${failedClusters.join(', ')}`,
+    `Mock message for clusters failure: ${failedClusters
+      .map(({ clusterName, httpStatus }) => `${clusterName} (${httpStatus})`)
+      .join(', ')}`,
 }));
 
 describe(DomainsPageErrorBanner.name, () => {
   it('should render if there are failed clusters', async () => {
     render(
-      <DomainsPageErrorBanner failedClusters={['cluster_1', 'cluster_2']} />
+      <DomainsPageErrorBanner
+        failedClusters={[
+          { clusterName: 'cluster_1', httpStatus: 404 },
+          { clusterName: 'cluster_2', httpStatus: 503 },
+        ]}
+      />
     );
 
     expect(await screen.findByTestId('mock-error-icon')).toBeInTheDocument();
     expect(
       await screen.findByText(
-        'Mock message for clusters failure: cluster_1, cluster_2'
+        'Mock message for clusters failure: cluster_1 (404), cluster_2 (503)'
       )
     ).toBeInTheDocument();
   });

src/views/domains-page/domains-page-error-banner/domains-page-error-banner.types.ts

@@ -1,3 +1,8 @@
 export type Props = {
-  failedClusters: Array<string>;
+  failedClusters: DomainsListingFailedCluster[];
+};
+
+export type DomainsListingFailedCluster = {
+  clusterName: string;
+  httpStatus: number;
 };

src/views/domains-page/domains-page-error-banner/helpers/__tests__/get-domains-error-message.test.ts

@@ -0,0 +1,85 @@
+import { type DomainsListingFailedCluster } from '../../domains-page-error-banner.types';
+import { getDomainsErrorMessage } from '../get-domains-error-message';
+
+describe('getDomainsErrorMessage', () => {
+  it('should return empty string when failedClusters is empty', () => {
+    const result = getDomainsErrorMessage({ failedClusters: [] });
+    expect(result).toBe('');
+  });
+
+  it('should return empty string when failedClusters is null', () => {
+    const result = getDomainsErrorMessage({ failedClusters: null as any });
+    expect(result).toBe('');
+  });
+
+  it('should return empty string when failedClusters is undefined', () => {
+    const result = getDomainsErrorMessage({ failedClusters: undefined as any });
+    expect(result).toBe('');
+  });
+
+  it('should return service unavailable message when all clusters have 503 status', () => {
+    const failedClusters: DomainsListingFailedCluster[] = [
+      { clusterName: 'cluster-1', httpStatus: 503 },
+      { clusterName: 'cluster-2', httpStatus: 503 },
+      { clusterName: 'cluster-3', httpStatus: 503 },
+    ];
+
+    const result = getDomainsErrorMessage({ failedClusters });
+
+    expect(result).toBe(
+      'Failed to connect to the following clusters: cluster-1, cluster-2, cluster-3'
+    );
+  });
+
+  it('should return API failure message when all clusters have non-503 status', () => {
+    const failedClusters: DomainsListingFailedCluster[] = [
+      { clusterName: 'cluster-1', httpStatus: 500 },
+      { clusterName: 'cluster-2', httpStatus: 404 },
+      { clusterName: 'cluster-3', httpStatus: 403 },
+    ];
+
+    const result = getDomainsErrorMessage({ failedClusters });
+
+    expect(result).toBe(
+      'Failed to fetch domains for following clusters: cluster-1, cluster-2, cluster-3'
+    );
+  });
+
+  it('should return detailed message with status codes when clusters have mixed status codes', () => {
+    const failedClusters: DomainsListingFailedCluster[] = [
+      { clusterName: 'cluster-1', httpStatus: 503 },
+      { clusterName: 'cluster-2', httpStatus: 500 },
+      { clusterName: 'cluster-3', httpStatus: 404 },
+    ];
+
+    const result = getDomainsErrorMessage({ failedClusters });
+
+    expect(result).toBe(
+      'Failed to fetch domains for following clusters: cluster-1 (503), cluster-2 (500), cluster-3 (404)'
+    );
+  });
+
+  it('should handle single cluster with 503 status', () => {
+    const failedClusters: DomainsListingFailedCluster[] = [
+      { clusterName: 'single-cluster', httpStatus: 503 },
+    ];
+
+    const result = getDomainsErrorMessage({ failedClusters });
+
+    expect(result).toBe(
+      'Failed to connect to the following clusters: single-cluster'
+    );
+  });
+
+  it('should handle single cluster with non-503 status', () => {
+    const failedClusters: DomainsListingFailedCluster[] = [
+      { clusterName: 'single-cluster', httpStatus: 500 },
+    ];
+
+    const result = getDomainsErrorMessage({ failedClusters });
+
+    expect(result).toBe(
+      'Failed to fetch domains for following clusters: single-cluster'
+    );
+  });
+});

src/views/domains-page/domains-page-error-banner/helpers/get-domains-error-message.ts

@@ -0,0 +1,33 @@
+import { type DomainsListingFailedCluster } from '../domains-page-error-banner.types';
+
+export function getDomainsErrorMessage({
+  failedClusters,
+}: {
+  failedClusters: DomainsListingFailedCluster[];
+}): string {
+  if (!failedClusters || failedClusters.length === 0) {
+    return '';
+  }
+
+  const clusterNames = failedClusters
+    .map((cluster) => cluster.clusterName)
+    .join(', ');
+
+  const allServiceUnavailable = failedClusters.every(
+    (cluster) => cluster.httpStatus === 503
+  );
+
+  if (allServiceUnavailable) {
+    return `Failed to connect to the following clusters: ${clusterNames}`;
+  }
+
+  const allApiFailures = failedClusters.every(
+    (cluster) => cluster.httpStatus !== 503
+  );
+
+  const clusterDetails = failedClusters
+    .map((cluster) => `${cluster.clusterName} (${cluster.httpStatus})`)
+    .join(', ');
+
+  return `Failed to fetch domains for following clusters: ${allApiFailures ? clusterNames : clusterDetails}`;
+}

src/views/domains-page/helpers/get-all-domains.ts

@@ -47,9 +47,18 @@ export const getAllDomains = async () => {
     domains: getUniqueDomains(
       results.flatMap((res) => (res.status === 'fulfilled' ? res.value : []))
     ),
-    failedClusters: CLUSTERS_CONFIGS.map((config) => config.clusterName).filter(
-      (_, index) => results[index].status === 'rejected'
-    ),
+    failedClusters: CLUSTERS_CONFIGS.map((config) => ({
+      clusterName: config.clusterName,
+      rejection: results.find((res) => res.status === 'rejected'),
+    }))
+      .filter((res) => res.rejection)
+      .map((res) => ({
+        clusterName: res.clusterName,
+        httpStatus:
+          res.rejection && 'reason' in res.rejection
+            ? res.rejection.reason.httpStatusCode
+            : undefined,
+      })),
   };
 };