Add link to timeline view from comparison view and selection

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

@@ -57,7 +57,9 @@ export default class DiffSelection extends React.PureComponent<Props> {
                   duration={data.duration}
                   error={error}
                   isInDiffCohort
+                  linkTo={`/trace/${id}`}
                   state={state}
+                  targetBlank
                   toggleComparison={toggleComparison}
                   traceID={id}
                   traceName={data.traceName}

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,26 @@ 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';
+      }
     }
     const isErred = state === fetchedState.ERROR;
     return (

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.css

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.CohortTable--linkColumn {
+  text-align: center;
+}
+
 .CohortTable--traceName {
   color: var(--tx-color-title);
 }

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.js

@@ -17,6 +17,7 @@
 import * as React from 'react';
 import { Table, Tag } from 'antd';
 
+import TraceTimelineLink from './TraceTimelineLink';
 import RelativeDate from '../../common/RelativeDate';
 import TraceName from '../../common/TraceName';
 import { fetchedState } from '../../../constants';
@@ -128,6 +129,13 @@ export default class CohortTable extends React.PureComponent<Props> {
           render={(value, record) => record.state === fetchedState.DONE && formatDuration(value)}
         />
         <Column title="Spans" dataIndex="data.spans.length" key="address" />
+        <Column
+          title="Link"
+          className="CohortTable--linkColumn"
+          dataIndex="data.traceID"
+          key="link"
+          render={value => <TraceTimelineLink traceID={value} />}
+        />
       </Table>,
       cohort.length < 2 && NEED_MORE_TRACES_MESSAGE,
     ];

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.css

@@ -58,3 +58,7 @@ limitations under the License.
   display: inline-block;
   margin-right: 1rem;
 }
+
+.TraceDiffHeader--link {
+  padding-left: 0.5rem;
+}

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.js

@@ -17,6 +17,7 @@
 import * as React from 'react';
 import IoChevronDown from 'react-icons/lib/io/chevron-down';
 
+import TraceTimelineLink from './TraceTimelineLink';
 import RelativeDate from '../../common/RelativeDate';
 import TraceName from '../../common/TraceName';
 import { fetchedState } from '../../../constants';
@@ -82,8 +83,11 @@ export default function TraceHeader(props: Props) {
             <React.Fragment>
               <TraceName key="name" traceName={traceName} error={error} state={state} />{' '}
               <small key="id" className="u-tx-muted">
-                {(traceID || '').slice(0, 7)}
+                {traceID.slice(0, 7)}
               </small>
+              <span className="TraceDiffHeader--link">
+                <TraceTimelineLink traceID={traceID} />
+              </span>
             </React.Fragment>
           ) : (
             <span className="u-tx-muted">Select a Trace...</span>

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js

@@ -0,0 +1,53 @@
+// Copyright (c) 2017 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 * as React from 'react';
+import { shallow } from 'enzyme';
+
+import TraceHeader from './TraceHeader';
+import { fetchedState } from '../../../constants';
+
+describe('TraceHeader', () => {
+  const props = {
+    duration: 700,
+    error: { errorKey: 'errorValue' },
+    traceID: 'trace-id',
+    traceName: 'trace name',
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<TraceHeader {...props} />);
+  });
+
+  it('renders as expected', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders populated attrs component when props.state === fetchedState.DONE', () => {
+    wrapper.setProps({
+      startTime: 150,
+      totalSpans: 50,
+      state: fetchedState.DONE,
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders "Select a Trace..." when props.traceID is not provided ', () => {
+    wrapper.setProps({
+      traceID: null,
+    });
+    expect(wrapper.find('.u-tx-muted').text()).toBe('Select a Trace...');
+  });
+});

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceTimelineLink.js

@@ -0,0 +1,34 @@
+// @flow
+
+// 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 * as React from 'react';
+import { Icon } from 'antd';
+
+type propsType = {
+  traceID: string,
+};
+
+function stopPropagation(event: SyntheticMouseEvent<HTMLAnchorElement>) {
+  event.stopPropagation();
+}
+
+export default function TraceTimelineLink({ traceID }: propsType) {
+  return (
+    <a href={`/trace/${traceID}`} onClick={stopPropagation} rel="noopener noreferrer" target="_blank">
+      <Icon type="link" />
+    </a>
+  );
+}

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceTimelineLink.test.js

@@ -0,0 +1,38 @@
+// 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 * as React from 'react';
+import { shallow } from 'enzyme';
+import { Icon } from 'antd';
+
+import TraceTimelineLink from './TraceTimelineLink';
+
+describe('TraceTimelinkLink', () => {
+  const traceID = 'test-trace-id';
+  const wrapper = shallow(<TraceTimelineLink traceID={traceID} />);
+
+  it('renders the correct icon', () => {
+    expect(wrapper.find(Icon).prop('type')).toBe('link');
+  });
+
+  it('links to the given trace', () => {
+    expect(wrapper.find('a').prop('href')).toBe(`/trace/${traceID}`);
+  });
+
+  it('stops event propagation', () => {
+    const stopPropagation = jest.fn();
+    wrapper.find('a').simulate('click', { stopPropagation });
+    expect(stopPropagation).toHaveBeenCalled();
+  });
+});

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TraceHeader renders as expected 1`] = `
+<div
+  className="TraecDiffHeader--traceHeader"
+>
+  <h1
+    className="TraecDiffHeader--traceTitle"
+  >
+    <span>
+      <React.Fragment>
+        <TraceName
+          className=""
+          error={
+            Object {
+              "errorKey": "errorValue",
+            }
+          }
+          key="name"
+          state={null}
+          traceName="trace name"
+        />
+
+        <small
+          className="u-tx-muted"
+          key="id"
+        >
+          trace-i
+        </small>
+        <span
+          className="TraceDiffHeader--link"
+        >
+          <TraceTimelineLink
+            traceID="trace-id"
+          />
+        </span>
+      </React.Fragment>
+    </span>
+    <IoChevronDown
+      className="TraecDiffHeader--traceTitleChevron"
+    />
+  </h1>
+  <EmptyAttrs
+    duration={700}
+    startTime={null}
+    totalSpans={null}
+  />
+</div>
+`;
+
+exports[`TraceHeader renders populated attrs component when props.state === fetchedState.DONE 1`] = `
+<div
+  className="TraecDiffHeader--traceHeader"
+>
+  <h1
+    className="TraecDiffHeader--traceTitle"
+  >
+    <span>
+      <React.Fragment>
+        <TraceName
+          className=""
+          error={
+            Object {
+              "errorKey": "errorValue",
+            }
+          }
+          key="name"
+          state="FETCH_DONE"
+          traceName="trace name"
+        />
+
+        <small
+          className="u-tx-muted"
+          key="id"
+        >
+          trace-i
+        </small>
+        <span
+          className="TraceDiffHeader--link"
+        >
+          <TraceTimelineLink
+            traceID="trace-id"
+          />
+        </span>
+      </React.Fragment>
+    </span>
+    <IoChevronDown
+      className="TraecDiffHeader--traceTitleChevron"
+    />
+  </h1>
+  <Attrs
+    duration={700}
+    startTime={150}
+    totalSpans={50}
+  />
+</div>
+`;