You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by wu...@apache.org on 2019/10/20 05:33:20 UTC
[skywalking-rocketbot-ui] branch master updated: fix issue
apache/skywalking#3588 . (#164)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new f03d49b fix issue apache/skywalking#3588 . (#164)
f03d49b is described below
commit f03d49bf74236928523b9286c2a57a58b92298ac
Author: qiyang <15...@163.com>
AuthorDate: Sun Oct 20 13:33:11 2019 +0800
fix issue apache/skywalking#3588 . (#164)
* This resolve apache/skywalking#3588 .
When query endpointTopology return .
Use `org.apache.skywalking.oap.query.graphql.resolver.MetadataQuery#getEndpointInfo` query EndpointInfo use endpointId then add EndpointInfo.serviceName to the node.value for display.
* fix : other module should dispatch `COOK_SOURCE` too
* fix: use visualMap make display simple
* fix: code style
* fix: remove categories
* change visualmap to the top
---
.../dashboard/modules/dashboard-data-query.ts | 43 +++++++++++++++++----
src/store/modules/dashboard/source/endpoint.ts | 45 +++++++++++++++++-----
src/store/modules/dashboard/source/index.ts | 2 +-
.../components/dashboard/charts/chart-sankey.vue | 5 ++-
4 files changed, 76 insertions(+), 19 deletions(-)
diff --git a/src/store/modules/dashboard/modules/dashboard-data-query.ts b/src/store/modules/dashboard/modules/dashboard-data-query.ts
index 1de6f41..3c7131b 100644
--- a/src/store/modules/dashboard/modules/dashboard-data-query.ts
+++ b/src/store/modules/dashboard/modules/dashboard-data-query.ts
@@ -15,10 +15,10 @@
* limitations under the License.
*/
-import { Commit, ActionTree, MutationTree, Dispatch } from 'vuex';
-import axios, { AxiosPromise, AxiosResponse } from 'axios';
-import { cancelToken } from '@/utils/cancelToken';
-import { State } from './dashboard-data';
+import {Commit, ActionTree, MutationTree, Dispatch} from 'vuex';
+import axios, {AxiosPromise, AxiosResponse} from 'axios';
+import {cancelToken} from '@/utils/cancelToken';
+import {State} from './dashboard-data';
import fragmentAll from '@/store/modules/dashboard/fragments';
// getters
const getters = {
@@ -36,9 +36,16 @@ const getters = {
});
const fragments = Array.from(new Set(fragmentsArr)).join('');
const variables = Array.from(new Set(variablesArr)).join(',');
- return `query queryData(${variables}) {${fragments}}`;
+ return `query queryData(${variables}) {${fragments}}`;
},
};
+const EndPointInfoGraphql = `
+query getEndpointInfo($endpointId: ID!) {
+ endpointInfo: getEndpointInfo(endpointId: $endpointId) {
+ serviceName
+ id
+ }}
+`;
// actions
const actions: ActionTree<State, any> = {
@@ -46,8 +53,30 @@ const actions: ActionTree<State, any> = {
return axios.post('/graphql', {
query: context.getters.Graphql,
variables: variablesData,
- }, { cancelToken: cancelToken() }).then((res: AxiosResponse<any>) => {
- context.dispatch('COOK_SOURCE', res.data);
+ }, {cancelToken: cancelToken()}).then((res: AxiosResponse<any>) => {
+ const resData = res.data;
+ if (resData.data && resData.data.endpointTopology) {
+ const endpointIds = resData.data.endpointTopology.nodes.map((n: any) => n.name).filter(
+ function onlyUnique(value: any, index: number, self: any) {
+ return self.indexOf(value) === index;
+ },
+ );
+ Promise.all(
+ endpointIds.map((id: any) => {
+ return axios.post('/graphql', {
+ query: EndPointInfoGraphql,
+ variables: {endpointId: `${id}`},
+ }).then((endpointRes: AxiosResponse<any>) => {
+ return endpointRes.data.data.endpointInfo;
+ });
+ }),
+ ).then((endpointInfos) => {
+ resData.data.endpointTopology.endpoints = endpointInfos;
+ context.dispatch('COOK_SOURCE', resData);
+ });
+ } else {
+ context.dispatch('COOK_SOURCE', resData);
+ }
return res;
});
},
diff --git a/src/store/modules/dashboard/source/endpoint.ts b/src/store/modules/dashboard/source/endpoint.ts
index 2c9014d..cf4f862 100644
--- a/src/store/modules/dashboard/source/endpoint.ts
+++ b/src/store/modules/dashboard/source/endpoint.ts
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-import { Value } from '@/types/dashboard';
-import { SlowItem } from '@/types/global';
+import {Value} from '@/types/dashboard';
+import {SlowItem} from '@/types/global';
export interface State {
endpointPercent: {
@@ -31,7 +31,7 @@ export interface State {
endpointSLA: { SLA: number[]; };
endpointSlowEndpoint: SlowItem[];
endpointTraces: SlowItem[];
- endpointTopology: { calls: any; nodes: any; };
+ endpointTopology: { calls: any; nodes: any; visualMap: any; };
}
export const initState: State = {
@@ -42,12 +42,12 @@ export const initState: State = {
p95: [],
p99: [],
},
- endpointResponseTime: { ResponseTime: [] },
- endpointThroughput: { Throughput: [] },
- endpointSLA: { SLA: [] },
+ endpointResponseTime: {ResponseTime: []},
+ endpointThroughput: {Throughput: []},
+ endpointSLA: {SLA: []},
endpointSlowEndpoint: [],
endpointTraces: [],
- endpointTopology: { calls: [], nodes: [] },
+ endpointTopology: {calls: [], nodes: [], visualMap: []},
};
@@ -73,8 +73,35 @@ export const SetEndpoint = (state: State, params: any) => {
state.endpointSlowEndpoint = params.endpointSlowEndpoint;
}
if (params && params.endpointTopology) {
- state.endpointTopology.nodes = params.endpointTopology.nodes;
- state.endpointTopology.calls = params.endpointTopology.calls.map((i: Value) => ({...i, value: 1}));
+ const serviceIdxMap = params.endpointTopology.endpoints.map((e: any) => (e.serviceName)).filter(
+ function onlyUnique(value: any, index: number, self: any) {
+ return self.indexOf(value) === index;
+ },
+ ).map((serviceName: string, index: number) => ({serviceName, serviceIdx: index}));
+ state.endpointTopology.nodes = params.endpointTopology.nodes.map(
+ (n: any) => {
+ const serviceName = params.endpointTopology.endpoints.find((v: any) => v.id === n.name).serviceName;
+ return {
+ name: n.name,
+ content: n.value,
+ tip: serviceName,
+ value: serviceIdxMap.find((value: any) => (
+ value.serviceName === serviceName
+ )).serviceIdx,
+ };
+ });
+ state.endpointTopology.calls = params.endpointTopology.calls.map((i: any) => {
+ const sourceServiceName = params.endpointTopology.endpoints.find((v: any) => v.id === i.source).serviceName;
+ const targetServiceName = params.endpointTopology.endpoints.find((v: any) => v.id === i.target).serviceName;
+ return {...i, value: 1, tip: sourceServiceName + '->' + targetServiceName};
+ });
+ state.endpointTopology.visualMap = [{
+ type: 'piecewise',
+ dimension: 0,
+ pieces: serviceIdxMap.map((val: any) => ({value: val.serviceIdx, label: val.serviceName})),
+ orient: 'horizontal',
+ top: 'top',
+ }];
}
if (params && params.endpointTraces) {
state.endpointTraces = params.endpointTraces.traces.map((i: any) => ({
diff --git a/src/store/modules/dashboard/source/index.ts b/src/store/modules/dashboard/source/index.ts
index d8405e9..707f8a8 100644
--- a/src/store/modules/dashboard/source/index.ts
+++ b/src/store/modules/dashboard/source/index.ts
@@ -76,7 +76,7 @@ export interface State {
instanceClrHeap: { Value: number[] };
instanceClrCPU: { cpu: number[]; };
instanceClrGC: { clrGCGen0: number[], clrGCGen1: number[], clrGCGen2: number[]};
- endpointTopology: { calls: any; nodes: any; };
+ endpointTopology: { calls: any; nodes: any; visualMap: any };
databaseResponseTime: { ResponseTime: number[]; };
databaseSLA: { SLA: number[]; };
databasePercent: {
diff --git a/src/views/components/dashboard/charts/chart-sankey.vue b/src/views/components/dashboard/charts/chart-sankey.vue
index df099cc..cd8c1d2 100644
--- a/src/views/components/dashboard/charts/chart-sankey.vue
+++ b/src/views/components/dashboard/charts/chart-sankey.vue
@@ -37,7 +37,7 @@ export default class ChartSankey extends Vue {
textStyle: {
fontSize: 13,
},
- formatter: (a: any) => a.value,
+ formatter: (a: any) => a.data.tip,
},
series: [{
type: 'sankey',
@@ -45,7 +45,7 @@ export default class ChartSankey extends Vue {
top: '20px',
bottom: '20px',
label: {
- formatter: (a: any) => a.value,
+ formatter: (a: any) => a.data.content,
},
animation: false,
color: [
@@ -73,6 +73,7 @@ export default class ChartSankey extends Vue {
},
},
}],
+ visualMap: this.data.visualMap,
};
}
}