ref(perf): Use `sum(span.duration)` instead of `sum(span.self_time)` in Spans tab & Span Summary Page (#72724)

Due to technical limitations, self_time will eventually not be available
on spans. This PR refactors to use duration instead of self_time in the
spans tab and span summary page

---------

Co-authored-by: edwardgou-sentry <83961295+edwardgou-sentry@users.noreply.github.com>

static/app/views/performance/transactionSummary/transactionSpans/spanMetricsTable.spec.tsx

@@ -27,7 +27,7 @@ describe('SuspectSpansTable', () => {
             'span.op': 'db',
             'span.description': 'SELECT thing FROM my_cool_db',
             'spm()': 4.448963396488444,
-            'sum(span.self_time)': 1236071121.5044901,
+            'sum(span.duration)': 1236071121.5044901,
             'avg(span.duration)': 30900.700924083318,
           },
         ],

static/app/views/performance/transactionSummary/transactionSpans/spanMetricsTable.tsx

@@ -34,7 +34,7 @@ type DataRow = {
   [SpanMetricsField.SPAN_GROUP]: string;
   'avg(span.duration)': number;
   'spm()': number;
-  'sum(span.self_time)': number;
+  'sum(span.duration)': number;
 };
 
 type ColumnKeys =
@@ -42,7 +42,7 @@ type ColumnKeys =
   | SpanMetricsField.SPAN_DESCRIPTION
   | 'spm()'
   | `avg(${SpanMetricsField.SPAN_DURATION})`
-  | `sum(${SpanMetricsField.SPAN_SELF_TIME})`;
+  | `sum(${SpanMetricsField.SPAN_DURATION})`;
 
 type Column = GridColumnHeader<ColumnKeys>;
 
@@ -68,7 +68,7 @@ const COLUMN_ORDER: Column[] = [
     width: COL_WIDTH_UNDEFINED,
   },
   {
-    key: `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
+    key: `sum(${SpanMetricsField.SPAN_DURATION})`,
     name: t('Time Spent'),
     width: COL_WIDTH_UNDEFINED,
   },
@@ -79,7 +79,7 @@ const COLUMN_TYPE: Record<ColumnKeys, ColumnType> = {
   [SpanMetricsField.SPAN_DESCRIPTION]: 'string',
   ['spm()']: 'rate',
   [`avg(${SpanMetricsField.SPAN_DURATION})`]: 'duration',
-  [`sum(${SpanMetricsField.SPAN_SELF_TIME})`]: 'duration',
+  [`sum(${SpanMetricsField.SPAN_DURATION})`]: 'duration',
 };
 
 const LIMIT = 12;
@@ -129,7 +129,7 @@ export default function SpanMetricsTable(props: Props) {
         SpanMetricsField.SPAN_GROUP,
         `spm()`,
         `avg(${SpanMetricsField.SPAN_DURATION})`,
-        `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
+        `sum(${SpanMetricsField.SPAN_DURATION})`,
       ],
       sorts: [sort],
       cursor: spansCursor,

static/app/views/performance/transactionSummary/transactionSpans/spanSummary/content.spec.tsx

@@ -232,19 +232,19 @@ describe('SpanSummaryPage', function () {
             'span.description': 'SELECT thing FROM my_cool_db WHERE value = %s',
             'avg(span.duration)': 1.7381229881349218,
             'count()': 3677407172,
-            'sum(span.self_time)': 6391491809.035965,
+            'sum(span.duration)': 6391491809.035965,
           },
         ],
         meta: {
           fields: {
             'span.description': 'string',
-            'sum(span.self_time)': 'duration',
+            'sum(span.duration)': 'duration',
             'count()': 'integer',
             'avg(span.duration)': 'duration',
           },
           units: {
             'span.description': null,
-            'sum(span.self_time)': 'millisecond',
+            'sum(span.duration)': 'millisecond',
             'count()': null,
             'avg(span.duration)': 'millisecond',
           },

static/app/views/performance/transactionSummary/transactionSpans/spanSummary/content.tsx

@@ -110,8 +110,8 @@ function SpanSummaryContent(props: ContentProps) {
   const {data: spanHeaderData} = useSpanMetrics(
     {
       search: MutableSearch.fromQueryObject(filters),
-      fields: ['span.description', 'sum(span.self_time)', 'count()'],
-      sorts: [{field: 'sum(span.self_time)', kind: 'desc'}],
+      fields: ['span.description', 'sum(span.duration)', 'count()'],
+      sorts: [{field: 'sum(span.duration)', kind: 'desc'}],
     },
     SpanSummaryReferrer.SPAN_SUMMARY_HEADER_DATA
   );
@@ -151,7 +151,7 @@ function parseSpanHeaderData(data: Partial<SpanMetricsResponse>[]) {
   if (data.length === 1) {
     return {
       description: data[0]?.['span.description'],
-      timeSpent: data[0]?.['sum(span.self_time)'],
+      timeSpent: data[0]?.['sum(span.duration)'],
       spanCount: data[0]?.['count()'],
     };
   }

static/app/views/performance/transactionSummary/transactionSpans/useSpansTabTableSort.tsx

@@ -9,7 +9,7 @@ type Query = {
 };
 
 const SORTABLE_FIELDS = [
-  `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
+  `sum(${SpanMetricsField.SPAN_DURATION})`,
   'spm()',
   `avg(${SpanMetricsField.SPAN_DURATION})`,
 ] as const;