From fb76ca76667187faca50ddbfb9da4a2adf0a9b1f Mon Sep 17 00:00:00 2001 From: Craig O'Donnell Date: Fri, 9 Feb 2024 14:05:31 -0500 Subject: [PATCH] embedded cluster management UI cleanup (#4437) --- .../apps/EmbeddedClusterManagement.tsx | 179 +++++++++--------- .../apps/EmbeddedClusterViewNode.jsx | 29 +-- web/src/components/shared/NavBar.tsx | 2 +- 3 files changed, 102 insertions(+), 108 deletions(-) diff --git a/web/src/components/apps/EmbeddedClusterManagement.tsx b/web/src/components/apps/EmbeddedClusterManagement.tsx index f846f69144..24bd117c0e 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. + {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.

-
- {rolesLoading && ( -

- Loading roles... -

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

- {rolesError?.message} -

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

@@ -524,9 +536,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..acd3bdb001 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}

@@ -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 */}
@@ -167,6 +147,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";