ref(insights): Add meta to useSpanMetricsTopNSeries response (#89657)

Right now that hook doesn't return the response meta at all, so we can't
use it for the new charts, since they need meta. I had to replace the
inards to fetch data using `useGenericDiscoverQuery` because the
previous approach doesn't propagate `meta` at all! Luckily this hook is
only used in just one place.

Closes [DAIN-217: Return `meta` from
`useSpanMetricsTopNSeries`](https://linear.app/getsentry/issue/DAIN-217/return-meta-from-usespanmetricstopnseries)

Author: gggritso

static/app/views/insights/common/queries/convertDiscoverTimeseriesResponse.ts

@@ -0,0 +1,14 @@
+import moment from 'moment-timezone';
+
+import type {DiscoverSeries} from './useDiscoverSeries';
+
+const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
+
+export function convertDiscoverTimeseriesResponse(data: any[]): DiscoverSeries['data'] {
+  return data.map(([timestamp, [{count: value}]]) => {
+    return {
+      name: moment(parseInt(timestamp, 10) * 1000).format(DATE_FORMAT),
+      value,
+    };
+  });
+}

static/app/views/insights/common/queries/useDiscoverSeries.ts

@@ -1,5 +1,3 @@
-import moment from 'moment-timezone';
-
 import type {PageFilters} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
 import {encodeSort, type EventsMetaType} from 'sentry/utils/discover/eventView';
@@ -27,7 +25,7 @@ import type {
   SpanMetricsProperty,
 } from 'sentry/views/insights/types';
 
-import {DATE_FORMAT} from './useSpansQuery';
+import {convertDiscoverTimeseriesResponse} from './convertDiscoverTimeseriesResponse';
 
 export interface MetricTimeseriesRow {
   [key: string]: number;
@@ -190,12 +188,3 @@ const useDiscoverSeries = <T extends string[]>(
 
   return {...result, data: parsedData as Record<T[number], DiscoverSeries>};
 };
-
-function convertDiscoverTimeseriesResponse(data: any[]): DiscoverSeries['data'] {
-  return data.map(([timestamp, [{count: value}]]) => {
-    return {
-      name: moment(parseInt(timestamp, 10) * 1000).format(DATE_FORMAT),
-      value,
-    };
-  });
-}

static/app/views/insights/common/queries/useSpanMetricsTopNSeries.spec.tsx

@@ -63,12 +63,32 @@ describe('useSpanMetricsTopNSeries', () => {
             [1699907700, [{count: 117}]],
             [1699908000, [{count: 199}]],
           ],
+          meta: {
+            fields: {
+              'span.group': 'string',
+              'count()': 'integer',
+            },
+            units: {
+              'span.group': null,
+              'count()': null,
+            },
+          },
         },
         '304': {
           data: [
             [1699907700, [{count: 12}]],
             [1699908000, [{count: 13}]],
           ],
+          meta: {
+            fields: {
+              'span.group': 'string',
+              'count()': 'integer',
+            },
+            units: {
+              'span.group': null,
+              'count()': null,
+            },
+          },
         },
       },
     });
@@ -120,13 +140,33 @@ describe('useSpanMetricsTopNSeries', () => {
           {name: '2023-11-13T20:40:00+00:00', value: 199},
         ],
         seriesName: '200',
+        meta: {
+          fields: {
+            'span.group': 'string',
+            'count()': 'integer',
+          },
+          units: {
+            'span.group': null,
+            'count()': null,
+          },
+        },
       },
       '304': {
         data: [
           {name: '2023-11-13T20:35:00+00:00', value: 12},
           {name: '2023-11-13T20:40:00+00:00', value: 13},
         ],
         seriesName: '304',
+        meta: {
+          fields: {
+            'span.group': 'string',
+            'count()': 'integer',
+          },
+          units: {
+            'span.group': null,
+            'count()': null,
+          },
+        },
       },
     });
   });

static/app/views/insights/common/queries/useSpanMetricsTopNSeries.tsx

@@ -1,15 +1,23 @@
-import type {Series} from 'sentry/types/echarts';
+import type {MultiSeriesEventsStats} from 'sentry/types/organization';
+import {encodeSort, type EventsMetaType} from 'sentry/utils/discover/eventView';
 import type {Sort} from 'sentry/utils/discover/fields';
