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

draw animated connections for accesses of owned/active shares (#799)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-06 14:22:43 -05:00
parent e7cc9e3374
commit 16ba28dedf
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui100/src/AccessNode.tsx
View File

@ -3,9 +3,14 @@ import {Grid2} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan";
const AccessNode = ({ data }) => {
let shareHandle = <></>;
if(data.ownedShare) {
shareHandle = <Handle type="source" position={Position.Bottom} />;
}
return (
<>
<Handle type="target" position={Position.Top} />
{shareHandle}
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><AccessIcon sx={{ fontSize: 15, mr: 0.5 }}/></Grid2>
<Grid2 display="flex">{data.label}</Grid2>

2
ui100/src/App.tsx
View File

@ -11,9 +11,7 @@ const App = () => {
const checkUser = () => {
const user = localStorage.getItem("user");
if (user) {
console.log(user);
setUser(JSON.parse(user));
console.log("reloaded user", user);
}
}
checkUser();

5
ui100/src/ShareNode.tsx
View File

@ -3,9 +3,14 @@ import {Grid2} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
const ShareNode = ({ data }) => {
let shareHandle = <></>;
if(data.accessed) {
shareHandle = <Handle type="target" position={Position.Bottom} id="access"/>;
}
return (
<>
<Handle type="target" position={Position.Top} />
{shareHandle}
<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>

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

@ -13,6 +13,9 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
];
out.edges = [];
let ownedShares: { [key: string]: Node } = {};
let ownedAccesses: { [key: string]: Node } = {};
overview.environments?.forEach(env => {
if(env.environment && env.environment.zId) {
let envNode = {
@ -27,15 +30,18 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
source: "0",
target: env.environment.zId
});
if(env.shares) {
envNode.data.empty = false;
env.shares.forEach(shr => {
out.nodes.push({
let shareNode = {
id: shr.token!,
position: { x: 0, y: 0 },
data: { label: shr.token! },
data: { label: shr.token!, accessed: false },
type: "share",
});
};
out.nodes.push(shareNode);
ownedShares[shr.token!] = shareNode;
out.edges.push({
id: env.environment?.zId + "-" + shr.token!,
source: env.environment?.zId!,
@ -46,21 +52,41 @@ const buildVisualizerGraph = (overview: Overview): VisualOverview => {
if(env.frontends) {
envNode.data.empty = false;
env.frontends.forEach(acc => {
out.nodes.push({
let accNode = {
id: acc.token!,
position: { x: 0, y: 0 },
data: { label: acc.token! },
data: { label: acc.token!, ownedShare: false, shrToken: acc.shrToken },
type: "access",
});
}
out.nodes.push(accNode);
out.edges.push({
id: env.environment?.zId + "-" + acc.token!,
source: env.environment?.zId!,
target: acc.token!
});
let ownedShare = ownedShares[acc.shrToken];
});
}
}
});
out.nodes.forEach(n => {
if(n.type == "access") {
let ownedShare = ownedShares[n.data.shrToken];
if(ownedShare) {
console.log("linking owned share", n)
n.data.ownedShare = true;
ownedShare.data.accessed = true;
out.edges.push({
id: n.id + "-" + n.data.shrToken,
source: n.id,
target: n.data.shrToken as string,
targetHandle: "access",
animated: true
});
}
}
})
return out;
}