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

feat: update layout

Browse Source
This commit is contained in:
Fine 2023-11-23 15:30:53 +08:00
parent 512893b9ca
commit 7cba0647a6
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -239,10 +239,9 @@ limitations under the License. -->
setNodeTools(settings.value.nodeDashboard); setNodeTools(settings.value.nodeDashboard);
} }
function draw() { function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
const node = findMostFrequent(topologyStore.calls); const node = findMostFrequent(calls);
const levels = []; const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => {
const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => {
if (a.name.toLowerCase() < b.name.toLowerCase()) { if (a.name.toLowerCase() < b.name.toLowerCase()) {
return -1; return -1;
} }
@ -254,15 +253,14 @@ limitations under the License. -->
const index = nodes.findIndex((n: Node) => n.type === "USER"); const index = nodes.findIndex((n: Node) => n.type === "USER");
let key = index; let key = index;
if (index < 0) { if (index < 0) {
const idx = nodes.findIndex((n: Node) => n.id === node.id); key = nodes.findIndex((n: Node) => n.id === node.id);
key = idx;
} }
levels.push([nodes[key]]); levels.push([nodes[key]]);
nodes.splice(key, 1); nodes.splice(key, 1);
for (const level of levels) { for (const level of levels) {
const a = []; const a = [];
for (const l of level) { for (const l of level) {
for (const n of topologyStore.calls) { for (const n of calls) {
if (n.target === l.id) { if (n.target === l.id) {
const i = nodes.findIndex((d: Node) => d.id === n.source); const i = nodes.findIndex((d: Node) => d.id === n.source);
if (i > -1) { if (i > -1) {
@ -283,6 +281,18 @@ limitations under the License. -->
levels.push(a); levels.push(a);
} }
} }
if (nodes.length) {
const ids = nodes.map((d: Node) => d.id);
const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target));
const list = computeLevels(links, nodes, []);
levels = list.map((subArrayA, index) => subArrayA.concat(levels[index]));
}
return levels;
}
function draw() {
const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
topologyLayout.value = layout(levels, topologyStore.calls, radius); topologyLayout.value = layout(levels, topologyStore.calls, radius);
graphWidth.value = topologyLayout.value.layout.width; graphWidth.value = topologyLayout.value.layout.width;
const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => { const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {