github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 20:44:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

update circle layout

Browse Source
This commit is contained in:
Fine 2022-08-23 18:39:43 +08:00
parent 9ce01b7028
commit 1b129496f9
2 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,14 +107,7 @@ function drawGraph() {
width.value = dom.width; width.value = dom.width;
svg.value.attr("height", height.value).attr("width", width.value); svg.value.attr("height", height.value).attr("width", width.value);
tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]); 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 graph.value = svg.value
.append("g") .append("g")
.attr("class", "svg-graph") .attr("class", "svg-graph")
@ -162,13 +155,17 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
} }
return poly; return poly;
} }
function getCirclePoint(radius: number, p = 1) {
function getArcPoint(angle: number, radius: number) { const data = [];
const origin = [0, 0]; const origin = [0, 0];
const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180); for (let index = 0; index < 360; index = index + p) {
const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180); if (index < 230 || index > 310) {
let x = radius * Math.cos((Math.PI * 2 * index) / 360);
return [x1, y1]; let y = radius * Math.sin((Math.PI * 2 * index) / 360);
data.push([x + origin[0], y + origin[1]]);
}
}
return data;
} }
function createLayout() { function createLayout() {
if (!node.value || !link.value) { if (!node.value || !link.value) {
@ -205,7 +202,7 @@ function createLayout() {
.attr("fill", "#000") .attr("fill", "#000")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("x", 0) .attr("x", 0)
.attr("y", p.radius) .attr("y", p.radius - 15)
.text(() => selectorStore.currentPod.label); .text(() => selectorStore.currentPod.label);
const nodeArr = networkProfilingStore.nodes.filter( const nodeArr = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL" (d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL"
@ -270,20 +267,15 @@ function createLayout() {
const outNodes = networkProfilingStore.nodes.filter( const outNodes = networkProfilingStore.nodes.filter(
(d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL") (d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL")
); );
let angle = 10; const interval = 30;
let r = 230; let r = 250;
let pointArr = getCirclePoint(r, interval);
for (let v = 0; v < outNodes.length; v++) { for (let v = 0; v < outNodes.length; v++) {
const pos = getArcPoint(angle, r); // angle is [-120, 120] outNodes[v].x = pointArr[v][0];
outNodes[v].x = pos[0]; outNodes[v].y = pointArr[v][1];
outNodes[v].y = pos[1]; if (!pointArr[v + 1]) {
angle = angle + 20; r = r + 80;
if (angle * (v + 1) > 120) { pointArr = [...pointArr, ...getCirclePoint(r, interval)];
angle = -10;
r = r + 60;
}
if (angle * (v + 1) < -120) {
r = r + 60;
angle = 10;
} }
} }
drawTopology([...nodeArr, ...outNodes]); drawTopology([...nodeArr, ...outNodes]);

2
src/views/dashboard/related/network-profiling/components/Tasks.vue
View File

@ -192,7 +192,7 @@ async function enableInterval() {
return ElMessage.error(res.errors); return ElMessage.error(res.errors);
} }
if (networkProfilingStore.aliveNetwork) { if (networkProfilingStore.aliveNetwork) {
intervalFn.value = setInterval(getTopology, 60000); intervalFn.value = setInterval(getTopology, 30000);
} }
} }
async function fetchTasks() { async function fetchTasks() {