feat(otlp): Collapse Trace Waterfall spans based on span name (#97706)

If the user has OTel-friendly UI enabled, update the logic that figures
out which sibling spans should be collapsed. Since the _labels_ for the
spans use the op and name, the collapsing logic also needs to use op and
name, rather than op and description.

Unfortunately, in order to check the feature flag, I had to pass
`organization` through _everywhere_ in the `TraceTree` class. There are
so many call sites, and passing an `organization` in the options is
pattern that already exists, so I followed it here, too.

One alternative is to do a shenanigan, and to fill the `description`
field of a span with the name, and let everything else work the same,
but that feels like it'll just cause more confusion.

Author: gggritso

static/app/views/insights/agents/hooks/useAITrace.tsx

@@ -65,6 +65,7 @@ export function useAITrace(traceSlug: string): UseAITraceResult {
           meta: meta.data,
           replay: null,
           preferences: DEFAULT_TRACE_VIEW_PREFERENCES,
+          organization,
         });
 
         tree.build();

static/app/views/performance/newTraceDetails/traceApi/useIssuesTraceTree.tsx

@@ -49,10 +49,13 @@ export function useIssuesTraceTree({
       setTree(t =>
         t.type === 'error'
           ? t
-          : IssuesTraceTree.Error({
-              project_slug: projects?.[0]?.slug ?? '',
-              event_id: traceSlug,
-            })
+          : IssuesTraceTree.Error(
+              {
+                project_slug: projects?.[0]?.slug ?? '',
+                event_id: traceSlug,
+              },
+              organization
+            )
       );
       traceAnalytics.trackTraceErrorState(organization, 'issue_details');
       return;
@@ -68,10 +71,13 @@ export function useIssuesTraceTree({
       setTree(t =>
         t.type === 'loading'
           ? t
-          : IssuesTraceTree.Loading({
-              project_slug: projects?.[0]?.slug ?? '',
-              event_id: traceSlug,
-            })
+          : IssuesTraceTree.Loading(
+              {
+                project_slug: projects?.[0]?.slug ?? '',
+                event_id: traceSlug,
+              },
+              organization
+            )
       );
       return;
     }
@@ -81,6 +87,7 @@ export function useIssuesTraceTree({
         meta: null,
         replay,
         preferences: traceState.preferences,
+        organization,
       });
 
       setTree(newTree);

static/app/views/performance/newTraceDetails/traceApi/useTraceTree.tsx

@@ -32,10 +32,13 @@ export function useTraceTree({trace, replay, traceSlug}: UseTraceTreeParams): Tr
       setTree(t =>
         t.type === 'error'
           ? t
-          : TraceTree.Error({
-              project_slug: projects?.[0]?.slug ?? '',
-              event_id: traceSlug,
-            })
+          : TraceTree.Error(
+              {
+                project_slug: projects?.[0]?.slug ?? '',
+                event_id: traceSlug,
+              },
+              organization
+            )
       );
       traceAnalytics.trackTraceErrorState(organization, traceWaterfallSource);
       return;
@@ -51,10 +54,13 @@ export function useTraceTree({trace, replay, traceSlug}: UseTraceTreeParams): Tr
       setTree(t =>
         t.type === 'loading'
           ? t
-          : TraceTree.Loading({
-              project_slug: projects?.[0]?.slug ?? '',
-              event_id: traceSlug,
-            })
+          : TraceTree.Loading(
+              {
+                project_slug: projects?.[0]?.slug ?? '',
+                event_id: traceSlug,
+              },
+              organization
+            )
       );
       return;
     }
@@ -64,6 +70,7 @@ export function useTraceTree({trace, replay, traceSlug}: UseTraceTreeParams): Tr
         meta: null,
         replay,
         preferences: traceState.preferences,
+        organization,
       });
 
       setTree(newTree);

static/app/views/performance/newTraceDetails/traceModels/__snapshots__/traceTree.autogrouping.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`autogrouping parent autogrouping assigns children to tail node 1`] = `
 "
@@ -245,6 +245,14 @@ eap trace root
 "
 `;
 
