extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-07 08:44:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

explorer (visualizer) updates to include overlaid icons; updated react-force-graph (#234)

Browse Source
This commit is contained in:
Michael Quigley 2023-05-04 14:44:26 -04:00
parent 2c1f5b3cd6
commit 2da4f58f81
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
5 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/package-lock.json generated
View File

@ -21,7 +21,7 @@
"react-bootstrap": "^2.7.0",
"react-data-table-component": "^7.5.2",
"react-dom": "^18.2.0",
"react-force-graph": "^1.41.20",
"react-force-graph": "^1.43.0",
"react-router-dom": "^6.4.0",
"react-sizeme": "^3.0.2",
"react-sparklines": "^1.7.0",
@ -16162,16 +16162,19 @@
"dev": true
},
"node_modules/react-force-graph": {
"version": "1.41.20",
"resolved": "https://registry.npmjs.org/react-force-graph/-/react-force-graph-1.41.20.tgz",
"integrity": "sha512-PdhbYTdvciKJLv2tePTHY+fTzrLEhfcji6/lijPc9GVQfJOLofssAYz+HgcWCKCRj1CIT8M/J7FICXX3ALXpbw==",
"version": "1.43.0",
"resolved": "https://registry.npmjs.org/react-force-graph/-/react-force-graph-1.43.0.tgz",
"integrity": "sha512-g59ZWGrR6hkokY8RMO6FQHbltaIZ3+AGf9mrQs+s1+J26Sc2Wc6aro4cLW8PTHMIHgX/zml44yp60gRbzdFSMw==",
"dependencies": {
"3d-force-graph": "^1.70",
"3d-force-graph-ar": "^1.7",
"3d-force-graph-vr": "^2.0",
"force-graph": "^1.42",
"prop-types": "^15.8",
"react-kapsule": "^2.2"
"3d-force-graph": "1",
"3d-force-graph-ar": "1",
"3d-force-graph-vr": "2",
"force-graph": "1",
"prop-types": "15",
"react-kapsule": "2"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"react": "*"
@ -18018,9 +18021,9 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
},
"node_modules/three": {
"version": "0.149.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.149.0.tgz",
"integrity": "sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ=="
"version": "0.152.2",
"resolved": "https://registry.npmjs.org/three/-/three-0.152.2.tgz",
"integrity": "sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw=="
},
"node_modules/three-bmfont-text": {
"version": "2.4.0",
@ -31290,16 +31293,16 @@
"dev": true
},
"react-force-graph": {
"version": "1.41.20",
"resolved": "https://registry.npmjs.org/react-force-graph/-/react-force-graph-1.41.20.tgz",
"integrity": "sha512-PdhbYTdvciKJLv2tePTHY+fTzrLEhfcji6/lijPc9GVQfJOLofssAYz+HgcWCKCRj1CIT8M/J7FICXX3ALXpbw==",
"version": "1.43.0",
"resolved": "https://registry.npmjs.org/react-force-graph/-/react-force-graph-1.43.0.tgz",
"integrity": "sha512-g59ZWGrR6hkokY8RMO6FQHbltaIZ3+AGf9mrQs+s1+J26Sc2Wc6aro4cLW8PTHMIHgX/zml44yp60gRbzdFSMw==",
"requires": {
"3d-force-graph": "^1.70",
"3d-force-graph-ar": "^1.7",
"3d-force-graph-vr": "^2.0",
"force-graph": "^1.42",
"prop-types": "^15.8",
"react-kapsule": "^2.2"
"3d-force-graph": "1",
"3d-force-graph-ar": "1",
"3d-force-graph-vr": "2",
"force-graph": "1",
"prop-types": "15",
"react-kapsule": "2"
}
},
"react-is": {
@ -32658,9 +32661,9 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
},
"three": {
"version": "0.149.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.149.0.tgz",
"integrity": "sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ=="
"version": "0.152.2",
"resolved": "https://registry.npmjs.org/three/-/three-0.152.2.tgz",
"integrity": "sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw=="
},
"three-bmfont-text": {
"version": "git+ssh://git@github.com/dmarcos/three-bmfont-text.git#21d017046216e318362c48abd1a48bddfb6e0733",

2
ui/package.json
View File

@ -16,7 +16,7 @@
"react-bootstrap": "^2.7.0",
"react-data-table-component": "^7.5.2",
"react-dom": "^18.2.0",
"react-force-graph": "^1.41.20",
"react-force-graph": "^1.43.0",
"react-router-dom": "^6.4.0",
"react-sizeme": "^3.0.2",
"react-sparklines": "^1.7.0",

4
ui/src/console/detail/account/AccountDetail.js
View File

@ -1,4 +1,4 @@
import {mdiCardAccountDetails} from "@mdi/js";
import {mdiAccountBox} from "@mdi/js";
import Icon from "@mdi/react";
import PropertyTable from "../../PropertyTable";
import {Tab, Tabs} from "react-bootstrap";
@ -11,7 +11,7 @@ const AccountDetail = (props) => {
return (
<div>
<h2><Icon path={mdiCardAccountDetails} size={2} />{" "}{props.user.email}</h2>
<h2><Icon path={mdiAccountBox} size={2} />{" "}{props.user.email}</h2>
<Tabs defaultActiveKey={"detail"}>
<Tab eventKey={"detail"} title={"Detail"}>
<PropertyTable object={props.user} custom={customProperties}/>

26
ui/src/console/visualizer/Network.js
View File

@ -3,6 +3,11 @@ import {useEffect, useRef} from "react";
import {ForceGraph2D} from "react-force-graph";
import * as d3 from "d3-force-3d";
import {roundRect} from "./draw";
import {mdiShareVariant, mdiConsoleNetwork, mdiAccountBox} from "@mdi/js";
const accountIcon = new Path2D(mdiAccountBox);
const environmentIcon = new Path2D(mdiConsoleNetwork);
const shareIcon = new Path2D(mdiShareVariant);
const Network = (props) => {
const targetRef = useRef();
@ -29,6 +34,27 @@ const Network = (props) => {
roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
ctx.fill();
const nodeIcon = new Path2D();
let xform = new DOMMatrix();
xform.translateSelf(node.x - (nodeWidth / 2) - 6, node.y - 13);
xform.scaleSelf(0.5, 0.5);
switch(node.type) {
case "share":
nodeIcon.addPath(shareIcon, xform);
break;
case "environment":
nodeIcon.addPath(environmentIcon, xform);
break;
case "account":
nodeIcon.addPath(accountIcon, xform);
break;
}
ctx.fill(nodeIcon);
ctx.strokeStyle = "black";
ctx.lineWidth = 0.5;
ctx.stroke(nodeIcon);
ctx.fillStyle = textColor;
ctx.fillText(node.label, node.x, node.y);
}

1
ui/src/console/visualizer/graph.js
View File

@ -55,6 +55,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
type: "share",
val: 50
};
console.log('share', shrNode.label);
newGraph.nodes.push(shrNode);
newGraph.links.push({
target: envNode.id,