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

Browse Source
This commit is contained in:
Fine 2024-01-08 17:59:06 +08:00
parent 0523a04c51
commit e0bc912e12
4 changed files with 104 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,7 +120,7 @@ export const HierarchyServiceTopology = {
export const HierarchyInstanceTopology = {
variable: "$instanceId: ID!, $layer: String!",
query: `
HierarchyInstanceTopology: getInstanceHierarchy(instanceId: $instanceId, layer: $layer) {
hierarchyInstanceTopology: getInstanceHierarchy(instanceId: $instanceId, layer: $layer) {
relations {
upperInstance {
id

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

@ -17,7 +17,7 @@
import { defineStore } from "pinia";
import { store } from "@/store";
import type { Service } from "@/types/selector";
import type { Node, Call } from "@/types/topology";
import type { Node, Call, HierarchyNode, ServiceHierarchy, InstanceHierarchy } from "@/types/topology";
import graphql from "@/graphql";
import { useSelectorStore } from "@/store/modules/selectors";
import { useAppStoreWithOut } from "@/store/modules/app";
@ -35,9 +35,14 @@ interface TopologyState {
call: Nullable<Call>;
calls: Call[];
nodes: Node[];
hierarchyServiceCalls: Call[];
hierarchyServiceNodes: HierarchyNode[];
hierarchyInstanceCalls: Call[];
hierarchyInstanceNodes: HierarchyNode[];
nodeMetricValue: MetricVal;
linkServerMetrics: MetricVal;
linkClientMetrics: MetricVal;
hierarchyServiceNode: Nullable<Node>;
}
export const topologyStore = defineStore({
@ -45,8 +50,13 @@ export const topologyStore = defineStore({
state: (): TopologyState => ({
calls: [],
nodes: [],
hierarchyServiceCalls: [],
hierarchyServiceNodes: [],
hierarchyInstanceCalls: [],
hierarchyInstanceNodes: [],
node: null,
call: null,
hierarchyServiceNode: null,
nodeMetricValue: {},
linkServerMetrics: {},
linkClientMetrics: {},
@ -58,6 +68,9 @@ export const topologyStore = defineStore({
setLink(link: Call) {
this.call = link;
},
setHierarchyServiceNode(node: HierarchyNode) {
this.hierarchyServiceNode = node;
},
setInstanceTopology(data: { nodes: Node[]; calls: Call[] }) {
for (const call of data.calls) {
for (const node of data.nodes) {
@ -106,6 +119,56 @@ export const topologyStore = defineStore({
this.calls = calls;
this.nodes = nodes;
},
setHierarchyInstanceTopology(data: InstanceHierarchy) {
const relations = data.relations || [];
const nodesMap = new Map();
const callList = [];
for (const relation of relations) {
const upperId = relation.upperInstance.id;
const lowerId = relation.lowerInstance.id;
if (!nodesMap.get(upperId)) {
nodesMap.set(upperId, relation.upperInstance);
}
if (!nodesMap.get(lowerId)) {
nodesMap.set(lowerId, relation.lowerInstance);
}
callList.push({
source: upperId,
target: lowerId,
id: `${upperId}->${lowerId}`,
sourceObj: relation.upperInstance,
targetObj: relation.lowerInstance,
});
}
this.hierarchyInstanceCalls = callList;
this.hierarchyInstanceNodes = Array.from(nodesMap).flat();
},
setHierarchyServiceTopology(data: ServiceHierarchy) {
const relations = data.relations || [];
const nodesMap = new Map();
const callList = [];
for (const relation of relations) {
const upperId = relation.upperService.id;
const lowerId = relation.lowerService.id;
if (!nodesMap.get(upperId)) {
nodesMap.set(upperId, relation.upperService);
}
if (!nodesMap.get(lowerId)) {
nodesMap.set(lowerId, relation.lowerService);
}
callList.push({
source: upperId,
target: lowerId,
id: `${upperId}->${lowerId}`,
sourceObj: relation.upperService,
targetObj: relation.lowerService,
});
}
this.hierarchyServiceCalls = callList;
this.hierarchyServiceNodes = Array.from(nodesMap).flat();
},
setNodeMetricValue(m: MetricVal) {
this.nodeMetricValue = m;
},
@ -482,23 +545,25 @@ export const topologyStore = defineStore({
return res.data;
},
async getHierarchyServiceTopology(params: { serviceId: string; layer: string }) {
if (!params.serviceId || !params.layer) {
if (!(params.serviceId && params.layer)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql.query("getHierarchyServiceTopology").params(params);
if (res.data.errors) {
return res.data;
}
this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {});
return res.data;
},
async getHierarchyInstanceTopology(params: { instanceId: string; layer: string }) {
if (!params.instanceId || !params.layer) {
if (!(params.instanceId && params.layer)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql.query("getHierarchyServiceTopology").params(params);
const res: AxiosResponse = await graphql.query("getHierarchyInstanceTopology").params(params);
if (res.data.errors) {
return res.data;
}
this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
return res.data;
},
},

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

@ -31,6 +31,12 @@ export interface Call {
targetY?: number;
targetX?: number;
}
export interface HierarchyNode {
id: string;
name: string;
layer: string;
level?: number;
}
export interface Node {
id: string;
name: string;
@ -43,3 +49,27 @@ export interface Node {
y?: number;
level?: number;
}
export interface ServiceHierarchy {
relations: HierarchyServiceRelation[];
}
export interface HierarchyServiceRelation {
upperService: HierarchyRelated;
lowerService: HierarchyRelated;
}
type HierarchyRelated = {
id: string;
name: string;
layer: string;
};
export interface InstanceHierarchy {
relations: HierarchyInstanceRelation[];
}
export interface HierarchyInstanceRelation {
upperInstance: HierarchyRelated;
lowerInstance: HierarchyRelated;
}

11
src/views/dashboard/related/topology/components/HierarchyMap.vue
View File

@ -153,8 +153,7 @@ limitations under the License. -->
svg.value.call(zoom(d3, graph.value, diff.value));
}
async function freshNodes() {
topologyStore.setNode(null);
topologyStore.setLink(null);
topologyStore.setHierarchyServiceNode(null);
const resp = await getTopology();
loading.value = false;
@ -287,9 +286,8 @@ limitations under the License. -->
function handleNodeClick(event: MouseEvent, d: Node & { x: number; y: number }) {
event.stopPropagation();
hideTip();
topologyStore.setNode(d);
topologyStore.setLink(null);
handleGoDashboard(d.name);
topologyStore.setHierarchyServiceNode(d);
// handleGoDashboard(d.name);
}
function handleGoDashboard(name: string) {
const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
@ -314,8 +312,7 @@ limitations under the License. -->
width.value = dom.width;
}
function svgEvent() {
topologyStore.setNode(null);
topologyStore.setLink(null);
topologyStore.setHierarchyServiceNode(null);
dashboardStore.selectWidget(props.config);
}