feat(xo-web/remotes): ability to set useVhdDirectory in remote params (#6273)

CHANGELOG.unreleased.md

@@ -8,6 +8,7 @@
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
 - [Restore backup] Clearer error message when importing a VM backup requires restoration of CH >= 8.1 (PR [#6304](https://github.com/vatesfr/xen-orchestra/pull/6304))
+- [Backup] Users can use VHD directory on any remote type (PR [#6273](https://github.com/vatesfr/xen-orchestra/pull/6273))
 
 ### Bug fixes
 
@@ -31,5 +32,7 @@
 
 - @xen-orchestra/xapi minor
 - vhd-lib patch
+- xo-remote-parser patch
+- xo-web minor
 
 <!--packages-end-->

packages/xo-remote-parser/src/index.js

@@ -27,7 +27,7 @@ const makeOptionList = options => {
   const encoded = {}
   Object.keys(options)
     // don't save undefined options
-    .filter(option => option !== undefined)
+    .filter(key => options[key] !== undefined)
     .forEach(key => {
       const val = options[key]
       encoded[key] = JSON.stringify(val)

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

@@ -597,6 +597,10 @@ const messages = {
   remoteS3TooltipProtocol: 'Uncheck if you want HTTP instead of HTTPS',
   remoteS3TooltipAcceptInsecure: 'Check if you want to accept self signed certificates',
   remotePlaceHolderPassword: 'Password(fill to edit)',
+  remoteUseVhdDirectory:
+    'Store backup as multiple data blocks instead of a whole VHD file. (disables file level restore but allows faster merge)',
+  remoteUseVhdDirectoryTooltip:
+    'Your remote must be able to handle parallel access (up to 16 write processes per backup) and the number of files (500 files per GB of backed up data)',
 
   // ------ New Storage -----
 

packages/xo-web/src/xo-app/settings/remotes/remote.js

@@ -43,6 +43,7 @@ export default decorate([
       protocol: undefined,
       region: undefined,
       allowUnauthorized: undefined,
+      useVhdDirectory: undefined,
     }),
     effects: {
       linkState,
@@ -68,13 +69,21 @@ export default decorate([
             username = remote.username,
             protocol = remote.protocol || 'https',
             region = remote.region,
-            // making it undefined if falsish won't save it in the remote url
-            allowUnauthorized = remote.allowUnauthorized ? true : undefined,
           } = state
-          let { path = remote.path } = state
+
+          let {
+            path = remote.path,
+            useVhdDirectory = remote.useVhdDirectory,
+            allowUnauthorized = remote.allowUnauthorized,
+          } = state
+
+          // making it undefined if falsish won't save it in the remote url
+          allowUnauthorized = allowUnauthorized ? true : undefined
+          useVhdDirectory = useVhdDirectory ? true : undefined
           if (type === 's3') {
             const { parsedPath, bucket = parsedPath.split('/')[0], directory = parsedPath.split('/')[1] } = state
             path = bucket + '/' + directory
+            useVhdDirectory = true // always on for s3
           }
           return editRemote(remote, {
             name,
@@ -89,6 +98,7 @@ export default decorate([
               protocol,
               region,
               allowUnauthorized,
+              useVhdDirectory,
             }),
             options: options !== '' ? options : null,
             proxy: proxyId,
@@ -117,6 +127,7 @@ export default decorate([
             proxyId,
             type = 'nfs',
             username,
+            useVhdDirectory = undefined,
           } = state
 
           const urlParams = {
@@ -124,12 +135,14 @@ export default decorate([
             path,
             port,
             type,
+            useVhdDirectory,
           }
           if (type === 's3') {
             const { allowUnauthorized, bucket, directory, protocol = 'https' } = state
             urlParams.path = bucket + '/' + directory
             urlParams.allowUnauthorized = allowUnauthorized
             urlParams.protocol = protocol
+            urlParams.useVhdDirectory = true // always on for s3
           }
           username && (urlParams.username = username)
           password && (urlParams.password = password)
@@ -156,6 +169,9 @@ export default decorate([
       setAllowUnauthorized(_, value) {
         this.state.allowUnauthorized = value
       },
+      setUseVhdDirectory(_, value) {
+        this.state.useVhdDirectory = value
+      },
     },
     computed: {
       formId: generateId,
@@ -185,6 +201,7 @@ export default decorate([
       type = remote.type || 'nfs',
       username = remote.username || '',
       allowUnauthorized = remote.allowUnauthorized || false,
+      useVhdDirectory = remote.useVhdDirectory || type === 's3',
     } = state
     return (
       <div>
@@ -452,6 +469,23 @@ export default decorate([
               </div>
             </fieldset>
           )}
+          {type !== 's3' && (
+            <fieldset className='form-group form-group'>
+              <div className='input-group form-group'>
+                <span className='align-middle'>
+                  {_('remoteUseVhdDirectory')}{' '}
+                  <Tooltip content={_('remoteUseVhdDirectoryTooltip')}>
+                    <Icon icon='info' size='lg' />
+                  </Tooltip>
+                </span>
+                <Toggle
+                  className='align-middle pull-right'
+                  onChange={effects.setUseVhdDirectory}
+                  value={useVhdDirectory === true}
+                />
+              </div>
+            </fieldset>
+          )}
           <div className='form-group'>
             <ActionButton
               btnStyle='primary'