fix(trace-view): Improve OTLP span display (#101208)

If a span name isn't present (e.g. for spans from a transaction), we
generate one - the final fallback being to duplicate the span `op`. In
the trace view, rather than show duplicated information when the `op`
and `name` match, fallback to the description (which typically contains
more information).

Author: mjq

static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/description.tsx

@@ -100,10 +100,11 @@ export function SpanDescription({
     return formatter.toString(dbQueryText ?? span.description ?? '');
   }, [span.description, resolvedModule, dbSystem, dbQueryText]);
 
-  const exploreAttributeName = shouldUseOTelFriendlyUI
+  const exploreUsingName = shouldUseOTelFriendlyUI && span.name !== span.op;
+  const exploreAttributeName = exploreUsingName
     ? SpanFields.NAME
     : SpanFields.SPAN_DESCRIPTION;
-  const exploreAttributeValue = shouldUseOTelFriendlyUI ? span.name : span.description;
+  const exploreAttributeValue = exploreUsingName ? span.name : span.description;
 
   const actions = exploreAttributeValue ? (
     <BodyContentWrapper
@@ -194,7 +195,7 @@ export function SpanDescription({
         node={node}
         attributes={attributes}
       />
-    ) : shouldUseOTelFriendlyUI && span.name ? (
+    ) : shouldUseOTelFriendlyUI && span.name && span.name !== span.op ? (
       <DescriptionWrapper>
         <FormattedDescription>{span.name}</FormattedDescription>
         <CopyToClipboardButton

static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx

@@ -110,7 +110,8 @@ export function TraceSpanRow(
             )}
             {shouldUseOTelFriendlyUI &&
             isEAPSpanNode(props.node) &&
-            props.node.value.name ? (
+            props.node.value.name &&
+            props.node.value.name !== props.node.value.op ? (
               <React.Fragment>
                 <span className="TraceName" title={props.node.value.name}>
                   {ellipsize(props.node.value.name, 100)}