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) => ( + { + action.handler( + this._getSelectedItemsIds(), + action.params + ) + }} + > + {' '} + {_(action.labelId)} + + ))} + + )} +
+ ) : ( +
+ {showPoolsSelector && ( + + + + } + > + + + )} + {showHostsSelector && ( + + + + } + > + + + )} + + + + } + > + + + {showResourceSetsSelector && + isAdmin && + !noResourceSets && ( + + + + } + > + + + )} + + {map( + options.sortOptions, + ({ labelId, sortBy: _sortBy, sortOrder }, key) => ( + + {this._tick(_sortBy === sortBy)} + {_sortBy === sortBy ? ( + {_(labelId)} + ) : ( + _(labelId) + )} + + ) + )} + +
+ )} + + + + +
) } @@ -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) => ( - { - action.handler( - this._getSelectedItemsIds(), - action.params - ) - }} - > - {' '} - {_(action.labelId)} - - ))} - - )} -
- ) : ( -
- {showPoolsSelector && ( - - - - } - > - - - )} - {showHostsSelector && ( - - - - } - > - - - )} - - - - } - > - - - {showResourceSetsSelector && - isAdmin && - !noResourceSets && ( - - - - } - > - - - )} - - {map( - options.sortOptions, - ({ labelId, sortBy: _sortBy, sortOrder }, key) => ( - - {this._tick(_sortBy === sortBy)} - {_sortBy === sortBy ? ( - {_(labelId)} - ) : ( - _(labelId) - )} - - ) - )} - -
- )} - - - - -
{isEmpty(filteredItems) ? (