object number for filters

src/common/selectors.js

@@ -235,6 +235,19 @@ export const tasks = createSort(
   createFilter(_objects, object => object.type === 'task')
 )
 
+export const tags = create(
+  _objects,
+  objects => {
+    const tags = {}
+    forEach(objects, object => {
+      forEach(object.tags, tag => {
+        tags[tag] = true
+      })
+    })
+    return Object.keys(tags)
+  }
+)
+
 const _createObjectContainers = (set, container = '$container') =>
   _createCollectionWrapper(
     create(

src/xo-app/home/index.js

@@ -14,7 +14,10 @@ import { Text } from 'editable'
 import {
   create as createSelector,
   createFilter,
-  vms, vmContainers
+  pools,
+  hosts,
+  vms, vmContainers,
+  tags
 } from 'selectors'
 
 import {
@@ -85,8 +88,11 @@ class VmItem extends Component {
   }
 }
 @connectStore({
+  pools,
+  hosts,
   vmContainers,
-  vms
+  vms,
+  tags
 })
 
 export default class Home extends Component {
@@ -115,7 +121,7 @@ export default class Home extends Component {
   }
 
   render () {
-    const { vms, vmContainers } = this.props
+    const { vms, vmContainers, pools, hosts, tags } = this.props
 
     return <div>
       {!isEmpty(vms)
@@ -170,15 +176,15 @@ export default class Home extends Component {
                 </div>
                 : <div>
                   <button className='btn btn-link dropdown-toggle'>
-                    <Icon icon='pool' /> {_('homeAllPools')}
+                    <Icon icon='pool' /> {_('homeAllPools')} ({pools.length})
                   </button>
                   &nbsp;
                   <button className='btn btn-link dropdown-toggle'>
-                    <Icon icon='host' /> {_('homeAllHosts')}
+                    <Icon icon='host' /> {_('homeAllHosts')} ({hosts.length})
                   </button>
                   &nbsp;
                   <button className='btn btn-link dropdown-toggle'>
-                    <Icon icon='tags' /> {_('homeAllTags')}
+                    <Icon icon='tags' /> {_('homeAllTags')} ({tags.length})
                   </button>
                   &nbsp;
                   <button className='btn btn-link dropdown-toggle'>

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

@@ -1,7 +1,7 @@
 import _ from 'messages'
-import Icon from 'icon'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import React from 'react'
+import TabButton from 'tab-button'
 import { restartHost } from 'xo'
 import { FormattedRelative } from 'react-intl'
 import { Row, Col } from 'grid'
@@ -12,13 +12,12 @@ export default ({
   <Row>
     <Col smallSize={12} className='text-xs-right'>
       {host.power_state === 'Running'
-        ? <span>
-          <button className='btn btn-lg btn-warning btn-tab' onClick={() => {
-            restartHost(host, true)
-          }}>
-            <Icon icon='host-force-reboot' size={1} /> {_('forceRebootHostLabel')}
-          </button>
-        </span>
+        ? <TabButton
+          btnStyle='warning'
+          handler={() => restartHost(host, true)}
+          icon='host-force-reboot'
+          labelId='forceRebootHostLabel'
+        />
         : null
       }
     </Col>