monitorForm.tsx 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. import {Component, Fragment} from 'react';
  2. import {Observer} from 'mobx-react';
  3. import Access from 'app/components/acl/access';
  4. import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
  5. import {t, tct} from 'app/locale';
  6. import {Choices, GlobalSelection, Organization} from 'app/types';
  7. import withGlobalSelection from 'app/utils/withGlobalSelection';
  8. import withOrganization from 'app/utils/withOrganization';
  9. import Field from 'app/views/settings/components/forms/field';
  10. import Form from 'app/views/settings/components/forms/form';
  11. import NumberField from 'app/views/settings/components/forms/numberField';
  12. import SelectField from 'app/views/settings/components/forms/selectField';
  13. import TextCopyInput from 'app/views/settings/components/forms/textCopyInput';
  14. import TextField from 'app/views/settings/components/forms/textField';
  15. import MonitorModel from './monitorModel';
  16. import {Monitor, MonitorConfig, MonitorTypes, ScheduleType} from './types';
  17. const SCHEDULE_TYPES: [ScheduleType, string][] = [
  18. ['crontab', 'Crontab'],
  19. ['interval', 'Interval'],
  20. ];
  21. const MONITOR_TYPES: Choices = [['cron_job', 'Cron Job']];
  22. const INTERVALS = [
  23. ['minute', 'minute(s)'],
  24. ['hour', 'hour(s)'],
  25. ['day', 'day(s)'],
  26. ['week', 'week(s)'],
  27. ['month', 'month(s)'],
  28. ['year', 'year(s)'],
  29. ];
  30. type Props = {
  31. monitor?: Monitor;
  32. organization: Organization;
  33. selection: GlobalSelection;
  34. apiEndpoint: string;
  35. apiMethod: Form['props']['apiMethod'];
  36. onSubmitSuccess: Form['props']['onSubmitSuccess'];
  37. };
  38. class MonitorForm extends Component<Props> {
  39. form = new MonitorModel();
  40. formDataFromConfig(type: MonitorTypes, config: MonitorConfig) {
  41. const rv = {};
  42. switch (type) {
  43. case 'cron_job':
  44. rv['config.schedule_type'] = config.schedule_type;
  45. rv['config.checkin_margin'] = config.checkin_margin;
  46. rv['config.max_runtime'] = config.max_runtime;
  47. switch (config.schedule_type) {
  48. case 'interval':
  49. rv['config.schedule.frequency'] = config.schedule[0];
  50. rv['config.schedule.interval'] = config.schedule[1];
  51. break;
  52. case 'crontab':
  53. default:
  54. rv['config.schedule'] = config.schedule;
  55. }
  56. break;
  57. default:
  58. }
  59. return rv;
  60. }
  61. render() {
  62. const {monitor} = this.props;
  63. const selectedProjectId = this.props.selection.projects[0];
  64. const selectedProject = selectedProjectId
  65. ? this.props.organization.projects.find(p => p.id === selectedProjectId + '')
  66. : null;
  67. return (
  68. <Access access={['project:write']}>
  69. {({hasAccess}) => (
  70. <Form
  71. allowUndo
  72. requireChanges
  73. apiEndpoint={this.props.apiEndpoint}
  74. apiMethod={this.props.apiMethod}
  75. model={this.form}
  76. initialData={
  77. monitor
  78. ? {
  79. name: monitor.name,
  80. type: monitor.type,
  81. project: monitor.project.slug,
  82. ...this.formDataFromConfig(monitor.type, monitor.config),
  83. }
  84. : {
  85. project: selectedProject ? selectedProject.slug : null,
  86. }
  87. }
  88. onSubmitSuccess={this.props.onSubmitSuccess}
  89. >
  90. <Panel>
  91. <PanelHeader>{t('Details')}</PanelHeader>
  92. <PanelBody>
  93. {monitor && (
  94. <Field label={t('ID')}>
  95. <div className="controls">
  96. <TextCopyInput>{monitor.id}</TextCopyInput>
  97. </div>
  98. </Field>
  99. )}
  100. <SelectField
  101. name="project"
  102. label={t('Project')}
  103. disabled={!hasAccess}
  104. choices={this.props.organization.projects
  105. .filter(p => p.isMember)
  106. .map(p => [p.slug, p.slug])}
  107. required
  108. />
  109. <TextField
  110. name="name"
  111. placeholder={t('My Cron Job')}
  112. label={t('Name')}
  113. disabled={!hasAccess}
  114. required
  115. />
  116. </PanelBody>
  117. </Panel>
  118. <Panel>
  119. <PanelHeader>{t('Config')}</PanelHeader>
  120. <PanelBody>
  121. <SelectField
  122. name="type"
  123. label={t('Type')}
  124. disabled={!hasAccess}
  125. choices={MONITOR_TYPES}
  126. required
  127. />
  128. <Observer>
  129. {() => {
  130. switch (this.form.getValue('type')) {
  131. case 'cron_job':
  132. return (
  133. <Fragment>
  134. <NumberField
  135. name="config.max_runtime"
  136. label={t('Max Runtime')}
  137. disabled={!hasAccess}
  138. help={t(
  139. "The maximum runtime (in minutes) a check-in is allowed before it's marked as a failure."
  140. )}
  141. placeholder="e.g. 30"
  142. />
  143. <SelectField
  144. name="config.schedule_type"
  145. label={t('Schedule Type')}
  146. disabled={!hasAccess}
  147. choices={SCHEDULE_TYPES}
  148. required
  149. />
  150. </Fragment>
  151. );
  152. default:
  153. return null;
  154. }
  155. }}
  156. </Observer>
  157. <Observer>
  158. {() => {
  159. switch (this.form.getValue('config.schedule_type')) {
  160. case 'crontab':
  161. return (
  162. <Fragment>
  163. <TextField
  164. name="config.schedule"
  165. label={t('Schedule')}
  166. disabled={!hasAccess}
  167. placeholder="*/5 * * * *"
  168. required
  169. help={tct(
  170. 'Changes to the schedule will apply on the next check-in. See [link:Wikipedia] for crontab syntax.',
  171. {
  172. link: <a href="https://en.wikipedia.org/wiki/Cron" />,
  173. }
  174. )}
  175. />
  176. <NumberField
  177. name="config.checkin_margin"
  178. label={t('Check-in Margin')}
  179. disabled={!hasAccess}
  180. help={t(
  181. "The margin (in minutes) a check-in is allowed to exceed it's scheduled window before being treated as missed."
  182. )}
  183. placeholder="e.g. 30"
  184. />
  185. </Fragment>
  186. );
  187. case 'interval':
  188. return (
  189. <Fragment>
  190. <NumberField
  191. name="config.schedule.frequency"
  192. label={t('Frequency')}
  193. disabled={!hasAccess}
  194. placeholder="e.g. 1"
  195. required
  196. />
  197. <SelectField
  198. name="config.schedule.interval"
  199. label={t('Interval')}
  200. disabled={!hasAccess}
  201. choices={INTERVALS}
  202. required
  203. />
  204. <NumberField
  205. name="config.checkin_margin"
  206. label={t('Check-in Margin')}
  207. disabled={!hasAccess}
  208. help={t(
  209. "The margin (in minutes) a check-in is allowed to exceed it's scheduled window before being treated as missed."
  210. )}
  211. placeholder="e.g. 30"
  212. />
  213. </Fragment>
  214. );
  215. default:
  216. return null;
  217. }
  218. }}
  219. </Observer>
  220. </PanelBody>
  221. </Panel>
  222. </Form>
  223. )}
  224. </Access>
  225. );
  226. }
  227. }
  228. export default withGlobalSelection(withOrganization(MonitorForm));