diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx index f156eed8e..be0f159f9 100644 --- a/packages/app/src/KubernetesDashboardPage.tsx +++ b/packages/app/src/KubernetesDashboardPage.tsx @@ -39,6 +39,8 @@ import { parseTimeQuery, useTimeQuery } from './timeQuery'; import { KubePhase } from './types'; import { formatNumber, formatUptime } from './utils'; +const makeId = () => Math.floor(100000000 * Math.random()).toString(36); + const getKubePhaseNumber = (phase: string) => { switch (phase) { case 'running': @@ -85,6 +87,35 @@ type InfraPodsStatusTableColumn = | 'memLimit' | 'phase'; +const TableLoading = () => { + return ( + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ ); +}; + export const InfraPodsStatusTable = ({ dateRange, where, @@ -192,6 +223,7 @@ export const InfraPodsStatusTable = ({ return data.data.map((row: any) => { return { + id: makeId(), name: row.group[0], namespace: row.group[1], node: row.group[2], @@ -206,11 +238,11 @@ export const InfraPodsStatusTable = ({ }); }, [data]); - const getLink = (podName: string) => { + const getLink = React.useCallback((podName: string) => { const searchParams = new URLSearchParams(window.location.search); searchParams.set('podName', `${podName}`); return window.location.pathname + '?' + searchParams.toString(); - }; + }, []); const getThSortProps = (column: InfraPodsStatusTableColumn) => ({ onSort: (order: 'asc' | 'desc') => { @@ -247,11 +279,13 @@ export const InfraPodsStatusTable = ({ style: { maxHeight: 300 }, }} > - {isError ? ( + {isLoading ? ( + + ) : isError ? (
Unable to load pod metrics
- ) : !isLoading && podsList.length === 0 ? ( + ) : podsList.length === 0 ? (
No pods found
@@ -279,85 +313,68 @@ export const InfraPodsStatusTable = ({ - {isLoading ? ( - - {Array.from({ length: 4 }).map((_, index) => ( - - {Array.from({ length: 8 }).map((_, tdIndex) => ( - - - - ))} + + {podsList.map(pod => ( + + + {pod.name} + {pod.namespace} + {pod.node} + + + + + + + {formatNumber( + pod.cpuLimit, + K8S_CPU_PERCENTAGE_NUMBER_FORMAT, + )} + + + + + + + {formatNumber( + pod.memLimit, + K8S_CPU_PERCENTAGE_NUMBER_FORMAT, + )} + + + + {pod.uptime ? formatUptime(pod.uptime) : '–'} + + = 10 + ? 'red.6' + : pod.restarts >= 5 + ? 'yellow.3' + : 'grey.7' + } + > + {pod.restarts} + + - ))} - - ) : ( - - {podsList.map(pod => ( - - - {pod.name} - {pod.namespace} - {pod.node} - - - - - - - {formatNumber( - pod.cpuLimit, - K8S_CPU_PERCENTAGE_NUMBER_FORMAT, - )} - - - - - - - {formatNumber( - pod.memLimit, - K8S_CPU_PERCENTAGE_NUMBER_FORMAT, - )} - - - - {pod.uptime ? formatUptime(pod.uptime) : '–'} - - = 10 - ? 'red.6' - : pod.restarts >= 5 - ? 'yellow.3' - : 'grey.7' - } - > - {pod.restarts} - - - - - ))} - - )} + + ))} + )} @@ -449,11 +466,13 @@ const NodesTable = ({ style: { maxHeight: 300 }, }} > - {isError ? ( + {isLoading ? ( + + ) : isError ? (
Unable to load nodes
- ) : !isLoading && nodesList.length === 0 ? ( + ) : nodesList.length === 0 ? (
No nodes found
@@ -468,55 +487,37 @@ const NodesTable = ({ Uptime - {isLoading ? ( - - {Array.from({ length: 4 }).map((_, index) => ( - - {Array.from({ length: 5 }).map((_, index) => ( - - - - ))} + + + {nodesList.map(node => ( + + + {node.name || 'N/A'} + + {node.ready === 1 ? ( + + Ready + + ) : ( + + Not Ready + + )} + + + {formatNumber( + node.cpuAvg, + K8S_CPU_PERCENTAGE_NUMBER_FORMAT, + )} + + + {formatNumber(node.memAvg, K8S_MEM_NUMBER_FORMAT)} + + {node.uptime ? formatUptime(node.uptime) : '–'} - ))} - - ) : ( - - {nodesList.map(node => ( - - - {node.name || 'N/A'} - - {node.ready === 1 ? ( - - Ready - - ) : ( - - Not Ready - - )} - - - {formatNumber( - node.cpuAvg, - K8S_CPU_PERCENTAGE_NUMBER_FORMAT, - )} - - - {formatNumber(node.memAvg, K8S_MEM_NUMBER_FORMAT)} - - {node.uptime ? formatUptime(node.uptime) : '–'} - - - ))} - - )} + + ))} + )} @@ -598,11 +599,13 @@ const NamespacesTable = ({ style: { maxHeight: 300 }, }} > - {isError ? ( + {isLoading ? ( + + ) : isError ? (
Unable to load namespaces
- ) : !isLoading && namespacesList.length === 0 ? ( + ) : namespacesList.length === 0 ? (
No namespaces found
@@ -616,57 +619,35 @@ const NamespacesTable = ({ Memory - {isLoading ? ( - - {Array.from({ length: 4 }).map((_, index) => ( - - {Array.from({ length: 5 }).map((_, index) => ( - - - - ))} + + {namespacesList.map(namespace => ( + + + {namespace.name || 'N/A'} + + {namespace.phase === 1 ? ( + + Ready + + ) : ( + + Terminating + + )} + + + {formatNumber( + namespace.cpuAvg, + K8S_CPU_PERCENTAGE_NUMBER_FORMAT, + )} + + + {formatNumber(namespace.memAvg, K8S_MEM_NUMBER_FORMAT)} + - ))} - - ) : ( - - {namespacesList.map(namespace => ( - - - {namespace.name || 'N/A'} - - {namespace.phase === 1 ? ( - - Ready - - ) : ( - - Terminating - - )} - - - {formatNumber( - namespace.cpuAvg, - K8S_CPU_PERCENTAGE_NUMBER_FORMAT, - )} - - - {formatNumber( - namespace.memAvg, - K8S_MEM_NUMBER_FORMAT, - )} - - - - ))} - - )} + + ))} + )}