Add view node page, add new add node modal (#4065)

* wip: refactor helm cluster page, add view node page * add new add node modal * protect routes * move parenthesis * use test data for now * add material react table * start connecting additional api calls, add test pod data * add material react table to display pods * revert change * uncomment real queries * fix useparams import * fix params/routing, update api route * fix loading/refetch state * update generate add node request * add error handling, add mui react table to cluster manage page * move ts-ignore line * remove delete functionality for now
replicatedhq · Oct 18, 2023 · 8db6c02 · 8db6c02
1 parent 37c97dd
commit 8db6c02
Show file tree

Hide file tree

Showing 9 changed files with 1,520 additions and 864 deletions.
diff --git a/web/package.json b/web/package.json
@@ -121,9 +121,13 @@
     "webpack-merge": "5.8.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@grafana/data": "^8.5.16",
     "@maji/react-prism": "^1.0.1",
     "@monaco-editor/react": "^4.4.5",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "@storybook/addon-storysource": "^6.5.16",
     "accounting": "^0.4.1",
     "apexcharts": "^3.24.0",
@@ -142,6 +146,7 @@
     "js-yaml": "3.14.0",
     "lodash": "4.17.21",
     "markdown-it": "^12.3.2",
+    "material-react-table": "^1.15.1",
     "monaco-editor": "^0.33.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "node-polyfill-webpack-plugin": "^1.1.4",

diff --git a/web/src/Root.tsx b/web/src/Root.tsx
@@ -58,6 +58,7 @@ import SnapshotDetails from "@components/snapshots/SnapshotDetails";
 import SnapshotRestore from "@components/snapshots/SnapshotRestore";
 import AppSnapshots from "@components/snapshots/AppSnapshots";
 import AppSnapshotRestore from "@components/snapshots/AppSnapshotRestore";
+import HelmVMViewNode from "@components/apps/HelmVMViewNode";
 
 // react-query client
 const queryClient = new QueryClient();
@@ -100,6 +101,8 @@ type State = {
   selectedAppName: string | null;
   snapshotInProgressApps: string[];
   themeState: ThemeState;
+  isKurl: boolean | null;
+  isHelmVM: boolean | null;
 };
 
 let interval: ReturnType<typeof setInterval> | undefined;
@@ -131,6 +134,8 @@ const Root = () => {
         navbarLogo: null,
       },
       app: null,
+      isKurl: null,
+      isHelmVM: null,
     }
   );
 
