monitorForm.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. import {Component, Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Observer} from 'mobx-react';
  4. import FieldGroup from 'sentry/components/forms/fieldGroup';
  5. import NumberField from 'sentry/components/forms/fields/numberField';
  6. import SelectField from 'sentry/components/forms/fields/selectField';
  7. import SentryProjectSelectorField from 'sentry/components/forms/fields/sentryProjectSelectorField';
  8. import TextField from 'sentry/components/forms/fields/textField';
  9. import Form, {FormProps} from 'sentry/components/forms/form';
  10. import FormModel from 'sentry/components/forms/model';
  11. import ExternalLink from 'sentry/components/links/externalLink';
  12. import {Panel, PanelAlert, PanelBody, PanelHeader} from 'sentry/components/panels';
  13. import TextCopyInput from 'sentry/components/textCopyInput';
  14. import TimeSince from 'sentry/components/timeSince';
  15. import {t, tct, tn} from 'sentry/locale';
  16. import {PageFilters, Project, SelectValue} from 'sentry/types';
  17. import commonTheme from 'sentry/utils/theme';
  18. import withPageFilters from 'sentry/utils/withPageFilters';
  19. import withProjects from 'sentry/utils/withProjects';
  20. import {Monitor, MonitorConfig, MonitorTypes, ScheduleType} from './types';
  21. const SCHEDULE_TYPES: SelectValue<ScheduleType>[] = [
  22. {value: 'crontab', label: 'Crontab'},
  23. {value: 'interval', label: 'Interval'},
  24. ];
  25. const DEFAULT_MONITOR_TYPE = 'cron_job';
  26. const getIntervals = (n: number): SelectValue<string>[] => [
  27. {value: 'minute', label: tn('minute', 'minutes', n)},
  28. {value: 'hour', label: tn('hour', 'hours', n)},
  29. {value: 'day', label: tn('day', 'days', n)},
  30. {value: 'week', label: tn('week', 'weeks', n)},
  31. {value: 'month', label: tn('month', 'months', n)},
  32. {value: 'year', label: tn('year', 'years', n)},
  33. ];
  34. type Props = {
  35. apiEndpoint: string;
  36. apiMethod: FormProps['apiMethod'];
  37. onSubmitSuccess: FormProps['onSubmitSuccess'];
  38. projects: Project[];
  39. selection: PageFilters;
  40. monitor?: Monitor;
  41. submitLabel?: string;
  42. };
  43. type TransformedData = {
  44. config?: Partial<MonitorConfig>;
  45. };
  46. function transformData(_data: Record<string, any>, model: FormModel) {
  47. return model.fields.toJSON().reduce<TransformedData>((data, [k, v]) => {
  48. if (k.indexOf('config.') !== 0) {
  49. data[k] = v;
  50. return data;
  51. }
  52. if (!data.config) {
  53. data.config = {};
  54. }
  55. if (k === 'config.schedule.frequency' || k === 'config.schedule.interval') {
  56. if (!Array.isArray(data.config.schedule)) {
  57. data.config.schedule = [null, null];
  58. }
  59. }
  60. if (k === 'config.schedule.frequency') {
  61. data.config!.schedule![0] = parseInt(v as string, 10);
  62. } else if (k === 'config.schedule.interval') {
  63. data.config!.schedule![1] = v;
  64. } else {
  65. data.config[k.substr(7)] = v;
  66. }
  67. return data;
  68. }, {});
  69. }
  70. class MonitorForm extends Component<Props> {
  71. form = new FormModel({transformData});
  72. formDataFromConfig(type: MonitorTypes, config: MonitorConfig) {
  73. const rv = {};
  74. switch (type) {
  75. case 'cron_job':
  76. rv['config.schedule_type'] = config.schedule_type;
  77. rv['config.checkin_margin'] = config.checkin_margin;
  78. rv['config.max_runtime'] = config.max_runtime;
  79. switch (config.schedule_type) {
  80. case 'interval':
  81. rv['config.schedule.frequency'] = config.schedule[0];
  82. rv['config.schedule.interval'] = config.schedule[1];
  83. break;
  84. case 'crontab':
  85. default:
  86. rv['config.schedule'] = config.schedule;
  87. }
  88. break;
  89. default:
  90. }
  91. return rv;
  92. }
  93. render() {
  94. const {monitor, submitLabel} = this.props;
  95. const selectedProjectId = this.props.selection.projects[0];
  96. const selectedProject = selectedProjectId
  97. ? this.props.projects.find(p => p.id === selectedProjectId + '')
  98. : null;
  99. return (
  100. <Form
  101. allowUndo
  102. requireChanges
  103. apiEndpoint={this.props.apiEndpoint}
  104. apiMethod={this.props.apiMethod}
  105. model={this.form}
  106. initialData={
  107. monitor
  108. ? {
  109. name: monitor.name,
  110. type: monitor.type ?? DEFAULT_MONITOR_TYPE,
  111. project: monitor.project.slug,
  112. ...this.formDataFromConfig(monitor.type, monitor.config),
  113. }
  114. : {
  115. project: selectedProject ? selectedProject.slug : null,
  116. type: DEFAULT_MONITOR_TYPE,
  117. }
  118. }
  119. onSubmitSuccess={this.props.onSubmitSuccess}
  120. submitLabel={submitLabel}
  121. >
  122. <Panel>
  123. <PanelHeader>{t('Details')}</PanelHeader>
  124. <PanelBody>
  125. {monitor && (
  126. <FieldGroup label={t('ID')}>
  127. <div className="controls">
  128. <TextCopyInput>{monitor.id}</TextCopyInput>
  129. </div>
  130. </FieldGroup>
  131. )}
  132. <SentryProjectSelectorField
  133. name="project"
  134. label={t('Project')}
  135. projects={this.props.projects.filter(project => project.isMember)}
  136. valueIsSlug
  137. help={t(
  138. "Select the project which contains the recurring job you'd like to monitor."
  139. )}
  140. required
  141. />
  142. <TextField
  143. name="name"
  144. placeholder={t('My Cron Job')}
  145. label={t('Name your cron monitor')}
  146. required
  147. />
  148. </PanelBody>
  149. </Panel>
  150. <Panel>
  151. <PanelHeader>{t('Config')}</PanelHeader>
  152. <PanelBody>
  153. {monitor !== undefined && (
  154. <PanelAlert type="info">
  155. {tct(
  156. 'Any changes you make to the execution schedule will only be applied after the next expected check-in [nextCheckin].',
  157. {
  158. nextCheckin: (
  159. <strong>
  160. <TimeSince date={monitor.nextCheckIn} />
  161. </strong>
  162. ),
  163. }
  164. )}
  165. </PanelAlert>
  166. )}
  167. <NumberField
  168. name="config.max_runtime"
  169. label={t('Max Runtime')}
  170. help={t(
  171. "Set the number of minutes a recurring job is allowed to run before it's considered failed"
  172. )}
  173. placeholder="e.g. 30"
  174. />
  175. <SelectField
  176. name="config.schedule_type"
  177. label={t('Schedule Type')}
  178. options={SCHEDULE_TYPES}
  179. required
  180. />
  181. <Observer>
  182. {() => {
  183. switch (this.form.getValue('config.schedule_type')) {
  184. case 'crontab':
  185. return (
  186. <Fragment>
  187. <TextField
  188. name="config.schedule"
  189. label={t('Schedule')}
  190. placeholder="*/5 * * * *"
  191. required
  192. help={tct(
  193. 'Any schedule changes will be applied to the next check-in. See [link:Wikipedia] for crontab syntax.',
  194. {
  195. link: (
  196. <ExternalLink href="https://en.wikipedia.org/wiki/Cron" />
  197. ),
  198. }
  199. )}
  200. css={{input: {fontFamily: commonTheme.text.familyMono}}}
  201. />
  202. <NumberField
  203. name="config.checkin_margin"
  204. label={t('Check-in Margin')}
  205. help={t(
  206. "The max error margin (in minutes) before a check-in is considered missed. If you don't expect your job to start immediately at the scheduled time, expand this margin to account for delays."
  207. )}
  208. placeholder="e.g. 30"
  209. />
  210. </Fragment>
  211. );
  212. case 'interval':
  213. return (
  214. <Fragment>
  215. <CombinedField>
  216. <FieldGroup
  217. label={t('Frequency')}
  218. help={t(
  219. 'The amount of time between each job execution. Example, every 5 hours.'
  220. )}
  221. stacked
  222. required
  223. />
  224. <StyledNumberField
  225. name="config.schedule.frequency"
  226. label={t('Frequency')}
  227. placeholder="e.g. 1"
  228. hideLabel
  229. required
  230. />
  231. <StyledSelectField
  232. name="config.schedule.interval"
  233. label={t('Interval')}
  234. options={getIntervals(
  235. Number(this.form.getValue('config.schedule.frequency') ?? 1)
  236. )}
  237. hideLabel
  238. required
  239. />
  240. </CombinedField>
  241. <NumberField
  242. name="config.checkin_margin"
  243. label={t('Check-in Margin')}
  244. help={t(
  245. "The max error margin (in minutes) before a check-in is considered missed. If you don't expect your job to start immediately at the scheduled time, expand this margin to account for delays."
  246. )}
  247. placeholder="e.g. 30"
  248. />
  249. </Fragment>
  250. );
  251. default:
  252. return null;
  253. }
  254. }}
  255. </Observer>
  256. </PanelBody>
  257. </Panel>
  258. </Form>
  259. );
  260. }
  261. }
  262. const CombinedField = styled('div')`
  263. display: grid;
  264. grid-template-columns: 50% 1fr 1fr;
  265. align-items: center;
  266. border-bottom: 1px solid ${p => p.theme.innerBorder};
  267. `;
  268. const StyledNumberField = styled(NumberField)`
  269. padding: 0;
  270. border-bottom: none;
  271. `;
  272. const StyledSelectField = styled(SelectField)`
  273. padding-left: 0;
  274. `;
  275. export default withPageFilters(withProjects(MonitorForm));