Skip to content

Commit 68e6e49

Browse files
malwilleymalwilley
authored
chore(aci): Metric detector create page improvements (#103101)
1 parent fa20269 commit 68e6e49

File tree

3 files changed

+41
-81
lines changed

3 files changed

+41
-81
lines changed

‎static/app/views/automations/list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import AutomationListTable from 'sentry/views/automations/components/automationL
2222
import {AutomationSearch} from 'sentry/views/automations/components/automationListTable/search';
2323
import {AUTOMATION_LIST_PAGE_LIMIT} from 'sentry/views/automations/constants';
2424
import {useAutomationsQuery} from 'sentry/views/automations/hooks';
25-
import {makeAutomationBasePathname} from 'sentry/views/automations/pathnames';
25+
import {makeAutomationCreatePathname} from 'sentry/views/automations/pathnames';
2626

2727
export default function AutomationsList() {
2828
useWorkflowEngineFeatureGate({redirect: true});
@@ -151,7 +151,7 @@ function Actions() {
151151
<Flex gap="sm">
152152
<AutomationFeedbackButton />
153153
<LinkButton
154-
to={`${makeAutomationBasePathname(organization.slug)}new/`}
154+
to={makeAutomationCreatePathname(organization.slug)}
155155
priority="primary"
156156
icon={<IconAdd />}
157157
size="sm"

‎static/app/views/automations/pathnames.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ export const makeAutomationBasePathname = (orgSlug: string) => {
44
return normalizeUrl(`/organizations/${orgSlug}/monitors/alerts/`);
55
};
66

7+
export const makeAutomationCreatePathname = (orgSlug: string) => {
8+
return normalizeUrl(`${makeAutomationBasePathname(orgSlug)}new/`);
9+
};
10+
711
export const makeAutomationDetailsPathname = (orgSlug: string, automationId: string) => {
812
return normalizeUrl(`${makeAutomationBasePathname(orgSlug)}${automationId}/`);
913
};

‎static/app/views/detectors/components/detectorTypeForm.tsx‎

Lines changed: 35 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {useTheme} from '@emotion/react';
22
import styled from '@emotion/styled';
33

4-
import {Flex} from 'sentry/components/core/layout';
5-
import {ExternalLink} from 'sentry/components/core/link';
4+
import {Flex, Stack} from 'sentry/components/core/layout';
5+
import {ExternalLink, Link} from 'sentry/components/core/link';
66
import {Radio} from 'sentry/components/core/radio';
77
import {Text} from 'sentry/components/core/text';
88
import Hook from 'sentry/components/hook';
@@ -11,16 +11,36 @@ import HookStore from 'sentry/stores/hookStore';
1111
import type {DetectorType} from 'sentry/types/workflowEngine/detectors';
1212
import {useLocation} from 'sentry/utils/useLocation';
1313
import {useNavigate} from 'sentry/utils/useNavigate';
14+
import useOrganization from 'sentry/utils/useOrganization';
15+
import {
16+
makeAutomationBasePathname,
17+
makeAutomationCreatePathname,
18+
} from 'sentry/views/automations/pathnames';
1419
import {getDetectorTypeLabel} from 'sentry/views/detectors/utils/detectorTypeConfig';
1520

1621
export function DetectorTypeForm() {
22+
const organization = useOrganization();
23+
1724
return (
18-
<FormContainer>
19-
<Header>
20-
<h3>{t('Select monitor type')}</h3>
21-
</Header>
25+
<Stack gap="xl">
26+
<Stack gap="sm">
27+
<Text size="lg" bold>
28+
{t('Select monitor type')}
29+
</Text>
30+
<Text as="p">
31+
{tct(
32+
'Do you want to alert existing issues? Create a [newAlertLink:new alert], or [connectAlertLink:connect an existing one].',
33+
{
34+
newAlertLink: <Link to={makeAutomationCreatePathname(organization.slug)} />,
35+
connectAlertLink: (
36+
<Link to={makeAutomationBasePathname(organization.slug)} />
37+
),
38+
}
39+
)}
40+
</Text>
41+
</Stack>
2242
<MonitorTypeField />
23-
</FormContainer>
43+
</Stack>
2444
);
2545
}
2646

@@ -122,12 +142,6 @@ function MonitorTypeField() {
122142
);
123143
}
124144

125-
const FormContainer = styled('div')`
126-
display: flex;
127-
flex-direction: column;
128-
gap: ${p => p.theme.space.xl};
129-
`;
130-
131145
const RadioOptions = styled('div')`
132146
display: flex;
133147
flex-direction: column;
@@ -179,22 +193,6 @@ const OptionInfo = styled('div')`
179193
font-size: ${p => p.theme.fontSize.md};
180194
`;
181195

182-
const Header = styled('div')`
183-
display: flex;
184-
flex-direction: column;
185-
gap: ${p => p.theme.space.sm};
186-
margin-top: ${p => p.theme.space.xl};
187-
margin-bottom: ${p => p.theme.space.md};
188-
189-
h3 {
190-
margin: 0;
191-
font-size: ${p => p.theme.fontSize.lg};
192-
}
193-
p {
194-
margin: 0;
195-
}
196-
`;
197-
198196
const Visualization = styled('div')`
199197
display: none;
200198
height: 56px;
@@ -214,61 +212,19 @@ const Visualization = styled('div')`
214212

215213
function MetricVisualization() {
216214
const theme = useTheme();
215+
const danger = theme.red300;
216+
const defaultChartColor = theme.chart.getColorPalette(0)[0] ?? theme.purple400;
217217
return (
218-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 480 56">
219-
<g opacity=".3">
220-
<path
221-
fill="url(#a)"
222-
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"
223-
/>
224-
<path
225-
stroke={theme.subText}
226-
strokeLinecap="round"
227-
strokeWidth="1.5"
228-
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"
229-
opacity=".8"
230-
/>
231-
</g>
218+
<svg fill="none" viewBox="0 0 480 56">
232219
<path
233-
stroke={theme.red300}
234-
strokeLinecap="round"
235-
strokeWidth="4"
236-
d="M233.675 10.658h245.414"
237-
opacity=".8"
238-
/>
239-
<path
240-
stroke={theme.subText}
241-
strokeLinecap="round"
242-
strokeWidth="4"
243-
d="M2.698 36.355H231.51"
244-
opacity=".6"
220+
fill={defaultChartColor}
221+
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"
245222
/>
223+
<path fill={danger} d="M0-.5h480v29H0z" fillOpacity=".1" />
246224
<path
247-
stroke={theme.subText}
248-
strokeDasharray="4 4"
249-
strokeLinecap="round"
250-
d="M232.953 11.628v24.727"
251-
opacity=".6"
225+
fill={danger}
226+
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"
252227
/>
253-
<path
254-
stroke={theme.blue100}
255-
strokeLinecap="round"
256-
strokeOpacity=".06"
257-
d="M232.953 5.81v49.938"
258-
/>
259-
<defs>
260-
<linearGradient
261-
id="a"
262-
x1="276.405"
263-
x2="276.405"
264-
y1="56.016"
265-
y2="9.65"
266-
gradientUnits="userSpaceOnUse"
267-
>
268-
<stop stopColor={theme.subText} stopOpacity="0" />
269-
<stop offset="1" stopColor={theme.subText} stopOpacity=".2" />
270-
</linearGradient>
271-
</defs>
272228
</svg>
273229
);
274230
}

0 commit comments

Comments
 (0)