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

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

Signed-off-by: Everett Ross <reverett@uber.com>

* Adhere to className pattern, sort imports, remove event handling

Signed-off-by: Everett Ross <reverett@uber.com>

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

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

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

@@ -14,8 +14,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as React from 'react';
+import { Button } from 'antd';
 import cx from 'classnames';
+import * as React from 'react';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
@@ -225,7 +226,14 @@ 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.
+   */
+  _resetTimeZoomClickHandler = () => {
+    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[]
@@ -277,6 +285,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="ViewingLayer--resetZoom">
+            Reset Selection
+          </Button>
+        )}
         <svg
           height={height}
           className="ViewingLayer--graph"

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

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
 import { shallow } from 'enzyme';
+import React from 'react';
 
 import GraphTicks from './GraphTicks';
 import Scrubber from './Scrubber';
@@ -255,6 +255,39 @@ describe('<SpanGraph>', () => {
         });
       });
     });
+
+    describe('.ViewingLayer--resetZoom', () => {
+      it('should not render .ViewingLayer--resetZoom if props.viewRange.time.current = [0,1]', () => {
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(0);
+        wrapper.setProps({ viewRange: { time: { current: [0, 1] } } });
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(0);
+      });
+
+      it('should render ViewingLayer--resetZoom if props.viewRange.time.current[0] !== 0', () => {
+        // If the test fails on the following expect statement, this may be a false negative
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(0);
+        wrapper.setProps({ viewRange: { time: { current: [0.1, 1] } } });
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(1);
+      });
+
+      it('should render ViewingLayer--resetZoom if props.viewRange.time.current[1] !== 1', () => {
+        // If the test fails on the following expect statement, this may be a false negative
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(0);
+        wrapper.setProps({ viewRange: { time: { current: [0, 0.9] } } });
+        expect(wrapper.find('.ViewingLayer--resetZoom').length).toBe(1);
+      });
+
+      it('should call props.updateViewRangeTime when clicked', () => {
+        wrapper.setProps({ viewRange: { time: { current: [0.1, 0.9] } } });
+        const resetZoomButton = wrapper.find('.ViewingLayer--resetZoom');
+        // If the test fails on the following expect statement, this may be a false negative caused
+        // by a regression to rendering.
+        expect(resetZoomButton.length).toBe(1);
+
+        resetZoomButton.simulate('click');
+        expect(props.updateViewRangeTime).lastCalledWith(0, 1);
+      });
+    });
   });
 
   it('renders a <GraphTicks />', () => {