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

update

Browse Source
This commit is contained in:
Fine 2022-08-18 14:29:40 +08:00
parent 434ea780cc
commit bba6d9db10
1 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,14 +95,14 @@ function drawGraph() {
height: 20, height: 20,
width: 0, width: 0,
}; };
height.value = dom.height - 20; height.value = (dom.height || 40) - 20;
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]);
graph.value = svg.value graph.value = svg.value
.append("g") .append("g")
.attr("class", "svg-graph") .attr("class", "svg-graph")
.attr("transform", `translate(300, 300)`); .attr("transform", `translate(${dom.width / 3}, ${dom.width / 3})`);
graph.value.call(tip.value); graph.value.call(tip.value);
node.value = graph.value.append("g").selectAll(".topo-node"); node.value = graph.value.append("g").selectAll(".topo-node");
link.value = graph.value.append("g").selectAll(".topo-call"); link.value = graph.value.append("g").selectAll(".topo-call");
@ -153,11 +153,16 @@ function drawTopology() {
if (!node.value || !link.value) { if (!node.value || !link.value) {
return; return;
} }
// const obj: any = (chart.value && chart.value.getBoundingClientRect()) || {}; const dom: any = (chart.value && chart.value.getBoundingClientRect()) || {
width: 0,
height: 0,
};
if (isNaN(dom.width) || dom.width < 1) {
return;
}
const p = { const p = {
hexagonParam: [27, 0.04, 5, 0.04, 0],
count: 1, count: 1,
radius: 300, // layout hexagons radius radius: parseInt(dom.width / 3), // layout hexagons radius 300
}; };
const polygon = createPolygon(p.radius, 6, 0); const polygon = createPolygon(p.radius, 6, 0);
const origin = [0, 0]; const origin = [0, 0];
@ -173,8 +178,14 @@ function drawTopology() {
.attr("stroke", "#ccc") .attr("stroke", "#ccc")
.attr("stroke-width", 2) .attr("stroke-width", 2)
.style("fill", "none"); .style("fill", "none");
const centers = hexGrid(p.count, 100, origin); // cube centers const nodeArr = networkProfilingStore.nodes.filter(
(d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id
);
const count = nodeArr.length;
// layout
const centers = hexGrid(p.count, parseInt(dom.width / 9), origin); // cube centers radius 100
const cubeCenters = []; const cubeCenters = [];
if (count > 7) {
for (let i = 0; i < centers.length; i++) { for (let i = 0; i < centers.length; i++) {
// const polygon = createPolygon(100, 6, 0); // const polygon = createPolygon(100, 6, 0);
// const vertices: any = []; // a hexagon vertices // const vertices: any = []; // a hexagon vertices
@ -192,9 +203,11 @@ function drawTopology() {
// .attr("stroke", "#ccc") // .attr("stroke", "#ccc")
// .attr("stroke-width", 1) // .attr("stroke-width", 1)
// .style("fill", "none"); // .style("fill", "none");
const c = hexGrid(p.count, 30, centers[i]); const c = hexGrid(p.count, parseInt(dom.width / 27) - 5, centers[i]);
cubeCenters.push(...c); cubeCenters.push(...c);
} }
shuffleArray(cubeCenters);
}
// for (let i = 0; i < cubeCenters.length; i++) { // for (let i = 0; i < cubeCenters.length; i++) {
// const polygon = createPolygon(30, 6, 0); // const polygon = createPolygon(30, 6, 0);
// const vertices: any = []; // a hexagon vertices // const vertices: any = []; // a hexagon vertices
@ -213,14 +226,11 @@ function drawTopology() {
// .attr("stroke-width", 1) // .attr("stroke-width", 1)
// .style("fill", "none"); // .style("fill", "none");
// } // }
shuffleArray(cubeCenters); // const pos = hexGrid(p.count, 30, [p.radius * 2 + 20]); // cube centers
const pos = hexGrid(p.count, 30, [p.radius * 2 + 20]); // cube centers let cubes = count > 7 ? cubeCenters : centers;
const nodeArr = networkProfilingStore.nodes.filter( for (let v = 0; v < count; v++) {
(d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id const x = cubes[v][0];
); const y = cubes[v][1];
for (let v = 0; v < nodeArr.length; v++) {
const x = cubeCenters[v][0];
const y = cubeCenters[v][1];
nodeArr[v].x = x; nodeArr[v].x = x;
nodeArr[v].y = y; nodeArr[v].y = y;
} }
@ -292,6 +302,7 @@ function handleLinkClick(event: any, d: Call) {
event.stopPropagation(); event.stopPropagation();
networkProfilingStore.setNode(null); networkProfilingStore.setNode(null);
networkProfilingStore.setLink(d); networkProfilingStore.setLink(d);
console.log(config.value);
if (!config.value.linkDashboard) { if (!config.value.linkDashboard) {
return; return;
} }
@ -396,6 +407,10 @@ watch(
transition: all 0.5ms linear; transition: all 0.5ms linear;
} }
.topo-line-anchor {
cursor: pointer;
}
.topo-call { .topo-call {
stroke-linecap: round; stroke-linecap: round;
stroke-width: 2px; stroke-width: 2px;