if no traceID is present', () => {
+ wrapper = mount(
, defaultOptions);
+ expect(wrapper.children().length).toBe(0);
});
- const event = { target: { value: 'my new value' } };
+ it('renders the trace title', () => {
+ const h2 = wrapper.find('h2').first();
+ expect(h2.contains(defaultProps.name)).toBeTruthy();
+ });
- wrapper.find('#trace-page__text-filter').first().prop('onChange')(event);
+ it('renders the header items', () => {
+ wrapper.find('.horizontal .item').forEach((item, i) => {
+ expect(item.contains(HEADER_ITEMS[i].title)).toBeTruthy();
+ expect(item.contains(HEADER_ITEMS[i].renderer(defaultProps.trace))).toBeTruthy();
+ });
+ });
- expect(updateTextFilter.calledWith('my new value')).toBeTruthy();
+ it('calls the context updateTextFilter() function for onChange of the input', () => {
+ const updateTextFilter = sinon.spy();
+ wrapper = shallow(
, {
+ ...defaultOptions,
+ context: {
+ ...defaultOptions.context,
+ updateTextFilter,
+ },
+ });
+ const event = { target: { value: 'my new value' } };
+ wrapper.find('#trace-page__text-filter').first().prop('onChange')(event);
+ expect(updateTextFilter.calledWith('my new value')).toBeTruthy();
+ });
});
diff --git a/src/components/TracePage/TracePageTimeline.test.js b/src/components/TracePage/TracePageTimeline.test.js
deleted file mode 100644
index fedb4c0d91..0000000000
--- a/src/components/TracePage/TracePageTimeline.test.js
+++ /dev/null
@@ -1,422 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-import SpanGraph from '../SpanGraph';
-import TracePageTimeline from './TracePageTimeline';
-import SpanGraphTickHeader from '../SpanGraph/SpanGraphTickHeader';
-import TimelineScrubber from './TimelineScrubber';
-import traceGenerator from '../../../src/demo/trace-generators';
-
-const listeners = {};
-const addEventListener = sinon.spy((name, fn) => Object.assign(listeners, { [name]: fn }));
-const removeEventListener = sinon.spy((name, fn) => Object.assign(listeners, { [name]: fn }));
-const clearListeners = () =>
- Object.keys(listeners).forEach(key => {
- delete listeners[key];
- });
-
-const timestamp = new Date().getTime() * 1000;
-const defaultProps = {
- trace: {
- traceID: 'trace-id',
- spans: [
- {
- spanID: 'spanID-2',
- traceID: 'trace-id',
- startTime: timestamp + 10000,
- duration: 10000,
- operationName: 'whatever',
- process: {
- serviceName: 'my-other-service',
- },
- },
- {
- spanID: 'spanID-3',
- traceID: 'trace-id',
- startTime: timestamp + 20000,
- duration: 10000,
- operationName: 'bob',
- process: {
- serviceName: 'my-service',
- },
- },
- {
- spanID: 'spanID-1',
- traceID: 'trace-id',
- startTime: timestamp,
- duration: 50000,
- operationName: 'whatever',
- process: {
- serviceName: 'my-service',
- },
- },
- ],
- },
-};
-
-const defaultOptions = {
- context: {
- timeRangeFilter: [timestamp, timestamp + 50000],
- updateTimeRangeFilter: () => {},
- },
-};
-
-it('
should render a
', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(wrapper.find(SpanGraph).length).toBe(1);
-});
-
-it('
should render a
', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(wrapper.find(SpanGraphTickHeader).length).toBe(1);
-});
-
-it('
should just return a
if no trace is present', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(wrapper.matchesElement(
)).toBeTruthy();
-});
-
-it('
should render a filtering box if leftBound exists', () => {
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- timeRangeFilter: [timestamp + 10000, timestamp + 50000],
- },
- });
-
- expect(
- wrapper.containsMatchingElement(
-
- )
- ).toBeTruthy();
-});
-
-it('
should render a filtering box if rightBound exists', () => {
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- timeRangeFilter: [timestamp, timestamp + 40000],
- },
- });
-
- expect(
- wrapper.containsMatchingElement(
-
- )
- ).toBeTruthy();
-});
-
-it('
should render handles for the timeRangeFilter', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(
- wrapper.containsMatchingElement(
-
- )
- ).toBeTruthy();
- expect(
- wrapper.containsMatchingElement(
-
- )
- ).toBeTruthy();
-});
-
-it('
should call startDragging for the leftBound handle', () => {
- const wrapper = shallow(
, defaultOptions);
- const event = { clientX: 50 };
-
- sinon.stub(wrapper.instance(), 'startDragging');
-
- wrapper.find('#trace-page-timeline__left-bound-handle').prop('onMouseDown')(event);
-
- expect(wrapper.instance().startDragging.calledWith('leftBound', event)).toBeTruthy();
-});
-
-it('
should call startDragging for the rightBound handle', () => {
- const wrapper = shallow(
, defaultOptions);
- const event = { clientX: 50 };
-
- sinon.stub(wrapper.instance(), 'startDragging');
-
- wrapper.find('#trace-page-timeline__right-bound-handle').prop('onMouseDown')(event);
-
- expect(wrapper.instance().startDragging.calledWith('rightBound', event)).toBeTruthy();
-});
-
-it('
should render without handles if no filtering', () => {
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- timeRangeFilter: [],
- },
- });
-
- expect(wrapper.find('rect').length).toBe(0);
- expect(wrapper.find(TimelineScrubber).length).toBe(0);
-});
-
-it('
should timeline-sort the trace before rendering', () => {
- // manually sort the spans in the defaultProps.
- const sortedTraceSpans = [
- defaultProps.trace.spans[2],
- defaultProps.trace.spans[0],
- defaultProps.trace.spans[1],
- ];
-
- const wrapper = shallow(
, defaultOptions);
- const spanGraph = wrapper.find(SpanGraph).first();
-
- expect(spanGraph.prop('spans')).toEqual(sortedTraceSpans);
-});
-
-it('
should create ticks and pass them to components', () => {
- // manually build a ticks object for the trace
- const ticks = [
- { timestamp, width: 2 },
- { timestamp: timestamp + 10000, width: 2 },
- { timestamp: timestamp + 20000, width: 2 },
- { timestamp: timestamp + 30000, width: 2 },
- { timestamp: timestamp + 40000, width: 2 },
- { timestamp: timestamp + 50000, width: 2 },
- ];
-
- const wrapper = shallow(
, defaultOptions);
- const spanGraph = wrapper.find(SpanGraph).first();
- const spanGraphTickHeader = wrapper.find(SpanGraphTickHeader).first();
-
- expect(spanGraph.prop('ticks')).toEqual(ticks);
- expect(spanGraphTickHeader.prop('ticks')).toEqual(ticks);
-});
-
-it('
should calculate the rowHeight', () => {
- const wrapper = shallow(
, defaultOptions);
- const spanGraph = wrapper.find(SpanGraph).first();
-
- expect(spanGraph.prop('rowHeight')).toBe(50 / 3);
-});
-
-it('
should pass the props through to SpanGraph', () => {
- const wrapper = shallow(
, defaultOptions);
- const spanGraph = wrapper.find(SpanGraph).first();
-
- expect(spanGraph.prop('rowPadding')).toBe(0);
-});
-
-it('
should pass the props through to SpanGraphTickHeader', () => {
- const wrapper = shallow(
, defaultOptions);
- const spanGraphTickHeader = wrapper.find(SpanGraphTickHeader).first();
-
- expect(spanGraphTickHeader.prop('trace')).toEqual(defaultProps.trace);
-});
-
-it('TracePageTimeline.shouldComponentUpdate should return true for new timeRange', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(
- wrapper.instance().shouldComponentUpdate(defaultProps, wrapper.state(), {
- timeRangeFilter: [timestamp, timestamp + 10000],
- })
- ).toBe(true);
-});
-
-it('TracePageTimeline.shouldComponentUpdate should return true for new traces', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(
- wrapper
- .instance()
- .shouldComponentUpdate(
- { ...defaultProps, trace: traceGenerator.trace({ numberOfSpans: 45 }) },
- wrapper.state(),
- defaultOptions.context
- )
- ).toBe(true);
-});
-
-it('TracePageTimeline.shouldComponentUpdate should return true for currentlyDragging', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(
- wrapper.instance().shouldComponentUpdate(
- defaultProps,
- {
- ...wrapper.state(),
- currentlyDragging: !wrapper.state('currentlyDragging'),
- },
- defaultOptions.context
- )
- ).toBe(true);
-});
-
-it('TracePageTimeline.shouldComponentUpdate should return false otherwise', () => {
- const wrapper = shallow(
, defaultOptions);
-
- expect(
- wrapper.instance().shouldComponentUpdate(defaultProps, wrapper.state(), defaultOptions.context)
- ).toBe(false);
-});
-
-it('TracePageTimeline.onMouseMove should do nothing if currentlyDragging is false', () => {
- const updateTimeRangeFilter = sinon.spy();
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- updateTimeRangeFilter,
- },
- });
-
- wrapper.instance().svg = { clientWidth: 100 };
- wrapper.setState({ currentlyDragging: null });
-
- wrapper.instance().onMouseMove({ clientX: 45 });
-
- expect(wrapper.state('prevX')).toBe(null);
- expect(updateTimeRangeFilter.called).toBeFalsy();
-});
-
-it('TracePageTimeline.onMouseMove should store the clientX on the state', () => {
- const wrapper = shallow(
, defaultOptions);
-
- wrapper.instance().svg = { clientWidth: 100 };
- wrapper.setState({ currentlyDragging: 'leftBound' });
-
- wrapper.instance().onMouseMove({ clientX: 45 });
-
- expect(wrapper.state('prevX')).toBe(45);
-});
-
-it('TracePageTimeline.onMouseMove should update the timeRangeFilter for the left handle', () => {
- const updateTimeRangeFilter = sinon.spy();
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- updateTimeRangeFilter,
- },
- });
-
- wrapper.instance().svg = { clientWidth: 100 };
- wrapper.setState({ prevX: 0, currentlyDragging: 'leftBound' });
-
- wrapper.instance().onMouseMove({ clientX: 45 });
-
- expect(updateTimeRangeFilter.calledWith(timestamp + 22500, timestamp + 50000)).toBeTruthy();
-});
-
-it('TracePageTimeline.onMouseMove should update the timeRangeFilter for the right handle', () => {
- const updateTimeRangeFilter = sinon.spy();
- const wrapper = shallow(
, {
- ...defaultOptions,
- context: {
- ...defaultOptions.context,
- updateTimeRangeFilter,
- },
- });
-
- wrapper.instance().svg = { clientWidth: 100 };
- wrapper.setState({ prevX: 100, currentlyDragging: 'rightBound' });
-
- wrapper.instance().onMouseMove({ clientX: 45 });
-
- expect(updateTimeRangeFilter.calledWith(timestamp, timestamp + 22500)).toBeTruthy();
-});
-
-it('TracePageTimeline.startDragging should store the boundName and the prevX in state', () => {
- const wrapper = shallow(
, defaultOptions);
-
- wrapper.instance().startDragging('leftBound', { clientX: 100 });
-
- expect(wrapper.state('currentlyDragging')).toBe('leftBound');
- expect(wrapper.state('prevX')).toBe(100);
-});
-
-// TODO: Need to figure out how to mock to window events.
-it.skip('TracePageTimeline.startDragging should bind event listeners to the window', () => {
- const wrapper = shallow(
, defaultOptions);
-
- clearListeners();
-
- wrapper.instance().startDragging('leftBound', { clientX: 100 });
-
- expect(addEventListener.calledWith('mousemove', sinon.match.func)).toBeTruthy();
- expect(addEventListener.calledWith('mouseup', sinon.match.func)).toBeTruthy();
-});
-
-it.skip('TracePageTimeline.startDragging should call onMouseMove on the window', () => {
- const wrapper = shallow(
, defaultOptions);
-
- clearListeners();
-
- wrapper.instance().startDragging('leftBound', { clientX: 100 });
- sinon.stub(wrapper.instance(), 'onMouseMove');
-
- const event = { clientX: 99 };
- listeners.mousemove(event);
-
- expect(wrapper.instance().onMouseMove.calledWith(event)).toBeTruthy();
-});
-
-it.skip('TracePageTimeline.startDragging mouseup should call stopDragging', () => {
- const wrapper = shallow(
, defaultOptions);
-
- clearListeners();
-
- wrapper.instance().startDragging('leftBound', { clientX: 100 });
- sinon.stub(wrapper.instance(), 'stopDragging');
-
- const event = { clientX: 99 };
- listeners.mouseup(event);
-
- expect(wrapper.instance().stopDragging.called).toBeTruthy();
-});
-
-it.skip('TracePageTimeline.startDragging mouseup should stop listening to the events', () => {
- const wrapper = shallow(
, defaultOptions);
-
- clearListeners();
-
- wrapper.instance().startDragging('leftBound', { clientX: 100 });
-
- const event = { clientX: 99 };
- listeners.mouseup(event);
-
- expect(removeEventListener.calledWith('mousemove', sinon.match.func)).toBeTruthy();
- expect(removeEventListener.calledWith('mouseup', sinon.match.func)).toBeTruthy();
-});
-
-it('TracePageTimeline.stopDragging should clear currentlyDragging and prevX', () => {
- const wrapper = shallow(
, defaultOptions);
-
- wrapper.instance().stopDragging();
-
- expect(wrapper.state('currentlyDragging')).toBe(null);
- expect(wrapper.state('prevX')).toBe(null);
-});
diff --git a/src/components/TracePage/TracePageTimeline.js b/src/components/TracePage/TraceSpanGraph.js
similarity index 78%
rename from src/components/TracePage/TracePageTimeline.js
rename to src/components/TracePage/TraceSpanGraph.js
index 2105c7ea39..4261616143 100644
--- a/src/components/TracePage/TracePageTimeline.js
+++ b/src/components/TracePage/TraceSpanGraph.js
@@ -18,48 +18,30 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
-import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { window } from 'global';
+import PropTypes from 'prop-types';
-import SpanGraph from '../SpanGraph';
-import SpanGraphTickHeader from '../SpanGraph/SpanGraphTickHeader';
-import tracePropTypes from '../../propTypes/trace';
+import SpanGraph from './SpanGraph';
+import SpanGraphTickHeader from './SpanGraph/SpanGraphTickHeader';
import TimelineScrubber from './TimelineScrubber';
-
-import {
- getTraceId,
- getSortedSpans,
- getTicksForTrace,
- getTraceTimestamp,
- getTraceEndTimestamp,
- getTraceDuration,
- getTraceSpans,
- getTraceSpanCount,
-} from '../../selectors/trace';
-import { getSpanTimestamp } from '../../selectors/span';
-import { numberSortComparator } from '../../utils/sort';
+import { getTraceId, getTraceTimestamp, getTraceEndTimestamp, getTraceDuration } from '../../selectors/trace';
import { getPercentageOfInterval } from '../../utils/date';
-const TIMELINE_TICK_INTERVAL = 5;
-const TIMELINE_TICK_WIDTH = 2;
-const TIMELINE_TRACE_SORT = {
- dir: 1,
- selector: getSpanTimestamp,
- comparator: numberSortComparator,
-};
+const TIMELINE_TICK_INTERVAL = 4;
-export default class TracePageTimeline extends Component {
+export default class TraceSpanGraph extends Component {
static get propTypes() {
return {
- trace: tracePropTypes,
+ xformedTrace: PropTypes.object,
+ trace: PropTypes.object,
height: PropTypes.number.isRequired,
};
}
static get defaultProps() {
return {
- height: 50,
+ height: 60,
};
}
@@ -152,7 +134,7 @@ export default class TracePageTimeline extends Component {
}
render() {
- const { trace, height } = this.props;
+ const { trace, xformedTrace, height } = this.props;
const { currentlyDragging } = this.state;
const { timeRangeFilter } = this.context;
const leftBound = timeRangeFilter[0];
@@ -162,12 +144,6 @@ export default class TracePageTimeline extends Component {
return
;
}
- const ticks = getTicksForTrace({
- trace,
- interval: TIMELINE_TICK_INTERVAL,
- width: TIMELINE_TICK_WIDTH,
- });
-
const initialTimestamp = getTraceTimestamp(trace);
const traceDuration = getTraceDuration(trace);
@@ -182,22 +158,17 @@ export default class TracePageTimeline extends Component {
}
return (
-
+
-
-
+
{
this.svg = c;
}}
- style={{
- cursor: currentlyDragging ? 'ew-resize' : 'auto',
- transformOrigin: '0 0',
- borderBottom: '1px solid #E5E5E4',
- }}
>
{leftInactive > 0 &&
({
+ valueOffset: span.relativeStartTime,
+ valueWidth: span.duration,
+ serviceName: span.process.serviceName,
+ }))}
/>
{leftBound &&
this.startDragging('leftBound', ...args)}
/>}
{rightBound &&
@@ -243,7 +212,7 @@ export default class TracePageTimeline extends Component {
timestamp={rightBound}
handleWidth={8}
handleHeight={30}
- handleTopOffset={10}
+ handleTopOffset={15}
onMouseDown={(...args) => this.startDragging('rightBound', ...args)}
/>}
diff --git a/src/components/TracePage/TraceSpanGraph.test.js b/src/components/TracePage/TraceSpanGraph.test.js
new file mode 100644
index 0000000000..3e64cbd325
--- /dev/null
+++ b/src/components/TracePage/TraceSpanGraph.test.js
@@ -0,0 +1,250 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+
+import SpanGraph from './SpanGraph';
+import TraceSpanGraph from './TraceSpanGraph';
+import SpanGraphTickHeader from './SpanGraph/SpanGraphTickHeader';
+import TimelineScrubber from './TimelineScrubber';
+import traceGenerator from '../../../src/demo/trace-generators';
+import { transformTrace } from './TraceTimelineViewer/transforms';
+import { hydrateSpansWithProcesses } from '../../selectors/trace';
+
+describe('
', () => {
+ const trace = hydrateSpansWithProcesses(traceGenerator.trace({}));
+ const xformedTrace = transformTrace(trace);
+
+ const props = {
+ trace,
+ xformedTrace,
+ };
+
+ const options = {
+ context: {
+ timeRangeFilter: [trace.timestamp, trace.timestamp + trace.duration],
+ updateTimeRangeFilter: () => {},
+ },
+ };
+
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow( if a trace is not provided', () => {
+ wrapper = shallow(
, options);
+ expect(wrapper.matchesElement(
)).toBeTruthy();
+ });
+
+ it('renders a filtering box if leftBound exists', () => {
+ const context = {
+ ...options.context,
+ timeRangeFilter: [trace.timestamp + 0.2 * trace.duration, trace.timestamp + trace.duration],
+ };
+ wrapper = shallow(
, { ...options, context });
+ const leftBox = wrapper.find('.trace-page-timeline__graph--inactive');
+ expect(leftBox.length).toBe(1);
+ const width = Number(leftBox.prop('width').slice(0, -1));
+ const x = leftBox.prop('x');
+ expect(Math.round(width)).toBe(20);
+ expect(x).toBe(0);
+ });
+
+ it('renders a filtering box if rightBound exists', () => {
+ const context = {
+ ...options.context,
+ timeRangeFilter: [trace.timestamp, trace.timestamp + 0.8 * trace.duration],
+ };
+ wrapper = shallow(
, { ...options, context });
+ const rightBox = wrapper.find('.trace-page-timeline__graph--inactive');
+ const width = Number(rightBox.prop('width').slice(0, -1));
+ const x = Number(rightBox.prop('x').slice(0, -1));
+ expect(rightBox.length).toBe(1);
+ expect(Math.round(width)).toBe(20);
+ expect(Math.round(x)).toBe(80);
+ });
+
+ it('renders handles for the timeRangeFilter', () => {
+ const timeRangeFilter = options.context.timeRangeFilter;
+ let scrubber =
;
+ expect(wrapper.containsMatchingElement(scrubber)).toBeTruthy();
+ scrubber =
;
+ expect(wrapper.containsMatchingElement(scrubber)).toBeTruthy();
+ });
+
+ it('calls startDragging() for the leftBound handle', () => {
+ const event = { clientX: 50 };
+ sinon.stub(wrapper.instance(), 'startDragging');
+ wrapper.find('#trace-page-timeline__left-bound-handle').prop('onMouseDown')(event);
+ expect(wrapper.instance().startDragging.calledWith('leftBound', event)).toBeTruthy();
+ });
+
+ it('calls startDragging for the rightBound handle', () => {
+ const event = { clientX: 50 };
+ sinon.stub(wrapper.instance(), 'startDragging');
+ wrapper.find('#trace-page-timeline__right-bound-handle').prop('onMouseDown')(event);
+ expect(wrapper.instance().startDragging.calledWith('rightBound', event)).toBeTruthy();
+ });
+
+ it('renders without handles if not filtering', () => {
+ const context = { ...options.context, timeRangeFilter: [] };
+ wrapper = shallow(
, { ...options, context });
+ expect(wrapper.find('rect').length).toBe(0);
+ expect(wrapper.find(TimelineScrubber).length).toBe(0);
+ });
+
+ it('passes the number of ticks to rendered to components', () => {
+ const tickHeader = wrapper.find(SpanGraphTickHeader);
+ const spanGraph = wrapper.find(SpanGraph);
+ expect(tickHeader.prop('numTicks')).toBeGreaterThan(1);
+ expect(spanGraph.prop('numTicks')).toBeGreaterThan(1);
+ expect(tickHeader.prop('numTicks')).toBe(spanGraph.prop('numTicks'));
+ });
+
+ it('passes items to SpanGraph', () => {
+ const spanGraph = wrapper.find(SpanGraph).first();
+ const items = xformedTrace.spans.map(span => ({
+ valueOffset: span.relativeStartTime,
+ valueWidth: span.duration,
+ serviceName: span.process.serviceName,
+ }));
+ expect(spanGraph.prop('items')).toEqual(items);
+ });
+
+ describe('# shouldComponentUpdate()', () => {
+ it('returns true for new timeRangeFilter', () => {
+ const state = wrapper.state();
+ const context = { timeRangeFilter: [Math.random(), Math.random()] };
+ const instance = wrapper.instance();
+ expect(instance.shouldComponentUpdate(props, state, context)).toBe(true);
+ });
+
+ it('returns true for new trace', () => {
+ const state = wrapper.state();
+ const instance = wrapper.instance();
+ const trace2 = hydrateSpansWithProcesses(traceGenerator.trace({}));
+ const xformedTrace2 = transformTrace(trace2);
+ const altProps = { trace: trace2, xformedTrace: xformedTrace2 };
+ expect(instance.shouldComponentUpdate(altProps, state, options.context)).toBe(true);
+ });
+
+ it('returns true for currentlyDragging', () => {
+ const state = { ...wrapper.state(), currentlyDragging: !wrapper.state('currentlyDragging') };
+ const instance = wrapper.instance();
+ expect(instance.shouldComponentUpdate(props, state, options.context)).toBe(true);
+ });
+
+ it('returns false, generally', () => {
+ const state = wrapper.state();
+ const instance = wrapper.instance();
+ expect(instance.shouldComponentUpdate(props, state, options.context)).toBe(false);
+ });
+ });
+
+ describe('# onMouseMove()', () => {
+ it('does nothing if currentlyDragging is false', () => {
+ const updateTimeRangeFilter = sinon.spy();
+ const context = { ...options.context, updateTimeRangeFilter };
+ wrapper = shallow(
, { ...options, context });
+ wrapper.instance().svg = { clientWidth: 100 };
+ wrapper.setState({ currentlyDragging: null });
+ wrapper.instance().onMouseMove({ clientX: 45 });
+ expect(wrapper.state('prevX')).toBe(null);
+ expect(updateTimeRangeFilter.called).toBeFalsy();
+ });
+
+ it('stores the clientX on .state', () => {
+ wrapper.instance().svg = { clientWidth: 100 };
+ wrapper.setState({ currentlyDragging: 'leftBound' });
+ wrapper.instance().onMouseMove({ clientX: 45 });
+ expect(wrapper.state('prevX')).toBe(45);
+ });
+
+ it('updates the timeRangeFilter for the left handle', () => {
+ const timestamp = trace.timestamp;
+ const duration = trace.duration;
+ const updateTimeRangeFilter = sinon.spy();
+ const context = { ...options.context, updateTimeRangeFilter };
+ wrapper = shallow(
, { ...options, context });
+ wrapper.instance().svg = { clientWidth: 100 };
+ wrapper.setState({ prevX: 0, currentlyDragging: 'leftBound' });
+ wrapper.instance().onMouseMove({ clientX: 45 });
+ expect(
+ updateTimeRangeFilter.calledWith(timestamp + 0.45 * duration, timestamp + duration)
+ ).toBeTruthy();
+ });
+
+ it('updates the timeRangeFilter for the right handle', () => {
+ const timestamp = trace.timestamp;
+ const duration = trace.duration;
+ const updateTimeRangeFilter = sinon.spy();
+ const context = { ...options.context, updateTimeRangeFilter };
+ wrapper = shallow(
, { ...options, context });
+ wrapper.instance().svg = { clientWidth: 100 };
+ wrapper.setState({ prevX: 100, currentlyDragging: 'rightBound' });
+ wrapper.instance().onMouseMove({ clientX: 45 });
+ expect(updateTimeRangeFilter.calledWith(timestamp, timestamp + 0.45 * duration)).toBeTruthy();
+ });
+ });
+
+ describe('# startDragging()', () => {
+ it('stores the boundName and the prevX in state', () => {
+ wrapper.instance().startDragging('leftBound', { clientX: 100 });
+ expect(wrapper.state('currentlyDragging')).toBe('leftBound');
+ expect(wrapper.state('prevX')).toBe(100);
+ });
+
+ it('binds event listeners to the window', () => {
+ const oldFn = window.addEventListener;
+ const fn = jest.fn();
+ window.addEventListener = fn;
+
+ wrapper.instance().startDragging('leftBound', { clientX: 100 });
+ expect(fn.mock.calls.length).toBe(2);
+ const eventNames = [fn.mock.calls[0][0], fn.mock.calls[1][0]].sort();
+ expect(eventNames).toEqual(['mousemove', 'mouseup']);
+ window.addEventListener = oldFn;
+ });
+ });
+
+ describe('# stopDragging()', () => {
+ it('TraceSpanGraph.stopDragging should clear currentlyDragging and prevX', () => {
+ const instance = wrapper.instance();
+ instance.startDragging('leftBound', { clientX: 100 });
+ expect(wrapper.state('currentlyDragging')).toBe('leftBound');
+ expect(wrapper.state('prevX')).toBe(100);
+ instance.stopDragging();
+ expect(wrapper.state('currentlyDragging')).toBe(null);
+ expect(wrapper.state('prevX')).toBe(null);
+ });
+ });
+});
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBar.css b/src/components/TracePage/TraceTimelineViewer/SpanBar.css
new file mode 100644
index 0000000000..083b6fb27f
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.css
@@ -0,0 +1,52 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+
+.span-bar-wrapper {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ overflow: hidden;
+ opacity: 0.5;
+}
+
+.span-row.is-expanded .span-bar-wrapper,
+.span-row:hover .span-bar-wrapper {
+ opacity: 1;
+}
+
+/* Add the hint related selector to override the hint styling (via specificity) */
+[class*="hint--"].span-bar {
+ border-radius: 3px;
+ position: absolute;
+ height: 50%;
+ top: 25%;
+}
+
+.span-bar-rpc {
+ position: absolute;
+ top: 35%;
+ bottom: 35%;
+ z-index: 1;
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBar.js b/src/components/TracePage/TraceTimelineViewer/SpanBar.js
new file mode 100644
index 0000000000..e46aba1e99
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBar.js
@@ -0,0 +1,88 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { onlyUpdateForKeys, compose, withState, withProps } from 'recompose';
+
+import './SpanBar.css';
+
+function toPercent(value) {
+ return `${value * 100}%`;
+}
+
+function SpanBar(props) {
+ const { viewEnd, viewStart, color, label, hintSide, onClick, onMouseOver, onMouseOut, rpc } = props;
+
+ return (
+
+ );
+}
+
+SpanBar.propTypes = {
+ rpc: PropTypes.shape({
+ viewStart: PropTypes.number,
+ viewEnd: PropTypes.number,
+ color: PropTypes.string,
+ }),
+ viewStart: PropTypes.number.isRequired,
+ viewEnd: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+ hintSide: PropTypes.string.isRequired,
+ label: PropTypes.string.isRequired,
+ onClick: PropTypes.func,
+ onMouseOver: PropTypes.func,
+ onMouseOut: PropTypes.func,
+};
+
+SpanBar.defaultProps = {
+ rpc: null,
+ onClick: null,
+ onMouseOver: null,
+ onMouseOut: null,
+};
+
+export default compose(
+ withState('label', 'setLabel', props => props.shortLabel),
+ withProps(({ setLabel, shortLabel, longLabel }) => ({
+ onMouseOver: () => setLabel(longLabel),
+ onMouseOut: () => setLabel(shortLabel),
+ })),
+ onlyUpdateForKeys(['viewStart', 'viewEnd', 'label', 'rpc'])
+)(SpanBar);
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
new file mode 100644
index 0000000000..5b4ee63a71
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.css
@@ -0,0 +1,109 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.span-name-column {
+ background: #fafafa;
+ position: relative;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.span-row:hover .span-name-column {
+ background: #f8f8f8;
+}
+
+.span-row.is-expanded .span-name-column {
+ background: #f0f0f0;
+ outline: 1px solid #ddd;
+}
+
+.span-row.clipping-left .span-name-column::before {
+ content: " ";
+ height: 100%;
+ position: absolute;
+ width: 6px;
+ background-image: linear-gradient(to right, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0.0));
+ left: 100%;
+ z-index: 1;
+}
+
+.span-name-wrapper {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.span-name {
+ outline: none;
+ color: #000;
+ border-left: 4px solid;
+ cursor: pointer;
+ display: inline;
+}
+.span-name.is-detail-expanded {
+ display: inline-block;
+}
+
+.endpoint-name {
+ color: #808080;
+}
+
+.span-name:hover > .endpoint-name {
+ color: #000;
+ font-weight: bold;
+}
+
+.span-svc-name {
+ padding: 0.5rem;
+ font-size: 1.05em;
+}
+
+.span-svc-name.is-children-collapsed {
+ font-weight: bold;
+ font-style: italic;
+}
+
+.span-view {
+ position: relative;
+}
+
+.span-row:hover .span-view {
+ background-color: #f5f5f5;
+}
+
+.span-row.is-expanded .span-view {
+ background: #f8f8f8;
+ outline: 1px solid #ddd;
+}
+
+.span-row.is-expanded:hover .span-view {
+ background: #eee;
+}
+
+.span-row.clipping-right .span-view::before {
+ content: " ";
+ height: 100%;
+ position: absolute;
+ width: 6px;
+ background-image: linear-gradient(to left, rgba(25, 25, 25, 0.25), rgba(32, 32, 32, 0.0));
+ right: 0%;
+ z-index: 1;
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
new file mode 100644
index 0000000000..9a20113a19
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanBarRow.js
@@ -0,0 +1,157 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import TimelineRow from './TimelineRow';
+import SpanTreeOffset from './SpanTreeOffset';
+import SpanBar from './SpanBar';
+import Ticks from './Ticks';
+
+import './SpanBarRow.css';
+
+export default function SpanBarRow(props) {
+ const {
+ className,
+ color,
+ depth,
+ isChildrenExpanded,
+ isDetailExapnded,
+ isFilteredOut,
+ isParent,
+ label,
+ onDetailToggled,
+ onChildrenToggled,
+ operationName,
+ rpc,
+ serviceName,
+ showErrorIcon,
+ ticks,
+ viewEnd,
+ viewStart,
+ } = props;
+
+ const labelDetail = `${serviceName}::${operationName}`;
+ let longLabel;
+ let hintSide;
+ if (viewStart > 1 - viewEnd) {
+ longLabel = `${labelDetail} | ${label}`;
+ hintSide = 'left';
+ } else {
+ longLabel = `${label} | ${labelDetail}`;
+ hintSide = 'right';
+ }
+
+ let title = serviceName;
+ if (rpc) {
+ title += ` → ${rpc.serviceName}::${rpc.operationName}`;
+ } else {
+ title += `::${operationName}`;
+ }
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+SpanBarRow.propTypes = {
+ className: PropTypes.string,
+ color: PropTypes.string.isRequired,
+ depth: PropTypes.number.isRequired,
+ isChildrenExpanded: PropTypes.bool.isRequired,
+ isDetailExapnded: PropTypes.bool.isRequired,
+ isFilteredOut: PropTypes.bool.isRequired,
+ isParent: PropTypes.bool.isRequired,
+ label: PropTypes.string.isRequired,
+ onDetailToggled: PropTypes.func.isRequired,
+ onChildrenToggled: PropTypes.func.isRequired,
+ operationName: PropTypes.string.isRequired,
+ rpc: PropTypes.shape({
+ viewStart: PropTypes.number,
+ viewEnd: PropTypes.number,
+ color: PropTypes.string,
+ operationName: PropTypes.string,
+ serviceName: PropTypes.string,
+ }),
+ serviceName: PropTypes.string.isRequired,
+ showErrorIcon: PropTypes.bool.isRequired,
+ ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
+ viewEnd: PropTypes.number.isRequired,
+ viewStart: PropTypes.number.isRequired,
+};
+
+SpanBarRow.defaultProps = {
+ className: '',
+ rpc: null,
+};
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanDetail.js b/src/components/TracePage/TraceTimelineViewer/SpanDetail.js
index d34d383d45..4bcd4d772b 100644
--- a/src/components/TracePage/TraceTimelineViewer/SpanDetail.js
+++ b/src/components/TracePage/TraceTimelineViewer/SpanDetail.js
@@ -43,21 +43,23 @@ function CollapsePanel(props) {
+
onToggleOpen(!open)}
- className="overflow-hidden nowrap inline"
+ className="overflow-hidden nowrap"
style={{
cursor: 'pointer',
textOverflow: 'ellipsis',
@@ -70,8 +72,8 @@ function ExpandableDataTable(props) {
{!open &&
- {data.map(row =>
-
+ {data.map((row, i) =>
+
{row.key}=
@@ -81,32 +83,31 @@ function ExpandableDataTable(props) {
}
{open &&
-
-
- {data.map(row => {
- let json;
- try {
- json = JSON.parse(row.value);
- } catch (e) {
- json = row.value;
- }
- return (
-
-
- {row.key}
-
-
-
-
-
- );
- })}
-
-
}
+
+
+
+ {data.map((row, i) => {
+ let json;
+ try {
+ json = JSON.parse(row.value);
+ } catch (e) {
+ json = row.value;
+ }
+ return (
+ // `i` is necessary in the key because row.key can repeat
+
+
+ {row.key}
+
+
+
+
+
+ );
+ })}
+
+
+
}
);
}
@@ -116,10 +117,13 @@ ExpandableDataTable.defaultProps = {
};
ExpandableDataTable.propTypes = {
open: PropTypes.bool,
- data: PropTypes.shape({
- key: PropTypes.string,
- value: PropTypes.value,
- }),
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ key: PropTypes.string,
+ type: PropTypes.string,
+ value: PropTypes.value,
+ })
+ ),
label: PropTypes.string,
onToggleOpen: PropTypes.func,
};
@@ -128,19 +132,19 @@ const ExpandableDataTableStatefull = collapseEnhancer(ExpandableDataTable);
function Logs({ logs, traceStartTime, open, onToggleOpen }) {
return (
-
+
onToggleOpen(!open)} style={{ opacity: 1 }}>
+
{open &&
- {_.sortBy(logs, 'timestamp').map(log =>
+ {_.sortBy(logs, 'timestamp').map((log, i) =>
+ // `i` is necessary in the key because timestamps can repeat
@@ -224,6 +228,6 @@ export default function SpanDetail(props) {
);
}
SpanDetail.propTypes = {
- span: PropTypes.obj,
- trace: PropTypes.obj,
+ span: PropTypes.object,
+ trace: PropTypes.object,
};
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
new file mode 100644
index 0000000000..458cb376c9
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.css
@@ -0,0 +1,71 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+
+.detail-row-name-column {
+ position: absolute;
+ height: 100%;
+}
+
+.detail-row-expanded-accent {
+ cursor: pointer;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.detail-row-expanded-accent::before {
+ border-left: 4px solid;
+ opacity: 0.2;
+ pointer-events: none;
+ width: 1000px;
+}
+
+.detail-row-expanded-accent::after {
+ border-right: 1000px solid;
+ border-color: inherit;
+ cursor: pointer;
+ opacity: 0.1;
+}
+
+/* border-color inherit must come AFTER other border declarations for accent */
+.detail-row-expanded-accent::before,
+.detail-row-expanded-accent::after {
+ border-color: inherit;
+ content: " ";
+ position: absolute;
+ height: 100%;
+}
+
+.detail-row-expanded-accent:hover::after {
+ opacity: 0.25;
+}
+
+.detail-info-wrapper {
+ background: #f5f5f5;
+ border: 1px solid #d3d3d3;
+ border-left-color: #bbb;
+ border-top: 3px solid;
+ box-shadow:
+ inset 0 16px 20px -20px rgba(0,0,0,0.45),
+ inset 0 -12px 20px -20px rgba(0,0,0,0.45);
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
new file mode 100644
index 0000000000..01ce9982a6
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanDetailRow.js
@@ -0,0 +1,61 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import TimelineRow from './TimelineRow';
+import SpanTreeOffset from './SpanTreeOffset';
+import SpanDetail from './SpanDetail';
+
+import './SpanDetailRow.css';
+
+export default function SpanDetailRow(props) {
+ const { span, color, trace, toggleDetailExpansion, isFilteredOut } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+SpanDetailRow.propTypes = {
+ trace: PropTypes.object,
+ span: PropTypes.object,
+ color: PropTypes.string,
+ isFilteredOut: PropTypes.bool,
+ toggleDetailExpansion: PropTypes.func,
+};
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css b/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css
new file mode 100644
index 0000000000..fd720a35bc
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.css
@@ -0,0 +1,41 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.span-kids-toggle {
+ cursor: pointer;
+ color: #000;
+ position: relative;
+}
+
+.span-kids-toggle:hover {
+ background-color: #e8e8e8;
+}
+
+.span-tree-offset {
+ display: inline-block;
+ height: 1em;
+}
+
+.span-tree-toggle-icon {
+ position: absolute;
+ right: 0;
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js b/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js
new file mode 100644
index 0000000000..e0593c0c86
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.js
@@ -0,0 +1,50 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import './SpanTreeOffset.css';
+
+export default function SpanTreeOffset({ level, hasChildren, childrenVisible, onClick }) {
+ const className = hasChildren ? 'span-kids-toggle' : '';
+ const icon = hasChildren
+ ?
+ : null;
+ return (
+
+
+ );
+}
+
+SpanTreeOffset.propTypes = {
+ level: PropTypes.number.isRequired,
+ hasChildren: PropTypes.bool,
+ childrenVisible: PropTypes.bool,
+ onClick: PropTypes.func,
+};
+
+SpanTreeOffset.defaultProps = {
+ hasChildren: false,
+ childrenVisible: false,
+ onClick: null,
+};
diff --git a/src/components/TracePage/TraceTimelineViewer/Ticks.css b/src/components/TracePage/TraceTimelineViewer/Ticks.css
new file mode 100644
index 0000000000..f89b9ac975
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/Ticks.css
@@ -0,0 +1,37 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.span-row-tick {
+ position: absolute;
+ height: 100%;
+ width: 1px;
+ background: #d3d3d3;
+}
+.span-row-tick-label {
+ position: absolute;
+ left: 5px;
+}
+
+.span-row-tick-label.is-end-anchor {
+ left: initial;
+ right: 5px;
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/Ticks.js b/src/components/TracePage/TraceTimelineViewer/Ticks.js
new file mode 100644
index 0000000000..c9601c5d45
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/Ticks.js
@@ -0,0 +1,56 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import './Ticks.css';
+
+export default function Ticks(props) {
+ const { labels, ticks } = props;
+
+ return (
+
+ {ticks.map((tick, i) =>
+
+ {labels &&
+ = 1 ? 'is-end-anchor' : ''}`}>
+ {labels[i]}
+ }
+
+ )}
+
+ );
+}
+
+Ticks.propTypes = {
+ ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
+ labels: PropTypes.arrayOf(PropTypes.string),
+};
+
+Ticks.defaultProps = {
+ labels: null,
+};
diff --git a/src/components/TracePage/TraceTimelineViewer/TimelineRow.js b/src/components/TracePage/TraceTimelineViewer/TimelineRow.js
new file mode 100644
index 0000000000..f67422c200
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/TimelineRow.js
@@ -0,0 +1,69 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+};
+
+const defaultProps = {
+ children: null,
+ className: '',
+};
+
+export default function TimelineRow(props) {
+ const { children, className, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+}
+TimelineRow.propTypes = { ...propTypes };
+TimelineRow.defaultProps = { ...defaultProps };
+
+function TimelineRowLeft(props) {
+ const { children, className, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+}
+TimelineRowLeft.propTypes = { ...propTypes };
+TimelineRowLeft.defaultProps = { ...defaultProps };
+
+TimelineRow.Left = TimelineRowLeft;
+
+function TimelineRowRight(props) {
+ const { children, className, ...rest } = props;
+ return (
+
+ {children}
+
+ );
+}
+TimelineRowRight.propTypes = { ...propTypes };
+TimelineRowRight.defaultProps = { ...defaultProps };
+
+TimelineRow.Right = TimelineRowRight;
diff --git a/src/components/TracePage/TraceTimelineViewer/TraceView.js b/src/components/TracePage/TraceTimelineViewer/TraceView.js
new file mode 100644
index 0000000000..4a25be4d2b
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/TraceView.js
@@ -0,0 +1,187 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
+
+import colorGenerator from '../../../utils/color-generator';
+import SpanBarRow from './SpanBarRow';
+import SpanDetailRow from './SpanDetailRow';
+import Ticks from './Ticks';
+import TimelineRow from './TimelineRow';
+import {
+ findServerChildSpan,
+ formatDuration,
+ getViewedBounds,
+ isErrorSpan,
+ spanContainsErredSpan,
+} from './utils';
+
+export default function TraceView(props) {
+ const {
+ trace,
+ zoomStart = 0,
+ zoomEnd = 1,
+ collapsedSpanIDs,
+ selectedSpanIDs,
+ filteredSpansIDs,
+ onSpanClick,
+ onSpanCollapseClick,
+ ticks = [0, 0.25, 0.5, 0.75, 1],
+ } = props;
+
+ const zoomMin = zoomStart * trace.duration;
+ const zoomMax = zoomEnd * trace.duration;
+ const zoomDuration = zoomMax - zoomMin;
+ function getDuationAtTick(tick) {
+ return zoomMin + tick * zoomDuration;
+ }
+
+ const clippingCssClasses = cx({
+ 'clipping-left': zoomStart > 0,
+ 'clipping-right': zoomEnd < 1,
+ });
+
+ let collapseBelow = null;
+
+ const renderSpansRows = trace.spans.reduce((arr, span, i) => {
+ const { spanID } = span;
+ const spanIsCollapsed = collapsedSpanIDs.has(spanID);
+ // Collapse logic
+ // TODO: Investigate if this should be moved out to statefull component.
+ let hidden = false;
+ if (collapseBelow) {
+ if (span.depth >= collapseBelow) {
+ hidden = true;
+ } else {
+ collapseBelow = null;
+ }
+ }
+ if (hidden) {
+ return arr;
+ }
+ if (spanIsCollapsed) {
+ collapseBelow = span.depth + 1;
+ }
+
+ const spanColor = colorGenerator.getColorByKey(span.process.serviceName);
+ const isDetailExapnded = selectedSpanIDs.has(spanID);
+ const isFilteredOut = Boolean(filteredSpansIDs) && !filteredSpansIDs.has(spanID);
+ const { start: viewStart, end: viewEnd } = getViewedBounds({
+ min: trace.startTime,
+ max: trace.endTime,
+ start: span.startTime,
+ end: span.startTime + span.duration,
+ viewStart: zoomStart,
+ viewEnd: zoomEnd,
+ });
+
+ // Check for direct child "server" span if the span is a "client" span.
+ // TODO: Can probably optimize this a bit more so it does not do it
+ // on render.
+ let rpc = null;
+ if (spanIsCollapsed) {
+ const childServerSpan = findServerChildSpan(trace.spans.slice(i));
+ if (childServerSpan) {
+ const { start: rpcStart, end: rpcEnd } = getViewedBounds({
+ min: trace.startTime,
+ max: trace.endTime,
+ start: childServerSpan.startTime,
+ end: childServerSpan.startTime + childServerSpan.duration,
+ viewStart: zoomStart,
+ viewEnd: zoomEnd,
+ });
+ rpc = {
+ serviceName: childServerSpan.process.serviceName,
+ operationName: childServerSpan.operationName,
+ color: colorGenerator.getColorByKey(childServerSpan.process.serviceName),
+ viewStart: rpcStart,
+ viewEnd: rpcEnd,
+ };
+ }
+ }
+ const showErrorIcon = isErrorSpan(span) || (spanIsCollapsed && spanContainsErredSpan(trace.spans, i));
+ const toggleDetailExpansion = () => onSpanClick(spanID);
+ arr.push(
+
onSpanCollapseClick(spanID)}
+ operationName={span.operationName}
+ rpc={rpc}
+ serviceName={span.process.serviceName}
+ showErrorIcon={showErrorIcon}
+ ticks={ticks}
+ viewEnd={viewEnd}
+ viewStart={viewStart}
+ />
+ );
+ if (isDetailExapnded) {
+ arr.push(
+
+
+
+ Service & Operation
+
+
+ (tick > 0 ? formatDuration(getDuationAtTick(tick)) : ''))}
+ ticks={ticks}
+ />
+ Timeline
+
+
+ {renderSpansRows}
+
+ );
+}
+TraceView.propTypes = {
+ trace: PropTypes.object,
+ collapsedSpanIDs: PropTypes.object,
+ selectedSpanIDs: PropTypes.object,
+ filteredSpansIDs: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+ ticks: PropTypes.arrayOf(PropTypes.number),
+ zoomStart: PropTypes.number,
+ zoomEnd: PropTypes.number,
+ onSpanClick: PropTypes.func,
+ onSpanCollapseClick: PropTypes.func,
+};
diff --git a/src/components/TracePage/TraceTimelineViewer/get-filtered-spans.js b/src/components/TracePage/TraceTimelineViewer/get-filtered-spans.js
new file mode 100644
index 0000000000..924e31c035
--- /dev/null
+++ b/src/components/TracePage/TraceTimelineViewer/get-filtered-spans.js
@@ -0,0 +1,29 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { filterSpansForText } from '../../../selectors/span';
+
+export default function getFilteredSpans(trace, text) {
+ const matches = filterSpansForText({
+ text,
+ spans: trace.spans,
+ });
+ return new Set(matches.map(span => span.spanID));
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/grid.css b/src/components/TracePage/TraceTimelineViewer/grid.css
index f02a3a1652..1edbe8292b 100644
--- a/src/components/TracePage/TraceTimelineViewer/grid.css
+++ b/src/components/TracePage/TraceTimelineViewer/grid.css
@@ -1,3 +1,25 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
/* Modified from https://github.com/kristoferjoseph/flexboxgrid */
.container,
.container-fluid {
@@ -807,4 +829,4 @@
-ms-flex-order: 1;
order: 1
}
-}
\ No newline at end of file
+}
diff --git a/src/components/TracePage/TraceTimelineViewer/index.css b/src/components/TracePage/TraceTimelineViewer/index.css
index b23f337b9e..16ca890e82 100644
--- a/src/components/TracePage/TraceTimelineViewer/index.css
+++ b/src/components/TracePage/TraceTimelineViewer/index.css
@@ -1,17 +1,33 @@
-.span-row:hover {
- background-color: whitesmoke;
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.span-row.is-filtered-out,
+.detail-row.is-filtered-out {
+ opacity: 0.2;
}
-.span-row .span-row__bar {
- opacity: 0.5;
-}
-.span-row--selected {
- background-color: whitesmoke;
-}
-.span-row--selected .span-row__bar {
- opacity: 1;
-}
-.span-row:hover .span-row__bar {
- opacity: 1;
+
+.trace-timeline-viewer {
+ border: 1px solid #bbb;
+ border-top: none;
}
.noselect {
@@ -691,4 +707,4 @@
.hint--bounce:before, .hint--bounce:after {
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
- transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
\ No newline at end of file
+ transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
diff --git a/src/components/TracePage/TraceTimelineViewer/index.js b/src/components/TracePage/TraceTimelineViewer/index.js
index ecec067886..4d04681676 100644
--- a/src/components/TracePage/TraceTimelineViewer/index.js
+++ b/src/components/TracePage/TraceTimelineViewer/index.js
@@ -20,488 +20,84 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import _ from 'lodash';
-import { onlyUpdateForKeys, compose, withState, withProps, pure } from 'recompose';
-import * as d3 from 'd3-scale';
-import { filterSpansForText } from '../../../selectors/span';
+
+import getFilteredSpans from './get-filtered-spans';
+import TraceView from './TraceView';
+import { getPositionInRange } from './utils';
+
import './grid.css';
import './index.css';
-import {
- calculateSpanPosition,
- convertTimeRangeToPercent,
- ensureWithinRange,
- formatDuration,
- findServerChildSpan,
- isErrorSpan,
- spanContainsErredSpan,
-} from './utils';
-import { transformTrace } from './transforms';
-import colorGenerator from '../../../utils/color-generator';
-import SpanDetail from './SpanDetail';
-// TODO: Move some styles to css
-// TODO: Clean up component names and move to seperate files.
// TODO: Add unit tests
-// TODO: unify transforms and utils
-
-const ensurePercentIsBetween0And100 = percent => ensureWithinRange([0, 100], percent);
-
-/**
- * Components!
- */
-function Rail() {
- return onMouseOver()}
- onMouseOut={() => onMouseOut()}
- className="span-row__bar hint--right hint--always"
- onClick={onClick}
- aria-label={label}
- style={{
- transition: enableTransition ? 'width 500ms' : undefined,
- borderRadius: 3,
- position: 'absolute',
- display: 'inline-block',
- backgroundColor: color,
- top: `${(100 - barHeightPercent) / 2}%`,
- height: `${barHeightPercent}%`,
- width: `${ensurePercentIsBetween0And100(barWidth)}%`,
- left: `${ensurePercentIsBetween0And100(startPercent)}%`,
- }}
- >
- {childInterval &&
-
}
-
- {ticks.map(tick =>
-
-
- {tick.label}
-
-
- )}
-
- {children}
-
- );
-};
-TimelineRow.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
-};
-TimelineRow.Left = props => {
- const { children, ...rest } = props;
- return (
-
- {children}
-
- );
-};
-TimelineRow.Left.propTypes = {
- children: PropTypes.node,
-};
-TimelineRow.Right = props => {
- const { children, ...rest } = props;
- return (
-
- {children}
-
- );
-};
-TimelineRow.Right.propTypes = {
- children: PropTypes.node,
-};
-
-const Timeline = {};
-Timeline.SpanDetails = pure(props => {
- const { span, color, trace } = props;
- const { spanID } = span;
- return (
-
-
-
-
-
-
- );
-});
-Timeline.SpanDetails.propTypes = {
- span: PropTypes.object,
- color: PropTypes.string,
-};
-
-function TraceView(props) {
- const {
- trace,
- zoomStart = 0,
- zoomEnd = 100,
- collapsedSpanIDs,
- selectedSpanIDs,
- filteredSpansIDs,
- onSpanClick,
- onSpanCollapseClick,
- tickPercents = [0, 25, 50, 75, 100],
- } = props;
-
- function getDuationAtTickPercent(tickPercent) {
- const d1 = d3.scaleLinear().domain([0, 100]).range([zoomStart, zoomEnd]);
- const d2 = d3.scaleLinear().domain([0, 100]).range([0, trace.duration]);
- return d2(d1(tickPercent));
- }
-
- let collapseBelow = null;
- const renderSpansRows = trace.spans.reduce((arr, span, i) => {
- const { spanID } = span;
- const showSpanDetails = selectedSpanIDs.has(spanID);
- const spanHasChildren = span.hasChildren;
- const spanIsCollapsed = collapsedSpanIDs.has(spanID);
- const spanColor = colorGenerator.getColorByKey(span.process.serviceName);
-
- let filterOutSpan = false;
- if (filteredSpansIDs) {
- filterOutSpan = !filteredSpansIDs.has(spanID);
- }
-
- // Collapse logic
- // TODO: Investigate if this should be moved out to statefull component.
- let hidden = false;
- if (collapseBelow) {
- if (span.depth >= collapseBelow) {
- hidden = true;
- } else {
- collapseBelow = null;
- }
- }
- if (spanIsCollapsed && !hidden) {
- collapseBelow = span.depth + 1;
- }
- if (hidden) {
- return arr;
- }
-
- // Compute span position with given zoom.
- const { xStart: startPercent, xEnd: endPercent } = calculateSpanPosition({
- traceStartTime: trace.startTime,
- traceEndTime: trace.endTime,
- spanStart: span.startTime,
- spanEnd: span.startTime + span.duration,
- xStart: zoomStart,
- xEnd: zoomEnd,
- });
-
- // Check for direct child "server" span if the span is a "client" span.
- // TODO: Can probably optimize this a bit more so it does not do it
- // on render.
- const childServerSpan = findServerChildSpan(trace.spans.slice(i));
- let interval;
- if (childServerSpan && spanIsCollapsed) {
- const childSpanPosition = calculateSpanPosition({
- traceStartTime: trace.startTime,
- traceEndTime: trace.endTime,
- spanStart: childServerSpan.startTime,
- spanEnd: childServerSpan.startTime + childServerSpan.duration,
- xStart: zoomStart,
- xEnd: zoomEnd,
- });
- const x = d3.scaleLinear().domain([startPercent, endPercent]).range([0, 100]);
- interval = {
- color: colorGenerator.getColorByKey(childServerSpan.process.serviceName),
- startPercent: x(childSpanPosition.xStart),
- endPercent: x(childSpanPosition.xEnd),
- };
- }
-
- const showErrorIcon = isErrorSpan(span) || (spanIsCollapsed && spanContainsErredSpan(trace.spans, i));
- const backgroundColor = showSpanDetails ? 'whitesmoke' : null;
- arr.push(
-
-
-
-
- onSpanClick(spanID)}>
- ({ percent }))} />
-
-
- );
- if (showSpanDetails) {
- arr.push(
-
-
- Span Name
-
-
- ({
- percent: tickPercent,
- label: tickPercent !== 0 ? formatDuration(getDuationAtTickPercent(tickPercent)) : '',
- position: tickPercent === 100 ? 'left' : 'right',
- }))}
- />
- Timeline
-
-
- {renderSpansRows}
-
- );
-}
-TraceView.propTypes = {
- trace: PropTypes.object,
-
- collapsedSpanIDs: PropTypes.object,
- selectedSpanIDs: PropTypes.object,
- filteredSpansIDs: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
- tickPercents: PropTypes.arrayOf(PropTypes.number),
- zoomStart: PropTypes.number,
- zoomEnd: PropTypes.number,
-
- onSpanClick: PropTypes.func,
- onSpanCollapseClick: PropTypes.func,
-};
export default class TraceTimelineViewer extends Component {
constructor(props) {
super(props);
- const initialDepthCollapse = false; // Change this to = 1 to first children spans only.
- const collapsedSpans = new Map();
- const transformedTrace = transformTrace(props.trace);
- if (_.isNumber(initialDepthCollapse)) {
- transformedTrace.spans.forEach(span => {
- if (span.depth >= initialDepthCollapse && span.hasChildren) {
- collapsedSpans.set(span.spanID, true);
- }
- });
- }
+ const { textFilter, xformedTrace } = props;
+ const filteredSpans = textFilter ? getFilteredSpans(xformedTrace, textFilter) : null;
this.state = {
- selectedSpans: new Map(),
- collapsedSpans,
- startX: 0,
+ filteredSpans,
+ collapsedSpans: new Set(),
endX: 100,
- trace: transformedTrace,
+ selectedSpans: new Set(),
+ startX: 0,
+ trace: props.xformedTrace,
};
+ this.toggleSpanCollapse = this.toggleSpanCollapse.bind(this);
+ this.toggleSpanSelect = this.toggleSpanSelect.bind(this);
}
+
+ componentWillReceiveProps(nextProps) {
+ const { xformedTrace, textFilter } = nextProps;
+ if (textFilter === this.props.textFilter && xformedTrace === this.props.xformedTrace) {
+ return;
+ }
+ const filteredSpans = textFilter ? getFilteredSpans(nextProps.xformedTrace, textFilter) : null;
+ this.setState({ filteredSpans, trace: xformedTrace });
+ }
+
toggleSpanCollapse(spanID) {
- this.toggleStateMap('collapsedSpans', spanID);
+ this.toggleStateSet('collapsedSpans', spanID);
}
+
toggleSpanSelect(spanID) {
- this.toggleStateMap('selectedSpans', spanID);
+ this.toggleStateSet('selectedSpans', spanID);
}
- toggleStateMap(statePropName, spanID) {
- const propMap = this.state[statePropName];
- if (propMap.has(spanID)) {
- propMap.delete(spanID);
+
+ toggleStateSet(statePropName, spanID) {
+ const set = new Set(this.state[statePropName]);
+ if (set.has(spanID)) {
+ set.delete(spanID);
} else {
- propMap.set(spanID, true);
+ set.add(spanID);
}
- this.setState({ [statePropName]: propMap });
+ this.setState({ [statePropName]: set });
}
+
render() {
- const { selectedSpans, collapsedSpans, trace } = this.state;
- const { timeRangeFilter, textFilter } = this.props;
- let filteredSpansIDs = false;
- if (textFilter) {
- filteredSpansIDs = new Map();
- filterSpansForText({
- spans: trace.spans,
- text: textFilter,
- }).forEach(span => filteredSpansIDs.set(span.spanID, true));
- }
+ const { selectedSpans, collapsedSpans, filteredSpans, trace } = this.state;
+ const { timeRangeFilter: zoomRange } = this.props;
const { startTime, endTime } = trace;
- const zoom = convertTimeRangeToPercent(timeRangeFilter, [startTime, endTime]);
return (
-
+
this.toggleSpanSelect(spanID)}
- onSpanCollapseClick={spanID => this.toggleSpanCollapse(spanID)}
+ filteredSpansIDs={filteredSpans}
+ zoomStart={getPositionInRange(startTime, endTime, zoomRange[0])}
+ zoomEnd={getPositionInRange(startTime, endTime, zoomRange[1])}
+ onSpanClick={this.toggleSpanSelect}
+ onSpanCollapseClick={this.toggleSpanCollapse}
/>
);
}
}
TraceTimelineViewer.propTypes = {
- trace: PropTypes.object,
+ xformedTrace: PropTypes.object,
timeRangeFilter: PropTypes.array,
textFilter: PropTypes.string,
};
diff --git a/src/index.test.js b/src/components/TracePage/TraceTimelineViewer/index.test.js
similarity index 59%
rename from src/index.test.js
rename to src/components/TracePage/TraceTimelineViewer/index.test.js
index af8157cbd9..fb7aa3caa5 100644
--- a/src/index.test.js
+++ b/src/components/TracePage/TraceTimelineViewer/index.test.js
@@ -18,22 +18,28 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
-import JaegerUIApp, { SpanGraph, TracePage, SearchTracePage } from './index';
+import React from 'react';
+import { shallow } from 'enzyme';
-/* eslint-disable global-require, import/newline-after-import */
-it('JaegerUIApp should be exported as default', () => {
- expect(JaegerUIApp).toBe(require('../src/components/App').default);
-});
+import TraceTimelineViewer from './index';
+import { transformTrace } from './transforms';
+import traceGenerator from '../../../demo/trace-generators';
-it('SpanGraph should be exported as as a named export', () => {
- expect(SpanGraph).toBe(require('../src/components/SpanGraph').default);
-});
+describe('
', () => {
+ const trace = traceGenerator.trace({});
+ const props = {
+ textFilter: null,
+ timeRangeFilter: [0, 1],
+ xformedTrace: transformTrace(trace),
+ };
-it('TracePage should be exported as as a named export', () => {
- expect(TracePage).toBe(require('../src/components/TracePage').default);
-});
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(
-
-
-
+
+ {headerHeight &&
+
+ this.toggleSlimView(!slimView)}
+ xformedTrace={xformedTrace}
+ timeRangeFilter={this.state.timeRangeFilter}
+ textFilter={this.state.textFilter}
/>
- {!slimView &&
-
+ }
+ ', () => {
+ const trace = traceGenerator.trace({});
+ const defaultProps = {
+ trace,
+ fetchTrace() {},
+ id: trace.traceID,
+ xformedTrace: transformTrace(trace),
+ };
- expect(wrapper.contains(', () => {
+ expect(wrapper.find(TracePageHeader).get(0)).toBeTruthy();
+ });
-// can't do mount tests in standard tape run.
-it('TracePage should fetch the trace if necessary', () => {
- const fetchTrace = sinon.spy();
- const wrapper = shallow(', () => {
+ const props = { trace: defaultProps.trace, xformedTrace: defaultProps.xformedTrace };
+ expect(wrapper.contains(