diff --git a/ui/src/console/Console.js b/ui/src/console/Console.js
index 8679de1b..6282d891 100644
--- a/ui/src/console/Console.js
+++ b/ui/src/console/Console.js
@@ -60,7 +60,7 @@ const Console = (props) => {
-
+
diff --git a/ui/src/console/visualizer/Network.js b/ui/src/console/visualizer/Network.js
index 417fae47..768b1119 100644
--- a/ui/src/console/visualizer/Network.js
+++ b/ui/src/console/visualizer/Network.js
@@ -2,6 +2,7 @@ import {withSize} from "react-sizeme";
import {useEffect, useRef} from "react";
import {ForceGraph2D} from "react-force-graph";
import * as d3 from "d3-force-3d";
+import {roundRect} from "./draw";
const Network = (props) => {
const targetRef = useRef();
@@ -11,15 +12,19 @@ const Network = (props) => {
useEffect(() => {
const fg = targetRef.current;
- fg.d3Force('collide', d3.forceCollide().radius(30));
+ fg.d3Force('collide', d3.forceCollide().radius(35));
}, []);
const paintNode = (node, ctx) => {
- let nodeColor = "#777";
+ let nodeColor = "#555";
let textColor = "white";
switch(node.type) {
+ case "environment":
+ nodeColor = "#777";
+ textColor = "black";
+ break;
case "service":
- nodeColor = "#7e67e2";
+ nodeColor = "#291A66";
break;
}
@@ -27,10 +32,17 @@ const Network = (props) => {
ctx.textAlign = "center";
ctx.font = "6px 'JetBrains Mono'";
let extents = ctx.measureText(node.label);
- let nodeWidth = extents.width + 5;
+ let nodeWidth = extents.width + 10;
ctx.fillStyle = nodeColor;
- ctx.fillRect(node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14);
+ roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
+ ctx.fill();
+
+ switch(node.type) {
+ case "service":
+ ctx.strokeStyle = "#433482";
+ ctx.stroke();
+ }
ctx.fillStyle = textColor;
ctx.fillText(node.label, node.x, node.y);
@@ -51,7 +63,9 @@ const Network = (props) => {
linkWidth={1.5}
nodeCanvasObject={paintNode}
backgroundColor={"#3b2693"}
- cooldownTicks={100}
+ cooldownTicks={300}
+ d3VelocityDecay={0.3}
+ d3AlphaDecay={0.0128}
/>
)
}
diff --git a/ui/src/console/visualizer/Visualizer.js b/ui/src/console/visualizer/Visualizer.js
index 2181aa86..c2914555 100644
--- a/ui/src/console/visualizer/Visualizer.js
+++ b/ui/src/console/visualizer/Visualizer.js
@@ -7,7 +7,7 @@ const Visualizer = (props) => {
const [networkGraph, setNetworkGraph] = useState({nodes: [], links: []});
useEffect(() => {
- setNetworkGraph(mergeGraph(networkGraph, props.overview));
+ setNetworkGraph(mergeGraph(networkGraph, props.user, props.overview));
}, [props]);
// fgRef to access force graph controls from this component
diff --git a/ui/src/console/visualizer/draw.js b/ui/src/console/visualizer/draw.js
new file mode 100644
index 00000000..5a7d80b1
--- /dev/null
+++ b/ui/src/console/visualizer/draw.js
@@ -0,0 +1,12 @@
+export const roundRect = (ctx, x, y, w, h, r) => {
+ if (w < 2 * r) r = w / 2;
+ if (h < 2 * r) r = h / 2;
+ ctx.beginPath();
+ ctx.moveTo(x+r, y);
+ ctx.arcTo(x+w, y, x+w, y+h, r);
+ ctx.arcTo(x+w, y+h, x, y+h, r);
+ ctx.arcTo(x, y+h, x, y, r);
+ ctx.arcTo(x, y, x+w, y, r);
+ ctx.closePath();
+ return this;
+}
\ No newline at end of file
diff --git a/ui/src/console/visualizer/graph.js b/ui/src/console/visualizer/graph.js
index 74f1a88f..5f9fa1ca 100644
--- a/ui/src/console/visualizer/graph.js
+++ b/ui/src/console/visualizer/graph.js
@@ -15,11 +15,19 @@ const nodesEqual = (a, b) => {
return a.every((e, i) => e.id === b[i].id);
}
-export const mergeGraph = (oldGraph, newOverview) => {
+export const mergeGraph = (oldGraph, user, newOverview) => {
let newGraph = {
nodes: [],
links: []
}
+
+ let accountNode = {
+ id: user.token,
+ label: user.email,
+ type: "account"
+ }
+ newGraph.nodes.push(accountNode);
+
newOverview.forEach(env => {
let envNode = {
id: env.environment.zId,
@@ -27,6 +35,11 @@ export const mergeGraph = (oldGraph, newOverview) => {
type: "environment"
};
newGraph.nodes.push(envNode);
+ newGraph.links.push({
+ target: accountNode.id,
+ source: envNode.id,
+ color: "#777"
+ });
if(env.services) {
env.services.forEach(svc => {
let svcLabel = svc.token;