fix(scheduling): timezone support (#1318)

src/common/intl/messages.js

@@ -161,7 +161,8 @@ var messages = {
   schedulingReset: 'Reset',
   unknownSchedule: 'Unknown',
   timezonePickerServerValue: 'Xo-server timezone:',
-  timezonePickerUseLocal: 'Use local timezone',
+  timezonePickerUseLocalTime: 'Web browser timezone',
+  timezonePickerUseServerTime: 'Xo-server timezone',
   serverTimezoneOption: 'Server timezone ({value})',
   cronPattern: 'Cron Pattern:',
   backupEditNotFoundTitle: 'Cannot edit backup',

src/common/timezone-picker.js

@@ -41,6 +41,9 @@ export default class TimezonePicker extends Component {
         : option.value
     )
   }
+  _useServerTime = () => {
+    this._updateTimezone(null)
+  }
   _useLocalTime = () => {
     this._updateTimezone(moment.tz.guess())
   }
@@ -83,10 +86,18 @@ export default class TimezonePicker extends Component {
         <div className='pull-right'>
           <ActionButton
             btnStyle='primary'
+            className='m-r-1'
+            handler={this._useServerTime}
+            icon='time'
+          >
+            {_('timezonePickerUseServerTime')}
+          </ActionButton>
+          <ActionButton
+            btnStyle='secondary'
             handler={this._useLocalTime}
             icon='time'
           >
-            {_('timezonePickerUseLocal')}
+            {_('timezonePickerUseLocalTime')}
           </ActionButton>
         </div>
       </div>

src/xo-app/backup/new/index.js

@@ -209,7 +209,7 @@ export default class New extends Component {
     this.setState({
       backupInfo: BACKUP_METHOD_TO_INFO[job.method],
       cronPattern: schedule.cron,
-      timezone: schedule.timezone
+      timezone: schedule.timezone || null
     }, () => delay(this._populateForm, 250, job)) // Work around.
     // Without the delay, some selects are not always ready to load a value
     // Values are displayed, but html5 compliant browsers say the value is required and empty on submit

src/xo-app/jobs/scheduling/index.js

@@ -20,13 +20,15 @@ import {
 
 const JOB_KEY = 'genericTask'
 
+const DEFAULT_CRON_PATTERN = '0 0 * * *'
+
 export default class Schedules extends Component {
   constructor (props) {
     super(props)
     this.state = {
       action: undefined,
       actions: undefined,
-      cronPattern: '* * * * *',
+      cronPattern: DEFAULT_CRON_PATTERN,
       job: undefined,
       jobs: undefined,
       timezone: undefined
@@ -80,14 +82,13 @@ export default class Schedules extends Component {
 
   _handleSubmit = () => {
     const {name, job, enabled} = this.refs
-    console.log(job)
-    const { cronPattern, schedule } = this.state
+    const { cronPattern, schedule, timezone } = this.state
     let save
     if (schedule) {
-      console.log('JOB', job, job.value)
       schedule.job = job.value.id
       schedule.cron = cronPattern
       schedule.name = name.value
+      schedule.timezone = timezone
       save = updateSchedule(schedule)
     } else {
       save = createSchedule(job.value.id, { cron: cronPattern, enabled: enabled.value, name: name.value })
@@ -107,15 +108,17 @@ export default class Schedules extends Component {
     name.value = schedule.name
     job.value = schedule.job
     this.setState({
+      cronPattern: schedule.cron,
       schedule,
-      cronPattern: schedule.cron
+      timezone: schedule.timezone || null
     })
   }
 
   _reset = () => {
     this.setState({
+      cronPattern: DEFAULT_CRON_PATTERN,
       schedule: undefined,
-      cronPattern: undefined
+      timezone: undefined
     }, () => {
       const { name, job, enabled } = this.refs
       name.value = ''
@@ -167,7 +170,7 @@ export default class Schedules extends Component {
         {process.env.XOA_PLAN > 3
           ? <span><ActionButton form='newScheduleForm' handler={this._handleSubmit} icon='save' btnStyle='primary'>{_('saveBackupJob')}</ActionButton>
             {' '}
-            <button type='button' className='btn btn-default' onClick={this._reset}>{_('selectTableReset')}</button></span>
+            <button type='button' className='btn btn-secondary' onClick={this._reset}>{_('selectTableReset')}</button></span>
           : <span><Upgrade place='health' available={4} /></span>
         }
       </div>
@@ -176,7 +179,8 @@ export default class Schedules extends Component {
           <tr>
             <th>{_('jobName')}</th>
             <th>{_('job')}</th>
-            <th>{_('jobScheduling')}</th>
+            <th className='hidden-xs-down'>{_('jobScheduling')}</th>
+            <th className='hidden-xs-down'>{_('jobTimezone')}</th>
             <th></th>
           </tr>
         </thead>
@@ -187,7 +191,8 @@ export default class Schedules extends Component {
               <span>{schedule.name} <span className='text-muted'>({schedule.id})</span></span>
             </td>
             <td>{jobs[schedule.job] && <span>{jobs[schedule.job].name} - {jobs[schedule.job].method} <span className='text-muted'>({schedule.job})</span></span>}</td>
-            <td>{schedule.cron}</td>
+            <td className='hidden-xs-down'>{schedule.cron}</td>
+            <td className='hidden-xs-down'>{schedule.timezone || _('jobServerTimezone')}</td>
             <td>
               <button type='button' className='btn btn-primary' onClick={() => this._edit(schedule.id)}><Icon icon='edit' /></button>
               {' '}