feat(host/pool): clearer memory info (#2771)

Fixes #2750

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

@@ -538,7 +538,7 @@ const messages = {
   srNoVdis: 'No VDIs in this storage',
   // ----- Pool general -----
   poolTitleRamUsage: 'Pool RAM usage:',
-  poolRamUsage: '{used} used on {total}',
+  poolRamUsage: '{used} used on {total} ({free} free)',
   poolMaster: 'Master:',
   displayAllHosts: 'Display all hosts of this pool',
   displayAllStorages: 'Display all storages of this pool',
@@ -609,7 +609,9 @@ const messages = {
   // ----- host stat tab -----
   statLoad: 'Load average',
   // ----- host advanced tab -----
-  memoryHostState: 'RAM Usage: {memoryUsed}',
+  hostTitleRamUsage: 'Host RAM usage:',
+  memoryHostState:
+    'RAM: {memoryUsed} used on {memoryTotal} ({memoryFree} free)',
   hardwareHostSettingsLabel: 'Hardware',
   hostAddress: 'Address',
   hostStatus: 'Status',

packages/xo-web/src/xo-app/host/tab-general.js

@@ -10,7 +10,7 @@ import { addTag, removeTag } from 'xo'
 import { BlockLink } from 'link'
 import { Container, Row, Col } from 'grid'
 import { FormattedRelative } from 'react-intl'
-import { formatSize } from 'utils'
+import { formatSize, formatSizeShort } from 'utils'
 import Usage, { UsageElement } from 'usage'
 import { getObject } from 'selectors'
 import {
@@ -113,9 +113,7 @@ export default ({
       <br />
       <Row>
         <Col className='text-xs-center'>
-          <h5>
-            {_('memoryHostState', { memoryUsed: formatSize(memoryUsed) })}
-          </h5>
+          <h5>{_('hostTitleRamUsage')}</h5>
         </Col>
       </Row>
       <Row>
@@ -137,16 +135,31 @@ export default ({
           </Usage>
         </Col>
       </Row>
+      <Row>
+        <Col className='text-xs-center'>
+          <h5>
+            {_('memoryHostState', {
+              memoryUsed: formatSizeShort(memoryUsed),
+              memoryTotal: formatSizeShort(host.memory.size),
+              memoryFree: formatSizeShort(host.memory.size - host.memory.usage),
+            })}
+          </h5>
+        </Col>
+      </Row>
+      <Row>
         {pool &&
           host.id === pool.master && (
             <Row className='text-xs-center'>
               <Col>
                 <h3>
-                <span className='tag tag-pill tag-info'>{_('pillMaster')}</span>
+                  <span className='tag tag-pill tag-info'>
+                    {_('pillMaster')}
+                  </span>
                 </h3>
               </Col>
             </Row>
           )}
+      </Row>
       <Row>
         <Col>
           <h2 className='text-xs-center'>

packages/xo-web/src/xo-app/pool/tab-general.js

@@ -9,7 +9,7 @@ import { addTag, removeTag } from 'xo'
 import Link, { BlockLink } from 'link'
 import { Container, Row, Col } from 'grid'
 import Usage, { UsageElement } from 'usage'
-import { formatSize } from 'utils'
+import { formatSize, formatSizeShort } from 'utils'
 import Tooltip from 'tooltip'
 
 export default ({ hosts, nVms, pool, srs }) => (
@@ -68,8 +68,11 @@ export default ({ hosts, nVms, pool, srs }) => (
       <Col className='text-xs-center'>
         <h5>
           {_('poolRamUsage', {
-            used: formatSize(sumBy(hosts, 'memory.usage')),
-            total: formatSize(sumBy(hosts, 'memory.size')),
+            used: formatSizeShort(sumBy(hosts, 'memory.usage')),
+            total: formatSizeShort(sumBy(hosts, 'memory.size')),
+            free: formatSizeShort(
+              sumBy(hosts, host => host.memory.size - host.memory.usage)
+            ),
           })}
         </h5>
       </Col>