Use cluster resourceID in route for details modal

Azure · Sep 12, 2023 · 82c7000 · 82c7000
1 parent 313b3ca
commit 82c7000
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 126 deletions.
diff --git a/portal/v2/src/App.tsx b/portal/v2/src/App.tsx
@@ -31,6 +31,7 @@ import { ClusterDetailPanel } from "./ClusterDetail"
 import { ClusterList } from "./ClusterList"
 import { fetchInfo, fetchRegions, ProcessLogOut } from "./Request"
 import { RegionComponent } from "./RegionList"
+import { Routes, Route } from "react-router"
 
 const containerStackTokens: IStackTokens = {}
 const appStackTokens: IStackTokens = { childrenGap: 10 }
@@ -52,6 +53,13 @@ export interface ICluster {
   consoleLink: string
 }
 
+export interface IClusterCoordinates {
+  subscription: string
+  resourceGroup: string,
+  name: string,
+  resourceId: string,
+}
+
 const stackStyles: IStackStyles = {
   root: [
     {
@@ -190,15 +198,13 @@ function App() {
   const [error, setError] = useState<AxiosResponse | null>(null)
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false)
   const [fetching, setFetching] = useState("")
-  const [currentCluster, setCurrentCluster] = useState<ICluster | null>(null)
 
   const [contentStackStyles, setContentStackStyles] =
     useState<IStackStyles>(contentStackStylesNormal)
   const sshRef = useRef<typeof SSHModal | null>(null)
   const csrfRef = useRef<string>("")
 
   const _onCloseDetailPanel = () => {
-    setCurrentCluster(null)
     setContentStackStyles(contentStackStylesNormal)
   }
 
@@ -323,18 +329,23 @@ function App() {
             <ClusterList
               csrfToken={csrfRef}
               sshBox={sshRef}
-              setCurrentCluster={setCurrentCluster}
               csrfTokenAvailable={fetching}
             />
           </Stack.Item>
           <Stack.Item grow>
-            <ClusterDetailPanel
-              csrfToken={csrfRef}
-              sshBox={sshRef}
-              loaded={fetching}
-              currentCluster={currentCluster}
-              onClose={_onCloseDetailPanel}
-            />
+            <Routes>
+              <Route
+                path="/subscriptions/:subscriptionId/resourcegroups/:resourceGroupName/providers/microsoft.redhatopenshift/openshiftclusters/:resourceName"
+                element={(
+                  <ClusterDetailPanel
+                    csrfToken={csrfRef}
+                    sshBox={sshRef}
+                    loaded={fetching}
+                    onClose={_onCloseDetailPanel}
+                  />
+                )}
+              />
+            </Routes>
           </Stack.Item>
         </Stack>
         <SSHModal csrfToken={csrfRef} ref={sshRef} />

diff --git a/portal/v2/src/ClusterDetail.tsx b/portal/v2/src/ClusterDetail.tsx
@@ -1,6 +1,6 @@
 import { IPanelStyles, Panel, PanelType } from "@fluentui/react/lib/Panel"
 import { useBoolean } from "@fluentui/react-hooks"
-import { useState, useEffect, useRef, MutableRefObject, ReactElement } from "react"
+import { useState, useEffect, useRef, MutableRefObject, ReactElement, useMemo } from "react"
 import {
   IMessageBarStyles,
   MessageBar,
@@ -14,11 +14,12 @@ import {
 } from "@fluentui/react"
 import { AxiosResponse } from "axios"
 import { fetchClusterInfo } from "./Request"
-import { ICluster, headerStyles } from "./App"
+import { IClusterCoordinates, headerStyles } from "./App"
 import { Nav, INavLink, INavStyles } from "@fluentui/react/lib/Nav"
 import { ToolIcons } from "./ToolIcons"
 import { ClusterDetailComponent, MemoisedClusterDetailListComponent } from "./ClusterDetailList"
 import React from "react"
+import { useLinkClickHandler, useParams } from "react-router-dom"
 
 const navStyles: Partial<INavStyles> = {
   root: {
@@ -79,7 +80,6 @@ const errorBarStyles: Partial<IMessageBarStyles> = { root: { marginBottom: 15 }
 
 export function ClusterDetailPanel(props: {
   csrfToken: MutableRefObject<string>
-  currentCluster: ICluster | null
   sshBox: any
   onClose: any
   loaded: string
@@ -98,6 +98,20 @@ export function ClusterDetailPanel(props: {
       justifyContent: "flex-start",
     },
   })
+  const onDismiss = useLinkClickHandler("/")
+
+  const params = useParams()
+  const currentCluster = useMemo<IClusterCoordinates | null>(() => {
+    if (params.subscriptionId && params.resourceGroupName && params.resourceName) {
+      return {
+        subscription: params.subscriptionId,
+        resourceGroup: params.resourceGroupName,
+        name: params.resourceName,
+        resourceId: `/subscriptions/${params.subscriptionId}/resourcegroups/${params.resourceGroupName}/providers/microsoft.redhatopenshift/openshiftclusters/${params.resourceName}`
+      }
+    }
+    return null
+  }, [params])
 
   const errorBar = (): any => {
     return (
@@ -183,21 +197,22 @@ export function ClusterDetailPanel(props: {
     }
   }
 
-  const _dismissPanel = () => {
+  const _dismissPanel = (ev: any) => {
     dismissPanel()
     props.sshBox.current.hidePopup()
     props.onClose()
     setData([])
     setFetching("")
     setDataLoaded(false)
     setError(null)
+    onDismiss(ev)
   }
 
   useEffect(() => {
-    if (props.currentCluster == null) {
+    if (currentCluster == null) {
       return
     }
-    const resourceID = props.currentCluster.resourceId
+    const resourceID = currentCluster.resourceId
 
     const onData = (result: AxiosResponse | null) => {
       if (result?.status === 200) {
@@ -212,16 +227,16 @@ export function ClusterDetailPanel(props: {
     if (fetching === "" && props.loaded === "DONE" && resourceID != "") {
       setFetching("FETCHING")
       setError(null)
-      fetchClusterInfo(props.currentCluster).then(onData)
+      fetchClusterInfo(currentCluster).then(onData)
     }
   }, [data, fetching, setFetching])
 
   useEffect(() => {
-    if (props.currentCluster == null) {
+    if (currentCluster == null) {
       setDataLoaded(false)
       return
     }
-    const resourceID = props.currentCluster.resourceId
+    const resourceID = currentCluster.resourceId
 
     if (resourceID != "") {
       if (resourceID == fetching) {
@@ -234,7 +249,7 @@ export function ClusterDetailPanel(props: {
         openPanel()
       }
     }
-  }, [props.currentCluster?.resourceId])
+  }, [currentCluster])
 
   function _onLinkClick(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) {
     if (item && item.name !== "") {
@@ -282,9 +297,9 @@ export function ClusterDetailPanel(props: {
             <Icon styles={headerIconStyles} iconName="openshift-svg"></Icon>
           </Stack.Item>
           <Stack.Item>
-            <div className={headerStyles.titleText}>{props.currentCluster?.name}</div>
+            <div className={headerStyles.titleText}>{currentCluster?.name}</div>
             <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}/>
+            <ToolIcons resourceId={currentCluster ? currentCluster?.resourceId : ""} version={Number(data?.version) !== undefined ? Number(data?.version) : 0} csrfToken={props.csrfToken} sshBox={props.sshBox}/>
           </Stack.Item>
         </Stack>
       </>
@@ -316,7 +331,7 @@ export function ClusterDetailPanel(props: {
           <Stack.Item grow>
             <MemoisedClusterDetailListComponent
               item={data}
-              cluster={props.currentCluster}
+              cluster={currentCluster}
               isDataLoaded={dataLoaded}
               detailPanelVisible={detailPanelVisible}
             />

diff --git a/portal/v2/src/ClusterDetailList.tsx b/portal/v2/src/ClusterDetailList.tsx
@@ -7,11 +7,11 @@ import { MachineSetsWrapper } from "./ClusterDetailListComponents/MachineSetsWra
 import { Statistics } from "./ClusterDetailListComponents/Statistics/Statistics"
 import { ClusterOperatorsWrapper } from "./ClusterDetailListComponents/ClusterOperatorsWrapper";
 
-import { ICluster } from "./App"
+import { IClusterCoordinates } from "./App"
 
 interface ClusterDetailComponentProps {
   item: IClusterDetails
-  cluster: ICluster | null
+  cluster: IClusterCoordinates | null
   isDataLoaded: boolean
   detailPanelVisible: string
 }
@@ -38,7 +38,7 @@ export interface IClusterDetails {
 }
 
 export interface WrapperProps {
-  currentCluster: ICluster | null
+  currentCluster: IClusterCoordinates | null
   detailPanelSelected: string
   loaded: boolean
 }

diff --git a/portal/v2/src/ClusterDetailListComponents/OverviewWrapper.tsx b/portal/v2/src/ClusterDetailListComponents/OverviewWrapper.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react"
 import { AxiosResponse } from "axios"
 import { fetchClusterInfo } from "../Request"
-import { ICluster } from "../App"
+import { IClusterCoordinates } from "../App"
 import { ClusterDetailComponent } from "../ClusterDetailList"
 import { OverviewComponent } from "./Overview"
 import {
@@ -18,7 +18,7 @@ const errorBarStyles: Partial<IMessageBarStyles> = { root: { marginBottom: 15 }
 
 export function OverviewWrapper(props: {
   clusterName: string
-  currentCluster: ICluster
+  currentCluster: IClusterCoordinates
   detailPanelSelected: string
   loaded: boolean
 }) {