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]) && (
+
+ Add node
+
+ )}
+
+
+ {nodesLoading && (
+
+ Loading nodes...
- {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && (
-
- Add node
-
- )}
-
-
- {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: (
<>
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 */}
-
- {/* Troubleshooting */}
-
- {/* Danger Zone */}
-
-
- Danger Zone
-
-
- Prepare node for delete
-
-
+ )}
+ {!nodeLoading && node && (
+ <>
+ {/* Node Info */}
+
+
+ {node?.name}
+
+
+
+
+ kubelet version
+
+
{node?.kubeletVersion}
+
+
+
+ kube-proxy version
+
+
{node?.kubeletVersion}
+
+
+
OS
+
{node?.kubeletVersion}
+
+
+
+ kurl version
+
+
{node?.kubeletVersion}
+
+
+
+ {/* Pods table */}
+
+ {/* Troubleshooting */}
+ {/*
*/}
+ {/* Danger Zone */}
+ {/*
+
+ Danger Zone
+
+
+ Prepare node for delete
+
+
*/}
+ >
+ )}
);
};
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: (
<>
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: (
<>
Delete