feat(meter tooltips): add tooltips for meter object. Fixes #1387

src/common/intl/messages.js

@@ -340,6 +340,7 @@ var messages = {
   hostDescription: 'Description',
   hostMemory: 'Memory',
   noHost: 'No hosts',
+  memoryLeftTooltip: '{used}% used ({free} free)',
   // ----- Pool network tab -----
   poolNetworkNameLabel: 'Name',
   poolNetworkDescription: 'Description',
@@ -620,6 +621,7 @@ var messages = {
   alarmObject: 'Issue on',
   alarmPool: 'Pool',
   alarmRemoveAll: 'Remove all alarms',
+  spaceLeftTooltip: '{used}% used ({free} left)',
 
   // ----- New VM -----
   newVmCreateNewVmOn: 'Create a new VM on {select}',

src/xo-app/dashboard/health/index.js

@@ -6,6 +6,7 @@ import Link from 'link'
 import map from 'lodash/map'
 import SortedTable from 'sorted-table'
 import TabButton from 'tab-button'
+import Tooltip from 'tooltip'
 import Upgrade from 'xoa-upgrade'
 import React, { Component } from 'react'
 import { Card, CardHeader, CardBlock } from 'card'
@@ -66,7 +67,10 @@ const SR_COLUMNS = [
   },
   {
     name: _('srUsage'),
-    itemRenderer: sr => sr.size > 1 && <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>,
+    itemRenderer: sr => sr.size > 1 &&
+      <Tooltip content={_('spaceLeftTooltip', {used: Math.round((sr.physical_usage / sr.size) * 100), free: formatSize(sr.size - sr.physical_usage)})}>
+        <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>
+      </Tooltip>,
     sortCriteria: sr => sr.physical_usage / sr.size,
     sortOrder: 'desc'
   }

src/xo-app/host/tab-storage.js

@@ -3,6 +3,7 @@ import React from 'react'
 import _ from 'intl'
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
+import Tooltip from 'tooltip'
 import { BlockLink } from 'link'
 import { TabButtonLink } from 'tab-button'
 import { formatSize } from 'utils'
@@ -51,7 +52,9 @@ export default ({
                   <td>{formatSize(sr.size)}</td>
                   <td>
                     {sr.size > 1 &&
-                      <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>
+                      <Tooltip content={_('spaceLeftTooltip', {used: Math.round((sr.physical_usage / sr.size) * 100), free: formatSize(sr.size - sr.physical_usage)})}>
+                        <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>
+                      </Tooltip>
                     }
                   </td>
                   <td>

src/xo-app/pool/tab-host.js

@@ -3,9 +3,11 @@ import isEmpty from 'lodash/isEmpty'
 import Link from 'link'
 import React from 'react'
 import SortedTable from 'sorted-table'
+import Tooltip from 'tooltip'
 import { Container, Row, Col } from 'grid'
 import { editHost } from 'xo'
 import { Text } from 'editable'
+import { formatSize } from 'utils'
 
 const HOST_COLUMNS = [
   {
@@ -24,7 +26,10 @@ const HOST_COLUMNS = [
   },
   {
     name: _('hostMemory'),
-    itemRenderer: ({ memory }) => <meter value={memory.usage} min='0' max={memory.size}></meter>,
+    itemRenderer: ({ memory }) =>
+      <Tooltip content={_('memoryLeftTooltip', {used: Math.round((memory.usage / memory.size) * 100), free: formatSize(memory.size - memory.usage)})}>
+        <meter value={memory.usage} min='0' max={memory.size}></meter>
+      </Tooltip>,
     sortCriteria: ({ memory }) => memory.usage / memory.size,
     sortOrder: 'desc'
   }

src/xo-app/pool/tab-storage.js

@@ -3,6 +3,7 @@ import isEmpty from 'lodash/isEmpty'
 import Link from 'link'
 import React from 'react'
 import SortedTable from 'sorted-table'
+import Tooltip from 'tooltip'
 import { Container, Row, Col } from 'grid'
 import { editSr, isSrShared } from 'xo'
 import { formatSize } from 'utils'
@@ -30,7 +31,10 @@ const SR_COLUMNS = [
   },
   {
     name: _('srUsage'),
-    itemRenderer: sr => sr.size > 1 && <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>,
+    itemRenderer: sr => sr.size > 1 &&
+      <Tooltip content={_('spaceLeftTooltip', {used: Math.round((sr.physical_usage / sr.size) * 100), free: formatSize(sr.size - sr.physical_usage)})}>
+        <meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>
+      </Tooltip>,
     sortCriteria: sr => sr.physical_usage / sr.size,
     sortOrder: 'desc'
   },