+import {
+  type DiscoverQueryProps,
+  useGenericDiscoverQuery,
+} from 'sentry/utils/discover/genericDiscoverQuery';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {useLocation} from 'sentry/utils/useLocation';
+import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {getSeriesEventView} from 'sentry/views/insights/common/queries/getSeriesEventView';
-import {useWrappedDiscoverTimeseriesQuery} from 'sentry/views/insights/common/queries/useSpansQuery';
+import {
+  getRetryDelay,
+  shouldRetryHandler,
+} from 'sentry/views/insights/common/utils/retryHandlers';
 import type {SpanMetricsProperty} from 'sentry/views/insights/types';
 
-interface SpanMetricTimeseriesRow {
-  [key: string]: number;
-  interval: number;
-}
+import {convertDiscoverTimeseriesResponse} from './convertDiscoverTimeseriesResponse';
+import type {DiscoverSeries} from './useDiscoverSeries';
 
 interface UseSpanMetricsSeriesOptions<Fields> {
   topEvents: number;
@@ -27,6 +35,7 @@ export const useSpanMetricsTopNSeries = <Fields extends SpanMetricsProperty[]>(
   const {
     search = undefined,
     fields = [],
+    enabled,
     yAxis = [],
     topEvents,
     sorts = [],
@@ -39,6 +48,8 @@ export const useSpanMetricsTopNSeries = <Fields extends SpanMetricsProperty[]>(
     );
   }
 
+  const location = useLocation();
+  const organization = useOrganization();
   const pageFilters = usePageFilters();
 
   const eventView = getSeriesEventView(
@@ -53,37 +64,46 @@ export const useSpanMetricsTopNSeries = <Fields extends SpanMetricsProperty[]>(
     eventView.sorts = sorts;
   }
 
-  const result = useWrappedDiscoverTimeseriesQuery<SpanMetricTimeseriesRow[]>({
+  const result = useGenericDiscoverQuery<MultiSeriesEventsStats, DiscoverQueryProps>({
+    route: 'events-stats',
     eventView,
-    initialData: [],
+    location,
+    orgSlug: organization.slug,
+    getRequestPayload: () => ({
+      ...eventView.getEventsAPIPayload(location),
+      yAxis: eventView.yAxis,
+      topEvents: eventView.topEvents,
+      excludeOther: 0,
+      partial: 1,
+      orderby: eventView.sorts?.[0] ? encodeSort(eventView.sorts?.[0]) : undefined,
+      interval: eventView.interval,
+    }),
+    options: {
+      enabled: enabled && pageFilters.isReady,
+      refetchOnWindowFocus: false,
+      retry: shouldRetryHandler,
+      retryDelay: getRetryDelay,
+    },
     referrer,
-    enabled: options.enabled,
   });
 
-  const seriesByKey: Record<string, Series> = {};
+  const parsedData: Record<string, DiscoverSeries> = {};
+
+  const data = result.data ?? {};
 
-  (result?.data ?? []).forEach(datum => {
-    // `interval` is the timestamp of the data point. Every other key is the value of a requested or found timeseries. `groups` is used to disambiguate top-N multi-axis series, which aren't supported here so the value is useless
-    const {interval, group: _group, ...data} = datum;
+  Object.keys(data).forEach(seriesName => {
+    const dataSeries = data[seriesName]!;
 
-    Object.keys(data).forEach(key => {
-      const value = {
-        name: interval,
-        value: datum[key]!,
-      };
+    const convertedSeries: DiscoverSeries = {
+      seriesName,
+      data: convertDiscoverTimeseriesResponse(dataSeries.data),
+      meta: dataSeries?.meta as EventsMetaType,
+    };
 
-      if (seriesByKey[key]) {
-        seriesByKey[key].data.push(value);
-      } else {
-        seriesByKey[key] = {
-          seriesName: key,
-          data: [value],
-        };
-      }
-    });
+    parsedData[seriesName] = convertedSeries;
   });
 
-  return {...result, data: seriesByKey};
+  return {...result, data: parsedData};
 };
 
 const DEFAULT_EVENT_COUNT = 5;