From 2cfa91d61abb4215987684824ab2fcf67cacbbaa Mon Sep 17 00:00:00 2001 From: Star Richardson <67430892+alicenstar@users.noreply.github.com> Date: Thu, 19 Oct 2023 11:55:06 -0600 Subject: [PATCH 1/2] remove pause and delete columns until the api code is ready, add loading state, update styles --- .../apps/HelmVMClusterManagement.tsx | 192 ++++++++--------- web/src/components/apps/HelmVMViewNode.jsx | 203 ++++++++++-------- .../apps/HelmVMClusterManagement.scss | 25 --- 3 files changed, 201 insertions(+), 219 deletions(-) diff --git a/web/src/components/apps/HelmVMClusterManagement.tsx b/web/src/components/apps/HelmVMClusterManagement.tsx index aa38833731..01c5f6d4ec 100644 --- a/web/src/components/apps/HelmVMClusterManagement.tsx +++ b/web/src/components/apps/HelmVMClusterManagement.tsx @@ -233,25 +233,20 @@ const HelmVMClusterManagement = ({ header: "Pods", size: 150, }, - { - accessorKey: "pause", - header: "Pause", - size: 100, - }, - { - accessorKey: "delete", - header: "Delete", - size: 100, - }, + // { + // accessorKey: "pause", + // header: "Pause", + // size: 100, + // }, + // { + // accessorKey: "delete", + // header: "Delete", + // size: 80, + // }, ], [] ); - const calculateUtilization = (capacity: number, available: number) => { - const used = capacity - available; - return Math.round((used / capacity) * 100); - }; - const mappedNodes = useMemo(() => { return ( nodesData?.nodes?.map((n) => ({ @@ -278,11 +273,12 @@ const HelmVMClusterManagement = ({ ), status: n.isReady ? "Ready" : "Not Ready", - cpu: `${calculateUtilization(n.cpu.capacity, n.cpu.available)}%`, - memory: `${calculateUtilization( - n.memory.capacity, - n.memory.available - )}%`, + cpu: `${(n.cpu.capacity - n.cpu.available).toFixed( + 2 + )} / ${n.cpu.capacity.toFixed(2)}`, + memory: `${(n.memory.capacity - n.memory.available).toFixed( + 2 + )}GB / ${n.memory.capacity.toFixed(2)}GB`, pods: `${n.pods.capacity - n.pods.available} / ${n.pods.capacity}`, pause: ( <> @@ -300,93 +296,89 @@ const HelmVMClusterManagement = ({ // #endregion return ( -
+
-
-
-

- Cluster Nodes +

+

+ Cluster Nodes +

+
+

+ This page lists the nodes that are configured and shows the + status/health of each.

-
-

- This page lists the nodes that are configured and shows the - status/health of each. + {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && ( + + )} +

+
+ {nodesLoading && ( +

+ Loading nodes...

- {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && ( - - )} -
-
- {nodesLoading && ( -

- Loading nodes... -

- )} - {!nodesData && nodesError && ( -

- {nodesError?.message} -

- )} - {nodesData?.nodes && ( - + {nodesError?.message} +

+ )} + {nodesData?.nodes && ( + - )} -
- {fromLicenseFlow && ( - - Continue - + }, + }} + muiTableBodyCellProps={{ + sx: { + borderRight: "2px solid #e0e0e0", + }, + }} + muiTablePaperProps={{ + sx: { + width: "100%", + boxShadow: "none", + }, + }} + initialState={{ density: "compact" }} + enablePagination={false} + enableColumnFilters={false} + /> )}
+ {fromLicenseFlow && ( + + Continue + + )}
{/* MODALS */} { const { nodeName } = useParams(); - const { data: nodeData } = useQuery({ + const { data: nodeData, isLoading: nodeLoading } = useQuery({ queryKey: ["helmVmNode", nodeName], queryFn: async ({ queryKey }) => { const [, nodeName] = queryKey; @@ -57,11 +58,6 @@ const HelmVMViewNode = () => { header: "Status", size: 150, }, - { - accessorKey: "disk", - header: "Disk", - size: 150, - }, { accessorKey: "cpu", header: "CPU", @@ -72,11 +68,11 @@ const HelmVMViewNode = () => { header: "Memory", size: 150, }, - { - accessorKey: "canDelete", - header: "Delete Pod", - size: 150, - }, + // { + // accessorKey: "delete", + // header: "Delete", + // size: 80, + // }, ], [] ); @@ -85,10 +81,9 @@ const HelmVMViewNode = () => { return node?.podList?.map((p) => ({ name: p.metadata.name, status: p.status.phase, - disk: null, cpu: null, memory: null, - canDelete: ( + delete: ( <> @@ -98,7 +93,7 @@ const HelmVMViewNode = () => { // #endregion return ( -
+
{/* Breadcrumbs */}

{ > Cluster Nodes {" "} - / {node?.name} + / {nodeName}

- {/* Node Info */} -
-

- Node Info -

-
-

Name

-

{node?.name}

+ + {nodeLoading && ( +
+
-
- {/* Pods table */} -
-

Pods

- -
- {/* Troubleshooting */} -
-

- Troubleshooting -

-
- {/* Danger Zone */} -
-

- Danger Zone -

- -
+ )} + {!nodeLoading && node && ( + <> + {/* Node Info */} +
+

+ {node?.name} +

+
+
+

+ kubelet version +

+

{node?.kubeletVersion}

+
+
+

+ kube-proxy version +

+

{node?.kubeletVersion}

+
+
+

OS

+

{node?.kubeletVersion}

+
+
+

+ kurl version +

+

{node?.kubeletVersion}

+
+
+
+ {/* Pods table */} +
+

Pods

+
+ +
+
+ {/* Troubleshooting */} + {/*
+

+ Troubleshooting +

+
*/} + {/* Danger Zone */} + {/*
+

+ Danger Zone +

+ +
*/} + + )}
); }; diff --git a/web/src/scss/components/apps/HelmVMClusterManagement.scss b/web/src/scss/components/apps/HelmVMClusterManagement.scss index cd8bc74a01..2fd75adb03 100644 --- a/web/src/scss/components/apps/HelmVMClusterManagement.scss +++ b/web/src/scss/components/apps/HelmVMClusterManagement.scss @@ -5,31 +5,6 @@ height: 85px; width: 200px; } - - .timestamp { - position: relative; - margin-top: -10px; - z-index: -1; - } - - .node-label { - font-size: 12px; - font-weight: 500; - line-height: 12px; - color: #577981; - padding: 4px 6px; - border-radius: 20px; - background-color: #ffffff; - white-space: nowrap; - border: 1px solid #577981; - margin-right: 8px; - display: inline-block; - margin-top: 8px; - - &:last-child { - margin-right: 0; - } - } } .HelmVMNodeRow--wrapper { From 9fc6084a2e6c488d0c0e51736dbc16d633ec7312 Mon Sep 17 00:00:00 2001 From: Star Richardson <67430892+alicenstar@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:05:41 -0600 Subject: [PATCH 2/2] update variable names, fix redirect to cluster manage --- web/src/components/UploadLicenseFile.tsx | 8 ++++---- .../components/apps/HelmVMClusterManagement.tsx | 16 +++++++--------- web/src/components/apps/HelmVMViewNode.jsx | 8 ++++---- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/web/src/components/UploadLicenseFile.tsx b/web/src/components/UploadLicenseFile.tsx index 8992f063b2..e08cf5b829 100644 --- a/web/src/components/UploadLicenseFile.tsx +++ b/web/src/components/UploadLicenseFile.tsx @@ -261,13 +261,13 @@ const UploadLicenseFile = (props: Props) => { return; } - if (data.isConfigurable) { - navigate(`/${data.slug}/config`, { replace: true }); + if (props.isHelmVM) { + navigate(`/${data.slug}/cluster/manage`, { replace: true }); return; } - if (props.isHelmVM) { - navigate(`/${data.slug}/cluster/manage`, { replace: true }); + if (data.isConfigurable) { + navigate(`/${data.slug}/config`, { replace: true }); return; } diff --git a/web/src/components/apps/HelmVMClusterManagement.tsx b/web/src/components/apps/HelmVMClusterManagement.tsx index 01c5f6d4ec..a545de0e75 100644 --- a/web/src/components/apps/HelmVMClusterManagement.tsx +++ b/web/src/components/apps/HelmVMClusterManagement.tsx @@ -65,15 +65,15 @@ const HelmVMClusterManagement = ({ kubeletVersion: string; cpu: { capacity: number; - available: number; + used: number; }; memory: { capacity: number; - available: number; + used: number; }; pods: { capacity: number; - available: number; + used: number; }; labels: string[]; conditions: { @@ -273,13 +273,11 @@ const HelmVMClusterManagement = ({
), status: n.isReady ? "Ready" : "Not Ready", - cpu: `${(n.cpu.capacity - n.cpu.available).toFixed( + cpu: `${n.cpu.used.toFixed(2)} / ${n.cpu.capacity.toFixed(2)}`, + memory: `${n.memory.used.toFixed(2)}GB / ${n.memory.capacity.toFixed( 2 - )} / ${n.cpu.capacity.toFixed(2)}`, - memory: `${(n.memory.capacity - n.memory.available).toFixed( - 2 - )}GB / ${n.memory.capacity.toFixed(2)}GB`, - pods: `${n.pods.capacity - n.pods.available} / ${n.pods.capacity}`, + )}GB`, + pods: `${n.pods.used} / ${n.pods.capacity}`, pause: ( <> diff --git a/web/src/components/apps/HelmVMViewNode.jsx b/web/src/components/apps/HelmVMViewNode.jsx index ef029fdae8..3af18d68ee 100644 --- a/web/src/components/apps/HelmVMViewNode.jsx +++ b/web/src/components/apps/HelmVMViewNode.jsx @@ -79,10 +79,10 @@ const HelmVMViewNode = () => { const mappedPods = useMemo(() => { return node?.podList?.map((p) => ({ - name: p.metadata.name, - status: p.status.phase, - cpu: null, - memory: null, + name: p.name, + status: p.status, + cpu: p.cpu, + memory: `${p.memory}GB`, delete: ( <>