Added Action Icon Button on Cluster Detail Page

Azure · Sep 7, 2023 · 8485be6 · 8485be6
1 parent a014c04
commit 8485be6
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 146 deletions.
diff --git a/pkg/portal/assets/v2/build/asset-manifest.json b/pkg/portal/assets/v2/build/asset-manifest.json
@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/static/js/main.f27c737c.js",
+    "main.js": "/static/js/main.f1999c11.js",
     "index.html": "/index.html",
-    "main.f27c737c.js.map": "/static/js/main.f27c737c.js.map"
+    "main.f1999c11.js.map": "/static/js/main.f1999c11.js.map"
   },
   "entrypoints": [
-    "static/js/main.f27c737c.js"
+    "static/js/main.f1999c11.js"
   ]
 }
diff --git a/pkg/portal/assets/v2/build/index.html b/pkg/portal/assets/v2/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>ARO Portal</title><script defer="defer" src="/static/js/main.f27c737c.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>ARO Portal</title><script defer="defer" src="/static/js/main.f1999c11.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/pkg/portal/assets/v2/build/static/js/main.f1999c11.js b/pkg/portal/assets/v2/build/static/js/main.f1999c11.js
diff --git a/...ld/static/js/main.f27c737c.js.LICENSE.txt → ...ld/static/js/main.f1999c11.js.LICENSE.txt b/...ld/static/js/main.f27c737c.js.LICENSE.txt → ...ld/static/js/main.f1999c11.js.LICENSE.txt
diff --git a/pkg/portal/assets/v2/build/static/js/main.f1999c11.js.map b/pkg/portal/assets/v2/build/static/js/main.f1999c11.js.map
diff --git a/pkg/portal/assets/v2/build/static/js/main.f27c737c.js b/pkg/portal/assets/v2/build/static/js/main.f27c737c.js
diff --git a/pkg/portal/assets/v2/build/static/js/main.f27c737c.js.map b/pkg/portal/assets/v2/build/static/js/main.f27c737c.js.map
diff --git a/portal/v2/src/App.tsx b/portal/v2/src/App.tsx
@@ -344,4 +344,4 @@ function App(props: { params: any }) {
   )
 }
 
-export default App
+export default App
diff --git a/portal/v2/src/ClusterDetail.tsx b/portal/v2/src/ClusterDetail.tsx
@@ -11,13 +11,12 @@ import {
   Icon,
   IconButton,
   IIconStyles,
-  TooltipHost,
 } from "@fluentui/react"
 import { AxiosResponse } from "axios"
 import { fetchClusterInfo } from "./Request"
 import { ICluster, headerStyles } from "./App"
 import { Nav, INavLink, INavStyles } from "@fluentui/react/lib/Nav"
-import { KubeconfigButton } from "./Kubeconfig"
+import { ToolIcons } from "./ToolIcons"
 import { ClusterDetailComponent, MemoisedClusterDetailListComponent } from "./ClusterDetailList"
 import React from "react"
 
@@ -100,8 +99,6 @@ export function ClusterDetailPanel(props: {
     },
   })
 
