frontend: Add ClusterGroupErrorMessage for displaying clusters with e…

…rrors Signed-off-by: René Dudfield <renedudfield@microsoft.com> Co-authored-by: Joaquim Rocha <renedudfield@microsoft.com> Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>
headlamp-k8s · Oct 15, 2024 · 7c80600 · 7c80600
1 parent 73eb0ae
commit 7c80600
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 0 deletions.
diff --git a/frontend/src/components/cluster/ClusterGroupErrorMessage.stories.tsx b/frontend/src/components/cluster/ClusterGroupErrorMessage.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ClusterGroupErrorMessage,
+  ClusterGroupErrorMessageProps,
+} from './ClusterGroupErrorMessage';
+
+const meta: Meta<typeof ClusterGroupErrorMessage> = {
+  component: ClusterGroupErrorMessage,
+};
+
+export default meta;
+type Story = StoryObj<ClusterGroupErrorMessageProps>;
+
+export const WithClusterErrors: Story = {
+  args: {
+    clusterErrors: {
+      cluster1: 'Error in cluster 1',
+      cluster3: 'Error in cluster 3',
+    },
+  },
+};
+
+export const WithMessageUsed: Story = {
+  args: {
+    message: 'This message is used and not clusterErrors.',
+    clusterErrors: {
+      cluster1: 'Error in cluster 1',
+      cluster3: 'Error in cluster 3',
+    },
+  },
+};
+
+export const WithDetailedClusterErrors: Story = {
+  args: {
+    clusterErrors: {
+      cluster1: 'Error in cluster 1',
+      cluster3: null,
+    },
+  },
+};
diff --git a/frontend/src/components/cluster/ClusterGroupErrorMessage.tsx b/frontend/src/components/cluster/ClusterGroupErrorMessage.tsx
@@ -0,0 +1,63 @@
+import { InlineIcon } from '@iconify/react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ApiError } from '../../lib/k8s/apiProxy';
+
+export interface ClusterGroupErrorMessageProps {
+  /**
+   * A message to display when clusters fail to load resources.
+   * This is used if it is passed in, otherwise a message made from clusterErrors is used.
+   */
+  message?: string;
+  /**
+   * Either an array of errors, or keyed by cluster name, valued by the error for that cluster.
+   */
+  clusterErrors?: string[] | { [cluster: string]: string | ApiError | null };
+}
+
+/**
+ * filter out null errors
+ * @returns errors, but without any that have null values.
+ */
+function cleanNullErrors(errors: ClusterGroupErrorMessageProps['clusterErrors']) {
+  if (!errors) {
+    return {};
+  }
+  const cleanedErrors: ClusterGroupErrorMessageProps['clusterErrors'] = {};
+  Object.entries(errors).forEach(([cluster, error]) => {
+    if (error !== null) {
+      cleanedErrors[cluster] = error;
+    }
+  });
+
+  return cleanedErrors;
+}
+
+export function ClusterGroupErrorMessage({
+  clusterErrors: clusters,
+  message,
+}: ClusterGroupErrorMessageProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const clusterObj = cleanNullErrors(typeof clusters === 'object' ? clusters : {});
+
+  if ((!clusters && !message) || Object.keys(clusterObj).length === 0) {
+    return null;
+  }
+
+  return (
+    <Box p={1} style={{ background: theme.palette.warning.light }}>
+      <Typography style={{ color: theme.palette.warning.main }}>
+        <InlineIcon icon="mdi:alert" color={theme.palette.warning.main} />
+        &nbsp;
+        <>{message}</>
+        {!message &&
+          (Object.keys(clusterObj).length > 2
+            ? t('Failed to load resources from some of the clusters in the group.')
+            : t('Failed to load resources from the following clusters: {{ clusterList }}', {
+                clusterList: Object.keys(clusterObj).join(', '),
+              }))}
+      </Typography>
+    </Box>
+  );
+}
diff --git a/...onents/cluster/__snapshots__/ClusterGroupErrorMessage.WithClusterErrors.stories.storyshot b/...onents/cluster/__snapshots__/ClusterGroupErrorMessage.WithClusterErrors.stories.storyshot
@@ -0,0 +1,16 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-hpgf8j"
+      style="background: rgb(255, 243, 224);"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+        style="color: rgb(196, 69, 0);"
+      >
+
+        Failed to load resources from the following clusters: cluster1, cluster3
+      </p>
+    </div>
+  </div>
+</body>
diff --git a/...luster/__snapshots__/ClusterGroupErrorMessage.WithDetailedClusterErrors.stories.storyshot b/...luster/__snapshots__/ClusterGroupErrorMessage.WithDetailedClusterErrors.stories.storyshot
@@ -0,0 +1,16 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-hpgf8j"
+      style="background: rgb(255, 243, 224);"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+        style="color: rgb(196, 69, 0);"
+      >
+
+        Failed to load resources from the following clusters: cluster1
+      </p>
+    </div>
+  </div>
+</body>
diff --git a/...mponents/cluster/__snapshots__/ClusterGroupErrorMessage.WithMessageUsed.stories.storyshot b/...mponents/cluster/__snapshots__/ClusterGroupErrorMessage.WithMessageUsed.stories.storyshot
@@ -0,0 +1,16 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-hpgf8j"
+      style="background: rgb(255, 243, 224);"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1ezega9-MuiTypography-root"
+        style="color: rgb(196, 69, 0);"
+      >
+
+        This message is used and not clusterErrors.
+      </p>
+    </div>
+  </div>
+</body>
diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -114,6 +114,8 @@
   "Current//context:cluster": "Aktuell",
   "Choose cluster": "Cluster auswählen",
   "Add Cluster": "Cluster hinzufügen",
