feat(platform-insights): Make remaining widgets loadable (#92184)

Make the job, cache hit and slow queries widget loadable in the releases
drawer.
For caches and queries, we hide the custom legend underneath as we do
not have enough vertical space.


-closes [TET-379: Make widgets re-usable in releases
drawer](https://linear.app/getsentry/issue/TET-379/make-widgets-re-usable-in-releases-drawer)

Author: ArthurKnaus

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

@@ -152,6 +152,29 @@ jest.mock(
     })),
   })
 );
+jest.mock('sentry/views/insights/common/queries/useDiscover', () => ({
+  useEAPSpans: jest.fn(() => ({
+    data: [
+      {
+        'avg(span.duration)': 123,
+        'sum(span.duration)': 456,
+        'span.group': 'abc123',
+        'span.description': 'span1',
+        'sentry.normalized_description': 'span1',
+        transaction: 'transaction_a',
+      },
+    ],
+    isPending: false,
+    error: null,
+  })),
+}));
+jest.mock('sentry/views/insights/common/queries/useTopNDiscoverSeries', () => ({
+  useTopNSpanEAPSeries: jest.fn(() => ({
+    data: [mockDiscoverSeries('transaction_a,abc123')],
+    isPending: false,
+    error: null,
+  })),
+}));
 jest.mock('sentry/views/insights/common/queries/useDiscoverSeries', () => ({
   useEAPSeries: jest.fn(() => ({
     data: {

static/app/components/charts/chartWidgetLoader.tsx

@@ -155,23 +155,33 @@ const CHART_MAP = {
     import(
       'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget'
     ),
+  overviewAgentsRunsChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewAgentsRunsChartWidget'
+    ),
+  overviewAgentsDurationChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewAgentsDurationChartWidget'
+    ),
   overviewApiLatencyChartWidget: () =>
     import(
       'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget'
     ),
+  overviewCacheMissChartWidget: () =>
+    import(
+      'sentry/views/insights/common/components/widgets/overviewCacheMissChartWidget'
+    ),
+  overviewJobsChartWidget: () =>
+    import('sentry/views/insights/common/components/widgets/overviewJobsChartWidget'),
   overviewPageloadsChartWidget: () =>
     import(
       'sentry/views/insights/common/components/widgets/overviewPageloadsChartWidget'
     ),
   overviewRequestsChartWidget: () =>
     import('sentry/views/insights/common/components/widgets/overviewRequestsChartWidget'),
-  overviewAgentsRunsChartWidget: () =>
-    import(
-      'sentry/views/insights/common/components/widgets/overviewAgentsRunsChartWidget'
-    ),
-  overviewAgentsDurationChartWidget: () =>
+  overviewSlowQueriesChartWidget: () =>
     import(
-      'sentry/views/insights/common/components/widgets/overviewAgentsDurationChartWidget'
+      'sentry/views/insights/common/components/widgets/overviewSlowQueriesChartWidget'
     ),
 } satisfies Record<string, () => Promise<{default: React.FC<LoadableChartWidgetProps>}>>;
 

static/app/views/insights/pages/platform/laravel/cachesWidget.tsx renamed to static/app/views/insights/common/components/widgets/overviewCacheMissChartWidget.tsx

@@ -11,6 +11,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {Line} from 'sentry/views/dashboards/widgets/timeSeriesWidget/plottables/line';
 import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization';
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useTopNSpanEAPSeries} from 'sentry/views/insights/common/queries/useTopNDiscoverSeries';
 import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
@@ -31,19 +32,21 @@ import {HighestCacheMissRateTransactionsWidgetEmptyStateWarning} from 'sentry/vi
 function isColumnNotFoundError(error: QueryError | null) {
   return error?.message === 'Column cache.hit was not found in metrics indexer';
 }
-export function CachesWidget() {
+
+export default function OverviewCacheMissChartWidget(props: LoadableChartWidgetProps) {
   const theme = useTheme();
   const organization = useOrganization();
   const {query} = useTransactionNameQuery();
-  const releaseBubbleProps = useReleaseBubbleProps();
-  const pageFilterChartParams = usePageFilterChartParams();
+  const releaseBubbleProps = useReleaseBubbleProps(props);
+  const pageFilterChartParams = usePageFilterChartParams(props);
 
   const cachesRequest = useEAPSpans(
     {
       fields: ['transaction', 'project.id', 'cache_miss_rate()', 'count()'],
       sorts: [{field: 'cache_miss_rate()', kind: 'desc'}],
       search: `span.op:[cache.get_item,cache.get] has:span.group ${query}`,
       limit: 4,
+      pageFilters: props.pageFilters,
     },
     Referrer.CACHE_CHART
   );
@@ -64,7 +67,8 @@ export function CachesWidget() {
       topN: 4,
       enabled: !!cachesRequest.data,
     },
-    Referrer.CACHE_CHART
+    Referrer.CACHE_CHART,
+    props.pageFilters
   );
 
   const timeSeries = timeSeriesRequest.data.filter(ts => ts.seriesName !== 'Other');
@@ -92,11 +96,13 @@ export function CachesWidget() {
       emptyMessage={<HighestCacheMissRateTransactionsWidgetEmptyStateWarning />}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
-        showLegend: 'never',
+        id: 'overviewCacheMissChartWidget',
+        showLegend: props.loaderSource === 'releases-drawer' ? 'auto' : 'never',
         plottables: timeSeries.map(
           (ts, index) =>
             new Line(convertSeriesToTimeseries(ts), {color: colorPalette[index]})
         ),
+        ...props,
         ...releaseBubbleProps,
       }}
     />
@@ -145,6 +151,7 @@ export function CachesWidget() {
       Actions={
         hasData && (
           <Toolbar
+            loaderSource={props.loaderSource}
             onOpenFullScreen={() => {
               openInsightChartModal({
                 title: t('Cache Miss Rates'),
@@ -160,7 +167,7 @@ export function CachesWidget() {
         )
       }
       noFooterPadding
-      Footer={footer}
+      Footer={props.loaderSource === 'releases-drawer' ? undefined : footer}
     />
   );
 }

static/app/views/insights/pages/platform/laravel/jobsWidget.tsx renamed to static/app/views/insights/common/components/widgets/overviewJobsChartWidget.tsx

@@ -11,6 +11,7 @@ import {TimeSeriesWidgetVisualization} from 'sentry/views/dashboards/widgets/tim
 import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useEAPSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
 import {Referrer} from 'sentry/views/insights/pages/platform/laravel/referrers';
@@ -27,12 +28,13 @@ import {Toolbar} from 'sentry/views/insights/pages/platform/shared/toolbar';
 import {useTransactionNameQuery} from 'sentry/views/insights/pages/platform/shared/useTransactionNameQuery';
 import {QueuesWidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList';
 
-export function JobsWidget() {
+export default function OverviewJobsChartWidget(props: LoadableChartWidgetProps) {
   const organization = useOrganization();
   const {query} = useTransactionNameQuery();
-  const releaseBubbleProps = useReleaseBubbleProps();
+  const releaseBubbleProps = useReleaseBubbleProps(props);
   const pageFilterChartParams = usePageFilterChartParams({
     granularity: 'spans-low',
+    ...props.pageFilters,
   });
   const theme = useTheme();
 
@@ -45,7 +47,8 @@ export function JobsWidget() {
       yAxis: ['trace_status_rate(internal_error)', 'count(span.duration)'],
       referrer: Referrer.JOBS_CHART,
     },
-    Referrer.JOBS_CHART
+    Referrer.JOBS_CHART,
+    props.pageFilters
   );
 
   const plottables = useMemo(() => {
@@ -78,8 +81,10 @@ export function JobsWidget() {
       emptyMessage={<QueuesWidgetEmptyStateWarning />}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
+        id: 'overviewJobsChartWidget',
         showLegend: 'never',
         plottables,
+        ...props,
         ...releaseBubbleProps,
       }}
     />
@@ -148,6 +153,7 @@ export function JobsWidget() {
               sort: '-count(span.duration)',
               interval: pageFilterChartParams.interval,
             }}
+            loaderSource={props.loaderSource}
             onOpenFullScreen={() => {
               openInsightChartModal({
                 title: t('Jobs'),

static/app/views/insights/pages/platform/laravel/queriesWidget.tsx renamed to static/app/views/insights/common/components/widgets/overviewSlowQueriesChartWidget.tsx

@@ -12,6 +12,7 @@ import {Widget} from 'sentry/views/dashboards/widgets/widget/widget';
 import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode';
 import {ChartType} from 'sentry/views/insights/common/components/chart';
 import {SpanDescriptionCell} from 'sentry/views/insights/common/components/tableCells/spanDescriptionCell';
+import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useTopNSpanEAPSeries} from 'sentry/views/insights/common/queries/useTopNDiscoverSeries';
 import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries';
@@ -34,12 +35,12 @@ function getSeriesName(item: {'span.group': string; transaction: string}) {
   return `${item.transaction},${item['span.group']}`;
 }
 
-export function QueriesWidget() {
+export default function OverviewSlowQueriesChartWidget(props: LoadableChartWidgetProps) {
   const theme = useTheme();
   const organization = useOrganization();
   const {query} = useTransactionNameQuery();
-  const releaseBubbleProps = useReleaseBubbleProps();
-  const pageFilterChartParams = usePageFilterChartParams();
+  const releaseBubbleProps = useReleaseBubbleProps(props);
+  const pageFilterChartParams = usePageFilterChartParams(props);
 
   const fullQuery = `has:db.system has:span.group ${query}`;
 
@@ -56,6 +57,7 @@ export function QueriesWidget() {
       sorts: [{field: 'avg(span.duration)', kind: 'desc'}],
       search: fullQuery,
       limit: 3,
+      pageFilters: props.pageFilters,
     },
     Referrer.QUERIES_CHART
   );
@@ -70,7 +72,8 @@ export function QueriesWidget() {
       topN: 3,
       enabled: !!queriesRequest.data,
     },
-    Referrer.QUERIES_CHART
+    Referrer.QUERIES_CHART,
+    props.pageFilters
   );
 
   const timeSeries = timeSeriesRequest.data.filter(ts => ts.seriesName !== 'Other');
@@ -98,14 +101,16 @@ export function QueriesWidget() {
       emptyMessage={<TimeSpentInDatabaseWidgetEmptyStateWarning />}
       VisualizationType={TimeSeriesWidgetVisualization}
       visualizationProps={{
-        showLegend: 'never',
+        id: 'overviewSlowQueriesChartWidget',
+        showLegend: props.loaderSource === 'releases-drawer' ? 'auto' : 'never',
         plottables: timeSeries.map(
           (ts, index) =>
             new Line(convertSeriesToTimeseries(ts), {
               color: colorPalette[index],
               alias: aliases[ts.seriesName],
             })
         ),
+        ...props,
         ...releaseBubbleProps,
       }}
     />
@@ -157,6 +162,7 @@ export function QueriesWidget() {
               query: fullQuery,
               interval: pageFilterChartParams.interval,
             }}
+            loaderSource={props.loaderSource}
             onOpenFullScreen={() => {
               openInsightChartModal({
                 title: t('Slow Queries'),
@@ -172,7 +178,7 @@ export function QueriesWidget() {
         )
       }
       noFooterPadding
-      Footer={footer}
+      Footer={props.loaderSource === 'releases-drawer' ? undefined : footer}
     />
   );
 }

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

@@ -67,9 +67,15 @@ export const useTopNSpanEAPSeries = <
     | string[],
 >(
   options: UseMetricsSeriesOptions<Fields>,
-  referrer: string
+  referrer: string,
+  pageFilters?: PageFilters
 ) => {
-  return useTopNDiscoverSeries<Fields>(options, DiscoverDatasets.SPANS_EAP_RPC, referrer);
+  return useTopNDiscoverSeries<Fields>(
+    options,
+    DiscoverDatasets.SPANS_EAP_RPC,
+    referrer,
+    pageFilters
+  );
 };
 
 const useTopNDiscoverSeries = <T extends string[]>(

static/app/views/insights/pages/backend/backendOverviewPage.tsx

@@ -25,7 +25,10 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {STARRED_SEGMENT_TABLE_QUERY_KEY} from 'sentry/views/insights/common/components/tableCells/starredSegmentCell';
 import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
+import OverviewCacheMissChartWidget from 'sentry/views/insights/common/components/widgets/overviewCacheMissChartWidget';
+import OverviewJobsChartWidget from 'sentry/views/insights/common/components/widgets/overviewJobsChartWidget';
 import OverviewRequestsChartWidget from 'sentry/views/insights/common/components/widgets/overviewRequestsChartWidget';
+import OverviewSlowQueriesChartWidget from 'sentry/views/insights/common/components/widgets/overviewSlowQueriesChartWidget';
 import {useEAPSpans} from 'sentry/views/insights/common/queries/useDiscover';
 import {useOnboardingProject} from 'sentry/views/insights/common/queries/useOnboardingProject';
 import {useInsightsEap} from 'sentry/views/insights/common/utils/useEap';
@@ -47,10 +50,7 @@ import {DomainOverviewPageProviders} from 'sentry/views/insights/pages/domainOve
 import {OVERVIEW_PAGE_ALLOWED_OPS as FRONTEND_OVERVIEW_PAGE_OPS} from 'sentry/views/insights/pages/frontend/settings';
 import {OVERVIEW_PAGE_ALLOWED_OPS as BACKEND_OVERVIEW_PAGE_OPS} from 'sentry/views/insights/pages/mobile/settings';
 import {LaravelOverviewPage} from 'sentry/views/insights/pages/platform/laravel';
-import {CachesWidget} from 'sentry/views/insights/pages/platform/laravel/cachesWidget';
 import {useIsLaravelInsightsAvailable} from 'sentry/views/insights/pages/platform/laravel/features';
-import {JobsWidget} from 'sentry/views/insights/pages/platform/laravel/jobsWidget';
-import {QueriesWidget} from 'sentry/views/insights/pages/platform/laravel/queriesWidget';
 import {NextJsOverviewPage} from 'sentry/views/insights/pages/platform/nextjs';
 import {
   useIsNextJsInsightsAvailable,
@@ -247,13 +247,13 @@ function EAPBackendOverviewPage() {
                 <ModuleLayout.Full>
                   <TripleRowWidgetWrapper>
                     <ModuleLayout.Third>
-                      <JobsWidget />
+                      <OverviewJobsChartWidget />
                     </ModuleLayout.Third>
                     <ModuleLayout.Third>
-                      <QueriesWidget />
+                      <OverviewSlowQueriesChartWidget />
                     </ModuleLayout.Third>
                     <ModuleLayout.Third>
-                      <CachesWidget />
+                      <OverviewCacheMissChartWidget />
                     </ModuleLayout.Third>
                   </TripleRowWidgetWrapper>
                 </ModuleLayout.Full>

static/app/views/insights/pages/platform/laravel/index.tsx

@@ -3,10 +3,10 @@ import {useEffect} from 'react';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useOrganization from 'sentry/utils/useOrganization';
 import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget';
+import OverviewCacheMissChartWidget from 'sentry/views/insights/common/components/widgets/overviewCacheMissChartWidget';
+import OverviewJobsChartWidget from 'sentry/views/insights/common/components/widgets/overviewJobsChartWidget';
 import OverviewRequestsChartWidget from 'sentry/views/insights/common/components/widgets/overviewRequestsChartWidget';
-import {CachesWidget} from 'sentry/views/insights/pages/platform/laravel/cachesWidget';
-import {JobsWidget} from 'sentry/views/insights/pages/platform/laravel/jobsWidget';
-import {QueriesWidget} from 'sentry/views/insights/pages/platform/laravel/queriesWidget';
+import OverviewSlowQueriesChartWidget from 'sentry/views/insights/common/components/widgets/overviewSlowQueriesChartWidget';
 import {IssuesWidget} from 'sentry/views/insights/pages/platform/shared/issuesWidget';
 import {PlatformLandingPageLayout} from 'sentry/views/insights/pages/platform/shared/layout';
 import {PathsTable} from 'sentry/views/insights/pages/platform/shared/pathsTable';
@@ -35,13 +35,13 @@ export function LaravelOverviewPage() {
           <IssuesWidget />
         </WidgetGrid.Position3>
         <WidgetGrid.Position4>
-          <JobsWidget />
+          <OverviewJobsChartWidget />
         </WidgetGrid.Position4>
         <WidgetGrid.Position5>
-          <QueriesWidget />
+          <OverviewSlowQueriesChartWidget />
         </WidgetGrid.Position5>
         <WidgetGrid.Position6>
-          <CachesWidget />
+          <OverviewCacheMissChartWidget />
         </WidgetGrid.Position6>
       </WidgetGrid>
       <PathsTable />