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

tweaks; better 'VisualOverview' building (#799)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-04 20:53:00 -05:00
parent 3df2924b72
commit af5becb52e
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui100/src/Visualizer.tsx
View File

@ -51,7 +51,7 @@ const Visualizer = ({ overview }: VisualizerProps) => {
nodesDraggable={false} nodesDraggable={false}
> >
<Background/> <Background/>
<Controls /> <Controls position="bottom-right" orientation="horizontal" />
</ReactFlow> </ReactFlow>
); );
} }

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

@ -9,21 +9,24 @@ export class VisualOverview {
const buildVisualizerGraph = (overview: Overview): VisualOverview => { const buildVisualizerGraph = (overview: Overview): VisualOverview => {
let out = new VisualOverview(); let out = new VisualOverview();
out.nodes = [ out.nodes = [
{ id: "1", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" } } { id: "0", position: { x: 0, y: 0 }, data: { label: "michael@quigley.com" } }
]; ];
out.edges = []; out.edges = [];
overview.environments?.forEach((env, i) => { overview.environments?.forEach((env, i) => {
out.nodes.push({ if(env.environment && env.environment.zId) {
id: (i+2).toString(), out.nodes.push({
position: { x: 0, y: 0 }, id: env.environment.zId,
data: { label: env.environment?.description! }, position: { x: 0, y: 0 },
}); data: { label: env.environment?.description! },
out.edges.push({ });
id: "e" + (i+2) + "-1", out.edges.push({
source: "1", id: env.environment.zId + "-0",
target: (i+2).toString() source: "0",
}); target: env.environment.zId
});
}
}) })
console.log(out); console.log(out);

1
ui100/src/react-flow.css
View File

@ -3,6 +3,7 @@
font-size: 0.6em; font-size: 0.6em;
color: white; color: white;
border: 1px solid #241775; border: 1px solid #241775;
border-radius: 10px;
background-color: #241775; background-color: #241775;
text-color: white; text-color: white;
} }