Skip to content

Commit

Permalink
Merge branch 'master' into milestone1/issue-61-trace-minimap-via-canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiffon
tiffon committed Sep 10, 2017
2 parents 0a48956 + 2258205 commit ecacc5c
Show file tree
Hide file tree
Showing 52 changed files with 2,964 additions and 722 deletions.
22 changes: 19 additions & 3 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,13 @@
],
"rules": {
/* general */
"comma-dangle": 0,
"arrow-parens": [1, "as-needed"],
"no-restricted-syntax": 0,
"comma-dangle": 0,
"no-continue": 0,
"no-plusplus": 0,
"no-restricted-syntax": 0,
"no-self-compare": 0,
"no-underscore-dangle": 0,

/* jsx */
"jsx-a11y/no-static-element-interactions": 1,
Expand All @@ -29,7 +32,20 @@
"react/forbid-prop-types": 1,
"react/require-default-props": 1,
"react/no-array-index-key": 1,

"react/sort-comp": [2, {
"order": [
"type-annotations",
"statics",
"state",
"propTypes",
"static-methods",
"constructor",
"lifecycle",
"everything-else",
"/^on.+$/",
"render"
]
}],

/* import */
"import/prefer-default-export": 1,
Expand Down
3 changes: 3 additions & 0 deletions .flowconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,6 @@
[libs]

[options]

[version]
0.53.1
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"homepage": null,
"devDependencies": {
"babel-eslint": "^7.2.3",
"bluebird": "^3.5.0",
"enzyme": "^2.9.1",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
Expand Down
1 change: 0 additions & 1 deletion src/components/TracePage/SpanGraph/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
import PropTypes from 'prop-types';
import React from 'react';

import renderIntoCanvas from './render-into-canvas';
import colorGenerator from '../../../utils/color-generator';

import './index.css';
Expand Down
96 changes: 44 additions & 52 deletions src/components/TracePage/TraceSpanGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,13 @@ import SpanGraph from './SpanGraph';
import CanvasSpanGraph from './SpanGraph/CanvasSpanGraph';
import SpanGraphTickHeader from './SpanGraph/SpanGraphTickHeader';
import TimelineScrubber from './TimelineScrubber';
import { getTraceId, getTraceTimestamp, getTraceEndTimestamp, getTraceDuration } from '../../selectors/trace';
import { getPercentageOfInterval } from '../../utils/date';

const TIMELINE_TICK_INTERVAL = 4;

export default class TraceSpanGraph extends Component {
static get propTypes() {
return {
xformedTrace: PropTypes.object,
trace: PropTypes.object,
height: PropTypes.number.isRequired,
};
Expand Down Expand Up @@ -78,14 +76,46 @@ export default class TraceSpanGraph extends Component {
const newRightBound = newTimeRangeFilter[1];

return (
getTraceId(trace) !== getTraceId(newTrace) ||
trace.traceID !== newTrace.traceID ||
leftBound !== newLeftBound ||
rightBound !== newRightBound ||
currentlyDragging !== newCurrentlyDragging ||
newCurrentlyDragging
);
}

publishTimeRange() {
const { currentlyDragging, leftBound, rightBound } = this.state;
const { updateTimeRangeFilter } = this.context;
clearTimeout(this.publishIntervalID);
this.publishIntervalID = undefined;
if (currentlyDragging) {
updateTimeRangeFilter(leftBound, rightBound);
}
}

startDragging(boundName, { clientX }) {
const { timeRangeFilter } = this.context;
const [leftBound, rightBound] = timeRangeFilter;

this.setState({ currentlyDragging: boundName, prevX: clientX, leftBound, rightBound });

const mouseMoveHandler = (...args) => this.onMouseMove(...args);
const mouseUpHandler = () => {
this.stopDragging();
window.removeEventListener('mouseup', mouseUpHandler);
window.removeEventListener('mousemove', mouseMoveHandler);
};

window.addEventListener('mouseup', mouseUpHandler);
window.addEventListener('mousemove', mouseMoveHandler);
}

stopDragging() {
this.publishTimeRange();
this.setState({ currentlyDragging: null, prevX: null });
}

onMouseMove({ clientX }) {
const { trace } = this.props;
// const { prevX, currentlyDragging } = this.state;
Expand All @@ -101,19 +131,16 @@ export default class TraceSpanGraph extends Component {
// let rightBound = timeRangeFilter[1];

const deltaX = (clientX - prevX) / this.svg.clientWidth;
const timestamp = getTraceTimestamp(trace);
const endTimestamp = getTraceEndTimestamp(trace);
const duration = getTraceDuration(this.props.trace);
const prevValue = { leftBound, rightBound }[currentlyDragging];
const newValue = prevValue + duration * deltaX;
const newValue = prevValue + trace.duration * deltaX;

// enforce the edges of the graph
switch (currentlyDragging) {
case 'leftBound':
leftBound = Math.max(timestamp, newValue);
leftBound = Math.max(trace.startTime, newValue);
break;
case 'rightBound':
rightBound = Math.min(endTimestamp, newValue);
rightBound = Math.min(trace.endTime, newValue);
break;
/* istanbul ignore next */ default:
break;
Expand All @@ -134,40 +161,8 @@ export default class TraceSpanGraph extends Component {
// }
}

startDragging(boundName, { clientX }) {
const { timeRangeFilter } = this.context;
const [leftBound, rightBound] = timeRangeFilter;

this.setState({ currentlyDragging: boundName, prevX: clientX, leftBound, rightBound });

const mouseMoveHandler = (...args) => this.onMouseMove(...args);
const mouseUpHandler = () => {
this.stopDragging();
window.removeEventListener('mouseup', mouseUpHandler);
window.removeEventListener('mousemove', mouseMoveHandler);
};

window.addEventListener('mouseup', mouseUpHandler);
window.addEventListener('mousemove', mouseMoveHandler);
}

stopDragging() {
this.publishTimeRange();
this.setState({ currentlyDragging: null, prevX: null });
}

publishTimeRange() {
const { currentlyDragging, leftBound, rightBound } = this.state;
const { updateTimeRangeFilter } = this.context;
clearTimeout(this.publishIntervalID);
this.publishIntervalID = undefined;
if (currentlyDragging) {
updateTimeRangeFilter(leftBound, rightBound);
}
}

render() {
const { trace, xformedTrace, height } = this.props;
const { trace, height } = this.props;
const { currentlyDragging } = this.state;
let { leftBound, rightBound } = this.state;
if (!currentlyDragging) {
Expand All @@ -180,28 +175,25 @@ export default class TraceSpanGraph extends Component {
return <div />;
}

const initialTimestamp = getTraceTimestamp(trace);
const traceDuration = getTraceDuration(trace);

let leftInactive;
if (leftBound) {
leftInactive = getPercentageOfInterval(leftBound, initialTimestamp, traceDuration);
leftInactive = getPercentageOfInterval(leftBound, trace.startTime, trace.duration);
}

let rightInactive;
if (rightBound) {
rightInactive = 100 - getPercentageOfInterval(rightBound, initialTimestamp, traceDuration);
rightInactive = 100 - getPercentageOfInterval(rightBound, trace.startTime, trace.duration);
}

return (
<div>
<div className="trace-page-timeline--tick-container">
<SpanGraphTickHeader numTicks={TIMELINE_TICK_INTERVAL} duration={traceDuration} />
<SpanGraphTickHeader numTicks={TIMELINE_TICK_INTERVAL} duration={trace.duration} />
</div>
<div className="relative">
<CanvasSpanGraph
valueWidth={xformedTrace.duration}
items={xformedTrace.spans.map(span => ({
valueWidth={trace.duration}
items={trace.spans.map(span => ({
valueOffset: span.relativeStartTime,
valueWidth: span.duration,
serviceName: span.process.serviceName,
Expand Down Expand Up @@ -231,9 +223,9 @@ export default class TraceSpanGraph extends Component {
className="trace-page-timeline__graph--inactive"
/>}
<SpanGraph
valueWidth={xformedTrace.duration}
valueWidth={trace.duration}
numTicks={TIMELINE_TICK_INTERVAL}
items={xformedTrace.spans.map(span => ({
items={trace.spans.map(span => ({
valueOffset: span.relativeStartTime,
valueWidth: span.duration,
serviceName: span.process.serviceName,
Expand Down
30 changes: 11 additions & 19 deletions src/components/TracePage/TraceSpanGraph.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,14 @@ 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';
import transformTraceData from '../../model/transform-trace-data';

describe('<TraceSpanGraph>', () => {
const trace = hydrateSpansWithProcesses(traceGenerator.trace({}));
const xformedTrace = transformTrace(trace);

const props = {
trace,
xformedTrace,
};

const trace = transformTraceData(traceGenerator.trace({}));
const props = { trace };
const options = {
context: {
timeRangeFilter: [trace.timestamp, trace.timestamp + trace.duration],
timeRangeFilter: [trace.startTime, trace.startTime + trace.duration],
updateTimeRangeFilter: () => {},
},
};
Expand All @@ -68,7 +61,7 @@ describe('<TraceSpanGraph>', () => {
it('renders a filtering box if leftBound exists', () => {
const context = {
...options.context,
timeRangeFilter: [trace.timestamp + 0.2 * trace.duration, trace.timestamp + trace.duration],
timeRangeFilter: [trace.startTime + 0.2 * trace.duration, trace.startTime + trace.duration],
};
wrapper = shallow(<TraceSpanGraph {...props} />, { ...options, context });
const leftBox = wrapper.find('.trace-page-timeline__graph--inactive');
Expand All @@ -82,7 +75,7 @@ describe('<TraceSpanGraph>', () => {
it('renders a filtering box if rightBound exists', () => {
const context = {
...options.context,
timeRangeFilter: [trace.timestamp, trace.timestamp + 0.8 * trace.duration],
timeRangeFilter: [trace.startTime, trace.startTime + 0.8 * trace.duration],
};
wrapper = shallow(<TraceSpanGraph {...props} />, { ...options, context });
const rightBox = wrapper.find('.trace-page-timeline__graph--inactive');
Expand Down Expand Up @@ -132,7 +125,7 @@ describe('<TraceSpanGraph>', () => {

it('passes items to SpanGraph', () => {
const spanGraph = wrapper.find(SpanGraph).first();
const items = xformedTrace.spans.map(span => ({
const items = trace.spans.map(span => ({
valueOffset: span.relativeStartTime,
valueWidth: span.duration,
serviceName: span.process.serviceName,
Expand All @@ -151,9 +144,8 @@ describe('<TraceSpanGraph>', () => {
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 };
const trace2 = transformTraceData(traceGenerator.trace({}));
const altProps = { trace: trace2 };
expect(instance.shouldComponentUpdate(altProps, state, options.context)).toBe(true);
});

Expand Down Expand Up @@ -190,7 +182,7 @@ describe('<TraceSpanGraph>', () => {
});

it('updates the timeRangeFilter for the left handle', () => {
const timestamp = trace.timestamp;
const timestamp = trace.startTime;
const duration = trace.duration;
const updateTimeRangeFilter = sinon.spy();
const context = { ...options.context, updateTimeRangeFilter };
Expand All @@ -204,7 +196,7 @@ describe('<TraceSpanGraph>', () => {
});

it('updates the timeRangeFilter for the right handle', () => {
const timestamp = trace.timestamp;
const timestamp = trace.startTime;
const duration = trace.duration;
const updateTimeRangeFilter = sinon.spy();
const context = { ...options.context, updateTimeRangeFilter };
Expand Down
Loading

0 comments on commit ecacc5c

Please sign in to comment.