Fix rendering X axis in TraceResultsScatterPlot - pass milliseconds t…

…o moment.js (jaegertracing#274) * Fix rendering X axis in TraceResultsScatterPlot Signed-off-by: Ivan Strelkov <[email protected]> * Test ScatterPlot axis rendering Signed-off-by: Ivan Strelkov <[email protected]>
copa2 · Nov 18, 2018 · 4136e29 · 4136e29
1 parent db2ac3b
commit 4136e29
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 4 deletions.
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.js
@@ -20,7 +20,7 @@ import { XYPlot, XAxis, YAxis, MarkSeries, Hint } from 'react-vis';
 import { compose, withState, withProps } from 'recompose';
 
 import { FALLBACK_TRACE_NAME } from '../../../constants';
-import { formatDuration } from '../../../utils/date';
+import { ONE_MILLISECOND, formatDuration } from '../../../utils/date';
 
 import './react-vis.css';
 import './ScatterPlot.css';
@@ -36,7 +36,11 @@ function ScatterPlotImpl(props) {
         width={containerWidth}
         height={200}
       >
-        <XAxis title="Time" tickTotal={4} tickFormat={t => moment(t).format('hh:mm:ss a')} />
+        <XAxis
+          title="Time"
+          tickTotal={4}
+          tickFormat={t => moment(t / ONE_MILLISECOND).format('hh:mm:ss a')}
+        />
         <YAxis title="Duration" tickTotal={3} tickFormat={t => formatDuration(t)} />
         <MarkSeries
           sizeRange={[3, 10]}
@@ -86,4 +90,6 @@ const ScatterPlot = compose(
   }))
 )(ScatterPlotImpl);
 
+export { ScatterPlotImpl };
+
 export default dimensions()(ScatterPlot);
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.test.js
@@ -13,9 +13,44 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
+import { XAxis, YAxis } from 'react-vis';
 
-import ScatterPlot from './ScatterPlot';
+import ScatterPlot, { ScatterPlotImpl } from './ScatterPlot';
+import { ONE_MILLISECOND } from '../../../utils/date';
+
+const generateTimestamp = (hours, minutes, seconds) => {
+  const UTCMilliseconds = new Date(2018, 10, 13, hours, minutes, seconds).getTime();
+
+  return UTCMilliseconds * ONE_MILLISECOND;
+};
+
+const sampleData = [
+  {
+    x: generateTimestamp(22, 10, 17),
+    y: 1,
+    traceID: '576b0c2330db100b',
+    size: 1,
+  },
+  {
+    x: generateTimestamp(22, 10, 22),
+    y: 2,
+    traceID: '6fb42ddd88f4b4f2',
+    size: 1,
+  },
+  {
+    x: generateTimestamp(22, 10, 46),
+    y: 77707,
+    traceID: '1f7185d56ef5dc07',
+    size: 3,
+  },
+  {
+    x: generateTimestamp(22, 11, 6),
+    y: 80509,
+    traceID: '21ba1f993ceddd8f',
+    size: 3,
+  },
+];
 
 it('<ScatterPlot /> should render base case correctly', () => {
   const wrapper = shallow(
@@ -31,3 +66,44 @@ it('<ScatterPlot /> should render base case correctly', () => {
   );
   expect(wrapper).toBeTruthy();
 });
+
+it('<ScatterPlotImpl /> should render X axis correctly', () => {
+  const wrapper = mount(
+    <ScatterPlotImpl
+      containerWidth={1200}
+      containerHeight={200}
+      data={sampleData}
+      onValueClick={() => null}
+      onValueOut={() => null}
+      onValueOver={() => null}
+    />
+  );
+
+  const xAxisText = wrapper.find(XAxis).text();
+
+  expect(xAxisText).toContain('10:10:20 pm');
+  expect(xAxisText).toContain('10:10:30 pm');
+  expect(xAxisText).toContain('10:10:40 pm');
+  expect(xAxisText).toContain('10:10:50 pm');
+  expect(xAxisText).toContain('10:11:00 pm');
+});
+
+it('<ScatterPlotImpl /> should render Y axis correctly', () => {
+  const wrapper = mount(
+    <ScatterPlotImpl
+      containerWidth={1200}
+      containerHeight={200}
+      data={sampleData}
+      onValueClick={() => null}
+      onValueOut={() => null}
+      onValueOver={() => null}
+    />
+  );
+
+  const yAxisText = wrapper.find(YAxis).text();
+
+  expect(yAxisText).toContain('20ms');
+  expect(yAxisText).toContain('40ms');
+  expect(yAxisText).toContain('60ms');
+  expect(yAxisText).toContain('80ms');
+});