Add link to timeline view from comparison view and selection

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.js

@@ -20,6 +20,7 @@ import { Link } from 'react-router-dom';
 
 import ResultItemTitle from './ResultItemTitle';
 import { getUrl } from '../../TraceDiff/url';
+import { getUrl as getTracePageUrl } from '../../TracePage/url';
 import { fetchedState } from '../../../constants';
 
 import type { FetchedTrace } from '../../../types';
@@ -31,7 +32,8 @@ type Props = {
   traces: FetchedTrace[],
 };
 
-const CTA_MESSAGE = <h2 className="ub-m0">Compare traces by selecting result items</h2>;
+// Exported for tests
+export const CTA_MESSAGE = <h2 className="ub-m0">Compare traces by selecting result items</h2>;
 
 export default class DiffSelection extends React.PureComponent<Props> {
   props: Props;
@@ -57,7 +59,9 @@ export default class DiffSelection extends React.PureComponent<Props> {
                   duration={data.duration}
                   error={error}
                   isInDiffCohort
+                  linkTo={getTracePageUrl(id)}
                   state={state}
+                  targetBlank
                   toggleComparison={toggleComparison}
                   traceID={id}
                   traceName={data.traceName}

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/DiffSelection.test.js

@@ -0,0 +1,68 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import DiffSelection, { CTA_MESSAGE } from './DiffSelection.js';
+import ResultItemTitle from './ResultItemTitle';
+import { fetchedState } from '../../../constants';
+
+describe('DiffSelection', () => {
+  const toggleComparison = () => {};
+  const traces = [
+    {
+      id: 'trace-id-0',
+      data: {
+        duration: 0,
+        traceName: 'trace-name-0',
+      },
+      error: new Error('error-0'),
+      state: fetchedState.DONE,
+    },
+    {
+      id: 'trace-id-1',
+      // deliberately missing data to test default
+      error: new Error('error-1'),
+      state: fetchedState.DONE,
+    },
+    {
+      id: 'trace-id-2',
+      // deliberately missing data to test default
+      error: new Error('error-2'),
+      state: fetchedState.ERROR,
+    },
+  ];
+
+  it('renders a trace as expected', () => {
+    const wrapper = shallow(
+      <DiffSelection traces={traces.slice(0, 1)} toggleComparison={toggleComparison} />
+    );
+
+    expect(wrapper.find(ResultItemTitle).length).toBe(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders multiple traces as expected', () => {
+    const wrapper = shallow(<DiffSelection traces={traces} toggleComparison={toggleComparison} />);
+
+    expect(wrapper.find(ResultItemTitle).length).toBe(traces.length);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders CTA_MESSAGE when given empty traces array', () => {
+    const wrapper = shallow(<DiffSelection traces={[]} toggleComparison={toggleComparison} />);
+    expect(wrapper.contains(CTA_MESSAGE)).toBe(true);
+  });
+});

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.js

@@ -34,6 +34,7 @@ type Props = {
   isInDiffCohort: boolean,
   linkTo: ?string,
   state: ?FetchedState,
+  targetBlank?: boolean,
   toggleComparison: (string, boolean) => void,
   traceID: string,
   traceName: string,
@@ -47,8 +48,9 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
     disableComparision: false,
     durationPercent: 0,
     error: undefined,
-    state: fetchedState.DONE,
     linkTo: null,
+    targetBlank: false,
+    state: fetchedState.DONE,
   };
 
   toggleComparison = () => {
@@ -58,22 +60,27 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
 
   render() {
     const {
+      disableComparision,
       duration,
       durationPercent,
       error,
       isInDiffCohort,
       linkTo,
       state,
+      targetBlank,
       traceID,
       traceName,
-      disableComparision,
     } = this.props;
     // Use a div when the ResultItemTitle doesn't link to anything
     let WrapperComponent = 'div';
     const wrapperProps: { [string]: string } = { className: 'ResultItemTitle--item ub-flex-auto' };
     if (linkTo) {
       WrapperComponent = Link;
       wrapperProps.to = linkTo;
+      if (targetBlank) {
+        wrapperProps.target = '_blank';
+        wrapperProps.rel = 'noopener noreferrer';
+      }
     }
     const isErred = state === fetchedState.ERROR;
     return (

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.test.js

@@ -0,0 +1,102 @@
+// Copyright (c) 2019 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { Checkbox } from 'antd';
+import { shallow } from 'enzyme';
+import { Link } from 'react-router-dom';
+
+import ResultItemTitle from './ResultItemTitle';
+import { fetchedState } from '../../../constants';
+
+describe('ResultItemTitle', () => {
+  const defaultProps = {
+    duration: 150,
+    durationPercent: 10,
+    isInDiffCohort: true,
+    linkTo: 'linkToValue',
+    toggleComparison: jest.fn(),
+    traceID: 'trace-id-longer-than-8',
+    traceName: 'traceNameValue',
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    defaultProps.toggleComparison.mockReset();
+    wrapper = shallow(<ResultItemTitle {...defaultProps} />);
+  });
+
+  it('renders as expected', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('Checkbox', () => {
+    it('does not render toggleComparison checkbox when props.disableComparision is true', () => {
+      expect(wrapper.find(Checkbox).length).toBe(1);
+      wrapper.setProps({ disableComparision: true });
+      expect(wrapper.find(Checkbox).length).toBe(0);
+    });
+
+    it('is disabled iff props.state === fetchedState.ERROR', () => {
+      expect(wrapper.find(Checkbox).prop('disabled')).toBe(false);
+      wrapper.setProps({ state: fetchedState.ERROR });
+      expect(wrapper.find(Checkbox).prop('disabled')).toBe(true);
+    });
+
+    it('is checked iff props.state !== fetchedState.ERROR && props.isInDiffCohort', () => {
+      [true, false].forEach(isInDiffCohort => {
+        [fetchedState.ERROR, fetchedState.DONE].forEach(state => {
+          wrapper.setProps({ isInDiffCohort, state });
+          expect(wrapper.find(Checkbox).prop('checked')).toBe(state !== fetchedState.ERROR && isInDiffCohort);
+        });
+      });
+    });
+
+    it('calls props.toggleComparison with correct arguments onChange', () => {
+      wrapper.find(Checkbox).prop('onChange')();
+      expect(defaultProps.toggleComparison).toHaveBeenCalledWith(
+        defaultProps.traceID,
+        defaultProps.isInDiffCohort
+      );
+      wrapper.setProps({ isInDiffCohort: !defaultProps.isInDiffCohort });
+      wrapper.find(Checkbox).prop('onChange')();
+      expect(defaultProps.toggleComparison).toHaveBeenLastCalledWith(
+        defaultProps.traceID,
+        !defaultProps.isInDiffCohort
+      );
+    });
+  });
+
+  describe('WrapperComponent', () => {
+    it('renders <Link> when linkTo is provided', () => {
+      expect(wrapper.find(Link).length).toBe(1);
+      wrapper.setProps({ linkTo: null });
+      expect(wrapper.find(Link).length).toBe(0);
+    });
+
+    it('<Link> targets _blank and sets rel when targetBlank is true', () => {
+      expect(wrapper.find(Link).prop('target')).toBeUndefined();
+      expect(wrapper.find(Link).prop('rel')).toBeUndefined();
+      wrapper.setProps({ targetBlank: true });
+      expect(wrapper.find(Link).prop('target')).toBe('_blank');
+      expect(wrapper.find(Link).prop('rel')).toBe('noopener noreferrer');
+    });
+
+    it('hides formated duration when duration is not provided', () => {
+      const initialSpanCount = wrapper.find('span').length;
+      wrapper.setProps({ duration: null });
+      expect(wrapper.find('span').length).toBe(initialSpanCount - 1);
+    });
+  });
+});

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/__snapshots__/DiffSelection.test.js.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DiffSelection renders a trace as expected 1`] = `
+<div
+  className="DiffSelection is-non-empty ub-mb3"
+>
+  <div
+    className="DiffSelection--selectedItems"
+  >
+    <ResultItemTitle
+      disableComparision={false}
+      duration={0}
+      durationPercent={0}
+      error={[Error: error-0]}
+      isInDiffCohort={true}
+      key="trace-id-0"
+      linkTo="/trace/trace-id-0"
+      state="FETCH_DONE"
+      targetBlank={true}
+      toggleComparison={[Function]}
+      traceID="trace-id-0"
+      traceName="trace-name-0"
+    />
+  </div>
+  <div
+    className="DiffSelection--message"
+  >
+    <Button
+      block={false}
+      className="ub-right"
+      disabled={true}
+      ghost={false}
+      loading={false}
+      prefixCls="ant-btn"
+      type="primary"
+    >
+      Compare Traces
+    </Button>
+    <h2
+      className="ub-m0"
+    >
+      1
+       Selected for comparison
+    </h2>
+  </div>
+</div>
+`;
+
+exports[`DiffSelection renders multiple traces as expected 1`] = `
+<div
+  className="DiffSelection is-non-empty ub-mb3"
+>
+  <div
+    className="DiffSelection--selectedItems"
+  >
+    <ResultItemTitle
+      disableComparision={false}
+      duration={0}
+      durationPercent={0}
+      error={[Error: error-0]}
+      isInDiffCohort={true}
+      key="trace-id-0"
+      linkTo="/trace/trace-id-0"
+      state="FETCH_DONE"
+      targetBlank={true}
+      toggleComparison={[Function]}
+      traceID="trace-id-0"
+      traceName="trace-name-0"
+    />
+    <ResultItemTitle
+      disableComparision={false}
+      durationPercent={0}
+      error={[Error: error-1]}
+      isInDiffCohort={true}
+      key="trace-id-1"
+      linkTo="/trace/trace-id-1"
+      state="FETCH_DONE"
+      targetBlank={true}
+      toggleComparison={[Function]}
+      traceID="trace-id-1"
+    />
+    <ResultItemTitle
+      disableComparision={false}
+      durationPercent={0}
+      error={[Error: error-2]}
+      isInDiffCohort={true}
+      key="trace-id-2"
+      linkTo="/trace/trace-id-2"
+      state="FETCH_ERROR"
+      targetBlank={true}
+      toggleComparison={[Function]}
+      traceID="trace-id-2"
+    />
+  </div>
+  <div
+    className="DiffSelection--message"
+  >
+    <Link
+      replace={false}
+      to="/trace/trace-id-0...trace-id-1?cohort=trace-id-0&cohort=trace-id-1"
+    >
+      <Button
+        block={false}
+        className="ub-right"
+        disabled={false}
+        ghost={false}
+        loading={false}
+        prefixCls="ant-btn"
+        type="primary"
+      >
+        Compare Traces
+      </Button>
+    </Link>
+    <h2
+      className="ub-m0"
+    >
+      2
+       Selected for comparison
+    </h2>
+  </div>
+</div>
+`;