+  "Failed to load resources from some of the clusters in the group.": "",
+  "Failed to load resources from the following clusters: {{ clusterList }}": "",
   "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.": "",
   "Error setting up clusters, please load a valid kubeconfig file": "Fehler beim Einrichten der Cluster. Bitte laden Sie eine korrekte kubeconfig-Datei",
   "Couldn't read kubeconfig file": "Konnte die kubeconfig-Datei nicht lesen",

diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -114,6 +114,8 @@
   "Current//context:cluster": "Current",
   "Choose cluster": "Choose cluster",
   "Add Cluster": "Add Cluster",
+  "Failed to load resources from some of the clusters in the group.": "Failed to load resources from some of the clusters in the group.",
+  "Failed to load resources from the following clusters: {{ clusterList }}": "Failed to load resources from the following clusters: {{ clusterList }}",
   "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.": "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.",
   "Error setting up clusters, please load a valid kubeconfig file": "Error setting up clusters, please load a valid kubeconfig file",
   "Couldn't read kubeconfig file": "Couldn't read kubeconfig file",

diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -114,6 +114,8 @@
   "Current//context:cluster": "Actuales",
   "Choose cluster": "Elegir cluster",
   "Add Cluster": "Añadir cluster",
+  "Failed to load resources from some of the clusters in the group.": "",
+  "Failed to load resources from the following clusters: {{ clusterList }}": "",
   "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.": "",
   "Error setting up clusters, please load a valid kubeconfig file": "Error al configurar los clusters, por favor cargue un archivo kubeconfig válido",
   "Couldn't read kubeconfig file": "No se pudo leer el archivo kubeconfig",

diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -114,6 +114,8 @@
   "Current//context:cluster": "Actuel",
   "Choose cluster": "Choisir un cluster",
   "Add Cluster": "Ajouter un cluster",
+  "Failed to load resources from some of the clusters in the group.": "",
+  "Failed to load resources from the following clusters: {{ clusterList }}": "",
   "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.": "",
   "Error setting up clusters, please load a valid kubeconfig file": "Erreur lors de la configuration des clusters, veuillez charger un fichier kubeconfig valide",
   "Couldn't read kubeconfig file": "Impossible de lire le fichier kubeconfig",

diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -114,6 +114,8 @@
   "Current//context:cluster": "Actual",
   "Choose cluster": "Escolha o cluster",
   "Add Cluster": "Adicionar Cluster",
+  "Failed to load resources from some of the clusters in the group.": "",
+  "Failed to load resources from the following clusters: {{ clusterList }}": "",
   "Duplicate cluster: {{ clusterNames }} in the list. Please edit the context name.": "",
   "Error setting up clusters, please load a valid kubeconfig file": "Erro ao configurar clusters, por favor carregue um ficheiro kubeconfig válido",
   "Couldn't read kubeconfig file": "Não foi possível ler o ficheiro kubeconfig",