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,
- )}
- |
-
-
- ))}
-
- )}
+
+ ))}
+
)}