wip: add test data for dev, start adding edit and delete buttons

replicatedhq · Oct 19, 2023 · dc3b556 · dc3b556
1 parent a8d9b84
commit dc3b556
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 19 deletions.
diff --git a/web/src/Root.tsx b/web/src/Root.tsx
@@ -586,22 +586,22 @@ const Root = () => {
                   }
                 />
               )}
-              {(state.adminConsoleMetadata?.isKurl ||
-                state.adminConsoleMetadata?.isHelmVM) && (
-                <Route
-                  path="/cluster/manage"
-                  element={
-                    state.adminConsoleMetadata?.isKurl ? (
-                      <KurlClusterManagement />
-                    ) : (
-                      <HelmVMClusterManagement />
-                    )
-                  }
-                />
-              )}
-              {state.adminConsoleMetadata?.isHelmVM && (
-                <Route path="/cluster/:nodeName" element={<HelmVMViewNode />} />
-              )}
+              {/* {(state.adminConsoleMetadata?.isKurl ||
+                state.adminConsoleMetadata?.isHelmVM) && ( */}
+              <Route
+                path="/cluster/manage"
+                element={
+                  state.adminConsoleMetadata?.isKurl ? (
+                    <KurlClusterManagement />
+                  ) : (
+                    <HelmVMClusterManagement />
+                  )
+                }
+              />
+              {/* )}
+              {state.adminConsoleMetadata?.isHelmVM && ( */}
+              <Route path="/cluster/:nodeName" element={<HelmVMViewNode />} />
+              {/* )} */}
               <Route
                 path="/gitops"
                 element={<GitOps appName={state.selectedAppName || ""} />}

diff --git a/web/src/components/apps/HelmVMClusterManagement.tsx b/web/src/components/apps/HelmVMClusterManagement.tsx
@@ -1,3 +1,4 @@
+import { MenuItem } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import classNames from "classnames";
 import MaterialReactTable, { MRT_ColumnDef } from "material-react-table";
@@ -14,6 +15,35 @@ import CodeSnippet from "../shared/CodeSnippet";
 
 import "@src/scss/components/apps/HelmVMClusterManagement.scss";
 
+const testData = {
+  nodes: [
+    {
+      name: "laverya-helmvm",
+      isConnected: true,
+      isReady: true,
+      isPrimaryNode: true,
+      canDelete: false,
+      kubeletVersion: "v1.28.2+k0s",
+      kubeProxyVersion: "v1.28.2+k0s",
+      operatingSystem: "linux",
+      kernelVersion: "5.10.0-26-cloud-amd64",
+      cpu: { capacity: 4, used: 1.9364847660000002 },
+      memory: { capacity: 15.633056640625, used: 3.088226318359375 },
+      pods: { capacity: 110, used: 27 },
+      labels: ["controller"],
+      conditions: {
+        memoryPressure: false,
+        diskPressure: false,
+        pidPressure: false,
+        ready: true,
+      },
+      podList: [],
+    },
+  ],
+  ha: true,
+  isHelmVMEnabled: true,
+};
+
 type State = {
   displayAddNode: boolean;
   confirmDeleteNode: string;
@@ -199,6 +229,7 @@ const HelmVMClusterManagement = ({
   };
   // #endregion
 
+  // #region table logic
   type NodeColumns = {
     name: string | JSX.Element;
     roles: JSX.Element;
@@ -260,7 +291,7 @@ const HelmVMClusterManagement = ({
 
   const mappedNodes = useMemo(() => {
     return (
-      nodesData?.nodes?.map((n) => ({
+      (nodesData?.nodes || testData.nodes)?.map((n) => ({
         name: slug ? (
           n.name
         ) : (
@@ -335,12 +366,12 @@ const HelmVMClusterManagement = ({
               {nodesError?.message}
             </p>
           )}
-          {nodesData?.nodes && (
+          {(nodesData?.nodes || testData.nodes) && (
             <MaterialReactTable
               columns={columns}
               data={mappedNodes}
               state={{
-                columnPinning: { left: ["name"] },
+                columnPinning: { left: ["mrt-row-actions", "name"] },
               }}
               enableColumnResizing
               enableColumnActions={false}
@@ -374,6 +405,15 @@ const HelmVMClusterManagement = ({
               initialState={{ density: "compact" }}
               enablePagination={false}
               enableColumnFilters={false}
+              enableRowActions
+              renderRowActionMenuItems={({ row }) => [
+                <MenuItem key="edit" onClick={() => console.info("Edit")}>
+                  Edit
+                </MenuItem>,
+                <MenuItem key="delete" onClick={() => console.info("Delete")}>
+                  Delete
+                </MenuItem>,
+              ]}
             />
           )}
         </div>