extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-24 19:51:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

NavBar (#724)

Browse Source
This commit is contained in:
Michael Quigley 2024-11-22 14:12:27 -05:00
parent 67ac8416dd
commit 8ed6b91a79
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui100/package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@mui/icons-material": "^6.1.8",
"@mui/material": "^6.1.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
@ -1136,6 +1137,32 @@
"url": "https://opencollective.com/mui-org"
}
},
"node_modules/@mui/icons-material": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.8.tgz",
"integrity": "sha512-6frsXcf1TcJKWevWwRup6V4L8lzI33cbHcAjT83YLgKw0vYRZKY0kjMI9fhrJZdRWXgFFgKKvEv3GjoxbqFF7A==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.26.0"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
},
"peerDependencies": {
"@mui/material": "^6.1.8",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@mui/material": {
"version": "6.1.8",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.8.tgz",

1
ui100/package.json
View File

@ -12,6 +12,7 @@
"dependencies": {
"@emotion/react": "^11.13.5",
"@emotion/styled": "^11.13.5",
"@mui/icons-material": "^6.1.8",
"@mui/material": "^6.1.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",

6
ui100/src/ApiConsole.tsx
View File

@ -2,7 +2,8 @@ import {useEffect, useState} from "react";
import {Configuration, MetadataApi} from "./api";
import buildVisualizerGraph from "./model/visualizer.ts";
import {GraphCanvas} from "reagraph";
import {Box, Grid, Grid2} from "@mui/material";
import {Box} from "@mui/material";
import NavBar from "./NavBar.tsx";
const ApiConsole = () => {
const [version, setVersion] = useState("no version set");
@ -48,8 +49,7 @@ const ApiConsole = () => {
return (
<div>
<h1>zrok</h1>
<h2>{version}</h2>
<NavBar version={version} />
<Box>
<div style={{position: "relative", width: "100%", height: "500px"}}>
<GraphCanvas nodes={nodes} edges={edges}/>

25
ui100/src/NavBar.tsx Normal file
View File

@ -0,0 +1,25 @@
import {AppBar, Box, IconButton, Toolbar, Typography} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
interface NavBarProps {
version: string;
}
const NavBar = ({ version }: NavBarProps) => {
return (
<Box ssx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
<MenuIcon />
</IconButton>
<Typography variant="h6" sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "none", md: "block" }}>
zrok { version !== "" ? " | " + version : ""}
</Typography>
</Toolbar>
</AppBar>
</Box>
);
}
export default NavBar;