feat(insights): migrate "average cold start" chart to eap

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

@@ -0,0 +1,190 @@
+import type {PageFilters} from 'sentry/types/core';
+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 DiscoverQueryProps,
+  useGenericDiscoverQuery,
+} from 'sentry/utils/discover/genericDiscoverQuery';
+import {DiscoverDatasets} from 'sentry/utils/discover/types';
+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 type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
+import {getSeriesEventView} from 'sentry/views/insights/common/queries/getSeriesEventView';
+import {DEFAULT_SAMPLING_MODE} from 'sentry/views/insights/common/queries/useDiscover';
+import {
+  getRetryDelay,
+  shouldRetryHandler,
+} from 'sentry/views/insights/common/utils/retryHandlers';
+import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
+import type {
+  MetricsProperty,
+  SpanFunctions,
+  SpanIndexedField,
+  SpanMetricsProperty,
+} from 'sentry/views/insights/types';
+
+import {convertDiscoverTimeseriesResponse} from './convertDiscoverTimeseriesResponse';
+
+export type DiscoverSeries = Series & {
+  meta: EventsMetaType;
+};
+
+interface UseMetricsSeriesOptions<Fields> {
+  fields: Fields;
+  topN: number;
+  yAxis: Fields;
+  enabled?: boolean;
+  interval?: string;
+  overriddenRoute?: string;
+  referrer?: string;
+  samplingMode?: SamplingMode | 'NONE';
+  search?: MutableSearch | string;
+  // TODO: Remove string type and always require MutableSearch
+  transformAliasToInputFormat?: boolean;
+}
+
+export const useTopNSpanMetricsSeries = <Fields extends SpanMetricsProperty[]>(
+  options: UseMetricsSeriesOptions<Fields>,
+  referrer: string,
+  pageFilters?: PageFilters
+) => {
+  const useEap = useInsightsEap();
+  return useTopNDiscoverSeries<Fields>(
+    options,
+    useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.SPANS_METRICS,
+    referrer,
+    pageFilters
+  );
+};
+
+export const useTopNSpanEAPSeries = <
+  Fields extends
+    | MetricsProperty[]
+    | SpanMetricsProperty[]
+    | SpanIndexedField[]
+    | SpanFunctions[]
+    | string[],
+>(
+  options: UseMetricsSeriesOptions<Fields>,
+  referrer: string
+) => {
+  return useTopNDiscoverSeries<Fields>(options, DiscoverDatasets.SPANS_EAP_RPC, referrer);
+};
+
+export const useTopNMetricsSeries = <Fields extends MetricsProperty[]>(
+  options: UseMetricsSeriesOptions<Fields>,
+  referrer: string,
+  pageFilters?: PageFilters
+) => {
+  const useEap = useInsightsEap();
+  return useTopNDiscoverSeries<Fields>(
+    options,
+    useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.METRICS,
+    referrer,
+    pageFilters
+  );
+};
+
+/**
+ * TODO: Remove string type, added to fix types for 'count()'
+ */
+export const useTopNSpanIndexedSeries = <
+  Fields extends SpanIndexedField[] | SpanFunctions[] | string[],
+>(
+  options: UseMetricsSeriesOptions<Fields>,
+  referrer: string,
+  dataset?: DiscoverDatasets
+) => {
+  const useEap = useInsightsEap();
+  return useTopNDiscoverSeries<Fields>(
+    options,
+    useEap ? DiscoverDatasets.SPANS_EAP_RPC : (dataset ?? DiscoverDatasets.SPANS_INDEXED),
+    referrer
+  );
+};
+
+const useTopNDiscoverSeries = <T extends string[]>(
+  options: UseMetricsSeriesOptions<T>,
+  dataset: DiscoverDatasets,
+  referrer: string,
+  pageFilters?: PageFilters
+) => {
+  const {
+    search = undefined,
+    yAxis = [],
+    fields = [],
+    topN,
+    interval = undefined,
+    samplingMode = DEFAULT_SAMPLING_MODE,
+  } = options;
+
+  const defaultPageFilters = usePageFilters();
+  const location = useLocation();
+  const organization = useOrganization();
+
+  // TODO: remove this check with eap
+  const shouldSetSamplingMode = dataset === DiscoverDatasets.SPANS_EAP_RPC;
+
+  const eventView = getSeriesEventView(
+    search,
+    fields,
+    pageFilters || defaultPageFilters.selection,
+    yAxis,
+    topN,
+    dataset
+  );
+
+  if (interval) {
+    eventView.interval = interval;
+  }
+
+  const result = useGenericDiscoverQuery<MultiSeriesEventsStats, DiscoverQueryProps>({
+    route: 'events-stats',
+    eventView,
+    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,
+      transformAliasToInputFormat: options.transformAliasToInputFormat ? '1' : '0',
+      sampling:
+        samplingMode === 'NONE' || !shouldSetSamplingMode ? undefined : samplingMode,
+    }),
+    options: {
+      enabled: options.enabled && defaultPageFilters.isReady,
+      refetchOnWindowFocus: false,
+      retry: shouldRetryHandler,
+      retryDelay: getRetryDelay,
+      staleTime: Infinity,
+    },
+    referrer,
+  });
+
+  const parsedData: DiscoverSeries[] = [];
+
+  const seriesData = result.data ?? {};
+
+  // Typically the response is an object, with the key being the series name and the value being the series data
+  // However, if there is no series returned, the response is just single series object (and hence the 'data' key is present in the object)
+  if (!seriesData?.data) {
+    Object.keys(seriesData).forEach(seriesName => {
+      const data = seriesData[seriesName]?.data ?? [];
+      const meta = (seriesData[seriesName]?.meta ?? {}) as EventsMetaType;
+      parsedData.push({
+        seriesName,
+        data: convertDiscoverTimeseriesResponse(data),
+        meta,
+      });
+    });
+  }
+
+  return {...result, data: parsedData};
+};

