Add a Button to Reset Viewing Layer Zoom (#215)

packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.css

@@ -62,3 +62,15 @@ limitations under the License.
   top: 0;
   user-select: none;
 }
+
+.viewRangeTimeResetButton {
+  display: none;
+  position: absolute;
+  right: 1%;
+  top: 10%;
+  z-index: 1;
+}
+
+.ViewingLayer:hover > .viewRangeTimeResetButton {
+  display: unset;
+}

packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.js

@@ -16,6 +16,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
+import { Button } from 'antd';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
@@ -224,7 +225,18 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
   };
 
   /**
-   * Randers the difference between where the drag started and the current
+   * Resets the zoom to fully zoomed out.
+   *
+   * @param {Syntheticevent<HTMLButtonElement>} event - Click event created by clicking on button.
+   */
+  _resetTimeZoomClickHandler = (event: SyntheticEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    this.props.updateViewRangeTime(0, 1);
+  };
+
+  /**
+   * Renders the difference between where the drag started and the current
    * position, e.g. the red or blue highlight.
    *
    * @returns React.Node[]
@@ -276,6 +288,11 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
 
     return (
       <div aria-hidden className="ViewingLayer" style={{ height }}>
+        {(viewStart !== 0 || viewEnd !== 1) && (
+          <Button onClick={this._resetTimeZoomClickHandler} className="viewRangeTimeResetButton">
+            Reset Selection
+          </Button>
+        )}
         <svg
           height={height}
           className="ViewingLayer--graph"

packages/jaeger-ui/src/components/TracePage/SpanGraph/ViewingLayer.test.js

@@ -255,6 +255,37 @@ describe('<SpanGraph>', () => {
         });
       });
     });
+
+    describe('.viewRangeTimeResetButton', () => {
+      it('should render viewRangeResetButton if props.viewRange.time.current[0] !== 0', () => {
+        expect(wrapper.find('.viewRangeTimeResetButton').length).toBe(0);
+        wrapper.setProps({ viewRange: { time: { current: [0.1, 1] } } });
+        expect(wrapper.find('.viewRangeTimeResetButton').length).toBe(1);
+      });
+
+      it('should render viewRangeResetButton if props.viewRange.time.current[1] !== 1', () => {
+        expect(wrapper.find('.viewRangeTimeResetButton').length).toBe(0);
+        wrapper.setProps({ viewRange: { time: { current: [0, 0.9] } } });
+        expect(wrapper.find('.viewRangeTimeResetButton').length).toBe(1);
+      });
+
+      it('should call props.updateViewRangeTime and handle click event when clicked', () => {
+        wrapper.setProps({ viewRange: { time: { current: [0.1, 0.9] } } });
+        const viewRangeTimeResetButton = wrapper.find('.viewRangeTimeResetButton');
+        // If the test fails on the following expect statement, this may be a false negative caused
+        // by a regression to rendering.
+        expect(viewRangeTimeResetButton.length).toBe(1);
+
+        const mockEvent = {
+          preventDefault: jest.fn(),
+          stopPropagation: jest.fn(),
+        };
+        viewRangeTimeResetButton.simulate('click', mockEvent);
+        expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+        expect(mockEvent.stopPropagation).toHaveBeenCalledTimes(1);
+        expect(props.updateViewRangeTime).lastCalledWith(0, 1);
+      });
+    });
   });
 
   it('renders a <GraphTicks />', () => {

packages/jaeger-ui/src/components/TracePage/TracePageHeaderEmbed.test.js

@@ -57,5 +57,4 @@ describe('<TracePageHeaderEmbed>', () => {
     wrapper.setProps({ enableDetails: true });
     expect(wrapper.find(LabeledList).length).toBe(1);
   });
-
 });

packages/jaeger-ui/src/components/TracePage/index.test.js

@@ -417,7 +417,8 @@ describe('mapStateToProps()', () => {
       },
       router: {
         location: {
-          search: 'embed=v0&enableDetails&mapCollapsed&fromSearch=%2Fsearch%3Fend%3D1542902040794000%26limit%3D20%26lookback%3D1h%26maxDuration%26minDuration%26service%3Dproductpage%26start%3D1542898440794000',
+          search:
+            'embed=v0&enableDetails&mapCollapsed&fromSearch=%2Fsearch%3Fend%3D1542902040794000%26limit%3D20%26lookback%3D1h%26maxDuration%26minDuration%26service%3Dproductpage%26start%3D1542898440794000',
         },
       },
       config: {
@@ -436,7 +437,8 @@ describe('mapStateToProps()', () => {
       archiveEnabled: false,
       embed: true,
       enableDetails: true,
-      fromSearch: '/search?end=1542902040794000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1542898440794000',
+      fromSearch:
+        '/search?end=1542902040794000&limit=20&lookback=1h&maxDuration&minDuration&service=productpage&start=1542898440794000',
       mapCollapsed: true,
       archiveTraceState: undefined,
       trace: { data: {}, state: fetchedState.DONE },