feat(xo-web/backups): add blog link to deprecation message (#3092)

Fixes #3089

CHANGELOG.md

@@ -12,6 +12,7 @@
 - [Backup NG] Different retentions for backup and replication [#2895](https://github.com/vatesfr/xen-orchestra/issues/2895)
 - 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)
 
 ### Bugs
 

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

@@ -85,8 +85,9 @@ const messages = {
   newImport: 'Import',
   xosan: 'XOSAN',
   backupDeprecatedMessage:
-    'Backup is deprecated, use Backup NG instead to create new backups.',
-  backupNgNewPage: 'New backup NG',
+    'Warning: Backup is deprecated, use Backup NG instead.',
+  backupMigrationLink: 'How to migrate to Backup NG',
+  backupNgNewPage: 'Create a new backup with Backup NG',
   backupOverviewPage: 'Overview',
   backupNewPage: 'New',
   backupRemotesPage: 'Remotes',

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

@@ -13,8 +13,8 @@ import Restore from './restore'
 import FileRestore from './file-restore'
 
 const DeprecatedMsg = () => (
-  <div>
-    <em>{_('backupDeprecatedMessage')}</em>
+  <div className='alert alert-warning'>
+    {_('backupDeprecatedMessage')}
     <br />
     <Link to='/backup-ng/new'>{_('backupNgNewPage')}</Link>
   </div>

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

@@ -242,11 +242,20 @@ export default class Overview extends Component {
               emptyMessage={_('noScheduledJobs')}
             >
               {() => (
-                <SortedTable
-                  columns={JOB_COLUMNS}
-                  collection={this._getScheduleCollection()}
-                  userData={isScheduleUserMissing}
-                />
+                <div>
+                  <div className='alert alert-warning'>
+                    {_('backupDeprecatedMessage')}
+                    <br />
+                    <a href='https://xen-orchestra.com/blog/migrate-backup-to-backup-ng/'>
+                      {_('backupMigrationLink')}
+                    </a>
+                  </div>
+                  <SortedTable
+                    columns={JOB_COLUMNS}
+                    collection={this._getScheduleCollection()}
+                    userData={isScheduleUserMissing}
+                  />
+                </div>
               )}
             </NoObjects>
           </CardBlock>