feat(dashboard): Add field options for table cols to config (#35622)

Use the dataset config to display table column
options.

static/app/utils/measurements/measurements.tsx

@@ -33,6 +33,10 @@ function measurementsFromDetails(
 const MOBILE_MEASUREMENTS = measurementsFromDetails(MOBILE_VITAL_DETAILS);
 const WEB_MEASUREMENTS = measurementsFromDetails(WEB_VITAL_DETAILS);
 
+export function getMeasurements() {
+  return {...WEB_MEASUREMENTS, ...MOBILE_MEASUREMENTS};
+}
+
 type ChildrenProps = {
   measurements: MeasurementCollection;
 };
@@ -42,7 +46,7 @@ type Props = {
 };
 
 function Measurements({children}: Props) {
-  const measurements = {...WEB_MEASUREMENTS, ...MOBILE_MEASUREMENTS};
+  const measurements = getMeasurements();
   return <Fragment>{children({measurements})}</Fragment>;
 }
 

static/app/views/dashboardsV2/datasetConfig/base.tsx

@@ -1,8 +1,9 @@
-import {OrganizationSummary, PageFilters} from 'sentry/types';
+import {OrganizationSummary, PageFilters, SelectValue, TagCollection} from 'sentry/types';
 import {Series} from 'sentry/types/echarts';
 import {TableData} from 'sentry/utils/discover/discoverQuery';
 import {MetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
+import {FieldValue} from 'sentry/views/eventsV2/table/types';
 
 import {DisplayType, WidgetQuery, WidgetType} from '../types';
 
@@ -21,6 +22,14 @@ export interface DatasetConfig<SeriesResponse, TableResponse> {
    * Widget Builder.
    */
   defaultWidgetQuery: WidgetQuery;
+  /**
+   * Field options to display in the Column selectors for
+   * Table display type.
+   */
+  getTableFieldOptions: (
+    contextualProps?: ContextualProps,
+    tags?: TagCollection
+  ) => Record<string, SelectValue<FieldValue>>;
   /**
    * List of supported display types for dataset.
    */

static/app/views/dashboardsV2/datasetConfig/errorsAndTransactions.tsx

@@ -2,7 +2,7 @@ import {isMultiSeriesStats} from 'sentry/components/charts/utils';
 import Link from 'sentry/components/links/link';
 import Tooltip from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
-import {EventsStats, MultiSeriesEventsStats} from 'sentry/types';
+import {EventsStats, MultiSeriesEventsStats, TagCollection} from 'sentry/types';
 import {Series} from 'sentry/types/echarts';
 import {EventsTableData, TableData} from 'sentry/utils/discover/discoverQuery';
 import {MetaType} from 'sentry/utils/discover/eventView';
@@ -10,12 +10,15 @@ import {
   getFieldRenderer,
   RenderFunctionBaggage,
 } from 'sentry/utils/discover/fieldRenderers';
+import {SPAN_OP_BREAKDOWN_FIELDS} from 'sentry/utils/discover/fields';
 import {Container} from 'sentry/utils/discover/styles';
 import {
   eventDetailsRouteWithEventView,
   generateEventSlug,
 } from 'sentry/utils/discover/urls';
 import {getShortEventId} from 'sentry/utils/events';
+import {getMeasurements} from 'sentry/utils/measurements/measurements';
+import {generateFieldOptions} from 'sentry/views/eventsV2/utils';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
 import {DisplayType, WidgetQuery} from '../types';
@@ -44,6 +47,7 @@ export const ErrorsAndTransactionsConfig: DatasetConfig<
 > = {
   defaultWidgetQuery: DEFAULT_WIDGET_QUERY,
   getCustomFieldRenderer: getCustomEventsFieldRenderer,
+  getTableFieldOptions: getEventsTableFieldOptions,
   supportedDisplayTypes: [
     DisplayType.AREA,
     DisplayType.BAR,
@@ -57,6 +61,21 @@ export const ErrorsAndTransactionsConfig: DatasetConfig<
   transformTable: transformEventsResponseToTable,
 };
 
+function getEventsTableFieldOptions(
+  contextualProps?: ContextualProps,
+  tags?: TagCollection
+) {
+  const organization = contextualProps?.organization!;
+  const measurements = getMeasurements();
+
+  return generateFieldOptions({
+    organization,
+    tagKeys: Object.values(tags ?? {}).map(({key}) => key),
+    measurementKeys: Object.values(measurements).map(({key}) => key),
+    spanOperationBreakdownKeys: SPAN_OP_BREAKDOWN_FIELDS,
+  });
+}
+
 function transformEventsResponseToTable(
   data: TableData | EventsTableData,
   _widgetQuery: WidgetQuery,

static/app/views/dashboardsV2/datasetConfig/issues.tsx

@@ -8,6 +8,7 @@ import {DISCOVER_EXCLUSION_FIELDS, IssueSortOptions} from 'sentry/views/issueLis
 
 import {DisplayType, WidgetQuery} from '../types';
 import {ISSUE_FIELD_TO_HEADER_MAP} from '../widgetBuilder/issueWidget/fields';
+import {generateIssueWidgetFieldOptions} from '../widgetBuilder/issueWidget/utils';
 
 import {ContextualProps, DatasetConfig} from './base';
 
@@ -24,6 +25,7 @@ const DEFAULT_WIDGET_QUERY: WidgetQuery = {
 export const IssuesConfig: DatasetConfig<never, Group[]> = {
   defaultWidgetQuery: DEFAULT_WIDGET_QUERY,
   getCustomFieldRenderer: getIssueFieldRenderer,
+  getTableFieldOptions: () => generateIssueWidgetFieldOptions(),
   fieldHeaderMap: ISSUE_FIELD_TO_HEADER_MAP,
   supportedDisplayTypes: [DisplayType.TABLE],
   transformTable: transformIssuesResponseToTable,

static/app/views/dashboardsV2/datasetConfig/releases.tsx

@@ -8,7 +8,12 @@ import {TableData} from 'sentry/utils/discover/discoverQuery';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 
 import {DisplayType, WidgetQuery} from '../types';
-import {DERIVED_STATUS_METRICS_PATTERN} from '../widgetBuilder/releaseWidget/fields';
+import {
+  DERIVED_STATUS_METRICS_PATTERN,
+  generateReleaseWidgetFieldOptions,
+  SESSIONS_FIELDS,
+  SESSIONS_TAGS,
+} from '../widgetBuilder/releaseWidget/fields';
 import {
   derivedMetricsToField,
   resolveDerivedStatusFields,
@@ -38,6 +43,7 @@ export const ReleasesConfig: DatasetConfig<
 > = {
   defaultWidgetQuery: DEFAULT_WIDGET_QUERY,
   getCustomFieldRenderer: (field, meta) => getFieldRenderer(field, meta, false),
+  getTableFieldOptions: getReleasesTableFieldOptions,
   supportedDisplayTypes: [
     DisplayType.AREA,
     DisplayType.BAR,
@@ -50,6 +56,10 @@ export const ReleasesConfig: DatasetConfig<
   transformTable: transformSessionsResponseToTable,
 };
 
+function getReleasesTableFieldOptions() {
+  return generateReleaseWidgetFieldOptions(Object.values(SESSIONS_FIELDS), SESSIONS_TAGS);
+}
+
 export function transformSessionsResponseToTable(
   data: SessionApiResponse | MetricsApiResponse,
   widgetQuery: WidgetQuery

static/app/views/dashboardsV2/widgetBuilder/buildSteps/columnsStep/index.tsx

@@ -8,11 +8,10 @@ import {
   getColumnsAndAggregatesAsStrings,
   QueryFieldValue,
 } from 'sentry/utils/discover/fields';
-import Measurements from 'sentry/utils/measurements/measurements';
+import {getDatasetConfig} from 'sentry/views/dashboardsV2/datasetConfig/base';
 import {DisplayType, WidgetQuery, WidgetType} from 'sentry/views/dashboardsV2/types';
-import {generateIssueWidgetFieldOptions} from 'sentry/views/dashboardsV2/widgetBuilder/issueWidget/utils';
 
-import {DataSet, getAmendedFieldOptions} from '../../utils';
+import {DataSet} from '../../utils';
 import {BuildStep} from '../buildStep';
 
 import {ColumnFields} from './columnFields';
@@ -43,6 +42,7 @@ export function ColumnsStep({
   explodedFields,
   tags,
 }: Props) {
+  const datasetConfig = getDatasetConfig(widgetType);
   return (
     <BuildStep
       title={t('Choose your columns')}
@@ -82,19 +82,15 @@ export function ColumnsStep({
       }
     >
       {dataSet === DataSet.EVENTS ? (
-        <Measurements>
-          {({measurements}) => (
-            <ColumnFields
-              displayType={displayType}
-              organization={organization}
-              widgetType={widgetType}
-              fields={explodedFields}
-              errors={queryErrors}
-              fieldOptions={getAmendedFieldOptions({measurements, organization, tags})}
-              onChange={onYAxisOrColumnFieldChange}
-            />
-          )}
-        </Measurements>
+        <ColumnFields
+          displayType={displayType}
+          organization={organization}
+          widgetType={widgetType}
+          fields={explodedFields}
+          errors={queryErrors}
+          fieldOptions={datasetConfig.getTableFieldOptions({organization}, tags)}
+          onChange={onYAxisOrColumnFieldChange}
+        />
       ) : dataSet === DataSet.ISSUES ? (
         <ColumnFields
           displayType={displayType}
@@ -102,7 +98,7 @@ export function ColumnsStep({
           widgetType={widgetType}
           fields={explodedFields}
           errors={queryErrors?.[0] ? [queryErrors?.[0]] : undefined}
-          fieldOptions={generateIssueWidgetFieldOptions()}
+          fieldOptions={datasetConfig.getTableFieldOptions({organization}, tags)}
           onChange={newFields => {
             const fieldStrings = newFields.map(generateFieldAsString);
             const splitFields = getColumnsAndAggregatesAsStrings(newFields);

static/app/views/dashboardsV2/widgetBuilder/buildSteps/columnsStep/releaseColumnFields.tsx

@@ -1,11 +1,7 @@
 import {Organization} from 'sentry/types';
 import {QueryFieldValue} from 'sentry/utils/discover/fields';
+import {getDatasetConfig} from 'sentry/views/dashboardsV2/datasetConfig/base';
 import {DisplayType, WidgetType} from 'sentry/views/dashboardsV2/types';
-import {
-  generateReleaseWidgetFieldOptions,
-  SESSIONS_FIELDS,
-  SESSIONS_TAGS,
-} from 'sentry/views/dashboardsV2/widgetBuilder/releaseWidget/fields';
 import {filterPrimaryOptions} from 'sentry/views/dashboardsV2/widgetBuilder/utils';
 import {FieldValueOption} from 'sentry/views/eventsV2/table/queryField';
 import {FieldValueKind} from 'sentry/views/eventsV2/table/types';
@@ -29,6 +25,7 @@ export function ReleaseColumnFields({
   queryErrors,
   onYAxisOrColumnFieldChange,
 }: Props) {
+  const datasetConfig = getDatasetConfig(WidgetType.RELEASE);
   const filterAggregateParameters = (option: FieldValueOption) => {
     return option.value.kind === FieldValueKind.METRICS;
   };
@@ -39,10 +36,7 @@ export function ReleaseColumnFields({
       widgetType={widgetType}
       fields={explodedFields}
       errors={queryErrors?.[0] ? [queryErrors?.[0]] : undefined}
-      fieldOptions={generateReleaseWidgetFieldOptions(
-        Object.values(SESSIONS_FIELDS),
-        SESSIONS_TAGS
-      )}
+      fieldOptions={datasetConfig.getTableFieldOptions()}
       filterAggregateParameters={filterAggregateParameters}
       filterPrimaryOptions={option =>
         filterPrimaryOptions({

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

@@ -4,7 +4,7 @@ import trimStart from 'lodash/trimStart';
 
 import {generateOrderOptions} from 'sentry/components/dashboards/widgetQueriesForm';
 import {t} from 'sentry/locale';
-import {Organization, TagCollection} from 'sentry/types';
+import {OrganizationSummary, TagCollection} from 'sentry/types';
 import {
   aggregateFunctionOutputType,
   aggregateOutputType,
@@ -288,7 +288,7 @@ export function getAmendedFieldOptions({
   tags,
 }: {
   measurements: MeasurementCollection;
-  organization: Organization;
+  organization: OrganizationSummary;
   tags: TagCollection;
 }) {
   return generateFieldOptions({

static/app/views/eventsV2/utils.tsx

@@ -10,7 +10,7 @@ import {
 import {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable';
 import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {t} from 'sentry/locale';
-import {NewQuery, Organization, SelectValue} from 'sentry/types';
+import {NewQuery, Organization, OrganizationSummary, SelectValue} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {getUtcDateString} from 'sentry/utils/dates';
@@ -437,7 +437,7 @@ function generateExpandedConditions(
 }
 
 type FieldGeneratorOpts = {
-  organization: Organization;
+  organization: OrganizationSummary;
   aggregations?: Record<string, Aggregation>;
   fields?: Record<string, ColumnType>;
   measurementKeys?: string[] | null;