TraceView: Allow span links defined on dataFrame (#40563)

* Align range to seconds in log queries

* Use default display processor if there is none in FieldDisplayProxy

* Allow links defined in dataframe

* Remove debug log

* Fix typings for span links

* Lint go

* Fix tests

* Update tests

* Add test for the display proxy

* Streamline the fallback for diplayProcessor

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

@@ -27,7 +27,7 @@ import SpanTreeOffset from './SpanTreeOffset';
 import SpanBar from './SpanBar';
 import Ticks from './Ticks';
 
-import { TNil } from '../types';
+import { SpanLinkFunc, TNil } from '../types';
 import { TraceSpan } from '../types/trace';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 
@@ -294,9 +294,7 @@ type SpanBarRowProps = {
   removeHoverIndentGuideId: (spanID: string) => void;
   clippingLeft?: boolean;
   clippingRight?: boolean;
-  createSpanLink?: (
-    span: TraceSpan
-  ) => { href: string; onClick?: (e: React.MouseEvent) => void; content: React.ReactNode };
+  createSpanLink?: SpanLinkFunc;
 };
 
 /**
@@ -443,27 +441,31 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
             {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);
+                if (link) {
+                  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>
-                );
+                          : undefined
+                      }
+                    >
+                      {link.content}
+                    </a>
+                  );
+                } else {
+                  return null;
+                }
               })()}
 
             {span.references && span.references.length > 1 && (

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

@@ -24,14 +24,13 @@ import { formatDuration } from '../utils';
 import CopyIcon from '../../common/CopyIcon';
 import LabeledList from '../../common/LabeledList';
 
-import { TNil } from '../../types';
+import { SpanLinkFunc, TNil } from '../../types';
 import { TraceKeyValuePair, TraceLink, TraceLog, TraceSpan } from '../../types/trace';
 import AccordianReferences from './AccordianReferences';
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { UIDivider } from '../../uiElementsContext';
 import { ubFlex, ubFlexAuto, ubItemsCenter, ubM0, ubMb1, ubMy1, ubTxRightAlign } from '../../uberUtilityStyles';
 import { DataLinkButton, TextArea } from '@grafana/ui';
-import { CreateSpanLink } from '../types';
 
 const getStyles = createStyle((theme: Theme) => {
   return {
@@ -116,7 +115,7 @@ type SpanDetailProps = {
   stackTracesToggle: (spanID: string) => void;
   referencesToggle: (spanID: string) => void;
   focusSpan: (uiFind: string) => void;
-  createSpanLink?: CreateSpanLink;
+  createSpanLink?: SpanLinkFunc;
 };
 
 export default function SpanDetail(props: SpanDetailProps) {

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

@@ -22,7 +22,7 @@ import TimelineRow from './TimelineRow';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 
 import { TraceLog, TraceSpan, TraceKeyValuePair, TraceLink } from '../types/trace';
-import { CreateSpanLink } from './types';
+import { SpanLinkFunc } from '../types';
 
 const getStyles = createStyle((theme: Theme) => {
   return {
@@ -86,7 +86,7 @@ type SpanDetailRowProps = {
   addHoverIndentGuideId: (spanID: string) => void;
   removeHoverIndentGuideId: (spanID: string) => void;
   theme: Theme;
-  createSpanLink?: CreateSpanLink;
+  createSpanLink?: SpanLinkFunc;
 };
 
 export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProps> {

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

@@ -31,13 +31,12 @@ import {
 } from './utils';
 import { Accessors } from '../ScrollManager';
 import { getColorByKey } from '../utils/color-generator';
-import { TNil } from '../types';
+import { SpanLinkFunc, TNil } from '../types';
 import { TraceLog, TraceSpan, Trace, TraceKeyValuePair, TraceLink } from '../types/trace';
 import TTraceTimeline from '../types/TTraceTimeline';
 import { PEER_SERVICE } from '../constants/tag-keys';
 
 import { createStyle, Theme, withTheme } from '../Theme';
-import { CreateSpanLink } from './types';
 
 type TExtractUiFindFromStateReturn = {
   uiFind: string | undefined;
@@ -84,7 +83,7 @@ type TVirtualizedTraceViewOwnProps = {
   addHoverIndentGuideId: (spanID: string) => void;
   removeHoverIndentGuideId: (spanID: string) => void;
   theme: Theme;
-  createSpanLink?: CreateSpanLink;
+  createSpanLink?: SpanLinkFunc;
   scrollElement?: Element;
 };
 

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

@@ -20,7 +20,7 @@ import VirtualizedTraceView from './VirtualizedTraceView';
 import { merge as mergeShortcuts } from '../keyboard-shortcuts';
 import { Accessors } from '../ScrollManager';
 import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from './types';
-import { TNil } from '../types';
+import { SpanLinkFunc, TNil } from '../types';
 import { TraceSpan, Trace, TraceLog, TraceKeyValuePair, TraceLink } from '../types/trace';
 import TTraceTimeline from '../types/TTraceTimeline';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
@@ -99,9 +99,7 @@ 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 };
+  createSpanLink?: SpanLinkFunc;
   scrollElement?: Element;
 };
 

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

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '../types/trace';
 import { TNil } from '../types';
 
 interface TimeCursorUpdate {
@@ -52,11 +51,3 @@ export interface ViewRangeTime {
 export interface ViewRange {
   time: ViewRangeTime;
 }
-
-export type CreateSpanLink = (
-  span: TraceSpan
-) => {
-  href: string;
-  onClick?: (e: React.MouseEvent) => void;
-  content: React.ReactNode;
-};

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

@@ -16,7 +16,7 @@ import { ApiError } from './api-error';
 import { Trace } from './trace';
 
 export { TraceSpan, TraceResponse, Trace, TraceProcess, TraceKeyValuePair, TraceLink } from './trace';
-
+export { SpanLinkFunc, SpanLinkDef } from './links';
 export { default as TTraceTimeline } from './TTraceTimeline';
 export { default as TNil } from './TNil';
 

packages/jaeger-ui-components/src/types/links.ts

@@ -0,0 +1,10 @@
+import { TraceSpan } from './trace';
+import React from 'react';
+
+export type SpanLinkDef = {
+  href: string;
+  onClick?: (event: any) => void;
+  content: React.ReactNode;
+};
+
+export type SpanLinkFunc = (span: TraceSpan) => SpanLinkDef | undefined;

packages/jaeger-ui-components/src/types/trace.ts

@@ -61,6 +61,7 @@ export type TraceSpanData = {
   stackTraces?: string[];
   flags: number;
   errorIconColor?: string;
+  dataFrameRowIndex?: number;
 };
 
 export type TraceSpan = TraceSpanData & {