feat(ui): Add 'ui' as a span breakdown (#36515)

* feat(ui): Add 'ui' as a span breakdown

This will add 'ui' as another span breakdown in the transaction summary. It will help show the percentage time spent in UI for mobile and frontend projects.

static/app/utils/discover/fields.tsx

@@ -801,6 +801,7 @@ export const SPAN_OP_BREAKDOWN_FIELDS = [
   'spans.db',
   'spans.browser',
   'spans.resource',
+  'spans.ui',
 ];
 
 // This list contains fields/functions that are available with performance-view feature.

static/app/utils/performance/spanOperationBreakdowns/constants.tsx

@@ -3,4 +3,5 @@ export const SPAN_OP_BREAKDOWN_FIELDS = [
   'spans.http',
   'spans.db',
   'spans.resource',
+  'spans.ui',
 ];

static/app/views/performance/transactionSummary/filter.tsx

@@ -19,6 +19,7 @@ export enum SpanOperationBreakdownFilter {
   Db = 'db',
   Browser = 'browser',
   Resource = 'resource',
+  Ui = 'ui',
 }
 
 export const SPAN_OPERATION_BREAKDOWN_FILTER_TO_FIELD: Partial<
@@ -28,6 +29,7 @@ export const SPAN_OPERATION_BREAKDOWN_FILTER_TO_FIELD: Partial<
   [SpanOperationBreakdownFilter.Db]: 'spans.db',
   [SpanOperationBreakdownFilter.Browser]: 'spans.browser',
   [SpanOperationBreakdownFilter.Resource]: 'spans.resource',
+  [SpanOperationBreakdownFilter.Ui]: 'spans.ui',
 };
 
 const OPTIONS: SpanOperationBreakdownFilter[] = [
@@ -35,6 +37,7 @@ const OPTIONS: SpanOperationBreakdownFilter[] = [
   SpanOperationBreakdownFilter.Db,
   SpanOperationBreakdownFilter.Browser,
   SpanOperationBreakdownFilter.Resource,
+  SpanOperationBreakdownFilter.Ui,
 ];
 
 export const spanOperationBreakdownSingleColumns = OPTIONS.map(o => `spans.${o}`);