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

fix: update

Browse Source
This commit is contained in:
Fine 2024-01-12 18:49:00 +08:00
parent 7f47835191
commit 6e8e00512d
6 changed files with 74 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/graphql/fragments/topology.ts
View File

@ -108,11 +108,13 @@ export const HierarchyServiceTopology = {
id
name
layer
normal
}
lowerService {
id
name
layer
normal
}
}
}`,
@ -126,12 +128,27 @@ export const HierarchyInstanceTopology = {
id
name
layer
normal
serviceName
serviceId
}
lowerInstance {
id
name
layer
normal
serviceName
serviceId
}
}
}`,
};
export const ListLayerLevels = {
query: `
levels: listLayerLevels {
layer
level
}
`,
};

2
src/graphql/query/topology.ts
View File

@ -21,6 +21,7 @@ import {
ProcessTopology,
HierarchyServiceTopology,
HierarchyInstanceTopology,
ListLayerLevels,
} from "../fragments/topology";
export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
@ -29,3 +30,4 @@ export const getServicesTopology = `query queryData(${ServicesTopology.variable}
export const getProcessTopology = `query queryData(${ProcessTopology.variable}) {${ProcessTopology.query}}`;
export const getHierarchyInstanceTopology = `query queryData(${HierarchyInstanceTopology.variable}) {${HierarchyInstanceTopology.query}}`;
export const getHierarchyServiceTopology = `query queryData(${HierarchyServiceTopology.variable}) {${HierarchyServiceTopology.query}}`;
export const queryListLayerLevels = `query queryLayerLevels {${ListLayerLevels.query}}`;

39
src/store/modules/topology.ts
View File

@ -120,7 +120,7 @@ export const topologyStore = defineStore({
this.calls = calls;
this.nodes = nodes;
},
setHierarchyInstanceTopology(data: InstanceHierarchy) {
setHierarchyInstanceTopology(data: InstanceHierarchy, levels: { layer: string; level: number }[]) {
const relations = data.relations || [];
const nodesMap = new Map();
const callList = [];
@ -130,8 +130,12 @@ export const topologyStore = defineStore({
const lowerId = relation.lowerInstance.id;
const lowerKey = `${lowerId}-${relation.lowerInstance.layer}`;
const upperKey = `${upperId}-${relation.upperInstance.layer}`;
const lowerObj = { ...relation.lowerInstance, key: lowerId, id: lowerKey };
const upperObj = { ...relation.upperInstance, key: upperId, id: upperKey };
const lowerLevel: any =
levels.find((l: { layer: string; level: number }) => l.layer === relation.lowerInstance.layer) || {};
const upperLevel: any =
levels.find((l: { layer: string; level: number }) => l.layer === relation.upperInstance.layer) || {};
const lowerObj = { ...relation.lowerInstance, key: lowerId, id: lowerKey, l: lowerLevel.level };
const upperObj = { ...relation.upperInstance, key: upperId, id: upperKey, l: upperLevel.level };
if (!nodesMap.get(upperKey)) {
nodesMap.set(upperKey, upperObj);
}
@ -152,7 +156,7 @@ export const topologyStore = defineStore({
this.hierarchyInstanceNodes.push(d);
}
},
setHierarchyServiceTopology(data: ServiceHierarchy) {
setHierarchyServiceTopology(data: ServiceHierarchy, levels: { layer: string; level: number }[]) {
const relations = data.relations || [];
const nodesMap = new Map();
const callList = [];
@ -162,8 +166,12 @@ export const topologyStore = defineStore({
const lowerId = relation.lowerService.id;
const lowerKey = `${lowerId}-${relation.lowerService.layer}`;
const upperKey = `${upperId}-${relation.upperService.layer}`;
const lowerObj = { ...relation.lowerService, key: lowerId, id: lowerKey };
const upperObj = { ...relation.upperService, key: upperId, id: upperKey };
const lowerLevel: any =
levels.find((l: { layer: string; level: number }) => l.layer === relation.lowerService.layer) || {};
const upperLevel: any =
levels.find((l: { layer: string; level: number }) => l.layer === relation.upperService.layer) || {};
const lowerObj = { ...relation.lowerService, key: lowerId, id: lowerKey, l: lowerLevel.level };
const upperObj = { ...relation.upperService, key: upperId, id: upperKey, l: upperLevel.level };
if (!nodesMap.get(upperKey)) {
nodesMap.set(upperKey, upperObj);
}
@ -578,7 +586,17 @@ export const topologyStore = defineStore({
if (res.data.errors) {
return res.data;
}
this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {});
const resp = await this.getListLayerLevels();
if (resp.errors) {
return resp;
}
const levels = resp.data.levels || [];
this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {}, levels);
return res.data;
},
async getListLayerLevels() {
const res: AxiosResponse = await graphql.query("queryListLayerLevels").params({});
return res.data;
},
async getHierarchyInstanceTopology() {
@ -594,7 +612,12 @@ export const topologyStore = defineStore({
if (res.data.errors) {
return res.data;
}
this.setHierarchyInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
const resp = await this.getListLayerLevels();
if (resp.errors) {
return resp;
}
const levels = resp.data.levels || [];
this.setHierarchyInstanceTopology(res.data.data.hierarchyInstanceTopology || {}, levels);
return res.data;
},
async queryHierarchyExpressions(expressions: string[], nodes: Node[]) {

1
src/types/topology.d.ts vendored
View File

@ -50,6 +50,7 @@ export interface Node {
x?: number;
y?: number;
level?: number;
l?: number;
}
export interface ServiceHierarchy {

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

@ -78,7 +78,7 @@ limitations under the License. -->
import type { Node, Call } from "@/types/topology";
import { useDashboardStore } from "@/store/modules/dashboard";
import icons from "@/assets/img/icons";
import { changeNode, computeLevels, hierarchy } from "./utils/layout";
import { changeNode, computeHierarchyLevels, hierarchy } from "./utils/layout";
import zoom from "@/views/dashboard/related/components/utils/zoom";
/*global Nullable, defineProps */
@ -99,6 +99,10 @@ limitations under the License. -->
type: Array as PropType<Call[]>,
default: () => [],
},
layerLevels: {
type: Array as PropType<{ layer: string; level: number }[]>,
default: () => [],
},
});
const emits = defineEmits(["showNodeTip", "handleNodeClick", "hideTip", "getNodeMetrics"]);
const dashboardStore = useDashboardStore();
@ -109,8 +113,8 @@ limitations under the License. -->
const topologyLayout = ref<any>({});
const graphWidth = ref<number>(100);
const currentNode = ref<Nullable<Node>>(null);
const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 0]);
const radius = 4;
const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 20]);
const radius = 10;
async function init() {
const dom = document.querySelector(".hierarchy-related")?.getBoundingClientRect() || {
@ -127,8 +131,7 @@ limitations under the License. -->
}
function draw() {
const levels = computeLevels(props.calls, props.nodes, []);
const levels = computeHierarchyLevels(props.nodes);
topologyLayout.value = hierarchy(levels, props.calls, radius);
graphWidth.value = topologyLayout.value.layout.width;
const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {

18
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -229,7 +229,6 @@ export function changeNode(d: { x: number; y: number }, currentNode: Nullable<No
}
export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
// precompute level depth
console.log(levels);
levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
@ -237,7 +236,7 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
const padding = 30;
const node_height = 120;
const node_width = 100;
const bundle_width = 14;
const bundle_width = 10;
const metro_d = 4;
for (const n of nodes) {
n.width = 5 * metro_d;
@ -247,7 +246,7 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
let x_offset = 0;
for (const level of levels) {
x_offset = 0;
y_offset += 5 * bundle_width;
y_offset += 3 * bundle_width;
for (const l of level) {
const n: any = l;
for (const call of calls) {
@ -270,3 +269,16 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
return { nodes, layout, calls: computeCallPos(calls, radius) };
}
export function computeHierarchyLevels(nodes: Node[]) {
const levelsNum: number[] = nodes.map((d: Node) => d.l || 0);
const list = [...new Set(levelsNum)];
const sortedArr = list.sort((a, b) => a - b);
const nodesList = [];
for (const min of sortedArr) {
const arr = nodes.filter((d) => d.l === min);
nodesList.push(arr);
}
return nodesList;
}