From 2fc6ffc9b74e3e2dd0c6d308ee01922269500f86 Mon Sep 17 00:00:00 2001
From: Star Richardson <67430892+alicenstar@users.noreply.github.com>
Date: Thu, 19 Oct 2023 13:17:59 -0600
Subject: [PATCH 1/2] make clipboard work with http, fix redirect to cluster
 manage page

---
 web/src/Root.tsx                          |  2 ++
 web/src/components/apps/AppDetailPage.tsx |  3 +++
 web/src/components/shared/CodeSnippet.jsx | 28 ++++++++++++++++++++---
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/src/Root.tsx b/web/src/Root.tsx
index 86bef0aa94..04a656426b 100644
--- a/web/src/Root.tsx
+++ b/web/src/Root.tsx
@@ -691,6 +691,7 @@ const Root = () => {
                     snapshotInProgressApps={state.snapshotInProgressApps}
                     ping={ping}
                     isHelmManaged={state.isHelmManaged}
+                    isHelmVM={Boolean(state.adminConsoleMetadata?.isHelmVM)}
                   />
                 }
               />
@@ -706,6 +707,7 @@ const Root = () => {
                     snapshotInProgressApps={state.snapshotInProgressApps}
                     ping={ping}
                     isHelmManaged={state.isHelmManaged}
+                    isHelmVM={Boolean(state.adminConsoleMetadata?.isHelmVM)}
                   />
                 }
               >
diff --git a/web/src/components/apps/AppDetailPage.tsx b/web/src/components/apps/AppDetailPage.tsx
index 4aa0d386ee..e969b8535d 100644
--- a/web/src/components/apps/AppDetailPage.tsx
+++ b/web/src/components/apps/AppDetailPage.tsx
@@ -30,6 +30,7 @@ type Props = {
   refetchAppsList: () => void;
   refetchAppMetadata: () => void;
   snapshotInProgressApps: string[];
+  isHelmVM: boolean;
 };
 
 type State = {
@@ -97,6 +98,8 @@ function AppDetailPage(props: Props) {
       navigate(`/app/${appsList[0].slug}`, { replace: true });
     } else if (props.isHelmManaged) {
       navigate("/install-with-helm", { replace: true });
+    } else if (props.isHelmVM) {
+      navigate(`/${selectedApp?.slug}/cluster/manage`, { replace: true });
     } else {
       navigate("/upload-license", { replace: true });
     }
diff --git a/web/src/components/shared/CodeSnippet.jsx b/web/src/components/shared/CodeSnippet.jsx
index 892c4b746a..9f0738e2fb 100644
--- a/web/src/components/shared/CodeSnippet.jsx
+++ b/web/src/components/shared/CodeSnippet.jsx
@@ -36,7 +36,7 @@ class CodeSnippet extends Component {
     const { children, copyDelay } = this.props;
     const textToCopy = Array.isArray(children) ? children.join("\n") : children;
 
-    if (navigator.clipboard) {
+    if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard.writeText(textToCopy).then(() => {
         this.setState({ didCopy: true });
 
@@ -44,6 +44,29 @@ class CodeSnippet extends Component {
           this.setState({ didCopy: false });
         }, copyDelay);
       });
+    } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = textToCopy;
+
+      textArea.style.position = "absolute";
+      textArea.style.opacity = 0;
+
+      document.body.prepend(textArea);
+      textArea.select();
+
+      try {
+        document.execCommand("copy");
+
+        this.setState({ didCopy: true });
+
+        setTimeout(() => {
+          this.setState({ didCopy: false });
+        }, copyDelay);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        textArea.remove();
+      }
     }
   };
 
@@ -67,7 +90,6 @@ class CodeSnippet extends Component {
       language,
       preText,
       canCopy,
-      clipboardEnabled = !!navigator.clipboard,
       copyText,
       onCopyText,
       variant,
@@ -94,7 +116,7 @@ class CodeSnippet extends Component {
             </div>
           )}
           <Prism language={language}>{content}</Prism>
-          {clipboardEnabled && canCopy && (
+          {canCopy && (
             <span
               className={classNames("CodeSnippet-copy", {
                 "is-copied": didCopy,

From 53b000ef6f8e53b29840807e60229b8937c71e2c Mon Sep 17 00:00:00 2001
From: Star Richardson <67430892+alicenstar@users.noreply.github.com>
Date: Thu, 19 Oct 2023 13:33:21 -0600
Subject: [PATCH 2/2] right align columns, remove placeholders, add namespace
 column

---
 .../apps/HelmVMClusterManagement.tsx          |  6 +++++
 web/src/components/apps/HelmVMViewNode.jsx    | 24 ++++++++++++-------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/web/src/components/apps/HelmVMClusterManagement.tsx b/web/src/components/apps/HelmVMClusterManagement.tsx
index a545de0e75..5825a893b2 100644
--- a/web/src/components/apps/HelmVMClusterManagement.tsx
+++ b/web/src/components/apps/HelmVMClusterManagement.tsx
@@ -222,11 +222,17 @@ const HelmVMClusterManagement = ({
         accessorKey: "cpu",
         header: "CPU",
         size: 150,
+        muiTableBodyCellProps: {
+          align: "right",
+        },
       },
       {
         accessorKey: "memory",
         header: "Memory",
         size: 150,
+        muiTableBodyCellProps: {
+          align: "right",
+        },
       },
       {
         accessorKey: "pods",
diff --git a/web/src/components/apps/HelmVMViewNode.jsx b/web/src/components/apps/HelmVMViewNode.jsx
index 3af18d68ee..2efef120ce 100644
--- a/web/src/components/apps/HelmVMViewNode.jsx
+++ b/web/src/components/apps/HelmVMViewNode.jsx
@@ -53,6 +53,11 @@ const HelmVMViewNode = () => {
         enableColumnDragging: false,
         size: 150,
       },
+      {
+        accessorKey: "namespace",
+        header: "Namespace",
+        size: 150,
+      },
       {
         accessorKey: "status",
         header: "Status",
@@ -62,11 +67,17 @@ const HelmVMViewNode = () => {
         accessorKey: "cpu",
         header: "CPU",
         size: 150,
+        muiTableBodyCellProps: {
+          align: "right",
+        },
       },
       {
         accessorKey: "memory",
         header: "Memory",
         size: 150,
+        muiTableBodyCellProps: {
+          align: "right",
+        },
       },
       // {
       //   accessorKey: "delete",
@@ -80,9 +91,10 @@ const HelmVMViewNode = () => {
   const mappedPods = useMemo(() => {
     return node?.podList?.map((p) => ({
       name: p.name,
+      namespace: p.namespace,
       status: p.status,
       cpu: p.cpu,
-      memory: `${p.memory}GB`,
+      memory: p.memory,
       delete: (
         <>
           <button className="btn red primary">Delete</button>
@@ -128,17 +140,11 @@ const HelmVMViewNode = () => {
                 <p className="tw-text-gray-800 tw-font-semibold">
                   kube-proxy version
                 </p>
-                <p className="tw-text-gray-400">{node?.kubeletVersion}</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">OS</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">
-                  kurl version
-                </p>
-                <p className="tw-text-gray-400">{node?.kubeletVersion}</p>
+                <p className="tw-text-gray-400">{node?.operatingSystem}</p>
               </div>
             </div>
           </div>