feat(trace-eap-waterfall): Sorting attributes. (#91814)

<img width="816" alt="Screenshot 2025-05-16 at 2 33 50 PM"
src="https://github.com/user-attachments/assets/8aaaa9cb-f6f2-4339-9364-0cf1f8a7af62"
/>

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/views/performance/newTraceDetails/traceContextTags.tsx

@@ -12,6 +12,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {AttributesTree} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
 import type {TraceRootEventQueryResults} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceRootEvent';
 import {isTraceItemDetailsResponse} from 'sentry/views/performance/newTraceDetails/traceApi/utils';
+import {sortAttributes} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
 import {useHasTraceTabsUI} from 'sentry/views/performance/newTraceDetails/useHasTraceTabsUI';
 
 type Props = {
@@ -35,7 +36,7 @@ export function TraceContextTags({rootEventResults}: Props) {
   const eventDetails = rootEventResults.data!;
   const rendered = isTraceItemDetailsResponse(eventDetails) ? (
     <AttributesTree
-      attributes={eventDetails.attributes}
+      attributes={sortAttributes(eventDetails.attributes)}
       rendererExtra={{
         theme,
         location,

static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx

@@ -37,7 +37,10 @@ import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
 import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSection';
 import {IssueList} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/issues/issues';
 import {TraceDrawerComponents} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/styles';
-import {getProfileMeta} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
+import {
+  getProfileMeta,
+  sortAttributes,
+} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
 import type {TraceTreeNodeDetailsProps} from 'sentry/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails';
 import {isEAPSpanNode} from 'sentry/views/performance/newTraceDetails/traceGuards';
 import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
@@ -390,7 +393,7 @@ function EAPSpanNodeDetails({
             >
               <AttributesTree
                 columnCount={columnCount}
-                attributes={attributes}
+                attributes={sortAttributes(attributes)}
                 rendererExtra={{
                   theme,
                   location,

static/app/views/performance/newTraceDetails/traceDrawer/details/utils.tsx

@@ -82,3 +82,20 @@ export function findSpanAttributeValue(
 ) {
   return attributes.find(attribute => attribute.name === attributeName)?.value.toString();
 }
+
+// Sort attributes so that span.* attributes are at the beginning and
+// the rest of the attributes are sorted alphabetically.
+export function sortAttributes(attributes: TraceItemResponseAttribute[]) {
+  return [...attributes].sort((a, b) => {
+    const aIsSpan = a.name.startsWith('span.');
+    const bIsSpan = b.name.startsWith('span.');
+
+    if (aIsSpan && !bIsSpan) {
+      return -1;
+    }
+    if (!aIsSpan && bIsSpan) {
+      return 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+}