feat(otlp): Use name attribute in more spaces in the span waterfall (#97704)

A few more visual updates to the span waterfall for those using
OTel-friendly UI:

1. Update the span tree again. This time, bring it back closer to show
it originally worked. Always show `span.op` (unless it's `"default"`).
Show the span name if using OTel UI, otherwise show span description
2. Favour `db.query.text` attribute when creating a formatted
description. This is a semantic attribute that contains the entire
query, it should be used first
3. For OTel UI, show the span name in place of the span description in
the span description section of the details panel
4. When making a "More Samples" link for OTel UI, create the query by
using the `span.name` attribute instead of `span.description

Author: gggritso

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

@@ -45,6 +45,7 @@ import {
 } from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import type {TraceTreeNode} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeNode';
+import {useOTelFriendlyUI} from 'sentry/views/performance/otlp/useOTelFriendlyUI';
 import {spanDetailsRouteWithQuery} from 'sentry/views/performance/transactionSummary/transactionSpans/spanDetails/utils';
 import {usePerformanceGeneralProjectSettings} from 'sentry/views/performance/utils';
 
@@ -73,9 +74,11 @@ export function SpanDescription({
   });
   const span = node.value;
   const hasExploreEnabled = organization.features.includes('visibility-explore-view');
+  const shouldUseOTelFriendlyUI = useOTelFriendlyUI();
 
   const category = findSpanAttributeValue(attributes, 'span.category');
   const dbSystem = findSpanAttributeValue(attributes, 'db.system');
+  const dbQueryText = findSpanAttributeValue(attributes, 'db.query.text');
   const group = findSpanAttributeValue(attributes, 'span.group');
 
   const resolvedModule: ModuleName = resolveSpanModule(span.op, category);
@@ -93,10 +96,15 @@ export function SpanDescription({
       return prettyPrintJsonString(span.description).prettifiedQuery;
     }
 
-    return formatter.toString(span.description ?? '');
-  }, [span.description, resolvedModule, dbSystem]);
+    return formatter.toString(dbQueryText ?? span.description ?? '');
+  }, [span.description, resolvedModule, dbSystem, dbQueryText]);
 
-  const actions = span.description ? (
+  const exploreAttributeName = shouldUseOTelFriendlyUI
+    ? SpanFields.NAME
+    : SpanFields.SPAN_DESCRIPTION;
+  const exploreAttributeValue = shouldUseOTelFriendlyUI ? span.name : span.description;
+
+  const actions = exploreAttributeValue ? (
     <BodyContentWrapper
       padding={
         resolvedModule === ModuleName.DB ? `${space(1)} ${space(2)}` : `${space(1)}`
@@ -116,8 +124,8 @@ export function SpanDescription({
                 organization,
                 location,
                 node.event?.projectID,
-                SpanFields.SPAN_DESCRIPTION,
-                span.description,
+                exploreAttributeName,
+                exploreAttributeValue,
                 TraceDrawerActionKind.INCLUDE
               )
             : spanDetailsRouteWithQuery({
@@ -132,8 +140,8 @@ export function SpanDescription({
           if (hasExploreEnabled) {
             traceAnalytics.trackExploreSearch(
               organization,
-              SpanFields.SPAN_DESCRIPTION,
-              span.description!,
+              exploreAttributeName,
+              exploreAttributeValue,
               TraceDrawerActionKind.INCLUDE,
               'drawer'
             );
@@ -184,6 +192,17 @@ export function SpanDescription({
         node={node}
         attributes={attributes}
       />
+    ) : shouldUseOTelFriendlyUI && span.name ? (
+      <DescriptionWrapper>
+        <FormattedDescription>{span.name}</FormattedDescription>
+        <CopyToClipboardButton
+          borderless
+          size="zero"
+          iconSize="xs"
+          text={span.name}
+          tooltipProps={{disabled: true}}
+        />
+      </DescriptionWrapper>
     ) : (
       <DescriptionWrapper>
         {formattedDescription ? (

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

@@ -82,30 +82,30 @@ export function TraceSpanRow(
           <PlatformIcon
             platform={props.projects[props.node.metadata.project_slug ?? ''] ?? 'default'}
           />
-          {shouldUseOTelFriendlyUI &&
-          isEAPSpanNode(props.node) &&
-          props.node.value.name ? (
-            <React.Fragment>
-              <span className="TraceName" title={props.node.value.name}>
-                {ellipsize(props.node.value.name, 100)}
-              </span>
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              {props.node.value.op && props.node.value.op !== 'default' && (
-                <React.Fragment>
-                  <span className="TraceOperation">{props.node.value.op}</span>
-                  <strong className="TraceEmDash"> — </strong>
-                </React.Fragment>
-              )}
+          <React.Fragment>
+            {props.node.value.op && props.node.value.op !== 'default' && (
+              <React.Fragment>
+                <span className="TraceOperation">{props.node.value.op}</span>
+                <strong className="TraceEmDash"> — </strong>
+              </React.Fragment>
+            )}
+            {shouldUseOTelFriendlyUI &&
+            isEAPSpanNode(props.node) &&
+            props.node.value.name ? (
+              <React.Fragment>
+                <span className="TraceName" title={props.node.value.name}>
+                  {ellipsize(props.node.value.name, 100)}
+                </span>
+              </React.Fragment>
+            ) : (
               <span className="TraceDescription" title={props.node.value.description}>
                 {getNodeDescriptionPrefix(props.node)}
                 {props.node.value.description
                   ? ellipsize(props.node.value.description, 100)
                   : (spanId ?? 'unknown')}
               </span>
-            </React.Fragment>
-          )}
+            )}
+          </React.Fragment>
         </div>
       </div>
       <div