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/01/17 08:35:24 UTC
[incubator-skywalking-ui] branch feature/5.0.0 updated: Attach
trace stack component to trace list
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch feature/5.0.0
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/feature/5.0.0 by this push:
new 2e25284 Attach trace stack component to trace list
2e25284 is described below
commit 2e2528437fc45740afbe62a385118d9df51ce202
Author: hanahmily <ha...@gmail.com>
AuthorDate: Wed Jan 17 16:33:39 2018 +0800
Attach trace stack component to trace list
---
src/main/frontend/.roadhogrc.mock.js | 3 ++-
src/main/frontend/mock/trace.js | 27 +++++++++++++++++++
.../frontend/src/components/TraceTable/index.js | 30 ++++++++++------------
src/main/frontend/src/models/trace.js | 18 +++++++++++++
src/main/frontend/src/routes/Trace/Trace.js | 17 +++++++++++-
5 files changed, 76 insertions(+), 19 deletions(-)
diff --git a/src/main/frontend/.roadhogrc.mock.js b/src/main/frontend/.roadhogrc.mock.js
index e45bc9c..d91f301 100644
--- a/src/main/frontend/.roadhogrc.mock.js
+++ b/src/main/frontend/.roadhogrc.mock.js
@@ -8,7 +8,7 @@ import { getApplication } from './mock/application';
import { getServer } from './mock/server';
import { getService } from './mock/service';
import { getAlarm } from './mock/alarm';
-import { getTrace } from './mock/trace'
+import { getTrace, getSpans } from './mock/trace'
// 是否禁用代理
const noProxy = process.env.NO_PROXY === 'true';
@@ -22,6 +22,7 @@ const proxy = {
'POST /api/service': getService,
'POST /api/alert': getAlarm,
'POST /api/trace': getTrace,
+ 'POST /api/spans': getSpans,
};
export default noProxy ? {} : delay(proxy, 1000);
diff --git a/src/main/frontend/mock/trace.js b/src/main/frontend/mock/trace.js
index acd0ce6..e52c3f0 100644
--- a/src/main/frontend/mock/trace.js
+++ b/src/main/frontend/mock/trace.js
@@ -19,4 +19,31 @@ export default {
}
));
},
+ getSpans(req, res) {
+ res.json(mockjs.mock(
+ {
+ data: {
+ queryTrace: {
+ spans: [
+ {
+ spanId: 1,
+ startTime: 1516151345000,
+ applicationCode: 'xx',
+ endTime: 1516151355000,
+ operationName: '/user/tt',
+ },
+ {
+ spanId: 2,
+ parentSpanId: 1,
+ applicationCode: 'yy',
+ startTime: 1516151348000,
+ endTime: 1516151351000,
+ operationName: '/sql/qq',
+ },
+ ],
+ },
+ },
+ }
+ ));
+ },
};
diff --git a/src/main/frontend/src/components/TraceTable/index.js b/src/main/frontend/src/components/TraceTable/index.js
index d5d85f6..df34695 100644
--- a/src/main/frontend/src/components/TraceTable/index.js
+++ b/src/main/frontend/src/components/TraceTable/index.js
@@ -1,14 +1,11 @@
import React, { PureComponent } from 'react';
import { Table } from 'antd';
+import TraceStack from '../../components/TraceStack';
import styles from './index.less';
class TraceTable extends PureComponent {
- handleTableChange = (pagination, filters, sorter) => {
- this.props.onChange(pagination, filters, sorter);
- }
-
render() {
- const { data: { traces, pagination }, loading } = this.props;
+ const { data: { traces, pagination }, loading, onExpand, onChange } = this.props;
const columns = [
{
@@ -26,16 +23,13 @@ class TraceTable extends PureComponent {
{
title: 'State',
dataIndex: 'isError',
- filters: [
- {
- text: 'Error',
- value: true,
- },
- {
- text: 'Success',
- value: false,
- },
- ],
+ render: (text, record) => {
+ if (record.isError) {
+ return 'Success';
+ } else {
+ return 'Error';
+ }
+ },
},
{
title: 'GlobalTraceId',
@@ -47,11 +41,13 @@ class TraceTable extends PureComponent {
<div className={styles.standardTable}>
<Table
loading={loading}
- rowKey={record => record.key}
+ rowKey={record => record.traceId}
dataSource={traces}
columns={columns}
pagination={pagination}
- onChange={this.handleTableChange}
+ onChange={onChange}
+ onExpand={onExpand}
+ expandedRowRender={record => (record.spans ? <TraceStack spans={record.spans} /> : null)}
/>
</div>
);
diff --git a/src/main/frontend/src/models/trace.js b/src/main/frontend/src/models/trace.js
index 1446200..b36ce3a 100644
--- a/src/main/frontend/src/models/trace.js
+++ b/src/main/frontend/src/models/trace.js
@@ -21,6 +21,14 @@ export default {
pagination,
});
},
+ *fetchSpans({ payload }, { call, put }) {
+ const response = yield call(query, 'spans', payload);
+ yield put({
+ type: 'saveSpans',
+ payload: response,
+ traceId: payload.variables.traceId,
+ });
+ },
},
reducers: {
@@ -38,5 +46,15 @@ export default {
},
};
},
+ saveSpans(state, action) {
+ const { traceId } = action;
+ const { queryTrace: { spans } } = action.payload.data;
+ const { queryBasicTraces: { traces } } = state;
+ const trace = traces.find(t => t.traceId === traceId);
+ trace.spans = spans;
+ return {
+ ...state,
+ };
+ },
},
};
diff --git a/src/main/frontend/src/routes/Trace/Trace.js b/src/main/frontend/src/routes/Trace/Trace.js
index 8742222..05f54cc 100644
--- a/src/main/frontend/src/routes/Trace/Trace.js
+++ b/src/main/frontend/src/routes/Trace/Trace.js
@@ -20,8 +20,13 @@ export default class Trace extends PureComponent {
state = {
formValues: {},
}
+ componentDidMount() {
+ this.handleSearch();
+ }
handleSearch = (e) => {
- e.preventDefault();
+ if (e) {
+ e.preventDefault();
+ }
const { dispatch, form, duration: { input } } = this.props;
form.validateFields((err, fieldsValue) => {
@@ -69,6 +74,15 @@ export default class Trace extends PureComponent {
pagination,
});
}
+ handleTableExpand = (expanded, record) => {
+ const { dispatch } = this.props;
+ if (expanded && !record.spans) {
+ dispatch({
+ type: 'trace/fetchSpans',
+ payload: { query, variables: { traceId: record.traceId } },
+ });
+ }
+ }
renderForm() {
const { getFieldDecorator } = this.props.form;
return (
@@ -129,6 +143,7 @@ export default class Trace extends PureComponent {
loading={loading}
data={queryBasicTraces}
onChange={this.handleTableChange}
+ onExpand={this.handleTableExpand}
/>
</div>
</Card>
--
To stop receiving notification emails like this one, please contact
['"commits@skywalking.apache.org" <co...@skywalking.apache.org>'].