--Added Routes
This commit is contained in:
george committed
1 parent
2f677c36b3
commit
3d0d02d06c
5 files changed
+155
-20
No files matched your search
+78
-17
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, Navigate, Route, Routes, useMatch, useNavigate, useParams } from 'react-router-dom'
|
||||
import './App.css'
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL
|
||||
@@ -254,8 +255,24 @@ const createCluster = async (payload: CreateClusterPayload) => {
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to={`/${getSavedPage()}`} replace />} />
|
||||
<Route path="/dashboard" element={<Workspace page="dashboard" />} />
|
||||
<Route path="/nodes" element={<Workspace page="nodes" />} />
|
||||
<Route path="/clusters" element={<Workspace page="clusters" />} />
|
||||
<Route path="/clusters/:clusterId" element={<Workspace page="cluster-details" />} />
|
||||
<Route path="/clusters/:clusterId/nodes/:nodeId" element={<Workspace page="node-details" />} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
function Workspace({ page: activePage }: { page: PageId | 'node-details' }) {
|
||||
const navigate = useNavigate()
|
||||
const { clusterId, nodeId } = useParams()
|
||||
const isClusterPage = Boolean(useMatch('/clusters/*'))
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const [activePage, setActivePage] = useState<PageId>(getSavedPage)
|
||||
const [theme, setTheme] = useState<Theme>(getSavedTheme)
|
||||
const [isRegisterFormOpen, setIsRegisterFormOpen] = useState(false)
|
||||
const [isClusterFormOpen, setIsClusterFormOpen] = useState(false)
|
||||
@@ -304,21 +321,33 @@ function App() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleClusterClick = async (cluster: Cluster) => {
|
||||
const handleClusterClick = (cluster: Cluster) => {
|
||||
setSelectedCluster(cluster)
|
||||
navigate(`/clusters/${encodeURIComponent(cluster.uuid)}`)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!clusterId) return
|
||||
let cancelled = false
|
||||
setClusterDetails(null)
|
||||
setClusterNodesStatus('loading')
|
||||
setClusterNodesError('')
|
||||
|
||||
try {
|
||||
const response = await getClusterResource(`cluster-nodes/${encodeURIComponent(cluster.uuid)}`)
|
||||
setClusterDetails(await response.json() as ClusterNodesResponse)
|
||||
setClusterNodesStatus('success')
|
||||
selectPage('cluster-details')
|
||||
} catch (error) {
|
||||
setClusterNodesStatus('error')
|
||||
setClusterNodesError(error instanceof Error ? error.message : 'Failed to load cluster nodes')
|
||||
}
|
||||
}
|
||||
void getClusterResource(`cluster-nodes/${encodeURIComponent(clusterId)}`)
|
||||
.then((response) => response.json() as Promise<ClusterNodesResponse>)
|
||||
.then((details) => {
|
||||
if (cancelled) return
|
||||
setClusterDetails(details)
|
||||
setClusterNodesStatus('success')
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
if (cancelled) return
|
||||
setClusterNodesStatus('error')
|
||||
setClusterNodesError(error instanceof Error ? error.message : 'Failed to load cluster nodes')
|
||||
})
|
||||
|
||||
return () => { cancelled = true }
|
||||
}, [clusterId])
|
||||
|
||||
const loadNodeInterfaces = async () => {
|
||||
setNodesStatus('loading')
|
||||
@@ -355,7 +384,7 @@ function App() {
|
||||
}, [activePage])
|
||||
|
||||
const selectPage = (page: PageId) => {
|
||||
setActivePage(page)
|
||||
navigate(`/${page}`)
|
||||
savePage(page)
|
||||
}
|
||||
|
||||
@@ -531,10 +560,10 @@ function App() {
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
className={`nav-link ${activePage === item.id ? 'active' : ''}`}
|
||||
className={`nav-link ${(activePage === item.id || (item.id === 'clusters' && isClusterPage)) ? 'active' : ''}`}
|
||||
title={isCollapsed ? item.label : undefined}
|
||||
onClick={() => selectPage(item.id)}
|
||||
aria-current={activePage === item.id ? 'page' : undefined}
|
||||
aria-current={(activePage === item.id || (item.id === 'clusters' && isClusterPage)) ? 'page' : undefined}
|
||||
>
|
||||
<span className="nav-icon" aria-hidden="true">
|
||||
{item.label.charAt(0)}
|
||||
@@ -561,6 +590,33 @@ function App() {
|
||||
</aside>
|
||||
|
||||
<main className="main-content">
|
||||
{clusterId && (
|
||||
<>
|
||||
{clusterNodesStatus === 'loading' && <p role="status">Loading...</p>}
|
||||
{clusterNodesStatus === 'error' && (
|
||||
<div>
|
||||
<p className="status-message error" role="alert">{clusterNodesError}</p>
|
||||
<button type="button" className="secondary-button" onClick={() => navigate(activePage === 'node-details' ? `/clusters/${encodeURIComponent(clusterId)}` : '/clusters')}>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{activePage === 'node-details' && clusterDetails && (
|
||||
<section className="content-panel" id="node-details">
|
||||
<div className="page-header">
|
||||
<h1>{clusterDetails.nodes.find((node) => node.uuid === nodeId)?.node_name ?? 'Node not found'}</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="secondary-button"
|
||||
onClick={() => navigate(`/clusters/${encodeURIComponent(clusterId!)}`)}
|
||||
>
|
||||
Back to cluster
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
{activePage === 'cluster-details' && clusterDetails && (
|
||||
<section className="content-panel" id="cluster-details">
|
||||
<div className="page-header">
|
||||
@@ -577,8 +633,13 @@ function App() {
|
||||
{clusterDetails.nodes.length > 0 ? (
|
||||
<ul className="cluster-node-list" aria-label="Cluster nodes">
|
||||
{clusterDetails.nodes.map((node) => (
|
||||
<li className="cluster-node-card" key={node.uuid}>
|
||||
{node.node_name}
|
||||
<li key={node.uuid}>
|
||||
<Link
|
||||
className="cluster-node-card"
|
||||
to={`/clusters/${encodeURIComponent(clusterId!)}/nodes/${encodeURIComponent(node.uuid)}`}
|
||||
>
|
||||
{node.node_name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in new issue
Block a user