static/app/views/insights/mobile/appStarts/components/startDurationWidget.tsx

@@ -1,16 +1,12 @@
-import {getInterval} from 'sentry/components/charts/utils';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Series, SeriesDataUnit} from 'sentry/types/echarts';
 import type {MultiSeriesEventsStats} from 'sentry/types/organization';
 import {defined} from 'sentry/utils';
 import {tooltipFormatterUsingAggregateOutputType} from 'sentry/utils/discover/charts';
-import EventView from 'sentry/utils/discover/eventView';
-import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
-import usePageFilters from 'sentry/utils/usePageFilters';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {
   PRIMARY_RELEASE_COLOR,
@@ -19,10 +15,9 @@ import {
 import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
 import MiniChartPanel from 'sentry/views/insights/common/components/miniChartPanel';
 import {useReleaseSelection} from 'sentry/views/insights/common/queries/useReleases';
+import {useTopNSpanMetricsSeries} from 'sentry/views/insights/common/queries/useTopNDiscoverSeries';
 import {formatVersionAndCenterTruncate} from 'sentry/views/insights/common/utils/centerTruncate';
-import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/insights/common/utils/constants';
 import {appendReleaseFilters} from 'sentry/views/insights/common/utils/releaseComparison';
-import {useEventsStatsQuery} from 'sentry/views/insights/common/utils/useEventsStatsQuery';
 import {COLD_START_TYPE} from 'sentry/views/insights/mobile/appStarts/components/startTypeSelector';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {SpanMetricsField} from 'sentry/views/insights/types';
@@ -68,7 +63,6 @@ interface Props {
 }
 
 function StartDurationWidget({additionalFilters, chartHeight}: Props) {
-  const pageFilter = usePageFilters();
   const location = useLocation();
   const {
     primaryRelease,
@@ -92,42 +86,24 @@ function StartDurationWidget({additionalFilters, chartHeight}: Props) {
   const queryString = appendReleaseFilters(query, primaryRelease, secondaryRelease);
 
   const {
-    data: series,
+    data,
     isPending: isSeriesLoading,
     error: seriesError,
-  } = useEventsStatsQuery({
-    eventView: EventView.fromNewQueryWithPageFilters(
-      {
-        name: '',
-        topEvents: '2',
-        fields: ['release', 'avg(span.duration)'],
-        yAxis: ['avg(span.duration)'],
-        query: queryString,
-        dataset: DiscoverDatasets.SPANS_METRICS,
-        version: 2,
-        interval: getInterval(
-          pageFilter.selection.datetime,
-          STARFISH_CHART_INTERVAL_FIDELITY
-        ),
-      },
-      pageFilter.selection
-    ),
-    enabled: !isReleasesLoading,
-    referrer: 'api.starfish.mobile-startup-series',
-    initialData: {},
-  });
-
-  // The expected response is a multi series response, but if there is no data
-  // then we get an object representing a single series with all empty values
-  // (i.e without being grouped by release)
-  const hasReleaseData = series && !('data' in series);
+  } = useTopNSpanMetricsSeries(
+    {
+      yAxis: ['avg(span.duration)'],
+      fields: ['release', 'avg(span.duration)'],
+      topN: 2,
+      search: queryString,
+      enabled: !isReleasesLoading,
+    },
+    'api.starfish.mobile-startup-series'
+  );
 
   // Only transform the data is we know there's at least one release
-  const transformedSeries = hasReleaseData
-    ? Object.values(transformData(series, primaryRelease)).sort((releaseA, _releaseB) =>
-        releaseA.seriesName === primaryRelease ? -1 : 1
-      )
-    : [];
+  const sortedSeries = data.sort((releaseA, _releaseB) =>
+    releaseA.seriesName === primaryRelease ? -1 : 1
+  );
 
   return (
     <MiniChartPanel
@@ -145,7 +121,7 @@ function StartDurationWidget({additionalFilters, chartHeight}: Props) {
       }
     >
       <Chart
-        data={transformedSeries}
+        data={sortedSeries}
         height={chartHeight}
         loading={isSeriesLoading}
         grid={{