feat(xo-web/backup-ng/restore): show job in backup select (#3564)

Fixes #3264

CHANGELOG.md

@@ -19,6 +19,7 @@
 - [Backup NG] Show all advanced settings with non-default values in overview [#3549](https://github.com/vatesfr/xen-orchestra/issues/3549) (PR [#3554](https://github.com/vatesfr/xen-orchestra/pull/3554))
 - [Backup NG] Collapse advanced settings by default [#3551](https://github.com/vatesfr/xen-orchestra/issues/3551) (PR [#3559](https://github.com/vatesfr/xen-orchestra/pull/3559))
 - [Scheduling] Merge selection and interval tabs [#1902](https://github.com/vatesfr/xen-orchestra/issues/1902) (PR [#3519](https://github.com/vatesfr/xen-orchestra/pull/3519))
+- [Backup NG/Restore] The backup selector now also shows the job name [#3366](https://github.com/vatesfr/xen-orchestra/issues/3366) (PR [#3564](https://github.com/vatesfr/xen-orchestra/pull/3564))
 
 ### Bug fixes
 

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

@@ -1376,6 +1376,7 @@ const messages = {
     'Are you sure you want to delete all the backups from {nVms, number} VM{nVms, plural, one {} other {s}}?',
   deleteVmBackupsBulkConfirmText:
     'delete {nBackups} backup{nBackups, plural, one {} other {s}}',
+  unknownJob: 'Unknown job',
 
   // ----- Restore files view -----
   listRemoteBackups: 'List remote backups',

packages/xo-web/src/common/render-xo-item.js

@@ -317,6 +317,9 @@ const xoItemToRender = {
         {backup.mode}
       </span>{' '}
       <span className='tag tag-warning'>{backup.remote.name}</span>{' '}
+      <span className='tag tag-success'>
+        {backup.jobName !== undefined ? backup.jobName : _('unknownJob')}
+      </span>{' '}
       <FormattedDate
         value={new Date(backup.timestamp)}
         month='long'

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

@@ -13,11 +13,13 @@ import {
   deleteBackups,
   fetchFilesNg as fetchFiles,
   listVmBackups,
+  subscribeBackupNgJobs,
   subscribeRemotes,
 } from 'xo'
 import {
   assign,
   filter,
+  find,
   flatMap,
   forEach,
   keyBy,
@@ -86,6 +88,7 @@ const BACKUPS_COLUMNS = [
 // -----------------------------------------------------------------------------
 
 @addSubscriptions({
+  jobs: subscribeBackupNgJobs,
   remotes: subscribeRemotes,
 })
 export default class Restore extends Component {
@@ -94,13 +97,19 @@ export default class Restore extends Component {
   }
 
   componentWillReceiveProps (props) {
-    if (props.remotes !== this.props.remotes) {
+    if (
-      this._refreshBackupList(props.remotes)
+      props.remotes !== this.props.remotes ||
+      props.jobs !== this.props.jobs
+    ) {
+      this._refreshBackupList(props.remotes, props.jobs)
     }
   }
 
-  _refreshBackupList = async (_ = this.props.remotes) => {
+  _refreshBackupList = async (
-    const remotes = keyBy(filter(_, { enabled: true }), 'id')
+    _remotes = this.props.remotes,
+    jobs = this.props.jobs
+  ) => {
+    const remotes = keyBy(filter(_remotes, { enabled: true }), 'id')
     const backupsByRemote = await listVmBackups(toArray(remotes))
 
     const backupDataByVm = {}
@@ -116,7 +125,10 @@ export default class Restore extends Component {
         }
 
         backupDataByVm[vmId].backups.push(
-          ...map(vmBackups, bkp => ({ ...bkp, remote }))
+          ...map(vmBackups, bkp => {
+            const job = find(jobs, { id: bkp.jobId })
+            return { ...bkp, remote, jobName: job && job.name }
+          })
         )
       })
     })

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

@@ -11,6 +11,7 @@ import { FormattedDate } from 'react-intl'
 import {
   assign,
   filter,
+  find,
   flatMap,
   forEach,
   keyBy,
@@ -23,6 +24,7 @@ import {
   deleteBackups,
   listVmBackups,
   restoreBackup,
+  subscribeBackupNgJobs,
   subscribeRemotes,
 } from 'xo'
 
@@ -93,6 +95,7 @@ const BACKUPS_COLUMNS = [
 // -----------------------------------------------------------------------------
 
 @addSubscriptions({
+  jobs: subscribeBackupNgJobs,
   remotes: subscribeRemotes,
 })
 export default class Restore extends Component {
@@ -101,13 +104,19 @@ export default class Restore extends Component {
   }
 
   componentWillReceiveProps (props) {
-    if (props.remotes !== this.props.remotes) {
+    if (
-      this._refreshBackupList(props.remotes)
+      props.remotes !== this.props.remotes ||
+      props.jobs !== this.props.jobs
+    ) {
+      this._refreshBackupList(props.remotes, props.jobs)
     }
   }
 
-  _refreshBackupList = async (_ = this.props.remotes) => {
+  _refreshBackupList = async (
-    const remotes = keyBy(filter(_, { enabled: true }), 'id')
+    _remotes = this.props.remotes,
+    jobs = this.props.jobs
+  ) => {
+    const remotes = keyBy(filter(_remotes, { enabled: true }), 'id')
     const backupsByRemote = await listVmBackups(toArray(remotes))
 
     const backupDataByVm = {}
@@ -119,7 +128,14 @@ export default class Restore extends Component {
         }
 
         backupDataByVm[vmId].backups.push(
-          ...map(vmBackups, bkp => ({ ...bkp, remote }))
+          ...map(vmBackups, bkp => {
+            const job = find(jobs, { id: bkp.jobId })
+            return {
+              ...bkp,
+              remote,
+              jobName: job && job.name,
+            }
+          })
         )
       })
     })