Thundra-Trace-Chart

thundra-trace-chart is a React component to render open-tracing compatible traces and spans in a similar way to popular tools like Jeager and Zipkin. This component is using the project zipkin-lens in its roots.

This component is under development and may not be the best solution for a custom use case. So you may want to fork it, or we would be happy to accept your PR's.

For npm audit logs to save use this command; npm audit --no-unicode --no-color > "npm-audit-log-$(date +%s).txt"

tl;dr

• Install by executing npm install --save thundra-trace-chart or yarn add thundra-trace-chart.
• Import by adding import ThundraTraceChart from 'thundra-trace-chart'.
• Use by adding <ThundraTraceChart {...someProps} />.

Demo

Minimal demo page is included in sample directory. You just need to clone the repo and run npm i then finally run npm start to see the demo on your machine.

Online demo will be available soon!

Installation

Add Thundra-Trace-Chart to your project by executing npm install --save thundra-trace-chart or yarn add thundra-trace-chart.

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import ThundraTraceChart from 'thundra-trace-chart';

class MyApp extends Component {

  sampleTrace = () => {
    let trace = [
      {
        traceId: '4e81414c-2bff-439f-9e5c-9e6699b4e24b',
        parentId: '',
        id: '9400a8a9-9650-4312-9514-d4bbc1114a97',
        name: 'user-get-lambda-java-es',
        timestamp: 1557761782905000,
        duration: 281000,
        serviceName: 'AWS-Lambda',
        tags: {
          error: true
        }
      }
    ]

    return trace;
  }

  render() {
    return (
      <div>
        <ThundraTraceChart
          traceId="4e81414c-2bff-439f-9e5c-9e6699b4e24b"
          traceSummary={this.sampleTrace()}
        />
      </div>
    );
  }
}

User guide

Props

|Prop name|Prop type|Default|Description| |----|----|----|----| |traceId|string|required|Common trace id to all spans.| |traceSummary|array of objects|required|Array of objects, that each object contains vital information to render a single span.| |spanDetails|object|{ }|Set of key value pairs. Keys are id values of each object in the traceSummary array. Values are the React elements to render when spans clicked and span details are shown.| |spanHighlights|array of string|[ ]|Array of span ids from trace summary array. When provided, these traces will rendered to be more distinctive than other spans.| |activeSpanIds|array of string|[ ]|Array of span ids from trace summary array. When provided, details of these spans will be rendered as open. You can not use this prop with spanHighlights together.| |showHeader|boolean|true|Shows a header to top of the chart showing traceId, duration etc.| |showMiniTrace|boolean|true|Shows a mini trace chart on top. Useful to see if you have many spans.| |showTraceChartHeader|boolean|true|Shows a header over the spans. Useful to set width of Service Name or Span Info columns.| |showSpanDetail|boolean|true|Opens spans towards the below to show more detailed info about that span.| |showSpanDetailTitle|boolean|true|Render a title when span details is shown.| |serviceNameColumnTitle|string|Service Name|Sets custom title for Service Name column.| |spanInfoColumnTitle|string|Span Info|Sets custom title for Span Info column.| |onSpanClicked|function(spanId)|( )|When implemented, this function is called with the recently clicked span's id.|

Trace Object

Each of the trace object provided to traceSummary array has its own special structure.

|Key name|Type|Description| |----|----|----| |traceId|string|Common trace id to all spans.| |parentId|string|Parent span id of the span.| |id|string|Unique id of the span.| |serviceName|string|Name to be showed under Service Name column.| |name|string|Info to be showed under Span Info column.| |timestamp|number|Time info in microseconds to show when span is started.| |duration|number|Duration of the span.| |color|string|Color string as a valid hexcode.| |tags|object|Any extra info to provided to the span, i.e: error|

License

ASL 2.0.