-  const _sshModal = props.sshBox
-
   const errorBar = (): any => {
     return (
       <MessageBar
@@ -188,7 +185,8 @@ export function ClusterDetailPanel(props: {
 
   const _dismissPanel = () => {
     dismissPanel()
-    props.onClose() // useEffect?
+    props.sshBox.current.hidePopup()
+    props.onClose()
     setData([])
     setFetching("")
     setDataLoaded(false)
@@ -266,21 +264,7 @@ export function ClusterDetailPanel(props: {
       },
     })
   }
-
-  const _onCopyResourceID = (item: any) => {
-    navigator.clipboard.writeText(item.resourceId)
-  }
-
-  const _onSSHClick = (item: any) => {
-    _dismissPanel()
-    const modal = _sshModal
-    if (modal && modal.current) {
-      modal.current.LoadSSH(item.resourceId)
-    }
-  }
-
-  const version = Number(props.currentCluster?.version) !== undefined ? Number(props.currentCluster?.version) : 0
-
+
   const onRenderHeader = (): ReactElement => {
     return (
       <>
@@ -299,31 +283,8 @@ export function ClusterDetailPanel(props: {
           </Stack.Item>
           <Stack.Item>
             <div className={headerStyles.titleText}>{props.currentCluster?.name}</div>
-            <div className={headerStyles.subtitleText}>Cluster</div>
-            <TooltipHost content={`Copy Resource ID`}>
-              <IconButton
-                iconProps={{ iconName: "Copy" }}
-                aria-label="Copy Resource ID"
-                onClick={_onCopyResourceID.bind({},props.currentCluster)}
-              />
-            </TooltipHost>
-            <TooltipHost content={`Prometheus`}>
-              <IconButton
-                iconProps={{ iconName: "BIDashboard" }}
-                aria-label="Prometheus"
-                href={
-                  props.currentCluster?.resourceId + (+(version) >= 4.11 ? `/prometheus` : `/prometheus/graph`)
-                }
-              />
-            </TooltipHost>
-            <TooltipHost content={`SSH`}>
-              <IconButton
-                iconProps={{ iconName: "CommandPrompt" }}
-                aria-label="SSH"
-                onClick={() => _onSSHClick(props.currentCluster)}
-              />
-            </TooltipHost>
-            <KubeconfigButton resourceId={props.currentCluster? props.currentCluster?.resourceId:""} csrfToken={props.csrfToken} />
+            <div className={headerStyles.subtitleText}>Cluster</div>                        
+            <ToolIcons resourceId={props.currentCluster? props.currentCluster?.resourceId:""} version={Number(props.currentCluster?.version) !== undefined ? Number(props.currentCluster?.version) : 0} csrfToken={props.csrfToken} sshBox={props.sshBox}/>
           </Stack.Item>
         </Stack>
       </>
@@ -364,4 +325,4 @@ export function ClusterDetailPanel(props: {
       </Stack>
     </Panel>
   )
-}
+}
diff --git a/portal/v2/src/ClusterList.tsx b/portal/v2/src/ClusterList.tsx
@@ -1,16 +1,14 @@
 import React, { useState, useEffect, useRef, MutableRefObject, Component } from "react"
 import {
-  Stack,
-  IconButton,
+  Stack,  
   MessageBarType,
   MessageBar,
   CommandBar,
   ICommandBarItemProps,
   Separator,
   Text,
   IMessageBarStyles,
-  mergeStyleSets,
-  TooltipHost,
+  mergeStyleSets,  
   TextField,
   Link,
   Layer,
@@ -27,7 +25,7 @@ import {
 } from "@fluentui/react/lib/DetailsList"
 import { useBoolean } from "@fluentui/react-hooks"
 import { fetchClusters } from "./Request"
-import { KubeconfigButton } from "./Kubeconfig"
+import { ToolIcons } from "./ToolIcons"
 import { AxiosResponse } from "axios"
 import { ICluster, headerStyles } from "./App"
 
@@ -287,45 +285,8 @@ class ClusterListComponent extends Component<ClusterListComponentProps, ICluster
         data: "string",
         isPadded: true,
         onRender: (item: ICluster) => (
-          <Stack horizontal verticalAlign="center" className={classNames.iconContainer}>
-            <TooltipHost content={`Copy Resource ID`}>
-              <IconButton
-                iconProps={{ iconName: "Copy" }}
-                aria-label="Copy Resource ID"
-                onClick={() => this._onCopyResourceID(item)}
-              />
-            </TooltipHost>
-            <TooltipHost content={`Prometheus`}>
-              <IconButton
-                iconProps={{ iconName: "BIDashboard" }}
-                aria-label="Prometheus"
-                href={
-                  item.resourceId + (+item.version >= 4.11 ? `/prometheus` : `/prometheus/graph`)
-                }
-              />
-            </TooltipHost>
-            <TooltipHost content={`SSH`}>
-              <IconButton
-                iconProps={{ iconName: "CommandPrompt" }}
-                aria-label="SSH"
-                onClick={() => this._onSSHClick(item)}
-              />
-            </TooltipHost>
-            <KubeconfigButton resourceId={item.resourceId} csrfToken={props.csrfToken} />
-            {/* <TooltipHost content={`Geneva`}>
-              <IconButton
-                iconProps={{iconName: "Health"}}
-                aria-label="Geneva"
-                href={item.resourceId + `/geneva`}
-              />
-            </TooltipHost>
-            <TooltipHost content={`Feature Flags`}>
-              <IconButton
-                iconProps={{iconName: "IconSetsFlag"}}
-                aria-label="featureFlags"
-                href={item.resourceId + `/feature-flags`}
-              />
-            </TooltipHost> */}
+          <Stack horizontal verticalAlign="center" className={classNames.iconContainer}>           
+            <ToolIcons resourceId={item.resourceId} csrfToken={props.csrfToken} version={Number(item.version)} sshBox={props.sshModalRef}/>            
           </Stack>
         ),
       },
@@ -380,17 +341,6 @@ class ClusterListComponent extends Component<ClusterListComponentProps, ICluster
     })
   }
 
-  private _onSSHClick(item: any): void {
-    const modal = this._sshModal
-    if (modal && modal.current) {
-      modal.current.LoadSSH(item.resourceId)
-    }
-  }
-
-  private _onCopyResourceID(item: any): void {
-    navigator.clipboard.writeText(item.resourceId)
-  }
-
   private _onClusterInfoLinkClick(item: ICluster): void {
     this.props.setCurrentCluster(item)
   }
@@ -523,4 +473,4 @@ export function ClusterList(props: {
       />
     </Stack>
   )
-}
+}
diff --git a/portal/v2/src/SSHModal.tsx b/portal/v2/src/SSHModal.tsx
@@ -1,6 +1,7 @@
 import { useId, useBoolean } from "@fluentui/react-hooks"
 import {
-  Modal,
+  Popup,
+  Layer,
   getTheme,
   mergeStyleSets,
   FontWeights,
@@ -38,10 +39,15 @@ type SSHModalProps = {
 
 const theme = getTheme()
 const contentStyles = mergeStyleSets({
-  container: {
-    display: "flex",
-    flexFlow: "column nowrap",
-    alignItems: "stretch",
+  root: {
+    background: 'white',
+    left: '50%',
+    maxWidth: '500px',   
+    position: 'absolute',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    border: '1px solid #CCC',
+    boxShadow: 'rgba(0, 0, 0, 0.22) 0px 25.6px 57.6px 0px, rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px',
   },
   header: [
     {
@@ -67,6 +73,7 @@ const contentStyles = mergeStyleSets({
   },
 })
 
+
 const iconButtonStyles = {
   root: {
     color: theme.palette.neutralPrimary,
@@ -83,8 +90,7 @@ const sshDocs: string =
   "https://msazure.visualstudio.com/AzureRedHatOpenShift/_wiki/wikis/ARO.wiki/136823/ARO-SRE-portal?anchor=ssh-(elevated)"
 
 export const SSHModal = forwardRef<any, SSHModalProps>(({ csrfToken }, ref) => {
-  const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false)
-
+  const [isPopupVisible, { setTrue: showPopup, setFalse: hidePopup }] = useBoolean(false);
   const titleId = useId("title")
   const [update, { setTrue: requestSSH, setFalse: sshRequested }] = useBoolean(false)
   const [resourceID, setResourceID] = useState("")
@@ -98,9 +104,9 @@ export const SSHModal = forwardRef<any, SSHModalProps>(({ csrfToken }, ref) => {
       setUnrequestable()
       setData(null)
       setError(null)
-      showModal()
+      showPopup()
       setResourceID(item)
-    },
+    },hidePopup
   }))
 
   useEffect(() => {
@@ -207,33 +213,37 @@ export const SSHModal = forwardRef<any, SSHModalProps>(({ csrfToken }, ref) => {
 
   return (
     <div>
-      <Modal
-        titleAriaId={titleId}
-        isOpen={isModalOpen}
-        onDismiss={hideModal}
-        isModeless={true}
-        containerClassName={contentStyles.container}>
-        <div className={contentStyles.header} id="sshModal">
-          <span id={titleId}>SSH Access</span>
-          <IconButton
-            styles={iconButtonStyles}
-            iconProps={cancelIcon}
-            ariaLabel="Close popup modal"
-            onClick={hideModal}
-          />
-        </div>
-
-        <div className={contentStyles.body}>
-          <p>
-            Before requesting SSH access, please ensure you have read the{" "}
-            <a href={sshDocs}>SSH docs</a>.
-          </p>
-          {error && errorBar()}
-          {data ? dataResult() : selectionField()}
-        </div>
-      </Modal>
+      {isPopupVisible && (
+        <Layer>
+          <Popup
+              className={contentStyles.root}
+              role="dialog"
+              aria-modal="true"
+              onDismiss={hidePopup}
+              enableAriaHiddenSiblings={true}
+            >
+          <div className={contentStyles.header} id="sshModal">
+            <span id={titleId}>SSH Access</span>
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={cancelIcon}
+              ariaLabel="Close popup modal"
+              onClick={hidePopup}
+            />
+          </div>
+          <div className={contentStyles.body}>
+            <p>
+              Before requesting SSH access, please ensure you have read the{" "}
+              <a href={sshDocs}>SSH docs</a>.
+            </p>
+            {error && errorBar()}
+            {data ? dataResult() : selectionField()}
+          </div>
+          </Popup>
+        </Layer>
+         )}
     </div>
   )
 })
 
-SSHModal.displayName = "sshmodal"
+SSHModal.displayName = "sshmodal"