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 <[email protected]> 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 [email protected].
