feat(backup NG): ability to cancel a running job (#3053)

Fixes #3047

.flowconfig

@@ -9,6 +9,7 @@
 
 [options]
 esproposal.decorators=ignore
+esproposal.optional_chaining=enable
 include_warnings=true
 module.use_strict=true
 

CHANGELOG.md

@@ -13,7 +13,7 @@
 - Possibility to use a fast clone when creating a VM from a snapshot [#2937](https://github.com/vatesfr/xen-orchestra/issues/2937)
 - Ability to customize cloud config templates [#2984](https://github.com/vatesfr/xen-orchestra/issues/2984)
 - Add Backup deprecation message and link to Backup NG migration blog post [#3089](https://github.com/vatesfr/xen-orchestra/issues/3089)
-
+- [Backup NG] Ability to cancel a running backup job [#3047](https://github.com/vatesfr/xen-orchestra/issues/3047)
 ### Bugs
 
 - update the xentools search item to return the version number of installed xentools [#3015](https://github.com/vatesfr/xen-orchestra/issues/3015)

flow-typed/promise-toolbox.js

@@ -1,4 +1,7 @@
 declare module 'promise-toolbox' {
+  declare export class CancelToken {
+    static source(): { cancel: (message: any) => void, token: CancelToken };
+  }
   declare export function cancelable(Function): Function
   declare export function defer<T>(): {|
     promise: Promise<T>,

packages/xo-web/src/common/intl/messages.js

@@ -294,6 +294,7 @@ const messages = {
   jobTimezone: 'Timezone',
   jobServerTimezone: 'Server',
   runJob: 'Run job',
+  cancelJob: 'Cancel job',
   runJobConfirm: 'Are you sure you want to run {backupType} {id} ({tag})?',
   runJobVerbose: 'One shot running started. See overview for logs.',
   jobEdit: 'Edit job',
@@ -369,6 +370,7 @@ const messages = {
   migrateBackupScheduleMessage:
     'This will migrate this backup to a backup NG. This operation is not reversible. Do you want to continue?',
   runBackupNgJobConfirm: 'Are you sure you want to run {name} ({id})?',
+  cancelJobConfirm: 'Are you sure you want to cancel {name} ({id})?',
 
   // ------ New backup -----
   newBackupAdvancedSettings: 'Advanced settings',

packages/xo-web/src/common/xo/index.js

@@ -1679,6 +1679,15 @@ export const runJob = job => {
   return _call('job.runSequence', { idSequence: [resolveId(job)] })
 }
 
+export const cancelJob = ({ id, name, runId }) =>
+  confirm({
+    title: _('cancelJob'),
+    body: _('cancelJobConfirm', {
+      id: id.slice(0, 5),
+      name: <strong>{name}</strong>,
+    }),
+  }).then(() => _call('job.cancel', { runId }))
+
 // Backup/Schedule ---------------------------------------------------------
 
 export const createSchedule = (

packages/xo-web/src/xo-app/backup-ng/index.js

@@ -13,6 +13,7 @@ import { Container, Row, Col } from 'grid'
 import { NavLink, NavTabs } from 'nav'
 import { routes } from 'utils'
 import {
+  cancelJob,
   deleteBackupNgJobs,
   disableSchedule,
   enableSchedule,
@@ -68,15 +69,28 @@ const SchedulePreviewBody = ({ item: job, userData: { schedulesByJob } }) => (
           />
         </td>
         <td>
-          <ActionButton
+          {job.runId !== undefined ? (
-            btnStyle='primary'
+            <ActionButton
-            data-id={job.id}
+              btnStyle='danger'
-            data-name={job.name}
+              handler={cancelJob}
-            data-schedule={schedule.id}
+              handlerParam={job}
-            handler={_runBackupNgJob}
+              icon='cancel'
-            icon='run-schedule'
+              key='cancel'
-            size='small'
+              size='small'
-          />
+              tooltip={_('formCancel')}
+            />
+          ) : (
+            <ActionButton
+              btnStyle='primary'
+              data-id={job.id}
+              data-name={job.name}
+              data-schedule={schedule.id}
+              handler={_runBackupNgJob}
+              icon='run-schedule'
+              key='run'
+              size='small'
+            />
+          )}
         </td>
       </tr>
     ))}