update redirect to cluster manage page, comment test data (#4096)

* improve logic around initial cluster flow, comment test data * fix types, redirect on unknown or pending config status if helmvm
replicatedhq · Oct 20, 2023 · 86058f3 · 86058f3
1 parent e79ea30
commit 86058f3
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 54 deletions.
diff --git a/pkg/store/types/constants.go b/pkg/store/types/constants.go
@@ -3,12 +3,12 @@ package types
 type DownstreamVersionStatus string
 
 const (
-	VersionUnknown          DownstreamVersionStatus = "unknown"
-	VersionPendingConfig    DownstreamVersionStatus = "pending_config"
-	VersionPending          DownstreamVersionStatus = "pending"
-	VersionPendingPreflight DownstreamVersionStatus = "pending_preflight"
-	VersionPendingDownload  DownstreamVersionStatus = "pending_download"
-	VersionDeploying        DownstreamVersionStatus = "deploying"
-	VersionDeployed         DownstreamVersionStatus = "deployed"
-	VersionFailed           DownstreamVersionStatus = "failed"
+	VersionUnknown          DownstreamVersionStatus = "unknown"           // we don't know
+	VersionPendingConfig    DownstreamVersionStatus = "pending_config"    // needs required configuration
+	VersionPendingDownload  DownstreamVersionStatus = "pending_download"  // needs to be downloaded from the upstream source
+	VersionPendingPreflight DownstreamVersionStatus = "pending_preflight" // waiting for preflights to finish
+	VersionPending          DownstreamVersionStatus = "pending"           // can be deployed, but is not yet
+	VersionDeploying        DownstreamVersionStatus = "deploying"         // is being deployed
+	VersionDeployed         DownstreamVersionStatus = "deployed"          // did deploy successfully
+	VersionFailed           DownstreamVersionStatus = "failed"            // did not deploy successfully
 )
diff --git a/web/src/Root.tsx b/web/src/Root.tsx
@@ -576,15 +576,21 @@ const Root = () => {
               />
               <Route path="/unsupported" element={<UnsupportedBrowser />} />
               {state.adminConsoleMetadata?.isHelmVM && (
-                <Route
-                  path="/:slug/cluster/manage"
-                  element={
-                    <HelmVMClusterManagement
-                      fromLicenseFlow={true}
-                      appName={state.selectedAppName || undefined}
-                    />
-                  }
-                />
+                <>
+                  <Route
+                    path="/:slug/cluster/manage"
+                    element={
+                      <HelmVMClusterManagement
+                        fromLicenseFlow={true}
+                        appName={state.selectedAppName || undefined}
+                      />
+                    }
+                  />
+                  <Route
+                    path="/:slug/cluster/:nodeName"
+                    element={<HelmVMViewNode />}
+                  />
+                </>
               )}
               {(state.adminConsoleMetadata?.isKurl ||
                 state.adminConsoleMetadata?.isHelmVM) && (

diff --git a/web/src/components/apps/AppDetailPage.tsx b/web/src/components/apps/AppDetailPage.tsx
@@ -322,11 +322,15 @@ function AppDetailPage(props: Props) {
       const firstVersion = downstream.pendingVersions.find(
         (version: Version) => version?.sequence === 0
       );
-      if (props.isHelmVM) {
+      if (firstVersion?.status === "unknown" && props.isHelmVM) {
         navigate(`/${appNeedsConfiguration.slug}/cluster/manage`);
         return;
       }
       if (firstVersion?.status === "pending_config") {
+        if (props.isHelmVM) {
+          navigate(`/${appNeedsConfiguration.slug}/cluster/manage`);
+          return;
+        }
         navigate(`/${appNeedsConfiguration.slug}/config`);
         return;
       }

diff --git a/web/src/components/apps/HelmVMClusterManagement.tsx b/web/src/components/apps/HelmVMClusterManagement.tsx
@@ -14,6 +14,38 @@ import CodeSnippet from "../shared/CodeSnippet";
 
 import "@src/scss/components/apps/HelmVMClusterManagement.scss";
 
+const testData = {
+  nodes: undefined,
+};
+// 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;
@@ -260,12 +292,10 @@ const HelmVMClusterManagement = ({
 
   const mappedNodes = useMemo(() => {
     return (
-      nodesData?.nodes?.map((n) => ({
-        name: slug ? (
-          n.name
-        ) : (
+      (nodesData?.nodes || testData?.nodes)?.map((n) => ({
+        name: (
           <Link
-            to={`/cluster/${n.name}`}
+            to={slug ? `/${slug}/cluster/${n.name}` : `/cluster/${n.name}`}
             className="tw-font-semibold tw-text-blue-300 hover:tw-underline"
           >
             {n.name}
@@ -335,7 +365,7 @@ const HelmVMClusterManagement = ({
               {nodesError?.message}
             </p>
           )}
-          {nodesData?.nodes && (
+          {(nodesData?.nodes || testData?.nodes) && (
             <MaterialReactTable
               columns={columns}
               data={mappedNodes}

diff --git a/web/src/components/apps/HelmVMViewNode.jsx b/web/src/components/apps/HelmVMViewNode.jsx
@@ -4,8 +4,40 @@ import { useQuery } from "@tanstack/react-query";
 import { Link, useParams } from "react-router-dom";
 import Loader from "@components/shared/Loader";
 
+const testData = undefined;
+// const testData = {
+//   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: [
+//     {
+//       name: "example-es-85fc9df74-8x8l6",
+//       status: "Running",
+//       namespace: "helmvm",
+//       cpu: "0.0345789345 GB",
+//       memory: 0,
+//     },
+//   ],
+// };
+
 const HelmVMViewNode = () => {
-  const { nodeName } = useParams();
+  const { slug, nodeName } = useParams();
   const { data: nodeData, isLoading: nodeLoading } = useQuery({
     queryKey: ["helmVmNode", nodeName],
     queryFn: async ({ queryKey }) => {
@@ -41,7 +73,7 @@ const HelmVMViewNode = () => {
     },
   });
 
-  const node = nodeData;
+  const node = nodeData || testData;
 
   // #region table data
   const columns = useMemo(
@@ -109,7 +141,7 @@ const HelmVMViewNode = () => {
       {/* Breadcrumbs */}
       <p className="tw-text-sm tw-text-gray-400">
         <Link
-          to={`/cluster/manage`}
+          to={slug ? `/${slug}/cluster/manage` : `/cluster/manage`}
           className="!tw-text-blue-300 tw-font-semibold hover:tw-underline"
         >
           Cluster Nodes

diff --git a/web/src/components/shared/NavBar.tsx b/web/src/components/shared/NavBar.tsx
@@ -228,20 +228,21 @@ export class NavBar extends PureComponent<Props, State> {
                   </span>
                 </div>
               )}
-              {(isKurlEnabled || isHelmVMEnabled) && (
-                <div
-                  className={classNames("NavItem u-position--relative flex", {
-                    "is-active": selectedTab === "cluster_management",
-                  })}
-                >
-                  <span
-                    onClick={this.handleGoToClusterManagement}
-                    className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
+              {(isKurlEnabled || isHelmVMEnabled) &&
+                location.pathname !== `${selectedApp?.slug}/cluster/manage` && (
+                  <div
+                    className={classNames("NavItem u-position--relative flex", {
+                      "is-active": selectedTab === "cluster_management",
+                    })}
                   >
-                    Cluster Management
-                  </span>
-                </div>
-              )}
+                    <span
+                      onClick={this.handleGoToClusterManagement}
+                      className="flex flex1 u-cursor--pointer text u-fontSize--normal u-fontWeight--medium flex-column justifyContent--center"
+                    >
+                      Cluster Management
+                    </span>
+                  </div>
+                )}
               {isSnapshotsSupported && (
                 <div
                   className={classNames("NavItem u-position--relative flex", {

diff --git a/web/src/features/AppVersionHistory/AppVersionHistoryRow.tsx b/web/src/features/AppVersionHistory/AppVersionHistoryRow.tsx
@@ -258,10 +258,7 @@ function AppVersionHistoryRow(props: Props) {
       isCurrentVersion || isLatestVersion || isPendingVersion?.semver;
 
     const showDeployLogs =
-      (isPastVersion ||
-        isCurrentVersion ||
-        isPendingDeployedVersion ||
-        version?.status === "superseded") &&
+      (isPastVersion || isCurrentVersion || isPendingDeployedVersion) &&
       version?.status !== "pending";
 
     let tooltipTip;
@@ -468,7 +465,7 @@ function AppVersionHistoryRow(props: Props) {
     });
 
     if (!isPastVersion && !isPendingDeployedVersion) {
-      if (version.status === "deployed" || version.status === "merged") {
+      if (version.status === "deployed") {
         return (
           <div>
             <span
@@ -536,7 +533,7 @@ function AppVersionHistoryRow(props: Props) {
         );
       }
     } else {
-      if (version.status === "deployed" || version.status === "merged") {
+      if (version.status === "deployed") {
         return (
           <div>
             <span

diff --git a/web/src/features/Dashboard/components/DashboardVersionCard.tsx b/web/src/features/Dashboard/components/DashboardVersionCard.tsx
@@ -348,11 +348,7 @@ const DashboardVersionCard = (props: Props) => {
   };
 
   const getCurrentVersionStatus = (version: Version | null) => {
-    if (
-      version?.status === "deployed" ||
-      version?.status === "merged" ||
-      version?.status === "pending"
-    ) {
+    if (version?.status === "deployed" || version?.status === "pending") {
       return (
         <span className="status-tag success flex-auto">
           Currently {version?.status.replace("_", " ")} version

diff --git a/web/src/types/index.ts b/web/src/types/index.ts
@@ -252,13 +252,12 @@ export type VersionStatus =
   | "deployed"
   | "deploying"
   | "failed"
-  | "merged"
   | "pending"
   | "pending_config"
   | "pending_download"
   | "pending_preflight"
-  | "superseded"
-  | "waiting";
+  | "waiting"
+  | "unknown";
 
 export type LicenseFile = {
   preview: string;