TraceView: Add span attributes to attributes extension point (#107756)

packages/grafana-data/src/types/pluginExtensions.ts

@@ -250,6 +250,7 @@ export type PluginExtensionCommandPaletteContext = {};
 export type PluginExtensionResourceAttributesContext = {
   // Key-value pairs of resource attributes, attribute name is the key
   attributes: Record<string, string[]>;
+  spanAttributes?: Record<string, string[]>;
   datasource: {
     type: string;
     uid: string;

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx

@@ -51,7 +51,12 @@ import { ShareSpanButton } from './ShareSpanButton';
 import { getSpanDetailLinkButtons } from './SpanDetailLinkButtons';
 import SpanFlameGraph from './SpanFlameGraph';
 
-const useResourceAttributesExtensionLinks = (process: TraceProcess, datasourceType: string, datasourceUid: string) => {
+const useResourceAttributesExtensionLinks = (
+  process: TraceProcess,
+  spanTags: TraceKeyValuePair[],
+  datasourceType: string,
+  datasourceUid: string
+) => {
   // Stable context for useMemo inside usePluginLinks
   const context: PluginExtensionResourceAttributesContext = useMemo(() => {
     const attributes = (process.tags ?? []).reduce<Record<string, string[]>>((acc, tag) => {
@@ -63,14 +68,24 @@ const useResourceAttributesExtensionLinks = (process: TraceProcess, datasourceTy
       return acc;
     }, {});
 
+    const spanAttributes = (spanTags ?? []).reduce<Record<string, string[]>>((acc, tag) => {
+      if (acc[tag.key]) {
+        acc[tag.key].push(tag.value);
+      } else {
+        acc[tag.key] = [tag.value];
+      }
+      return acc;
+    }, {});
+
     return {
       attributes,
+      spanAttributes,
       datasource: {
         type: datasourceType,
         uid: datasourceUid,
       },
     };
-  }, [process.tags, datasourceType, datasourceUid]);
+  }, [process.tags, spanTags, datasourceType, datasourceUid]);
 
   const { links } = usePluginLinks({
     extensionPointId: PluginExtensionPoints.TraceViewResourceAttributes,
@@ -328,7 +343,7 @@ export default function SpanDetail(props: SpanDetailProps) {
   });
 
   const focusSpanLink = createFocusSpanLink(traceID, spanID);
-  const resourceLinksGetter = useResourceAttributesExtensionLinks(process, datasourceType, datasourceUid);
+  const resourceLinksGetter = useResourceAttributesExtensionLinks(process, tags, datasourceType, datasourceUid);
 
   return (
     <div data-testid="span-detail-component">
@@ -348,6 +363,7 @@ export default function SpanDetail(props: SpanDetailProps) {
             data={tags}
             label={t('explore.span-detail.label-span-attributes', 'Span attributes')}
             isOpen={isTagsOpen}
+            linksGetter={resourceLinksGetter}
             onToggle={() => tagsToggle(spanID)}
           />
           {process.tags && (