feat(aci): Add support for metric detector anomalies (#96776)

Has to make two additional requests. One to get a larger overall time
window of the current time period and then send it to /anomalies to get
back the periods that would've triggered.

Adds a hook that can take an array of incidents/open periodos and
display bubbles on the graph like below

<img width="1094" height="435" alt="image"
src="https://github.com/user-attachments/assets/36635688-13a8-4a88-b14e-4bda493b60a2"
/>


Todo in follow up:
- split the preview and details charts
- error state for anomalies
- fix some cases where anomalies stats call fails with too many stat
points requested
- improve loading performance, i think i'm waiting for too many things,
could show a different loading state for anomaly data.

Author: scttcper

static/app/views/alerts/types.tsx

@@ -116,7 +116,7 @@ export type CombinedAlerts = CombinedMetricIssueAlerts | UptimeAlert | CronRule;
 
 export type Anomaly = {
   anomaly: {anomaly_score: number; anomaly_type: AnomalyType};
-  timestamp: string | number;
+  timestamp: number;
   value: number;
 };
 

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

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import {Flex} from 'sentry/components/core/layout';
 import type {MetricDetector} from 'sentry/types/workflowEngine/detectors';
 import type {TimePeriod} from 'sentry/views/alerts/rules/metric/types';
 import {MetricDetectorChart} from 'sentry/views/detectors/components/forms/metric/metricDetectorChart';
@@ -34,24 +33,28 @@ export function MetricDetectorDetailsChart({
     detectionType === 'percent' ? detector.config.comparisonDelta : undefined;
 
   return (
-    <Flex direction="column" gap="xl">
-      <ChartContainer>
-        <ChartContainerBody>
-          <MetricDetectorChart
-            dataset={dataset}
-            aggregate={aggregate}
-            interval={interval}
-            query={query}
-            environment={environment}
-            projectId={detector.projectId}
-            conditions={conditions}
-            detectionType={detectionType}
-            statsPeriod={statsPeriod}
-            comparisonDelta={comparisonDelta}
-          />
-        </ChartContainerBody>
-      </ChartContainer>
-    </Flex>
+    <ChartContainer>
+      <ChartContainerBody>
+        <MetricDetectorChart
+          dataset={dataset}
+          aggregate={aggregate}
+          interval={interval}
+          query={query}
+          environment={environment}
+          projectId={detector.projectId}
+          conditions={conditions}
+          detectionType={detectionType}
+          statsPeriod={statsPeriod}
+          comparisonDelta={comparisonDelta}
+          sensitivity={
+            'sensitivity' in detector.config ? detector.config.sensitivity : undefined
+          }
+          thresholdType={
+            'thresholdType' in detector.config ? detector.config.thresholdType : undefined
+          }
+        />
+      </ChartContainerBody>
+    </ChartContainer>
   );
 }
 

static/app/views/detectors/components/forms/metric/metricDetectorChart.tsx

@@ -1,4 +1,5 @@
 import {useMemo} from 'react';
+import type {YAXisComponentOption} from 'echarts';
 
 import {AreaChart} from 'sentry/components/charts/areaChart';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
@@ -9,8 +10,14 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import type {MetricDetectorConfig} from 'sentry/types/workflowEngine/detectors';
-import {TimePeriod} from 'sentry/views/alerts/rules/metric/types';
+import {
+  AlertRuleSensitivity,
+  AlertRuleThresholdType,
+  TimePeriod,
+} from 'sentry/views/alerts/rules/metric/types';
 import type {DetectorDataset} from 'sentry/views/detectors/components/forms/metric/metricFormData';
+import {useIncidentMarkers} from 'sentry/views/detectors/hooks/useIncidentMarkers';
+import {useMetricDetectorAnomalyPeriods} from 'sentry/views/detectors/hooks/useMetricDetectorAnomalyPeriods';
 import {useMetricDetectorSeries} from 'sentry/views/detectors/hooks/useMetricDetectorSeries';
 import {useMetricDetectorThresholdSeries} from 'sentry/views/detectors/hooks/useMetricDetectorThresholdSeries';
 
@@ -50,10 +57,18 @@ interface MetricDetectorChartProps {
    * The query filter string
    */
   query: string;
+  /**
+   * Used in anomaly detection
+   */
+  sensitivity: AlertRuleSensitivity | undefined;
   /**
    * The time period for the chart data (optional, defaults to 7d)
    */
   statsPeriod: TimePeriod;
+  /**
+   * Used in anomaly detection
+   */
+  thresholdType: AlertRuleThresholdType | undefined;
 }
 
 export function MetricDetectorChart({
@@ -67,8 +82,10 @@ export function MetricDetectorChart({
   detectionType,
   statsPeriod,
   comparisonDelta,
+  sensitivity,
+  thresholdType,
 }: MetricDetectorChartProps) {
-  const {series, comparisonSeries, isPending, isError} = useMetricDetectorSeries({
+  const {series, comparisonSeries, isLoading, isError} = useMetricDetectorSeries({
     dataset,
     aggregate,
     interval,
@@ -79,13 +96,47 @@ export function MetricDetectorChart({
     comparisonDelta,
   });
 
-  const {maxValue: thresholdMaxValue, additionalSeries} =
+  const {maxValue: thresholdMaxValue, additionalSeries: thresholdAdditionalSeries} =
     useMetricDetectorThresholdSeries({
       conditions,
       detectionType,
       comparisonSeries,
     });
 
+  const isAnomalyDetection = detectionType === 'dynamic';
+  const shouldFetchAnomalies =
+    isAnomalyDetection && !isLoading && !isError && series.length > 0;
+
+  // Fetch anomaly data when detection type is dynamic and series data is ready
+  const {
+    anomalyPeriods,
+    isLoading: isLoadingAnomalies,
+    error: anomalyErrorObject,
+  } = useMetricDetectorAnomalyPeriods({
+    series: shouldFetchAnomalies ? series : [],
+    dataset,
+    aggregate,
+    query,
+    environment,
+    projectId,
+    statsPeriod,
+    timePeriod: interval,
+    thresholdType,
+    sensitivity,
+    enabled: shouldFetchAnomalies,
+  });
+
+  // Create anomaly marker rendering from pre-grouped anomaly periods
+  const anomalyMarkerResult = useIncidentMarkers({
+    incidents: anomalyPeriods,
+    seriesName: t('Anomalies'),
+    seriesId: '__anomaly_marker__',
+    yAxisIndex: 1, // Use index 1 to avoid conflict with main chart axis
+  });
+
+  const anomalyLoading = shouldFetchAnomalies ? isLoadingAnomalies : false;
+  const anomalyError = shouldFetchAnomalies ? anomalyErrorObject : null;
+
   // Calculate y-axis bounds to ensure all thresholds are visible
   const maxValue = useMemo(() => {
     // Get max from series data
@@ -111,15 +162,72 @@ export function MetricDetectorChart({
     return roundedMax + padding;
   }, [series, thresholdMaxValue]);
 
-  if (isPending) {
+  const additionalSeries = useMemo(() => {
+    const baseSeries = [...thresholdAdditionalSeries];
+
+    if (isAnomalyDetection && anomalyMarkerResult.incidentMarkerSeries) {
+      // Line series not working well with the custom series type
+      baseSeries.push(anomalyMarkerResult.incidentMarkerSeries as any);
+    }
+
+    return baseSeries;
+  }, [
+    isAnomalyDetection,
+    thresholdAdditionalSeries,
+    anomalyMarkerResult.incidentMarkerSeries,
+  ]);
+
+  const yAxes = useMemo(() => {
+    const mainYAxis: YAXisComponentOption = {
+      max: maxValue > 0 ? maxValue : undefined,
+      min: 0,
+      axisLabel: {
+        // Hide the maximum y-axis label to avoid showing arbitrary threshold values
+        showMaxLabel: false,
+      },
+      // Disable the y-axis grid lines
+      splitLine: {show: false},
+    };
+
+    const axes: YAXisComponentOption[] = [mainYAxis];
+
+    // Add anomaly marker Y-axis if available
+    if (isAnomalyDetection && anomalyMarkerResult.incidentMarkerYAxis) {
+      axes.push(anomalyMarkerResult.incidentMarkerYAxis);
+    }
+
+    return axes;
+  }, [maxValue, isAnomalyDetection, anomalyMarkerResult.incidentMarkerYAxis]);
+
+  // Prepare grid with anomaly marker adjustments
+  const grid = useMemo(() => {
+    const baseGrid = {
+      left: space(0.25),
+      right: space(0.25),
+      top: space(1.5),
+      bottom: space(1),
+    };
+
+    // Apply anomaly marker grid adjustments if available
+    if (isAnomalyDetection && anomalyMarkerResult.incidentMarkerGrid) {
+      return {
+        ...baseGrid,
+        ...anomalyMarkerResult.incidentMarkerGrid,
+      };
+    }
+
+    return baseGrid;
+  }, [isAnomalyDetection, anomalyMarkerResult.incidentMarkerGrid]);
+
+  if (isLoading || anomalyLoading) {
     return (
       <Flex style={{height: CHART_HEIGHT}} justify="center" align="center">
         <Placeholder height={`${CHART_HEIGHT - 20}px`} />
       </Flex>
     );
   }
 
-  if (isError) {
+  if (isError || anomalyError) {
     return (
       <Flex style={{height: CHART_HEIGHT}} justify="center" align="center">
         <ErrorPanel>
@@ -138,22 +246,13 @@ export function MetricDetectorChart({
       stacked={false}
       series={series}
       additionalSeries={additionalSeries}
-      yAxis={{
-        max: maxValue > 0 ? maxValue : undefined,
-        min: 0,
-        axisLabel: {
-          // Hide the maximum y-axis label to avoid showing arbitrary threshold values
-          showMaxLabel: false,
-        },
-        // Disable the y-axis grid lines
-        splitLine: {show: false},
-      }}
-      grid={{
-        left: space(0.25),
-        right: space(0.25),
-        top: space(1.5),
-        bottom: space(1),
-      }}
+      yAxes={yAxes.length > 1 ? yAxes : undefined}
+      yAxis={yAxes.length === 1 ? yAxes[0] : undefined}
+      grid={grid}
+      xAxis={isAnomalyDetection ? anomalyMarkerResult.incidentMarkerXAxis : undefined}
+      ref={
+        isAnomalyDetection ? anomalyMarkerResult.connectIncidentMarkerChartRef : undefined
+      }
     />
   );
 }

static/app/views/detectors/components/forms/metric/metricFormData.tsx

@@ -148,8 +148,8 @@ export const DEFAULT_THRESHOLD_METRIC_FORM_DATA = {
   conditionComparisonAgo: 60 * 60, // One hour in seconds
 
   // Default dynamic fields
-  sensitivity: AlertRuleSensitivity.LOW,
-  thresholdType: AlertRuleThresholdType.ABOVE,
+  sensitivity: AlertRuleSensitivity.MEDIUM,
+  thresholdType: AlertRuleThresholdType.ABOVE_AND_BELOW,
 
   dataset: DetectorDataset.SPANS,
   aggregateFunction: 'avg(span.duration)',

static/app/views/detectors/components/forms/metric/previewChart.tsx

@@ -42,6 +42,10 @@ export function MetricDetectorPreviewChart() {
   const conditionComparisonAgo = useMetricDetectorFormField(
     METRIC_DETECTOR_FORM_FIELDS.conditionComparisonAgo
   );
+  const sensitivity = useMetricDetectorFormField(METRIC_DETECTOR_FORM_FIELDS.sensitivity);
+  const thresholdType = useMetricDetectorFormField(
+    METRIC_DETECTOR_FORM_FIELDS.thresholdType
+  );
 
   const {selectedTimePeriod, setSelectedTimePeriod, timePeriodOptions} =
     useTimePeriodSelection({
@@ -77,6 +81,8 @@ export function MetricDetectorPreviewChart() {
         detectionType={detectionType}
         statsPeriod={selectedTimePeriod}
         comparisonDelta={detectionType === 'percent' ? conditionComparisonAgo : undefined}
+        sensitivity={sensitivity}
+        thresholdType={thresholdType}
       />
       <ChartFooter>
         <CompactSelect

static/app/views/detectors/edit.spec.tsx

@@ -510,5 +510,82 @@ describe('DetectorEdit', () => {
       // Verify interval changed to 15 minutes
       expect(await screen.findByText('15 minutes')).toBeInTheDocument();
     });
+
+    it('calls anomaly API when using dynamic detection', async () => {
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/detectors/${mockDetector.id}/`,
+        body: mockDetector,
+      });
+
+      // Current data for chart
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/events-stats/`,
+        match: [MockApiClient.matchQuery({statsPeriod: '9998m'})],
+        body: {
+          data: [
+            [1609459200000, [{count: 100}]],
+            [1609462800000, [{count: 120}]],
+            [1609466400000, [{count: 90}]],
+            [1609470000000, [{count: 150}]],
+          ],
+        },
+      });
+
+      // Historical data
+      MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/events-stats/`,
+        match: [MockApiClient.matchQuery({statsPeriod: '35d'})],
+        body: {
+          data: [
+            [1607459200000, [{count: 80}]],
+            [1607462800000, [{count: 95}]],
+            [1607466400000, [{count: 110}]],
+            [1607470000000, [{count: 75}]],
+          ],
+        },
+      });
+
+      const anomalyRequest = MockApiClient.addMockResponse({
+        url: `/organizations/${organization.slug}/events/anomalies/`,
+        method: 'POST',
+        body: [],
+      });
+
+      render(<DetectorEdit />, {
+        organization,
+        initialRouterConfig,
+      });
+
+      expect(await screen.findByRole('link', {name})).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('radio', {name: 'Dynamic'}));
+
+      await waitFor(() => {
+        expect(anomalyRequest).toHaveBeenCalled();
+      });
+      const payload = anomalyRequest.mock.calls[0][1];
+      expect(payload.data).toEqual({
+        config: {
+          direction: 'both',
+          expected_seasonality: 'auto',
+          sensitivity: 'medium',
+          time_period: 15,
+        },
+        current_data: [
+          [1609459200000, {count: 100}],
+          [1609462800000, {count: 120}],
+          [1609466400000, {count: 90}],
+          [1609470000000, {count: 150}],
+        ],
+        historical_data: [
+          [1607459200000, {count: 80}],
+          [1607462800000, {count: 95}],
+          [1607466400000, {count: 110}],
+          [1607470000000, {count: 75}],
+        ],
+        organization_id: organization.id,
+        project_id: project.id,
+      });
+    });
   });
 });