From 3ef5a2dd293ad70e47d039651e29bbb3561021fd Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 14:05:10 +0000 Subject: [PATCH 1/7] embedded cluster management UI cleanup --- .../apps/EmbeddedClusterManagement.tsx | 176 +++++++++--------- .../apps/EmbeddedClusterViewNode.jsx | 7 +- web/src/components/shared/NavBar.tsx | 2 +- 3 files changed, 98 insertions(+), 87 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index f846f69144..4f2e3a996e 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -1,7 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import classNames from "classnames"; import MaterialReactTable, { MRT_ColumnDef } from "material-react-table"; -import { ChangeEvent, useMemo, useReducer, useState } from "react"; +import { ChangeEvent, useEffect, useMemo, useReducer, useState } from "react"; import Modal from "react-modal"; import { Link, useParams } from "react-router-dom"; @@ -233,6 +233,16 @@ const EmbeddedClusterManagement = ({ // #region node type logic const NODE_TYPES = ["controller"]; + useEffect(() => { + const nodeTypes = rolesData?.roles || NODE_TYPES; + if (nodeTypes.length === 1) { + // if there's only one node type, select it by default + setSelectedNodeTypes(nodeTypes); + } else { + setSelectedNodeTypes([]); + } + }, [rolesData]); + const determineDisabledState = () => { return false; }; @@ -250,13 +260,11 @@ const EmbeddedClusterManagement = ({ // #endregion type NodeColumns = { - name: string | JSX.Element; - roles: JSX.Element; + name: string; + roles: string; status: string; cpu: string; memory: string; - pause: JSX.Element; - delete: JSX.Element; }; const columns = useMemo[]>( @@ -267,11 +275,40 @@ const EmbeddedClusterManagement = ({ enableHiding: false, enableColumnDragging: false, size: 150, + Cell: ({ cell }) => { + const value = cell.getValue(); + return ( + + {value} + + ); + }, }, { accessorKey: "roles", header: "Role(s)", size: 150, + Cell: ({ cell }) => { + const value = cell.getValue(); + if (!value) { + return ""; + } + return ( +
+ {value.split(" ").map((l) => ( + + {l} + + ))} +
+ ); + }, }, { accessorKey: "status", @@ -294,16 +331,6 @@ const EmbeddedClusterManagement = ({ align: "right", }, }, - // { - // accessorKey: "pause", - // header: "Pause", - // size: 100, - // }, - // { - // accessorKey: "delete", - // header: "Delete", - // size: 80, - // }, ], [] ); @@ -311,26 +338,8 @@ const EmbeddedClusterManagement = ({ const mappedNodes = useMemo(() => { return ( (nodesData?.nodes || testData?.nodes)?.map((n) => ({ - name: ( - - {n.name} - - ), - roles: ( -
- {n?.labels?.map((l) => ( - - {l} - - ))} -
- ), + name: n.name, + roles: n.labels?.join(" ") || "", status: n.isReady ? "Ready" : "Not Ready", cpu: `${n.cpu.used.toFixed(2)} / ${n.cpu.capacity.toFixed(2)}`, memory: `${n.memory.used.toFixed(2)} / ${n.memory.capacity.toFixed( @@ -356,13 +365,9 @@ const EmbeddedClusterManagement = ({

- Cluster Nodes + Nodes

-

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

{Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && (

- To add a node to this cluster, select the type of node you'd like to - add. Once you've selected a node type, we will generate a node join - command for you to use in the CLI. When the node successfully joins - the cluster, you will see it appear in the list of nodes on this - page. + Select one or more roles to assign to the new node. Copy the join + command and run it on the machine you'd like to join to the cluster.

-
- {rolesLoading && ( -

- Loading roles... -

- )} - {!rolesData && rolesError && ( -

- {rolesError?.message} -

- )} - {(rolesData?.roles || NODE_TYPES).map((nodeType) => ( -
- -
+ ))} +
+ )}
{selectedNodeTypes.length > 0 && generateAddNodeCommandLoading && (

@@ -524,9 +533,6 @@ const EmbeddedClusterManagement = ({ > {generateAddNodeCommand?.command} -

- Command expires: {generateAddNodeCommand?.expiry} -

)}
diff --git a/web/src/components/apps/EmbeddedClusterViewNode.jsx b/web/src/components/apps/EmbeddedClusterViewNode.jsx index 8ec80a3658..564afcff38 100644 --- a/web/src/components/apps/EmbeddedClusterViewNode.jsx +++ b/web/src/components/apps/EmbeddedClusterViewNode.jsx @@ -108,7 +108,7 @@ const EmbeddedClusterViewNode = () => { to={slug ? `/${slug}/cluster/manage` : `/cluster/manage`} className="!tw-text-blue-300 tw-font-semibold hover:tw-underline" > - Cluster Nodes + Nodes {" "} / {nodeName}

@@ -167,6 +167,11 @@ const EmbeddedClusterViewNode = () => { }, }, }} + muiTableHeadCellProps={{ + sx: { + borderRight: "2px solid #e0e0e0", + }, + }} muiTableBodyProps={{ sx: { "& tr:nth-of-type(odd)": { diff --git a/web/src/components/shared/NavBar.tsx b/web/src/components/shared/NavBar.tsx index fb3e13c80b..a49daa8de7 100644 --- a/web/src/components/shared/NavBar.tsx +++ b/web/src/components/shared/NavBar.tsx @@ -99,7 +99,7 @@ export class NavBar extends PureComponent { let selectedTab = ""; if (this.props.location?.pathname === "/gitops") { selectedTab = "gitops"; - } else if (this.props.location?.pathname === "/cluster/manage") { + } else if (this.props.location?.pathname.startsWith("/cluster")) { selectedTab = "cluster_management"; } else if (this.props.location?.pathname.startsWith("/app")) { selectedTab = "dashboard"; From 42339640a66fc08cc8262a36a844f9913f3a079f Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 14:57:46 +0000 Subject: [PATCH 2/7] conditionally show "Select one or more roles..." text --- web/src/components/apps/EmbeddedClusterManagement.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index 4f2e3a996e..227c1e3371 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -467,8 +467,10 @@ const EmbeddedClusterManagement = ({ />

- Select one or more roles to assign to the new node. Copy the join - command and run it on the machine you'd like to join to the cluster. + {(rolesData?.roles || NODE_TYPES).length > 1 && + "Select one or more roles to assign to the new node. "} + Copy the join command and run it on the machine you'd like to join + to the cluster.

{rolesLoading && (

From 1cb5efc1f25698f7cc9a1ac24fd052253b9b2767 Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 15:14:48 +0000 Subject: [PATCH 3/7] remove node version details --- .../apps/EmbeddedClusterViewNode.jsx | 22 +------------------ 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterViewNode.jsx b/web/src/components/apps/EmbeddedClusterViewNode.jsx index 564afcff38..acd3bdb001 100644 --- a/web/src/components/apps/EmbeddedClusterViewNode.jsx +++ b/web/src/components/apps/EmbeddedClusterViewNode.jsx @@ -121,30 +121,10 @@ const EmbeddedClusterViewNode = () => { {!nodeLoading && node && ( <> {/* Node Info */} -

+

{node?.name}

-
-
-

- kubelet version -

-

{node?.kubeletVersion}

-
-
-

- kube-proxy version -

-

{node?.kubeProxyVersion}

-
-
-

- kernel version -

-

{node?.kernelVersion}

-
-
{/* Pods table */}
From 21da9117e20ee45d852bc7c41432114d11272219 Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 17:05:17 +0000 Subject: [PATCH 4/7] address PR feedback --- web/src/components/apps/EmbeddedClusterManagement.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index 227c1e3371..99efece800 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -238,8 +238,6 @@ const EmbeddedClusterManagement = ({ if (nodeTypes.length === 1) { // if there's only one node type, select it by default setSelectedNodeTypes(nodeTypes); - } else { - setSelectedNodeTypes([]); } }, [rolesData]); @@ -467,7 +465,7 @@ const EmbeddedClusterManagement = ({ />

- {(rolesData?.roles || NODE_TYPES).length > 1 && + {rolesData?.roles && rolesData?.roles?.length > 1 && "Select one or more roles to assign to the new node. "} Copy the join command and run it on the machine you'd like to join to the cluster. @@ -479,12 +477,12 @@ const EmbeddedClusterManagement = ({ )} {!rolesData && rolesError && (

- {rolesError?.message} + {rolesError?.message || "Unable to fetch roles"}

)} - {(rolesData?.roles || NODE_TYPES).length > 1 && ( + {rolesData?.roles && rolesData?.roles.length > 1 && (
- {(rolesData?.roles || NODE_TYPES).map((nodeType) => ( + {rolesData?.roles.map((nodeType) => (
Date: Fri, 9 Feb 2024 17:08:50 +0000 Subject: [PATCH 5/7] run prettier --- web/src/components/apps/EmbeddedClusterManagement.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index 99efece800..46189a4806 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -465,7 +465,8 @@ const EmbeddedClusterManagement = ({ />

- {rolesData?.roles && rolesData?.roles?.length > 1 && + {rolesData?.roles && + rolesData?.roles?.length > 1 && "Select one or more roles to assign to the new node. "} Copy the join command and run it on the machine you'd like to join to the cluster. From 25ecfc0ef34bef6572072cf5f63019b7d324e3a1 Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 17:38:27 +0000 Subject: [PATCH 6/7] deselect node types --- web/src/components/apps/EmbeddedClusterManagement.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index 46189a4806..3f4fc63580 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -238,6 +238,8 @@ const EmbeddedClusterManagement = ({ if (nodeTypes.length === 1) { // if there's only one node type, select it by default setSelectedNodeTypes(nodeTypes); + } else { + setSelectedNodeTypes([]); } }, [rolesData]); From 24cc3e871dbe11cbfeefa1fd5de24e02106fe505 Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 17:57:46 +0000 Subject: [PATCH 7/7] remove redundant optional chaining --- web/src/components/apps/EmbeddedClusterManagement.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index 3f4fc63580..24bd117c0e 100644 --- a/web/src/components/apps/EmbeddedClusterManagement.tsx +++ b/web/src/components/apps/EmbeddedClusterManagement.tsx @@ -468,7 +468,7 @@ const EmbeddedClusterManagement = ({

{rolesData?.roles && - rolesData?.roles?.length > 1 && + rolesData.roles.length > 1 && "Select one or more roles to assign to the new node. "} Copy the join command and run it on the machine you'd like to join to the cluster. @@ -483,9 +483,9 @@ const EmbeddedClusterManagement = ({ {rolesError?.message || "Unable to fetch roles"}

)} - {rolesData?.roles && rolesData?.roles.length > 1 && ( + {rolesData?.roles && rolesData.roles.length > 1 && (
- {rolesData?.roles.map((nodeType) => ( + {rolesData.roles.map((nodeType) => (