george/pgMultiMasterFrontend
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

--Added Routes

Browse Source
This commit is contained in:
george committed 2026-09-22 11:42:59 +05:30
1 parent 2f677c36b3
commit 3d0d02d06c
5 files changed
+155 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package-lock.json
Generated
+59 -1
View File
@@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^19.2.8",
"react-dom": "^19.2.8"
"react-dom": "^19.2.8",
"react-router-dom": "^7.18.4"
},
"devDependencies": {
"@types/node": "^24.13.3",
@@ -676,6 +677,19 @@
}
}
},
"node_modules/cookie": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/csstype": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1125,6 +1139,44 @@
"react": "^19.2.8"
}
},
"node_modules/react-router": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
"integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
"integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
"license": "MIT",
"dependencies": {
"react-router": "7.18.4"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/rolldown": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.7.tgz",
@@ -1165,6 +1217,12 @@
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
"license": "MIT"
},
"node_modules/set-cookie-parser": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
"license": "MIT"
},
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
package.json
+2 -1
View File
@@ -11,7 +11,8 @@
},
"dependencies": {
"react": "^19.2.8",
"react-dom": "^19.2.8"
"react-dom": "^19.2.8",
"react-router-dom": "^7.18.4"
},
"devDependencies": {
"@types/node": "^24.13.3",
src/App.css
+12
View File
@@ -484,6 +484,8 @@
}
.cluster-node-card {
display: block;
text-decoration: none;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
@@ -493,6 +495,16 @@
overflow-wrap: anywhere;
}
.cluster-node-card:hover {
border-color: var(--accent-border);
background: var(--accent-bg);
}
.cluster-node-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.cluster-list .secondary-button {
width: 100%;
justify-content: flex-start;
src/App.tsx
+78 -17
View File
@@ -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>
src/main.tsx
+4 -1
View File
@@ -1,10 +1,13 @@
import { StrictMode } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)