From bacb5470b6a20212ebed7a20a510e0afc622ff13 Mon Sep 17 00:00:00 2001
From: Jamie Klassen <jklassen@vmware.com>
Date: Wed, 30 Nov 2022 14:09:00 -0500
Subject: [PATCH] frontend displays new error types

Signed-off-by: Jamie Klassen <jklassen@vmware.com>
---
 .../components/ErrorPanel/ErrorPanel.test.tsx | 84 +++++++++++++------
 .../src/components/ErrorPanel/ErrorPanel.tsx  |  5 +-
 2 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx
index 832d6eed91..0d75c09a11 100644
--- a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx
+++ b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.test.tsx
@@ -20,36 +20,14 @@ import { wrapInTestApp } from '@backstage/test-utils';
 import { ErrorPanel } from './ErrorPanel';
 
 describe('ErrorPanel', () => {
-  it('render with error message', async () => {
-    const { getByText } = render(
-      wrapInTestApp(
-        <ErrorPanel
-          entityName="THIS_ENTITY"
-          errorMessage="SOME_ERROR_MESSAGE"
-        />,
-      ),
-    );
-
-    // title
-    expect(
-      getByText(
-        'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.',
-      ),
-    ).toBeInTheDocument();
-
-    // message
-    expect(getByText('Errors: SOME_ERROR_MESSAGE')).toBeInTheDocument();
-  });
-  it('render with cluster errors', async () => {
+  it('displays path and status code when a cluster has an HTTP error', async () => {
     const { getByText } = render(
       wrapInTestApp(
         <ErrorPanel
           entityName="THIS_ENTITY"
           clustersWithErrors={[
             {
-              cluster: {
-                name: 'THIS_CLUSTER',
-              },
+              cluster: { name: 'THIS_CLUSTER' },
               resources: [],
               podMetrics: [],
               errors: [
@@ -81,4 +59,62 @@ describe('ErrorPanel', () => {
       ),
     ).toBeInTheDocument();
   });
+  it('displays message for non-HTTP-status-related fetch errors', async () => {
+    const { getByText } = render(
+      wrapInTestApp(
+        <ErrorPanel
+          entityName="THIS_ENTITY"
+          clustersWithErrors={[
+            {
+              cluster: { name: 'THIS_CLUSTER' },
+              resources: [],
+              podMetrics: [],
+              errors: [
+                {
+                  errorType: 'FETCH_ERROR',
+                  message: 'description of error',
+                },
+              ],
+            },
+          ]}
+        />,
+      ),
+    );
+
+    // title
+    expect(
+      getByText(
+        'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.',
+      ),
+    ).toBeInTheDocument();
+
+    // message
+    expect(getByText('Errors:')).toBeInTheDocument();
+    expect(getByText('Cluster: THIS_CLUSTER')).toBeInTheDocument();
+    expect(
+      getByText(
+        'Error communicating with Kubernetes: FETCH_ERROR, message: description of error',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('displays error message', async () => {
+    const { getByText } = render(
+      wrapInTestApp(
+        <ErrorPanel
+          entityName="THIS_ENTITY"
+          errorMessage="SOME_ERROR_MESSAGE"
+        />,
+      ),
+    );
+
+    // title
+    expect(
+      getByText(
+        'There was a problem retrieving some Kubernetes resources for the entity: THIS_ENTITY. This could mean that the Error Reporting card is not completely accurate.',
+      ),
+    ).toBeInTheDocument();
+
+    // message
+    expect(getByText('Errors: SOME_ERROR_MESSAGE')).toBeInTheDocument();
+  });
 });
diff --git a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.tsx b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.tsx
index 1e55cd8d18..d2cb88b9ca 100644
--- a/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.tsx
+++ b/plugins/kubernetes/src/components/ErrorPanel/ErrorPanel.tsx
@@ -29,8 +29,9 @@ const clustersWithErrorsToErrorMessage = (
         {c.errors.map((e, j) => {
           return (
             <Typography variant="body2" key={j}>
-              {e.errorType !== 'FETCH_ERROR' &&
-                `Error fetching Kubernetes resource: '${e.resourcePath}', error: ${e.errorType}, status code: ${e.statusCode}`}
+              {e.errorType === 'FETCH_ERROR'
+                ? `Error communicating with Kubernetes: ${e.errorType}, message: ${e.message}`
+                : `Error fetching Kubernetes resource: '${e.resourcePath}', error: ${e.errorType}, status code: ${e.statusCode}`}
             </Typography>
           );
         })}