ref(timeseries): Use /events-timeseries/ hook in Database Insights (#99339)

First steps to using `/events-timeseries/` endpoint in production!

- Accept `TimeSeries` in `InsightsTimeSeriesWidget`, so we can pass the
hook's response data directly to charts
- Remove unnecessary Knip config, since the hook is in actual use now
- Fix incorrectly named fixture (just to clarify)
- Add partial application span hook (just for convenience)
- Use `useFetchEventsTimeSeries` in database module (the bulk of the
change)

The change is pretty simple overall, just swapping the hook one-for-one!
Some of the parameter names are different, but that's about it. The main
change is that the `useFetchSpanTimeSeries` returns an _array_ of
`TimeSeries` objects, rathen than an object keyed by the `yAxis`. This
means we can just pass the response array directly to the charts.
CAVEAT: If the hook is fetching more data than is needed for the charts,
the extra data needs to be filtered out! This is not the case for
Database module, but it'll be the case for some other ones.

Otherwise, it's basically that:

1. `search` is called `query
2. the aliasing is _always on_, so no need for a parameter

Author: gggritso

knip.config.ts

@@ -58,7 +58,6 @@ const config: KnipConfig = {
     // TEMPORARY!
     '!static/app/components/core/disclosure/index.tsx',
     '!static/app/components/core/disclosure/disclosure.tsx',
-    '!static/app/utils/timeSeries/useFetchEventsTimeSeries.tsx',
   ],
   compilers: {
     mdx: async text => String(await compile(text)),

static/app/components/charts/chartWidgetLoader-unmocked-imports.spec.tsx

@@ -3,7 +3,8 @@ import fs from 'node:fs';
 // eslint-disable-next-line import/no-nodejs-modules
 import path from 'node:path';
 
-import {TimeSeriesFixture} from 'sentry-fixture/discoverSeries';
+import {DiscoverSeriesFixture} from 'sentry-fixture/discoverSeries';
+import {TimeSeriesFixture} from 'sentry-fixture/timeSeries';
 
 import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
 
@@ -13,11 +14,17 @@ import type {ChartId} from './chartWidgetLoader';
 import {ChartWidgetLoader} from './chartWidgetLoader';
 
 function mockDiscoverSeries(seriesName: string) {
-  return TimeSeriesFixture({
+  return DiscoverSeriesFixture({
     seriesName,
   });
 }
 
+function mockTimeSeries(yAxis: string) {
+  return TimeSeriesFixture({
+    yAxis,
+  });
+}
+
 // Mock this component so it doesn't yell at us for no plottables
 jest.mock(
   'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization',
@@ -128,6 +135,36 @@ jest.mock('sentry/views/insights/common/queries/useDiscoverSeries', () => ({
     error: null,
   })),
 }));
+jest.mock('sentry/utils/timeSeries/useFetchEventsTimeSeries', () => ({
+  useFetchSpanTimeSeries: jest.fn(() => ({
+    data: {
+      timeSeries: [
+        mockTimeSeries('epm()'),
+        mockTimeSeries('count(span.duration)'),
+        mockTimeSeries('avg(span.duration)'),
+        mockTimeSeries('p95(span.duration)'),
+        mockTimeSeries('trace_status_rate(internal_error)'),
+        mockTimeSeries('cache_miss_rate()'),
+        mockTimeSeries('http_response_rate(3)'),
+        mockTimeSeries('http_response_rate(4)'),
+        mockTimeSeries('http_response_rate(5)'),
+        mockTimeSeries('avg(span.self_time)'),
+        mockTimeSeries('avg(http.response_content_length)'),
+        mockTimeSeries('avg(http.response_transfer_size)'),
+        mockTimeSeries('avg(http.decoded_response_content_length)'),
+        mockTimeSeries('avg(messaging.message.receive.latency)'),
+        mockTimeSeries('performance_score(measurements.score.lcp)'),
+        mockTimeSeries('performance_score(measurements.score.fcp)'),
+        mockTimeSeries('performance_score(measurements.score.cls)'),
+        mockTimeSeries('performance_score(measurements.score.inp)'),
+        mockTimeSeries('performance_score(measurements.score.ttfb)'),
+        mockTimeSeries('count()'),
+      ],
+    },
+    isPending: false,
+    error: null,
+  })),
+}));
 jest.mock('sentry/views/insights/sessions/queries/useErroredSessions', () => ({
   __esModule: true,
   default: jest.fn(() => ({

static/app/utils/timeSeries/useFetchEventsTimeSeries.tsx

@@ -14,6 +14,7 @@ import {
   getRetryDelay,
   shouldRetryHandler,
 } from 'sentry/views/insights/common/utils/retryHandlers';
+import type {SpanProperty} from 'sentry/views/insights/types';
 
 import {getIntervalForTimeSeriesQuery} from './getIntervalForTimeSeriesQuery';
 
@@ -32,6 +33,13 @@ interface UseFetchEventsTimeSeriesOptions<Field> {
   topEvents?: number;
 }
 
+export function useFetchSpanTimeSeries<Fields extends SpanProperty>(
+  options: UseFetchEventsTimeSeriesOptions<Fields>,
+  referrer: string
+) {
+  return useFetchEventsTimeSeries<Fields>(DiscoverDatasets.SPANS, options, referrer);
+}
+
 /**
  * Fetch time series data from the `/events-timeseries/` endpoint. Returns an array of `TimeSeries` objects.
  */

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -11,7 +11,10 @@ import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useReleaseStats} from 'sentry/utils/useReleaseStats';
 import {MISSING_DATA_MESSAGE} from 'sentry/views/dashboards/widgets/common/settings';
-import type {LegendSelection} from 'sentry/views/dashboards/widgets/common/types';
+import type {
+  LegendSelection,
+  TimeSeries,
+} from 'sentry/views/dashboards/widgets/common/types';
 import {Area} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/area';
 import {Bars} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/bars';
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
@@ -48,7 +51,6 @@ export interface InsightsTimeSeriesWidgetProps
     LoadableChartWidgetProps {
   error: Error | null;
   isLoading: boolean;
-  series: DiscoverSeries[];
   visualizationType: 'line' | 'area' | 'bar';
   aliases?: Record<string, string>;
   description?: React.ReactNode;
@@ -69,11 +71,18 @@ export interface InsightsTimeSeriesWidgetProps
     groupBy?: SpanFields[];
     yAxis?: string[];
   };
-
   samples?: Samples;
+  /**
+   * During the transition from the `/events-stats/` endpoint to the `/events-timeseries/` endpoint we accept both `timeSeries` and `series` so different components can pass different data. Eventually `series` will go away.
+   */
+  series?: DiscoverSeries[];
   showLegend?: TimeSeriesWidgetVisualizationProps['showLegend'];
   showReleaseAs?: 'line' | 'bubble' | 'none';
   stacked?: boolean;
+  /**
+   * During the transition from the `/events-stats/` endpoint to the `/events-timeseries/` endpoint we accept both `timeSeries` and `series` so different components can pass different data. Eventually `timeSeries` will take over.
+   */
+  timeSeries?: TimeSeries[];
 }
 
 export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
@@ -94,27 +103,40 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
     ...props?.aliases,
   };
 
+  const PlottableDataConstructor =
+    props.visualizationType === 'line'
+      ? Line
+      : props.visualizationType === 'area'
+        ? Area
+        : Bars;
+
   const yAxes = new Set<string>();
   const plottables = [
-    ...(props.series.filter(Boolean) ?? []).map(serie => {
-      const timeSeries = markDelayedData(
+    ...(props.series?.filter(Boolean) ?? []).map(serie => {
+      const delayedTimeSeries = markDelayedData(
         convertSeriesToTimeseries(serie),
         INGESTION_DELAY
       );
-      const PlottableDataConstructor =
-        props.visualizationType === 'line'
-          ? Line
-          : props.visualizationType === 'area'
-            ? Area
-            : Bars;
 
       // yAxis should not contain whitespace, some yAxes are like `epm() span.op:queue.publish`
-      yAxes.add(timeSeries?.yAxis?.split(' ')[0] ?? '');
+      yAxes.add(delayedTimeSeries?.yAxis?.split(' ')[0] ?? '');
+
+      return new PlottableDataConstructor(delayedTimeSeries, {
+        color: serie.color ?? COMMON_COLORS(theme)[delayedTimeSeries.yAxis],
+        stack: props.stacked && props.visualizationType === 'bar' ? 'all' : undefined,
+        alias: aliases?.[delayedTimeSeries.yAxis],
+      });
+    }),
+    ...(props.timeSeries?.filter(Boolean) ?? []).map(timeSeries => {
+      // TODO: After merge of ENG-5375 we don't need to run `markDelayedData` on output of `/events-timeseries/`
+      const delayedTimeSeries = markDelayedData(timeSeries, INGESTION_DELAY);
+
+      yAxes.add(timeSeries.yAxis);
 
-      return new PlottableDataConstructor(timeSeries, {
-        color: serie.color ?? COMMON_COLORS(theme)[timeSeries.yAxis],
+      return new PlottableDataConstructor(delayedTimeSeries, {
+        color: COMMON_COLORS(theme)[delayedTimeSeries.yAxis],
         stack: props.stacked && props.visualizationType === 'bar' ? 'all' : undefined,
-        alias: aliases?.[timeSeries.yAxis],
+        alias: aliases?.[delayedTimeSeries.yAxis],
       });
     }),
     ...(props.extraPlottables ?? []),
@@ -158,7 +180,9 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
     );
   }
 
-  if (props.series.filter(Boolean).length === 0) {
+  if (
+    [...(props.series ?? []), ...(props.timeSeries ?? [])].filter(Boolean).length === 0
+  ) {
     return (
       <ChartContainer height={props.height}>
         <Widget

static/app/views/insights/common/components/widgets/databaseLandingDurationChartWidget.tsx

@@ -4,7 +4,6 @@ import {useDatabaseLandingDurationQuery} from 'sentry/views/insights/common/comp
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
 import {Referrer} from 'sentry/views/insights/database/referrers';
-import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
 
 export default function DatabaseLandingDurationChartWidget(
   props: LoadableChartWidgetProps
@@ -22,7 +21,7 @@ export default function DatabaseLandingDurationChartWidget(
       queryInfo={{search, referrer}}
       id="databaseLandingDurationChartWidget"
       title={getDurationChartTitle('db')}
-      series={[data[`${DEFAULT_DURATION_AGGREGATE}(span.self_time)`]]}
+      timeSeries={data?.timeSeries}
       isLoading={isPending}
       error={error}
     />

static/app/views/insights/common/components/widgets/databaseLandingThroughputChartWidget.tsx

@@ -23,7 +23,7 @@ export default function DatabaseLandingThroughputChartWidget(
       queryInfo={{search, referrer}}
       id="databaseLandingThroughputChartWidget"
       title={getThroughputChartTitle('db')}
-      series={[data['epm()']]}
+      timeSeries={data?.timeSeries}
       isLoading={isPending}
       error={error}
     />

static/app/views/insights/common/components/widgets/databaseSummaryDurationChartWidget.tsx

@@ -1,8 +1,8 @@
+import {useFetchSpanTimeSeries} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useParams} from 'sentry/utils/useParams';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
-import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types';
 import {Referrer} from 'sentry/views/insights/database/referrers';
 import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
@@ -19,12 +19,11 @@ export default function DatabaseSummaryDurationChartWidget(
   const search = MutableSearch.fromQueryObject(filters);
   const referrer = Referrer.SUMMARY_DURATION_CHART;
 
-  const {isPending, data, error} = useSpanSeries(
+  const {isPending, data, error} = useFetchSpanTimeSeries(
     {
-      search,
+      query: search,
       yAxis: [`${DEFAULT_DURATION_AGGREGATE}(${SpanFields.SPAN_SELF_TIME})`],
       enabled: Boolean(groupId),
-      transformAliasToInputFormat: true,
     },
     referrer
   );
@@ -35,7 +34,7 @@ export default function DatabaseSummaryDurationChartWidget(
       queryInfo={{search, referrer}}
       id="databaseSummaryDurationChartWidget"
       title={getDurationChartTitle('db')}
-      series={[data[`${DEFAULT_DURATION_AGGREGATE}(${SpanFields.SPAN_SELF_TIME})`]]}
+      timeSeries={data?.timeSeries}
       isLoading={isPending}
       error={error}
     />

static/app/views/insights/common/components/widgets/databaseSummaryThroughputChartWidget.tsx

@@ -1,8 +1,8 @@
+import {useFetchSpanTimeSeries} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useParams} from 'sentry/utils/useParams';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
-import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
 import {Referrer} from 'sentry/views/insights/database/referrers';
 import {FIELD_ALIASES} from 'sentry/views/insights/database/settings';
@@ -18,12 +18,11 @@ export default function DatabaseSummaryThroughputChartWidget(
   const search = MutableSearch.fromQueryObject(filters);
   const referrer = Referrer.SUMMARY_THROUGHPUT_CHART;
 
-  const {isPending, data, error} = useSpanSeries(
+  const {isPending, data, error} = useFetchSpanTimeSeries(
     {
-      search,
+      query: search,
       yAxis: ['epm()'],
       enabled: Boolean(groupId),
-      transformAliasToInputFormat: true,
     },
     referrer
   );
@@ -35,7 +34,7 @@ export default function DatabaseSummaryThroughputChartWidget(
       queryInfo={{search, referrer}}
       id="databaseSummaryThroughputChartWidget"
       title={getThroughputChartTitle('db')}
-      series={[data['epm()']]}
+      timeSeries={data?.timeSeries}
       isLoading={isPending}
       error={error}
     />

static/app/views/insights/common/components/widgets/hooks/useDatabaseLandingDurationQuery.tsx

@@ -1,5 +1,5 @@
+import {useFetchSpanTimeSeries} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {Referrer} from 'sentry/views/insights/database/referrers';
 import {DEFAULT_DURATION_AGGREGATE} from 'sentry/views/insights/database/settings';
 import {SpanFields} from 'sentry/views/insights/types';
@@ -10,11 +10,10 @@ type Props = {
 };
 
 export function useDatabaseLandingDurationQuery({search, enabled}: Props) {
-  return useSpanSeries(
+  return useFetchSpanTimeSeries(
     {
-      search,
+      query: search,
       yAxis: [`${DEFAULT_DURATION_AGGREGATE}(${SpanFields.SPAN_SELF_TIME})`],
-      transformAliasToInputFormat: true,
       enabled,
     },
     Referrer.LANDING_DURATION_CHART

static/app/views/insights/common/components/widgets/hooks/useDatabaseLandingThroughputQuery.tsx

@@ -1,5 +1,5 @@
+import {useFetchSpanTimeSeries} from 'sentry/utils/timeSeries/useFetchEventsTimeSeries';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useSpanSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {Referrer} from 'sentry/views/insights/database/referrers';
 
 type Props = {
@@ -8,11 +8,10 @@ type Props = {
 };
 
 export function useDatabaseLandingThroughputQuery({search, enabled}: Props) {
-  return useSpanSeries(
+  return useFetchSpanTimeSeries(
     {
-      search,
+      query: search,
       yAxis: ['epm()'],
-      transformAliasToInputFormat: true,
       enabled,
     },
     Referrer.LANDING_THROUGHPUT_CHART