Add button to reset viewing layer zoom (jaegertracing#215)

Signed-off-by: Everett Ross <[email protected]>

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,10 +16,10 @@
 
 import * as React from 'react';
 import cx from 'classnames';
+import { Button } from 'antd';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
-import ResetViewRangeTimeButton from './ResetViewRangeTimeButton';
 import type { ViewRange, ViewRangeTimeUpdate } from '../types';
 import type { DraggableBounds, DraggingUpdate } from '../../../utils/DraggableManager';
 import DraggableManager, { updateTypes } from '../../../utils/DraggableManager';
@@ -225,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[]
@@ -278,7 +289,9 @@ export default class ViewingLayer extends React.PureComponent<ViewingLayerProps,
     return (
       <div aria-hidden className="ViewingLayer" style={{ height }}>
         {(viewStart !== 0 || viewEnd !== 1) && (
-          <ResetViewRangeTimeButton updateViewRangeTime={this.props.updateViewRangeTime} />
+          <Button onClick={this._resetTimeZoomClickHandler} className="viewRangeTimeResetButton">
+            Reset Selection
+          </Button>
         )}
         <svg
           height={height}

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 />', () => {