ref(insights): Refactor cacheLandingPage widgets

Part of #88560

Author: billyvg

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 CacheMissRateWidget from 'sentry/views/insights/common/components/widgets/cacheMissRateWidget';
+import CacheThroughputWidget from 'sentry/views/insights/common/components/widgets/cacheThroughputWidget';
 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}
-                  />
+                  <CacheMissRateWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Half>
-                  <InsightsLineChartWidget
-                    title={getThroughputChartTitle('cache.get_item')}
-                    series={[throughputData['epm()']]}
-                    isLoading={isThroughputDataLoading}
-                    error={throughputError}
-                  />
+                  <CacheThroughputWidget />
                 </ModuleLayout.Half>
                 <ModuleLayout.Full>
                   <TransactionsTable

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

@@ -0,0 +1,33 @@
+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 {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() {
+  const {
+    isPending: isCacheMissRateLoading,
+    data: cacheMissRateData,
+    error: cacheMissRateError,
+  } = useSpanMetricsSeries(
+    {
+      yAxis: [`${CACHE_MISS_RATE}()`],
+      search: MutableSearch.fromQueryObject(BASE_FILTERS),
+      transformAliasToInputFormat: true,
+    },
+    Referrer.LANDING_CACHE_HIT_MISS_CHART
+  );
+  return (
+    <InsightsLineChartWidget
+      id="cacheMissRateWidget"
+      title={DataTitles[`cache_miss_rate()`]}
+      series={[cacheMissRateData[`${CACHE_MISS_RATE}()`]]}
+      isLoading={isCacheMissRateLoading}
+      error={cacheMissRateError}
+    />
+  );
+}

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

@@ -0,0 +1,31 @@
+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 {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
+import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types';
+
+export default function CacheThroughputWidget() {
+  const {
+    isPending: isThroughputDataLoading,
+    data: throughputData,
+    error: throughputError,
+  } = useSpanMetricsSeries(
+    {
+      search: MutableSearch.fromQueryObject(BASE_FILTERS),
+      yAxis: ['epm()'],
+      transformAliasToInputFormat: true,
+    },
+    Referrer.LANDING_CACHE_THROUGHPUT_CHART
+  );
+
+  return (
+    <InsightsLineChartWidget
+      id="cacheThroughputWidget"
+      title={getThroughputChartTitle('cache.get_item')}
+      series={[throughputData['epm()']]}
+      isLoading={isThroughputDataLoading}
+      error={throughputError}
+    />
+  );
+}