From f0d7242f3f65fdd08cd4196ff79222f57b2cd492 Mon Sep 17 00:00:00 2001 From: Malachi Willey Date: Mon, 10 Nov 2025 14:02:14 -0800 Subject: [PATCH 1/3] chore(aci): Metric detector create page improvements --- static/app/views/automations/list.tsx | 4 +- static/app/views/automations/pathnames.tsx | 4 + .../detectors/components/detectorTypeForm.tsx | 118 ++++++------------ 3 files changed, 47 insertions(+), 79 deletions(-) diff --git a/static/app/views/automations/list.tsx b/static/app/views/automations/list.tsx index 4ddcdc68d78cba..0006d4320fc015 100644 --- a/static/app/views/automations/list.tsx +++ b/static/app/views/automations/list.tsx @@ -22,7 +22,7 @@ import AutomationListTable from 'sentry/views/automations/components/automationL import {AutomationSearch} from 'sentry/views/automations/components/automationListTable/search'; import {AUTOMATION_LIST_PAGE_LIMIT} from 'sentry/views/automations/constants'; import {useAutomationsQuery} from 'sentry/views/automations/hooks'; -import {makeAutomationBasePathname} from 'sentry/views/automations/pathnames'; +import {makeAutomationCreatePathname} from 'sentry/views/automations/pathnames'; export default function AutomationsList() { useWorkflowEngineFeatureGate({redirect: true}); @@ -151,7 +151,7 @@ function Actions() { } size="sm" diff --git a/static/app/views/automations/pathnames.tsx b/static/app/views/automations/pathnames.tsx index ab25aeb2c07faf..d6f4cb02838cf7 100644 --- a/static/app/views/automations/pathnames.tsx +++ b/static/app/views/automations/pathnames.tsx @@ -4,6 +4,10 @@ export const makeAutomationBasePathname = (orgSlug: string) => { return normalizeUrl(`/organizations/${orgSlug}/monitors/alerts/`); }; +export const makeAutomationCreatePathname = (orgSlug: string) => { + return normalizeUrl(`${makeAutomationBasePathname(orgSlug)}new/`); +}; + export const makeAutomationDetailsPathname = (orgSlug: string, automationId: string) => { return normalizeUrl(`${makeAutomationBasePathname(orgSlug)}${automationId}/`); }; diff --git a/static/app/views/detectors/components/detectorTypeForm.tsx b/static/app/views/detectors/components/detectorTypeForm.tsx index 916e3eb64dc13a..2b7cc8a2129901 100644 --- a/static/app/views/detectors/components/detectorTypeForm.tsx +++ b/static/app/views/detectors/components/detectorTypeForm.tsx @@ -1,8 +1,8 @@ import {useTheme} from '@emotion/react'; import styled from '@emotion/styled'; -import {Flex} from 'sentry/components/core/layout'; -import {ExternalLink} from 'sentry/components/core/link'; +import {Flex, Stack} from 'sentry/components/core/layout'; +import {ExternalLink, Link} from 'sentry/components/core/link'; import {Radio} from 'sentry/components/core/radio'; import {Text} from 'sentry/components/core/text'; import Hook from 'sentry/components/hook'; @@ -11,16 +11,36 @@ import HookStore from 'sentry/stores/hookStore'; import type {DetectorType} from 'sentry/types/workflowEngine/detectors'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; +import useOrganization from 'sentry/utils/useOrganization'; +import { + makeAutomationBasePathname, + makeAutomationCreatePathname, +} from 'sentry/views/automations/pathnames'; import {getDetectorTypeLabel} from 'sentry/views/detectors/utils/detectorTypeConfig'; export function DetectorTypeForm() { + const organization = useOrganization(); + return ( - -
-

{t('Select monitor type')}

-
+ + + + {t('Select monitor type')} + + + {tct( + 'Do you want to alert existing issues? Create a [newAlertLink:new alert], or [connectAlertLink:connect an existing one].', + { + newAlertLink: , + connectAlertLink: ( + + ), + } + )} + + - + ); } @@ -122,12 +142,6 @@ function MonitorTypeField() { ); } -const FormContainer = styled('div')` - display: flex; - flex-direction: column; - gap: ${p => p.theme.space.xl}; -`; - const RadioOptions = styled('div')` display: flex; flex-direction: column; @@ -179,22 +193,6 @@ const OptionInfo = styled('div')` font-size: ${p => p.theme.fontSize.md}; `; -const Header = styled('div')` - display: flex; - flex-direction: column; - gap: ${p => p.theme.space.sm}; - margin-top: ${p => p.theme.space.xl}; - margin-bottom: ${p => p.theme.space.md}; - - h3 { - margin: 0; - font-size: ${p => p.theme.fontSize.lg}; - } - p { - margin: 0; - } -`; - const Visualization = styled('div')` display: none; height: 56px; @@ -213,61 +211,27 @@ const Visualization = styled('div')` `; function MetricVisualization() { - const theme = useTheme(); return ( - - + + + + + + - - - - - - - - + + + ); From a864432dc466fe25883239181dd6a56015e36d6a Mon Sep 17 00:00:00 2001 From: Malachi Willey Date: Mon, 10 Nov 2025 14:17:07 -0800 Subject: [PATCH 2/3] Use theme colors --- .../app/views/detectors/components/detectorTypeForm.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/static/app/views/detectors/components/detectorTypeForm.tsx b/static/app/views/detectors/components/detectorTypeForm.tsx index 2b7cc8a2129901..75bd30adbdb5ed 100644 --- a/static/app/views/detectors/components/detectorTypeForm.tsx +++ b/static/app/views/detectors/components/detectorTypeForm.tsx @@ -211,20 +211,22 @@ const Visualization = styled('div')` `; function MetricVisualization() { + const theme = useTheme(); + const danger = theme.red300; return ( - + From c8c17b2d270e1041e71b29f5895fc82a78d05729 Mon Sep 17 00:00:00 2001 From: Malachi Willey Date: Mon, 10 Nov 2025 14:21:55 -0800 Subject: [PATCH 3/3] Run svg through svgo --- .../detectors/components/detectorTypeForm.tsx | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/static/app/views/detectors/components/detectorTypeForm.tsx b/static/app/views/detectors/components/detectorTypeForm.tsx index 75bd30adbdb5ed..091094425899ef 100644 --- a/static/app/views/detectors/components/detectorTypeForm.tsx +++ b/static/app/views/detectors/components/detectorTypeForm.tsx @@ -213,28 +213,18 @@ const Visualization = styled('div')` function MetricVisualization() { const theme = useTheme(); const danger = theme.red300; + const defaultChartColor = theme.chart.getColorPalette(0)[0] ?? theme.purple400; return ( - - - - - - - - - - - - - - + + + + ); }