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

roughed in all the side panel types and the necessary responsive layout tweaks (#804)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-17 16:25:16 -05:00
parent 36383cc17a
commit 8fbd40b7d9
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
7 changed files with 138 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui100/src/AccessPanel.tsx Normal file
View File

@ -0,0 +1,24 @@
import {Node} from "@xyflow/react";
import {Grid2, Typography} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan";
interface AccessPanelProps {
access: Node;
}
const AccessPanel = ({ access }: AccessPanelProps) => {
return (
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><AccessIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(access.data.label)}</Grid2>
</Grid2>
</Grid2>
</Grid2>
</Typography>
);
}
export default AccessPanel;

0
ui100/AccountNode.tsx → ui100/src/AccountNode.tsx
View File

24
ui100/src/AccountPanel.tsx Normal file
View File

@ -0,0 +1,24 @@
import {Node} from "@xyflow/react";
import {Grid2, Typography} from "@mui/material";
import AccountIcon from "@mui/icons-material/Person4";
interface AccountPanelProps {
account: Node;
}
const AccountPanel = ({ account }: AccountPanelProps) => {
return (
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
</Grid2>
</Grid2>
</Grid2>
</Typography>
);
}
export default AccountPanel;

46
ui100/src/ApiConsole.tsx
View File

@ -1,11 +1,15 @@
import {useEffect, useRef, useState} from "react";
import {Configuration, MetadataApi} from "./api";
import {mergeVisualOverview, nodesEqual, VisualOverview} from "./model/visualizer.ts";
import {Box} from "@mui/material";
import {Grid2} from "@mui/material";
import NavBar from "./NavBar.tsx";
import {User} from "./model/user.ts";
import Visualizer from "./Visualizer.tsx";
import {Node} from "@xyflow/react";
import AccountPanel from "./AccountPanel.tsx";
import EnvironmentPanel from "./EnvironmentPanel.tsx";
import SharePanel from "./SharePanel.tsx";
import AccessPanel from "./AccessPanel.tsx";
interface ApiConsoleProps {
user: User;
@ -16,6 +20,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
const [version, setVersion] = useState("no version set");
const [overview, setOverview] = useState(new VisualOverview());
const [selectedNode, setSelectedNode] = useState(null as Node);
const [sidePanel, setSidePanel] = useState(<></>);
const oldVov = useRef<VisualOverview>(overview);
useEffect(() => {
@ -64,16 +69,41 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
}
}, []);
useEffect(() => {
if(selectedNode) {
switch(selectedNode.type) {
case "account":
setSidePanel(<AccountPanel account={selectedNode} />);
break;
case "environment":
setSidePanel(<EnvironmentPanel environment={selectedNode} />);
break;
case "share":
setSidePanel(<SharePanel share={selectedNode} />);
break;
case "access":
setSidePanel(<AccessPanel access={selectedNode} />);
break;
}
} else {
setSidePanel(<></>);
}
}, [selectedNode]);
return (
<div>
<NavBar logout={logout} />
<Box>
<Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
<div>
<h1>Hello</h1>
<h2><pre>{JSON.stringify(selectedNode)}</pre></h2>
</div>
</Box>
<Grid2 container spacing={2} columns={{ xs: 4, sm: 10, md: 12 }}>
<Grid2 size="grow">
<Visualizer vov={overview} onSelectionChanged={setSelectedNode} />
</Grid2>
<Grid2 size={4}>
{sidePanel}
</Grid2>
</Grid2>
</div>
);
}

24
ui100/src/EnvironmentPanel.tsx Normal file
View File

@ -0,0 +1,24 @@
import {Node} from "@xyflow/react";
import {Grid2, Typography} from "@mui/material";
import EnvironmentIcon from "@mui/icons-material/Computer";
interface EnvironmentPanelProps {
environment: Node;
}
const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
return (
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
</Grid2>
</Grid2>
</Grid2>
</Typography>
);
}
export default EnvironmentPanel;

24
ui100/src/SharePanel.tsx Normal file
View File

@ -0,0 +1,24 @@
import {Node} from "@xyflow/react";
import {Card, Grid2, Typography} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
interface SharePanelProps {
share: Node;
}
const SharePanel = ({ share }: SharePanelProps) => {
return (
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
</Grid2>
</Grid2>
</Grid2>
</Typography>
);
}
export default SharePanel;

7
ui100/src/Visualizer.tsx
View File

@ -15,8 +15,9 @@ import {useEffect} from "react";
import {stratify, tree} from "d3-hierarchy";
import ShareNode from "./ShareNode.tsx";
import EnvironmentNode from "./EnvironmentNode.tsx";
import AccountNode from "../AccountNode.tsx";
import AccountNode from "./AccountNode.tsx";
import AccessNode from "./AccessNode.tsx";
import {Box} from "@mui/material";
interface VisualizerProps {
vov: VisualOverview;
@ -89,10 +90,10 @@ const Visualizer = ({ vov, onSelectionChanged }: VisualizerProps) => {
export default ({ vov, onSelectionChanged }: VisualizerProps) => {
return (
<div style={{ height: "600px" }}>
<Box sx={{ width: "100%" }} height={{ xs: 400, sm: 600, md: 800 }}>
<ReactFlowProvider>
<Visualizer vov={vov} onSelectionChanged={onSelectionChanged} />
</ReactFlowProvider>
</div>
</Box>
);
}