TraceView/TracesPanel: Allow providing custom span link creator function (#76332)

allow overriding span link creator for TraceView and TracesPanel

public/app/features/explore/TraceView/TraceView.tsx

@@ -27,7 +27,14 @@ import { useDispatch, useSelector } from 'app/types';
 
 import { changePanelState } from '../state/explorePane';
 
-import { SpanBarOptionsData, Trace, TracePageHeader, TraceTimelineViewer, TTraceTimeline } from './components';
+import {
+  SpanBarOptionsData,
+  SpanLinkFunc,
+  Trace,
+  TracePageHeader,
+  TraceTimelineViewer,
+  TTraceTimeline,
+} from './components';
 import SpanGraph from './components/TracePageHeader/SpanGraph';
 import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
 import { createSpanLinkFactory } from './createSpanLink';
@@ -59,10 +66,18 @@ type Props = {
   datasource: DataSourceApi<DataQuery, DataSourceJsonData, {}> | undefined;
   topOfViewRef: RefObject<HTMLDivElement>;
   topOfViewRefType: TopOfViewRefType;
+  createSpanLink?: SpanLinkFunc;
 };
 
 export function TraceView(props: Props) {
-  const { traceProp, datasource, topOfViewRef, topOfViewRefType, exploreId } = props;
+  const {
+    traceProp,
+    datasource,
+    topOfViewRef,
+    topOfViewRefType,
+    exploreId,
+    createSpanLink: createSpanLinkFromProps,
+  } = props;
 
   const {
     detailStates,
@@ -119,6 +134,7 @@ export function TraceView(props: Props) {
 
   const createSpanLink = useMemo(
     () =>
+      createSpanLinkFromProps ??
       createSpanLinkFactory({
         splitOpenFn: props.splitOpenFn!,
         traceToLogsOptions,
@@ -127,7 +143,15 @@ export function TraceView(props: Props) {
         createFocusSpanLink,
         trace: traceProp,
       }),
-    [props.splitOpenFn, traceToLogsOptions, traceToMetricsOptions, props.dataFrames, createFocusSpanLink, traceProp]
+    [
+      props.splitOpenFn,
+      traceToLogsOptions,
+      traceToMetricsOptions,
+      props.dataFrames,
+      createFocusSpanLink,
+      traceProp,
+      createSpanLinkFromProps,
+    ]
   );
   const timeZone = useSelector((state) => getTimeZone(state.user));
   const datasourceType = datasource ? datasource?.type : 'unknown';

public/app/plugins/panel/traces/TracesPanel.tsx

@@ -5,6 +5,7 @@ import { useAsync } from 'react-use';
 import { PanelProps } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { TraceView } from 'app/features/explore/TraceView/TraceView';
+import { SpanLinkFunc } from 'app/features/explore/TraceView/components';
 import { TopOfViewRefType } from 'app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView';
 import { transformDataFrames } from 'app/features/explore/TraceView/utils/transform';
 
@@ -15,7 +16,11 @@ const styles = {
   `,
 };
 
-export const TracesPanel = ({ data }: PanelProps) => {
+export interface TracesPanelOptions {
+  createSpanLink?: SpanLinkFunc;
+}
+
+export const TracesPanel = ({ data, options }: PanelProps<TracesPanelOptions>) => {
   const topOfViewRef = createRef<HTMLDivElement>();
   const traceProp = useMemo(() => transformDataFrames(data.series[0]), [data.series]);
   const dataSource = useAsync(async () => {
@@ -41,6 +46,7 @@ export const TracesPanel = ({ data }: PanelProps) => {
         datasource={dataSource.value}
         topOfViewRef={topOfViewRef}
         topOfViewRefType={TopOfViewRefType.Panel}
+        createSpanLink={options.createSpanLink}
       />
     </div>
   );