feat(xo-web/backup-ng/new): tip for creating vms on a thin-provisioned storage (#3402)

Fixes #3334

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - [Remotes] Test the remote automatically on changes [#3323](https://github.com/vatesfr/xen-orchestra/issues/3323) (PR [#3397](https://github.com/vatesfr/xen-orchestra/pull/3397))
 - [Remotes] Use *WORKGROUP* as default domain for new SMB remote (PR [#3398](https://github.com/vatesfr/xen-orchestra/pull/3398))
+- [Backup NG form] Display a tip to encourage users to create vms on a thin-provisioned storage [#3334](https://github.com/vatesfr/xen-orchestra/issues/3334) (PR [#3402](https://github.com/vatesfr/xen-orchestra/pull/3402))
 
 ### Bug fixes
 

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

@@ -408,6 +408,8 @@ const messages = {
   localRemoteWarningTitle: 'Local remote selected',
   crOnThickProvisionedSrWarning:
     'Tip: using a thin-provisioned storage will consume less space. Please click on the icon to get more information',
+  vmsOnThinProvisionedSrTip:
+    'Tip: creating VMs on a thin-provisioned storage will consume less space when backuping them. Please click on the icon to get more information',
   localRemoteWarningMessage:
     'Warning: local remotes will use limited XOA disk space. Only for advanced users.',
   backupVersionWarning:

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

@@ -51,6 +51,19 @@ import {
 const SR_BACKEND_FAILURE_LINK =
   'https://xen-orchestra.com/docs/backup_troubleshooting.html#srbackendfailure44-insufficient-space'
 
+const ThinProvisionedTip = ({ label }) => (
+  <Tooltip content={_(label)}>
+    <a
+      className='text-info'
+      href={SR_BACKEND_FAILURE_LINK}
+      rel='noopener noreferrer'
+      target='_blank'
+    >
+      <Icon icon='info' />
+    </a>
+  </Tooltip>
+)
+
 const normalizeTagValues = values => resolveIds(values).map(value => [value])
 
 const normalizeSettings = ({ settings, exportMode, copyMode, snapshotMode }) =>
@@ -776,18 +789,7 @@ export default [
                             {!isEmpty(srsById) &&
                               state.crMode &&
                               get(() => srsById[id].SR_type) === 'lvm' && (
-                                <Tooltip
-                                  content={_('crOnThickProvisionedSrWarning')}
-                                >
-                                  <a
-                                    className='text-info'
-                                    href={SR_BACKEND_FAILURE_LINK}
-                                    rel='noopener noreferrer'
-                                    target='_blank'
-                                  >
-                                    <Icon icon='info' />
-                                  </a>
-                                </Tooltip>
+                                <ThinProvisionedTip label='crOnThickProvisionedSrWarning' />
                               )}
                             <div className='pull-right'>
                               <DeleteOldBackupsFirst
@@ -883,7 +885,8 @@ export default [
             <Col mediumSize={6}>
               <Card>
                 <CardHeader>
-                  {_('vmsToBackup')}*
+                  {_('vmsToBackup')}*{' '}
+                  <ThinProvisionedTip label='vmsOnThinProvisionedSrTip' />
                   <ActionButton
                     className='pull-right'
                     data-mode='smartMode'