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/03/05 00:43:07 UTC
[incubator-skywalking-ui] 01/01: Amend trace page
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch fix/e2e
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
commit 2ef1aa38e7cc060a26b8ecba5c1c2851aaea7a0c
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Mar 2 14:10:30 2018 +0800
Amend trace page
---
mock/trace.js | 5 ++--
src/components/TraceTable/index.js | 60 +++++++++++++++++++++++++++++++-------
src/models/trace.js | 10 +++++--
src/routes/Trace/Trace.js | 15 ++++------
4 files changed, 65 insertions(+), 25 deletions(-)
diff --git a/mock/trace.js b/mock/trace.js
index c1167c5..185dfec 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -16,9 +16,10 @@ export default {
data: {
queryBasicTraces: {
'traces|10': [{
- key: '@url',
+ key: '@id',
+ operationName: '@url',
duration: '@natural(100, 1000)',
- start: '@datetime',
+ start: new Date().getTime(),
'isError|1': true,
'traceIds|1-3': ['@guid'],
}],
diff --git a/src/components/TraceTable/index.js b/src/components/TraceTable/index.js
index de46a1c..07f574c 100644
--- a/src/components/TraceTable/index.js
+++ b/src/components/TraceTable/index.js
@@ -1,33 +1,73 @@
import React, { PureComponent } from 'react';
-import { Table } from 'antd';
+import { Badge, Table, Collapse } from 'antd';
+import moment from 'moment';
import TraceStack from '../../components/TraceStack';
import styles from './index.less';
+const { Panel } = Collapse;
+
class TraceTable extends PureComponent {
+ handleExtend = (expanded, record) => {
+ if (!expanded) {
+ return;
+ }
+ const { traceIds = [] } = record;
+ if (traceIds.length < 1) {
+ return;
+ }
+ if (traceIds.length === 1) {
+ this.props.onExpand(record.key, traceIds[0]);
+ }
+ }
+ renderExtend = (record) => {
+ const { spansContainer = {} } = record;
+ const keys = Object.keys(spansContainer);
+ const { traceIds = [] } = record;
+ const size = traceIds.length;
+ if (size < 1) {
+ return <span style={{ display: 'none' }} />;
+ } else if (size === 1) {
+ return (keys.length < 1) ? null : <TraceStack spans={spansContainer[keys[0]]} />;
+ }
+ return (
+ <Collapse
+ bordered={false}
+ onChange={(key) => { if (!spansContainer[key]) { this.props.onExpand(record.key, key); } }}
+ >
+ {traceIds.map((k) => {
+ return (
+ <Panel header={k} key={k} >
+ { spansContainer[k] ? (<TraceStack spans={spansContainer[k]} />) : null }
+ </Panel>
+ );
+ })}
+ </Collapse>);
+ }
render() {
- const { data: traces, pagination, loading, onExpand, onChange } = this.props;
+ const { data: traces, pagination, loading, onChange } = this.props;
const columns = [
{
title: 'OperationName',
- dataIndex: 'key',
+ dataIndex: 'operationName',
},
{
title: 'Duration',
- dataIndex: 'duration',
+ render: (text, record) => `${record.duration}ms`,
},
{
title: 'StartTime',
- dataIndex: 'start',
+ render: (text, record) => {
+ return moment(record.startTime).format('YYYY-MM-DD HH:mm:ss.SSS');
+ },
},
{
title: 'State',
- dataIndex: 'isError',
render: (text, record) => {
if (record.isError) {
- return 'Success';
+ return <Badge status="success" text="Success" />;
} else {
- return 'Error';
+ return <Badge status="error" text="Error" />;
}
},
},
@@ -54,8 +94,8 @@ class TraceTable extends PureComponent {
columns={columns}
pagination={pagination}
onChange={onChange}
- onExpand={onExpand}
- expandedRowRender={record => (record.spans ? <TraceStack spans={record.spans} /> : null)}
+ onExpand={this.handleExtend}
+ expandedRowRender={this.renderExtend}
/>
</div>
);
diff --git a/src/models/trace.js b/src/models/trace.js
index b612bfa..04854c9 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -14,7 +14,8 @@ const dataQuery = `
query BasicTraces($condition: TraceQueryCondition) {
queryBasicTraces(condition: $condition) {
traces {
- key: operationName
+ key: segmentId
+ operationName
duration
start
isError
@@ -83,16 +84,19 @@ export default generateModal({
type: 'saveSpans',
payload: response,
key: payload.key,
+ traceId: payload.variables.traceId,
});
},
},
reducers: {
saveSpans(state, action) {
- const { key } = action;
+ const { key, traceId } = action;
const { queryTrace: { spans } } = action.payload.data;
const { data: { queryBasicTraces: { traces } } } = state;
const trace = traces.find(t => t.key === key);
- trace.spans = spans;
+ const { spansContainer = {} } = trace;
+ spansContainer[traceId] = spans;
+ trace.spansContainer = spansContainer;
return {
...state,
};
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 6d376d9..d46cd79 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -94,17 +94,12 @@ export default class Trace extends PureComponent {
},
});
}
- handleTableExpand = (expanded, record) => {
+ handleTableExpand = (key, traceId) => {
const { dispatch } = this.props;
- if (expanded) {
- const { traceIds = [] } = record;
- if (traceIds.length > 0) {
- dispatch({
- type: 'trace/fetchSpans',
- payload: { variables: { traceId: traceIds[0] }, key: record.key },
- });
- }
- }
+ dispatch({
+ type: 'trace/fetchSpans',
+ payload: { variables: { traceId }, key },
+ });
}
renderForm() {
const { getFieldDecorator } = this.props.form;
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.