Merge pull request #4067 from adamdmharvey/k8s-errors

kubernetes: Update display of errors

.changeset/giant-geckos-tickle.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-kubernetes': patch
+---
+
+Minor updates to display of errors

plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx

@@ -113,17 +113,17 @@ export const ErrorEmptyState = () => {
   return (
     <Grid
       container
-      justify="center"
-      direction="column"
+      justify="space-around"
+      direction="row"
       alignItems="center"
       spacing={2}
     >
-      <Grid item xs={12}>
+      <Grid item xs={4}>
         <Typography variant="h5">
           Nice! There are no errors to report!
         </Typography>
       </Grid>
-      <Grid item xs={12}>
+      <Grid item xs={4}>
         <img
           src={EmptyStateImage}
           alt="EmptyState"

plugins/kubernetes/src/components/KubernetesContent/ErrorPanel.test.tsx

@@ -33,7 +33,7 @@ describe('ErrorPanel', () => {
     // title
     expect(
       getByText(
-        'There was an error retrieving some Kubernetes resources for the entity: THIS_ENTITY',
+        '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();
 
@@ -67,7 +67,7 @@ describe('ErrorPanel', () => {
     // title
     expect(
       getByText(
-        'There was an error retrieving some Kubernetes resources for the entity: THIS_ENTITY',
+        '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();
 

plugins/kubernetes/src/components/KubernetesContent/ErrorPanel.tsx

@@ -52,8 +52,8 @@ export const ErrorPanel = ({
   clustersWithErrors,
 }: ErrorPanelProps) => (
   <WarningPanel
-    title="There was an error retrieving kubernetes objects"
-    message={`There was an error retrieving some Kubernetes resources for the entity: ${entityName}`}
+    title="There was a problem retrieving Kubernetes objects"
+    message={`There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`}
   >
     {clustersWithErrors && (
       <div>Errors: {clustersWithErrorsToErrorMessage(clustersWithErrors)}</div>

plugins/kubernetes/src/components/KubernetesContent/KubernetesContent.tsx

@@ -106,51 +106,55 @@ export const KubernetesContent = ({ entity }: KubernetesContentProps) => {
   return (
     <Page themeId="tool">
       <Content>
-        <Grid container spacing={3} direction="column">
-          {kubernetesObjects === undefined && error === undefined && (
-            <Progress />
-          )}
+        {kubernetesObjects === undefined && error === undefined && <Progress />}
 
-          {/* errors retrieved from the kubernetes clusters */}
-          {clustersWithErrors.length > 0 && (
-            <ErrorPanel
-              entityName={entity.metadata.name}
-              clustersWithErrors={clustersWithErrors}
-            />
-          )}
+        {/* errors retrieved from the kubernetes clusters */}
+        {clustersWithErrors.length > 0 && (
+          <Grid container spacing={3} direction="column">
+            <Grid item>
+              <ErrorPanel
+                entityName={entity.metadata.name}
+                clustersWithErrors={clustersWithErrors}
+              />
+            </Grid>
+          </Grid>
+        )}
 
-          {/* other errors */}
-          {error !== undefined && (
-            <ErrorPanel
-              entityName={entity.metadata.name}
-              errorMessage={error}
-            />
-          )}
+        {/* other errors */}
+        {error !== undefined && (
+          <Grid container spacing={3} direction="column">
+            <Grid item>
+              <ErrorPanel
+                entityName={entity.metadata.name}
+                errorMessage={error}
+              />
+            </Grid>
+          </Grid>
+        )}
 
-          {kubernetesObjects && (
-            <>
-              <Grid item>
-                <ErrorReporting detectedErrors={detectedErrors} />
-              </Grid>
-              <Grid item>
-                <Divider />
-              </Grid>
-              <Grid item>
-                <Typography variant="h3">Your Clusters</Typography>
-              </Grid>
-              <Grid item container>
-                {kubernetesObjects?.items.map((item, i) => (
-                  <Grid item key={i} xs={12}>
-                    <Cluster
-                      clusterObjects={item}
-                      detectedErrors={detectedErrors.get(item.cluster.name)}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            </>
-          )}
-        </Grid>
+        {kubernetesObjects && (
+          <Grid container spacing={3} direction="column">
+            <Grid item>
+              <ErrorReporting detectedErrors={detectedErrors} />
+            </Grid>
+            <Grid item>
+              <Divider />
+            </Grid>
+            <Grid item>
+              <Typography variant="h3">Your Clusters</Typography>
+            </Grid>
+            <Grid item container>
+              {kubernetesObjects?.items.map((item, i) => (
+                <Grid item key={i} xs={12}>
+                  <Cluster
+                    clusterObjects={item}
+                    detectedErrors={detectedErrors.get(item.cluster.name)}
+                  />
+                </Grid>
+              ))}
+            </Grid>
+          </Grid>
+        )}
       </Content>
     </Page>
   );