fix(metric_alerts): Add units to thresholds (#25961)

Add units to thresholds in placeholder and field description.

FIXES WOR-850.

static/app/views/settings/incidentRules/ruleForm/index.tsx

@@ -645,6 +645,7 @@ class RuleFormContainer extends AsyncComponent<Props, State> {
         projects={this.state.projects}
         errors={this.state.triggerErrors}
         triggers={triggers}
+        aggregate={aggregate}
         resolveThreshold={resolveThreshold}
         thresholdType={thresholdType}
         currentProject={params.projectId}

static/app/views/settings/incidentRules/triggers/form.tsx

@@ -33,6 +33,7 @@ type Props = {
   projects: Project[];
   resolveThreshold: UnsavedIncidentRule['resolveThreshold'];
   thresholdType: UnsavedIncidentRule['thresholdType'];
+  aggregate: UnsavedIncidentRule['aggregate'];
   trigger: Trigger;
   triggerIndex: number;
   isCritical: boolean;
@@ -145,6 +146,7 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
       organization,
       triggers,
       thresholdType,
+      aggregate,
       resolveThreshold,
       projects,
       onThresholdTypeChange,
@@ -156,6 +158,13 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
       actions: [],
     };
 
+    const thresholdUnits =
+      aggregate.includes('duration') || aggregate.includes('measurements')
+        ? 'ms'
+        : aggregate.includes('failure_rate')
+        ? '%'
+        : '';
+
     return (
       <React.Fragment>
         {triggers.map((trigger, index) => {
@@ -171,21 +180,26 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
               error={errors && errors.get(index)}
               trigger={trigger}
               thresholdType={thresholdType}
+              aggregate={aggregate}
               resolveThreshold={resolveThreshold}
               organization={organization}
               projects={projects}
               triggerIndex={index}
               isCritical={isCritical}
-              fieldHelp={tct('The threshold that will activate the [severity] status.', {
-                severity: isCritical ? t('critical') : t('warning'),
-              })}
+              fieldHelp={tct(
+                'The threshold[units] that will activate the [severity] status.',
+                {
+                  severity: isCritical ? t('critical') : t('warning'),
+                  units: thresholdUnits ? ` (${thresholdUnits})` : '',
+                }
+              )}
               triggerLabel={
                 <React.Fragment>
                   <TriggerIndicator size={12} />
                   {isCritical ? t('Critical') : t('Warning')}
                 </React.Fragment>
               }
-              placeholder={isCritical ? '300' : t('None')}
+              placeholder={isCritical ? `300${thresholdUnits}` : t('None')}
               onChange={this.handleChangeTrigger(index)}
               onThresholdTypeChange={onThresholdTypeChange}
             />
@@ -199,12 +213,15 @@ class TriggerFormContainer extends React.Component<TriggerFormContainerProps> {
           trigger={resolveTrigger}
           // Flip rule thresholdType to opposite
           thresholdType={+!thresholdType}
+          aggregate={aggregate}
           resolveThreshold={resolveThreshold}
           organization={organization}
           projects={projects}
           triggerIndex={2}
           isCritical={false}
-          fieldHelp={t('The threshold that will activate the resolved status.')}
+          fieldHelp={tct('The threshold[units] that will activate the resolved status.', {
+            units: thresholdUnits ? ` (${thresholdUnits})` : '',
+          })}
           triggerLabel={
             <React.Fragment>
               <ResolvedIndicator size={12} />

static/app/views/settings/incidentRules/triggers/index.tsx

@@ -23,6 +23,7 @@ type Props = {
   triggers: Trigger[];
   resolveThreshold: UnsavedIncidentRule['resolveThreshold'];
   thresholdType: UnsavedIncidentRule['thresholdType'];
+  aggregate: UnsavedIncidentRule['aggregate'];
   currentProject: string;
   availableActions: MetricActionTemplate[] | null;
   disabled: boolean;
@@ -95,6 +96,7 @@ class Triggers extends Component<Props> {
       projects,
       triggers,
       disabled,
+      aggregate,
       thresholdType,
       resolveThreshold,
       onThresholdTypeChange,
@@ -112,6 +114,7 @@ class Triggers extends Component<Props> {
               organization={organization}
               projects={projects}
               triggers={triggers}
+              aggregate={aggregate}
               resolveThreshold={resolveThreshold}
               thresholdType={thresholdType}
               onChange={this.handleChangeTrigger}