feat(performance): Reorganizes frontend Queues module referrer usage (#71046)

Refactors queues module referrers in the frontend to be a bit more
organized

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

@@ -4,6 +4,7 @@ import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestin
 
 import useOrganization from 'sentry/utils/useOrganization';
 import {LatencyChart} from 'sentry/views/performance/queues/charts/latencyChart';
+import {Referrer} from 'sentry/views/performance/queues/referrers';
 
 jest.mock('sentry/utils/useOrganization');
 
@@ -23,7 +24,9 @@ describe('latencyChart', () => {
     });
   });
   it('renders', async () => {
-    render(<LatencyChart destination="events" />);
+    render(
+      <LatencyChart destination="events" referrer={Referrer.QUEUES_SUMMARY_CHARTS} />
+    );
     screen.getByText('Avg Latency');
     expect(eventsStatsMock).toHaveBeenCalledWith(
       '/organizations/org-slug/events-stats/',

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

@@ -2,16 +2,18 @@ import {CHART_PALETTE} from 'sentry/constants/chartPalette';
 import {t} from 'sentry/locale';
 import {CHART_HEIGHT} from 'sentry/views/performance/database/settings';
 import {useQueuesTimeSeriesQuery} from 'sentry/views/performance/queues/queries/useQueuesTimeSeriesQuery';
+import type {Referrer} from 'sentry/views/performance/queues/referrers';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
 
 interface Props {
+  referrer: Referrer;
   destination?: string;
   error?: Error | null;
 }
 
-export function LatencyChart({error, destination}: Props) {
-  const {data, isLoading} = useQueuesTimeSeriesQuery({destination});
+export function LatencyChart({error, destination, referrer}: Props) {
+  const {data, isLoading} = useQueuesTimeSeriesQuery({destination, referrer});
   return (
     <ChartPanel title={t('Avg Latency')}>
       <Chart

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

@@ -4,6 +4,7 @@ import {render, screen, waitForElementToBeRemoved} from 'sentry-test/reactTestin
 
 import useOrganization from 'sentry/utils/useOrganization';
 import {ThroughputChart} from 'sentry/views/performance/queues/charts/throughputChart';
+import {Referrer} from 'sentry/views/performance/queues/referrers';
 
 jest.mock('sentry/utils/useOrganization');
 
@@ -23,7 +24,7 @@ describe('throughputChart', () => {
     });
   });
   it('renders', async () => {
-    render(<ThroughputChart />);
+    render(<ThroughputChart referrer={Referrer.QUEUES_SUMMARY_CHARTS} />);
     screen.getByText('Published vs Processed');
     expect(eventsStatsMock).toHaveBeenCalledWith(
       '/organizations/org-slug/events-stats/',

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

@@ -2,16 +2,18 @@ import {CHART_PALETTE} from 'sentry/constants/chartPalette';
 import {t} from 'sentry/locale';
 import {CHART_HEIGHT} from 'sentry/views/performance/database/settings';
 import {useQueuesTimeSeriesQuery} from 'sentry/views/performance/queues/queries/useQueuesTimeSeriesQuery';
+import type {Referrer} from 'sentry/views/performance/queues/referrers';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
 
 interface Props {
+  referrer: Referrer;
   destination?: string;
   error?: Error | null;
 }
 
-export function ThroughputChart({error, destination}: Props) {
-  const {data, isLoading} = useQueuesTimeSeriesQuery({destination});
+export function ThroughputChart({error, destination, referrer}: Props) {
+  const {data, isLoading} = useQueuesTimeSeriesQuery({destination, referrer});
   return (
     <ChartPanel title={t('Published vs Processed')}>
       <Chart

static/app/views/performance/queues/destinationSummary/destinationSummaryPage.tsx

@@ -27,6 +27,7 @@ import {ThroughputChart} from 'sentry/views/performance/queues/charts/throughput
 import {MessageSpanSamplesPanel} from 'sentry/views/performance/queues/destinationSummary/messageSpanSamplesPanel';
 import {TransactionsTable} from 'sentry/views/performance/queues/destinationSummary/transactionsTable';
 import {useQueuesMetricsQuery} from 'sentry/views/performance/queues/queries/useQueuesMetricsQuery';
+import {Referrer} from 'sentry/views/performance/queues/referrers';
 import {
   DESTINATION_TITLE,
   MODULE_TITLE,
@@ -43,7 +44,10 @@ function DestinationSummaryPage() {
   const {query} = useLocation();
   const destination = decodeScalar(query.destination);
 
-  const {data, isLoading} = useQueuesMetricsQuery({destination});
+  const {data, isLoading} = useQueuesMetricsQuery({
+    destination,
+    referrer: Referrer.QUEUES_SUMMARY,
+  });
   const errorRate = 1 - (data[0]?.['trace_status_rate(ok)'] ?? 0);
   return (
     <Fragment>
@@ -143,11 +147,17 @@ function DestinationSummaryPage() {
             {!onboardingProject && (
               <Fragment>
                 <ModuleLayout.Half>
-                  <LatencyChart destination={destination} />
+                  <LatencyChart
+                    destination={destination}
+                    referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+                  />
                 </ModuleLayout.Half>
 
                 <ModuleLayout.Half>
-                  <ThroughputChart destination={destination} />
+                  <ThroughputChart
+                    destination={destination}
+                    referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+                  />
                 </ModuleLayout.Half>
 
                 <ModuleLayout.Full>

static/app/views/performance/queues/destinationSummary/messageSpanSamplesPanel.tsx

@@ -25,6 +25,7 @@ import {MetricReadout} from 'sentry/views/performance/metricReadout';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {MessageSpanSamplesTable} from 'sentry/views/performance/queues/destinationSummary/messageSpanSamplesTable';
 import {useQueuesMetricsQuery} from 'sentry/views/performance/queues/queries/useQueuesMetricsQuery';
+import {Referrer} from 'sentry/views/performance/queues/referrers';
 import {
   CONSUMER_QUERY_FILTER,
   MessageActorType,
@@ -87,6 +88,7 @@ export function MessageSpanSamplesPanel() {
       destination: query.destination,
       transaction: query.transaction,
       enabled: isPanelOpen,
+      referrer: Referrer.QUEUES_SAMPLES_PANEL,
     });
 
   const avg = transactionMetrics?.[0]?.['avg(span.duration)'];

static/app/views/performance/queues/destinationSummary/transactionsTable.tsx

@@ -21,6 +21,7 @@ import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useQueuesByTransactionQuery} from 'sentry/views/performance/queues/queries/useQueuesByTransactionQuery';
+import {Referrer} from 'sentry/views/performance/queues/referrers';
 import {useModuleURL} from 'sentry/views/performance/utils/useModuleURL';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {SpanFunction, type SpanMetricsResponse} from 'sentry/views/starfish/types';
@@ -119,6 +120,7 @@ export function TransactionsTable() {
   const {data, isLoading, meta, pageLinks, error} = useQueuesByTransactionQuery({
     destination: locationQuery.destination,
     sort,
+    referrer: Referrer.QUEUES_SUMMARY_TRANSACTIONS_TABLE,
   });
 
   const handleCursor: CursorHandler = (newCursor, pathname, query) => {

static/app/views/performance/queues/queries/useQueuesByDestinationQuery.tsx

@@ -2,17 +2,24 @@ import type {Sort} from 'sentry/utils/discover/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import type {Referrer} from 'sentry/views/performance/queues/referrers';
 import {DEFAULT_QUERY_FILTER} from 'sentry/views/performance/queues/settings';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Props = {
+  referrer: Referrer;
   destination?: string;
   enabled?: boolean;
   sort?: Sort;
 };
 
-export function useQueuesByDestinationQuery({enabled, destination, sort}: Props) {
+export function useQueuesByDestinationQuery({
+  enabled,
+  destination,
+  sort,
+  referrer,
+}: Props) {
   const location = useLocation();
   const cursor = decodeScalar(location.query?.[QueryParameterNames.DESTINATIONS_CURSOR]);
 
@@ -41,7 +48,7 @@ export function useQueuesByDestinationQuery({enabled, destination, sort}: Props)
       limit: 10,
       cursor,
     },
-    'api.performance.queues.destination-summary'
+    referrer
   );
 
   return response;

static/app/views/performance/queues/queries/useQueuesByTransactionQuery.tsx

@@ -2,17 +2,24 @@ import type {Sort} from 'sentry/utils/discover/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
+import type {Referrer} from 'sentry/views/performance/queues/referrers';
 import {DEFAULT_QUERY_FILTER} from 'sentry/views/performance/queues/settings';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Props = {
+  referrer: Referrer;
   destination?: string;
   enabled?: boolean;
   sort?: Sort;
 };
 
-export function useQueuesByTransactionQuery({destination, enabled, sort}: Props) {
+export function useQueuesByTransactionQuery({
+  destination,
+  enabled,
+  sort,
+  referrer,
+}: Props) {
   const location = useLocation();
   const cursor = decodeScalar(location.query?.[QueryParameterNames.TRANSACTIONS_CURSOR]);
 
@@ -42,7 +49,7 @@ export function useQueuesByTransactionQuery({destination, enabled, sort}: Props)
       limit: 10,
       cursor,
     },
-    'api.performance.queues.destination-summary'
+    referrer
   );
 
   return response;

static/app/views/performance/queues/queries/useQueuesMetricsQuery.tsx

@@ -1,14 +1,21 @@
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import type {Referrer} from 'sentry/views/performance/queues/referrers';
 import {DEFAULT_QUERY_FILTER} from 'sentry/views/performance/queues/settings';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
 
 type Props = {
+  referrer: Referrer;
   destination?: string;
   enabled?: boolean;
   transaction?: string;
 };
 
-export function useQueuesMetricsQuery({destination, transaction, enabled}: Props) {
+export function useQueuesMetricsQuery({
+  destination,
+  transaction,
+  enabled,
+  referrer,
+}: Props) {
   const mutableSearch = new MutableSearch(DEFAULT_QUERY_FILTER);
   if (destination) {
     mutableSearch.addFilterValue('messaging.destination.name', destination);
@@ -35,7 +42,7 @@ export function useQueuesMetricsQuery({destination, transaction, enabled}: Props
       sorts: [],
       limit: 10,
     },
-    'api.performance.queues.destination-summary'
+    referrer
   );
 
   return response;