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

first round of custom nodes for visualizer (#799)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-05 15:54:12 -05:00
parent 9f2a335ac5
commit 8582077990
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
5 changed files with 67 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui100/AccountNode.tsx Normal file
View File

@ -0,0 +1,17 @@
import {Handle, Position} from "@xyflow/react";
import {Grid2} from "@mui/material";
import AccountIcon from "@mui/icons-material/Person4";
const AccountNode = ({ data }) => {
return (
<>
<Handle type="source" position={Position.Bottom} />
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>
</Grid2>
</>
);
}
export default AccountNode;

22
ui100/src/EnvironmentNode.tsx Normal file
View File

@ -0,0 +1,22 @@
import {Handle, Position} from "@xyflow/react";
import {Grid2} from "@mui/material";
import EnvironmentIcon from "@mui/icons-material/Computer";
const EnvironmentNode = ({ data }) => {
let shareHandle = <Handle type="source" position={Position.Bottom} />;
if(data.empty) {
shareHandle = <></>;
}
return (
<>
<Handle type="target" position={Position.Top} />
{shareHandle}
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>
</Grid2>
</>
);
}
export default EnvironmentNode;

17
ui100/src/ShareNode.tsx Normal file
View File

@ -0,0 +1,17 @@
import {Handle, Position} from "@xyflow/react";
import {Grid2} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
const ShareNode = ({ data }) => {
return (
<>
<Handle type="target" position={Position.Top} />
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>
</Grid2>
</>
);
}
export default ShareNode;

6
ui100/src/Visualizer.tsx
View File

@ -4,11 +4,16 @@ import {Background, Controls, ReactFlow, ReactFlowProvider, useEdgesState, useNo
import {VisualOverview} from "./model/visualizer.ts";
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";
interface VisualizerProps {
overview: VisualOverview;
}
const nodeTypes = { account: AccountNode, environment: EnvironmentNode, share: ShareNode };
const Visualizer = ({ overview }: VisualizerProps) => {
const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@ -43,6 +48,7 @@ const Visualizer = ({ overview }: VisualizerProps) => {
return (
<ReactFlow
nodeTypes={nodeTypes}
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}

11
ui100/src/model/visualizer.ts
View File

@ -1,6 +1,5 @@
import {Overview} from "../api";
import {Edge, Node} from "@xyflow/react";
import ShareIcon from "@mui/icons-material/Share";
export class VisualOverview {
nodes: Node[];
@ -10,7 +9,7 @@ export class VisualOverview {
const buildVisualizerGraph = (overview: Overview): VisualOverview => {
let out = new VisualOverview();
out.nodes = [
{ id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" }, type: "input" }
{ id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" }, type: "account" }
];
out.edges = [];
@ -19,8 +18,8 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
let envNode = {
id: env.environment.zId,
position: { x: 0, y: 0 },
data: { label: env.environment?.description! },
type: "output",
data: { label: env.environment?.description!, empty: true },
type: "environment",
}
out.nodes.push(envNode);
out.edges.push({
@ -29,13 +28,13 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
target: env.environment.zId
});
if(env.shares) {
envNode.type = "default";
envNode.data.empty = false;
env.shares.forEach(shr => {
out.nodes.push({
id: shr.token!,
position: { x: 0, y: 0 },
data: { label: shr.token! },
type: "output",
type: "share",
});
out.edges.push({
id: env.environment?.zId + "-" + shr.token!,