feat(xo-web/vm/migrate): same-pool hosts first in selector (#3890)

Fixes #3262

CHANGELOG.unreleased.md

@@ -2,6 +2,8 @@
 
 ### Enhancements
 
+- [VM migration] Display same-pool hosts first in the selector [#3262](https://github.com/vatesfr/xen-orchestra/issues/3262) (PR [#3890](https://github.com/vatesfr/xen-orchestra/pull/3890))
+
 ### Bug fixes
 
 - [Host] Fix multipathing status for XenServer < 7.5 [#3956](https://github.com/vatesfr/xen-orchestra/issues/3956) (PR [#3961](https://github.com/vatesfr/xen-orchestra/pull/3961))

packages/xo-web/src/common/select-objects.js

@@ -120,6 +120,8 @@ const getObjectsById = objects =>
 class GenericSelect extends React.Component {
   static propTypes = {
     allowMissingObjects: PropTypes.bool,
+    compareContainers: PropTypes.func,
+    compareOptions: PropTypes.func,
     hasSelectAll: PropTypes.bool,
     multi: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
@@ -178,7 +180,9 @@ class GenericSelect extends React.Component {
   _getOptions = createSelector(
     () => this.props.xoContainers,
     this._getObjects,
-    (containers, objects) => {
+    () => this.props.compareContainers,
+    () => this.props.compareOptions,
+    (containers, objects, compareContainers, compareOptions) => {
       // createCollectionWrapper with a depth?
       const { name } = this.constructor
 
@@ -190,7 +194,10 @@ class GenericSelect extends React.Component {
           )
         }
 
-        options = map(objects, getOption)
+        options = (compareOptions !== undefined
+          ? objects.sort(compareOptions)
+          : objects
+        ).map(getOption)
       } else {
         if (__DEV__ && isArray(objects)) {
           throw new Error(
@@ -199,13 +206,21 @@ class GenericSelect extends React.Component {
         }
 
         options = []
-        forEach(containers, container => {
+        const _containers =
+          compareContainers !== undefined
+            ? containers.sort(compareContainers)
+            : containers
+        forEach(_containers, container => {
           options.push({
             disabled: true,
             xoItem: container,
           })
 
-          forEach(objects[container.id], object => {
+          const _objects =
+            compareOptions !== undefined
+              ? objects[container.id].sort(compareOptions)
+              : objects[container.id]
+          forEach(_objects, object => {
             options.push(getOption(object, container))
           })
         })
@@ -375,9 +390,20 @@ export const SelectHost = makeStoreSelect(
     const getHostsByPool = createGetObjectsOfType('host')
       .filter(getPredicate)
       .sort()
+      .groupBy('$pool')
+
+    const getPools = createGetObjectsOfType('pool')
+      .pick(
+        createSelector(
+          getHostsByPool,
+          hostsByPool => Object.keys(hostsByPool)
+        )
+      )
+      .sort()
 
     return {
       xoObjects: getHostsByPool,
+      xoContainers: getPools,
     }
   },
   { placeholder: _('selectHosts') }

packages/xo-web/src/common/xo/migrate-vm-modal/index.js

@@ -214,6 +214,11 @@ export default class MigrateVmModalBody extends BaseComponent {
     })
   }
 
+  compareContainers = (pool1, pool2) => {
+    const { $pool: poolId } = this.props.vm
+    return pool1.id === poolId ? -1 : pool2.id === poolId ? 1 : 0
+  }
+
   _selectMigrationNetwork = migrationNetwork =>
     this.setState({ migrationNetworkId: migrationNetwork.id })
 
@@ -234,6 +239,7 @@ export default class MigrateVmModalBody extends BaseComponent {
             <Col size={4}>{_('migrateVmSelectHost')}</Col>
             <Col size={8}>
               <SelectHost
+                compareContainers={this.compareContainers}
                 onChange={this._selectHost}
                 predicate={this._getHostPredicate()}
                 required

packages/xo-web/src/xo-app/home/vm-item.js

@@ -54,6 +54,11 @@ export default class VmItem extends Component {
     return vm && vm.power_state === 'Running'
   }
 
+  compareContainers = (pool1, pool2) => {
+    const { $pool: poolId } = this.props.item
+    return pool1.id === poolId ? -1 : pool2.id === poolId ? 1 : 0
+  }
+
   _getResourceSet = createFinder(
     () => this.props.resourceSets,
     createSelector(
@@ -174,6 +179,7 @@ export default class VmItem extends Component {
             <Col mediumSize={2} className='hidden-sm-down'>
               {this._isRunning && container ? (
                 <XoSelect
+                  compareContainers={this.compareContainers}
                   labelProp='name_label'
                   onChange={this._migrateVm}
                   placeholder={_('homeMigrateTo')}

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

@@ -151,6 +151,11 @@ export default class Vm extends BaseComponent {
     }
   }
 
+  compareContainers = (pool1, pool2) => {
+    const { $pool: poolId } = this.props.vm
+    return pool1.id === poolId ? -1 : pool2.id === poolId ? 1 : 0
+  }
+
   _getCanSnapshot = createSelector(
     () => this.props.checkPermissions,
     () => this.props.vm,
@@ -188,6 +193,7 @@ export default class Vm extends BaseComponent {
                     )}
                     {container !== undefined && (
                       <XoSelect
+                        compareContainers={this.compareContainers}
                         onChange={this._migrateVm}
                         useLongClick
                         value={container}