diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue index 2c2552f8..c45952b5 100644 --- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue +++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue @@ -107,14 +107,7 @@ function drawGraph() { width.value = dom.width; svg.value.attr("height", height.value).attr("width", width.value); tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]); - const outNodes = networkProfilingStore.nodes.filter( - (d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id - ); - if (outNodes.length) { - diff.value[0] = (dom.width - radius * 4) / 2 + radius; - } else { - diff.value[0] = (dom.width - radius * 2) / 2 + radius; - } + diff.value[0] = (dom.width - radius * 2) / 2 + radius; graph.value = svg.value .append("g") .attr("class", "svg-graph") @@ -162,13 +155,17 @@ function createPolygon(radius: number, sides = 6, offset = 0) { } return poly; } - -function getArcPoint(angle: number, radius: number) { +function getCirclePoint(radius: number, p = 1) { + const data = []; const origin = [0, 0]; - const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180); - const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180); - - return [x1, y1]; + for (let index = 0; index < 360; index = index + p) { + if (index < 230 || index > 310) { + let x = radius * Math.cos((Math.PI * 2 * index) / 360); + let y = radius * Math.sin((Math.PI * 2 * index) / 360); + data.push([x + origin[0], y + origin[1]]); + } + } + return data; } function createLayout() { if (!node.value || !link.value) { @@ -205,7 +202,7 @@ function createLayout() { .attr("fill", "#000") .attr("text-anchor", "middle") .attr("x", 0) - .attr("y", p.radius) + .attr("y", p.radius - 15) .text(() => selectorStore.currentPod.label); const nodeArr = networkProfilingStore.nodes.filter( (d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL" @@ -270,20 +267,15 @@ function createLayout() { const outNodes = networkProfilingStore.nodes.filter( (d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL") ); - let angle = 10; - let r = 230; + const interval = 30; + let r = 250; + let pointArr = getCirclePoint(r, interval); for (let v = 0; v < outNodes.length; v++) { - const pos = getArcPoint(angle, r); // angle is [-120, 120] - outNodes[v].x = pos[0]; - outNodes[v].y = pos[1]; - angle = angle + 20; - if (angle * (v + 1) > 120) { - angle = -10; - r = r + 60; - } - if (angle * (v + 1) < -120) { - r = r + 60; - angle = 10; + outNodes[v].x = pointArr[v][0]; + outNodes[v].y = pointArr[v][1]; + if (!pointArr[v + 1]) { + r = r + 80; + pointArr = [...pointArr, ...getCirclePoint(r, interval)]; } } drawTopology([...nodeArr, ...outNodes]); diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue index 1782cd3c..a51f14e8 100644 --- a/src/views/dashboard/related/network-profiling/components/Tasks.vue +++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue @@ -192,7 +192,7 @@ async function enableInterval() { return ElMessage.error(res.errors); } if (networkProfilingStore.aliveNetwork) { - intervalFn.value = setInterval(getTopology, 60000); + intervalFn.value = setInterval(getTopology, 30000); } } async function fetchTasks() {