embedded cluster management UI cleanup

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 @@
   // #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 @@
   // #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<MRT_ColumnDef<NodeColumns>[]>(
@@ -267,11 +275,40 @@
         enableHiding: false,
         enableColumnDragging: false,
         size: 150,
+        Cell: ({ cell }) => {
+          const value = cell.getValue<string>();
+          return (
+            <Link
+              to={slug ? `/${slug}/cluster/${value}` : `/cluster/${value}`}
+              className="tw-font-semibold tw-text-blue-300 hover:tw-underline"
+            >
+              {value}
+            </Link>
+          );
+        },
       },
       {
         accessorKey: "roles",
         header: "Role(s)",
         size: 150,
+        Cell: ({ cell }) => {
+          const value = cell.getValue<string>();
+          if (!value) {
+            return "";
+          }
+          return (
+            <div className="tw-w-full tw-flex tw-flex-wrap tw-gap-1">
+              {value.split(" ").map((l) => (
+                <span
+                  key={l}
+                  className="tw-font-semibold tw-text-xs tw-px-1 tw-rounded-sm tw-border tw-border-solid tw-bg-white tw-border-gray-100"
+                >
+                  {l}
+                </span>
+              ))}
+            </div>
+          );
+        },
       },
       {
         accessorKey: "status",
@@ -294,43 +331,15 @@
           align: "right",
         },
       },
