{{ t("linkClientMetrics") }}
-
+
@@ -110,7 +110,7 @@ limitations under the License. -->
{{ t("nodeMetrics") }}
-
+
@@ -454,6 +454,7 @@ limitations under the License. -->
.title {
margin-bottom: 0;
+ color: #666;
}
.label {
diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts
new file mode 100644
index 00000000..0ac2e567
--- /dev/null
+++ b/src/views/dashboard/related/topology/components/utils/layout.ts
@@ -0,0 +1,122 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as d3 from "d3";
+import type { Node, Call } from "@/types/topology";
+
+export function layout(levels: Node[][], calls: Call[], radius: number) {
+ // precompute level depth
+ levels.forEach((l: Node[], i: number) => l.forEach((n: any) => (n.level = i)));
+
+ const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
+ // layout
+ const padding = 30;
+ const node_height = 120;
+ const node_width = 100;
+ const bundle_width = 14;
+ const metro_d = 4;
+ for (const n of nodes) {
+ n.height = 5 * metro_d;
+ }
+
+ let x_offset = padding;
+ let y_offset = 0;
+ for (const level of levels) {
+ y_offset = 0;
+ x_offset += 5 * bundle_width;
+ for (const l of level) {
+ const n: any = l;
+ for (const call of calls) {
+ if (call.source === n.id) {
+ call.sourceObj = n;
+ }
+ if (call.target === n.id) {
+ call.targetObj = n;
+ }
+ }
+ n.x = n.level * node_width + x_offset;
+ n.y = node_height + y_offset + n.height / 2;
+ y_offset += node_height + n.height;
+ }
+ }
+ const layout = {
+ width: d3.max(nodes as any, (n: { x: number }) => n.x) || 0 + node_width + 2 * padding,
+ height: d3.max(nodes as any, (n: { y: number }) => n.y) || 0 + node_height / 2 + 2 * padding,
+ };
+
+ return { nodes, layout, calls: computeCallPos(calls, radius) };
+}
+
+export function computeCallPos(calls: Call[], radius: number) {
+ for (const [index, call] of calls.entries()) {
+ const centrePoints = [call.sourceObj.x, call.sourceObj.y, call.targetObj.x, call.targetObj.y];
+ for (const [idx, link] of calls.entries()) {
+ if (
+ index < idx &&
+ call.id !== link.id &&
+ call.sourceObj.x === link.targetObj.x &&
+ call.sourceObj.y === link.targetObj.y &&
+ call.targetObj.x === link.sourceObj.x &&
+ call.targetObj.y === link.sourceObj.y
+ ) {
+ if (call.targetObj.y === call.sourceObj.y) {
+ centrePoints[1] = centrePoints[1] - 8;
+ centrePoints[3] = centrePoints[3] - 8;
+ } else if (call.targetObj.x === call.sourceObj.x) {
+ centrePoints[0] = centrePoints[0] - 8;
+ centrePoints[2] = centrePoints[2] - 8;
+ } else {
+ centrePoints[1] = centrePoints[1] + 6;
+ centrePoints[3] = centrePoints[3] + 6;
+ centrePoints[0] = centrePoints[0] - 6;
+ centrePoints[2] = centrePoints[2] - 6;
+ }
+ }
+ }
+ const pos: { x: number; y: number }[] = circleIntersection(
+ centrePoints[0],
+ centrePoints[1],
+ radius,
+ centrePoints[2],
+ centrePoints[3],
+ radius,
+ );
+ call.sourceX = pos[0].x;
+ call.sourceY = pos[0].y;
+ call.targetX = pos[1].x;
+ call.targetY = pos[1].y;
+ }
+ return calls;
+}
+
+export function circleIntersection(ax: number, ay: number, ar: number, bx: number, by: number, br: number) {
+ const dab = Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
+
+ const dfx = (ar * Math.abs(ax - bx)) / dab;
+ const dfy = (ar * Math.abs(ay - by)) / dab;
+ const fx = bx > ax ? ax + dfx : ax - dfx;
+ const fy = ay > by ? ay - dfy : ay + dfy;
+
+ const dgx = (br * Math.abs(ax - bx)) / dab;
+ const dgy = (br * Math.abs(ay - by)) / dab;
+ const gx = bx > ax ? bx - dgx : bx + dgx;
+ const gy = ay > by ? by + dgy : by - dgy;
+
+ return [
+ { x: fx, y: fy },
+ { x: gx, y: gy },
+ ];
+}
diff --git a/src/views/dashboard/related/topology/components/utils/linkElement.ts b/src/views/dashboard/related/topology/components/utils/linkElement.ts
deleted file mode 100644
index efc3c388..00000000
--- a/src/views/dashboard/related/topology/components/utils/linkElement.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export const linkElement = (graph: any) => {
- const linkEnter = graph
- .append("path")
- .attr("class", "topo-line")
- .attr("marker-end", "url(#arrow)")
- .attr("stroke", "#217EF25f");
- return linkEnter;
-};
-export const anchorElement = (graph: any, funcs: any, tip: any) => {
- const linkEnter = graph
- .append("circle")
- .attr("class", "topo-line-anchor")
- .attr("r", 5)
- .attr("fill", "#217EF25f")
- .on("mouseover", function (event: unknown, d: unknown) {
- tip.html(funcs.tipHtml).show(d, this);
- })
- .on("mouseout", function () {
- tip.hide(this);
- })
- .on("click", (event: unknown, d: unknown) => {
- funcs.handleLinkClick(event, d);
- });
- return linkEnter;
-};
-export const arrowMarker = (graph: any) => {
- const defs = graph.append("defs");
- const arrow = defs
- .append("marker")
- .attr("id", "arrow")
- .attr("class", "topo-line-arrow")
- .attr("markerUnits", "strokeWidth")
- .attr("markerWidth", "6")
- .attr("markerHeight", "6")
- .attr("viewBox", "0 0 12 12")
- .attr("refX", "5")
- .attr("refY", "6")
- .attr("orient", "auto");
- const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2";
-
- arrow.append("path").attr("d", arrowPath).attr("fill", "#217EF25f");
- return arrow;
-};
diff --git a/src/views/dashboard/related/topology/components/utils/nodeElement.ts b/src/views/dashboard/related/topology/components/utils/nodeElement.ts
deleted file mode 100644
index 6aefc1e9..00000000
--- a/src/views/dashboard/related/topology/components/utils/nodeElement.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import icons from "@/assets/img/icons";
-import type { Node } from "@/types/topology";
-
-icons["KAFKA-CONSUMER"] = icons.KAFKA;
-export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => {
- const nodeEnter = graph
- .append("g")
- .call(d3.drag().on("start", funcs.dragstart).on("drag", funcs.dragged).on("end", funcs.dragended))
- .on("mouseover", function (event: PointerEvent, d: Node) {
- tip.html(funcs.tipHtml).show(d, this);
- })
- .on("mouseout", function () {
- tip.hide(this);
- })
- .on("click", (event: PointerEvent, d: Node | any) => {
- event.stopPropagation();
- event.preventDefault();
- funcs.handleNodeClick(event, d);
- });
- nodeEnter
- .append("image")
- .attr("width", 49)
- .attr("height", 49)
- .attr("x", 2)
- .attr("y", 10)
- .attr("style", "cursor: move;")
- .attr("xlink:href", (d: { [key: string]: number }) => {
- if (!legend) {
- return icons.CUBE;
- }
- if (!legend.length) {
- return icons.CUBE;
- }
- let c = true;
- for (const l of legend) {
- if (l.condition === "<") {
- c = c && d[l.name] < Number(l.value);
- } else {
- c = c && d[l.name] > Number(l.value);
- }
- }
- return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
- });
- nodeEnter
- .append("image")
- .attr("width", 32)
- .attr("height", 32)
- .attr("x", 6)
- .attr("y", -10)
- .attr("style", "opacity: 0.5;")
- .attr("xlink:href", icons.LOCAL);
- nodeEnter
- .append("image")
- .attr("width", 18)
- .attr("height", 18)
- .attr("x", 13)
- .attr("y", -7)
- .attr("xlink:href", (d: { type: string }) =>
- !d.type || d.type === "N/A" ? icons.UNDEFINED : icons[d.type.toUpperCase().replace("-", "")],
- );
- nodeEnter
- .append("text")
- .attr("class", "topo-text")
- .attr("text-anchor", "middle")
- .attr("x", 22)
- .attr("y", 70)
- .text((d: { name: string }) => (d.name.length > 20 ? `${d.name.substring(0, 20)}...` : d.name));
- return nodeEnter;
-};
diff --git a/src/views/dashboard/related/topology/components/utils/simulation.ts b/src/views/dashboard/related/topology/components/utils/simulation.ts
deleted file mode 100644
index 926a93c0..00000000
--- a/src/views/dashboard/related/topology/components/utils/simulation.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export const simulationInit = (d3: any, nodes: any, links: any, ticked: any) => {
- const simulation = d3
- .forceSimulation(nodes)
- .force(
- "collide",
- d3.forceCollide().radius(() => 60),
- )
- .force("yPos", d3.forceY().strength(1))
- .force("xPos", d3.forceX().strength(1))
- .force("charge", d3.forceManyBody().strength(-520))
- .force(
- "link",
- d3.forceLink(links).id((d: { id: string }) => d.id),
- )
- .force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2 - 20))
- .on("tick", ticked)
- .stop();
- simulationSkip(d3, simulation, ticked);
- return simulation;
-};
-
-export const simulationSkip = (d3: any, simulation: any, ticked: any) => {
- d3.timeout(() => {
- const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
- for (let i = 0; i < n; i += 1) {
- simulation.tick();
- ticked();
- }
- });
-};