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/04/19 15:47:28 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated: Add span
detail card
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a commit to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git
The following commit(s) were added to refs/heads/5.0.0/beta by this push:
new d0d4703 Add span detail card
d0d4703 is described below
commit d0d4703bf24c87a52654fefadc63ae23829eabaf
Author: gaohongtao <ha...@gmail.com>
AuthorDate: Thu Apr 19 23:46:45 2018 +0800
Add span detail card
---
public/img/icon/error.png | Bin 0 -> 6775 bytes
src/components/TraceStack/index.js | 126 ++++++++++++++++++-----------------
src/components/TraceStack/index.less | 4 +-
src/routes/Trace/TraceTimeline.js | 6 +-
4 files changed, 69 insertions(+), 67 deletions(-)
diff --git a/public/img/icon/error.png b/public/img/icon/error.png
new file mode 100644
index 0000000..41e0789
Binary files /dev/null and b/public/img/icon/error.png differ
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index 005bdc7..2d892ae 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -17,13 +17,15 @@
import React, { PureComponent } from 'react';
-import { Tag, Modal, List, Tabs } from 'antd';
+import { Tag, List, Tabs, Card, Row, Col, Badge } from 'antd';
import * as d3 from 'd3';
import moment from 'moment';
import { formatDuration } from '../../utils/time';
+import DescriptionList from '../../components/DescriptionList';
import styles from './index.less';
const { TabPane } = Tabs;
+const { Description } = DescriptionList;
const colors = [
'#1890FF',
@@ -169,7 +171,7 @@ class TraceStack extends PureComponent {
.attr('class', styles.rectText)
.on('mouseover', () => { container.attr('class', styles.backgroud); })
.on('mouseout', () => { container.attr('class', styles.backgroudHide); })
- .text(`${content} ${formatDuration(duration)}`);
+ .text(`${content} ${formatDuration(duration)}`);
if (index > 0 && positionMap[parentSpanSegId]) {
const parentX = positionMap[parentSpanSegId].x;
const parentY = positionMap[parentSpanSegId].y;
@@ -218,12 +220,6 @@ class TraceStack extends PureComponent {
}
});
}
- handleCancel = () => {
- this.setState({
- ...this.state,
- visible: false,
- });
- }
showSpanModal = (span) => {
this.setState({
...this.state,
@@ -244,6 +240,22 @@ class TraceStack extends PureComponent {
this.drawAxis();
this.displayData();
}
+ renderTitle = (items) => {
+ return (
+ <Row type="flex" justify="start" gutter={15}>
+ {
+ items.map((_) => {
+ return (
+ <Col key={_.name}>
+ <span>{_.name}</span>
+ <Badge count={_.count} style={{ backgroundColor: '#1890FF', marginLeft: 5 }} />
+ </Col>
+ );
+ })
+ }
+ </Row>
+ );
+ }
render() {
const { colorMap, span = {} } = this.state;
const legendButtons = Object.keys(colorMap).map(key =>
@@ -252,14 +264,6 @@ class TraceStack extends PureComponent {
if (span.content) {
const base = [
{
- title: 'operation name',
- content: span.content,
- },
- {
- title: 'duration',
- content: `${moment(span.startTime).format(timeFormat)} - ${moment(span.endTime).format(timeFormat)}`,
- },
- {
title: 'span type',
content: span.type,
},
@@ -278,38 +282,33 @@ class TraceStack extends PureComponent {
];
data = base.concat(span.tags.map(t => ({ title: t.key, content: t.value })));
}
- const logs = span.logs ? span.logs.map(l => (
- <TabPane tab={moment(l.time).format('mm:ss.SSS')} key={l.time}>
+ const logs = span.logs ? (
+ <TabPane tab="Logs" key={2}>
<List
itemLayout="horizontal"
- dataSource={l.data}
- renderItem={item => (
+ dataSource={span.logs}
+ renderItem={log => (
<List.Item>
<List.Item.Meta
size="small"
- title={item.key}
- description={item.value}
+ title={moment(log.time).format('mm:ss.SSS')}
+ description={
+ <DescriptionList layout="vertical">
+ {log.data.map(_ =>
+ <Description key={_.key} term={_.key}>{_.value}</Description>)}
+ </DescriptionList>
+ }
/>
</List.Item>
)}
/>
</TabPane>
- )) : null;
- const relatedTraces = span.parentSpanSegId ? null : (
+ ) : null;
+ const relatedTraces = (span.parentSpanSegId || !span.refs) ? null : (
<TabPane tab="Related Trace" key={3}>
- <List
- itemLayout="horizontal"
- dataSource={span.refs}
- renderItem={item => (
- <List.Item>
- <List.Item.Meta
- size="small"
- title={item.type}
- description={item.traceId}
- />
- </List.Item>
- )}
- />
+ <DescriptionList layout="vertical">
+ {span.refs.map(_ => <Description key={_.type} term={_.type}>{_.traceId}</Description>)}
+ </DescriptionList>
</TabPane>
);
return (
@@ -319,31 +318,34 @@ class TraceStack extends PureComponent {
</div>
<div className={styles.duration} ref={(el) => { this.duration = el; }} />
<div ref={(el) => { this.axis = el; }} />
- <Modal
- title="Span Info"
- visible={this.state.visible}
- onCancel={this.handleCancel}
- footer={null}
- >
- <Tabs defaultActiveKey="1" tabPosition="left">
- <TabPane tab="Tags" key="1">
- <List
- itemLayout="horizontal"
- dataSource={data}
- renderItem={item => (
- <List.Item>
- <List.Item.Meta
- title={item.title}
- description={item.content}
- />
- </List.Item>
- )}
- />
- </TabPane>
- {logs}
- {relatedTraces}
- </Tabs>
- </Modal>
+
+ {data ? (
+ <Card
+ type="inner"
+ title={span.content}
+ >
+ {this.renderTitle([
+ {
+ name: 'Start Time',
+ count: `${moment(span.startTime).format(timeFormat)}`,
+ },
+ {
+ name: 'Duration',
+ count: `${formatDuration(span.duration)}`,
+ },
+ ])}
+ <Tabs defaultActiveKey="1">
+ <TabPane tab="Tags" key="1">
+ <DescriptionList layout="vertical">
+ {data.map(_ =>
+ <Description key={_.title} term={_.title}>{_.content}</Description>)}
+ </DescriptionList>
+ </TabPane>
+ {logs}
+ {relatedTraces}
+ </Tabs>
+ </Card>
+ ) : null}
</div>
);
}
diff --git a/src/components/TraceStack/index.less b/src/components/TraceStack/index.less
index eddeafb..b9969d1 100644
--- a/src/components/TraceStack/index.less
+++ b/src/components/TraceStack/index.less
@@ -39,8 +39,8 @@
}
.rectText {
- font: 10px sans-serif;
- font-weight: 100;
+ font: 11px;
+ font-weight: inherit;
fill: #fafafa;
}
diff --git a/src/routes/Trace/TraceTimeline.js b/src/routes/Trace/TraceTimeline.js
index 20344c7..a117b71 100644
--- a/src/routes/Trace/TraceTimeline.js
+++ b/src/routes/Trace/TraceTimeline.js
@@ -16,7 +16,7 @@
*/
import React, { PureComponent } from 'react';
-import { Card, Badge, Row, Col } from 'antd';
+import { Card, Badge, Row, Col, Tag } from 'antd';
import { formatDuration } from '../../utils/time';
import TraceStack from '../../components/TraceStack';
@@ -41,7 +41,7 @@ export default class TraceTimeLine extends PureComponent {
{
items.map((_) => {
return (
- <Col>
+ <Col key={_.name}>
<span>{_.name}</span>
<Badge count={_.count} style={{ backgroundColor: '#1890FF', marginLeft: 5 }} />
</Col>
@@ -72,8 +72,8 @@ export default class TraceTimeLine extends PureComponent {
])
}
>
+ <Tag style={{ marginBottom: 20 }}>{currentTraceId}</Tag>
<TraceStack spans={spans} />
- <span>Trace Id: {currentTraceId}</span>
</Card>
);
}
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.