feat(xo-web/backup): move "restore/file-restore" to Backup NG view (#3610)

Fixes #3499

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- [Legacy Backup] Restore and File restore functionalities moved to the Backup NG view [#3499](https://github.com/vatesfr/xen-orchestra/issues/3499) (PR [#3610](https://github.com/vatesfr/xen-orchestra/pull/3610))
+
 ### Bug fixes
 
 - [Backup ng logs] Fix restarting VMs with concurrency issue [#3603](https://github.com/vatesfr/xen-orchestra/issues/3603) (PR [#3634](https://github.com/vatesfr/xen-orchestra/pull/3634))

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

@@ -88,6 +88,7 @@ const messages = {
   xosan: 'XOSAN',
   backupDeprecatedMessage:
     'Warning: Backup is deprecated, use Backup NG instead.',
+  moveRestoreLegacyMessage: 'Warning: Your legacy backups can be found here',
   backupMigrationLink: 'How to migrate to Backup NG',
   backupNgNewPage: 'Create a new backup with Backup NG',
   backupOverviewPage: 'Overview',
@@ -1343,7 +1344,6 @@ const messages = {
   remoteError: 'Error',
   remoteErrorMessage:
     'The URL ({url}) is invalid (colon in path). Click this button to change the URL to {newUrl}.',
-  noBackup: 'No backup available',
   backupVmNameColumn: 'VM Name',
   backupVmDescriptionColumn: 'VM Description',
   backupTags: 'Tags',
@@ -1361,6 +1361,8 @@ const messages = {
   importBackupMessage: 'Starting your backup import',
   vmsToBackup: 'VMs to backup',
   restoreResfreshList: 'Refresh backup list',
+  restoreLegacy: 'Legacy restore',
+  restoreFileLegacy: 'Legacy file restore',
   restoreVmBackups: 'Restore',
   restoreVmBackupsTitle: 'Restore {vm}',
   restoreVmBackupsBulkTitle:
@@ -1396,6 +1398,7 @@ const messages = {
   restoreFilesSelectFiles: 'Select a file…',
   restoreFileContentNotFound: 'Content not found',
   restoreFilesNoFilesSelected: 'No files selected',
+  restoreFilesSelectedFiles: 'Selected files ({files}):',
   restoreFilesSelectedFilesAndFolders: 'Selected files/folders ({files}):',
   restoreFilesDiskError: 'Error while scanning disk',
   restoreFilesSelectAllFiles: "Select all this folder's files",

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

@@ -3,15 +3,14 @@ import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
 import SortedTable from 'sorted-table'
-import Upgrade from 'xoa-upgrade'
 import { confirm } from 'modal'
 import { addSubscriptions, noop } from 'utils'
 import { Container, Row, Col } from 'grid'
 import { error } from 'notification'
 import { FormattedDate } from 'react-intl'
 import {
-  find,
   filter,
+  find,
   forEach,
   groupBy,
   isEmpty,
@@ -23,7 +22,6 @@ import {
 import { fetchFiles, listRemoteBackups, subscribeRemotes } from 'xo'
 
 import RestoreFileModalBody from './restore-file-modal'
-import styles from './index.css'
 
 const VM_COLUMNS = [
   {
@@ -127,50 +125,20 @@ export default class FileRestore extends Component {
   render () {
     const { backupInfoByVm } = this.props
 
-    if (!backupInfoByVm) {
-      return <h2>{_('statusLoading')}</h2>
-    }
+    return !isEmpty(backupInfoByVm) ? (
+      <div>
+        <h3>{_('restoreFileLegacy')}</h3>
+        <em>
+          <Icon icon='info' /> {_('restoreBackupsInfo')}
+        </em>
 
-    return process.env.XOA_PLAN > 3 ? (
-      <Container>
-        <h2>{_('restoreFiles')}</h2>
-        {isEmpty(backupInfoByVm) ? (
-          <div>
-            <em>
-              <Icon icon='info' /> {_('restoreDeltaBackupsInfo')}
-            </em>
-            <div>
-              <a>{_('noBackup')}</a>
-            </div>
-          </div>
-        ) : (
-          <div>
-            <ul className={styles.listRestoreBackupInfos}>
-              <li>
-                <em>
-                  <Icon icon='info' /> {_('restoreBackupsInfo')}
-                </em>
-              </li>
-              <li>
-                <em>
-                  <Icon icon='info' /> {_('restoreDeltaBackupsInfo')}
-                </em>
-              </li>
-            </ul>
-
-            <SortedTable
-              collection={backupInfoByVm}
-              columns={VM_COLUMNS}
-              rowAction={openImportModal}
-              defaultColumn={2}
-            />
-          </div>
-        )}
-      </Container>
-    ) : (
-      <Container>
-        <Upgrade place='restoreFiles' available={4} />
-      </Container>
-    )
+        <SortedTable
+          collection={backupInfoByVm}
+          columns={VM_COLUMNS}
+          rowAction={openImportModal}
+          defaultColumn={2}
+        />
+      </div>
+    ) : null
   }
 }

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

@@ -32,6 +32,8 @@ import {
 import DeleteBackupsModalBody from '../restore/delete-backups-modal-body'
 import RestoreFileModalBody from './restore-file-modal'
 
+import RestoreFileLegacy from '../file-restore-legacy'
+
 // -----------------------------------------------------------------------------
 
 const BACKUPS_COLUMNS = [
@@ -239,6 +241,7 @@ export default class Restore extends Component {
             columns={BACKUPS_COLUMNS}
             individualActions={this._individualActions}
           />
+          <RestoreFileLegacy />
         </div>
       </Upgrade>
     )

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

@@ -1,11 +1,9 @@
 import _, { messages } from 'intl'
 import ChooseSrForEachVdisModal from 'xo/choose-sr-for-each-vdis-modal'
 import Component from 'base-component'
-import Icon from 'icon'
 import moment from 'moment'
 import React from 'react'
 import SortedTable from 'sorted-table'
-import Upgrade from 'xoa-upgrade'
 import { confirm } from 'modal'
 import { createSelector } from 'selectors'
 import { addSubscriptions, noop } from 'utils'
@@ -332,34 +330,16 @@ export default class Restore extends Component {
 
   render () {
     const { backupInfoByVm } = this.state
-
-    if (!backupInfoByVm) {
-      return <h2>{_('statusLoading')}</h2>
-    }
-
-    return process.env.XOA_PLAN > 1 ? (
-      <Container>
-        <h2>{_('restoreBackups')}</h2>
-        {isEmpty(backupInfoByVm) ? (
-          _('noBackup')
-        ) : (
-          <div>
-            <em>
-              <Icon icon='info' /> {_('restoreBackupsInfo')}
-            </em>
-            <SortedTable
-              collection={backupInfoByVm}
-              columns={VM_COLUMNS}
-              rowAction={openImportModal}
-              defaultColumn={2}
-            />
-          </div>
-        )}
-      </Container>
-    ) : (
-      <Container>
-        <Upgrade place='restoreBackup' available={2} />
-      </Container>
-    )
+    return !isEmpty(backupInfoByVm) ? (
+      <div>
+        <h3>{_('restoreLegacy')}</h3>
+        <SortedTable
+          collection={backupInfoByVm}
+          columns={VM_COLUMNS}
+          defaultColumn={2}
+          rowAction={openImportModal}
+        />
+      </div>
+    ) : null
   }
 }

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

@@ -33,6 +33,8 @@ import RestoreBackupsModalBody, {
 } from './restore-backups-modal-body'
 import DeleteBackupsModalBody from './delete-backups-modal-body'
 
+import RestoreLegacy from '../restore-legacy'
+
 // -----------------------------------------------------------------------------
 
 const BACKUPS_COLUMNS = [
@@ -268,6 +270,7 @@ export default class Restore extends Component {
             collection={this.state.backupDataByVm}
             columns={BACKUPS_COLUMNS}
           />
+          <RestoreLegacy />
         </div>
       </Upgrade>
     )

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

@@ -1,3 +0,0 @@
-.listRestoreBackupInfos {
-  list-style-type: none;
-}

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

@@ -10,8 +10,6 @@ import { NavLink, NavTabs } from 'nav'
 import New from './new'
 import Edit from './edit'
 import Overview from './overview'
-import Restore from './restore'
-import FileRestore from './file-restore'
 
 const DeprecatedMsg = () => (
   <div className='alert alert-warning'>
@@ -23,6 +21,18 @@ const DeprecatedMsg = () => (
 
 const DEVELOPMENT = process.env.NODE_ENV === 'development'
 
+const MovingRestoreMessage = () => (
+  <div className='alert alert-warning'>
+    <Link to='/backup-ng/restore'>{_('moveRestoreLegacyMessage')}</Link>
+  </div>
+)
+
+const MovingFileRestoreMessage = () => (
+  <div className='alert alert-warning'>
+    <Link to='/backup-ng/file-restore'>{_('moveRestoreLegacyMessage')}</Link>
+  </div>
+)
+
 const HEADER = (
   <Container>
     <Row>
@@ -56,8 +66,8 @@ const Backup = routes('overview', {
   ':id/edit': Edit,
   new: DEVELOPMENT ? New : DeprecatedMsg,
   overview: Overview,
-  restore: Restore,
-  'file-restore': FileRestore,
+  restore: MovingRestoreMessage,
+  'file-restore': MovingFileRestoreMessage,
 })(({ children }) => (
   <Page header={HEADER} title='backupPage' formatTitle>
     {children}