From fa47fc263c14711ed5cbe7bbb01162c382f853bf Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Thu, 10 Apr 2025 16:55:26 -0400
Subject: [PATCH 1/5] ref(insights): Refactor `cacheLandingPage` widgets

Part of https://github.com/getsentry/sentry/issues/88560
---
 .../insights/cache/views/cacheLandingPage.tsx | 40 +++----------------
 .../widgets/cacheMissRateChartWidget.tsx      | 32 +++++++++++++++
 .../widgets/cacheThroughputChartWidget.tsx    | 30 ++++++++++++++
 .../queuesLandingLatencyChartWidget.tsx       | 13 ++++++
 .../queuesLandingThroughputChartWidget.tsx    | 15 +++++++
 .../queuesSummaryLatencyChartWidget.tsx       | 21 ++++++++++
 .../queuesSummaryThroughputChartWidget.tsx    | 23 +++++++++++
 .../queues/charts/latencyChart.spec.tsx       |  6 ++-
 .../insights/queues/charts/latencyChart.tsx   |  4 +-
 .../queues/charts/throughputChart.spec.tsx    |  8 +++-
 .../queues/charts/throughputChart.tsx         |  4 +-
 .../queues/views/destinationSummaryPage.tsx   | 14 ++-----
 .../queues/views/queuesLandingPage.tsx        |  9 ++---
 13 files changed, 165 insertions(+), 54 deletions(-)
 create mode 100644 static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
 create mode 100644 static/app/views/insights/common/components/widgets/cacheThroughputChartWidget.tsx
 create mode 100644 static/app/views/insights/common/components/widgets/queuesLandingLatencyChartWidget.tsx
 create mode 100644 static/app/views/insights/common/components/widgets/queuesLandingThroughputChartWidget.tsx
 create mode 100644 static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
 create mode 100644 static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx

diff --git a/static/app/views/insights/cache/views/cacheLandingPage.tsx b/static/app/views/insights/cache/views/cacheLandingPage.tsx
index af630a926a9fa4..3a34f0d426e645 100644
--- a/static/app/views/insights/cache/views/cacheLandingPage.tsx
+++ b/static/app/views/insights/cache/views/cacheLandingPage.tsx
@@ -21,12 +21,13 @@ import {
 } from 'sentry/views/insights/cache/components/tables/transactionsTable';
 import {Referrer} from 'sentry/views/insights/cache/referrers';
 import {BASE_FILTERS, MODULE_DOC_LINK} from 'sentry/views/insights/cache/settings';
-import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
 import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import CacheMissRateChartWidget from 'sentry/views/insights/common/components/widgets/cacheMissRateChartWidget';
