diff --git a/agent/agentUi/package-lock.json b/agent/agentUi/package-lock.json index 20f675b4..7783317f 100644 --- a/agent/agentUi/package-lock.json +++ b/agent/agentUi/package-lock.json @@ -17,6 +17,7 @@ "react-bootstrap": "^2.10.5", "react-data-table-component": "^7.6.2", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "superagent": "^10.1.0" }, "devDependencies": { @@ -1391,6 +1392,15 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@restart/hooks": { "version": "0.4.16", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", @@ -4572,6 +4582,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/agent/agentUi/package.json b/agent/agentUi/package.json index 2b4f3dc5..86b08981 100644 --- a/agent/agentUi/package.json +++ b/agent/agentUi/package.json @@ -19,6 +19,7 @@ "react-bootstrap": "^2.10.5", "react-data-table-component": "^7.6.2", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2", "superagent": "^10.1.0" }, "devDependencies": { diff --git a/agent/agentUi/src/App.css b/agent/agentUi/src/App.css deleted file mode 100644 index a5fd9996..00000000 --- a/agent/agentUi/src/App.css +++ /dev/null @@ -1,9 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; -} - -.info { - margin-top: 5em; -} \ No newline at end of file diff --git a/agent/agentUi/src/NavBar.jsx b/agent/agentUi/src/NavBar.jsx new file mode 100644 index 00000000..01bd66fa --- /dev/null +++ b/agent/agentUi/src/NavBar.jsx @@ -0,0 +1,47 @@ +import {useEffect, useState} from "react"; +import {AgentApi, ApiClient} from "./api/src/index.js"; +import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material"; +import MenuIcon from "@mui/icons-material/Menu"; +import {Link} from "react-router-dom"; +import ListIcon from "@mui/icons-material/List"; +import LanIcon from "@mui/icons-material/Lan"; +import ShareIcon from "@mui/icons-material/Share"; + +function NavBar() { + const [version, setVersion] = useState(""); + + let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host)); + + useEffect(() => { + let mounted = true; + api.agentVersion((err, data) => { + if(mounted) { + setVersion(data.v); + } + }); + }, []); + + return ( + + + + + + + zrok Agent { version !== "" ? " | " + version : ""} + + + + + + + ) +} + +export default NavBar; \ No newline at end of file diff --git a/agent/agentUi/src/App.jsx b/agent/agentUi/src/Overview.jsx similarity index 62% rename from agent/agentUi/src/App.jsx rename to agent/agentUi/src/Overview.jsx index 6b48807c..f3f79b13 100644 --- a/agent/agentUi/src/App.jsx +++ b/agent/agentUi/src/Overview.jsx @@ -1,16 +1,10 @@ -import "./App.css"; import "bootstrap/dist/css/bootstrap.min.css"; import {useEffect, useState} from "react"; import {AgentApi, ApiClient} from "./api/src/index.js"; import DataTable from "react-data-table-component"; -import ShareIcon from "@mui/icons-material/Share"; -import MenuIcon from "@mui/icons-material/Menu"; -import LanIcon from "@mui/icons-material/Lan"; -import ListIcon from "@mui/icons-material/List"; -import {AppBar, Button, IconButton, Toolbar, Typography} from "@mui/material"; +import NavBar from "./NavBar.jsx"; -function App() { - const [version, setVersion] = useState(""); +function Overview() { const [shares, setShares] = useState([]); const [accesses, setAccesses] = useState([]); @@ -55,15 +49,6 @@ function App() { let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host)); - useEffect(() => { - let mounted = true; - api.agentVersion((err, data) => { - if(mounted) { - setVersion(data.v); - } - }); - }, []); - useEffect(() => { let mounted = true; let interval = setInterval(() => { @@ -82,25 +67,7 @@ function App() { return ( <> - - - - - - - zrok Agent { version !== "" ? " | " + version : ""} - - - - - - +

Shares

@@ -119,10 +86,8 @@ function App() { noDataComponent={
} />
- - Connected Version: {version} ) } -export default App; +export default Overview; diff --git a/agent/agentUi/src/ShareDetail.jsx b/agent/agentUi/src/ShareDetail.jsx new file mode 100644 index 00000000..e7d1777f --- /dev/null +++ b/agent/agentUi/src/ShareDetail.jsx @@ -0,0 +1,12 @@ +import NavBar from "./NavBar.jsx"; + +function ShareDetail() { + return ( + <> + +

Share Detail

+ + ) +} + +export default ShareDetail; \ No newline at end of file diff --git a/agent/agentUi/src/index.css b/agent/agentUi/src/index.css index 39061613..decfbae1 100644 --- a/agent/agentUi/src/index.css +++ b/agent/agentUi/src/index.css @@ -44,3 +44,13 @@ button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } + +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; +} + +.info { + margin-top: 5em; +} \ No newline at end of file diff --git a/agent/agentUi/src/main.jsx b/agent/agentUi/src/main.jsx index 89f91e54..e65c8a50 100644 --- a/agent/agentUi/src/main.jsx +++ b/agent/agentUi/src/main.jsx @@ -1,10 +1,23 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import './index.css'; +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import Overview from "./Overview.jsx"; +import ShareDetail from "./ShareDetail.jsx"; + +const router = createBrowserRouter([ + { + path: "/", + element: + }, + { + path: "/share", + element: + } +]); createRoot(document.getElementById('root')).render( - + , )