feat(aci): Add chart zoom to metric detector details (#97653)

Removes page filters from the metric detectors page since the available
time periods are dictated by the interval chosen in the metric detector.

Updates the chart/hooks to use start and end query parameters if
available

Author: scttcper

static/app/components/charts/useChartZoom.tsx

@@ -162,9 +162,9 @@ export function useChartZoom({
       if (usePageDate) {
         const newQuery = {
           ...location.query,
-          pageStart: startFormatted,
-          pageEnd: endFormatted,
-          pageStatsPeriod: newPeriod.period ?? undefined,
+          start: startFormatted,
+          end: endFormatted,
+          statsPeriod: newPeriod.period ?? undefined,
         };
 
         // Only push new location if query params has changed because this will cause a heavy re-render

static/app/views/detectors/components/details/index.tsx

@@ -1,3 +1,4 @@
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import type {Project} from 'sentry/types/project';
 import type {Detector} from 'sentry/types/workflowEngine/detectors';
 import {unreachable} from 'sentry/utils/unreachable';
@@ -16,15 +17,32 @@ export function DetectorDetailsContent({detector, project}: DetectorDetailsConte
   const detectorType = detector.type;
   switch (detectorType) {
     case 'metric_issue':
+      // Metric issue detectors do not support time period filters since the interval dictates what time periods are available.
       return <MetricDetectorDetails detector={detector} project={project} />;
     case 'uptime_domain_failure':
-      return <UptimeDetectorDetails detector={detector} project={project} />;
+      return (
+        <PageFiltersContainer>
+          <UptimeDetectorDetails detector={detector} project={project} />
+        </PageFiltersContainer>
+      );
     case 'error':
-      return <ErrorDetectorDetails detector={detector} project={project} />;
+      return (
+        <PageFiltersContainer>
+          <ErrorDetectorDetails detector={detector} project={project} />
+        </PageFiltersContainer>
+      );
     case 'uptime_subscription':
-      return <CronDetectorDetails detector={detector} project={project} />;
+      return (
+        <PageFiltersContainer>
+          <CronDetectorDetails detector={detector} project={project} />
+        </PageFiltersContainer>
+      );
     default:
       unreachable(detectorType);
-      return <FallbackDetectorDetails detector={detector} project={project} />;
+      return (
+        <PageFiltersContainer>
+          <FallbackDetectorDetails detector={detector} project={project} />
+        </PageFiltersContainer>
+      );
   }
 }

static/app/views/detectors/components/details/metric/chart.tsx

@@ -4,35 +4,39 @@ import type {YAXisComponentOption} from 'echarts';
 
 import {AreaChart} from 'sentry/components/charts/areaChart';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
+import {useChartZoom} from 'sentry/components/charts/useChartZoom';
 import {Flex} from 'sentry/components/core/layout';
 import Placeholder from 'sentry/components/placeholder';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {MetricDetector, SnubaQuery} from 'sentry/types/workflowEngine/detectors';
-import type {TimePeriod} from 'sentry/views/alerts/rules/metric/types';
+import {useLocation} from 'sentry/utils/useLocation';
 import {getDetectorDataset} from 'sentry/views/detectors/components/forms/metric/metricFormData';
 import {useIncidentMarkers} from 'sentry/views/detectors/hooks/useIncidentMarkers';
 import {useMetricDetectorSeries} from 'sentry/views/detectors/hooks/useMetricDetectorSeries';
 import {useMetricDetectorThresholdSeries} from 'sentry/views/detectors/hooks/useMetricDetectorThresholdSeries';
 
 interface MetricDetectorDetailsChartProps {
   detector: MetricDetector;
-  statsPeriod: TimePeriod;
 }
 const CHART_HEIGHT = 180;
 
 interface MetricDetectorChartProps {
   detector: MetricDetector;
   snubaQuery: SnubaQuery;
   /**
-   * The time period for the chart data (optional, defaults to 7d)
+   * Relative time period (e.g., '7d'). Use either statsPeriod or absolute start/end.
    */
-  statsPeriod: TimePeriod;
+  end?: string;
+  start?: string;
+  statsPeriod?: string;
 }
 
 function MetricDetectorChart({
   statsPeriod,
+  start,
+  end,
   snubaQuery,
   detector,
 }: MetricDetectorChartProps) {
@@ -47,8 +51,10 @@ function MetricDetectorChart({
     query: snubaQuery.query,
     environment: snubaQuery.environment,
     projectId: detector.projectId,
-    statsPeriod,
     comparisonDelta,
+    statsPeriod,
+    start,
+    end,
   });
 
   const {maxValue: thresholdMaxValue, additionalSeries: thresholdAdditionalSeries} =
@@ -58,7 +64,7 @@ function MetricDetectorChart({
       comparisonSeries,
     });
 
-  // TODO: Fetch open periodos and transform them into the right format
+  // TODO: Fetch open periods and transform them into the right format
   const openPeriods: any[] = [];
   const openPeriodMarkerResult = useIncidentMarkers({
     incidents: openPeriods,
@@ -67,6 +73,10 @@ function MetricDetectorChart({
     yAxisIndex: 1, // Use index 1 to avoid conflict with main chart axis
   });
 
+  const chartZoomProps = useChartZoom({
+    usePageDate: true,
+  });
+
   // Calculate y-axis bounds to ensure all thresholds are visible
   const maxValue = useMemo(() => {
     // Get max from series data
@@ -153,7 +163,6 @@ function MetricDetectorChart({
 
   return (
     <AreaChart
-      isGroupedByDate
       showTimeInTooltip
       height={CHART_HEIGHT}
       stacked={false}
@@ -164,16 +173,20 @@ function MetricDetectorChart({
       grid={grid}
       xAxis={openPeriodMarkerResult.incidentMarkerXAxis}
       ref={openPeriodMarkerResult.connectIncidentMarkerChartRef}
+      {...chartZoomProps}
     />
   );
 }
 
-export function MetricDetectorDetailsChart({
-  detector,
-  statsPeriod,
-}: MetricDetectorDetailsChartProps) {
+export function MetricDetectorDetailsChart({detector}: MetricDetectorDetailsChartProps) {
   const dataSource = detector.dataSources[0];
   const snubaQuery = dataSource.queryObj?.snubaQuery;
+  const location = useLocation();
+  const statsPeriod = location.query?.statsPeriod as string | undefined;
+  const start = location.query?.start as string | undefined;
+  const end = location.query?.end as string | undefined;
+  const dateParams =
+    start && end ? {start, end} : statsPeriod ? {statsPeriod} : {statsPeriod: '7d'};
 
   if (!snubaQuery) {
     // Unlikely, helps narrow types
@@ -187,7 +200,7 @@ export function MetricDetectorDetailsChart({
           detector={detector}
           // Pass snubaQuery separately to avoid checking null in all places
           snubaQuery={snubaQuery}
-          statsPeriod={statsPeriod}
+          {...dateParams}
         />
       </ChartContainerBody>
     </ChartContainer>

static/app/views/detectors/components/details/metric/index.tsx

@@ -1,4 +1,3 @@
-import {CompactSelect} from 'sentry/components/core/compactSelect';
 import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
 import type {Project} from 'sentry/types/project';
 import type {MetricDetector} from 'sentry/types/workflowEngine/detectors';
@@ -8,7 +7,7 @@ import {DetectorDetailsHeader} from 'sentry/views/detectors/components/details/c
 import {DetectorDetailsOngoingIssues} from 'sentry/views/detectors/components/details/common/ongoingIssues';
 import {MetricDetectorDetailsChart} from 'sentry/views/detectors/components/details/metric/chart';
 import {MetricDetectorDetailsSidebar} from 'sentry/views/detectors/components/details/metric/sidebar';
-import {useTimePeriodSelection} from 'sentry/views/detectors/hooks/useTimePeriodSelection';
+import {MetricTimePeriodSelect} from 'sentry/views/detectors/components/details/metric/timePeriodSelect';
 
 type MetricDetectorDetailsProps = {
   detector: MetricDetector;
@@ -19,31 +18,17 @@ export function MetricDetectorDetails({detector, project}: MetricDetectorDetails
   const dataSource = detector.dataSources[0];
   const snubaQuery = dataSource.queryObj?.snubaQuery;
 
-  const {selectedTimePeriod, setSelectedTimePeriod, timePeriodOptions} =
-    useTimePeriodSelection({
-      dataset: snubaQuery?.dataset ?? Dataset.ERRORS,
-      interval: snubaQuery?.timeWindow,
-    });
+  const dataset = snubaQuery?.dataset ?? Dataset.ERRORS;
+  const interval = snubaQuery?.timeWindow;
 
   return (
     <DetailLayout>
       <DetectorDetailsHeader detector={detector} project={project} />
       <DetailLayout.Body>
         <DetailLayout.Main>
-          <CompactSelect
-            size="sm"
-            options={timePeriodOptions}
-            value={selectedTimePeriod}
-            onChange={opt => setSelectedTimePeriod(opt.value)}
-          />
-          <MetricDetectorDetailsChart
-            detector={detector}
-            statsPeriod={selectedTimePeriod}
-          />
-          <DetectorDetailsOngoingIssues
-            detectorId={detector.id}
-            query={{statsPeriod: selectedTimePeriod}}
-          />
+          <MetricTimePeriodSelect dataset={dataset} interval={interval} />
+          <MetricDetectorDetailsChart detector={detector} />
+          <DetectorDetailsOngoingIssues detectorId={detector.id} />
           <DetectorDetailsAutomations detector={detector} />
         </DetailLayout.Main>
         <DetailLayout.Sidebar>

static/app/views/detectors/components/details/metric/timePeriodSelect.spec.tsx

@@ -0,0 +1,28 @@
+import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
+
+import {Dataset} from 'sentry/views/alerts/rules/metric/types';
+import {MetricTimePeriodSelect} from 'sentry/views/detectors/components/details/metric/timePeriodSelect';
+
+describe('MetricTimePeriodSelect', () => {
+  it('navigates by updating statsPeriod in the query when selecting an option', async () => {
+    const {router} = render(
+      <MetricTimePeriodSelect dataset={Dataset.ERRORS} interval={300} />
+    );
+
+    // Opens the select and chooses a different period
+    await userEvent.click(
+      // Default selected should be Last 7 days for this interval/dataset
+      screen.getByRole('button', {name: /last 7 days/i})
+    );
+
+    await userEvent.click(screen.getByText(/last 14 days/i));
+
+    await waitFor(() => {
+      expect(router.location.query.statsPeriod).toBe('14d');
+    });
+
+    // Ensure absolute range is cleared
+    expect(router.location.query.start).toBeUndefined();
+    expect(router.location.query.end).toBeUndefined();
+  });
+});

static/app/views/detectors/components/details/metric/timePeriodSelect.tsx

@@ -0,0 +1,106 @@
+import {Fragment, useMemo} from 'react';
+import moment from 'moment-timezone';
+
+import {CompactSelect} from 'sentry/components/core/compactSelect';
+import {DateTime} from 'sentry/components/dateTime';
+import {t} from 'sentry/locale';
+import {useLocation} from 'sentry/utils/useLocation';
+import {useNavigate} from 'sentry/utils/useNavigate';
+import {Dataset, TimePeriod, TimeWindow} from 'sentry/views/alerts/rules/metric/types';
+import {getTimePeriodOptions} from 'sentry/views/alerts/utils/timePeriods';
+
+type BaseOption = {label: React.ReactNode; value: TimePeriod};
+
+const CUSTOM_TIME_VALUE = '__custom_time__';
+
+interface TimePeriodSelectProps {
+  dataset: Dataset;
+  interval: number | undefined;
+}
+
+export function MetricTimePeriodSelect({dataset, interval}: TimePeriodSelectProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const start = location.query?.start as string | undefined;
+  const end = location.query?.end as string | undefined;
+
+  const hasCustomRange = Boolean(start && end);
+
+  function mapIntervalToTimeWindow(intervalSeconds: number): TimeWindow | undefined {
+    const intervalMinutes = Math.floor(intervalSeconds / 60);
+    if (Object.values(TimeWindow).includes(intervalMinutes as TimeWindow)) {
+      return intervalMinutes as TimeWindow;
+    }
+    return undefined;
+  }
+
+  const options: BaseOption[] = useMemo(() => {
+    if (!dataset || !interval) {
+      return [];
+    }
+    const timeWindow = mapIntervalToTimeWindow(interval);
+    if (!timeWindow) {
+      return [];
+    }
+    return getTimePeriodOptions({dataset, timeWindow});
+  }, [dataset, interval]);
+
+  // Determine selected period from query or fallback (prefer statsPeriod, else default 7d, else largest)
+  const selected: TimePeriod = useMemo(() => {
+    const urlStatsPeriod = location.query?.statsPeriod as string | undefined;
+    const optionValues = new Set(options.map(o => o.value));
+    if (urlStatsPeriod && optionValues.has(urlStatsPeriod as TimePeriod)) {
+      return urlStatsPeriod as TimePeriod;
+    }
+    if (optionValues.has(TimePeriod.SEVEN_DAYS)) {
+      return TimePeriod.SEVEN_DAYS;
+    }
+    const largestOption = options[options.length - 1];
+    return (largestOption?.value as TimePeriod) ?? TimePeriod.SEVEN_DAYS;
+  }, [location.query, options]);
+
+  const selectOptions = useMemo(() => {
+    if (hasCustomRange) {
+      const custom = {
+        label: (
+          <Fragment>
+            {t('Custom time')}: <DateTime date={moment.utc(start)} /> {' — '}
+            <DateTime date={moment.utc(end)} />
+          </Fragment>
+        ),
+        value: CUSTOM_TIME_VALUE,
+        textValue: t('Custom time'),
+        disabled: true,
+      };
+      return [custom, ...options];
+    }
+
+    return options;
+  }, [hasCustomRange, start, end, options]);
+
+  const value = hasCustomRange ? CUSTOM_TIME_VALUE : selected;
+
+  return (
+    <CompactSelect
+      size="sm"
+      options={selectOptions}
+      value={value}
+      onChange={opt => {
+        // Ignore clicks on the custom option; only propagate real TimePeriod values
+        if (opt.value === CUSTOM_TIME_VALUE) {
+          return;
+        }
+        navigate({
+          pathname: location.pathname,
+          query: {
+            ...location.query,
+            statsPeriod: opt.value,
+            start: undefined,
+            end: undefined,
+          },
+        });
+      }}
+    />
+  );
+}

static/app/views/detectors/datasetConfig/base.tsx

@@ -7,7 +7,6 @@ import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/
 import type {QueryFieldValue} from 'sentry/utils/discover/fields';
 import type {DiscoverDatasets} from 'sentry/utils/discover/types';
 import type {ApiQueryKey} from 'sentry/utils/queryClient';
-import {TimePeriod} from 'sentry/views/alerts/rules/metric/types';
 import type {FieldValue} from 'sentry/views/discover/table/types';
 
 export interface DetectorSearchBarProps {
@@ -39,10 +38,12 @@ export interface DetectorSeriesQueryOptions {
    * The filter query. eg: `span.op:http`
    */
   query: string;
+  end?: string;
+  start?: string;
   /**
-   * The time period for the query. eg: `7d`
+   * Relative time period for the query. Example: '7d'.
    */
-  statsPeriod: TimePeriod;
+  statsPeriod?: string;
 }
 
 /**