Use URL routing to handle Cluster Details navigation

portal/v2/src/App.tsx

@@ -335,7 +335,7 @@ function App() {
           <Stack.Item grow>
             <Routes>
               <Route
-                path="/subscriptions/:subscriptionId/resourcegroups/:resourceGroupName/providers/microsoft.redhatopenshift/openshiftclusters/:resourceName"
+                path="/subscriptions/:subscriptionId/resourcegroups/:resourceGroupName/providers/microsoft.redhatopenshift/openshiftclusters/:resourceName/*?"
                 element={(
                   <ClusterDetailPanel
                     csrfToken={csrfRef}

portal/v2/src/ClusterDetail.tsx

@@ -17,9 +17,9 @@ import { fetchClusterInfo } from "./Request"
 import { IClusterCoordinates, headerStyles } from "./App"
 import { Nav, INavLink, INavStyles } from "@fluentui/react/lib/Nav"
 import { ToolIcons } from "./ToolIcons"
-import { ClusterDetailComponent, MemoisedClusterDetailListComponent } from "./ClusterDetailList"
+import { MemoisedClusterDetailListComponent } from "./ClusterDetailList"
 import React from "react"
-import { useLinkClickHandler, useParams } from "react-router-dom"
+import { useLinkClickHandler, useNavigate, useParams } from "react-router-dom"
 
 const navStyles: Partial<INavStyles> = {
   root: {
@@ -86,11 +86,10 @@ export function ClusterDetailPanel(props: {
 }) {
   const [data, setData] = useState<any>([])
   const [error, setError] = useState<AxiosResponse | null>(null)
-  const state = useRef<ClusterDetailComponent>(null)
   const [fetching, setFetching] = useState("")
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false) // panel controls
   const [dataLoaded, setDataLoaded] = useState<boolean>(false)
-  const [detailPanelVisible, setdetailPanelVisible] = useState<string>("Overview")
+  const [detailPanelVisible] = useState<string>("Overview")
   const [customPanelStyle, setcustomPanelStyle] = useState<Partial<IPanelStyles>>({
     root: { top: "40px", left: "225px" },
     content: { paddingLeft: 30, paddingRight: 5 },
@@ -99,6 +98,7 @@ export function ClusterDetailPanel(props: {
     },
   })
   const onDismiss = useLinkClickHandler("/")
+  const navigate = useNavigate();
 
   const params = useParams()
   const currentCluster = useMemo<IClusterCoordinates | null>(() => {
@@ -132,55 +132,55 @@ export function ClusterDetailPanel(props: {
         {
           name: "Overview",
           key: overviewKey,
-          url: '#overview',
+          url: 'overview',
           icon: 'Info',
         },
         {
           name: "Nodes",
           key: nodesKey,
-          url: '#nodes',
+          url: 'nodes',
           icon: 'BranchCommit',
         },
         {
           name: "Machines",
           key: machinesKey,
-          url: '#machines',
+          url: 'machines',
           icon: 'ConnectVirtualMachine',
         },
         {
           name: "MachineSets",
           key: machineSetsKey,
-          url: "#machinesets",
+          url: "machinesets",
           icon: "BuildQueue",
         },
         {
           name: "APIStatistics",
           key: apiStatisticsKey,
-          url: "#apistatistics",
+          url: "apistatistics",
           icon: "BIDashboard",
         },
         {
           name: "KCMStatistics",
           key: kcmStatisticsKey,
-          url: "#kcmstatistics",
+          url: "kcmstatistics",
           icon: "BIDashboard",
         },
         {
           name: "DNSStatistics",
           key: dnsStatisticsKey,
-          url: "#dnsstatistics",
+          url: "dnsstatistics",
           icon: "BIDashboard",
         },
         {
           name: "IngressStatistics",
           key: ingressStatisticsKey,
-          url: "#ingressstatistics",
+          url: "ingressstatistics",
           icon: "BIDashboard",
         },
         {
           name: 'ClusterOperators',
           key: clusterOperatorsKey,
-          url: '#clusteroperators',
+          url: 'clusteroperators',
           icon: 'Shapes',
         },
       ],
@@ -192,9 +192,6 @@ export function ClusterDetailPanel(props: {
   // api/clusterdetail returns a single item.
   const updateData = (newData: any) => {
     setData(newData)
-    if (state && state.current) {
-      state.current.setState({ item: newData })
-    }
   }
 
   const _dismissPanel = (ev: any) => {
@@ -253,7 +250,8 @@ export function ClusterDetailPanel(props: {
 
   function _onLinkClick(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) {
     if (item && item.name !== "") {
-      setdetailPanelVisible(item.name)
+      event?.preventDefault()
+      navigate(item.url)
     }
   }
 

portal/v2/src/ClusterDetailList.tsx

@@ -1,5 +1,6 @@
-import { Component } from "react"
 import React from "react"
+import { Navigate, Route, Routes } from "react-router-dom"
+
 import { OverviewWrapper } from "./ClusterDetailListComponents/OverviewWrapper"
 import { NodesWrapper } from "./ClusterDetailListComponents/NodesWrapper"
 import { MachinesWrapper } from "./ClusterDetailListComponents/MachinesWrapper"
@@ -8,6 +9,7 @@ import { Statistics } from "./ClusterDetailListComponents/Statistics/Statistics"
 import { ClusterOperatorsWrapper } from "./ClusterDetailListComponents/ClusterOperatorsWrapper";
 
 import { IClusterCoordinates } from "./App"
+import { apiStatisticsKey, clusterOperatorsKey, dnsStatisticsKey, ingressStatisticsKey, kcmStatisticsKey, machineSetsKey, machinesKey, nodesKey, overviewKey } from "./ClusterDetail"
 
 interface ClusterDetailComponentProps {
   item: IClusterDetails
@@ -43,51 +45,21 @@ export interface WrapperProps {
   loaded: boolean
 }
 
-interface IClusterDetailComponentState {
-  item: IClusterDetails // why both state and props?
-  detailPanelSelected: string
-}
-
-const detailComponents: Map<string, any> = new Map<string, any>([
-    ["nodes", NodesWrapper],
-    ["machines", MachinesWrapper],
-    ["machinesets", MachineSetsWrapper],
-    ["clusteroperators", ClusterOperatorsWrapper],
-    ["statistics", Statistics]
-])
-
-export class ClusterDetailComponent extends Component<ClusterDetailComponentProps, IClusterDetailComponentState> {
-
-  constructor(props: ClusterDetailComponentProps | Readonly<ClusterDetailComponentProps>) {
-    super(props)
-  }
-
-  public render() {
-    if (this.props.cluster != undefined && this.props.detailPanelVisible != undefined) {
-      const panel = this.props.detailPanelVisible.toLowerCase()
-      if (panel == "overview") {
-        return (
-          <OverviewWrapper
-            clusterName={this.props.cluster.name}
-            currentCluster={this.props.cluster!}
-            detailPanelSelected={panel}
-            loaded={this.props.isDataLoaded}
-          />
-        )
-      } else if (panel.includes("statistics")) {
-        const StatisticsView = detailComponents.get("statistics")
-        const type = panel.substring(0,panel.indexOf("statistics"))
-        return (
-          <StatisticsView currentCluster={this.props.cluster!} detailPanelSelected={panel} loaded = {this.props.isDataLoaded} statisticsType = {type}/>
-        )
-      } else {
-        const DetailView = detailComponents.get(panel)
-        return (
-          <DetailView currentCluster={this.props.cluster!} detailPanelSelected={panel} loaded={this.props.isDataLoaded}/>
-        )
-      }
-    }
-  }
+export function ClusterDetailComponent(props: ClusterDetailComponentProps) {
+  return (
+    <Routes>
+      <Route path="" element={<Navigate to="overview" />} />
+      <Route path="overview" element={<OverviewWrapper clusterName={props.cluster?.name!} currentCluster={props.cluster!} detailPanelSelected={overviewKey} loaded={props.isDataLoaded} />} />
+      <Route path="nodes" element={<NodesWrapper currentCluster={props.cluster!} detailPanelSelected={nodesKey} loaded={props.isDataLoaded} />} />
+      <Route path="machines" element={<MachinesWrapper currentCluster={props.cluster!} detailPanelSelected={machinesKey} loaded={props.isDataLoaded} />} />
+      <Route path="machinesets" element={<MachineSetsWrapper currentCluster={props.cluster!} detailPanelSelected={machineSetsKey} loaded={props.isDataLoaded} />} />
+      <Route path="apistatistics" element={<Statistics currentCluster={props.cluster!} detailPanelSelected={apiStatisticsKey} loaded={props.isDataLoaded} statisticsType="api" />} />
+      <Route path="kcmstatistics" element={<Statistics currentCluster={props.cluster!} detailPanelSelected={kcmStatisticsKey} loaded={props.isDataLoaded} statisticsType="kcm" />} />
+      <Route path="dnsstatistics" element={<Statistics currentCluster={props.cluster!} detailPanelSelected={dnsStatisticsKey} loaded={props.isDataLoaded} statisticsType="dns" />} />
+      <Route path="ingressstatistics" element={<Statistics currentCluster={props.cluster!} detailPanelSelected={ingressStatisticsKey} loaded={props.isDataLoaded} statisticsType="ingress" />} />
+      <Route path="clusteroperators" element={<ClusterOperatorsWrapper currentCluster={props.cluster!} detailPanelSelected={clusterOperatorsKey} loaded={props.isDataLoaded} />} />
+    </Routes>
+  )
 }
 
 export const MemoisedClusterDetailListComponent = React.memo(ClusterDetailComponent)

portal/v2/src/ClusterDetailListComponents/OverviewWrapper.tsx

@@ -1,8 +1,7 @@
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect } from "react"
 import { AxiosResponse } from "axios"
 import { fetchClusterInfo } from "../Request"
 import { IClusterCoordinates } from "../App"
-import { ClusterDetailComponent } from "../ClusterDetailList"
 import { OverviewComponent } from "./Overview"
 import {
   IMessageBarStyles,
@@ -24,7 +23,6 @@ export function OverviewWrapper(props: {
 }) {
   const [data, setData] = useState<any>([])
   const [error, setError] = useState<AxiosResponse | null>(null)
-  const state = useRef<ClusterDetailComponent>(null)
   const [fetching, setFetching] = useState("")
 
   const errorBar = (): any => {
@@ -45,9 +43,6 @@ export function OverviewWrapper(props: {
   // api/clusterdetail returns a single item.
   const updateData = (newData: any) => {
     setData(newData)
-    if (state && state.current) {
-      state.current.setState({ item: newData, detailPanelSelected: props.detailPanelSelected })
-    }
   }
 
   const controlStyles = {

portal/v2/src/ClusterDetailListComponents/Statistics/Statistics.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { ICluster } from "../../App"
+import { IClusterCoordinates } from "../../App"
 import {
   Modal,
   Stack,
@@ -34,7 +34,7 @@ export const iconButtonStyles = mergeStyleSets({
 
 const global = new Date()
 export function Statistics(props: {
-  currentCluster: ICluster
+  currentCluster: IClusterCoordinates
   detailPanelSelected: string
   loaded: boolean
   statisticsType: string

portal/v2/src/ClusterDetailListComponents/Statistics/StatisticsWrapper.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react"
 import { AxiosResponse } from "axios"
-import { ICluster } from "../../App"
+import { IClusterCoordinates } from "../../App"
 import { StatisticsComponent } from "./StatisticsComponent"
 import { fetchStatistics } from "../../Request"
 import {
@@ -29,7 +29,7 @@ export interface IMetrics {
 }
 
 export function StatisticsWrapper(props: {
-  currentCluster: ICluster
+  currentCluster: IClusterCoordinates
   detailPanelSelected: string
   loaded: boolean
   statisticsName: string

portal/v2/src/Request.tsx

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from "axios"
-import { ICluster, IClusterCoordinates } from "./App"
+import { IClusterCoordinates } from "./App"
 import { convertTimeToHours } from "./ClusterDetailListComponents/Statistics/GraphOptionsComponent"
 
 const OnError = (err: AxiosResponse): AxiosResponse | null => {
@@ -143,7 +143,7 @@ export const RequestKubeconfig = async (
 }
 
 export const fetchStatistics = async (
-  cluster: ICluster,
+  cluster: IClusterCoordinates,
   statisticsName: string,
   duration: string,
   endDate: Date