feat(tracemetrics): Add initial dataset implementation to dashboards

static/app/actionCreators/events.tsx

@@ -51,7 +51,7 @@ type Options = {
   period?: string | null;
   project?: readonly number[];
   query?: string;
-  queryExtras?: Record<string, string | boolean | number>;
+  queryExtras?: Record<string, string | boolean | number | string[]>;
   referrer?: string;
   sampling?: SamplingMode;
   start?: DateString;

static/app/utils/timeSeries/useFetchEventsTimeSeries.tsx

@@ -187,7 +187,7 @@ export function useFetchEventsTimeSeries<YAxis extends string, Attribute extends
   );
 }
 
-type EventsTimeSeriesResponse = {
+export type EventsTimeSeriesResponse = {
   timeSeries: TimeSeries[];
   meta?: {
     dataset: DiscoverDatasets;

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

@@ -33,6 +33,7 @@ import {IssuesConfig} from './issues';
 import {LogsConfig} from './logs';
 import {ReleasesConfig} from './releases';
 import {SpansConfig} from './spans';
+import {TraceMetricsConfig} from './traceMetrics';
 import {TransactionsConfig} from './transactions';
 
 export type WidgetBuilderSearchBarProps = {
@@ -43,6 +44,7 @@ export type WidgetBuilderSearchBarProps = {
   widgetQuery: WidgetQuery;
   dataset?: DiscoverDatasets;
   disabled?: boolean;
+  index?: number;
   portalTarget?: HTMLElement | null;
 };
 
@@ -275,7 +277,9 @@ export function getDatasetConfig<T extends WidgetType | undefined>(
           ? typeof LogsConfig
           : T extends WidgetType.SPANS
             ? typeof SpansConfig
-            : typeof ErrorsAndTransactionsConfig;
+            : T extends WidgetType.TRACEMETRICS
+              ? typeof TraceMetricsConfig
+              : typeof ErrorsAndTransactionsConfig;
 
 export function getDatasetConfig(
   widgetType?: WidgetType
@@ -286,7 +290,8 @@ export function getDatasetConfig(
   | typeof ErrorsConfig
   | typeof TransactionsConfig
   | typeof LogsConfig
-  | typeof SpansConfig {
+  | typeof SpansConfig
+  | typeof TraceMetricsConfig {
   switch (widgetType) {
     case WidgetType.ISSUE:
       return IssuesConfig;
@@ -300,6 +305,8 @@ export function getDatasetConfig(
       return LogsConfig;
     case WidgetType.SPANS:
       return SpansConfig;
+    case WidgetType.TRACEMETRICS:
+      return TraceMetricsConfig;
     case WidgetType.DISCOVER:
     default:
       return ErrorsAndTransactionsConfig;

static/app/views/dashboards/datasetConfig/spans.tsx

@@ -54,14 +54,14 @@ import {
   renderTraceAsLinkable,
   transformEventsResponseToTable,
 } from 'sentry/views/dashboards/datasetConfig/errorsAndTransactions';
+import {combineBaseFieldsWithTags} from 'sentry/views/dashboards/datasetConfig/utils/combineBaseFieldsWithEapTags';
 import {getSeriesRequestData} from 'sentry/views/dashboards/datasetConfig/utils/getSeriesRequestData';
 import {DisplayType, type Widget, type WidgetQuery} from 'sentry/views/dashboards/types';
 import {eventViewFromWidget} from 'sentry/views/dashboards/utils';
 import {transformEventsResponseToSeries} from 'sentry/views/dashboards/utils/transformEventsResponseToSeries';
 import SpansSearchBar from 'sentry/views/dashboards/widgetBuilder/buildSteps/filterResultsStep/spansSearchBar';
 import type {FieldValueOption} from 'sentry/views/discover/table/queryField';
 import {FieldValueKind} from 'sentry/views/discover/table/types';
-import {generateFieldOptions} from 'sentry/views/discover/utils';
 import {useSearchQueryBuilderProps} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
 import {useTraceItemAttributesWithConfig} from 'sentry/views/explore/contexts/traceItemAttributeContext';
 import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
@@ -241,33 +241,7 @@ function getPrimaryFieldOptions(
   tags?: TagCollection,
   _customMeasurements?: CustomMeasurementCollection
 ): Record<string, FieldValueOption> {
-  const baseFieldOptions = generateFieldOptions({
-    organization,
-    tagKeys: [],
-    fieldKeys: [],
-    aggregations: EAP_AGGREGATIONS,
-  });
-
-  const spanTags = Object.values(tags ?? {}).reduce(
-    function combineTag(acc, tag) {
-      acc[`${tag.kind}:${tag.key}`] = {
-        label: tag.name,
-        value: {
-          kind: FieldValueKind.TAG,
-
-          // We have numeric and string tags which have the same
-          // display name, but one is used for aggregates and the other
-          // is used for grouping.
-          meta: {name: tag.key, dataType: tag.kind === 'tag' ? 'string' : 'number'},
-        },
-      };
-
-      return acc;
-    },
-    {} as Record<string, FieldValueOption>
-  );
-
-  return {...baseFieldOptions, ...spanTags};
+  return combineBaseFieldsWithTags(organization, tags, EAP_AGGREGATIONS);
 }
 
 function filterAggregateParams(option: FieldValueOption, fieldValue?: QueryFieldValue) {

static/app/views/dashboards/datasetConfig/traceMetrics.tsx

@@ -0,0 +1,270 @@
+import pickBy from 'lodash/pickBy';
+
+import {doEventsRequest} from 'sentry/actionCreators/events';
+import type {ApiResult, Client} from 'sentry/api';
+import type {PageFilters, SelectValue} from 'sentry/types/core';
+import type {TagCollection} from 'sentry/types/group';
+import type {Organization} from 'sentry/types/organization';
+import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
+import {parseFunction, type QueryFieldValue} from 'sentry/utils/discover/fields';
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
+import type {MEPState} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
+import type {OnDemandControlContext} from 'sentry/utils/performance/contexts/onDemandControl';
+import type {EventsTimeSeriesResponse} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import {
+  type DatasetConfig,
+  type SearchBarData,
+  type SearchBarDataProviderProps,
+  type WidgetBuilderSearchBarProps,
+} from 'sentry/views/dashboards/datasetConfig/base';
+import {
+  getTableSortOptions,
+  getTimeseriesSortOptions,
+} from 'sentry/views/dashboards/datasetConfig/errorsAndTransactions';
+import {combineBaseFieldsWithTags} from 'sentry/views/dashboards/datasetConfig/utils/combineBaseFieldsWithEapTags';
+import {getSeriesRequestData} from 'sentry/views/dashboards/datasetConfig/utils/getSeriesRequestData';
+import {useHasTraceMetricsDashboards} from 'sentry/views/dashboards/hooks/useHasTraceMetricsDashboards';
+import {DisplayType, type Widget, type WidgetQuery} from 'sentry/views/dashboards/types';
+import {useWidgetBuilderContext} from 'sentry/views/dashboards/widgetBuilder/contexts/widgetBuilderContext';
+import {formatTimeSeriesLabel} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTimeSeriesLabel';
+import type {FieldValueOption} from 'sentry/views/discover/table/queryField';
+import {FieldValueKind} from 'sentry/views/discover/table/types';
+import {
+  TraceItemSearchQueryBuilder,
+  useSearchQueryBuilderProps,
+} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
+import {useTraceItemAttributesWithConfig} from 'sentry/views/explore/contexts/traceItemAttributeContext';
+import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
+import {TraceItemDataset} from 'sentry/views/explore/types';
+
+// This is a placeholder that currently signals that no metric is selected
+// When the metrics are loaded up, the first metric is selected and this will be filled out
+export const EMPTY_METRIC_SELECTION = 'avg(value,,,-)';
+
+const DEFAULT_WIDGET_QUERY: WidgetQuery = {
+  name: '',
+  fields: [],
+  columns: [],
+  fieldAliases: [],
+  aggregates: [EMPTY_METRIC_SELECTION],
+  conditions: '',
+  orderby: '',
+};
+
+const DEFAULT_FIELD: QueryFieldValue = {
+  function: ['avg', 'value', undefined, undefined],
+  kind: FieldValueKind.FUNCTION,
+};
+
+function TraceMetricsSearchBar({
+  widgetQuery,
+  onSearch,
+  portalTarget,
+  onClose,
+}: Pick<
+  WidgetBuilderSearchBarProps,
+  'widgetQuery' | 'onSearch' | 'portalTarget' | 'onClose'
+>) {
+  const {
+    selection: {projects},
+  } = usePageFilters();
+  const hasTraceMetricsDashboards = useHasTraceMetricsDashboards();
+  const {state: widgetBuilderState} = useWidgetBuilderContext();
+
+  // TODO: Make decision on how filtering works with multiple trace metrics
+  // We should probably limit it to only one metric for now because there's no way
+  // to filter by multiple metrics at the same time, unless the filter _ONLY_ includes
+  // tags for both metrics.
+  const traceMetric = widgetBuilderState.traceMetrics?.[0];
+
+  const traceItemAttributeConfig = {
+    traceItemType: TraceItemDataset.TRACEMETRICS,
+    enabled: hasTraceMetricsDashboards,
+  };
+
+  const {attributes: stringAttributes, secondaryAliases: stringSecondaryAliases} =
+    useTraceItemAttributesWithConfig(traceItemAttributeConfig, 'string');
+  const {attributes: numberAttributes, secondaryAliases: numberSecondaryAliases} =
+    useTraceItemAttributesWithConfig(traceItemAttributeConfig, 'number');
+
+  return (
+    <TraceItemSearchQueryBuilder
+      initialQuery={widgetQuery.conditions}
+      onSearch={onSearch}
+      itemType={TraceItemDataset.TRACEMETRICS}
+      numberAttributes={numberAttributes}
+      stringAttributes={stringAttributes}
+      numberSecondaryAliases={numberSecondaryAliases}
+      stringSecondaryAliases={stringSecondaryAliases}
+      searchSource="dashboards"
+      projects={projects}
+      portalTarget={portalTarget}
+      onChange={(query, state) => {
+        onClose?.(query, {validSearch: state.queryIsValid});
+      }}
+      namespace={traceMetric?.name}
+    />
+  );
+}
+
+function useTraceMetricsSearchBarDataProvider(
+  props: SearchBarDataProviderProps
+): SearchBarData {
+  const {pageFilters, widgetQuery} = props;
+  const hasTraceMetricsDashboards = useHasTraceMetricsDashboards();
+
+  const traceItemAttributeConfig = {
+    traceItemType: TraceItemDataset.TRACEMETRICS,
+    enabled: hasTraceMetricsDashboards,
+  };
+
+  const {attributes: stringAttributes, secondaryAliases: stringSecondaryAliases} =
+    useTraceItemAttributesWithConfig(traceItemAttributeConfig, 'string');
+  const {attributes: numberAttributes, secondaryAliases: numberSecondaryAliases} =
+    useTraceItemAttributesWithConfig(traceItemAttributeConfig, 'number');
+
+  const {filterKeys, filterKeySections, getTagValues} = useSearchQueryBuilderProps({
+    itemType: TraceItemDataset.TRACEMETRICS,
+    numberAttributes,
+    stringAttributes,
+    numberSecondaryAliases,
+    stringSecondaryAliases,
+    searchSource: 'dashboards',
+    initialQuery: widgetQuery?.conditions ?? '',
+    projects: pageFilters.projects,
+  });
+
+  return {
+    getFilterKeySections: () => filterKeySections,
+    getFilterKeys: () => filterKeys,
+    getTagValues,
+  };
+}
+
+function prettifySortOption(option: SelectValue<string>) {
+  const parsedFunction = parseFunction(option.value);
+  if (parsedFunction) {
+    return `${parsedFunction.name}(${parsedFunction.arguments[1] ?? '…'})`;
+  }
+  return option.label;
+}
+
+export const TraceMetricsConfig: DatasetConfig<EventsTimeSeriesResponse, never> = {
+  defaultField: DEFAULT_FIELD,
+  defaultWidgetQuery: DEFAULT_WIDGET_QUERY,
+  enableEquations: false,
+  SearchBar: TraceMetricsSearchBar,
+  useSearchBarDataProvider: useTraceMetricsSearchBarDataProvider,
+  filterSeriesSortOptions,
+  getTableFieldOptions: getPrimaryFieldOptions,
+  getTimeseriesSortOptions: (organization, widgetQuery, tags) =>
+    getTimeseriesSortOptions(organization, widgetQuery, tags, getPrimaryFieldOptions),
+  // We've forced the sort options to use the table sort options UI because
+  // we only want to allow sorting by selected aggregates.
+  getTableSortOptions: (organization, widgetQuery) =>
+    getTableSortOptions(organization, widgetQuery).map(option => ({
+      label: prettifySortOption(option),
+      value: option.value,
+    })),
+  getGroupByFieldOptions,
+  supportedDisplayTypes: [DisplayType.AREA, DisplayType.BAR, DisplayType.LINE],
+  getSeriesRequest,
+  transformTable: () => ({data: []}),
+  transformSeries: (data, _widgetQuery) =>
+    data.timeSeries.map(timeSeries => {
+      const func = parseFunction(timeSeries.yAxis);
+      if (func) {
+        timeSeries.yAxis = `${func.name}(${func.arguments[1] ?? '…'})`;
+      }
+      return {
+        data: timeSeries.values.map(value => ({
+          name: value.timestamp / 1000, // Account for microseconds to milliseconds precision
+          value: value.value ?? 0,
+        })),
+        seriesName: formatTimeSeriesLabel(timeSeries),
+      };
+    }),
+};
+
+function getPrimaryFieldOptions(
+  organization: Organization,
+  tags?: TagCollection,
+  _customMeasurements?: CustomMeasurementCollection
+): Record<string, FieldValueOption> {
+  return combineBaseFieldsWithTags(organization, tags, {});
+}
+
+function filterYAxisOptions() {
+  return function (option: FieldValueOption) {
+    return option.value.kind === FieldValueKind.FUNCTION;
+  };
+}
+
+function getGroupByFieldOptions(
+  organization: Organization,
+  tags?: TagCollection,
+  customMeasurements?: CustomMeasurementCollection
+) {
+  const primaryFieldOptions = getPrimaryFieldOptions(
+    organization,
+    tags,
+    customMeasurements
+  );
+  const yAxisFilter = filterYAxisOptions();
+  const filterGroupByOptions = (option: FieldValueOption) => !yAxisFilter(option);
+
+  return pickBy(primaryFieldOptions, filterGroupByOptions);
+}
+
+function getSeriesRequest(
+  api: Client,
+  widget: Widget,
+  queryIndex: number,
+  organization: Organization,
+  pageFilters: PageFilters,
+  _onDemandControlContext?: OnDemandControlContext,
+  referrer?: string,
+  _mepSetting?: MEPState | null,
+  samplingMode?: SamplingMode
+) {
+  const requestData = getSeriesRequestData(
+    widget,
+    queryIndex,
+    organization,
+    pageFilters,
+    DiscoverDatasets.TRACEMETRICS,
+    referrer
+  );
+
+  requestData.generatePathname = () =>
+    `/organizations/${organization.slug}/events-timeseries/`;
+
+  if (
+    [DisplayType.LINE, DisplayType.AREA, DisplayType.BAR].includes(widget.displayType) &&
+    (widget.queries[0]?.columns?.length ?? 0) > 0
+  ) {
+    requestData.queryExtras = {
+      ...requestData.queryExtras,
+      groupBy: widget.queries[0]!.columns,
+    };
+  }
+
+  if (samplingMode) {
+    requestData.sampling = samplingMode;
+  }
+
+  return doEventsRequest<true>(api, requestData) as unknown as Promise<
+    ApiResult<EventsTimeSeriesResponse>
+  >;
+}
+
+function filterSeriesSortOptions(columns: Set<string>) {
+  return (option: FieldValueOption) => {
+    if (option.value.kind === FieldValueKind.FUNCTION) {
+      return true;
+    }
+
+    return columns.has(option.value.meta.name);
+  };
+}