WIP refactor trace detail, split out css, start fixing tests

src/components/App/App.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.
+*/
+
 a {
   color: #11939A;
 }

src/components/TracePage/SpanGraph/SpanGraph.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.
+*/
+
 .span-graph--tick {
   stroke: #e5e5e4;
   opacity: 0.5;

src/components/TracePage/SpanGraph/SpanGraphTickHeader.js

@@ -31,7 +31,7 @@ export default function SpanGraphTickHeader(props) {
     const portion = i / numTicks;
     const style = portion === 1 ? { right: '0%' } : { left: `${portion * 100}%` };
     ticks.push(
-      <div className="span-graph--tick-header__label" style={style} key={portion}>
+      <div key={portion} className="span-graph--tick-header__label" style={style} data-test="tick">
         {formatDuration(duration * portion)}
       </div>
     );

src/components/TracePage/SpanGraph/SpanGraphTickHeader.test.js

@@ -22,59 +22,44 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import SpanGraphTickHeader from './SpanGraphTickHeader';
-import SpanGraphTickHeaderLabel from './SpanGraphTickHeaderLabel';
 
-const timestamp = new Date().getTime() * 1000;
-const defaultProps = {
-  ticks: [
-    { timestamp },
-    { timestamp: timestamp + 1000000 },
-    { timestamp: timestamp + 2000000 },
-    { timestamp: timestamp + 3000000 },
-    { timestamp: timestamp + 4000000 },
-  ],
-  trace: {
-    spans: [
-      {
-        duration: 4000000,
-        startTime: timestamp,
-      },
-    ],
-  },
-};
+describe('<SpanGraphTickHeader>', () => {
+  const defaultProps = {
+    numTicks: 4,
+    duration: 5000,
+  };
 
-it('<SpanGraphTickHeader /> should render the right number of ticks', () => {
-  const wrapper = shallow(<SpanGraphTickHeader {...defaultProps} />);
-  const ticks = wrapper.find(SpanGraphTickHeaderLabel);
+  let wrapper;
+  let ticks;
 
-  expect(ticks.length).toBe(defaultProps.ticks.length);
-});
-
-it('<SpanGraphTickHeader /> should place the first tick on the left', () => {
-  const wrapper = shallow(<SpanGraphTickHeader {...defaultProps} />);
-  const firstTick = wrapper.find(SpanGraphTickHeaderLabel).first();
-
-  expect(firstTick.prop('style')).toEqual({ left: '0%' });
-});
+  beforeEach(() => {
+    wrapper = shallow(<SpanGraphTickHeader {...defaultProps} />);
+    ticks = wrapper.find('[data-test="tick"]');
+  });
 
-it('<SpanGraphTickHeader /> should place the last tick on the right', () => {
-  const wrapper = shallow(<SpanGraphTickHeader {...defaultProps} />);
-  const lastTick = wrapper.find(SpanGraphTickHeaderLabel).last();
+  it('renders the right number of ticks', () => {
+    expect(ticks.length).toBe(defaultProps.numTicks + 1);
+  });
 
-  expect(lastTick.prop('style')).toEqual({ right: '0%' });
-});
-
-it('<SpanGraphTickHeader /> should place the middle ticks at proper intervals', () => {
-  const wrapper = shallow(<SpanGraphTickHeader {...defaultProps} />);
-  const ticks = wrapper.find(SpanGraphTickHeaderLabel);
+  it('places the first tick on the left', () => {
+    const firstTick = ticks.first();
+    expect(firstTick.prop('style')).toEqual({ left: '0%' });
+  });
 
-  expect(ticks.at(1).prop('style')).toEqual({ left: '25%' });
+  it('places the last tick on the right', () => {
+    const lastTick = ticks.last();
+    expect(lastTick.prop('style')).toEqual({ right: '0%' });
+  });
 
-  expect(ticks.at(2).prop('style')).toEqual({ left: '50%' });
-
-  expect(ticks.at(3).prop('style')).toEqual({ left: '75%' });
-});
+  it('places middle ticks at proper intervals', () => {
+    const positions = ['25%', '50%', '75%'];
+    positions.forEach((pos, i) => {
+      const tick = ticks.at(i + 1);
+      expect(tick.prop('style')).toEqual({ left: pos });
+    });
+  });
 
-it('<SpanGraphTickHeader /> should not explode if no trace is present', () => {
-  expect(() => shallow(<SpanGraphTickHeader {...defaultProps} trace={null} />)).not.toThrow();
+  it("doesn't explode if no trace is present", () => {
+    expect(() => shallow(<SpanGraphTickHeader {...defaultProps} trace={null} />)).not.toThrow();
+  });
 });

src/components/TracePage/SpanGraph/index.js

@@ -58,10 +58,10 @@ export default function SpanGraph(props) {
 
   return (
     <g>
-      <g aria-hidden="true">
+      <g data-test="ticks" aria-hidden="true">
         {ticks}
       </g>
-      <g>
+      <g data-test="span-items">
         {spanItems}
       </g>
     </g>

src/components/TracePage/SpanGraph/index.test.js

@@ -21,91 +21,46 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import SpanGraph from '.';
-
-import SpanGraphTick from './SpanGraphTick';
-import SpanGraphSpan from './SpanGraphSpan';
-import { getTicksForTrace } from '../../../../../selectors/trace';
-
-const initialTimestamp = new Date().getTime() * 1000;
-const trace = {
-  traceID: 'trace-id',
-  spans: [
-    {
-      spanID: 'span-id',
-      traceID: 'trace-id',
-      startTime: initialTimestamp,
-      duration: 1000000,
-    },
-    {
-      spanID: 'span-id',
-      traceID: 'trace-id',
-      startTime: initialTimestamp + 200,
-      duration: 10000,
-    },
-  ],
-};
-const ticks = getTicksForTrace({ trace });
-const defaultProps = {
-  rowHeight: 10,
-  rowPadding: 1,
-  ticks,
-  trace,
-  width: 500,
-};
-
-it('<SpanGraph /> should render an <svg>', () => {
-  const wrapper = shallow(<SpanGraph {...defaultProps} />);
-
-  expect(wrapper.find('svg').length).toBe(1);
-});
-
-it('<SpanGraph /> should set the width', () => {
-  const wrapper = shallow(<SpanGraph {...defaultProps} />);
-  const svg = wrapper.find('svg').first();
-
-  expect(svg.prop('width')).toBe(defaultProps.width);
-});
-
-it('<SpanGraph /> should calculate the height based on the rowHeight and rowPadding', () => {
-  const wrapper = shallow(<SpanGraph {...defaultProps} />);
-  const svg = wrapper.find('svg').first();
-
-  // (10 + 2) * 2
-  expect(svg.prop('height')).toBe(24);
-});
-
-it('<SpanGraph /> should create <SpanGraphTick />s for the ticks', () => {
-  const wrapper = shallow(<SpanGraph {...defaultProps} />);
-  const ticksWrapper = wrapper.find(SpanGraphTick);
-
-  expect(ticksWrapper.length).toBe(ticks.length);
-});
-
-it('<SpanGraph /> should create <SpanGraphSpan />s for the spans', () => {
-  const wrapper = shallow(<SpanGraph {...defaultProps} />);
-  const spansWrapper = wrapper.find(SpanGraphSpan);
-
-  expect(spansWrapper.length).toBe(trace.spans.length);
-});
-
-it('<SpanGraphSpan /> should attach "onSomethingSpan" handlers with to the spans', () => {
-  function onClick() {
-    // just checking to see that we got in here
-    expect(true).toBeTruthy();
-  }
-
-  const wrapper = shallow(<SpanGraph {...defaultProps} onClickSpan={onClick} />);
-
-  wrapper.find(SpanGraphSpan).first().props().onClick();
-});
-
-it('<SpanGraphSpan /> should spread unmatched props onto the rect', () => {
-  const onClick = () => {};
-
-  const wrapper = shallow(<SpanGraph {...defaultProps} onClick={onClick} />);
-
-  const svg = wrapper.find('svg').first();
-
-  expect(svg.prop('onClick')).toBe(onClick);
+import SpanGraph from './';
+
+describe('<SpanGraph>', () => {
+  const defaultProps = {
+    items: [
+      { valueWidth: 100, valueOffset: 25, serviceName: 'a' },
+      { valueWidth: 100, valueOffset: 50, serviceName: 'b' },
+    ],
+    valueWidth: 200,
+    numTicks: 4,
+  };
+
+  let itemsG;
+  let ticksG;
+
+  beforeEach(() => {
+    const wrapper = shallow(<SpanGraph {...defaultProps} />);
+    itemsG = wrapper.find('[data-test="span-items"]');
+    ticksG = wrapper.find('[data-test="ticks"]');
+  });
+
+  it('renders a <g>', () => {
+    expect(itemsG.length).toBe(1);
+  });
+
+  it('calculates the height of rects based on the number of items', () => {
+    const rect = itemsG.find('rect').first();
+    expect(rect).toBeDefined();
+    expect(rect.prop('height')).toBe('50%');
+  });
+
+  it('creates a <g> for ticks', () => {
+    expect(ticksG.length).toBe(1);
+  });
+
+  it('creates a line for each tick block', () => {
+    expect(ticksG.find('line').length).toBe(defaultProps.numTicks + 1);
+  });
+
+  it('creates a rect for each item in the items prop', () => {
+    expect(itemsG.find('rect').length).toBe(defaultProps.items.length);
+  });
 });

src/components/TracePage/TracePage.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.
+*/
+
 /* timeline */
 .trace-page-timeline {
   margin-bottom: 0.5rem;

src/components/TracePage/TraceSpanGraph.js

@@ -27,14 +27,7 @@ import SpanGraphTickHeader from './SpanGraph/SpanGraphTickHeader';
 import tracePropTypes from '../../propTypes/trace';
 import TimelineScrubber from './TimelineScrubber';
 
-import {
-  getTraceId,
-  getTicksForTrace,
-  getTraceTimestamp,
-  getTraceEndTimestamp,
-  getTraceDuration,
-  getTraceSpanCount,
-} from '../../selectors/trace';
+import { getTraceId, getTraceTimestamp, getTraceEndTimestamp, getTraceDuration } from '../../selectors/trace';
 import { getPercentageOfInterval } from '../../utils/date';
 
 const TIMELINE_TICK_INTERVAL = 4;

src/components/TracePage/TraceTimelineViewer/SpanBar.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.
+*/
+
 
 .span-bar-wrapper {
   bottom: 0;
@@ -14,7 +36,8 @@
   opacity: 1;
 }
 
-.span-bar {
+/* Add the hint related selector to override the hint styling (via specificity) */
+[class*="hint--"].span-bar {
   border-radius: 3px;
   position: absolute;
   height: 50%;