feat(anomaly detection): update alert rule details page for anomaly d…

…etection (#76564) <img width="1512" alt="Screenshot 2024-08-26 at 12 08 26 PM" src="https://github.com/user-attachments/assets/fde742fb-3f5a-4151-94a4-108e4664b86b"> <img width="1240" alt="Screenshot 2024-08-26 at 3 20 53 PM" src="https://github.com/user-attachments/assets/e3b00724-3b42-4cb5-9001-9140318140e1">
getsentry · Aug 27, 2024 · b52cb55 · b52cb55
1 parent 5554411
commit b52cb55
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 21 deletions.
diff --git a/static/app/views/alerts/list/rules/alertRuleStatus.tsx b/static/app/views/alerts/list/rules/alertRuleStatus.tsx
@@ -69,6 +69,9 @@ export default function AlertRuleStatus({rule}: Props) {
  ? t('Above')
  : t('Below');
 
+ // Anomaly detection alerts have different labels
+ const statusLabel = activeIncident ? t('Bad') : t('Good');
+
  if (activeIncident) {
  iconColor =
  trigger?.label === AlertRuleTriggerType.CRITICAL
@@ -86,20 +89,26 @@ export default function AlertRuleStatus({rule}: Props) {
 
  return (
  <FlexCenter>
- <IconArrow color={iconColor} direction={iconDirection} />
- <TriggerText>
- {`${thresholdTypeText} ${
- rule.latestIncident || (!rule.latestIncident && !resolvedTrigger)
- ? trigger?.alertThreshold?.toLocaleString()
- : resolvedTrigger?.toLocaleString()
- }`}
- {getThresholdUnits(
- rule.aggregate,
- rule.comparisonDelta
- ? AlertRuleComparisonType.CHANGE
- : AlertRuleComparisonType.COUNT
- )}
- </TriggerText>
+ {rule.detectionType !== AlertRuleComparisonType.DYNAMIC && (
+ <IconArrow color={iconColor} direction={iconDirection} />
+ )}
+ {rule.detectionType !== AlertRuleComparisonType.DYNAMIC ? (
+ <TriggerText>
+ {`${thresholdTypeText} ${
+ rule.latestIncident || (!rule.latestIncident && !resolvedTrigger)
+ ? trigger?.alertThreshold?.toLocaleString()
+ : resolvedTrigger?.toLocaleString()
+ }`}
+ {getThresholdUnits(
+ rule.aggregate,
+ rule.comparisonDelta
+ ? AlertRuleComparisonType.CHANGE
+ : AlertRuleComparisonType.COUNT
+ )}
+ </TriggerText>
+ ) : (
+ <TriggerText>{statusLabel}</TriggerText>
+ )}
  </FlexCenter>
  );
 }

diff --git a/static/app/views/alerts/rules/metric/constants.tsx b/static/app/views/alerts/rules/metric/constants.tsx
@@ -172,7 +172,7 @@ export function createDefaultRule(
  environment: null,
  resolveThreshold: '',
  thresholdType: AlertRuleThresholdType.ABOVE,
- detectionType: AlertRuleComparisonType.COUNT,
+ detectionType: AlertRuleComparisonType.STATIC,
  ...defaultRuleOptions,
  };
 }

diff --git a/static/app/views/alerts/rules/metric/details/sidebar.tsx b/static/app/views/alerts/rules/metric/details/sidebar.tsx
@@ -20,6 +20,7 @@ import {capitalize} from 'sentry/utils/string/capitalize';
 import {COMPARISON_DELTA_OPTIONS} from 'sentry/views/alerts/rules/metric/constants';
 import type {Action, MetricRule} from 'sentry/views/alerts/rules/metric/types';
 import {
+ AlertRuleComparisonType,
  AlertRuleThresholdType,
  AlertRuleTriggerType,
 } from 'sentry/views/alerts/rules/metric/types';
@@ -90,11 +91,13 @@ function TriggerDescription({
  ).label,
  }
  )
- : tct('[metric] is [condition] in [timeWindow]', {
- metric: metricName,
- condition: `${thresholdTypeText} ${threshold}`,
- timeWindow,
- });
+ : rule.detectionType === AlertRuleComparisonType.DYNAMIC
+ ? 'Dynamic threshold is reached'
+ : tct('[metric] is [condition] in [timeWindow]', {
+ metric: metricName,
+ condition: `${thresholdTypeText} ${threshold}`,
+ timeWindow,
+ });
 
  return (
  <TriggerContainer>
@@ -260,6 +263,30 @@ export function MetricDetailsSidebar({
  teamActor ? <ActorAvatar actor={teamActor} size={24} /> : t('Unassigned')
  }
  />
+ {rule.detectionType === AlertRuleComparisonType.DYNAMIC && (
+ <KeyValueTableRow
+ keyName={t('Sensitivity')}
+ value={
+ rule.sensitivity
+ ? rule.sensitivity.charAt(0).toUpperCase() + rule.sensitivity.slice(1)
+ : ''
+ } // NOTE: if the rule is dynamic, then there must be a sensitivity
+ />
+ )}
+ {rule.detectionType === AlertRuleComparisonType.DYNAMIC && (
+ <KeyValueTableRow
+ keyName={t('Direction')}
+ value={
+ <OverflowTableValue>
+ {rule.thresholdType === AlertRuleThresholdType.ABOVE
+ ? 'Above threshold'
+ : rule.thresholdType === AlertRuleThresholdType.ABOVE_AND_BELOW
+ ? 'Above and below threshold'
+ : 'Below threshold'}
+ </OverflowTableValue>
+ }
+ />
+ )}
  </KeyValueTable>
  </SidebarGroup>
  </Fragment>

diff --git a/static/app/views/alerts/rules/metric/ruleForm.tsx b/static/app/views/alerts/rules/metric/ruleForm.tsx
@@ -938,7 +938,7 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
  ? this.state.sensitivity || AlertRuleSensitivity.MEDIUM
  : undefined;
  const seasonality =
- value === AlertRuleComparisonType.DYNAMIC ? AlertRuleSeasonality.AUTO : undefined; // TODO: replace "auto" with the correct constant
+ value === AlertRuleComparisonType.DYNAMIC ? AlertRuleSeasonality.AUTO : undefined;
  this.setState({
  comparisonType: value,
  comparisonDelta,

diff --git a/static/app/views/alerts/rules/metric/types.tsx b/static/app/views/alerts/rules/metric/types.tsx
@@ -26,6 +26,7 @@ export enum AlertRuleComparisonType {
  CHANGE = 'change',
  PERCENT = 'percent',
  DYNAMIC = 'dynamic',
+ STATIC = 'static',
 }
 
 export enum Dataset {