mirror of
https://github.com/openziti/zrok.git
synced 2024-11-23 00:23:48 +01:00
react router (#221)
This commit is contained in:
Michael Quigley
parent
a67dba0959
commit
c5c5bb0879
42
agent/agentUi/package-lock.json
generated
42
agent/agentUi/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 5em;
|
||||
}
|
||||
47
agent/agentUi/src/NavBar.jsx
Normal file
47
agent/agentUi/src/NavBar.jsx
Normal file
@ -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 (
|
||||
<AppBar position={"static"}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
size={"large"}
|
||||
edge={"start"}
|
||||
color={"inherit"}
|
||||
aria-label={"menu"}
|
||||
sx={{mr: 2}}
|
||||
>
|
||||
<MenuIcon/>
|
||||
</IconButton>
|
||||
<Typography variant={"p"} component={"div"} sx={{flexGrow: 1}}>
|
||||
zrok Agent { version !== "" ? " | " + version : ""}
|
||||
</Typography>
|
||||
<Button color={"inherit"} component={Link} to={"/"}><ListIcon /></Button>
|
||||
<Button color={"inherit"}><LanIcon /></Button>
|
||||
<Button color={"inherit"}><ShareIcon /></Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
@ -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 (
|
||||
<>
|
||||
<AppBar position={"static"}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
size={"large"}
|
||||
edge={"start"}
|
||||
color={"inherit"}
|
||||
aria-label={"menu"}
|
||||
sx={{mr: 2}}
|
||||
>
|
||||
<MenuIcon/>
|
||||
</IconButton>
|
||||
<Typography variant={"p"} component={"div"} sx={{flexGrow: 1}}>
|
||||
zrok Agent { version !== "" ? " | " + version : ""}
|
||||
</Typography>
|
||||
<Button color={"inherit"}><ListIcon /></Button>
|
||||
<Button color={"inherit"}><LanIcon /></Button>
|
||||
<Button color={"inherit"}><ShareIcon /></Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<NavBar />
|
||||
|
||||
<div class={"info"}>
|
||||
<h2>Shares</h2>
|
||||
@ -119,10 +86,8 @@ function App() {
|
||||
noDataComponent={<div/>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<code>Connected Version: {version}</code>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default Overview;
|
||||
12
agent/agentUi/src/ShareDetail.jsx
Normal file
12
agent/agentUi/src/ShareDetail.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import NavBar from "./NavBar.jsx";
|
||||
|
||||
function ShareDetail() {
|
||||
return (
|
||||
<>
|
||||
<NavBar />
|
||||
<h1>Share Detail</h1>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShareDetail;
|
||||
@ -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;
|
||||
}
|
||||
@ -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: <Overview />
|
||||
},
|
||||
{
|
||||
path: "/share",
|
||||
element: <ShareDetail />
|
||||
}
|
||||
]);
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<RouterProvider router={router} />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user