frontend: Node: Fix table columns and empty values

This change adjusts the width of the table columns to prevent UI issues and fills in empty values where applicable. Fixes: #2100 Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
headlamp-k8s · Dec 6, 2024 · 7a92511 · 7a92511
1 parent 0f93861
commit 7a92511
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 6 deletions.
diff --git a/frontend/src/components/node/List.tsx b/frontend/src/components/node/List.tsx
@@ -26,6 +26,7 @@ export default function NodeList() {
         {
           id: 'cpu',
           label: t('CPU'),
+          gridTemplate: 'min-content',
           getValue: node => {
             const [used] = getResourceMetrics(node, nodeMetrics || [], 'cpu');
             return used;
@@ -58,7 +59,6 @@ export default function NodeList() {
         {
           id: 'ready',
           label: t('translation|Ready'),
-          gridTemplate: 'minmax(150px, .3fr)',
           getValue: node => {
             const isReady = !!node.status.conditions?.find(
               condition => condition.type === 'Ready' && condition.status === 'True'
@@ -93,7 +93,7 @@ export default function NodeList() {
         {
           id: 'externalIP',
           label: t('External IP'),
-          getValue: node => node.getExternalIP(),
+          getValue: node => node.getExternalIP() || t('translation|None'),
         },
         {
           id: 'version',

diff --git a/frontend/src/components/node/__snapshots__/List.Nodes.stories.storyshot b/frontend/src/components/node/__snapshots__/List.Nodes.stories.storyshot
@@ -154,7 +154,7 @@
             </div>
           </div>
           <table
-            class="MuiTable-root css-15wqx7-MuiTable-root"
+            class="MuiTable-root css-9umj5b-MuiTable-root"
           >
             <thead
               class="MuiTableHead-root css-1tmrira-MuiTableHead-root"
@@ -795,7 +795,9 @@
                 />
                 <td
                   class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-vl9lcz-MuiTableCell-root"
-                />
+                >
+                  None
+                </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-15vcj44-MuiTableCell-root"
                 />
@@ -891,7 +893,9 @@
                 />
                 <td
                   class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-vl9lcz-MuiTableCell-root"
-                />
+                >
+                  None
+                </td>
                 <td
                   class="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-sizeMedium css-15vcj44-MuiTableCell-root"
                 />

diff --git a/frontend/src/components/node/utils.tsx b/frontend/src/components/node/utils.tsx
@@ -1,6 +1,7 @@
 import { Box, Chip, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
 import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import Node from '../../lib/k8s/node';
 
 const WrappingBox = styled(Box)(({ theme }) => ({
@@ -19,8 +20,9 @@ const PaddedChip = styled(Chip)({
 
 export function NodeTaintsLabel(props: { node: Node }) {
   const { node } = props;
+  const { t } = useTranslation(['glossary', 'translation']);
   if (node.spec?.taints === undefined) {
-    return <WrappingBox></WrappingBox>;
+    return <WrappingBox>{t('translation|None')}</WrappingBox>;
   }
   const limits: ReactNode[] = [];
   node.spec.taints.forEach(taint => {

diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
@@ -358,6 +358,7 @@
   "Taints": "",
   "Not ready yet!": "Noch nicht fertig!",
   "Internal IP": "Interne IP",
+  "None": "",
   "Software": "Software",
   "Redirecting to main page…": "Weiterleiten zur Hauptseite…",
   "Logs are paused. Click the follow button to resume following them.": "Ereignisprotokolle wurden angehalten. Klicken Sie auf die Schaltfläche \"Verfolgen\", um die Protokollanzeige fortzusetzen.",

diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
@@ -358,6 +358,7 @@
   "Taints": "Taints",
   "Not ready yet!": "Not ready yet!",
   "Internal IP": "Internal IP",
+  "None": "None",
   "Software": "Software",
   "Redirecting to main page…": "Redirecting to main page…",
   "Logs are paused. Click the follow button to resume following them.": "Logs are paused. Click the follow button to resume following them.",

diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
@@ -359,6 +359,7 @@
   "Taints": "",
   "Not ready yet!": "¡No listo todavía!",
   "Internal IP": "IP interna",
+  "None": "",
   "Software": "Software",
   "Redirecting to main page…": "Redireccionando a la página principal…",
   "Logs are paused. Click the follow button to resume following them.": "Los registros están en pausa. Haga clic en el botón siguiente para continuar a seguirlos.",

diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
@@ -359,6 +359,7 @@
   "Taints": "",
   "Not ready yet!": "Pas encore prêt !",
   "Internal IP": "IP interne",
+  "None": "",
   "Software": "Logiciel",
   "Redirecting to main page…": "Redirection vers la page principale…",
   "Logs are paused. Click the follow button to resume following them.": "Les journaux sont en pause. Cliquez sur le bouton suivre pour reprendre leur suivi.",

diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
@@ -359,6 +359,7 @@
   "Taints": "",
   "Not ready yet!": "Ainda não pronto!",
   "Internal IP": "IP Interno",
+  "None": "",
   "Software": "Software",
   "Redirecting to main page…": "A redireccionar para a página principal…",
   "Logs are paused. Click the follow button to resume following them.": "Os \"logs\" estão pausados. Clique no seguinte botão para voltar a segui-los.",

diff --git a/frontend/src/i18n/locales/zh-tw/translation.json b/frontend/src/i18n/locales/zh-tw/translation.json
@@ -357,6 +357,7 @@
   "Taints": "污點",
   "Not ready yet!": "尚未準備好！",
   "Internal IP": "內部 IP",
+  "None": "",
   "Software": "軟體",
   "Redirecting to main page…": "正在重定向到首頁…",
   "Logs are paused. Click the follow button to resume following them.": "日誌已暫停。點擊跟隨按鈕以繼續跟隨它們。",