extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-03-13 15:08:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

include ui mode toggle in navbar (#819)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-14 13:47:42 -05:00
parent 5da0c8c807
commit 76e1f2d62e
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui100/src/ApiConsole.tsx
View File

@ -8,7 +8,7 @@ import AccountPanel from "./AccountPanel.tsx";
import EnvironmentPanel from "./EnvironmentPanel.tsx";
import SharePanel from "./SharePanel.tsx";
import AccessPanel from "./AccessPanel.tsx";
import useStore, {Sparkdata} from "./model/store.ts";
import useStore from "./model/store.ts";
import TabularView from "./TabularView.tsx";
import {Node} from "@xyflow/react";
@ -22,7 +22,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
const updateGraph = useStore((state) => state.updateGraph);
const oldGraph = useRef<Graph>(graph);
const sparkdata = useStore((state) => state.sparkdata);
const sparkdataRef = useRef<Map<string, Sparkdata>>();
const sparkdataRef = useRef<Map<string, Number[]>>();
sparkdataRef.current = sparkdata;
const updateSparkdata = useStore((state) => state.updateSparkdata);
const nodes = useStore((state) => state.nodes);
@ -33,12 +33,14 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
const selectedNode = useStore((state) => state.selectedNode);
const [mainPanel, setMainPanel] = useState(<Visualizer />);
const [sidePanel, setSidePanel] = useState<JSX>(null);
const [visualizerEnabled, setVisualizerEnabled] = useState<boolean>(true);
let showVisualizer = true;
let visualizer = true;
const handleKeyPress = useCallback((event) => {
if(event.ctrlKey === true && event.key === '`') {
showVisualizer = !showVisualizer;
if(showVisualizer) {
setVisualizerEnabled(!visualizer);
visualizer = !visualizer;
if(visualizer) {
setMainPanel(<Visualizer />);
} else {
setMainPanel(<TabularView />);
@ -46,6 +48,15 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
}
}, []);
useEffect(() => {
visualizer = visualizerEnabled;
if(visualizer) {
setMainPanel(<Visualizer />);
} else {
setMainPanel(<TabularView />);
}
}, [visualizerEnabled]);
useEffect(() => {
document.addEventListener('keydown', handleKeyPress);
return () => {
@ -176,7 +187,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
return (
<div>
<NavBar logout={logout} />
<NavBar logout={logout} visualizer={visualizerEnabled} toggleMode={setVisualizerEnabled} />
<Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
<Grid2 size="grow">
{mainPanel}

25
ui100/src/NavBar.tsx
View File

@ -1,20 +1,24 @@
import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import {AppBar, Box, Button, Grid2, Toolbar, Tooltip, Typography} from "@mui/material";
import LogoutIcon from "@mui/icons-material/Logout";
import VisualizerIcon from "@mui/icons-material/Hub";
import TabularIcon from "@mui/icons-material/TableRows";
import zroket from "./assets/zrok-1.0.0-rocket-green.svg";
interface NavBarProps {
logout: () => void;
visualizer: boolean;
toggleMode: (boolean) => void;
}
const NavBar = ({ logout }: NavBarProps) => {
const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
const handleClick = () => {
toggleMode(!visualizer);
}
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 }}>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="left">
@ -27,7 +31,14 @@ const NavBar = ({ logout }: NavBarProps) => {
</Typography>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="right" size="grow">
<Button color="inherit" onClick={logout}><LogoutIcon /></Button>
<Tooltip title="Toggle Interface Mode (Ctrl-`)">
<Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>
</Tooltip>
</Grid2>
<Grid2 display="flex" justifyContent="right">
<Tooltip title="Logout">
<Button color="inherit" onClick={logout}><LogoutIcon /></Button>
</Tooltip>
</Grid2>
</Grid2>
</Toolbar>