-      // {
-      //   accessorKey: "pause",
-      //   header: "Pause",
-      //   size: 100,
-      // },
-      // {
-      //   accessorKey: "delete",
-      //   header: "Delete",
-      //   size: 80,
-      // },
     ],
     []
   );
 
   const mappedNodes = useMemo(() => {
     return (
       (nodesData?.nodes || testData?.nodes)?.map((n) => ({
-        name: (
-          <Link
-            to={slug ? `/${slug}/cluster/${n.name}` : `/cluster/${n.name}`}
-            className="tw-font-semibold tw-text-blue-300 hover:tw-underline"
-          >
-            {n.name}
-          </Link>
-        ),
-        roles: (
-          <div className="tw-w-full tw-flex tw-flex-wrap tw-gap-1">
-            {n?.labels?.map((l) => (
-              <span
-                key={l}
-                className="tw-font-semibold tw-text-xs tw-px-1 tw-rounded-sm tw-border tw-border-solid tw-bg-white tw-border-gray-100"
-              >
-                {l}
-              </span>
-            ))}
-          </div>
-        ),
+        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 @@
       <KotsPageTitle pageName="Cluster Management" />
       <div className="flex1 tw-mb-10 tw-flex tw-flex-col tw-gap-4 card-bg">
         <p className="flex-auto u-fontSize--larger u-fontWeight--bold u-textColor--primary">
-          Cluster Nodes
+          Nodes
         </p>
         <div className="tw-flex tw-gap-6 tw-items-center">
-          <p className="tw-text-base tw-flex-1 tw-text-gray-600">
-            This page lists the nodes that are configured and shows the
-            status/health of each.
-          </p>
           {Utilities.sessionRolesHasOneOf([rbacRoles.CLUSTER_ADMIN]) && (
             <button
               className="btn primary tw-ml-auto tw-w-fit tw-h-fit"
@@ -401,6 +406,11 @@
                   },
                 },
               }}
+              muiTableHeadCellProps={{
+                sx: {
+                  borderRight: "2px solid #e0e0e0",
+                },
+              }}
               muiTableBodyProps={{
                 sx: {
                   "& tr:nth-of-type(odd)": {
@@ -457,50 +467,52 @@
             />
           </div>
           <p className="tw-text-base tw-text-gray-600">
-            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.
           </p>
-          <div className="tw-grid tw-gap-2 tw-grid-cols-4 tw-auto-rows-auto">
-            {rolesLoading && (
-              <p className="tw-text-base tw-w-full tw-text-center tw-py-4 tw-text-gray-500 tw-font-semibold">
-                Loading roles...
-              </p>
-            )}
-            {!rolesData && rolesError && (
-              <p className="tw-text-base tw-w-full tw-text-center tw-py-4 tw-text-pink-500 tw-font-semibold">
-                {rolesError?.message}
-              </p>
-            )}
-            {(rolesData?.roles || NODE_TYPES).map((nodeType) => (
-              <div
-                key={nodeType}
-                className={classNames("BoxedCheckbox", {
-                  "is-active": selectedNodeTypes.includes(nodeType),
-                  "is-disabled": determineDisabledState(),
-                })}
-              >
-                <input
-                  id={`${nodeType}NodeType`}
-                  className="u-cursor--pointer hidden-input"
-                  type="checkbox"
-                  name={`${nodeType}NodeType`}
-                  value={nodeType}
-                  disabled={determineDisabledState()}
-                  checked={selectedNodeTypes.includes(nodeType)}
-                  onChange={handleSelectNodeType}
-                />
-                <label
-                  htmlFor={`${nodeType}NodeType`}
-                  className="tw-block u-cursor--pointer u-userSelect--none u-textColor--primary u-fontSize--normal u-fontWeight--medium tw-text-center"
+          {rolesLoading && (
+            <p className="tw-text-base tw-w-full tw-text-center tw-py-4 tw-text-gray-500 tw-font-semibold">
+              Loading roles...
+            </p>
+          )}
+          {!rolesData && rolesError && (
+            <p className="tw-text-base tw-w-full tw-text-center tw-py-4 tw-text-pink-500 tw-font-semibold">
+              {rolesError?.message || "Unable to fetch roles"}
+            </p>
+          )}
+          {rolesData?.roles && rolesData.roles.length > 1 && (
+            <div className="tw-grid tw-gap-2 tw-grid-cols-4 tw-auto-rows-auto">
+              {rolesData.roles.map((nodeType) => (
+                <div
+                  key={nodeType}
+                  className={classNames("BoxedCheckbox", {
+                    "is-active": selectedNodeTypes.includes(nodeType),
+                    "is-disabled": determineDisabledState(),
+                  })}
                 >
-                  {nodeType}
-                </label>
-              </div>
-            ))}
-          </div>
+                  <input
+                    id={`${nodeType}NodeType`}
+                    className="u-cursor--pointer hidden-input"
+                    type="checkbox"
+                    name={`${nodeType}NodeType`}
+                    value={nodeType}
+                    disabled={determineDisabledState()}
+                    checked={selectedNodeTypes.includes(nodeType)}
+                    onChange={handleSelectNodeType}
+                  />
+                  <label
+                    htmlFor={`${nodeType}NodeType`}
+                    className="tw-block u-cursor--pointer u-userSelect--none u-textColor--primary u-fontSize--normal u-fontWeight--medium tw-text-center"
+                  >
+                    {nodeType}
+                  </label>
+                </div>
+              ))}
+            </div>
+          )}
           <div>
             {selectedNodeTypes.length > 0 && generateAddNodeCommandLoading && (
               <p className="tw-text-base tw-w-full tw-text-center tw-py-4 tw-text-gray-500 tw-font-semibold">
@@ -512,7 +524,7 @@
                 {generateAddNodeCommandError?.message}
               </p>
             )}
             {!generateAddNodeCommandLoading && generateAddNodeCommand?.command && (
               <>
                 <CodeSnippet
                   key={selectedNodeTypes.toString()}
@@ -524,9 +536,6 @@
                 >
                   {generateAddNodeCommand?.command}
                 </CodeSnippet>
-                <p className="tw-text-sm tw-text-gray-500 tw-font-semibold tw-mt-2">
-                  Command expires: {generateAddNodeCommand?.expiry}
-                </p>
               </>
             )}
           </div>

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
         </Link>{" "}
         / {nodeName}
       </p>
@@ -121,30 +121,10 @@ const EmbeddedClusterViewNode = () => {
       {!nodeLoading && node && (
         <>
           {/* Node Info */}
-          <div className="tw-flex tw-flex-col tw-gap-2 tw-p-3 card-bg">
+          <div className="tw-p-3">
             <p className="tw-font-semibold tw-text-xl tw-text-gray-800">
               {node?.name}
             </p>
-            <div className="tw-flex tw-flex-col tw-text-sm tw-gap-2 card-item">
-              <div className="tw-flex tw-gap-2">
-                <p className="tw-text-gray-800 tw-font-semibold">
-                  kubelet version
-                </p>
-                <p className="tw-text-gray-400">{node?.kubeletVersion}</p>
-              </div>
-              <div className="tw-flex tw-gap-2">
-                <p className="tw-text-gray-800 tw-font-semibold">
-                  kube-proxy version
-                </p>
-                <p className="tw-text-gray-400">{node?.kubeProxyVersion}</p>
-              </div>
-              <div className="tw-flex tw-gap-2">
-                <p className="tw-text-gray-800 tw-font-semibold">
-                  kernel version
-                </p>
-                <p className="tw-text-gray-400">{node?.kernelVersion}</p>
-              </div>
-            </div>
           </div>
           {/* Pods table */}
           <div className="card-bg tw-p-3 tw-flex tw-flex-col tw-gap-2">
@@ -167,6 +147,11 @@ const EmbeddedClusterViewNode = () => {
                     },
                   },
                 }}
+                muiTableHeadCellProps={{
+                  sx: {
+                    borderRight: "2px solid #e0e0e0",
+                  },
+                }}
                 muiTableBodyProps={{
                   sx: {
                     "& tr:nth-of-type(odd)": {

web/src/components/shared/NavBar.tsx

@@ -99,7 +99,7 @@ export class NavBar extends PureComponent<Props, State> {
     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";