fix: separate variables and avoid queries with null parameter to request service for endpoint dependency (#557)
diff --git a/src/store/modules/dashboard/mutation-types.ts b/src/store/modules/dashboard/mutation-types.ts
index 9d20042..039b8c1 100644
--- a/src/store/modules/dashboard/mutation-types.ts
+++ b/src/store/modules/dashboard/mutation-types.ts
@@ -47,6 +47,7 @@
export const SET_ENDPOINT_DEPENDENCY = 'SET_ENDPOINT_DEPENDENCY';
export const SET_SELECTOR_ERRORS = 'SET_SELECTOR_ERRORS';
export const SET_DASHBOARD_ERRORS = 'SET_DASHBOARD_ERRORS';
+export const SET_CURRENT_DEPENDENCY_ENDPOINT = 'SET_CURRENT_DEPENDENCY_ENDPOINT';
// comp
export const SET_CURRENT_GROUP = 'SET_CURRENT_GROUP';
diff --git a/src/store/modules/global/selectors.ts b/src/store/modules/global/selectors.ts
index e30593c..0d057a9 100644
--- a/src/store/modules/global/selectors.ts
+++ b/src/store/modules/global/selectors.ts
@@ -38,6 +38,7 @@
destInstance: Option;
destEndpoint: Option;
selectorErrors: { [key: string]: string };
+ currentDependencyEndpoint: Option;
}
const initState: State = {
@@ -55,6 +56,7 @@
destInstance: { key: '', label: '' },
destEndpoint: { key: '', label: '' },
selectorErrors: {},
+ currentDependencyEndpoint: { key: '', label: '' },
};
// mutations
@@ -81,14 +83,19 @@
state.endpoints = pageTypes.includes(state.pageType) ? [{ label: 'All', key: '' }, ...data] : data;
if (!state.endpoints.length) {
state.currentEndpoint = { key: '', label: '' };
+ state.currentDependencyEndpoint = { key: '', label: '' };
return;
}
state.currentEndpoint = state.endpoints[0];
+ state.currentDependencyEndpoint = state.endpoints[0];
},
[types.SET_CURRENT_ENDPOINT](state: State, endpoint: Option) {
state.currentEndpoint = endpoint;
state.updateDashboard = endpoint;
},
+ [types.SET_CURRENT_DEPENDENCY_ENDPOINT](state: State, endpoint: Option) {
+ state.currentDependencyEndpoint = endpoint;
+ },
[types.SET_INSTANCES](state: State, data: Option[]) {
const pageTypes = [PageTypes.LOG, PageTypes.EVENT] as string[];
state.instances = pageTypes.includes(state.pageType) ? [{ label: 'All', key: '' }, ...data] : data;
diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index c52c8da..35b2511 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -483,7 +483,24 @@
localStorage.setItem('topologyServicesInstanceDependency', JSON.stringify(state.topoServicesInstanceDependency));
},
[types.SET_ENDPOINT_DEPENDENCY](state: State, data: { calls: Call[]; nodes: Node[] }) {
- state.endpointDependency = data;
+ const obj = {} as any;
+ let nodes = [];
+ let calls = [];
+ nodes = data.nodes.reduce((prev: Node[], next: Node) => {
+ if (!obj[next.id]) {
+ obj[next.id] = true;
+ prev.push(next);
+ }
+ return prev;
+ }, []);
+ calls = data.calls.reduce((prev: Call[], next: Call) => {
+ if (!obj[next.id]) {
+ obj[next.id] = true;
+ prev.push(next);
+ }
+ return prev;
+ }, []);
+ state.endpointDependency = { nodes, calls };
state.selectedEndpointCall = null;
},
[types.SET_ENDPOINT_DEPTH](state: State, data: { key: number; label: string }) {
@@ -709,18 +726,31 @@
const endpointIds = res.nodes
.map((item: Node) => item.id)
.filter((d: string) => !params.endpointIds.includes(d));
-
+ if (!endpointIds.length) {
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, res);
+ return;
+ }
context.dispatch('GET_ENDPOINT_TOPO', { endpointIds, duration: params.duration }).then((json) => {
if (context.state.currentEndpointDepth.key > 2) {
const ids = json.nodes
.map((item: Node) => item.id)
.filter((d: string) => ![...endpointIds, ...params.endpointIds].includes(d));
-
+ if (!ids.length) {
+ const nodes = [...res.nodes, ...json.nodes];
+ const calls = [...res.calls, ...json.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
+ return;
+ }
context.dispatch('GET_ENDPOINT_TOPO', { endpointIds: ids, duration: params.duration }).then((topo) => {
if (context.state.currentEndpointDepth.key > 3) {
const endpoints = topo.nodes
.map((item: Node) => item.id)
.filter((d: string) => ![...ids, ...endpointIds, ...params.endpointIds].includes(d));
+ if (!endpoints.length) {
+ const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
+ const calls = [...res.calls, ...json.calls, ...topo.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
+ }
context
.dispatch('GET_ENDPOINT_TOPO', { endpointIds: endpoints, duration: params.duration })
.then((data) => {
@@ -730,21 +760,35 @@
.filter(
(d: string) => ![...endpoints, ...ids, ...endpointIds, ...params.endpointIds].includes(d),
);
+ if (!nodeIds.length) {
+ const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+ const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
+ return;
+ }
context
.dispatch('GET_ENDPOINT_TOPO', { endpointIds: nodeIds, duration: params.duration })
.then((toposObj) => {
- context.commit(types.SET_ENDPOINT_DEPENDENCY, toposObj);
+ const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
+ const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
});
} else {
- context.commit(types.SET_ENDPOINT_DEPENDENCY, data);
+ const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+ const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
}
});
} else {
- context.commit(types.SET_ENDPOINT_DEPENDENCY, topo);
+ const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
+ const calls = [...res.calls, ...json.calls, ...topo.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
}
});
} else {
- context.commit(types.SET_ENDPOINT_DEPENDENCY, json);
+ const nodes = [...res.nodes, ...json.nodes];
+ const calls = [...res.calls, ...json.calls];
+ context.commit(types.SET_ENDPOINT_DEPENDENCY, { nodes, calls });
}
});
} else {
diff --git a/src/views/components/topology/dependency/topo-endpoint-dependency.vue b/src/views/components/topology/dependency/topo-endpoint-dependency.vue
index 932bd02..c591022 100644
--- a/src/views/components/topology/dependency/topo-endpoint-dependency.vue
+++ b/src/views/components/topology/dependency/topo-endpoint-dependency.vue
@@ -124,7 +124,7 @@
private currentType: Option[] = [];
private beforeMount() {
- this.height = document.body.clientHeight - 133;
+ this.height = document.body.clientHeight - 103;
}
private addMetrics() {
diff --git a/src/views/containers/topology/endpoint-dependency/index.vue b/src/views/containers/topology/endpoint-dependency/index.vue
index 80dd4b7..025a6a5 100644
--- a/src/views/containers/topology/endpoint-dependency/index.vue
+++ b/src/views/containers/topology/endpoint-dependency/index.vue
@@ -19,7 +19,7 @@
<ToolBarEndpointSelect
@onChoose="selectEndpoint"
:title="$t('currentEndpoint')"
- :current="stateDashboardOption.currentEndpoint"
+ :current="stateDashboardOption.currentDependencyEndpoint"
:data="stateDashboardOption.endpoints"
icon="code"
/>
@@ -39,6 +39,7 @@
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Action, Getter, State, Mutation } from 'vuex-class';
+ import { Option } from '@/types/global';
import ToolBarSelect from '@/views/components/dashboard/tool-bar/tool-bar-select.vue';
import ToolBarEndpointSelect from '@/views/components/dashboard/tool-bar/tool-bar-endpoint-select.vue';
import TopoEndpointDependency from '@/views/components/topology/dependency/topo-endpoint-dependency.vue';
@@ -59,30 +60,36 @@
@Mutation('rocketTopo/SET_ENDPOINT_DEPTH') private SET_ENDPOINT_DEPTH: any;
@Action('GET_SERVICE_ENDPOINTS') private GET_SERVICE_ENDPOINTS: any;
@Action('MIXHANDLE_CHANGE_GROUP_WITH_CURRENT') private MIXHANDLE_CHANGE_GROUP_WITH_CURRENT: any;
- @Action('SELECT_ENDPOINT') private SELECT_ENDPOINT: any;
+ @Mutation('SET_CURRENT_DEPENDENCY_ENDPOINT') private SET_CURRENT_DEPENDENCY_ENDPOINT: any;
@Action('rocketTopo/GET_ALL_ENDPOINT_DEPENDENCY') private GET_ALL_ENDPOINT_DEPENDENCY: any;
@Prop() private current!: { key: number | string; label: string };
private depths: Array<{ key: number; label: string }> = [{ key: 2, label: '2' }];
private beforeMount() {
+ this.depths = [1, 2, 3, 4, 5].map((item: number) => ({ key: item, label: String(item) }));
this.SET_CURRENT_SERVICE(this.current);
this.MIXHANDLE_CHANGE_GROUP_WITH_CURRENT({ index: 0, current: 2 });
this.GET_SERVICE_ENDPOINTS({ duration: this.durationTime, serviceId: this.current.key, keyword: '' }).then(() => {
- this.selectEndpoint(this.stateDashboardOption.endpoints[0] || {});
+ this.GET_ALL_ENDPOINT_DEPENDENCY({
+ endpointIds: [this.stateDashboardOption.currentDependencyEndpoint.key],
+ duration: this.durationTime,
+ });
});
- this.depths = [1, 2, 3, 4, 5].map((item: number) => ({ key: item, label: String(item) }));
}
- private selectEndpoint(i: any) {
- this.SELECT_ENDPOINT({ endpoint: i, duration: this.durationTime });
- this.GET_ALL_ENDPOINT_DEPENDENCY({ endpointIds: [i.key], duration: this.durationTime });
+ private selectEndpoint(i: Option) {
+ this.SET_CURRENT_DEPENDENCY_ENDPOINT(i);
+ this.GET_ALL_ENDPOINT_DEPENDENCY({
+ endpointIds: [this.stateDashboardOption.currentDependencyEndpoint.key],
+ duration: this.durationTime,
+ });
}
private selectDepth(i: { key: number; label: string }) {
this.SET_ENDPOINT_DEPTH(i);
this.GET_ALL_ENDPOINT_DEPENDENCY({
- endpointIds: [this.stateDashboardOption.currentEndpoint.key],
+ endpointIds: [this.stateDashboardOption.currentDependencyEndpoint.key],
duration: this.durationTime,
});
}
