Skip to content

chore(aci): Metric detector create page improvements #103101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 10, 2025
Merged

chore(aci): Metric detector create page improvements #103101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0d7242
chore(aci): Metric detector create page improvements
malwilley Nov 10, 2025
a864432
Use theme colors
malwilley Nov 10, 2025
c8c17b2
Run svg through svgo
malwilley Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions static/app/views/automations/list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand Down Expand Up @@ -151,7 +151,7 @@ function Actions() {
<Flex gap="sm">
<AutomationFeedbackButton />
<LinkButton
to={`${makeAutomationBasePathname(organization.slug)}new/`}
to={makeAutomationCreatePathname(organization.slug)}
priority="primary"
icon={<IconAdd />}
size="sm"
Expand Down
4 changes: 4 additions & 0 deletions static/app/views/automations/pathnames.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}/`);
};
Expand Down
114 changes: 35 additions & 79 deletions static/app/views/detectors/components/detectorTypeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (
<FormContainer>
<Header>
<h3>{t('Select monitor type')}</h3>
</Header>
<Stack gap="xl">
<Stack gap="sm">
<Text size="lg" bold>
{t('Select monitor type')}
</Text>
<Text as="p">
{tct(
'Do you want to alert existing issues? Create a [newAlertLink:new alert], or [connectAlertLink:connect an existing one].',
{
newAlertLink: <Link to={makeAutomationCreatePathname(organization.slug)} />,
connectAlertLink: (
<Link to={makeAutomationBasePathname(organization.slug)} />
),
}
)}
</Text>
</Stack>
<MonitorTypeField />
</FormContainer>
</Stack>
);
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -214,61 +212,19 @@ const Visualization = styled('div')`

