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/20 03:22:42 UTC
[incubator-skywalking-ui] branch 5.0.0/beta updated (d0d4703 ->
09fb285)
This is an automated email from the ASF dual-hosted git repository.
hanahmily pushed a change to branch 5.0.0/beta
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.
from d0d4703 Add span detail card
new 5c33320 Add time line hover styles
new 09fb285 Add error icon in timeline
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/components/TraceStack/index.js | 46 +++++++++++++++++++++++++++++-------
src/components/TraceStack/index.less | 1 +
src/routes/Trace/TraceTimeline.js | 16 +++++++++++++
3 files changed, 54 insertions(+), 9 deletions(-)
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 02/02: Add error icon in timeline
Posted by ha...@apache.org.
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
commit 09fb285159fb1ba1af205770f63dbf1900c47a19
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Apr 20 11:17:52 2018 +0800
Add error icon in timeline
---
src/components/TraceStack/index.js | 14 +++++++++++---
src/routes/Trace/TraceTimeline.js | 16 ++++++++++++++++
2 files changed, 27 insertions(+), 3 deletions(-)
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index a13b844..a697699 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -151,16 +151,17 @@ class TraceStack extends PureComponent {
const beginY = index * height;
positionMap[spanSegId] = { x: beginX, y: beginY };
+ const rectHeight = height - margin;
const container = bar.append('rect').attr('spanSegId', spanSegId).attr('x', -5).attr('y', beginY - 5)
.attr('width', width + 10)
- .attr('height', (height - margin) + 10)
+ .attr('height', rectHeight + 10)
.attr('class', styles.backgroudHide)
.on('mouseover', () => { this.selectTimeline(container, true); })
.on('mouseout', () => { this.selectTimeline(container, false); })
.on('click', () => { this.showSpanModal(node); });
bar.append('rect').attr('x', beginX).attr('y', beginY).attr('width', rectWith)
- .attr('height', height - margin)
+ .attr('height', rectHeight)
.on('mouseover', () => { this.selectTimeline(container, true); })
.on('mouseout', () => { this.selectTimeline(container, false); })
.on('click', () => { this.showSpanModal(node); })
@@ -174,6 +175,14 @@ class TraceStack extends PureComponent {
.on('mouseout', () => { this.selectTimeline(container, false); })
.on('click', () => { this.showSpanModal(node); })
.text(`${content} ${formatDuration(duration)}`);
+ if (node.isError) {
+ bar.append('svg:image')
+ .attr('xlink:href', 'img/icon/error.png')
+ .attr('x', width + (rectHeight / 2))
+ .attr('y', beginY)
+ .attr('width', rectHeight)
+ .attr('height', rectHeight);
+ }
if (index > 0 && positionMap[parentSpanSegId]) {
const parentX = positionMap[parentSpanSegId].x;
const parentY = positionMap[parentSpanSegId].y;
@@ -338,7 +347,6 @@ class TraceStack extends PureComponent {
</div>
<div className={styles.duration} ref={(el) => { this.duration = el; }} />
<div ref={(el) => { this.axis = el; }} />
-
{data ? (
<Card
type="inner"
diff --git a/src/routes/Trace/TraceTimeline.js b/src/routes/Trace/TraceTimeline.js
index a117b71..5b5c118 100644
--- a/src/routes/Trace/TraceTimeline.js
+++ b/src/routes/Trace/TraceTimeline.js
@@ -17,9 +17,12 @@
import React, { PureComponent } from 'react';
import { Card, Badge, Row, Col, Tag } from 'antd';
+import moment from 'moment';
import { formatDuration } from '../../utils/time';
import TraceStack from '../../components/TraceStack';
+const timeFormat = 'YYYY-MM-DD HH:mm:ss';
+
export default class TraceTimeLine extends PureComponent {
getTotalDuration = (spans) => {
let minStartTime = 0;
@@ -34,6 +37,15 @@ export default class TraceTimeLine extends PureComponent {
});
return formatDuration(maxEndTime - minStartTime);
}
+ getStartTime = (spans) => {
+ let minStartTime = 0;
+ spans.forEach((span) => {
+ if (minStartTime < 1 || minStartTime > span.startTime) {
+ minStartTime = span.startTime;
+ }
+ });
+ return moment(minStartTime).format(timeFormat);
+ }
renderTitle = (items) => {
return (
@@ -62,6 +74,10 @@ export default class TraceTimeLine extends PureComponent {
title={
this.renderTitle([
{
+ name: 'Start Time',
+ count: this.getStartTime(spans),
+ },
+ {
name: 'Total Duration',
count: this.getTotalDuration(spans),
},
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.
[incubator-skywalking-ui] 01/02: Add time line hover styles
Posted by ha...@apache.org.
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
commit 5c333203ef8b60f1373b7ffa528e10faaac75066
Author: hanahmily <ha...@gmail.com>
AuthorDate: Fri Apr 20 10:09:33 2018 +0800
Add time line hover styles
---
src/components/TraceStack/index.js | 32 ++++++++++++++++++++++++++------
src/components/TraceStack/index.less | 1 +
2 files changed, 27 insertions(+), 6 deletions(-)
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index 2d892ae..a13b844 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -155,22 +155,24 @@ class TraceStack extends PureComponent {
.attr('width', width + 10)
.attr('height', (height - margin) + 10)
.attr('class', styles.backgroudHide)
- .on('mouseover', () => { container.attr('class', styles.backgroud); })
- .on('mouseout', () => { container.attr('class', styles.backgroudHide); })
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
.on('click', () => { this.showSpanModal(node); });
bar.append('rect').attr('x', beginX).attr('y', beginY).attr('width', rectWith)
.attr('height', height - margin)
- .on('mouseover', () => { container.attr('class', styles.backgroud); })
- .on('mouseout', () => { container.attr('class', styles.backgroudHide); })
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.style('fill', colorMap[applicationCode]);
bar.append('text')
.attr('x', beginX + 5)
.attr('y', (index * height) + (height / 2))
.attr('class', styles.rectText)
- .on('mouseover', () => { container.attr('class', styles.backgroud); })
- .on('mouseout', () => { container.attr('class', styles.backgroudHide); })
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.text(`${content} ${formatDuration(duration)}`);
if (index > 0 && positionMap[parentSpanSegId]) {
const parentX = positionMap[parentSpanSegId].x;
@@ -196,23 +198,38 @@ class TraceStack extends PureComponent {
const selfMiddleY = beginY + ((height - margin) / 2);
if ((beginX - parentX) < 10) {
svgContainer.append('line').attr('x1', parentLeftBottomX - offX).attr('y1', parentLeftBottomY - offY).attr('class', styles.connlines)
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.attr('x2', parentLeftBottomX)
.attr('y2', parentLeftBottomY - offY);
svgContainer.append('line').attr('x1', parentLeftBottomX - offX).attr('y1', parentLeftBottomY - offY).attr('class', styles.connlines)
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.attr('x2', parentLeftBottomX - offX)
.attr('y2', selfMiddleY);
svgContainer.append('line').attr('x1', parentLeftBottomX - offX).attr('y1', selfMiddleY).attr('class', styles.connlines)
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.attr('x2', selfMiddleX - 5)
.attr('y2', selfMiddleY)
.attr('marker-end', 'url(#arrow)');
} else {
svgContainer.append('line').attr('x1', parentLeftBottomX).attr('y1', parentLeftBottomY).attr('class', styles.connlines)
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.attr('x2', parentLeftBottomX)
.attr('y2', selfMiddleY);
svgContainer.append('line').attr('x1', parentLeftBottomX).attr('y1', selfMiddleY).attr('class', styles.connlines)
+ .on('mouseover', () => { this.selectTimeline(container, true); })
+ .on('mouseout', () => { this.selectTimeline(container, false); })
+ .on('click', () => { this.showSpanModal(node); })
.attr('x2', selfMiddleX - 5)
.attr('y2', selfMiddleY)
.attr('marker-end', 'url(#arrow)');
@@ -220,6 +237,9 @@ class TraceStack extends PureComponent {
}
});
}
+ selectTimeline = (container, isOver) => {
+ container.attr('class', isOver ? styles.backgroud : styles.backgroudHide);
+ }
showSpanModal = (span) => {
this.setState({
...this.state,
diff --git a/src/components/TraceStack/index.less b/src/components/TraceStack/index.less
index b9969d1..4fd97a9 100644
--- a/src/components/TraceStack/index.less
+++ b/src/components/TraceStack/index.less
@@ -63,6 +63,7 @@
.backgroud {
opacity: 0.2;
+ fill: #1890ff;
}
.connlines {
--
To stop receiving notification emails like this one, please contact
hanahmily@apache.org.