@@ -302,6 +307,8 @@ const Root = () => {
           adminConsoleMetadata: data.adminConsoleMetadata,
           featureFlags: data.consoleFeatureFlags,
           fetchingMetadata: false,
+          isKurl: data.isKurl,
+          isHelmVM: data.isHelmVM,
         });
       })
       .catch((err) => {
@@ -531,6 +538,8 @@ const Root = () => {
                     appSlugFromMetadata={state.appSlugFromMetadata || ""}
                     fetchingMetadata={state.fetchingMetadata}
                     onUploadSuccess={getAppsList}
+                    isKurl={!!state.isKurl}
+                    isHelmVM={!!state.isHelmVM}
                   />
                 }
               />
@@ -573,16 +582,36 @@ const Root = () => {
                 }
               />
               <Route path="/unsupported" element={<UnsupportedBrowser />} />
+              {/* {state.adminConsoleMetadata?.isHelmVM && ( */}
+              <Route
+                path="/:slug/cluster/manage"
+                element={
+                  <HelmVMClusterManagement
+                    fromLicenseFlow={true}
+                    appName={state.selectedAppName || undefined}
+                  />
+                }
+              />
+              {/* )} */}
+              {/* {(state.adminConsoleMetadata?.isKurl ||
+                  state.adminConsoleMetadata?.isHelmVM) && ( */}
               <Route
                 path="/cluster/manage"
                 element={
                   state.adminConsoleMetadata?.isKurl ? (
-                    <KurlClusterManagement appName={state.selectedAppName} />
+                    <KurlClusterManagement />
                   ) : (
-                    <HelmVMClusterManagement appName={state.selectedAppName} />
+                    <HelmVMClusterManagement />
                   )
                 }
               />
+              {/* )} */}
+              {/* {state.adminConsoleMetadata?.isHelmVM && ( */}
+              <Route
+                path="/:slug/cluster/:nodeName"
+                element={<HelmVMViewNode />}
+              />
+              {/* )} */}
               <Route
                 path="/gitops"
                 element={<GitOps appName={state.selectedAppName || ""} />}
@@ -761,12 +790,7 @@ const Root = () => {
                 <Route path=":slug/license" element={<AppLicense />} />
                 <Route
                   path=":slug/registry-settings"
-                  element={
-                    <AppRegistrySettings
-                    // app={selectedApp}
-                    // updateCallback={refetchData}
-                    />
-                  }
+                  element={<AppRegistrySettings />}
                 />
                 {/* WHERE IS SELECTEDAPP */}
                 {state.app?.isAppIdentityServiceSupported && (

diff --git a/web/src/components/UploadLicenseFile.tsx b/web/src/components/UploadLicenseFile.tsx
@@ -1,23 +1,23 @@
 import React, { useEffect, useReducer } from "react";
-import { useNavigate } from "react-router-dom";
-import { Link } from "react-router-dom";
-import { KotsPageTitle } from "@components/Head";
-// TODO: upgrade this dependency
-// @ts-ignore
-import Dropzone from "react-dropzone";
+import { Link, useNavigate } from "react-router-dom";
 import yaml from "js-yaml";
-import size from "lodash/size";
 import isEmpty from "lodash/isEmpty";
 import keyBy from "lodash/keyBy";
+import size from "lodash/size";
+// TODO: upgrade this dependency
+// @ts-ignore
+import Dropzone from "react-dropzone";
 import Modal from "react-modal";
 import Select from "react-select";
+
+import { KotsPageTitle } from "@components/Head";
 import { getFileContent } from "../utilities/utilities";
-import CodeSnippet from "./shared/CodeSnippet";
+import Icon from "./Icon";
 import LicenseUploadProgress from "./LicenseUploadProgress";
+import CodeSnippet from "./shared/CodeSnippet";
 
 import "../scss/components/troubleshoot/UploadSupportBundleModal.scss";
 import "../scss/components/UploadLicenseFile.scss";
-import Icon from "./Icon";
 
 type LicenseYaml = {
   spec: {
@@ -26,17 +26,6 @@ type LicenseYaml = {
   };
 };
 
-type Props = {
-  appsListLength: number;
-  appName: string;
-  appSlugFromMetadata: string;
-  fetchingMetadata: boolean;
-  isBackupRestore?: boolean;
-  onUploadSuccess: () => Promise<void>;
-  logo: string | null;
-  snapshot?: { name: string };
-};
-
 type SelectedAppToInstall = {
   label: string;
   value: string;
@@ -68,6 +57,20 @@ type UploadLicenseResponse = {
   slug: string;
   success?: boolean;
 };
+
+type Props = {
+  appsListLength: number;
+  appName: string;
+  appSlugFromMetadata: string;
+  fetchingMetadata: boolean;
+  isBackupRestore?: boolean;
+  onUploadSuccess: () => Promise<void>;
+  logo: string | null;
+  snapshot?: { name: string };
+  isHelmVM: boolean;
+  isKurl: boolean;
+};
+
 const UploadLicenseFile = (props: Props) => {
   const [state, setState] = useReducer(
     (currentState: State, newState: Partial<State>) => ({
@@ -264,6 +267,11 @@ const UploadLicenseFile = (props: Props) => {
               return;
             }
 
+            if (props.isHelmVM && !props.isKurl) {
+              navigate(`/${data.slug}/cluster/manage`, { replace: true });
+              return;
+            }
+
             if (data.hasPreflight) {
               navigate(`/${data.slug}/preflight`, { replace: true });
               return;