Explore: Add link to logs from trace span (#28229)

* Add trace to logs link

* Do a bit of refactor and allow for custom time range in split

* Add margin and noopener to the link

* Fix tests

* Fix tests

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx

@@ -310,6 +310,9 @@ type SpanBarRowProps = {
   removeHoverIndentGuideId: (spanID: string) => void;
   clippingLeft?: boolean;
   clippingRight?: boolean;
+  createSpanLink?: (
+    span: TraceSpan
+  ) => { href: string; onClick?: (e: React.MouseEvent) => void; content: React.ReactNode };
 };
 
 /**
@@ -356,6 +359,7 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
       clippingLeft,
       clippingRight,
       theme,
+      createSpanLink,
     } = this.props;
     const {
       duration,
@@ -437,6 +441,32 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
               </span>
               <small className={styles.endpointName}>{rpc ? rpc.operationName : operationName}</small>
             </a>
+            {createSpanLink &&
+              (() => {
+                const link = createSpanLink(span);
+                return (
+                  <a
+                    href={link.href}
+                    // Needs to have target otherwise preventDefault would not work due to angularRouter.
+                    target={'_blank'}
+                    style={{ marginRight: '5px' }}
+                    rel="noopener noreferrer"
+                    onClick={
+                      link.onClick
+                        ? event => {
+                            if (!(event.ctrlKey || event.metaKey || event.shiftKey) && link.onClick) {
+                              event.preventDefault();
+                              link.onClick(event);
+                            }
+                          }
+                        : undefined
+                    }
+                  >
+                    {link.content}
+                  </a>
+                );
+              })()}
+
             {span.references && span.references.length > 1 && (
               <ReferencesButton
                 references={span.references}

packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -79,6 +79,9 @@ type TVirtualizedTraceViewOwnProps = {
   addHoverIndentGuideId: (spanID: string) => void;
   removeHoverIndentGuideId: (spanID: string) => void;
   theme: Theme;
+  createSpanLink?: (
+    span: TraceSpan
+  ) => { href: string; onClick?: (e: React.MouseEvent) => void; content: React.ReactNode };
 };
 
 type VirtualizedTraceViewProps = TVirtualizedTraceViewOwnProps & TExtractUiFindFromStateReturn & TTraceTimeline;
@@ -330,6 +333,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
       addHoverIndentGuideId,
       removeHoverIndentGuideId,
       theme,
+      createSpanLink,
     } = this.props;
     // to avert flow error
     if (!trace) {
@@ -379,6 +383,7 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
           hoverIndentGuideIds={hoverIndentGuideIds}
           addHoverIndentGuideId={addHoverIndentGuideId}
           removeHoverIndentGuideId={removeHoverIndentGuideId}
+          createSpanLink={createSpanLink}
         />
       </div>
     );

packages/jaeger-ui-components/src/TraceTimelineViewer/index.tsx

@@ -99,6 +99,9 @@ type TProps = TExtractUiFindFromStateReturn & {
   removeHoverIndentGuideId: (spanID: string) => void;
   linksGetter: (span: TraceSpan, items: TraceKeyValuePair[], itemIndex: number) => TraceLink[];
   theme: Theme;
+  createSpanLink?: (
+    span: TraceSpan
+  ) => { href: string; onClick?: (e: React.MouseEvent) => void; content: React.ReactNode };
 };
 
 type State = {