+exports[`autogrouping sibling autogrouping eap traces groups spans with the same op and name if OTel UI is enabled 1`] = `
+"
+eap trace root
+  http.server - redis
+    sibling autogroup (db: 5)
+"
+`;
+
 exports[`autogrouping sibling autogrouping eap traces removes sibling autogroup 1`] = `
 "
 eap trace root

static/app/views/performance/newTraceDetails/traceModels/issuesTraceTree.spec.tsx

@@ -46,6 +46,8 @@ const errorsOnlyTrace = makeTrace({
   orphan_errors: new Array(20).fill(null).map(() => makeTraceError({})),
 });
 
+const organization = OrganizationFixture();
+
 function mockSpansResponse(
   spans: TraceTree.Span[],
   project_slug: string,
@@ -72,6 +74,7 @@ describe('IssuesTraceTree', () => {
     const tree = IssuesTraceTree.FromTrace(traceWithErrorInMiddle, {
       meta: null,
       replay: null,
+      organization,
     });
 
     const issues = IssuesTraceTree.FindAll(tree.root, hasErrors);
@@ -82,6 +85,7 @@ describe('IssuesTraceTree', () => {
     const tree = IssuesTraceTree.FromTrace(traceWithChildError, {
       meta: null,
       replay: null,
+      organization,
     });
 
     const error = IssuesTraceTree.Find(tree.root, hasErrors);
@@ -101,6 +105,7 @@ describe('IssuesTraceTree', () => {
     const tree = IssuesTraceTree.FromTrace(errorsOnlyTrace, {
       meta: null,
       replay: null,
+      organization,
     });
 
     const errors = IssuesTraceTree.FindAll(tree.root, hasErrors).slice(0, 10);
@@ -111,6 +116,7 @@ describe('IssuesTraceTree', () => {
     const tree = IssuesTraceTree.FromTrace(traceWithErrorInMiddle, {
       meta: null,
       replay: null,
+      organization,
     });
 
     const issues = IssuesTraceTree.FindAll(tree.root, hasErrors);
@@ -131,6 +137,7 @@ describe('IssuesTraceTree', () => {
     const tree = IssuesTraceTree.FromTrace(traceWithErrorInMiddle, {
       meta: null,
       replay: null,
+      organization,
     });
 
     const issues = IssuesTraceTree.FindAll(tree.root, hasErrors);
@@ -172,6 +179,7 @@ describe('IssuesTraceTree', () => {
       const tree = IssuesTraceTree.FromTrace(traceWithSpans, {
         meta: null,
         replay: null,
+        organization,
       });
 
       mockSpansResponse(

static/app/views/performance/newTraceDetails/traceModels/issuesTraceTree.tsx

@@ -23,17 +23,23 @@ export class IssuesTraceTree extends TraceTree {
     return tree;
   }
 
-  static Loading(metadata: TraceTree.Metadata): IssuesTraceTree {
-    const t = makeExampleTrace(metadata);
+  static Loading(
+    metadata: TraceTree.Metadata,
+    organization: Organization
+  ): IssuesTraceTree {
+    const t = makeExampleTrace(metadata, organization);
     const tree = new IssuesTraceTree();
     tree.root = t.root;
     tree.type = 'loading';
     tree.build();
     return tree;
   }
 
-  static Error(metadata: TraceTree.Metadata): IssuesTraceTree {
-    const t = makeExampleTrace(metadata);
+  static Error(
+    metadata: TraceTree.Metadata,
+    organization: Organization
+  ): IssuesTraceTree {
+    const t = makeExampleTrace(metadata, organization);
     const tree = new IssuesTraceTree();
     tree.root = t.root;
     tree.type = 'error';
@@ -45,6 +51,7 @@ export class IssuesTraceTree extends TraceTree {
     trace: TraceTree.Trace,
     options: {
       meta: TraceMetaQueryResults['data'] | null;
+      organization: Organization;
       replay: HydratedReplayRecord | null;
       preferences?: Pick<TracePreferencesState, 'autogroup' | 'missing_instrumentation'>;
     }

static/app/views/performance/newTraceDetails/traceModels/makeExampleTrace.tsx

@@ -1,3 +1,5 @@
+import type {Organization} from 'sentry/types/organization';
+
 import {TraceTree} from './traceTree';
 
 // Creates an example trace response that we use to render the loading placeholder
@@ -27,7 +29,10 @@ function partialTransaction(
   };
 }
 
-export function makeExampleTrace(metadata: TraceTree.Metadata): TraceTree {
+export function makeExampleTrace(
+  metadata: TraceTree.Metadata,
+  organization: Organization
+): TraceTree {
   const trace: TraceTree.Trace = {
     transactions: [],
     orphan_errors: [],
@@ -81,5 +86,5 @@ export function makeExampleTrace(metadata: TraceTree.Metadata): TraceTree {
     start = end;
   }
 
-  return TraceTree.FromTrace(trace, {meta: null, replay: null});
+  return TraceTree.FromTrace(trace, {meta: null, replay: null, organization});
 }