+import CacheThroughputChartWidget from 'sentry/views/insights/common/components/widgets/cacheThroughputChartWidget';
 import {
   useMetrics,
   useSpanMetrics,
@@ -37,10 +38,6 @@ import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnbo
 import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
 import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
-import {
-  DataTitles,
-  getThroughputChartTitle,
-} from 'sentry/views/insights/common/views/spans/types';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
 import {
   type MetricsProperty,
@@ -81,11 +78,7 @@ export function CacheLandingPage() {
     requiredParams: ['transaction'],
   });
 
-  const {
-    isPending: isCacheMissRateLoading,
-    data: cacheMissRateData,
-    error: cacheMissRateError,
-  } = useSpanMetricsSeries(
+  const {error: cacheMissRateError} = useSpanMetricsSeries(
     {
       yAxis: [`${CACHE_MISS_RATE}()`],
       search: MutableSearch.fromQueryObject(BASE_FILTERS),
@@ -94,19 +87,6 @@ export function CacheLandingPage() {
     Referrer.LANDING_CACHE_HIT_MISS_CHART
   );
 
-  const {
-    isPending: isThroughputDataLoading,
-    data: throughputData,
-    error: throughputError,
-  } = useSpanMetricsSeries(
-    {
-      search: MutableSearch.fromQueryObject(BASE_FILTERS),
-      yAxis: ['epm()'],
-      transformAliasToInputFormat: true,
-    },
-    Referrer.LANDING_CACHE_THROUGHPUT_CHART
-  );
-
   const {
     isFetching: isTransactionsListFetching,
     data: transactionsList,
@@ -211,20 +191,10 @@ export function CacheLandingPage() {
               </ModuleLayout.Full>
               <ModulesOnboarding moduleName={ModuleName.CACHE}>
                 <ModuleLayout.Half>
-                  <InsightsLineChartWidget
-                    title={DataTitles[`cache_miss_rate()`]}
-                    series={[cacheMissRateData[`${CACHE_MISS_RATE}()`]]}
-                    isLoading={isCacheMissRateLoading}
-                    error={cacheMissRateError}
-                  />
+                  <CacheMissRateChartWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Half>
-                  <InsightsLineChartWidget
-                    title={getThroughputChartTitle('cache.get_item')}
-                    series={[throughputData['epm()']]}
-                    isLoading={isThroughputDataLoading}
-                    error={throughputError}
-                  />
+                  <CacheThroughputChartWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Full>
                   <TransactionsTable
diff --git a/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
new file mode 100644
index 00000000000000..61cf1b63f39b0d
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
@@ -0,0 +1,32 @@
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {Referrer} from 'sentry/views/insights/cache/referrers';
+import {BASE_FILTERS} from 'sentry/views/insights/cache/settings';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
+import {SpanFunction} from 'sentry/views/insights/types';
+
+const {CACHE_MISS_RATE} = SpanFunction;
+
+export default function CacheMissRateWidget(props: LoadableChartWidgetProps) {
+  const {isPending, data, error} = useSpanMetricsSeries(
+    {
+      yAxis: [`${CACHE_MISS_RATE}()`],
+      search: MutableSearch.fromQueryObject(BASE_FILTERS),
+      transformAliasToInputFormat: true,
+    },
+    Referrer.LANDING_CACHE_HIT_MISS_CHART,
+    props.pageFilters
+  );
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="cacheMissRateChartWidget"
+      title={DataTitles[`cache_miss_rate()`]}
+      series={[data[`${CACHE_MISS_RATE}()`]]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}
diff --git a/static/app/views/insights/common/components/widgets/cacheThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/cacheThroughputChartWidget.tsx
new file mode 100644
index 00000000000000..7424fa6edf8e63
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/cacheThroughputChartWidget.tsx
@@ -0,0 +1,30 @@
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import {Referrer} from 'sentry/views/insights/cache/referrers';
+import {BASE_FILTERS} from 'sentry/views/insights/cache/settings';
+import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
+
+export default function CacheThroughputChartWidget(props: LoadableChartWidgetProps) {
+  const {isPending, data, error} = useSpanMetricsSeries(
+    {
+      search: MutableSearch.fromQueryObject(BASE_FILTERS),
+      yAxis: ['epm()'],
+      transformAliasToInputFormat: true,
+    },
+    Referrer.LANDING_CACHE_THROUGHPUT_CHART,
+    props.pageFilters
+  );
+
+  return (
+    <InsightsLineChartWidget
+      {...props}
+      id="cacheThroughputChartWidget"
+      title={getThroughputChartTitle('cache.get_item')}
+      series={[data['epm()']]}
+      isLoading={isPending}
+      error={error}
+    />
+  );
+}
diff --git a/static/app/views/insights/common/components/widgets/queuesLandingLatencyChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesLandingLatencyChartWidget.tsx
new file mode 100644
index 00000000000000..9b6841d2e190c0
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/queuesLandingLatencyChartWidget.tsx
@@ -0,0 +1,13 @@
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
+import {Referrer} from 'sentry/views/insights/queues/referrers';
+
+export default function QueuesLandingLatencyChartWidget(props: LoadableChartWidgetProps) {
+  return (
+    <LatencyChart
+      {...props}
+      id="queuesLandingLatencyChartWidget"
+      referrer={Referrer.QUEUES_LANDING_CHARTS}
+    />
+  );
+}
diff --git a/static/app/views/insights/common/components/widgets/queuesLandingThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesLandingThroughputChartWidget.tsx
new file mode 100644
index 00000000000000..9e290e33220872
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/queuesLandingThroughputChartWidget.tsx
@@ -0,0 +1,15 @@
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
+import {Referrer} from 'sentry/views/insights/queues/referrers';
+
+export default function QueuesLandingThroughputChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  return (
+    <ThroughputChart
+      {...props}
+      id="queuesLandingThroughputChartWidget"
+      referrer={Referrer.QUEUES_LANDING_CHARTS}
+    />
+  );
+}
diff --git a/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
new file mode 100644
index 00000000000000..1d2cd12109ebe2
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
@@ -0,0 +1,21 @@
+import {decodeScalar} from 'sentry/utils/queryString';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
+import {Referrer} from 'sentry/views/insights/queues/referrers';
+
+export default function QueuesSummaryLatencyChartWidget(props: LoadableChartWidgetProps) {
+  const {destination} = useLocationQuery({
+    fields: {
+      destination: decodeScalar,
+    },
+  });
+  return (
+    <LatencyChart
+      {...props}
+      id="queuesSummaryLatencyChartWidget"
+      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      destination={destination}
+    />
+  );
+}
diff --git a/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx
new file mode 100644
index 00000000000000..b3a9e1539e92a6
--- /dev/null
+++ b/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx
@@ -0,0 +1,23 @@
+import {decodeScalar} from 'sentry/utils/queryString';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
+import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
+import {Referrer} from 'sentry/views/insights/queues/referrers';
+
+export default function QueuesSummaryThroughputChartWidget(
+  props: LoadableChartWidgetProps
+) {
+  const {destination} = useLocationQuery({
+    fields: {
+      destination: decodeScalar,
+    },
+  });
+  return (
+    <ThroughputChart
+      {...props}
+      id="queuesSummaryThroughputChartWidget"
+      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      destination={destination}
+    />
+  );
+}
diff --git a/static/app/views/insights/queues/charts/latencyChart.spec.tsx b/static/app/views/insights/queues/charts/latencyChart.spec.tsx
index 58cc458baa7802..346eb2406afd8b 100644
--- a/static/app/views/insights/queues/charts/latencyChart.spec.tsx
+++ b/static/app/views/insights/queues/charts/latencyChart.spec.tsx
@@ -44,7 +44,11 @@ describe('latencyChart', () => {
   });
   it('renders', async () => {
     render(
-      <LatencyChart destination="events" referrer={Referrer.QUEUES_SUMMARY_CHARTS} />,
+      <LatencyChart
+        id="latency-chart-test"
+        destination="events"
+        referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      />,
       {organization}
     );
     screen.getByText('Average Duration');
diff --git a/static/app/views/insights/queues/charts/latencyChart.tsx b/static/app/views/insights/queues/charts/latencyChart.tsx
index fc7e074a4a0a1e..53ae99215a86b3 100644
--- a/static/app/views/insights/queues/charts/latencyChart.tsx
+++ b/static/app/views/insights/queues/charts/latencyChart.tsx
@@ -8,12 +8,13 @@ import type {Referrer} from 'sentry/views/insights/queues/referrers';
 import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
 
 interface Props {
+  id: string;
   referrer: Referrer;
   destination?: string;
   error?: Error | null;
 }
 
-export function LatencyChart({error, destination, referrer}: Props) {
+export function LatencyChart({id, error, destination, referrer}: Props) {
   const {
     data,
     isPending,
@@ -51,6 +52,7 @@ export function LatencyChart({error, destination, referrer}: Props) {
 
   return (
     <InsightsAreaChartWidget
+      id={id}
       title={t('Average Duration')}
       series={[messageReceiveLatencySeries, data['avg(span.duration)']]}
       aliases={FIELD_ALIASES}
diff --git a/static/app/views/insights/queues/charts/throughputChart.spec.tsx b/static/app/views/insights/queues/charts/throughputChart.spec.tsx
index 47e8b49a82cf04..a457b62fb3900d 100644
--- a/static/app/views/insights/queues/charts/throughputChart.spec.tsx
+++ b/static/app/views/insights/queues/charts/throughputChart.spec.tsx
@@ -31,7 +31,13 @@ describe('throughputChart', () => {
     });
   });
   it('renders', async () => {
-    render(<ThroughputChart referrer={Referrer.QUEUES_SUMMARY_CHARTS} />, {organization});
+    render(
+      <ThroughputChart
+        id="throughput-chart-test"
+        referrer={Referrer.QUEUES_SUMMARY_CHARTS}
+      />,
+      {organization}
+    );
     screen.getByText('Published vs Processed');
     expect(eventsStatsMock).toHaveBeenCalledWith(
       '/organizations/org-slug/events-stats/',
diff --git a/static/app/views/insights/queues/charts/throughputChart.tsx b/static/app/views/insights/queues/charts/throughputChart.tsx
index 5cc745559d60d2..f7141923e2886e 100644
--- a/static/app/views/insights/queues/charts/throughputChart.tsx
+++ b/static/app/views/insights/queues/charts/throughputChart.tsx
@@ -9,12 +9,13 @@ import type {Referrer} from 'sentry/views/insights/queues/referrers';
 import {FIELD_ALIASES} from 'sentry/views/insights/queues/settings';
 
 interface Props {
+  id: string;
   referrer: Referrer;
   destination?: string;
   error?: Error | null;
 }
 
-export function ThroughputChart({error, destination, referrer}: Props) {
+export function ThroughputChart({id, error, destination, referrer}: Props) {
   const theme = useTheme();
   const {
     data: publishData,
@@ -36,6 +37,7 @@ export function ThroughputChart({error, destination, referrer}: Props) {
 
   return (
     <InsightsLineChartWidget
+      id={id}
       title={t('Published vs Processed')}
       series={[
         renameDiscoverSeries(
diff --git a/static/app/views/insights/queues/views/destinationSummaryPage.tsx b/static/app/views/insights/queues/views/destinationSummaryPage.tsx
index c4337b9f920c8c..43d9cb8dd037c0 100644
--- a/static/app/views/insights/queues/views/destinationSummaryPage.tsx
+++ b/static/app/views/insights/queues/views/destinationSummaryPage.tsx
@@ -16,11 +16,11 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
 import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
+import QueuesSummaryLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget';
+import QueuesSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
-import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
-import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
 import {MessageSpanSamplesPanel} from 'sentry/views/insights/queues/components/messageSpanSamplesPanel';
 import {TransactionsTable} from 'sentry/views/insights/queues/components/tables/transactionsTable';
 import {useQueuesMetricsQuery} from 'sentry/views/insights/queues/queries/useQueuesMetricsQuery';
@@ -125,17 +125,11 @@ function DestinationSummaryPage() {
               {!onboardingProject && (
                 <Fragment>
                   <ModuleLayout.Half>
-                    <LatencyChart
-                      destination={destination}
-                      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
-                    />
+                    <QueuesSummaryLatencyChartWidget />
                   </ModuleLayout.Half>
 
                   <ModuleLayout.Half>
-                    <ThroughputChart
-                      destination={destination}
-                      referrer={Referrer.QUEUES_SUMMARY_CHARTS}
-                    />
+                    <QueuesSummaryThroughputChartWidget />
                   </ModuleLayout.Half>
 
                   <ModuleLayout.Full>
diff --git a/static/app/views/insights/queues/views/queuesLandingPage.tsx b/static/app/views/insights/queues/views/queuesLandingPage.tsx
index be32244151e8b5..f9d2874a67da31 100644
--- a/static/app/views/insights/queues/views/queuesLandingPage.tsx
+++ b/static/app/views/insights/queues/views/queuesLandingPage.tsx
@@ -17,15 +17,14 @@ import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modul
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import QueuesLandingLatencyChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingLatencyChartWidget';
+import QueuesLandingThroughputChartWidget from 'sentry/views/insights/common/components/widgets/queuesLandingThroughputChartWidget';
 import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters';
 import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
-import {LatencyChart} from 'sentry/views/insights/queues/charts/latencyChart';
-import {ThroughputChart} from 'sentry/views/insights/queues/charts/throughputChart';
 import {
   isAValidSort,
   QueuesTable,
 } from 'sentry/views/insights/queues/components/tables/queuesTable';
-import {Referrer} from 'sentry/views/insights/queues/referrers';
 import {ModuleName} from 'sentry/views/insights/types';
 
 const DEFAULT_SORT = {
@@ -84,10 +83,10 @@ function QueuesLandingPage() {
               </ModuleLayout.Full>
               <ModulesOnboarding moduleName={ModuleName.QUEUE}>
                 <ModuleLayout.Half>
-                  <LatencyChart referrer={Referrer.QUEUES_LANDING_CHARTS} />
+                  <QueuesLandingLatencyChartWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Half>
-                  <ThroughputChart referrer={Referrer.QUEUES_LANDING_CHARTS} />
+                  <QueuesLandingThroughputChartWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Full>
                   <Flex>

From 9f75f50d3f5b265d0fb90917e1a2e2b854881079 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Tue, 15 Apr 2025 13:46:54 -0500
Subject: [PATCH 2/5] fix name

---
 .../common/components/widgets/cacheMissRateChartWidget.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
index 61cf1b63f39b0d..441e1243b38e4f 100644
--- a/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
+++ b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
@@ -9,7 +9,7 @@ import {SpanFunction} from 'sentry/views/insights/types';
 
 const {CACHE_MISS_RATE} = SpanFunction;
 
-export default function CacheMissRateWidget(props: LoadableChartWidgetProps) {
+export default function CacheMissRateChartWidget(props: LoadableChartWidgetProps) {
   const {isPending, data, error} = useSpanMetricsSeries(
     {
       yAxis: [`${CACHE_MISS_RATE}()`],

From 1688135621eb276cbe799e9284b2d6329d3da93c Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Tue, 15 Apr 2025 14:16:17 -0500
Subject: [PATCH 3/5] pass pageFilters to queues charts

---
 .../views/insights/queues/charts/latencyChart.tsx    |  5 ++++-
 .../views/insights/queues/charts/throughputChart.tsx |  6 +++++-
 .../queries/useProcessQueuesTimeSeriesQuery.tsx      | 12 ++++++++++--
 .../queries/usePublishQueuesTimeSeriesQuery.tsx      | 12 ++++++++++--
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/static/app/views/insights/queues/charts/latencyChart.tsx b/static/app/views/insights/queues/charts/latencyChart.tsx
index 53ae99215a86b3..bd1827d2b421c6 100644
--- a/static/app/views/insights/queues/charts/latencyChart.tsx
+++ b/static/app/views/insights/queues/charts/latencyChart.tsx
@@ -1,6 +1,7 @@
 import cloneDeep from 'lodash/cloneDeep';
 
 import {t} from 'sentry/locale';
+import type {PageFilters} from 'sentry/types/core';
 import {defined} from 'sentry/utils';
 import {InsightsAreaChartWidget} from 'sentry/views/insights/common/components/insightsAreaChartWidget';
 import {useProcessQueuesTimeSeriesQuery} from 'sentry/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery';
@@ -12,9 +13,10 @@ interface Props {
   referrer: Referrer;
   destination?: string;
   error?: Error | null;
+  pageFilters?: PageFilters;
 }
 
-export function LatencyChart({id, error, destination, referrer}: Props) {
+export function LatencyChart({id, error, destination, referrer, pageFilters}: Props) {
   const {
     data,
     isPending,
@@ -22,6 +24,7 @@ export function LatencyChart({id, error, destination, referrer}: Props) {
   } = useProcessQueuesTimeSeriesQuery({
     destination,
     referrer,
+    pageFilters,
   });
 
   const messageReceiveLatencySeries = cloneDeep(
diff --git a/static/app/views/insights/queues/charts/throughputChart.tsx b/static/app/views/insights/queues/charts/throughputChart.tsx
index f7141923e2886e..424886e8afcfff 100644
--- a/static/app/views/insights/queues/charts/throughputChart.tsx
+++ b/static/app/views/insights/queues/charts/throughputChart.tsx
@@ -1,6 +1,7 @@
 import {useTheme} from '@emotion/react';
 
 import {t} from 'sentry/locale';
+import type {PageFilters} from 'sentry/types/core';
 import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget';
 import {renameDiscoverSeries} from 'sentry/views/insights/common/utils/renameDiscoverSeries';
 import {useProcessQueuesTimeSeriesQuery} from 'sentry/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery';
@@ -13,9 +14,10 @@ interface Props {
   referrer: Referrer;
   destination?: string;
   error?: Error | null;
+  pageFilters?: PageFilters;
 }
 
-export function ThroughputChart({id, error, destination, referrer}: Props) {
+export function ThroughputChart({id, error, destination, pageFilters, referrer}: Props) {
   const theme = useTheme();
   const {
     data: publishData,
@@ -24,6 +26,7 @@ export function ThroughputChart({id, error, destination, referrer}: Props) {
   } = usePublishQueuesTimeSeriesQuery({
     destination,
     referrer,
+    pageFilters,
   });
 
   const {
@@ -33,6 +36,7 @@ export function ThroughputChart({id, error, destination, referrer}: Props) {
   } = useProcessQueuesTimeSeriesQuery({
     destination,
     referrer,
+    pageFilters,
   });
 
   return (
diff --git a/static/app/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery.tsx b/static/app/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery.tsx
index f7437f5a1056f0..4557066b3eff31 100644
--- a/static/app/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery.tsx
+++ b/static/app/views/insights/queues/queries/useProcessQueuesTimeSeriesQuery.tsx
@@ -1,3 +1,4 @@
+import type {PageFilters} from 'sentry/types/core';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import type {Referrer} from 'sentry/views/insights/queues/referrers';
@@ -7,6 +8,7 @@ type Props = {
   referrer: Referrer;
   destination?: string;
   enabled?: boolean;
+  pageFilters?: PageFilters;
 };
 
 const yAxis: SpanMetricsProperty[] = [
@@ -15,7 +17,12 @@ const yAxis: SpanMetricsProperty[] = [
   'epm()',
 ];
 
-export function useProcessQueuesTimeSeriesQuery({enabled, destination, referrer}: Props) {
+export function useProcessQueuesTimeSeriesQuery({
+  enabled,
+  destination,
+  referrer,
+  pageFilters,
+}: Props) {
   const search = new MutableSearch('span.op:queue.process');
   if (destination) {
     search.addFilterValue('messaging.destination.name', destination, false);
@@ -28,6 +35,7 @@ export function useProcessQueuesTimeSeriesQuery({enabled, destination, referrer}
       enabled,
       transformAliasToInputFormat: true,
     },
-    referrer
+    referrer,
+    pageFilters
   );
 }
diff --git a/static/app/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery.tsx b/static/app/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery.tsx
index dcbebbb918e35e..3835bda7244261 100644
--- a/static/app/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery.tsx
+++ b/static/app/views/insights/queues/queries/usePublishQueuesTimeSeriesQuery.tsx
@@ -1,3 +1,4 @@
+import type {PageFilters} from 'sentry/types/core';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import type {Referrer} from 'sentry/views/insights/queues/referrers';
@@ -7,11 +8,17 @@ type Props = {
   referrer: Referrer;
   destination?: string;
   enabled?: boolean;
+  pageFilters?: PageFilters;
 };
 
 const yAxis: SpanMetricsProperty[] = ['avg(span.duration)', 'epm()'];
 
-export function usePublishQueuesTimeSeriesQuery({enabled, destination, referrer}: Props) {
+export function usePublishQueuesTimeSeriesQuery({
+  enabled,
+  destination,
+  pageFilters,
+  referrer,
+}: Props) {
   const search = new MutableSearch('span.op:queue.publish');
   if (destination) {
     search.addFilterValue('messaging.destination.name', destination, false);
@@ -24,6 +31,7 @@ export function usePublishQueuesTimeSeriesQuery({enabled, destination, referrer}
       enabled,
       transformAliasToInputFormat: true,
     },
-    referrer
+    referrer,
+    pageFilters
   );
 }

From d5a1d6680d3e7906960e2bac02e88a81125362d1 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Thu, 17 Apr 2025 15:09:48 -0400
Subject: [PATCH 4/5] Add clarifying comment

---
 static/app/views/insights/cache/views/cacheLandingPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/app/views/insights/cache/views/cacheLandingPage.tsx b/static/app/views/insights/cache/views/cacheLandingPage.tsx
index 3a34f0d426e645..fd0a7692102cef 100644
--- a/static/app/views/insights/cache/views/cacheLandingPage.tsx
+++ b/static/app/views/insights/cache/views/cacheLandingPage.tsx
@@ -140,6 +140,7 @@ export function CacheLandingPage() {
   const hasData = useHasFirstSpan(ModuleName.CACHE);
 
   useEffect(() => {
+    // TODO: EAP does not use an indexer, so these metrics indexer errors are not possible. When EAP is fully rolled out, remove this check.
     const hasMissingDataError =
       cacheMissRateError?.message === CACHE_ERROR_MESSAGE ||
       transactionsListError?.message === CACHE_ERROR_MESSAGE;

From c0e2893facce0d9e93c0e54daa3c45d63e25c0e5 Mon Sep 17 00:00:00 2001
From: George Gritsouk <989898+gggritso@users.noreply.github.com>
Date: Thu, 17 Apr 2025 15:15:49 -0400
Subject: [PATCH 5/5] Whitespace

---
 .../common/components/widgets/cacheMissRateChartWidget.tsx       | 1 +
 .../components/widgets/queuesSummaryLatencyChartWidget.tsx       | 1 +
 .../components/widgets/queuesSummaryThroughputChartWidget.tsx    | 1 +
 3 files changed, 3 insertions(+)

diff --git a/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
index 441e1243b38e4f..bcc1ac54c949c4 100644
--- a/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
+++ b/static/app/views/insights/common/components/widgets/cacheMissRateChartWidget.tsx
@@ -19,6 +19,7 @@ export default function CacheMissRateChartWidget(props: LoadableChartWidgetProps
     Referrer.LANDING_CACHE_HIT_MISS_CHART,
     props.pageFilters
   );
+
   return (
     <InsightsLineChartWidget
       {...props}
diff --git a/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
index 1d2cd12109ebe2..ba007652ff1737 100644
--- a/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
+++ b/static/app/views/insights/common/components/widgets/queuesSummaryLatencyChartWidget.tsx
@@ -10,6 +10,7 @@ export default function QueuesSummaryLatencyChartWidget(props: LoadableChartWidg
       destination: decodeScalar,
     },
   });
+
   return (
     <LatencyChart
       {...props}
diff --git a/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx
index b3a9e1539e92a6..cf1efc95b8d67e 100644
--- a/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx
+++ b/static/app/views/insights/common/components/widgets/queuesSummaryThroughputChartWidget.tsx
@@ -12,6 +12,7 @@ export default function QueuesSummaryThroughputChartWidget(
       destination: decodeScalar,
     },
   });
+
   return (
     <ThroughputChart
       {...props}