function MetricVisualization() {
const theme = useTheme();
const danger = theme.red300;
const defaultChartColor = theme.chart.getColorPalette(0)[0] ?? theme.purple400;
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 480 56">
<g opacity=".3">
<path
fill="url(#a)"
d="M10.694 34.208 1.391 50.067a1 1 0 0 0-.137.506v4.443a1 1 0 0 0 1 1h478a1 1 0 0 0 1-1V17.224a1 1 0 0 0-.37-.777l-9.943-8.067a1 1 0 0 0-.63-.224h-19.904a1 1 0 0 0-.262.035l-20.053 5.431a1 1 0 0 1-.426.021l-9.411-1.57a.998.998 0 0 0-.354.004l-10.144 1.96a1 1 0 0 1-.524-.04l-9.462-3.356a1 1 0 0 0-.176-.044l-9.804-1.574a1 1 0 0 0-.579.08l-10.034 4.652a1 1 0 0 1-.579.08l-9.775-1.569a1.01 1.01 0 0 1-.23-.065l-9.716-4.093a.999.999 0 0 0-.744-.013l-9.821 3.743L338.3 14.45c-.121.031-.247.04-.372.025l-9.717-1.17a1.001 1.001 0 0 0-.554.092l-9.766 4.702a1 1 0 0 1-.351.096l-9.499.792a.992.992 0 0 0-.235.049l-10.492 3.526a1 1 0 0 1-.733-.038l-8.477-3.856a.997.997 0 0 1-.32-.232L277.396 7.183a1 1 0 0 0-1.558.11l-8.908 12.92a1 1 0 0 1-1.406.246l-9.062-6.482a.998.998 0 0 0-.681-.182l-9.577.96a1 1 0 0 1-.472-.067l-9.007-3.613a1 1 0 0 0-1.313.589l-9.219 25.573a1 1 0 0 1-.921.66l-9.9.192-9.999-.803a.999.999 0 0 0-.386.045l-9.855 3.163a1.005 1.005 0 0 1-.313.048l-30.742-.203a.893.893 0 0 1-.155-.013l-19.843-3.247a.984.984 0 0 0-.161-.013h-10.766a.996.996 0 0 1-.262-.035l-8.891-2.42-10.108-1.825a1.002 1.002 0 0 0-.178-.015h-10.89l-10.003.802a.999.999 0 0 1-.379-.042l-9.409-2.945a1 1 0 0 0-.427-.037L71.93 31.941a.968.968 0 0 1-.178.007L50.666 30.93H31.662a1 1 0 0 0-.406.086l-10.1 4.487a1 1 0 0 1-.61.065l-8.785-1.832a1 1 0 0 0-1.067.472Z"
/>
<path
stroke={theme.subText}
strokeLinecap="round"
strokeWidth="1.5"
d="m1.254 50.301 9.44-16.093a1 1 0 0 1 1.067-.472l8.785 1.832a1 1 0 0 0 .61-.065l10.1-4.487a1 1 0 0 1 .406-.086h19.004l21.087 1.018c.06.003.119 0 .178-.007l10.674-1.392a1 1 0 0 1 .427.037l9.41 2.945c.122.038.25.053.378.042l10.003-.802h10.89c.06 0 .119.005.178.015l10.108 1.825 8.891 2.42a.996.996 0 0 0 .262.035h10.766c.054 0 .108.004.161.013l19.843 3.247a.99.99 0 0 0 .155.013l30.742.203c.106.001.212-.015.313-.047l9.855-3.164a.999.999 0 0 1 .386-.045l9.999.803 9.9-.191a1 1 0 0 0 .921-.661l9.219-25.573a1 1 0 0 1 1.313-.59l9.007 3.614a1 1 0 0 0 .472.067l9.577-.96a.998.998 0 0 1 .681.181l9.062 6.483a1.001 1.001 0 0 0 1.406-.245l8.908-12.92a1 1 0 0 1 1.558-.111l10.388 11.253c.09.098.199.177.32.232l8.477 3.857c.231.104.493.118.733.037l10.492-3.526a.997.997 0 0 1 .235-.049l9.499-.792a.999.999 0 0 0 .351-.096l9.766-4.702a.998.998 0 0 1 .554-.092l9.717 1.17c.125.015.251.006.372-.025l10.013-2.612 9.821-3.743a.999.999 0 0 1 .744.013l9.716 4.093c.074.03.151.053.23.065l9.775 1.57a1 1 0 0 0 .579-.08l10.034-4.653a1 1 0 0 1 .579-.08l9.804 1.574a1 1 0 0 1 .176.044l9.462 3.356a1 1 0 0 0 .524.04l10.144-1.96a1 1 0 0 1 .354-.005l9.411 1.571a1 1 0 0 0 .426-.02l20.053-5.432a1 1 0 0 1 .262-.035h19.904a1 1 0 0 1 .63.224l10.313 8.367"
opacity=".8"
/>
</g>
<svg fill="none" viewBox="0 0 480 56">
<path
stroke={theme.red300}
strokeLinecap="round"
strokeWidth="4"
d="M233.675 10.658h245.414"
opacity=".8"
/>
<path
stroke={theme.subText}
strokeLinecap="round"
strokeWidth="4"
d="M2.698 36.355H231.51"
opacity=".6"
fill={defaultChartColor}
d="M4 50.5 0 56h480v-7.5l-4-4-4-2-4.1-6.5-4 2-4 3-4.1-5-3.5-1.5-4.6 9-4-2-4 1-4 3-4.1 4-4 .5-4 1-4.1-1.5-4-5.5-4-3.5-4.1 3.5-4-1.5-4 2.5-4.1-4.5-4 .5-4-3-4.1 3h-4l-4 3-4.1-1.5-4 5-4 3-4.1-18-4 3.5-4-22-4.1 34-4-4.5-4-2-4.1-4-4 5.5-4-5.5-4.1-5-4 6.5-4 4.5h-4.1l-4-4.5-4 4-4.1 4-4 2.5-4-.5-4.1-4-4 1.5-4-4.5-4.1 2.5-4-6.5-4-3.5-4.1 3-4-3.5-4 8-4.1-4.5-4 1-4-4L238 40l-4 4.5-4 5-4.1-1h-4l-4 1.5-4.1 1.5-4-6-4 5.5-4.1 2.3-4-2.8-4 3.5-4.1-3-4 2-4-.7-4.1-.8-4-6-4 4.5-4.1 2.3-4-1.3-4 2-4.1-.5-4 1.5h-4l-4.1-1.5-4 2.5-4-1H129l-4-3.5-4 2-4.1-1-4 2-4-1.5-4.1-1.5-4 1-4 2-4.1-2-4 2.5-4-1.5-4.1 2.5-4-2h-4l-4.1-5.5-4-2.5-4.1-7.5-4-30.5-4.6 31.5-3.5 3-4-2-4 2-4.1 3.5-4-3-4 2-4.1-2-4 6.5-4 4.5-4.1-3.5-4 2.5z"
/>
<path fill={danger} d="M0-.5h480v29H0z" fillOpacity=".1" />
<path
stroke={theme.subText}
strokeDasharray="4 4"
strokeLinecap="round"
d="M232.953 11.628v24.727"
opacity=".6"
fill={danger}
d="M0 28.5v.3h1v-.5H0zm3 0v.3h2v-.5H3zm4 0v.3h2v-.5H7zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h2v-.5h-2zm4 0v.3h1v-.5h-1zm-479 0v.5h1v-1H0zm3 0v.5h2v-1H3zm4 0v.5h2v-1H7zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h2v-1h-2zm4 0v.5h1v-1h-1z"
/>
<path
stroke={theme.blue100}
strokeLinecap="round"
strokeOpacity=".06"
d="M232.953 5.81v49.938"
/>
<defs>
<linearGradient
id="a"
x1="276.405"
x2="276.405"
y1="56.016"
y2="9.65"
gradientUnits="userSpaceOnUse"
>
<stop stopColor={theme.subText} stopOpacity="0" />
<stop offset="1" stopColor={theme.subText} stopOpacity=".2" />
</linearGradient>
</defs>
</svg>
);
}
Expand Down
Loading