diff --git a/static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx b/static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx index fd14b890ae989d..7afa733a630c05 100644 --- a/static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx +++ b/static/app/views/alerts/rules/uptime/uptimeAlertForm.tsx @@ -82,6 +82,7 @@ export function UptimeAlertForm({project, handleDelete, rule}: Props) { : {projectSlug: project.slug, method: 'GET', headers: []}; const [formModel] = useState(() => new FormModel()); + const [advancedVisible, setAdvancedVisible] = useState(false); const [knownEnvironments, setEnvironments] = useState([]); const [newEnvironment, setNewEnvironment] = useState(undefined); @@ -186,49 +187,6 @@ export function UptimeAlertForm({project, handleDelete, rule}: Props) { - ({ - value, - label: t('Every %s', getDuration(value)), - }))} - name="intervalSeconds" - label={t('Interval')} - defaultValue={60} - flexibleControlStateSize - showHelpInTooltip={{isHoverable: true}} - help={({model}) => - tct( - 'The amount of time between each uptime check request. Selecting a period of [interval] means it will take at least [expectedFailureInterval] until you are notified of a failure. [link:Learn more].', - { - link: ( - - ), - interval: ( - {getDuration(model.getValue('intervalSeconds'))} - ), - expectedFailureInterval: ( - - {getDuration(Number(model.getValue('intervalSeconds')) * 3)} - - ), - } - ) - } - required - /> - getDuration((value || 0) / 1000, 2, true)} - flexibleControlStateSize - required - /> - - - !['GET', 'HEAD'].includes(model.getValue('method')) - } - rows={4} - maxRows={15} - autosize - monospace - placeholder='{"key": "value"}' - flexibleControlStateSize - /> - - ), - } - )} - flexibleControlStateSize - /> + setAdvancedVisible(v => !v)}> + {advancedVisible ? '▼' : '▶'} + {t('Advanced Configuration')} + + {advancedVisible && ( + + ({ + value, + label: t('Every %s', getDuration(value)), + }))} + name="intervalSeconds" + label={t('Interval')} + defaultValue={60} + flexibleControlStateSize + showHelpInTooltip={{isHoverable: true}} + help={({model}) => + tct( + 'The amount of time between each uptime check request. Selecting a period of [interval] means it will take at least [expectedFailureInterval] until you are notified of a failure. [link:Learn more].', + { + link: ( + + ), + interval: ( + {getDuration(model.getValue('intervalSeconds'))} + ), + expectedFailureInterval: ( + + {getDuration(Number(model.getValue('intervalSeconds')) * 3)} + + ), + } + ) + } + required + /> + getDuration((value || 0) / 1000, 2, true)} + flexibleControlStateSize + required + /> + + + !['GET', 'HEAD'].includes(model.getValue('method')) + } + rows={4} + maxRows={15} + autosize + monospace + placeholder='{"key": "value"}' + flexibleControlStateSize + /> + + ), + } + )} + flexibleControlStateSize + /> + + )} {tct( @@ -387,3 +396,14 @@ const ConfigurationPanel = styled(Panel)` } } `; + +const AdvancedConfigToggle = styled('div')` + cursor: pointer; + display: flex; + align-items: center; + gap: ${space(1)}; + color: ${p => p.theme.subText}; + margin-top: ${space(2)}; + font-size: ${p => p.theme.fontSizeSmall}; + margin-left: ${space(4)}; +`;