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 e6a036f Feat: multiple dependency service compare (#205)
e6a036f is described below
commit e6a036fb9e54f2f06a59f1a2cfc79eb3b432cc89
Author: Qiuxia Fan <[email protected]>
AuthorDate: Fri Nov 22 09:49:42 2019 +0800
Feat: multiple dependency service compare (#205)
* refactor: dependency name
* feat: multiple dependency service compare
* fix: metric name
---
src/graph/fragments/comparison.ts | 106 ++++++++++++++++++++---
src/graph/query/comparison.ts | 18 ++--
src/store/modules/comparison/comparison-const.ts | 4 +-
src/store/modules/comparison/comparison-store.ts | 88 +++----------------
src/store/mutation-types.ts | 2 +-
src/utils/queryChartData.ts | 16 +++-
6 files changed, 134 insertions(+), 100 deletions(-)
diff --git a/src/graph/fragments/comparison.ts
b/src/graph/fragments/comparison.ts
index ac7ed7d..03407cc 100644
--- a/src/graph/fragments/comparison.ts
+++ b/src/graph/fragments/comparison.ts
@@ -15,10 +15,10 @@
* limitations under the License.
*/
-export const ComparisonServerInfo = {
+export const dependencyServerPercentile = {
variable: '$duration: Duration!, $id: ID!',
- query: `
- p50: getLinearIntValues(metric: {
+ fragment: `
+ serverSideP50: getLinearIntValues(metric: {
name: "service_relation_server_p50"
id: $id
}, duration: $duration) {
@@ -26,7 +26,7 @@ export const ComparisonServerInfo = {
value
}
}
- p75: getLinearIntValues(metric: {
+ serverSideP75: getLinearIntValues(metric: {
name: "service_relation_server_p75"
id: $id
}, duration: $duration) {
@@ -34,7 +34,7 @@ export const ComparisonServerInfo = {
value
}
}
- p90: getLinearIntValues(metric: {
+ serverSideP90: getLinearIntValues(metric: {
name: "service_relation_server_p90"
id: $id
}, duration: $duration) {
@@ -42,7 +42,7 @@ export const ComparisonServerInfo = {
value
}
}
- p95: getLinearIntValues(metric: {
+ serverSideP95: getLinearIntValues(metric: {
name: "service_relation_server_p95"
id: $id
}, duration: $duration) {
@@ -50,7 +50,7 @@ export const ComparisonServerInfo = {
value
}
}
- p99: getLinearIntValues(metric: {
+ serverSideP99: getLinearIntValues(metric: {
name: "service_relation_server_p99"
id: $id
}, duration: $duration) {
@@ -60,10 +60,88 @@ export const ComparisonServerInfo = {
}
`};
-export const ComparisonClientInfo = {
+export const dependencyServerResponseTimeTrend = {
variable: '$duration: Duration!, $id: ID!',
- query: `
- p50: getLinearIntValues(metric: {
+ fragment: `
+ serverSideResponseTimeTrend: getLinearIntValues(metric: {
+ name: "service_relation_server_resp_time"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyServerThroughputTrend = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ serverSideThroughputTrend: getLinearIntValues(metric: {
+ name: "service_relation_server_cpm"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyServerSLATrend = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ serverSideSLATrend: getLinearIntValues(metric: {
+ name: "service_relation_server_call_sla"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyClientResponseTimeTrend = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ clientSideResponseTimeTrend: getLinearIntValues(metric: {
+ name: "service_relation_client_resp_time"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyClientThroughputTrend = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ clientSideThroughputTrend: getLinearIntValues(metric: {
+ name: "service_relation_client_cpm"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyClientSLATrend = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ clientSideSLATrend: getLinearIntValues(metric: {
+ name: "service_relation_client_call_sla"
+ id: $id
+ }, duration: $duration) {
+ values {
+ value
+ }
+ }
+`};
+
+export const dependencyClientPercentile = {
+ variable: '$duration: Duration!, $id: ID!',
+ fragment: `
+ clientSideP50: getLinearIntValues(metric: {
name: "service_relation_client_p50"
id: $id
}, duration: $duration) {
@@ -71,7 +149,7 @@ export const ComparisonClientInfo = {
value
}
}
- p75: getLinearIntValues(metric: {
+ clientSideP75: getLinearIntValues(metric: {
name: "service_relation_client_p75"
id: $id
}, duration: $duration) {
@@ -79,7 +157,7 @@ export const ComparisonClientInfo = {
value
}
}
- p90: getLinearIntValues(metric: {
+ clientSideP90: getLinearIntValues(metric: {
name: "service_relation_client_p90"
id: $id
}, duration: $duration) {
@@ -87,7 +165,7 @@ export const ComparisonClientInfo = {
value
}
}
- p95: getLinearIntValues(metric: {
+ clientSideP95: getLinearIntValues(metric: {
name: "service_relation_client_p95"
id: $id
}, duration: $duration) {
@@ -95,7 +173,7 @@ export const ComparisonClientInfo = {
value
}
}
- p99: getLinearIntValues(metric: {
+ clientSideP99: getLinearIntValues(metric: {
name: "service_relation_client_p99"
id: $id
}, duration: $duration) {
diff --git a/src/graph/query/comparison.ts b/src/graph/query/comparison.ts
index be1ffac..ea6b822 100644
--- a/src/graph/query/comparison.ts
+++ b/src/graph/query/comparison.ts
@@ -15,10 +15,16 @@
* limitations under the License.
*/
-import { ComparisonServerInfo, ComparisonClientInfo } from
'../fragments/comparison';
+import * as service from '@/store/modules/dashboard/fragments/service';
+import * as endpoint from '@/store/modules/dashboard/fragments/endpoint';
+import * as instance from '@/store/modules/dashboard/fragments/instance';
+import * as database from '@/store/modules/dashboard/fragments/database';
+import * as dependency from '../fragments/comparison';
-export const queryComparisonServerInfo =
- `query queryTopoServiceInfo(${ComparisonServerInfo.variable})
{${ComparisonServerInfo.query}}`;
-
-export const queryComparisonClientInfo =
- `query queryTopoClientInfo(${ComparisonClientInfo.variable})
{${ComparisonClientInfo.query}}`;
+export default {
+ ...service,
+ ...endpoint,
+ ...instance,
+ ...database,
+ ...dependency,
+};
diff --git a/src/store/modules/comparison/comparison-const.ts
b/src/store/modules/comparison/comparison-const.ts
index 4762a6f..7158100 100644
--- a/src/store/modules/comparison/comparison-const.ts
+++ b/src/store/modules/comparison/comparison-const.ts
@@ -81,6 +81,6 @@ export const PercentileType: any = {
servicePercent: ['serviceP50', 'serviceP75', 'serviceP90', 'serviceP95',
'serviceP99'],
endpointPercent: ['endpointP50', 'endpointP75', 'endpointP90',
'endpointP95', 'endpointP99'],
databasePercent: ['databaseP50', 'databaseP75', 'databaseP90',
'databaseP95', 'databaseP99'],
- comparisonServerInfo: ['p50', 'p75', 'p90', 'p95', 'p99'],
- comparisonClientInfo: ['p50', 'p75', 'p90', 'p95', 'p99'],
+ dependencyServerPercentile: ['serverSideP50', 'serverSideP75',
'serverSideP90', 'serverSideP95', 'serverSideP99'],
+ dependencyClientPercentile: ['clientSideP50', 'clientSideP75',
'clientSideP90', 'clientSideP95', 'clientSideP99'],
};
diff --git a/src/store/modules/comparison/comparison-store.ts
b/src/store/modules/comparison/comparison-store.ts
index da78973..6ae06e6 100644
--- a/src/store/modules/comparison/comparison-store.ts
+++ b/src/store/modules/comparison/comparison-store.ts
@@ -23,8 +23,7 @@ import { cancelToken } from '@/utils/cancelToken';
import * as types from '../../mutation-types';
import { DurationTime } from '@/types/global';
import { queryChartData } from '@/utils/queryChartData';
-import { queryComparisonClientInfo, queryComparisonServerInfo } from
'@/graph/query/comparison';
-import fragmentAll from '@/store/modules/dashboard/fragments';
+import fragmentAll from '@/graph/query/comparison';
import { ICurrentOptions, DataSourceType, ISelectConfig, MetricsType } from
'@/types/comparison';
import {
ComparisonOption, InitSource, LinearType, ComparisonType,
@@ -59,18 +58,10 @@ const initState: State = {
// getters
const getters = {
queryPreValue(state: State) {
- const { preMetrics, preType } = state.currentOptions;
+ const { preMetrics } = state.currentOptions;
const fragments = [];
let variable = null;
- if (preType.key === ObjectType.ServiceDependency) {
- let param = null;
-
- for (const metric of preMetrics) {
- param = metric.key === 'comparisonServerInfo' ?
queryComparisonServerInfo : queryComparisonClientInfo;
- }
- return param;
- }
for (const metric of preMetrics) {
const preMetric = metric.key;
const preParam = (fragmentAll as any)[preMetric];
@@ -82,18 +73,10 @@ const getters = {
return `query queryData(${variable}) {${fragments.join(',')}}`;
},
queryNextValue(state: State) {
- const { nextMetrics, nextType } = state.currentOptions;
+ const { nextMetrics } = state.currentOptions;
const fragments = [];
let variable = null;
- if (nextType.key === ObjectType.ServiceDependency) {
- let param = null;
-
- for (const metric of nextMetrics) {
- param = metric.key === 'comparisonServerInfo' ?
queryComparisonServerInfo : queryComparisonClientInfo;
- }
- return param;
- }
for (const metric of nextMetrics) {
const nextParam = (fragmentAll as any)[metric.key];
if (nextParam) {
@@ -322,12 +305,7 @@ const mutations = {
if (type === ChangeType.NextMetrics || type === ChangeType.PreMetrics) {
const metrics = currentOptions[type];
const item = metrics.findIndex((d: any) => d.key === option.key);
- const objectType = isPrevious === StatusType.Next ? nextType.key :
preType.key;
- if (objectType === ObjectType.ServiceDependency) {
- state.currentOptions[type] = [option];
- return;
- }
if (item > -1) {
state.currentOptions[type] = metrics.filter((d: any) => d.key !==
option.key);
} else {
@@ -352,32 +330,16 @@ const mutations = {
state.currentOptions.nextMetrics = [metricSource[nextType.key][0]];
}
},
- [types.SELECT_TYPE_INSTANCE](state: State, data: any) {
+ [types.SELECT_INSTANCE_DATABASE](state: State, data: any) {
const { preType, nextType } = state.currentOptions;
- const { isPrevious, metricSource } = state as any;
+ const { metricSource, isPrevious } = state as any;
- if (isPrevious === StatusType.Pre) {
- state.dataSource.preMetricsSource = metricSource[preType.key];
- state.currentOptions.preMetrics = [metricSource[preType.key][0]];
- state.dataSource.preObjectSource = data;
- state.currentOptions.preObject = data[0];
- } else if (isPrevious === StatusType.Next) {
- state.dataSource.nextMetricsSource = metricSource[nextType.key];
- state.currentOptions.nextMetrics = [metricSource[nextType.key][0]];
- state.dataSource.nextObjectSource = data;
- state.currentOptions.nextObject = data[0];
- }
- },
- [types.SELECT_TYPE_DATABASE](state: State, data: any) {
- const { preType, nextType } = state.currentOptions;
- const metricSource = state.metricSource as any;
-
- if (state.isPrevious === StatusType.Next) {
+ if (isPrevious === StatusType.Next) {
state.dataSource.nextMetricsSource = metricSource[nextType.key];
state.currentOptions.nextMetrics = [metricSource[nextType.key][0]];
state.currentOptions.nextObject = data[0];
state.dataSource.nextObjectSource = data;
- } else {
+ } else if (isPrevious === StatusType.Pre) {
state.dataSource.preMetricsSource = metricSource[preType.key];
state.currentOptions.preMetrics = [metricSource[preType.key][0]];
state.currentOptions.preObject = data[0];
@@ -387,6 +349,7 @@ const mutations = {
[types.SET_SERVICE_TOPOLOGY](state: State, data: any) {
const { calls, nodes } = data;
const { metricSource } = state as any;
+ const { preType, nextType } = state.currentOptions;
for (const call of calls) {
for (const node of nodes) {
if (node.id === call.source) {
@@ -398,42 +361,23 @@ const mutations = {
}
}
const objectSource = calls.map((call: any) => {
- const sourceData = call.detectPoints.map((points: any) => {
- if (points === 'CLIENT') {
- return metricSource.ServiceDependency[1];
- } else {
- return metricSource.ServiceDependency[0];
- }
- });
return {
key: call.id,
label: `${call.sourceLabel}-${call.targetLabel}`,
- sources: sourceData,
};
});
if (state.isPrevious === StatusType.Next) {
- state.dataSource.nextMetricsSource = objectSource[0].sources || [];
- state.currentOptions.nextMetrics = [objectSource[0].sources[0]];
+ state.dataSource.nextMetricsSource = metricSource[nextType.key];
+ state.currentOptions.nextMetrics = [metricSource[nextType.key][0]];
state.currentOptions.nextObject = objectSource[0];
state.dataSource.nextObjectSource = objectSource;
} else {
- state.dataSource.preMetricsSource = objectSource[0].sources || [];
- state.currentOptions.preMetrics = [objectSource[0].sources[0]];
+ state.dataSource.preMetricsSource = metricSource[preType.key];
+ state.currentOptions.preMetrics = [metricSource[preType.key][0]];
state.currentOptions.preObject = objectSource[0];
state.dataSource.preObjectSource = objectSource;
}
},
- [types.SET_METRICS](state: State) {
- const { currentOptions, isPrevious } = state;
- const { nextObject, preObject } = currentOptions;
- if (isPrevious === StatusType.Next) {
- state.currentOptions.nextMetrics = [nextObject.sources[0]];
- state.dataSource.nextMetricsSource = nextObject.sources;
- } else {
- state.currentOptions.preMetrics = [preObject.sources[0]];
- state.dataSource.preMetricsSource = preObject.sources;
- }
- },
};
// actions
@@ -491,7 +435,7 @@ const actions: ActionTree<State, ActionsParamType> = {
if (!res.data) {
return;
}
- context.commit(types.SELECT_TYPE_INSTANCE,
res.data.data.getServiceInstances);
+ context.commit(types.SELECT_INSTANCE_DATABASE,
res.data.data.getServiceInstances);
});
},
GET_DATABASES(context: { commit: Commit, state: State }, params: {duration:
string}) {
@@ -502,7 +446,7 @@ const actions: ActionTree<State, ActionsParamType> = {
if (!res.data) {
return;
}
- context.commit(types.SELECT_TYPE_DATABASE, res.data.data.services);
+ context.commit(types.SELECT_INSTANCE_DATABASE, res.data.data.services);
});
},
GET_SERVICE_TOPOLOGY(context: { commit: Commit, state: State }, params) {
@@ -532,7 +476,6 @@ const actions: ActionTree<State, ActionsParamType> = {
const { currentOptions } = context.state;
const objType = isPrevious === StatusType.Next ? currentOptions.nextType :
currentOptions.preType;
const typeList = [ChangeType.PreService, ChangeType.NextService,
ChangeType.PreType, ChangeType.NextType];
- const objectType = [ChangeType.NextObject, ChangeType.PreObject];
if (typeList.includes(params.type)) {
if (objType.key === ObjectType.Service) {
@@ -549,9 +492,6 @@ const actions: ActionTree<State, ActionsParamType> = {
context.dispatch('GET_SERVICE_TOPOLOGY', {duration: params.duration});
}
}
- if (objectType.includes(params.type)) {
- context.commit(types.SET_METRICS);
- }
},
GET_COMPARISON(
context: {commit: Commit, state: State, dispatch: Dispatch, getters: any},
param: {duration: string, type: string},
diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
index b453f62..889b13f 100644
--- a/src/store/mutation-types.ts
+++ b/src/store/mutation-types.ts
@@ -92,7 +92,7 @@ export const CLEAR_CHART_VAL = 'CLEAR_CHART_VAL';
export const SELECT_TYPE_SERVICES = 'SELECT_TYPE_SERVICES';
export const SELECT_TYPE_INSTANCE = 'SELECT_TYPE_INSTANCE';
export const SET_ISPREVIOUS = 'SET_ISPREVIOUS';
-export const SELECT_TYPE_DATABASE = 'SELECT_TYPE_DATABASE';
+export const SELECT_INSTANCE_DATABASE = 'SELECT_INSTANCE_DATABASE';
export const SET_METRICSOURCE = 'SET_METRICSOURCE';
export const SET_CONFIG = 'SET_CONFIG';
export const SET_SERVICE_TOPOLOGY = 'GET_SERVICE_TOPOLOGY';
diff --git a/src/utils/queryChartData.ts b/src/utils/queryChartData.ts
index 9f1b499..2aed768 100644
--- a/src/utils/queryChartData.ts
+++ b/src/utils/queryChartData.ts
@@ -66,10 +66,20 @@ export const queryChartData = {
{ o: 'ServiceInstance', d: 'instanceClrCPU', c: 'ChartLine', t: 'CLR CPU
(%)', w: 3, h: 250 },
{ o: 'ServiceInstance', d: 'instanceClrGC', c: 'ChartLine', t: 'CLR GC
(Count)', w: 3, h: 250 },
{ o: 'ServiceInstance', d: 'instanceClrHeap', c: 'ChartLine', t: 'CLR
HeapMemory (MB)', w: 3, h: 250 },
- {o: 'ServiceDependency', d: 'comparisonServerInfo',
+ {o: 'ServiceDependency', d: 'dependencyServerPercentile',
c: 'ChartLine', t: 'Server Response Time Percentile', w: 3, h: 250},
- {o: 'ServiceDependency', d: 'comparisonClientInfo',
- c: 'ChartLine', t: 'Client Response Time Percentile', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyClientPercentile',
+ c: 'ChartLine', t: 'Client Response Time Percentile', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyServerResponseTimeTrend',
+ c: 'ChartLine', t: 'Server Response Time', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyClientResponseTimeTrend',
+ c: 'ChartLine', t: 'Client Response Time', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyServerThroughputTrend',
+ c: 'ChartLine', t: 'Server Throughput', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyClientThroughputTrend',
+ c: 'ChartLine', t: 'Client Throughput', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyServerSLATrend', c: 'ChartLine', t:
'Server SLA', w: 3, h: 250},
+ {o: 'ServiceDependency', d: 'dependencyClientSLATrend', c: 'ChartLine', t:
'Client SLA', w: 3, h: 250},
],
proxy: [],
database: [
