feat(xo-web/render-xo-item): optionally show free memory (#3832)

Fixes #3264

Show free memory in `SelectHost`.

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- [VM migration] Display hosts' free memory [#3264](https://github.com/vatesfr/xen-orchestra/issues/3264) (PR [#3832](https://github.com/vatesfr/xen-orchestra/pull/3832))
+
 ### Bug fixes
 
 - [New SR] No redirection if the SR creation failed or canceled [#3843](https://github.com/vatesfr/xen-orchestra/issues/3843) (PR [#3853](https://github.com/vatesfr/xen-orchestra/pull/3853))

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

@@ -13,6 +13,7 @@ const messages = {
   errorPageNotFound: 'Page not found',
   errorNoSuchItem: 'no such item',
   errorUnknownItem: 'unknown item',
+  memoryFree: '{memoryFree} RAM free',
 
   editableLongClickPlaceholder: 'Long click to edit',
   editableClickPlaceholder: 'Click to edit',

packages/xo-web/src/common/render-xo-item.js

@@ -77,7 +77,7 @@ export const Host = decorate([
       ),
     }
   }),
-  ({ host, pool, link, newTab }) => {
+  ({ host, pool, link, newTab, memoryFree }) => {
     if (host === undefined) {
       return UNKNOWN_ITEM
     }
@@ -85,7 +85,16 @@ export const Host = decorate([
     return (
       <LinkWrapper link={link} newTab={newTab} to={`/hosts/${host.id}`}>
         <Icon icon='host' /> {host.name_label}
-        {pool !== undefined && ` (${pool.name_label})`}
+        {memoryFree && (
+          <span>
+            {' ('}
+            {_('memoryFree', {
+              memoryFree: formatSize(host.memory.size - host.memory.usage),
+            })}
+            {')'}
+          </span>
+        )}
+        {pool !== undefined && <span>{` - ${pool.name_label}`}</span>}
       </LinkWrapper>
     )
   },
@@ -94,12 +103,14 @@ export const Host = decorate([
 Host.propTypes = {
   id: PropTypes.string.isRequired,
   link: PropTypes.bool,
+  memoryFree: PropTypes.bool,
   newTab: PropTypes.bool,
   pool: PropTypes.bool,
 }
 
 Host.defaultProps = {
   link: false,
+  memoryFree: false,
   newTab: false,
   pool: true,
 }
@@ -408,7 +419,7 @@ const xoItemToRender = {
   // Pool objects.
   'VM-template': ({ id }) => <VmTemplate id={id} />,
   'VM-template-resourceSet': ({ id }) => <VmTemplate id={id} self />,
-  host: ({ id }) => <Host id={id} />,
+  host: ({ id, memoryFree }) => <Host id={id} memoryFree={memoryFree} />,
   network: ({ id }) => <Network id={id} />,
   'network-resourceSet': ({ id }) => <Network id={id} self />,
 
@@ -481,7 +492,7 @@ const xoItemToRender = {
   ),
 }
 
-const renderXoItem = (item, { className, type: xoType } = {}) => {
+const renderXoItem = (item, { className, type: xoType, ...props } = {}) => {
   const { id, label } = item
   const type = xoType || item.type
 
@@ -514,7 +525,7 @@ const renderXoItem = (item, { className, type: xoType } = {}) => {
   if (Component) {
     return (
       <span key={id} className={className}>
-        <Component {...item} />
+        <Component {...item} {...props} />
       </span>
     )
   }

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

@@ -264,6 +264,7 @@ class GenericSelect extends React.Component {
           option.xoItem.type !== undefined
             ? `${option.xoItem.type}-resourceSet`
             : undefined,
+        memoryFree: option.xoItem.type === 'host' || undefined,
       })}
     </span>
   )

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

@@ -231,8 +231,8 @@ export default class MigrateVmModalBody extends BaseComponent {
       <div>
         <div className={styles.block}>
           <SingleLineRow>
-            <Col size={6}>{_('migrateVmSelectHost')}</Col>
-            <Col size={6}>
+            <Col size={4}>{_('migrateVmSelectHost')}</Col>
+            <Col size={8}>
               <SelectHost
                 onChange={this._selectHost}
                 predicate={this._getHostPredicate()}