mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-22 17:34:09 +00:00
feat: sort nodes
This commit is contained in:
Fine
parent
aecd5043c5
commit
9ff46da75a
@ -23,7 +23,7 @@ limitations under the License. -->
|
||||
<svg :width="width - 100" :height="height" style="background-color: #fff">
|
||||
<g v-for="(n, index) in tangleLayout.nodes" :key="index">
|
||||
<circle class="node" r="18" stroke-width="6" stroke="#72c59f" fill="#fff" :cx="n.x" :cy="n.y" />
|
||||
<text :x="n.x + 10" :y="n.y - n.height / 2 + 5" style="pointer-events: none">{{ n.id }}</text>
|
||||
<text :x="n.x + 10" :y="n.y - n.height / 2 + 5" style="pointer-events: none">{{ n.name }}</text>
|
||||
</g>
|
||||
</svg>
|
||||
<!-- <div class="legend">
|
||||
@ -95,8 +95,7 @@ limitations under the License. -->
|
||||
import { aggregation } from "@/hooks/useMetricsProcessor";
|
||||
import icons from "@/assets/img/icons";
|
||||
import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
|
||||
import { constructTangleLayout } from "./utils/layout";
|
||||
import { data } from "./utils/data";
|
||||
import { layout } from "./utils/layout";
|
||||
|
||||
/*global Nullable, defineProps */
|
||||
const props = defineProps({
|
||||
@ -151,9 +150,9 @@ limitations under the License. -->
|
||||
if (resp && resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []);
|
||||
topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []);
|
||||
topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
|
||||
// window.addEventListener("resize", resize);
|
||||
// svg.value = d3.select(chart.value).append("svg").attr("class", "topo-svg");
|
||||
await initLegendMetrics();
|
||||
@ -161,22 +160,42 @@ limitations under the License. -->
|
||||
// await init();
|
||||
// update();
|
||||
// setNodeTools(settings.value.nodeDashboard);
|
||||
draw();
|
||||
});
|
||||
function initData() {
|
||||
const levels = [];
|
||||
console.log(topologyStore.nodes);
|
||||
// for (const n of topologyStore.nodes) {
|
||||
// if (n.type === "USER") {
|
||||
// levels[0] = n;
|
||||
// }
|
||||
// }
|
||||
const nodes = topologyStore.nodes.sort((a: any, b: any) => b.service_cpm - a.service_cpm);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const nodes = topologyStore.nodes.sort(
|
||||
(a: { service_cpm: number }, b: { service_cpm: number }) => b.service_cpm - a.service_cpm,
|
||||
);
|
||||
const index = nodes.findIndex((n: Node) => n.type === "USER") || 0;
|
||||
levels.push([nodes[index]]);
|
||||
nodes.splice(index, 1);
|
||||
for (const level of levels) {
|
||||
const a = [];
|
||||
for (const l of level) {
|
||||
for (const n of topologyStore.calls) {
|
||||
if (n.target === l.id) {
|
||||
const i = nodes.findIndex((d: Node) => d.id === n.source);
|
||||
if (i > -1) {
|
||||
a.push(nodes[i]);
|
||||
nodes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
if (n.source === l.id) {
|
||||
const i = nodes.findIndex((d: Node) => d.id === n.target);
|
||||
if (i > -1) {
|
||||
a.push(nodes[i]);
|
||||
nodes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (a.length) {
|
||||
levels.push(a);
|
||||
}
|
||||
}
|
||||
console.log(levels);
|
||||
const options = {};
|
||||
tangleLayout.value = constructTangleLayout(data, options);
|
||||
tangleLayout.value = layout(levels, options);
|
||||
}
|
||||
|
||||
async function init() {
|
||||
|
||||
@ -1,78 +0,0 @@
|
||||
export const data = [
|
||||
[{ id: "Chaos" }],
|
||||
[{ id: "Gaea", parents: ["Chaos"] }, { id: "Uranus" }],
|
||||
[
|
||||
{ id: "Oceanus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Thethys", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Pontus" },
|
||||
{ id: "Rhea", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Cronus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Coeus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Phoebe", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Crius", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Hyperion", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Iapetus", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Thea", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Themis", parents: ["Gaea", "Uranus"] },
|
||||
{ id: "Mnemosyne", parents: ["Gaea", "Uranus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Doris", parents: ["Oceanus", "Thethys"] },
|
||||
{ id: "Neures", parents: ["Pontus", "Gaea"] },
|
||||
{ id: "Dionne" },
|
||||
{ id: "Demeter", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hades", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hera", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Alcmene" },
|
||||
{ id: "Zeus", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Eris" },
|
||||
{ id: "Leto", parents: ["Coeus", "Phoebe"] },
|
||||
{ id: "Amphitrite" },
|
||||
{ id: "Medusa" },
|
||||
{ id: "Poseidon", parents: ["Rhea", "Cronus"] },
|
||||
{ id: "Hestia", parents: ["Rhea", "Cronus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Thetis", parents: ["Doris", "Neures"] },
|
||||
{ id: "Peleus" },
|
||||
{ id: "Anchises" },
|
||||
{ id: "Adonis" },
|
||||
{ id: "Aphrodite", parents: ["Zeus", "Dionne"] },
|
||||
{ id: "Persephone", parents: ["Zeus", "Demeter"] },
|
||||
{ id: "Ares", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hephaestus", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hebe", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Hercules", parents: ["Zeus", "Alcmene"] },
|
||||
{ id: "Megara" },
|
||||
{ id: "Deianira" },
|
||||
{ id: "Eileithya", parents: ["Zeus", "Hera"] },
|
||||
{ id: "Ate", parents: ["Zeus", "Eris"] },
|
||||
{ id: "Leda" },
|
||||
{ id: "Athena", parents: ["Zeus"] },
|
||||
{ id: "Apollo", parents: ["Zeus", "Leto"] },
|
||||
{ id: "Artemis", parents: ["Zeus", "Leto"] },
|
||||
{ id: "Triton", parents: ["Poseidon", "Amphitrite"] },
|
||||
{ id: "Pegasus", parents: ["Poseidon", "Medusa"] },
|
||||
{ id: "Orion", parents: ["Poseidon"] },
|
||||
{ id: "Polyphemus", parents: ["Poseidon"] },
|
||||
],
|
||||
[
|
||||
{ id: "Deidamia" },
|
||||
{ id: "Achilles", parents: ["Peleus", "Thetis"] },
|
||||
{ id: "Creusa" },
|
||||
{ id: "Aeneas", parents: ["Anchises", "Aphrodite"] },
|
||||
{ id: "Lavinia" },
|
||||
{ id: "Eros", parents: ["Hephaestus", "Aphrodite"] },
|
||||
{ id: "Helen", parents: ["Leda", "Zeus"] },
|
||||
{ id: "Menelaus" },
|
||||
{ id: "Polydueces", parents: ["Leda", "Zeus"] },
|
||||
],
|
||||
[
|
||||
{ id: "Andromache" },
|
||||
{ id: "Neoptolemus", parents: ["Deidamia", "Achilles"] },
|
||||
{ id: "Aeneas(2)", parents: ["Creusa", "Aeneas"] },
|
||||
{ id: "Pompilius", parents: ["Creusa", "Aeneas"] },
|
||||
{ id: "Iulus", parents: ["Lavinia", "Aeneas"] },
|
||||
{ id: "Hermione", parents: ["Helen", "Menelaus"] },
|
||||
],
|
||||
];
|
||||
@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import * as d3 from "d3";
|
||||
export function constructTangleLayout(levels: any, options: any = {}) {
|
||||
export function layout(levels: any, options: any = {}) {
|
||||
// precompute level depth
|
||||
levels.forEach((l: any, i: any) => l.forEach((n: any) => (n.level = i)));
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user