ref(insights): perform one query per queue module chart (#92407)

This pr updates the queue module to make one query per chart. This will
make it easer to link insights -> explore
The data before and after is equivalent
Before

![image](https://github.com/user-attachments/assets/8bf64a9d-8005-4382-bea1-93e3108d4b58)

After

![image](https://github.com/user-attachments/assets/51d0599d-b487-499b-b096-fa2873f2fb85)

Author: DominikB2014

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

@@ -120,22 +120,6 @@ jest.mock(
     })),
   })
 );
-jest.mock('sentry/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery', () => ({
-  usePublishQueuesTimeSeriesQuery: jest.fn(() => ({
-    data: {},
-    isPending: false,
-    error: null,
-  })),
-}));
-jest.mock('sentry/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery', () => ({
-  useProcessQueuesTimeSeriesQuery: jest.fn(() => ({
-    data: {
-      'avg(messaging.message.receive.latency)': {},
-    },
-    isPending: false,
-    error: null,
-  })),
-}));
 jest.mock(
   'sentry/views/insights/common/components/widgets/hooks/useDatabaseLandingDurationQuery',
   () => ({
@@ -210,6 +194,11 @@ jest.mock('sentry/views/insights/common/queries/useTopNDiscoverSeries', () => ({
     isPending: false,
     error: null,
   })),
+  useTopNSpanMetricsSeries: jest.fn(() => ({
+    data: [mockDiscoverSeries('transaction_a,abc123')],
+    isPending: false,
+    error: null,
+  })),
 }));
 jest.mock('sentry/views/insights/common/queries/useDiscoverSeries', () => ({
   useEAPSeries: jest.fn(() => ({
@@ -259,6 +248,7 @@ jest.mock('sentry/views/insights/common/queries/useDiscoverSeries', () => ({
       'avg(http.response_content_length)': {},
       'avg(http.response_transfer_size)': {},
       'avg(http.decoded_response_content_length)': {},
+      'avg(messaging.message.receive.latency)': {},
     },
     isPending: false,
     error: null,

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

@@ -79,7 +79,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
 
   const hasChartActionsEnabled =
     organization.features.includes('insights-chart-actions') && useEap;
-  const yAxes: string[] = [];
+  const yAxes = new Set<string>();
 
   const visualizationProps: TimeSeriesWidgetVisualizationProps = {
     showLegend: props.showLegend,
@@ -95,7 +95,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
             ? Area
             : Bars;
 
-      yAxes.push(timeSeries.yAxis);
+      // yAxis should not contain whitespace, some yAxes are like `epm() span.op:queue.publish`
+      yAxes.add(timeSeries?.yAxis?.split(' ')[0] ?? '');
 
       return new PlottableDataConstructor(timeSeries, {
         color: serie.color ?? COMMON_COLORS(theme)[timeSeries.yAxis],
@@ -164,6 +165,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
     chartType = ChartType.BAR;
   }
 
+  const yAxisArray = [...yAxes];
+
   return (
     <ChartContainer height={props.height}>
       <Widget
@@ -187,13 +190,13 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) {
             {hasChartActionsEnabled && (
               <OpenInExploreButton
                 chartType={chartType}
-                yAxes={yAxes}
+                yAxes={yAxisArray}
                 title={props.title}
                 search={props.search}
               />
             )}
             {hasChartActionsEnabled && (
-              <CreateAlertButton yAxis={yAxes[0]} search={props.search} />
+              <CreateAlertButton yAxis={yAxisArray[0]} search={props.search} />
             )}
             {props.loaderSource !== 'releases-drawer' && (
               <Button

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

@@ -7,7 +7,7 @@ export default function QueuesLandingLatencyChartWidget(props: LoadableChartWidg
     <LatencyChart
       {...props}
       id="queuesLandingLatencyChartWidget"
-      referrer={Referrer.QUEUES_LANDING_CHARTS}
+      referrer={Referrer.QUEUE_LANDING_LATENCY_CHART}
     />
   );
 }

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

@@ -9,7 +9,7 @@ export default function QueuesLandingThroughputChartWidget(
     <ThroughputChart
       {...props}
       id="queuesLandingThroughputChartWidget"
-      referrer={Referrer.QUEUES_LANDING_CHARTS}
+      referrer={Referrer.QUEUE_LANDING_THROUGHPUT_CHART}
     />
   );
 }

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

@@ -15,7 +15,7 @@ export default function QueuesSummaryLatencyChartWidget(props: LoadableChartWidg
     <LatencyChart
       {...props}
       id="queuesSummaryLatencyChartWidget"
-      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      referrer={Referrer.QUEUES_SUMMARY_LATENCY_CHART}
       destination={destination}
     />
   );

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

@@ -17,7 +17,7 @@ export default function QueuesSummaryThroughputChartWidget(
     <ThroughputChart
       {...props}
       id="queuesSummaryThroughputChartWidget"
-      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      referrer={Referrer.QUEUES_SUMMARY_THROUGHPUT_CHART}
       destination={destination}
     />
   );

static/app/views/insights/queues/charts/latencyChart.spec.tsx

@@ -47,7 +47,7 @@ describe('latencyChart', () => {
       <LatencyChart
         id="latency-chart-test"
         destination="events"
-        referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+        referrer={Referrer.QUEUES_SUMMARY_LATENCY_CHART}
       />,
       {organization}
     );
@@ -56,11 +56,7 @@ describe('latencyChart', () => {
       '/organizations/org-slug/events-stats/',
       expect.objectContaining({
         query: expect.objectContaining({
-          yAxis: [
-            'avg(span.duration)',
-            'avg(messaging.message.receive.latency)',
-            'epm()',
-          ],
+          yAxis: ['avg(span.duration)', 'avg(messaging.message.receive.latency)'],
           query: 'span.op:queue.process messaging.destination.name:events',
         }),
       })

static/app/views/insights/queues/charts/latencyChart.tsx

@@ -3,10 +3,11 @@ import cloneDeep from 'lodash/cloneDeep';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import {defined} from 'sentry/utils';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 // Our loadable chart widgets use this to render, so this import is ok
 // eslint-disable-next-line no-restricted-imports
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
-import {useProcessQueuesTimeSeriesQuery} from 'sentry/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import type {Referrer} from 'sentry/views/insights/queues/referrers';
 import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
 
@@ -19,15 +20,24 @@ interface Props {
 }
 
 export function LatencyChart({id, error, destination, referrer, pageFilters}: Props) {
+  const search = new MutableSearch('span.op:queue.process');
+  if (destination) {
+    search.addFilterValue('messaging.destination.name', destination, false);
+  }
+
   const {
     data,
     isPending,
     error: latencyError,
-  } = useProcessQueuesTimeSeriesQuery({
-    destination,
+  } = useSpanMetricsSeries(
+    {
+      yAxis: ['avg(span.duration)', 'avg(messaging.message.receive.latency)'],
+      search,
+      transformAliasToInputFormat: true,
+    },
     referrer,
-    pageFilters,
-  });
+    pageFilters
+  );
 
   const messageReceiveLatencySeries = cloneDeep(
     data['avg(messaging.message.receive.latency)']
@@ -58,6 +68,7 @@ export function LatencyChart({id, error, destination, referrer, pageFilters}: Pr
   return (
     <InsightsAreaChartWidget
       id={id}
+      search={search}
       title={t('Average Duration')}
       series={[messageReceiveLatencySeries, data['avg(span.duration)']]}
       aliases={FIELD_ALIASES}

static/app/views/insights/queues/charts/throughputChart.spec.tsx

@@ -26,15 +26,22 @@ describe('throughputChart', () => {
       url: `/organizations/${organization.slug}/events-stats/`,
       method: 'GET',
       body: {
-        data: [[1739378162, [{count: 1}]]],
+        'queue.process': {
+          data: [[1739378162, [{count: 1}]]],
+          meta: {fields: {epm: 'rate'}, units: {epm: '1/second'}},
+        },
+        'queue.publish': {
+          data: [[1739378162, [{count: 1}]]],
+          meta: {fields: {epm: 'rate'}, units: {epm: '1/second'}},
+        },
       },
     });
   });
   it('renders', async () => {
     render(
       <ThroughputChart
         id="throughput-chart-test"
-        referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+        referrer={Referrer.QUEUES_SUMMARY_THROUGHPUT_CHART}
       />,
       {organization}
     );
@@ -43,21 +50,10 @@ describe('throughputChart', () => {
       '/organizations/org-slug/events-stats/',
       expect.objectContaining({
         query: expect.objectContaining({
-          yAxis: [
-            'avg(span.duration)',
-            'avg(messaging.message.receive.latency)',
-            'epm()',
-          ],
-          query: 'span.op:queue.process',
-        }),
-      })
-    );
-    expect(eventsStatsMock).toHaveBeenCalledWith(
-      '/organizations/org-slug/events-stats/',
-      expect.objectContaining({
-        query: expect.objectContaining({
-          yAxis: ['avg(span.duration)', 'epm()'],
-          query: 'span.op:queue.publish',
+          yAxis: 'epm()',
+          field: ['epm()', 'span.op'],
+          topEvents: '2',
+          query: 'span.op:[queue.publish, queue.process]',
         }),
       })
     );

static/app/views/insights/queues/charts/throughputChart.tsx

@@ -2,14 +2,16 @@ import {useTheme} from '@emotion/react';
 
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 // Our loadable chart widgets use this to render, so this import is ok
 // eslint-disable-next-line no-restricted-imports
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {useTopNSpanMetricsSeries} from 'sentry/views/insights/common/queries/useTopNDiscoverSeries';
 import {renameDiscoverSeries} from 'sentry/views/insights/common/utils/renameDiscoverSeries';
-import {useProcessQueuesTimeSeriesQuery} from 'sentry/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery';
-import {usePublishQueuesTimeSeriesQuery} from 'sentry/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery';
 import type {Referrer} from 'sentry/views/insights/queues/referrers';
 import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
+import type {SpanQueryFilters} from 'sentry/views/insights/types';
 
 interface Props {
   id: string;
@@ -21,50 +23,65 @@ interface Props {
 
 export function ThroughputChart({id, error, destination, pageFilters, referrer}: Props) {
   const theme = useTheme();
-  const {
-    data: publishData,
-    error: publishError,
-    isPending: isPublishDataLoading,
-  } = usePublishQueuesTimeSeriesQuery({
-    destination,
-    referrer,
-    pageFilters,
-  });
+
+  const search = MutableSearch.fromQueryObject({
+    'span.op': '[queue.publish, queue.process]',
+  } satisfies SpanQueryFilters);
+
+  if (destination) {
+    search.addFilterValue('messaging.destination.name', destination, false);
+  }
 
   const {
-    data: processData,
-    error: processError,
-    isPending: isProcessDataLoading,
-  } = useProcessQueuesTimeSeriesQuery({
-    destination,
+    data,
+    error: topNError,
+    isLoading,
+  } = useTopNSpanMetricsSeries(
+    {
+      search,
+      yAxis: ['epm()'],
+      fields: ['epm()', 'span.op'],
+      topN: 2,
+      transformAliasToInputFormat: true,
+    },
     referrer,
-    pageFilters,
-  });
+    pageFilters
+  );
+
+  const publishData: DiscoverSeries = data.find(
+    (d): d is DiscoverSeries => d.seriesName === 'queue.publish'
+  ) ?? {data: [], seriesName: 'queue.publish', meta: {fields: {}, units: {}}};
+
+  const processData: DiscoverSeries = data.find(
+    (d): d is DiscoverSeries => d.seriesName === 'queue.process'
+  ) ?? {data: [], seriesName: 'queue.process', meta: {fields: {}, units: {}}};
 
   const colors = theme.chart.getColorPalette(2);
+
   return (
     <InsightsLineChartWidget
       id={id}
+      search={search}
       title={t('Published vs Processed')}
       series={[
         renameDiscoverSeries(
           {
-            ...publishData['epm()'],
+            ...publishData,
             color: colors[1],
           },
           'epm() span.op:queue.publish'
         ),
         renameDiscoverSeries(
           {
-            ...processData['epm()'],
+            ...processData,
             color: colors[2],
           },
           'epm() span.op:queue.process'
         ),
       ]}
       aliases={FIELD_ALIASES}
-      isLoading={isPublishDataLoading || isProcessDataLoading}
-      error={error ?? processError ?? publishError}
+      isLoading={isLoading}
+      error={error ?? topNError}
     />
   );
 }