You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/09/05 08:57:07 UTC
[incubator-skywalking-ui] 01/02: Refactor trace page for v6 protocol
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 6.0.0/dev
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit 5521695eb66ab9a257733cac7d51a7a8d8452f72
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Wed Sep 5 15:21:18 2018 +0800
Refactor trace page for v6 protocol
---
.roadhogrc.mock.js | 27 ++--
mock/metadata.js | 6 +
mock/trace.js | 299 +++++++++++++++++--------------------
query-protocol | 2 +-
src/components/TraceStack/index.js | 10 +-
src/models/service.js | 2 +-
src/models/trace.js | 18 +--
src/routes/Trace/TraceSearch.js | 12 +-
8 files changed, 184 insertions(+), 192 deletions(-)
diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 52159cb..9e34ccf 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -6,10 +6,10 @@ import { getAllApplication, getApplication } from './mock/application';
import { searchServer, getServer } from './mock/server';
import { searchService, getService } from './mock/service';
import { getAlarm, getNoticeAlarm, AlarmTrend } from './mock/alarm';
-import { getAllApplication as getAllApplicationForTrace, getTrace, getSpans } from './mock/trace'
+import { TraceBrief, Trace } from './mock/trace'
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import { graphql } from 'graphql';
-import { ClusterBrief } from './mock/metadata';
+import { ClusterBrief, getAllServices } from './mock/metadata';
import { Thermodynamic } from './mock/metric';
import { getTopN } from './mock/aggregation';
@@ -17,21 +17,33 @@ const noMock = process.env.NO_MOCK === 'true';
const resolvers = {
Query: {
- getTopN
+ getTopN,
+ getAllServices,
}
}
const schema = makeExecutableSchema({ typeDefs: [
+ "scalar Long",
fs.readFileSync('query-protocol/common.graphqls', 'utf8'),
fs.readFileSync('query-protocol/metadata.graphqls', 'utf8'),
fs.readFileSync('query-protocol/alarm.graphqls', 'utf8'),
fs.readFileSync('query-protocol/metric.graphqls', 'utf8'),
fs.readFileSync('query-protocol/aggregation.graphqls', 'utf8'),
+ fs.readFileSync('query-protocol/trace.graphqls', 'utf8'),
], resolvers });
-addMockFunctionsToSchema({ schema, mocks: {
- ClusterBrief, Thermodynamic, AlarmTrend
-}, preserveResolvers: true });
+addMockFunctionsToSchema({
+ schema,
+ mocks: {
+ Long: () => 1,
+ ClusterBrief,
+ Thermodynamic,
+ AlarmTrend,
+ TraceBrief,
+ Trace,
+ },
+ preserveResolvers: true
+});
const proxy = {
'POST /api/graphql': (req, res) => {
@@ -48,9 +60,6 @@ const proxy = {
'POST /api/service/options': getAllApplication,
'POST /api/alarm': getAlarm,
'POST /api/notice': getNoticeAlarm,
- 'POST /api/trace/options': getAllApplicationForTrace,
- 'POST /api/trace': getTrace,
- 'POST /api/spans': getSpans,
'POST /api/login/account': (req, res) => {
const { password, userName } = req.body;
if (password === '888888' && userName === 'admin') {
diff --git a/mock/metadata.js b/mock/metadata.js
index cd1630d..351f7f6 100644
--- a/mock/metadata.js
+++ b/mock/metadata.js
@@ -26,4 +26,10 @@ export default {
'numOfMQ|1-100': 1,
})
,
+ getAllServices: () => {
+ const data = mockjs.mock({
+ 'serviceId|20-50': [{ 'id|+1': 3, name: function() { return `app-${this.id}`; } }], // eslint-disable-line
+ });
+ return data.serviceId;
+ }
};
diff --git a/mock/trace.js b/mock/trace.js
index 0a78633..3922bcf 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -19,170 +19,147 @@
import mockjs from 'mockjs';
export default {
- getAllApplication(req, res) {
- res.json(mockjs.mock(
- {
- data: {
- 'applicationId|20-50': [{ 'key|+1': 3, label: function() { return `app-${this.key}`; } }], // eslint-disable-line
- },
- }
- ));
- },
- getTrace(req, res) {
+ TraceBrief: () => {
let offset = 0;
- res.json(mockjs.mock(
+ return mockjs.mock({
+ 'traces|20': [{
+ segmentId: '@id',
+ 'operationNames|1-2': ['@word(100)'],
+ duration: '@natural(100, 5000)',
+ start: function() { // eslint-disable-line
+ offset = offset + 3600000; // eslint-disable-line
+ const now = new Date().getTime(); // eslint-disable-line
+ return `${now + offset}`;
+ },// eslint-disable-line
+ 'isError|1': true,
+ 'traceIds|1-3': ['@guid'],
+ }],
+ total: '@natural(20, 1000)',
+ })
+ },
+ Trace: () => mockjs.mock({
+ spans: [
+ {
+ spanId: 1,
+ segmentId: 1,
+ startTime: 1516151345000,
+ serviceCode: 'xx',
+ endTime: 1516151355000,
+ operationName: '/user/tt',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ tags: [{ key: 'db.type', value: 'aa' }],
+ 'logs|2-10': [{ 'time|+1': 1516151345000,
+ data: [
+ { key: 'db.type', value: 'aa' },
+ { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethod [...]
+ ] }],
+ 'isError|1': true,
+ },
+ {
+ spanId: 2,
+ parentSpanId: 1,
+ segmentId: 1,
+ serviceCode: 'yy',
+ startTime: 1516151348000,
+ endTime: 1516151351000,
+ operationName: '/sql/qq',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ tags: [{ key: 'db.type', value: 'aa' }],
+ 'isError|1': true,
+ },
+ {
+ spanId: 3,
+ parentSpanId: 2,
+ segmentId: 1,
+ serviceCode: 'yy',
+ startTime: 1516151349312,
+ endTime: 1516151350728,
+ operationName: '/sql/qq/xxxxxxxfdfdfdfdf().xxxxx/jjjjjj',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ tags: [{ key: 'db.type', value: 'aa' }],
+ 'isError|1': true,
+ },
{
- data: {
- queryBasicTraces: {
- 'traces|20': [{
- key: '@id',
- 'operationNames|1-2': ['@word(100)'],
- duration: '@natural(100, 5000)',
- start: function() { // eslint-disable-line
- offset = offset + 3600000; // eslint-disable-line
- const now = new Date().getTime(); // eslint-disable-line
- return `${now + offset}`;
- },// eslint-disable-line
- 'isError|1': true,
- 'traceIds|1-3': ['@guid'],
- }],
- total: '@natural(20, 1000)',
+ spanId: 4,
+ parentSpanId: 1,
+ segmentId: 1,
+ serviceCode: 'zz',
+ startTime: 1516151351000,
+ endTime: 1516151354000,
+ operationName: '/sql/qq',
+ 'type|1': ['Local', 'Entry', 'Exit'],
+ 'component|1': ['MySQL', 'H2', 'Spring'],
+ peer: '@ip',
+ tags: [{ key: 'db.type', value: 'aa' }],
+ 'isError|1': true,
+ },
+ {
+ spanId: 5,
+ parentSpanId: 1,
+ segmentId: 1,
+ serviceCode: 'zz',
+ startTime: 1516151351000,
+ endTime: 1516151354000,
+ operationName: '/mq/producer',
+ 'type|1': ['Exit'],
+ 'component|1': ['RockerMQ'],
+ peer: '@ip',
+ tags: [{ key: 'producer', value: 'tt' }],
+ 'isError|1': true,
+ },
+ {
+ spanId: 6,
+ segmentId: 1,
+ serviceCode: 'kk',
+ startTime: 1516151355000,
+ endTime: 1516151360000,
+ operationName: '/mq/consumer',
+ 'type|1': ['Entry'],
+ 'component|1': ['RockerMQ'],
+ peer: '@ip',
+ tags: [{ key: 'consumer', value: 'tt' }],
+ refs: [
+ {
+ parentSpanId: 5,
+ parentSegmentId: 1,
},
- },
- }
- ));
- },
- getSpans(req, res) {
- res.json(mockjs.mock(
+ ],
+ 'isError|1': true,
+ },
{
- data: {
- queryTrace: {
- spans: [
- {
- spanId: 1,
- segmentId: 1,
- startTime: 1516151345000,
- applicationCode: 'xx',
- endTime: 1516151355000,
- operationName: '/user/tt',
- 'type|1': ['Local', 'Entry', 'Exit'],
- 'component|1': ['MySQL', 'H2', 'Spring'],
- peer: '@ip',
- tags: [{ key: 'db.type', value: 'aa' }],
- 'logs|2-10': [{ 'time|+1': 1516151345000,
- data: [
- { key: 'db.type', value: 'aa' },
- { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(Delegati [...]
- ] }],
- 'isError|1': true,
- },
- {
- spanId: 2,
- parentSpanId: 1,
- segmentId: 1,
- applicationCode: 'yy',
- startTime: 1516151348000,
- endTime: 1516151351000,
- operationName: '/sql/qq',
- 'type|1': ['Local', 'Entry', 'Exit'],
- 'component|1': ['MySQL', 'H2', 'Spring'],
- peer: '@ip',
- tags: [{ key: 'db.type', value: 'aa' }],
- 'isError|1': true,
- },
- {
- spanId: 3,
- parentSpanId: 2,
- segmentId: 1,
- applicationCode: 'yy',
- startTime: 1516151349312,
- endTime: 1516151350728,
- operationName: '/sql/qq/xxxxxxxfdfdfdfdf().xxxxx/jjjjjj',
- 'type|1': ['Local', 'Entry', 'Exit'],
- 'component|1': ['MySQL', 'H2', 'Spring'],
- peer: '@ip',
- tags: [{ key: 'db.type', value: 'aa' }],
- 'isError|1': true,
- },
- {
- spanId: 4,
- parentSpanId: 1,
- segmentId: 1,
- applicationCode: 'zz',
- startTime: 1516151351000,
- endTime: 1516151354000,
- operationName: '/sql/qq',
- 'type|1': ['Local', 'Entry', 'Exit'],
- 'component|1': ['MySQL', 'H2', 'Spring'],
- peer: '@ip',
- tags: [{ key: 'db.type', value: 'aa' }],
- 'isError|1': true,
- },
- {
- spanId: 5,
- parentSpanId: 1,
- segmentId: 1,
- applicationCode: 'zz',
- startTime: 1516151351000,
- endTime: 1516151354000,
- operationName: '/mq/producer',
- 'type|1': ['Exit'],
- 'component|1': ['RockerMQ'],
- peer: '@ip',
- tags: [{ key: 'producer', value: 'tt' }],
- 'isError|1': true,
- },
- {
- spanId: 6,
- segmentId: 1,
- applicationCode: 'kk',
- startTime: 1516151355000,
- endTime: 1516151360000,
- operationName: '/mq/consumer',
- 'type|1': ['Entry'],
- 'component|1': ['RockerMQ'],
- peer: '@ip',
- tags: [{ key: 'consumer', value: 'tt' }],
- refs: [
- {
- parentSpanId: 5,
- parentSegmentId: 1,
- },
- ],
- 'isError|1': true,
- },
- {
- spanId: 6,
- segmentId: 1,
- applicationCode: 'kk',
- startTime: 1516151355000,
- endTime: 1516151360000,
- operationName: '/mq/consumer',
- 'type|1': ['Entry'],
- 'component|1': ['Kafka'],
- peer: '@ip',
- tags: [{ key: 'consumer', value: 'tt' }],
- refs: [
- {
- traceId: 121212,
- type: 'CROSS_PROCESS',
- },
- {
- traceId: 22223333,
- type: 'CROSS_THREAD',
- },
- ],
- 'isError|1': true,
- 'logs|2-10': [{ 'time|+1': 1516151345000,
- data: [
- { key: 'db.type', value: 'aa' },
- { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(Delegati [...]
- ] }],
- },
- ],
+ spanId: 6,
+ segmentId: 1,
+ serviceCode: 'kk',
+ startTime: 1516151355000,
+ endTime: 1516151360000,
+ operationName: '/mq/consumer',
+ 'type|1': ['Entry'],
+ 'component|1': ['Kafka'],
+ peer: '@ip',
+ tags: [{ key: 'consumer', value: 'tt' }],
+ refs: [
+ {
+ traceId: 121212,
+ type: 'CROSS_PROCESS',
},
- },
- }
- ));
- },
+ {
+ traceId: 22223333,
+ type: 'CROSS_THREAD',
+ },
+ ],
+ 'isError|1': true,
+ 'logs|2-10': [{ 'time|+1': 1516151345000,
+ data: [
+ { key: 'db.type', value: 'aa' },
+ { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethod [...]
+ ] }],
+ },
+ ],
+ }),
};
diff --git a/query-protocol b/query-protocol
index 98e8b34..9a6bb77 160000
--- a/query-protocol
+++ b/query-protocol
@@ -1 +1 @@
-Subproject commit 98e8b340cdefb262083885b877722e46e9313ff6
+Subproject commit 9a6bb77ac06f36ab4949ea193b152f22d09ab8a8
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index de35ec6..a469bd6 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -54,8 +54,8 @@ class TraceStack extends PureComponent {
let colorIndex = 0;
spans.forEach((span) => {
const { colorMap } = this.state;
- if (!colorMap[span.applicationCode]) {
- colorMap[span.applicationCode] = colors[colorIndex];
+ if (!colorMap[span.serviceCode]) {
+ colorMap[span.serviceCode] = colors[colorIndex];
colorIndex = (colorIndex < colors.length - 1) ? (colorIndex + 1) : 0;
}
this.buildNode(span);
@@ -80,7 +80,7 @@ class TraceStack extends PureComponent {
buildNode = (span) => {
const { nodes, idMap } = this.state;
const node = {};
- node.applicationCode = span.applicationCode;
+ node.serviceCode = span.serviceCode;
node.startTime = span.startTime;
node.endTime = span.endTime;
node.duration = span.endTime - span.startTime;
@@ -153,7 +153,7 @@ class TraceStack extends PureComponent {
const positionMap = {};
nodes.forEach((node, index) => {
const { startOffset: startTime, duration, content,
- applicationCode, spanSegId, parentSpanSegId } = node;
+ serviceCode, spanSegId, parentSpanSegId } = node;
const rectWith = ((duration * width) / (bap[1] * (10 ** (bap[0] - 4)))) / 100;
const beginX = ((startTime * width) / (bap[1] * (10 ** (bap[0] - 4)))) / 100;
@@ -176,7 +176,7 @@ class TraceStack extends PureComponent {
.on('mouseover', () => { this.selectTimeline(container, true); })
.on('mouseout', () => { this.selectTimeline(container, false); })
.on('click', () => { this.showSpanModal(node, position, container); })
- .style('fill', colorMap[applicationCode]);
+ .style('fill', colorMap[serviceCode]);
bar.append('text')
.attr('x', beginX + 5)
diff --git a/src/models/service.js b/src/models/service.js
index 4324b54..bd873ec 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -87,7 +87,7 @@ const spanQuery = `query Spans($traceId: ID!) {
parentSpanId
type
}
- applicationCode
+ serviceCode
startTime
endTime
operationName
diff --git a/src/models/trace.js b/src/models/trace.js
index c118deb..9f99ebe 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -16,13 +16,13 @@
*/
import moment from 'moment';
-import { query } from '../services/graphql';
-import { generateModal } from '../utils/models';
+import { exec } from '../services/graphql';
+import { base } from '../utils/models';
import { generateDuration } from '../utils/time';
const optionsQuery = `
- query ApplicationOption($duration: Duration!) {
- applicationId: getAllApplication(duration: $duration) {
+ query ServiceOption($duration: Duration!) {
+ serviceId: getAllServices(duration: $duration) {
key: id
label: name
}
@@ -58,7 +58,7 @@ const spanQuery = `query Spans($traceId: ID!) {
parentSpanId
type
}
- applicationCode
+ serviceCode
startTime
endTime
operationName
@@ -82,7 +82,7 @@ const spanQuery = `query Spans($traceId: ID!) {
}
}`;
-export default generateModal({
+export default base({
namespace: 'trace',
state: {
queryBasicTraces: {
@@ -110,14 +110,14 @@ export default generateModal({
},
optionsQuery,
defaultOption: {
- applicationId: {
- label: 'All Application',
+ serviceId: {
+ label: 'All Service',
},
},
dataQuery,
effects: {
*fetchSpans({ payload }, { call, put }) {
- const response = yield call(query, 'spans', { query: spanQuery, variables: payload.variables });
+ const response = yield call(exec, { query: spanQuery, variables: payload.variables });
yield put({
type: 'saveSpans',
payload: response,
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index 26a3c6f..712caaa 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -231,13 +231,13 @@ export default class Trace extends PureComponent {
/>
)}
</FormItem>
- <FormItem label="Application">
- {getFieldDecorator('applicationId')(
- <Select placeholder="All application" style={{ width: '100%' }}>
- {options.applicationId && options.applicationId.map((app) => {
+ <FormItem label="Service">
+ {getFieldDecorator('serviceId')(
+ <Select placeholder="All service" style={{ width: '100%' }}>
+ {options.serviceId && options.serviceId.map((service) => {
return (
- <Option key={app.key ? app.key : -1} value={app.key}>
- {app.label}
+ <Option key={service.key ? service.key : -1} value={service.key}>
+ {service.label}
</Option>);
})}
</Select>