From 474ff2ba23f1f92f0c0d8f5217ea45dcfdb85c5e Mon Sep 17 00:00:00 2001
From: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>
Date: Fri, 16 May 2025 14:22:51 -0400
Subject: [PATCH] feat(trace-eap-waterfall): Sorting attributes.

---
 .../newTraceDetails/traceContextTags.tsx        |  3 ++-
 .../traceDrawer/details/span/index.tsx          |  7 +++++--
 .../traceDrawer/details/utils.tsx               | 17 +++++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/static/app/views/performance/newTraceDetails/traceContextTags.tsx b/static/app/views/performance/newTraceDetails/traceContextTags.tsx
index c474f0b4796e0c..2e34bd1eb58542 100644
--- a/static/app/views/performance/newTraceDetails/traceContextTags.tsx
+++ b/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,
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx
index 9f8109fbd26a37..fb565848f5ab2e 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/span/index.tsx
+++ b/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,
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/details/utils.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/details/utils.tsx
index 760a0df7687729..f157b8621bb9a3 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/details/utils.tsx
+++ b/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);
+  });
+}