fix(laravel-insights): Fix requests chart query

getsentry · Mar 5, 2025 · 5fc06b5 · 5fc06b5
1 parent 6539af9
commit 5fc06b5
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 25 deletions.
diff --git a/static/app/components/charts/utils.tsx b/static/app/components/charts/utils.tsx
@@ -118,7 +118,14 @@ export class GranularityLadder {
   }
 }
 
-export type Fidelity = 'high' | 'medium' | 'low' | 'metrics' | 'issues' | 'spans';
+export type Fidelity =
+  | 'high'
+  | 'medium'
+  | 'low'
+  | 'metrics'
+  | 'issues'
+  | 'spans'
+  | 'spans-low';
 
 export function getInterval(datetimeObj: DateTimeObject, fidelity: Fidelity = 'medium') {
   const diffInMinutes = getDiffInMinutes(datetimeObj);
@@ -130,6 +137,7 @@ export function getInterval(datetimeObj: DateTimeObject, fidelity: Fidelity = 'm
     metrics: metricsFidelityLadder,
     issues: issuesFidelityLadder,
     spans: spansFidelityLadder,
+    'spans-low': spansLowFidelityLadder,
   }[fidelity].getInterval(diffInMinutes);
 }
 
@@ -192,6 +200,17 @@ const spansFidelityLadder = new GranularityLadder([
   [0, '1m'],
 ]);
 
+const spansLowFidelityLadder = new GranularityLadder([
+  [THIRTY_DAYS, '1d'],
+  [TWO_WEEKS, '12h'],
+  [ONE_WEEK, '4h'],
+  [FORTY_EIGHT_HOURS, '2h'],
+  [TWENTY_FOUR_HOURS, '1h'],
+  [SIX_HOURS, '30m'],
+  [ONE_HOUR, '10m'],
+  [0, '5m'],
+]);
+
 /**
  * Duplicate of getInterval, except that we do not support <1h granularity
  * Used by OrgStatsV2 API

diff --git a/static/app/views/insights/pages/backend/laravelOverviewPage.tsx b/static/app/views/insights/pages/backend/laravelOverviewPage.tsx
@@ -29,7 +29,11 @@ import {URL_PARAM} from 'sentry/constants/pageFilters';
 import {IconArrow, IconUser} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {MultiSeriesEventsStats, Organization} from 'sentry/types/organization';
+import type {
+  EventsStats,
+  MultiSeriesEventsStats,
+  Organization,
+} from 'sentry/types/organization';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import getDuration from 'sentry/utils/duration/getDuration';
 import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
@@ -389,7 +393,7 @@ function usePageFilterChartParams({
 
 function RequestsWidget({query}: {query?: string}) {
   const organization = useOrganization();
-  const pageFilterChartParams = usePageFilterChartParams();
+  const pageFilterChartParams = usePageFilterChartParams({granularity: 'spans-low'});
   const theme = useTheme();
 
   const {data, isLoading, error} = useApiQuery<MultiSeriesEventsStats>(
@@ -399,7 +403,7 @@ function RequestsWidget({query}: {query?: string}) {
         query: {
           ...pageFilterChartParams,
           dataset: 'spans',
-          field: ['http.status_code', 'count(span.duration)'],
+          field: ['trace.status', 'count(span.duration)'],
           yAxis: 'count(span.duration)',
           orderby: '-count(span.duration)',
           partial: 1,
@@ -412,49 +416,59 @@ function RequestsWidget({query}: {query?: string}) {
     {staleTime: 0}
   );
 
-  const getTimeSeries = useCallback(
-    (codePrefix: string, color?: string): DiscoverSeries | undefined => {
-      if (!data) {
-        return undefined;
-      }
-
-      const filteredSeries = Object.keys(data)
-        .filter(key => key.startsWith(codePrefix))
-        .map(key => data[key]!);
-
-      const firstSeries = filteredSeries[0];
+  const combineTimeSeries = useCallback(
+    (
+      seriesData: EventsStats[],
+      color: string,
+      fieldName: string
+    ): DiscoverSeries | undefined => {
+      const firstSeries = seriesData[0];
       if (!firstSeries) {
         return undefined;
       }
 
-      const field = `${codePrefix}xx`;
-
       return {
         data: firstSeries.data.map(([time], index) => ({
           name: new Date(time * 1000).toISOString(),
-          value: filteredSeries.reduce(
+          value: seriesData.reduce(
             (acc, series) => acc + series.data[index]?.[1][0]?.count!,
             0
           ),
         })),
-        seriesName: `${codePrefix}xx`,
+        seriesName: fieldName,
         meta: {
           fields: {
-            [field]: 'integer',
+            [fieldName]: 'integer',
           },
           units: {},
         },
         color,
       } satisfies DiscoverSeries;
     },
-    [data]
+    []
   );
 
   const timeSeries = useMemo(() => {
-    return [getTimeSeries('2', theme.gray200), getTimeSeries('5', theme.error)].filter(
-      series => !!series
-    );
-  }, [getTimeSeries, theme.error, theme.gray200]);
+    return [
+      combineTimeSeries(
+        [data?.ok].filter(series => !!series),
+        theme.gray200,
+        '2xx'
+      ),
+      combineTimeSeries(
+        [data?.invalid_argument, data?.internal_error].filter(series => !!series),
+        theme.error,
+        '5xx'
+      ),
+    ].filter(series => !!series);
+  }, [
+    combineTimeSeries,
+    data?.internal_error,
+    data?.invalid_argument,
+    data?.ok,
+    theme.error,
+    theme.gray200,
+  ]);
 
   return (
     <InsightsBarChartWidget