diff --git a/packages/xo-web/src/xo-app/home/index.js b/packages/xo-web/src/xo-app/home/index.js
index cbc26b764..064c7b464 100644
--- a/packages/xo-web/src/xo-app/home/index.js
+++ b/packages/xo-web/src/xo-app/home/index.js
@@ -4,6 +4,7 @@ import _ from 'intl'
import ActionButton from 'action-button'
import Button from 'button'
import CenterPanel from 'center-panel'
+import classNames from 'classnames'
import Component from 'base-component'
import defined, { get } from 'xo-defined'
import Icon from 'icon'
@@ -14,7 +15,6 @@ import Pagination from 'pagination'
import propTypes from 'prop-types-decorator'
import React from 'react'
import Shortcuts from 'shortcuts'
-import SingleLineRow from 'single-line-row'
import Tooltip from 'tooltip'
import { Card, CardHeader, CardBlock } from 'card'
import {
@@ -782,9 +782,28 @@ export default class Home extends Component {
// Header --------------------------------------------------------------------
_renderHeader () {
- const { isAdmin, noResourceSets, type } = this.props
- const { filters } = OPTIONS[type]
const customFilters = this._getCustomFilters()
+ const filteredItems = this._getFilteredItems()
+ const nItems = this._getNumberOfItems()
+ const { isAdmin, items, noResourceSets, type } = this.props
+
+ const {
+ selectedHosts,
+ selectedPools,
+ selectedResourceSets,
+ selectedTags,
+ sortBy,
+ } = this.state
+
+ const options = OPTIONS[type]
+ const {
+ filters,
+ mainActions,
+ otherActions,
+ showHostsSelector,
+ showPoolsSelector,
+ showResourceSetsSelector,
+ } = options
return (
@@ -862,6 +881,190 @@ export default class Home extends Component {
)}
+
+
+ {' '}
+
+ {this._getNumberOfSelectedItems()
+ ? _('homeSelectedItems', {
+ icon: ,
+ selected: this._getNumberOfSelectedItems(),
+ total: nItems,
+ })
+ : _('homeDisplayedItems', {
+ displayed: filteredItems.length,
+ icon: ,
+ total: nItems,
+ })}
+
+
+
+ {this._getNumberOfSelectedItems() ? (
+
+ {mainActions && (
+
+ {map(mainActions, (action, key) => (
+
+
+
+ ))}
+
+ )}
+ {otherActions && (
+
+ {map(otherActions, (action, key) => (
+
+ ))}
+
+ )}
+
+ ) : (
+
+ {showPoolsSelector && (
+
+
+
+ }
+ >
+
+
+ )}
+ {showHostsSelector && (
+
+
+
+ }
+ >
+
+
+ )}
+
+
+
+ }
+ >
+
+
+ {showResourceSetsSelector &&
+ isAdmin &&
+ !noResourceSets && (
+
+
+
+ }
+ >
+
+
+ )}
+
+ {map(
+ options.sortOptions,
+ ({ labelId, sortBy: _sortBy, sortOrder }, key) => (
+
+ )
+ )}
+
+
+ )}
+
+
+
+
+
)
}
@@ -879,29 +1082,8 @@ export default class Home extends Component {
const filteredItems = this._getFilteredItems()
const visibleItems = this._getVisibleItems()
-
- const {
- activePage,
- expandAll,
- highlighted,
- selectedHosts,
- selectedItems,
- selectedPools,
- selectedResourceSets,
- selectedTags,
- sortBy,
- } = this.state
- const { items, type } = this.props
-
- const options = OPTIONS[type]
- const {
- Item,
- mainActions,
- otherActions,
- showHostsSelector,
- showPoolsSelector,
- showResourceSetsSelector,
- } = options
+ const { Item } = OPTIONS[this.props.type]
+ const { activePage, expandAll, highlighted, selectedItems } = this.state
// Necessary because indeterminate cannot be used as an attribute
if (this.refs.masterCheckbox) {
@@ -919,200 +1101,6 @@ export default class Home extends Component {
/>
-
-
- {' '}
-
- {this._getNumberOfSelectedItems()
- ? _('homeSelectedItems', {
- icon: ,
- selected: this._getNumberOfSelectedItems(),
- total: nItems,
- })
- : _('homeDisplayedItems', {
- displayed: filteredItems.length,
- icon: ,
- total: nItems,
- })}
-
-
-
- {this._getNumberOfSelectedItems() ? (
-
- {mainActions && (
-
- {map(mainActions, (action, key) => (
-
-
-
- ))}
-
- )}
- {otherActions && (
-
- {map(otherActions, (action, key) => (
-
- ))}
-
- )}
-
- ) : (
-
- {showPoolsSelector && (
-
-
-
- }
- >
-
-
- )}
- {showHostsSelector && (
-
-
-
- }
- >
-
-
- )}
-
-
-
- }
- >
-
-
- {showResourceSetsSelector &&
- isAdmin &&
- !noResourceSets && (
-
-
-
- }
- >
-
-
- )}
-
- {map(
- options.sortOptions,
- ({ labelId, sortBy: _sortBy, sortOrder }, key) => (
-
- )
- )}
-
-
- )}
-
-
-
-
-
{isEmpty(filteredItems) ? (