github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 09:00:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

update topology

Browse Source
This commit is contained in:
Fine 2022-08-25 17:59:18 +08:00
parent 0250ff0e33
commit 5990b7f8f1
3 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts
View File

@ -53,6 +53,7 @@ export const linkElement = (graph: any) => {
export const anchorElement = (graph: any, funcs: any, tip: any) => { export const anchorElement = (graph: any, funcs: any, tip: any) => {
const linkEnter = graph const linkEnter = graph
.append("g") .append("g")
.attr("class", "topo-line-anchor")
.attr("style", "cursor: move;") .attr("style", "cursor: move;")
.on("mouseover", function (event: unknown, d: unknown) { .on("mouseover", function (event: unknown, d: unknown) {
tip.html(funcs.tipHtml).show(d, this); tip.html(funcs.tipHtml).show(d, this);

1
src/views/dashboard/related/network-profiling/components/Graph/nodeProcess.ts
View File

@ -20,6 +20,7 @@ import { Node } from "@/types/topology";
export default (d3: any, graph: any, funcs: any, tip: any) => { export default (d3: any, graph: any, funcs: any, tip: any) => {
const nodeEnter = graph const nodeEnter = graph
.append("g") .append("g")
.attr("class", "topo-node")
.call( .call(
d3 d3
.drag() .drag()

50
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -95,8 +95,8 @@ async function init() {
if (!networkProfilingStore.nodes.length) { if (!networkProfilingStore.nodes.length) {
return; return;
} }
drawGraph(); freshNodes();
createLayout(); useThrottleFn(resize, 500)();
} }
function drawGraph() { function drawGraph() {
@ -114,10 +114,22 @@ function drawGraph() {
.attr("class", "svg-graph") .attr("class", "svg-graph")
.attr("transform", `translate(${diff.value[0]}, ${diff.value[1]})`); .attr("transform", `translate(${diff.value[0]}, ${diff.value[1]})`);
graph.value.call(tip.value); graph.value.call(tip.value);
node.value = graph.value.append("g").selectAll(".topo-node"); node.value = graph.value
link.value = graph.value.append("g").selectAll(".topo-call"); .append("g")
anchor.value = graph.value.append("g").selectAll(".topo-line-anchor"); .attr("class", "nodes")
arrow.value = graph.value.append("g").selectAll(".topo-line-arrow"); .selectAll(".topo-node");
link.value = graph.value
.append("g")
.attr("class", "calls")
.selectAll(".topo-call");
anchor.value = graph.value
.append("g")
.attr("class", "anchors")
.selectAll(".topo-line-anchor");
arrow.value = graph.value
.append("g")
.attr("class", "arrows")
.selectAll(".topo-line-arrow");
svg.value.call(zoom(d3, graph.value, diff.value)); svg.value.call(zoom(d3, graph.value, diff.value));
svg.value.on("click", (event: any) => { svg.value.on("click", (event: any) => {
event.stopPropagation(); event.stopPropagation();
@ -126,7 +138,6 @@ function drawGraph() {
networkProfilingStore.setLink(null); networkProfilingStore.setLink(null);
dashboardStore.selectWidget(props.config); dashboardStore.selectWidget(props.config);
}); });
useThrottleFn(resize, 500)();
} }
function hexGrid(n = 1, radius = 1, origin = [0, 0]) { function hexGrid(n = 1, radius = 1, origin = [0, 0]) {
@ -191,7 +202,7 @@ function createLayout() {
} }
const linePath = d3.line(); const linePath = d3.line();
linePath.curve(d3.curveLinearClosed); linePath.curve(d3.curveLinearClosed);
const hexPolygon = graph.value.append("g"); const hexPolygon = graph.value.append("g").attr("class", "hex-polygon");
hexPolygon hexPolygon
.append("path") .append("path")
.attr("d", linePath(vertices)) .attr("d", linePath(vertices))
@ -298,14 +309,20 @@ function drawTopology(nodeArr: any[]) {
).merge(node.value); ).merge(node.value);
// line element // line element
const obj = {} as any; const obj = {} as any;
const calls = networkProfilingStore.calls.reduce((prev: any[], next: any) => { const calls = networkProfilingStore.calls.reduce(
if (obj[next.targetId + next.sourceId]) { (
next.lowerArc = true; prev: (Call & { targetId: string; sourceId: string })[],
} next: Call & { targetId: string; sourceId: string }
obj[next.sourceId + next.targetId] = true; ) => {
prev.push(next); if (obj[next.targetId + next.sourceId]) {
return prev; next.lowerArc = true;
}, []); }
obj[next.sourceId + next.targetId] = true;
prev.push(next);
return prev;
},
[]
);
link.value = link.value.data(calls, (d: Call) => d.id); link.value = link.value.data(calls, (d: Call) => d.id);
link.value.exit().remove(); link.value.exit().remove();
@ -337,7 +354,6 @@ function shuffleArray(array: number[][]) {
[array[i], array[j]] = [array[j], array[i]]; [array[i], array[j]] = [array[j], array[i]];
} }
} }
function handleLinkClick(event: any, d: Call) { function handleLinkClick(event: any, d: Call) {
event.stopPropagation(); event.stopPropagation();
networkProfilingStore.setNode(null); networkProfilingStore.setNode(null);