feat(perf): Add span ops to trends (#25945)

* feat(perf): Add span ops to trends

This will let us find trends in ops breakdowns, if the user is part of
the ops breakdown EA.

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

@@ -23,8 +23,8 @@ import {YAxis} from 'app/views/releases/detail/overview/chart/releaseChartContro
 import {TrendColumnField, TrendFunctionField} from '../trends/types';
 import {
   generateTrendFunctionAsString,
+  getTrendsParameters,
   TRENDS_FUNCTIONS,
-  TRENDS_PARAMETERS,
 } from '../trends/utils';
 
 import DurationChart from './durationChart';
@@ -72,12 +72,6 @@ const TREND_FUNCTIONS_OPTIONS: SelectValue<string>[] = TRENDS_FUNCTIONS.map(
     label,
   })
 );
-const TREND_PARAMETERS_OPTIONS: SelectValue<string>[] = TRENDS_PARAMETERS.map(
-  ({column, label}) => ({
-    value: column,
-    label,
-  })
-);
 
 type Props = {
   organization: OrganizationSummary;
@@ -117,6 +111,14 @@ class TransactionSummaryCharts extends Component<Props> {
 
   render() {
     const {totalValues, eventView, organization, location, currentFilter} = this.props;
+
+    const TREND_PARAMETERS_OPTIONS: SelectValue<string>[] = getTrendsParameters({
+      canSeeSpanOpTrends: organization.features.includes('performance-ops-breakdown'),
+    }).map(({column, label}) => ({
+      value: column,
+      label,
+    }));
+
     let display = decodeScalar(location.query.display, DisplayModes.DURATION);
     let trendFunction = decodeScalar(
       location.query.trendFunction,

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

@@ -18,6 +18,7 @@ import {decodeHistogramZoom} from './latencyChart';
 
 type DropdownButtonProps = React.ComponentProps<typeof DropdownButton>;
 
+// Make sure to update other instances like trends column fields, discover field types.
 export enum SpanOperationBreakdownFilter {
   None = 'none',
   Http = 'http',

static/app/views/performance/trends/content.tsx

@@ -31,10 +31,10 @@ import {
   getCurrentTrendFunction,
   getCurrentTrendParameter,
   getSelectedQueryKey,
+  getTrendsParameters,
   modifyTrendsViewDefaultPeriod,
   resetCursors,
   TRENDS_FUNCTIONS,
-  TRENDS_PARAMETERS,
 } from './utils';
 
 type Props = {
@@ -195,6 +195,10 @@ class TrendsContent extends React.Component<Props, State> {
     const currentTrendParameter = getCurrentTrendParameter(location);
     const query = getTransactionSearchQuery(location);
 
+    const TRENDS_PARAMETERS = getTrendsParameters({
+      canSeeSpanOpTrends: organization.features.includes('performance-ops-breakdown'),
+    });
+
     return (
       <GlobalSelectionHeader
         defaultSelection={{

static/app/views/performance/trends/types.tsx

@@ -50,6 +50,10 @@ export enum TrendColumnField {
   FCP = 'measurements.fcp',
   FID = 'measurements.fid',
   CLS = 'measurements.cls',
+  SPANS_DB = 'spans.db',
+  SPANS_HTTP = 'spans.http',
+  SPANS_BROWSER = 'spans.browser',
+  SPANS_RESOURCE = 'spans.resource',
 }
 
 export type TrendStat = {

static/app/views/performance/trends/utils.tsx

@@ -68,7 +68,7 @@ export const TRENDS_FUNCTIONS: TrendFunction[] = [
   },
 ];
 
-export const TRENDS_PARAMETERS: TrendParameter[] = [
+const TRENDS_PARAMETERS: TrendParameter[] = [
   {
     label: 'Duration',
     column: TrendColumnField.DURATION,
@@ -91,6 +91,32 @@ export const TRENDS_PARAMETERS: TrendParameter[] = [
   },
 ];
 
+// TODO(perf): Merge with above after ops breakdown feature is mainlined.
+const SPANS_TRENDS_PARAMETERS: TrendParameter[] = [
+  {
+    label: 'Spans (http)',
+    column: TrendColumnField.SPANS_HTTP,
+  },
+  {
+    label: 'Spans (db)',
+    column: TrendColumnField.SPANS_DB,
+  },
+  {
+    label: 'Spans (browser)',
+    column: TrendColumnField.SPANS_BROWSER,
+  },
+  {
+    label: 'Spans (resource)',
+    column: TrendColumnField.SPANS_RESOURCE,
+  },
+];
+
+export function getTrendsParameters({canSeeSpanOpTrends} = {canSeeSpanOpTrends: false}) {
+  return canSeeSpanOpTrends
+    ? [...TRENDS_PARAMETERS, ...SPANS_TRENDS_PARAMETERS]
+    : [...TRENDS_PARAMETERS];
+}
+
 export const trendToColor = {
   [TrendChangeType.IMPROVED]: {
     lighter: theme.green200,

tests/js/spec/views/performance/trends/index.spec.jsx

@@ -7,8 +7,8 @@ import ProjectsStore from 'app/stores/projectsStore';
 import TrendsIndex from 'app/views/performance/trends/';
 import {
   DEFAULT_MAX_DURATION,
+  getTrendsParameters,
   TRENDS_FUNCTIONS,
-  TRENDS_PARAMETERS,
 } from 'app/views/performance/trends/utils';
 
 const trendsViewQuery = {
@@ -391,7 +391,7 @@ describe('Performance > Trends', function () {
     await tick();
     wrapper.update();
 
-    for (const parameter of TRENDS_PARAMETERS) {
+    for (const parameter of getTrendsParameters()) {
       selectTrendParameter(wrapper, parameter.label);
 
       await tick();