github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 20:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement Topology on the dashboard (#14)

Browse Source
This commit is contained in:
Fine0830
2022-02-19 23:05:57 +08:00
committed by GitHub
parent 7472d70720
commit f53b422782
81 changed files with 4886 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/store/modules/selectors.ts
View File

@@ -18,17 +18,19 @@ import { defineStore } from "pinia";
import { Duration } from "@/types/app";
import { Service, Instance, Endpoint } from "@/types/selector";
import { store } from "@/store";
import graph from "@/graph";
import graphql from "@/graphql";
import { AxiosResponse } from "axios";
import { useAppStoreWithOut } from "@/store/modules/app";
interface SelectorState {
services: Service[];
destServices: Service[];
pods: Array<Instance | Endpoint>;
currentService: Nullable<Service>;
currentPod: Nullable<Instance | Endpoint>;
currentDestService: Nullable<Service>;
currentDestPod: Nullable<Instance | Endpoint>;
destPods: Array<Instance | Endpoint>;
durationTime: Duration;
}
@@ -36,7 +38,9 @@ export const selectorStore = defineStore({
id: "selector",
state: (): SelectorState => ({
services: [],
destServices: [],
pods: [],
destPods: [],
currentService: null,
currentPod: null,
currentDestService: null,
@@ -44,103 +48,134 @@ export const selectorStore = defineStore({
durationTime: useAppStoreWithOut().durationTime,
}),
actions: {
setCurrentService(service: Service) {
setCurrentService(service: Nullable<Service>) {
this.currentService = service;
},
setCurrentDestService(service: Nullable<Service>) {
this.currentDestService = service;
},
setCurrentPod(pod: Nullable<Instance | Endpoint>) {
this.currentPod = pod;
},
setCurrentDestPod(pod: Nullable<Instance | Endpoint>) {
this.currentDestPod = pod;
},
async fetchLayers(): Promise<AxiosResponse> {
const res: AxiosResponse = await graph.query("queryLayers").params({});
const res: AxiosResponse = await graphql.query("queryLayers").params({});
return res.data || {};
},
async fetchServices(layer: string): Promise<AxiosResponse> {
const res: AxiosResponse = await graph
const res: AxiosResponse = await graphql
.query("queryServices")
.params({ layer });
if (!res.data.errors) {
this.services = res.data.data.services || [];
this.destServices = res.data.data.services || [];
}
return res.data;
},
async getServiceInstances(param?: {
serviceId: string;
isRelation: boolean;
}): Promise<Nullable<AxiosResponse>> {
const serviceId = param ? param.serviceId : this.currentService?.id;
if (!serviceId) {
return null;
}
const res: AxiosResponse = await graph.query("queryInstances").params({
const res: AxiosResponse = await graphql.query("queryInstances").params({
serviceId,
duration: this.durationTime,
});
if (!res.data.errors) {
if (param && param.isRelation) {
this.destPods = res.data.data.pods || [];
return res.data;
}
this.pods = res.data.data.pods || [];
}
return res.data;
},
async getEndpoints(params?: {
async getEndpoints(params: {
keyword?: string;
serviceId?: string;
isRelation?: boolean;
}): Promise<Nullable<AxiosResponse>> {
if (!params) {
params = {};
}
if (!params.keyword) {
params.keyword = "";
}
const serviceId = params.serviceId || this.currentService?.id;
if (!serviceId) {
return null;
}
const res: AxiosResponse = await graph.query("queryEndpoints").params({
const res: AxiosResponse = await graphql.query("queryEndpoints").params({
serviceId,
duration: this.durationTime,
keyword: params.keyword,
keyword: params.keyword || "",
});
if (!res.data.errors) {
if (params.isRelation) {
this.destPods = res.data.data.pods || [];
return res.data;
}
this.pods = res.data.data.pods || [];
}
return res.data;
},
async getService(serviceId: string) {
async getService(serviceId: string, isRelation: boolean) {
if (!serviceId) {
return;
}
const res: AxiosResponse = await graph.query("queryService").params({
const res: AxiosResponse = await graphql.query("queryService").params({
serviceId,
});
if (!res.data.errors) {
this.currentService = res.data.data.service || {};
if (isRelation) {
this.setCurrentDestService(res.data.data.service);
this.destServices = [res.data.data.service];
return res.data;
}
this.setCurrentService(res.data.data.service);
this.services = [res.data.data.service];
}
return res.data;
},
async getInstance(instanceId: string) {
async getInstance(instanceId: string, isRelation?: boolean) {
if (!instanceId) {
return;
}
const res: AxiosResponse = await graph.query("queryInstance").params({
const res: AxiosResponse = await graphql.query("queryInstance").params({
instanceId,
});
if (!res.data.errors) {
if (isRelation) {
this.currentDestPod = res.data.data.instance || null;
this.destPods = [res.data.data.instance];
return;
}
this.currentPod = res.data.data.instance || null;
this.pods = [res.data.data.instance];
}
return res.data;
},
async getEndpoint(endpointId: string) {
async getEndpoint(endpointId: string, isRelation?: string) {
if (!endpointId) {
return;
}
const res: AxiosResponse = await graph.query("queryEndpoint").params({
const res: AxiosResponse = await graphql.query("queryEndpoint").params({
endpointId,
});
if (!res.data.errors) {
if (isRelation) {
this.currentDestPod = res.data.data.endpoint || null;
this.destPods = [res.data.data.endpoint];
return;
}
this.currentPod = res.data.data.endpoint || null;
this.pods = [res.data.data.endpoint];
}
return res.data;