feat(aci): Add manual resolution threshold to metric detectors (#100925)

Adds the ability to manually set a resolution threshold on metric
detector

automatic 
<img width="506" height="161" alt="image"
src="https://github.com/user-attachments/assets/dfe86394-e18c-4f38-84da-d3366a1444b0"
/>

manual w/ validation

<img width="687" height="188" alt="image"
src="https://github.com/user-attachments/assets/17e7e5d2-0ddb-4c62-817f-3d58634ef8e3"
/>

graph with resolution threshold

<img width="795" height="239" alt="image"
src="https://github.com/user-attachments/assets/02b79984-b9fd-43b5-badd-429dd62bdbaf"
/>

Author: scttcper

static/app/components/workflowEngine/form/control/priorityControl.spec.tsx

@@ -118,7 +118,7 @@ describe('PriorityControl', () => {
     await userEvent.type(highField, '5');
 
     expect(formModel.getError(METRIC_DETECTOR_FORM_FIELDS.highThreshold)).toBe(
-      'High threshold must be higher than medium threshold'
+      'High threshold must be higher than medium threshold (10)'
     );
 
     // Test valid case: high (15) > medium (10)

static/app/components/workflowEngine/form/control/priorityControl.tsx

@@ -114,8 +114,9 @@ function validateHighThreshold({
     !validateThresholdOrder(highNum, conditionNum, conditionType, true)
   ) {
     const message = t(
-      'High threshold must be %s than medium threshold',
-      conditionType === DataConditionType.GREATER ? t('higher') : t('lower')
+      'High threshold must be %s than medium threshold (%s)',
+      conditionType === DataConditionType.GREATER ? t('higher') : t('lower'),
+      String(conditionNum)
     );
     return [createValidationError(METRIC_DETECTOR_FORM_FIELDS.highThreshold, message)];
   }

static/app/components/workflowEngine/ui/section.tsx

@@ -6,7 +6,7 @@ type SectionProps = {
   title: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
-  description?: string;
+  description?: React.ReactNode;
 };
 
 export default function Section({children, className, title, description}: SectionProps) {
@@ -25,12 +25,19 @@ export const SectionSubHeading = styled('h5')`
   margin: 0;
 `;
 
+const SectionDescription = styled('div')`
+  font-size: ${p => p.theme.fontSize.md};
+  font-weight: ${p => p.theme.fontWeight.normal};
+  color: ${p => p.theme.subText};
+  margin: 0;
+`;
+
 const SectionContainer = styled(Flex)`
-  > p {
+  > ${SectionDescription} {
     margin-bottom: ${p => p.theme.space['0']};
   }
 
-  p + p {
+  ${SectionDescription} + ${SectionDescription} {
     margin-top: ${p => p.theme.space.md};
   }
 `;
@@ -41,9 +48,4 @@ const SectionHeading = styled('h4')`
   margin: 0;
 `;
 
-const SectionDescription = styled('p')`
-  font-size: ${p => p.theme.fontSize.md};
-  font-weight: ${p => p.theme.fontWeight.normal};
-  color: ${p => p.theme.subText};
-  margin: 0;
-`;
+// moved above to reference in SectionContainer

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

@@ -49,6 +49,49 @@ import {DetectorDataset} from 'sentry/views/detectors/datasetConfig/types';
 import {getResolutionDescription} from 'sentry/views/detectors/utils/getDetectorResolutionDescription';
 import {getStaticDetectorThresholdSuffix} from 'sentry/views/detectors/utils/metricDetectorSuffix';
 
+function validateThresholdOrder(
+  value: number,
+  reference: number,
+  conditionType: DataConditionType,
+  isGreaterExpected: boolean
+): boolean {
+  if (conditionType === DataConditionType.GREATER) {
+    return isGreaterExpected ? value > reference : value < reference;
+  }
+  // For LESS condition type, logic is inverted
+  return isGreaterExpected ? value < reference : value > reference;
+}
+
+function validateResolutionThreshold({
+  form,
+}: {
+  form: MetricDetectorFormData;
+  id: string;
+}): Array<[string, string]> {
+  const {conditionType, conditionValue, detectionType, resolutionStrategy} = form;
+  if (!conditionType || detectionType !== 'static' || resolutionStrategy !== 'manual') {
+    return [];
+  }
+
+  const resolutionNum = Number(form.resolutionValue);
+  const conditionNum = Number(conditionValue);
+
+  if (
+    Number.isFinite(resolutionNum) &&
+    Number.isFinite(conditionNum) &&
+    !validateThresholdOrder(resolutionNum, conditionNum, conditionType, false)
+  ) {
+    const message = t(
+      'Resolution threshold must be %s than alert threshold (%s)',
+      conditionType === DataConditionType.GREATER ? t('lower') : t('higher'),
+      String(conditionNum)
+    );
+    return [[METRIC_DETECTOR_FORM_FIELDS.resolutionValue, message]];
+  }
+
+  return [];
+}
+
 function MetricDetectorForm() {
   return (
     <FormStack>
@@ -163,36 +206,96 @@ function ResolveSection() {
   const conditionComparisonAgo = useMetricDetectorFormField(
     METRIC_DETECTOR_FORM_FIELDS.conditionComparisonAgo
   );
+  const resolutionStrategy = useMetricDetectorFormField(
+    METRIC_DETECTOR_FORM_FIELDS.resolutionStrategy
+  );
+  const resolutionValue = useMetricDetectorFormField(
+    METRIC_DETECTOR_FORM_FIELDS.resolutionValue
+  );
   const aggregate = useMetricDetectorFormField(
     METRIC_DETECTOR_FORM_FIELDS.aggregateFunction
   );
   const thresholdSuffix = getStaticDetectorThresholdSuffix(aggregate);
 
-  const description = getResolutionDescription(
-    detectionType === 'percent'
-      ? {
-          detectionType: 'percent',
-          conditionType,
-          conditionValue,
-          comparisonDelta: conditionComparisonAgo ?? 3600, // Default to 1 hour if not set
-          thresholdSuffix,
-        }
-      : detectionType === 'static'
-        ? {
-            detectionType: 'static',
-            conditionType,
-            conditionValue,
-            thresholdSuffix,
-          }
-        : {
-            detectionType: 'dynamic',
-            thresholdSuffix,
-          }
-  );
+  const effectiveConditionValue =
+    resolutionStrategy === 'manual' &&
+    resolutionValue !== undefined &&
+    resolutionValue !== ''
+      ? resolutionValue
+      : conditionValue;
+
+  const descriptionContent =
+    detectionType === 'static' && resolutionStrategy === 'manual' ? (
+      <Flex align="center" gap="sm">
+        <div>
+          <span>
+            {t(
+              'Issue will be resolved when the query value is %s',
+              conditionType === DataConditionType.GREATER
+                ? t('less than')
+                : t('more than')
+            )}
+          </span>
+        </div>
+        <ThresholdField
+          aria-label={t('Resolution threshold')}
+          name={METRIC_DETECTOR_FORM_FIELDS.resolutionValue}
+          hideLabel
+          inline={false}
+          flexibleControlStateSize
+          placeholder="0"
+          suffix={thresholdSuffix}
+          validate={validateResolutionThreshold}
+          required
+          preserveOnUnmount
+        />
+      </Flex>
+    ) : (
+      getResolutionDescription(
+        detectionType === 'percent'
+          ? {
+              detectionType: 'percent',
+              conditionType,
+              conditionValue: effectiveConditionValue,
+              comparisonDelta: conditionComparisonAgo ?? 3600, // Default to 1 hour if not set
+              thresholdSuffix,
+            }
+          : detectionType === 'static'
+            ? {
+                detectionType: 'static',
+                conditionType,
+                conditionValue: effectiveConditionValue,
+                thresholdSuffix,
+              }
+            : {
+                detectionType: 'dynamic',
+                thresholdSuffix,
+              }
+      )
+    );
 
   return (
     <Container>
-      <Section title={t('Resolve')} description={description} />
+      <Section title={t('Resolve')}>
+        {detectionType !== 'dynamic' && (
+          <Flex direction="column" gap="sm">
+            <ResolutionStrategyField
+              name={METRIC_DETECTOR_FORM_FIELDS.resolutionStrategy}
+              label={t('Resolution method')}
+              hideLabel
+              inline={false}
+              flexibleControlStateSize
+              preserveOnUnmount
+              defaultValue="automatic"
+              choices={[
+                ['automatic', t('Automatic')],
+                ['manual', t('Manual')],
+              ]}
+            />
+          </Flex>
+        )}
+        <DescriptionContainer>{descriptionContent}</DescriptionContainer>
+      </Section>
     </Container>
   );
 }
@@ -523,14 +626,30 @@ const DetectionTypeField = styled(SegmentedRadioField)`
     padding: 0;
   }
 `;
+
+const DescriptionContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+`;
+
+const ResolutionStrategyField = styled(SegmentedRadioField)`
+  padding: 0;
+  max-width: 350px;
+
+  > div {
+    padding: 0;
+  }
+`;
+
 const ThresholdField = styled(NumberField)`
   padding: 0;
   margin: 0;
   border: none;
 
   > div {
     padding: 0;
-    width: 10ch;
+    width: 18ch;
   }
 `;
 

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

@@ -63,6 +63,13 @@ interface MetricDetectorConditionFormData {
    * Both kind=threshold and kind=change
    */
   conditionValue?: string;
+  /**
+   * Strategy for how an issue should be resolved
+   * - automatic: resolves based on the primary condition value
+   * - manual: resolves based on a custom resolution value
+   */
+  resolutionStrategy?: 'automatic' | 'manual';
+  resolutionValue?: string;
 }
 
 interface MetricDetectorDynamicFormData {
@@ -120,6 +127,8 @@ export const METRIC_DETECTOR_FORM_FIELDS = {
   conditionComparisonAgo: 'conditionComparisonAgo',
   conditionType: 'conditionType',
   conditionValue: 'conditionValue',
+  resolutionStrategy: 'resolutionStrategy',
+  resolutionValue: 'resolutionValue',
 
   // Dynamic fields
   sensitivity: 'sensitivity',
@@ -134,6 +143,8 @@ export const DEFAULT_THRESHOLD_METRIC_FORM_DATA = {
   initialPriorityLevel: DetectorPriorityLevel.HIGH,
   conditionType: DataConditionType.GREATER,
   conditionValue: '',
+  resolutionStrategy: 'automatic',
+  resolutionValue: '',
   conditionComparisonAgo: 60 * 60, // One hour in seconds
 
   // Default dynamic fields
@@ -177,7 +188,12 @@ interface NewDataSource {
 export function createConditions(
   data: Pick<
     MetricDetectorFormData,
-    'conditionType' | 'conditionValue' | 'initialPriorityLevel' | 'highThreshold'
+    | 'conditionType'
+    | 'conditionValue'
+    | 'initialPriorityLevel'
+    | 'highThreshold'
+    | 'resolutionStrategy'
+    | 'resolutionValue'
   >
 ): NewConditionGroup['conditions'] {
   if (!defined(data.conditionType) || !defined(data.conditionValue)) {
@@ -206,6 +222,24 @@ export function createConditions(
     });
   }
 
+  // Optionally add explicit resolution (OK) condition when manual strategy is chosen
+  if (
+    data.resolutionStrategy === 'manual' &&
+    defined(data.resolutionValue) &&
+    data.resolutionValue !== ''
+  ) {
+    const resolutionConditionType =
+      data.conditionType === DataConditionType.GREATER
+        ? DataConditionType.LESS
+        : DataConditionType.GREATER;
+
+    conditions.push({
+      type: resolutionConditionType,
+      comparison: parseFloat(data.resolutionValue) || 0,
+      conditionResult: DetectorPriorityLevel.OK,
+    });
+  }
+
   return conditions;
 }
 
@@ -319,7 +353,10 @@ export function metricDetectorFormDataToEndpointPayload(
 function processDetectorConditions(
   detector: MetricDetector
 ): PrioritizeLevelFormData &
-  Pick<MetricDetectorFormData, 'conditionValue' | 'conditionType'> {
+  Pick<
+    MetricDetectorFormData,
+    'conditionValue' | 'conditionType' | 'resolutionStrategy' | 'resolutionValue'
+  > {
   // Get conditions from the condition group
   const conditions = detector.conditionGroup?.conditions || [];
   // Sort by priority level, lowest first
@@ -337,6 +374,11 @@ function processDetectorConditions(
     condition => condition.conditionResult === DetectorPriorityLevel.HIGH
   );
 
+  // Find explicit resolution (OK) condition, if present
+  const okCondition = conditions.find(
+    condition => condition.conditionResult === DetectorPriorityLevel.OK
+  );
+
   // Determine initial priority level, ensuring it's valid for the form
   let initialPriorityLevel: DetectorPriorityLevel.MEDIUM | DetectorPriorityLevel.HIGH =
     DetectorPriorityLevel.MEDIUM;
@@ -368,6 +410,12 @@ function processDetectorConditions(
       typeof highCondition?.comparison === 'number'
         ? highCondition.comparison.toString()
         : '',
+    resolutionStrategy:
+      typeof okCondition?.comparison === 'number' ? 'manual' : 'automatic',
+    resolutionValue:
+      typeof okCondition?.comparison === 'number'
+        ? okCondition.comparison.toString()
+        : '',
   };
 }