From a5ff0391cadb9528afbd96cd69b5c260e557341a Mon Sep 17 00:00:00 2001
From: David Wang <dwang@sentry.io>
Date: Fri, 20 Sep 2024 11:20:31 -0700
Subject: [PATCH] feat(uptime): Add uptime option to wizard (#77799)

<img width="1080" alt="image"
src="https://github.com/user-attachments/assets/793ea578-3015-4a7c-8341-9bccb09d729c">

Maybe marketing/design can help us get a nice graphic in, and some
better copy
---
 static/app/views/alerts/wizard/index.spec.tsx | 26 +++++++++++++++++++
 static/app/views/alerts/wizard/index.tsx      |  6 ++++-
 static/app/views/alerts/wizard/options.tsx    | 12 +++++++--
 .../app/views/alerts/wizard/panelContent.tsx  |  4 +++
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/static/app/views/alerts/wizard/index.spec.tsx b/static/app/views/alerts/wizard/index.spec.tsx
index 461da2ff989a86..6ef337a655072f 100644
--- a/static/app/views/alerts/wizard/index.spec.tsx
+++ b/static/app/views/alerts/wizard/index.spec.tsx
@@ -103,4 +103,30 @@ describe('AlertWizard', () => {
     const alertGroups = screen.getAllByRole('radiogroup');
     expect(alertGroups.length).toEqual(1);
   });
+
+  it('shows uptime alert according to feature flag', () => {
+    const {organization, project, routerProps, router} = initializeOrg({
+      organization: {
+        features: [
+          'alert-crash-free-metrics',
+          'incidents',
+          'performance-view',
+          'crash-rate-alerts',
+          'uptime-api-create-update',
+        ],
+        access: ['org:write', 'alerts:write'],
+      },
+    });
+
+    render(
+      <AlertWizard
+        organization={organization}
+        projectId={project.slug}
+        {...routerProps}
+      />,
+      {router, organization}
+    );
+
+    expect(screen.getByText('Uptime Monitor')).toBeInTheDocument();
+  });
 });
diff --git a/static/app/views/alerts/wizard/index.tsx b/static/app/views/alerts/wizard/index.tsx
index 0d0ae0d534b296..31f781fd58e60c 100644
--- a/static/app/views/alerts/wizard/index.tsx
+++ b/static/app/views/alerts/wizard/index.tsx
@@ -116,7 +116,11 @@ function AlertWizard({organization, params, location, projectId}: AlertWizardPro
               priority="primary"
               to={{
                 pathname: `/organizations/${organization.slug}/alerts/new/${
-                  isMetricAlert ? AlertRuleType.METRIC : AlertRuleType.ISSUE
+                  isMetricAlert
+                    ? AlertRuleType.METRIC
+                    : alertOption === 'uptime_monitor'
+                      ? AlertRuleType.UPTIME
+                      : AlertRuleType.ISSUE
                 }/`,
                 query: {
                   ...(metricRuleTemplate ? metricRuleTemplate : {}),
diff --git a/static/app/views/alerts/wizard/options.tsx b/static/app/views/alerts/wizard/options.tsx
index 100f7e60061074..504a6595a36592 100644
--- a/static/app/views/alerts/wizard/options.tsx
+++ b/static/app/views/alerts/wizard/options.tsx
@@ -46,7 +46,8 @@ export type AlertType =
   | 'custom_metrics'
   | 'llm_tokens'
   | 'llm_cost'
-  | 'insights_metrics';
+  | 'insights_metrics'
+  | 'uptime_monitor';
 
 export enum MEPAlertsQueryType {
   ERROR = 0,
@@ -60,7 +61,7 @@ export enum MEPAlertsDataset {
   METRICS_ENHANCED = 'metricsEnhanced',
 }
 
-export type MetricAlertType = Exclude<AlertType, 'issues'>;
+export type MetricAlertType = Exclude<AlertType, 'issues' | 'uptime_monitor'>;
 
 export const DatasetMEPAlertQueryTypes: Record<
   Exclude<Dataset, 'search_issues' | Dataset.SESSIONS>, // IssuePlatform (search_issues) is not used in alerts, so we can exclude it here
@@ -90,6 +91,7 @@ export const AlertWizardAlertNames: Record<AlertType, string> = {
   llm_cost: t('LLM cost'),
   llm_tokens: t('LLM token usage'),
   insights_metrics: t('Insights Metric'),
+  uptime_monitor: t('Uptime Monitor'),
 };
 
 type AlertWizardCategory = {
@@ -131,6 +133,12 @@ export const getAlertWizardCategories = (org: Organization) => {
         options: ['llm_tokens', 'llm_cost'],
       });
     }
+    if (org.features.includes('uptime-api-create-update')) {
+      result.push({
+        categoryHeading: t('Uptime'),
+        options: ['uptime_monitor'],
+      });
+    }
     result.push({
       categoryHeading: hasCustomMetrics(org) ? t('Metrics') : t('Custom'),
       options: [hasCustomMetrics(org) ? 'custom_metrics' : 'custom_transactions'],
diff --git a/static/app/views/alerts/wizard/panelContent.tsx b/static/app/views/alerts/wizard/panelContent.tsx
index 7ff00ad376fc2e..b9fb29deb5fb46 100644
--- a/static/app/views/alerts/wizard/panelContent.tsx
+++ b/static/app/views/alerts/wizard/panelContent.tsx
@@ -182,4 +182,8 @@ export const AlertWizardPanelContent: Record<AlertType, PanelContent> = {
     ],
     illustration: diagramCrashFreeUsers,
   },
+  uptime_monitor: {
+    description: t('Monitor the availability and reliability of your web services.'),
+    examples: [t('When a URL is detected to be down, create an issue.')],
+  },
 };