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

update selectors

Browse Source
This commit is contained in:
Fine 2022-08-11 20:27:58 +08:00
parent da851d223f
commit 12dd47affe
3 changed files with 141 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/graphql/fragments/selector.ts
View File

@ -48,16 +48,7 @@ export const Instances = {
} }
`, `,
}; };
export const Endpoints = {
variable: "$serviceId: ID!, $keyword: String!",
query: `
pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20) {
id
value: name
label: name
}
`,
};
export const Processes = { export const Processes = {
variable: "$instanceId: ID!, $duration: Duration!", variable: "$instanceId: ID!, $duration: Duration!",
query: ` query: `
@ -71,8 +62,23 @@ export const Processes = {
instanceName instanceName
agentId agentId
detectType detectType
attributes attributes {
name
value
}
labels labels
}
`,
};
export const Endpoints = {
variable: "$serviceId: ID!, $keyword: String!",
query: `
pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20) {
id
value: name
label: name
}
`, `,
}; };
@ -133,8 +139,10 @@ export const getProcess = {
instanceName instanceName
agentId agentId
detectType detectType
attributes attributes {
labels name
value
}
} }
`, `,
}; };

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

@ -1,4 +1,3 @@
import { getProcess } from "./../../graphql/fragments/selector";
/** /**
* Licensed to the Apache Software Foundation (ASF) under one or more * Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with * contributor license agreements. See the NOTICE file distributed with
@ -122,7 +121,7 @@ export const selectorStore = defineStore({
if (!instanceId) { if (!instanceId) {
return null; return null;
} }
const res: AxiosResponse = await graphql.query("queryInstances").params({ const res: AxiosResponse = await graphql.query("queryProcesses").params({
instanceId, instanceId,
duration: useAppStoreWithOut().durationTime, duration: useAppStoreWithOut().durationTime,
}); });

192
src/views/dashboard/panel/Tool.vue
View File

@ -225,6 +225,7 @@ async function setSelector() {
EntityType[3].value, EntityType[3].value,
EntityType[5].value, EntityType[5].value,
EntityType[6].value, EntityType[6].value,
EntityType[7].value,
].includes(String(params.entity)) ].includes(String(params.entity))
) { ) {
setSourceSelector(); setSourceSelector();
@ -278,6 +279,7 @@ async function setSourceSelector() {
if (!(selectorStore.pods.length && selectorStore.pods[0])) { if (!(selectorStore.pods.length && selectorStore.pods[0])) {
selectorStore.setCurrentPod(null); selectorStore.setCurrentPod(null);
states.currentPod = ""; states.currentPod = "";
states.currentProcess = "";
return; return;
} }
const pod = params.podId || selectorStore.pods[0].id; const pod = params.podId || selectorStore.pods[0].id;
@ -289,9 +291,25 @@ async function setSourceSelector() {
} else { } else {
currentPod = selectorStore.pods.find((d: { id: string }) => d.id === pod); currentPod = selectorStore.pods.find((d: { id: string }) => d.id === pod);
} }
if (currentPod) { if (!currentPod) {
selectorStore.setCurrentPod(currentPod); return;
states.currentPod = currentPod.label; }
selectorStore.setCurrentPod(currentPod);
states.currentPod = currentPod.label;
const process = params.processId || selectorStore.processes[0].id;
let currentProcess;
if (states.currentProcess) {
currentProcess = selectorStore.processes.find(
(d: { label: string }) => d.label === states.currentProcess
);
} else {
currentProcess = selectorStore.processes.find(
(d: { id: string }) => d.id === process
);
}
if (currentProcess) {
selectorStore.setCurrentProcess(currentProcess);
states.currentProcess = currentProcess.label;
} }
} }
@ -319,9 +337,25 @@ async function setDestSelector() {
(d: { id: string }) => d.id === destPod (d: { id: string }) => d.id === destPod
); );
} }
if (currentDestPod) { if (!currentDestPod) {
selectorStore.setCurrentDestPod(currentDestPod); return;
states.currentDestPod = currentDestPod.label; }
selectorStore.setCurrentDestPod(currentDestPod);
states.currentDestPod = currentDestPod.label;
const destProcess = params.destProcessId || selectorStore.destProcesses[0].id;
let currentDestProcess;
if (states.currentDestProcess) {
currentDestProcess = selectorStore.destProcesses.find(
(d: { label: string }) => d.label === states.currentProcess
);
} else {
currentDestProcess = selectorStore.destProcesses.find(
(d: { id: string }) => d.id === destProcess
);
}
if (currentDestProcess) {
selectorStore.setCurrentProcess(currentDestProcess);
states.currentProcess = currentDestProcess.label;
} }
} }
@ -365,6 +399,7 @@ async function getServices() {
(d: unknown, index: number) => index === val (d: unknown, index: number) => index === val
); );
} }
selectorStore.setCurrentDestService(d || null); selectorStore.setCurrentDestService(d || null);
if (!selectorStore.currentService) { if (!selectorStore.currentService) {
return; return;
@ -377,9 +412,10 @@ async function getServices() {
EntityType[3].value, EntityType[3].value,
EntityType[5].value, EntityType[5].value,
EntityType[6].value, EntityType[6].value,
EntityType[7].value,
].includes(dashboardStore.entity) ].includes(dashboardStore.entity)
) { ) {
fetchPods(e, selectorStore.currentService.id, true); await fetchPods(e, selectorStore.currentService.id, true);
} }
if (!selectorStore.currentDestService) { if (!selectorStore.currentDestService) {
return; return;
@ -390,48 +426,67 @@ async function getServices() {
dashboardStore.entity dashboardStore.entity
) )
) { ) {
fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true); await fetchPods(
dashboardStore.entity,
selectorStore.currentDestService.id,
true
);
} }
} }
async function changeService(service: any) { async function changeService(service: Option[]) {
if (service[0]) { if (service[0]) {
states.currentService = service[0].value; states.currentService = service[0].value;
selectorStore.setCurrentService(service[0]); selectorStore.setCurrentService(service[0]);
const e = dashboardStore.entity.split("Relation")[0];
selectorStore.setCurrentPod(null); selectorStore.setCurrentPod(null);
states.currentPod = ""; states.currentPod = "";
fetchPods(e, selectorStore.currentService.id, true); states.currentProcess = "";
if (dashboardStore.entity === EntityType[7].value) {
fetchPods("Process", selectorStore.currentService.id, true);
} else {
fetchPods(dashboardStore.entity, selectorStore.currentService.id, true);
}
} else { } else {
selectorStore.setCurrentService(null); selectorStore.setCurrentService(null);
} }
} }
function changeDestService(service: any) { function changeDestService(service: Option[]) {
if (service[0]) { if (service[0]) {
states.currentDestService = service[0].value; states.currentDestService = service[0].value;
selectorStore.setCurrentDestService(service[0]); selectorStore.setCurrentDestService(service[0]);
selectorStore.setCurrentDestPod(null); selectorStore.setCurrentDestPod(null);
states.currentDestPod = ""; states.currentDestPod = "";
states.currentDestProcess = "";
fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true); fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
} else { } else {
selectorStore.setCurrentDestService(null); selectorStore.setCurrentDestService(null);
} }
} }
function changePods(pod: any) { async function changePods(pod: Option[]) {
selectorStore.setCurrentPod(pod[0] || null); selectorStore.setCurrentPod(pod[0] || null);
if (dashboardStore.entity === EntityType[7].value) {
selectorStore.setCurrentProcess(null);
states.currentProcess = "";
fetchProcess(true);
}
} }
function changeDestPods(pod: any) { function changeDestPods(pod: Option[]) {
selectorStore.setCurrentDestPod(pod[0] || null); selectorStore.setCurrentDestPod(pod[0] || null);
if (dashboardStore.entity === EntityType[7].value) {
selectorStore.setCurrentDestProcess(null);
states.currentDestProcess = "";
fetchDestProcess(true);
}
} }
function changeDestProcess(pod: any) { function changeDestProcess(pod: Option[]) {
selectorStore.setCurrentDestProcess(pod[0] || null); selectorStore.setCurrentDestProcess(pod[0] || null);
} }
function changeProcess(pod: any) { function changeProcess(pod: Option[]) {
selectorStore.setCurrentProcess(pod[0] || null); selectorStore.setCurrentProcess(pod[0] || null);
} }
@ -626,63 +681,12 @@ async function fetchPods(
} }
break; break;
case EntityType[7].value: case EntityType[7].value:
resp = await selectorStore.getServiceInstances({ serviceId }); await fetchPods(EntityType[5].value, serviceId, setPod, param);
if (setPod) { resp = await fetchDestProcess(setPod);
let p, m; break;
if (states.currentPod) { case "Process":
p = selectorStore.pods.find( await fetchPods(EntityType[3].value, serviceId, setPod, param);
(d: { label: string }) => d.label === states.currentPod resp = await fetchProcess(setPod);
);
} else {
p = selectorStore.pods.find(
(d: { label: string }, index: number) => index === 0
);
}
selectorStore.setCurrentPod(p || null);
states.currentPod = selectorStore.currentPod.label;
selectorStore.setDestPods(selectorStore.pods || []);
if (states.currentDestPod) {
m = selectorStore.destPods.find(
(d: { label: string }) => d.label === states.currentDestPod
);
} else {
m = selectorStore.destPods.find(
(d: { label: string }, index: number) => index === 1
);
}
selectorStore.setCurrentDestPod(m || null);
states.currentDestPod = selectorStore.currentDestPod.label;
}
resp = await selectorStore.getProcesses({
instanceId: selectorStore.currentPod.id,
isRelation: true,
});
if (setPod) {
let p, m;
if (states.currentProcess) {
p = selectorStore.processes.find(
(d: { label: string }) => d.label === states.currentProcess
);
} else {
p = selectorStore.processes.find(
(d: { label: string }, index: number) => index === 0
);
}
selectorStore.setCurrentProcess(p || null);
states.currentProcess = selectorStore.currentProcess.label;
selectorStore.setDestProcesses(selectorStore.processes || []);
if (states.currentDestProcess) {
m = selectorStore.destProcesses.find(
(d: { label: string }) => d.label === states.currentDestProcess
);
} else {
m = selectorStore.destProcesses.find(
(d: { label: string }, index: number) => index === 1
);
}
selectorStore.setCurrentDestProcess(m || null);
states.currentDestProcess = selectorStore.currentDestProcess.label;
}
break; break;
default: default:
resp = {}; resp = {};
@ -691,6 +695,48 @@ async function fetchPods(
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
} }
} }
async function fetchProcess(setPod: boolean) {
const resp = await selectorStore.getProcesses({
instanceId: selectorStore.currentPod.id,
});
if (setPod) {
let m;
if (states.currentProcess) {
m = selectorStore.processes.find(
(d: { label: string }) => d.label === states.currentProcess
);
} else {
m = selectorStore.processes.find(
(d: { label: string }, index: number) => index === 0
);
}
selectorStore.setCurrentProcess(m || null);
states.currentProcess = m && m.label;
}
return resp;
}
async function fetchDestProcess(setPod: boolean) {
const resp = await selectorStore.getProcesses({
instanceId: selectorStore.currentDestPod.id,
isRelation: true,
});
if (setPod) {
let m;
if (states.currentDestProcess) {
m = selectorStore.destProcesses.find(
(d: { label: string }) => d.label === states.currentDestProcess
);
} else {
m = selectorStore.destProcesses.find(
(d: { label: string }, index: number) => index === 1
);
}
selectorStore.setCurrentDestProcess(m || null);
states.currentDestProcess = m && m.label;
}
return resp;
}
function getTools() { function getTools() {
switch (params.entity) { switch (params.entity) {
case EntityType[1].value: case EntityType[1].value: