WIP: Scheduler Stage 3 (Cron support)

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/actions/sessions.js

@@ -167,6 +167,7 @@ export function createScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  }
  )).then((res) => {
@@ -188,6 +189,7 @@ export function updateScheduledQuery(connectionId, payload = {}) {
  filename: payload.filename,
  refreshInterval: payload.refreshInterval,
  query: payload.query,
+ cronInterval: payload.cronInterval,
  connectionId
  };
 

app/components/Settings/Settings.react.js

@@ -272,9 +272,12 @@ class Settings extends Component {
  openScheduler() {
  this.setState({ scheduledQuery: this.props.preview.code }, () => {
  this.updateSelectedPanel(2, () => {
- // Setting scheduledQuery to `null` right after opening the Schedule panel ensures that,
- // when the user switches to another connector,
- // `initialCode` isn't set to the `scheduledQuery` used in the previous connector.
+ /*
+ * Setting scheduledQuery to `null` right after opening the Schedule panel
+ * ensures that when the user switches to another connector, or back
+ * and forth between tabs, `initialCode` isn't set to the
+ * `scheduledQuery` causing the create modal to be open..
+ */
  this.setState({ scheduledQuery: null });
  });
  });

app/components/Settings/cron-picker/cron-helpers.js

@@ -0,0 +1,49 @@
+export function mapHourToCronFormat(hour, amPm) {
+ if (hour === 12) {
+ if (amPm === 'AM') {
+ return 0;
+ }
+ } else if (amPm === 'PM') {
+ return hour + 12;
+ }
+
+ return hour;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Maximum_delay_value
+const MAXIMUM_REFRESH_INTERVAL = 2147483647 / 1000;
+export function getInitialCronMode(query) {
+ const { cronInterval, refreshInterval } = query;
+
+ if (cronInterval) {
+ if (cronInterval === '* * * * *') {
+ return 'MINUTE';
+ } else if (cronInterval === '*/5 * * * *') {
+ return 'FREQUENTLY';
+ } else if (cronInterval.match(/\S+? \* \* \* \*/)) {
+ return 'HOURLY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \*/)) {
+ return 'DAILY';
+ } else if (cronInterval.match(/\S+? \S+? \* \* \S+?/)) {
+ return 'WEEKLY';
+ } else if (cronInterval.match(/\S+? \S+? \S+? \* \*/)) {
+ return 'MONTHLY';
+ }
+ } else if (refreshInterval) {
+ if (refreshInterval <= 60 * (1 + 5) / 2) {
+ return 'MINUTE';
+ } else if (refreshInterval <= 60 * (5 + 60) / 2) {
+ return 'FREQUENTLY';
+ } else if (refreshInterval <= 60 * 60 * (1 + 24) / 2) {
+ return 'HOURLY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (1 + 7) / 2) {
+ return 'DAILY';
+ } else if (refreshInterval <= 24 * 60 * 60 * (7 + 30) / 2) {
+ return 'WEEKLY';
+ } else if (refreshInterval < MAXIMUM_REFRESH_INTERVAL) {
+ return 'MONTHLY';
+ }
+ } else {
+ return 'FREQUENTLY';
+ }
+}

app/components/Settings/cron-picker/cron-picker.css

@@ -0,0 +1,19 @@
+.time-picker .Select-control {
+ /* all other time related dropdowns */
+ width: 56px;
+}
+
+.cron-row {
+ vertical-align: center;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.cron-details-row {
+ align-items: center;
+ height: 56px;
+ background: #E8E8E8;
+ border-left: 4px solid #828282;
+ padding: 0 16px;
+ margin-bottom: 16px;
+}

app/components/Settings/cron-picker/cron-picker.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'react-select';
+import {find, propEq} from 'ramda';
+
+import MODES from './modes';
+
+import './cron-picker.css';
+
+import {Row} from '../../layout.jsx';
+
+// react-select requires options to have `label` and `value` keys
+const MODE_OPTIONS = MODES.map(currMode => ({
+ ...currMode,
+ label: currMode.name,
+ value: currMode.id
+}));
+
+const rowStyle = {
+ justifyContent: 'flex-start',
+ verticalAlign: 'center',
+ alignItems: 'center',
+ marginBottom: '16px'
+};
+
+export default class CronPicker extends React.Component {
+ static defaultProps = {
+ initialModeId: 'FREQUENTLY'
+ };
+
+ static propTypes = {
+ initialModeId: PropTypes.string,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ currentModeId: props.initialModeId
+ };
+
+ this.onModeChange = this.onModeChange.bind(this);
+ }
+
+ getModeById(id) {
+ return find(propEq('id', id), MODES);
+ }
+
+ onModeChange(selectedOption) {
+ const newMode = this.getModeById(selectedOption.value);
+ this.setState({currentModeId: newMode.id});
+
+ if (newMode.staticCronExpression) {
+ // new expression is fixed, so emit it immediately
+ this.props.onChange(newMode.staticCronExpression);
+ }
+ }
+
+ render() {
+ const ModeComponent = this.getModeById(this.state.currentModeId)
+ .component;
+
+ return (
+ <React.Fragment>
+ <Row style={rowStyle}>
+ <div style={{width: '50%', minWidth: '232px'}}>
+ <Select
+ className="mode-picker"
+ searchable={false}
+ clearable={false}
+ value={this.state.currentModeId}
+ onChange={this.onModeChange}
+ options={MODE_OPTIONS}
+ />
+ </div>
+ </Row>
+ {ModeComponent ? (
+ <ModeComponent onChange={this.props.onChange} />
+ ) : null}
+ </React.Fragment>
+ );
+ }
+}

app/components/Settings/cron-picker/details-row.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {Row} from '../../layout.jsx';
+
+const rowStyle = {justifyContent: 'flex-start'};
+
+function DetailsRow(props) {
+ return (
+ <Row style={rowStyle} className="cron-details-row">
+ {props.children}
+ </Row>
+ );
+}
+
+DetailsRow.propTypes = {
+ children: PropTypes.node
+};
+
+export default DetailsRow;

app/components/Settings/cron-picker/modes/daily.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {HourInput, MinuteInput, AmPmInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+import {mapHourToCronFormat} from '../cron-helpers.js';
+
+const id = 'DAILY';
+const name = 'Run every day';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialTime: {
+ hour: 12,
+ minute: 0,
+ amPm: 'AM'
+ }
+ };
+
+ static propTypes = {
+ initialTime: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ time: props.initialTime
+ };
+
+ props.onChange(this.toCronExpression(props.initialTime));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression({hour, minute, amPm}) {
+ // adjust hour to fit cron format if needed
+ const normalizedHour = mapHourToCronFormat(hour, amPm);
+ return `${minute} ${normalizedHour} * * *`;
+ }
+
+ onChange(key, selectedOption) {
+ const newValue = selectedOption.value;
+ const time = this.state.time;
+
+ time[key] = newValue;
+
+ this.setState({time});
+ this.props.onChange(this.toCronExpression(time));
+ }
+
+ render() {
+ const hourInput = (
+ <HourInput
+ style={{marginLeft: 8, marginRight: 2}}
+ value={this.state.time.hour}
+ onChange={this.onChange.bind(this, 'hour')}
+ />
+ );
+ const minuteInput = (
+ <MinuteInput
+ style={{marginLeft: 2, marginRight: 12}}
+ value={this.state.time.minute}
+ onChange={this.onChange.bind(this, 'minute')}
+ />
+ );
+ const amPmInput = (
+ <AmPmInput
+ style={{marginRight: 8, width: 64}}
+ value={this.state.time.amPm}
+ onChange={this.onChange.bind(this, 'amPm')}
+ />
+ );
+
+ return (
+ <DetailsRow>
+ at
+ {hourInput}:{minuteInput} {amPmInput}
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/frequently.js

@@ -0,0 +1,11 @@
+const id = 'FREQUENTLY';
+const name = 'Run every 5 minutes';
+
+const staticCronExpression = '*/5 * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};

app/components/Settings/cron-picker/modes/hourly.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {MinuteInput} from '../time-pickers.jsx';
+
+import DetailsRow from '../details-row.jsx';
+
+const id = 'HOURLY';
+const name = 'Run every hour';
+
+class component extends React.Component {
+ static defaultProps = {
+ initialMinute: 0
+ };
+
+ static propTypes = {
+ initialMinute: PropTypes.object,
+ onChange: PropTypes.func.isRequired
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ minute: props.initialMinute
+ };
+
+ props.onChange(this.toCronExpression(props.initialMinute));
+
+ this.onChange = this.onChange.bind(this);
+ }
+
+ toCronExpression(minute) {
+ return `${minute} * * * *`;
+ }
+
+ onChange(minuteOption) {
+ const newMinute = minuteOption.value;
+ this.setState({minute: newMinute});
+ this.props.onChange(this.toCronExpression(newMinute));
+ }
+
+ render() {
+ return (
+ <DetailsRow>
+ at minute
+ <MinuteInput
+ style={{marginLeft: '8px'}}
+ value={this.state.minute}
+ onChange={this.onChange}
+ />
+ </DetailsRow>
+ );
+ }
+}
+
+export default {
+ id,
+ name,
+ component
+};

app/components/Settings/cron-picker/modes/index.js

@@ -0,0 +1,8 @@
+import Minute from './minute.js';
+import Frequently from './frequently.js';
+import Hourly from './hourly.jsx';
+import Daily from './daily.jsx';
+import Weekly from './weekly.jsx';
+import Monthly from './monthly.jsx';
+
+export default [Minute, Frequently, Hourly, Daily, Weekly, Monthly];

app/components/Settings/cron-picker/modes/minute.js

@@ -0,0 +1,11 @@
+const id = 'MINUTE';
+const name = 'Run every minute';
+
+const staticCronExpression = '* * * * *';
+
+export default {
+ id,
+ name,
+ staticCronExpression,
+ component: null
+};