[incubator-skywalking-ui] 02/02: Add error icon in timeline

[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.