diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.js b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.js index 132cf6e7f2..2f0b7da1ca 100644 --- 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} > - moment(t).format('hh:mm:ss a')} /> + moment(t / ONE_MILLISECOND).format('hh:mm:ss a')} + /> formatDuration(t)} /> { + 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(' should render base case correctly', () => { const wrapper = shallow( @@ -31,3 +66,44 @@ it(' should render base case correctly', () => { ); expect(wrapper).toBeTruthy(); }); + +it(' should render X axis correctly', () => { + const wrapper = mount( + 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(' should render Y axis correctly', () => { + const wrapper = mount( + 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'); +});