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

working access->share edges (#799)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-22 14:18:11 -05:00
parent 353b3aa73c
commit 45518990bd
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
6 changed files with 88 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui100/src/AccessEdge.tsx Normal file
View File

@ -0,0 +1,10 @@
import {BaseEdge, EdgeProps} from "@xyflow/react";
const AccessEdge = (props: EdgeProps) => {
const { sourceX, sourceY, targetX, targetY, id, markerEnd } = props;
const edgePath = `M ${sourceX} ${sourceY} L ${sourceX} ${sourceY + 20} L ${targetX} ${targetY + 20} L ${targetX} ${targetY}`;
return <BaseEdge path={edgePath} markerEnd={markerEnd} />;
}
export default AccessEdge;

8
ui100/src/AccessNode.tsx
View File

@ -1,12 +1,16 @@
import {Handle, Position} from "@xyflow/react";
import {Handle, Position, useUpdateNodeInternals} from "@xyflow/react";
import {Grid2} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan";
const AccessNode = ({ data }) => {
const updateNodeInternals = useUpdateNodeInternals();
let shareHandle = <></>;
if(data.ownedShare) {
shareHandle = <Handle type="source" position={Position.Bottom} />;
shareHandle = <Handle type="source" position={Position.Bottom} id="share" />;
updateNodeInternals(data.id);
}
return (
<>
<Handle type="target" position={Position.Top} />

49
ui100/src/AccessPanel.tsx
View File

@ -1,12 +1,49 @@
import {Node} from "@xyflow/react";
import {Grid2, Typography} from "@mui/material";
import {Button, Grid2, Tooltip, Typography} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan";
import useStore from "./model/store.ts";
import {useEffect, useState} from "react";
import {Configuration, Frontend, MetadataApi} from "./api";
import DeleteIcon from "@mui/icons-material/Delete";
import PropertyTable from "./PropertyTable.tsx";
interface AccessPanelProps {
access: Node;
}
const AccessPanel = ({ access }: AccessPanelProps) => {
const user = useStore((state) => state.user);
const [detail, setDetail] = useState<Frontend>(null);
useEffect(() => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let metadataApi = new MetadataApi(cfg);
metadataApi.getFrontendDetail({feId: access.data.feId as number})
.then(d => {
delete d.id;
setDetail(d);
})
.catch(e => {
console.log("AccessPanel", e);
})
}, [access]);
const customProperties = {
createdAt: row => new Date(row.value).toLocaleString(),
updatedAt: row => new Date(row.value).toLocaleString()
}
const labels = {
createdAt: "Created",
shrToken: "Share Token",
token: "Frontend Token",
updatedAt: "Updated",
}
return (
<Typography component="div">
<Grid2 container spacing={2}>
@ -15,6 +52,16 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
<Grid2 display="flex"><AccessIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(access.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Release Access">
<Button variant="contained" color="error"><DeleteIcon /></Button>
</Tooltip>
</Grid2>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex">
<PropertyTable object={detail} custom={customProperties} labels={labels} />
</Grid2>
</Grid2>
</Grid2>
</Grid2>
</Typography>

6
ui100/src/ShareNode.tsx
View File

@ -1,4 +1,4 @@
import {Handle, Position} from "@xyflow/react";
import {Handle, Position, useUpdateNodeInternals} from "@xyflow/react";
import {Grid2} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
import useStore from "./model/store.ts";
@ -6,10 +6,12 @@ import {SparkLineChart} from "@mui/x-charts";
const ShareNode = ({ data }) => {
const sparkdata = useStore((state) => state.sparkdata);
const updateNodeInternals = useUpdateNodeInternals();
let shareHandle = <></>;
if(data.accessed) {
shareHandle = <Handle type="target" position={Position.Bottom} id="access"/>;
shareHandle = <Handle type="target" position={Position.Bottom} id="access" />;
updateNodeInternals(data.id);
}
const hiddenSparkline = <></>;

6
ui100/src/Visualizer.tsx
View File

@ -17,6 +17,11 @@ import AccountNode from "./AccountNode.tsx";
import AccessNode from "./AccessNode.tsx";
import {Box} from "@mui/material";
import useStore from "./model/store.ts";
import AccessEdge from "./AccessEdge.tsx";
const edgeTypes = {
access: AccessEdge
};
const nodeTypes = {
access: AccessNode,
@ -65,6 +70,7 @@ const Visualizer = () => {
return (
<ReactFlow
edgeTypes={edgeTypes}
nodeTypes={nodeTypes}
nodes={nodes}
onNodesChange={onNodesChange}

22
ui100/src/model/graph.ts
View File

@ -43,7 +43,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
id: accountNode.id + "-" + envNode.id,
source: accountNode.id!,
target: envNode.id!,
type: "smoothstep"
type: "straight"
});
if(env.shares) {
envNode.data.empty = false;
@ -70,7 +70,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
id: envNode.id + "-" + shrNode.id,
source: envNode.id!,
target: shrNode.id!,
type: "smoothstep"
type: "straight"
});
});
}
@ -93,7 +93,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
id: envNode.id + "-" + feNode.id,
source: envNode.id!,
target: feNode.id!,
type: "smoothstep"
type: "straight"
});
});
}
@ -101,12 +101,18 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
allFrontends.forEach(fe => {
let target = allShares[fe.data.target];
if(target) {
newVov.edges.push({
target.data.accessed = true;
fe.data.ownedShare = true;
let edge: Edge = {
id: target.id + "-" + fe.id,
source: target.id!,
target: fe.id!,
type: "smoothstep",
});
source: fe.id!,
sourceHandle: "share",
target: target.id!,
targetHandle: "access",
type: "access",
animated: true
}
newVov.edges.push(edge);
}
});
}