feat(fields): Add span operation breakdown fields to definitions (#37555)

Adds field definitions for the span operation breakdown fields, displays them in the discover search dropdown, and refactors uses of them to use the new enum.

static/app/components/events/searchBar.tsx

@@ -16,6 +16,7 @@ import {
   isEquation,
   isMeasurement,
   SEMVER_TAGS,
+  SPAN_OP_BREAKDOWN_FIELDS,
   TRACING_FIELDS,
 } from 'sentry/utils/discover/fields';
 import {FieldKey, FieldKind} from 'sentry/utils/fields';
@@ -66,6 +67,12 @@ const getMeasurementTags = (
     ])
   );
 
+const getSpanTags = () => {
+  return Object.fromEntries(
+    SPAN_OP_BREAKDOWN_FIELDS.map(key => [key, {key, name: key, kind: FieldKind.METRICS}])
+  );
+};
+
 const getSemverTags = () =>
   Object.fromEntries(
     Object.keys(SEMVER_TAGS).map(key => [
@@ -155,12 +162,13 @@ function SearchBar(props: SearchBarProps) {
     const functionTags = getFunctionTags(fields ?? []);
     const fieldTags = getFieldTags();
     const measurementsWithKind = getMeasurementTags(measurements);
+    const spanTags = getSpanTags();
     const semverTags = getSemverTags();
 
     const orgHasPerformanceView = organization.features.includes('performance-view');
 
     const combinedTags: Record<string, Tag> = orgHasPerformanceView
-      ? Object.assign({}, measurementsWithKind, fieldTags, functionTags)
+      ? Object.assign({}, measurementsWithKind, spanTags, fieldTags, functionTags)
       : omit(fieldTags, TRACING_FIELDS);
 
     const tagsWithKind = Object.fromEntries(

static/app/components/modals/addDashboardWidgetModal.tsx

@@ -33,9 +33,11 @@ import {
 } from 'sentry/types';
 import {defined} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
-import {getColumnsAndAggregates} from 'sentry/utils/discover/fields';
+import {
+  getColumnsAndAggregates,
+  SPAN_OP_BREAKDOWN_FIELDS,
+} from 'sentry/utils/discover/fields';
 import Measurements from 'sentry/utils/measurements/measurements';
-import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/performance/spanOperationBreakdowns/constants';
 import withApi from 'sentry/utils/withApi';
 import withPageFilters from 'sentry/utils/withPageFilters';
 import withTags from 'sentry/utils/withTags';

static/app/utils/discover/fieldRenderers.tsx

@@ -643,7 +643,7 @@ const spanOperationRelativeBreakdownRenderer = (
   let otherPercentage = 1;
   let orderedSpanOpsBreakdownFields;
   const sortingOnField = eventView?.sorts?.[0]?.field;
-  if (sortingOnField && SPAN_OP_BREAKDOWN_FIELDS.includes(sortingOnField)) {
+  if (sortingOnField && (SPAN_OP_BREAKDOWN_FIELDS as string[]).includes(sortingOnField)) {
     orderedSpanOpsBreakdownFields = [
       sortingOnField,
       ...SPAN_OP_BREAKDOWN_FIELDS.filter(op => op !== sortingOnField),

static/app/utils/discover/fields.tsx

@@ -16,6 +16,7 @@ import {
   FIELDS,
   FieldValueType,
   MEASUREMENT_FIELDS,
+  SpanOpBreakdown,
   WebVital,
 } from '../fields';
 
@@ -598,13 +599,7 @@ export function isRelativeSpanOperationBreakdownField(field: string) {
   return field === SPAN_OP_RELATIVE_BREAKDOWN_FIELD;
 }
 
-export const SPAN_OP_BREAKDOWN_FIELDS = [
-  'spans.http',
-  'spans.db',
-  'spans.browser',
-  'spans.resource',
-  'spans.ui',
-];
+export const SPAN_OP_BREAKDOWN_FIELDS = Object.values(SpanOpBreakdown);
 
 // This list contains fields/functions that are available with performance-view feature.
 export const TRACING_FIELDS = [

static/app/utils/fields/index.ts

@@ -133,6 +133,14 @@ export enum MobileVital {
   StallPercentage = 'measurements.stall_percentage',
 }
 
+export enum SpanOpBreakdown {
+  SpansBrowser = 'spans.browser',
+  SpansDb = 'spans.db',
+  SpansHttp = 'spans.http',
+  SpansResource = 'spans.resource',
+  SpansUi = 'spans.ui',
+}
+
 export enum AggregationKey {
   Count = 'count',
   CountUnique = 'count_unique',
@@ -380,9 +388,38 @@ export const MEASUREMENT_FIELDS: Record<string, FieldDefinition> = {
   },
 };
 
+export const SPAN_OP_FIELDS = {
+  [SpanOpBreakdown.SpansBrowser]: {
+    desc: t('Cumulative time based on the browser operation'),
+    kind: FieldKind.METRICS,
+    valueType: FieldValueType.DURATION,
+  },
+  [SpanOpBreakdown.SpansDb]: {
+    desc: t('Cumulative time based on the database operation'),
+    kind: FieldKind.METRICS,
+    valueType: FieldValueType.DURATION,
+  },
+  [SpanOpBreakdown.SpansHttp]: {
+    desc: t('Cumulative time based on the http operation'),
+    kind: FieldKind.METRICS,
+    valueType: FieldValueType.DURATION,
+  },
+  [SpanOpBreakdown.SpansResource]: {
+    desc: t('Cumulative time based on the resource operation'),
+    kind: FieldKind.METRICS,
+    valueType: FieldValueType.DURATION,
+  },
+  [SpanOpBreakdown.SpansUi]: {
+    desc: t('Cumulative time based on the ui operation'),
+    kind: FieldKind.METRICS,
+    valueType: FieldValueType.DURATION,
+  },
+};
+
 export const FIELDS: Record<FieldKey & AggregationKey & MobileVital, FieldDefinition> = {
   ...AGGREGATION_FIELDS,
   ...MEASUREMENT_FIELDS,
+  ...SPAN_OP_FIELDS,
   [FieldKey.AGE]: {
     desc: t('The age of the issue in relative time'),
     kind: FieldKind.FIELD,
@@ -946,6 +983,13 @@ export const DISCOVER_FIELDS = [
   FieldKey.PROJECT,
   FieldKey.ISSUE,
   FieldKey.USER_DISPLAY,
+
+  // Span Op fields
+  SpanOpBreakdown.SpansBrowser,
+  SpanOpBreakdown.SpansDb,
+  SpanOpBreakdown.SpansHttp,
+  SpanOpBreakdown.SpansResource,
+  SpanOpBreakdown.SpansUi,
 ];
 
 export const getFieldDefinition = (key: string): FieldDefinition | null => {

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

@@ -1,7 +0,0 @@
-export const SPAN_OP_BREAKDOWN_FIELDS = [
-  'spans.browser',
-  'spans.http',
-  'spans.db',
-  'spans.resource',
-  'spans.ui',
-];

static/app/views/dashboardsV2/widgetBuilder/utils.tsx

@@ -12,10 +12,10 @@ import {
   isEquation,
   isEquationAlias,
   isLegalYAxisType,
+  SPAN_OP_BREAKDOWN_FIELDS,
   stripDerivedMetricsPrefix,
 } from 'sentry/utils/discover/fields';
 import {MeasurementCollection} from 'sentry/utils/measurements/measurements';
-import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/performance/spanOperationBreakdowns/constants';
 import {
   DisplayType,
   Widget,

static/app/views/eventsV2/table/index.tsx

@@ -13,9 +13,9 @@ import EventView, {
   isAPIPayloadSimilar,
   LocationQuery,
 } from 'sentry/utils/discover/eventView';
+import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/discover/fields';
 import Measurements from 'sentry/utils/measurements/measurements';
 import parseLinkHeader from 'sentry/utils/parseLinkHeader';
-import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/performance/spanOperationBreakdowns/constants';
 import withApi from 'sentry/utils/withApi';
 
 import TableView from './tableView';

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

@@ -8,6 +8,7 @@ import {IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {OrganizationSummary} from 'sentry/types';
+import {SpanOpBreakdown} from 'sentry/utils/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
 
 import {decodeHistogramZoom} from './transactionOverview/latencyChart/utils';
@@ -25,11 +26,11 @@ export enum SpanOperationBreakdownFilter {
 export const SPAN_OPERATION_BREAKDOWN_FILTER_TO_FIELD: Partial<
   Record<SpanOperationBreakdownFilter, string>
 > = {
-  [SpanOperationBreakdownFilter.Http]: 'spans.http',
-  [SpanOperationBreakdownFilter.Db]: 'spans.db',
-  [SpanOperationBreakdownFilter.Browser]: 'spans.browser',
-  [SpanOperationBreakdownFilter.Resource]: 'spans.resource',
-  [SpanOperationBreakdownFilter.Ui]: 'spans.ui',
+  [SpanOperationBreakdownFilter.Http]: SpanOpBreakdown.SpansHttp,
+  [SpanOperationBreakdownFilter.Db]: SpanOpBreakdown.SpansDb,
+  [SpanOperationBreakdownFilter.Browser]: SpanOpBreakdown.SpansBrowser,
+  [SpanOperationBreakdownFilter.Resource]: SpanOpBreakdown.SpansResource,
+  [SpanOperationBreakdownFilter.Ui]: SpanOpBreakdown.SpansUi,
 };
 
 const OPTIONS: SpanOperationBreakdownFilter[] = [

static/app/views/releases/detail/overview/index.tsx

@@ -32,7 +32,7 @@ import {
 import {getUtcDateString} from 'sentry/utils/dates';
 import {TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import EventView from 'sentry/utils/discover/eventView';
-import {MobileVital, WebVital} from 'sentry/utils/fields';
+import {MobileVital, SpanOpBreakdown, WebVital} from 'sentry/utils/fields';
 import {formatVersion} from 'sentry/utils/formatters';
 import {decodeScalar} from 'sentry/utils/queryString';
 import routeTitleGen from 'sentry/utils/routeTitle';
@@ -204,9 +204,9 @@ class ReleaseOverview extends AsyncView<Props> {
               `p75(${WebVital.FID})`,
               `p75(${WebVital.LCP})`,
               `p75(${WebVital.CLS})`,
-              'p75(spans.http)',
-              'p75(spans.browser)',
-              'p75(spans.resource)',
+              `p75(${SpanOpBreakdown.SpansHttp})`,
+              `p75(${SpanOpBreakdown.SpansBrowser})`,
+              `p75(${SpanOpBreakdown.SpansResource})`,
             ],
           }) as EventView)
         : performanceType === PROJECT_PERFORMANCE_TYPE.BACKEND