feat(alert): Custom metric for alert wizard (#25005)

Adds a new option for a custom metric in the alert wizard (this will enable fp, ttfb which were removed in this dependent PR #24974).

src/sentry/static/sentry/app/views/alerts/wizard/options.tsx

@@ -12,7 +12,8 @@ export type AlertType =
   | 'lcp'
   | 'fid'
   | 'cls'
-  | 'fcp';
+  | 'fcp'
+  | 'custom';
 
 export const WebVitalAlertTypes = new Set(['lcp', 'fid', 'cls', 'fcp']);
 
@@ -24,10 +25,11 @@ export const AlertWizardAlertNames: Record<AlertType, string> = {
   trans_duration: t('Transaction Duration'),
   apdex: t('Apdex'),
   failure_rate: t('Failure Rate'),
-  lcp: t('Longest Contentful Paint'),
+  lcp: t('Largest Contentful Paint'),
   fid: t('First Input Delay'),
   cls: t('Cumulative Layout Shift'),
   fcp: t('First Contentful Paint'),
+  custom: t('Custom Metric'),
 };
 
 export const AlertWizardOptions: {
@@ -49,6 +51,7 @@ export const AlertWizardOptions: {
       'fid',
       'cls',
       'fcp',
+      'custom',
     ],
   },
 ];
@@ -149,6 +152,15 @@ export const AlertWizardPanelContent: Record<AlertType, PanelContent> = {
     examples: [t('When the average FCP of a page is longer than 0.25 seconds.')],
     docsLink: 'https://docs.sentry.io/product/performance/web-vitals',
   },
+  custom: {
+    description: t(
+      'Alert on metrics which are not listed above, such as first paint (FP) and time to first byte (TTFB).'
+    ),
+    examples: [
+      t('When the 95th percentile FP of a page is longer than 250 milliseconds.'),
+      t('When the average TTFB of a page is longer than 600 millliseconds.'),
+    ],
+  },
 };
 
 export type WizardRuleTemplate = {
@@ -211,4 +223,9 @@ export const AlertWizardRuleTemplates: Record<
     dataset: Dataset.TRANSACTIONS,
     eventTypes: EventTypes.TRANSACTION,
   },
+  custom: {
+    aggregate: 'p95(measurements.fp)',
+    dataset: Dataset.TRANSACTIONS,
+    eventTypes: EventTypes.TRANSACTION,
+  },
 };

src/sentry/static/sentry/app/views/alerts/wizard/utils.tsx

@@ -34,5 +34,5 @@ export function getAlertTypeFromAggregateDataset({
     ([_alertType, identifier]) => identifier && aggregate.includes(identifier)
   );
   const alertType = matchingAlertTypeEntry && (matchingAlertTypeEntry[0] as AlertType);
-  return alertType ? alertType : 'num_errors';
+  return alertType ? alertType : 'custom';
 }

tests/js/spec/views/alerts/wizard/utils.spec.jsx

@@ -71,12 +71,26 @@ describe('Wizard utils', function () {
     ).toEqual('num_errors');
   });
 
-  it('defaults to num_errors', function () {
+  it('defaults to custom', function () {
     expect(
       getAlertTypeFromAggregateDataset({
         aggregate: 'count_unique(tags[sentry:user])',
         dataset: Dataset.TRANSACTIONS,
       })
-    ).toEqual('num_errors');
+    ).toEqual('custom');
+
+    expect(
+      getAlertTypeFromAggregateDataset({
+        aggregate: 'p95(measurements.fp)',
+        dataset: Dataset.TRANSACTIONS,
+      })
+    ).toEqual('custom');
+
+    expect(
+      getAlertTypeFromAggregateDataset({
+        aggregate: 'p95(measurements.ttfb)',
+        dataset: Dataset.TRANSACTIONS,
+      })
+    ).toEqual('custom');
   });
 });