Rajaa.BARHTAOUI
Pierre Donias
parent
738d98eb42
commit
934356571c
@ -4,6 +4,7 @@ import _ from 'intl'
|
|||||||
import ActionButton from 'action-button'
|
import ActionButton from 'action-button'
|
||||||
import Button from 'button'
|
import Button from 'button'
|
||||||
import CenterPanel from 'center-panel'
|
import CenterPanel from 'center-panel'
|
||||||
|
import classNames from 'classnames'
|
||||||
import Component from 'base-component'
|
import Component from 'base-component'
|
||||||
import defined, { get } from 'xo-defined'
|
import defined, { get } from 'xo-defined'
|
||||||
import Icon from 'icon'
|
import Icon from 'icon'
|
||||||
@ -14,7 +15,6 @@ import Pagination from 'pagination'
|
|||||||
import propTypes from 'prop-types-decorator'
|
import propTypes from 'prop-types-decorator'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import Shortcuts from 'shortcuts'
|
import Shortcuts from 'shortcuts'
|
||||||
import SingleLineRow from 'single-line-row'
|
|
||||||
import Tooltip from 'tooltip'
|
import Tooltip from 'tooltip'
|
||||||
import { Card, CardHeader, CardBlock } from 'card'
|
import { Card, CardHeader, CardBlock } from 'card'
|
||||||
import {
|
import {
|
||||||
@ -782,9 +782,28 @@ export default class Home extends Component {
|
|||||||
// Header --------------------------------------------------------------------
|
// Header --------------------------------------------------------------------
|
||||||
|
|
||||||
_renderHeader () {
|
_renderHeader () {
|
||||||
const { isAdmin, noResourceSets, type } = this.props
|
|
||||||
const { filters } = OPTIONS[type]
|
|
||||||
const customFilters = this._getCustomFilters()
|
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 (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
@ -862,6 +881,190 @@ export default class Home extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
)}
|
)}
|
||||||
</Row>
|
</Row>
|
||||||
|
<Row className={classNames(styles.itemRowHeader, 'mt-1')}>
|
||||||
|
<Col smallSize={11} mediumSize={3}>
|
||||||
|
<input
|
||||||
|
checked={this._getIsAllSelected()}
|
||||||
|
onChange={this._toggleMaster}
|
||||||
|
ref='masterCheckbox'
|
||||||
|
type='checkbox'
|
||||||
|
/>{' '}
|
||||||
|
<span className='text-muted'>
|
||||||
|
{this._getNumberOfSelectedItems()
|
||||||
|
? _('homeSelectedItems', {
|
||||||
|
icon: <Icon icon={type.toLowerCase()} />,
|
||||||
|
selected: this._getNumberOfSelectedItems(),
|
||||||
|
total: nItems,
|
||||||
|
})
|
||||||
|
: _('homeDisplayedItems', {
|
||||||
|
displayed: filteredItems.length,
|
||||||
|
icon: <Icon icon={type.toLowerCase()} />,
|
||||||
|
total: nItems,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
<Col mediumSize={8} className='text-xs-right hidden-sm-down'>
|
||||||
|
{this._getNumberOfSelectedItems() ? (
|
||||||
|
<div>
|
||||||
|
{mainActions && (
|
||||||
|
<div className='btn-group'>
|
||||||
|
{map(mainActions, (action, key) => (
|
||||||
|
<Tooltip content={action.tooltip} key={key}>
|
||||||
|
<ActionButton
|
||||||
|
{...action}
|
||||||
|
handlerParam={this._getSelectedItemsIds()}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{otherActions && (
|
||||||
|
<DropdownButton
|
||||||
|
bsStyle='secondary'
|
||||||
|
id='advanced'
|
||||||
|
title={_('homeMore')}
|
||||||
|
>
|
||||||
|
{map(otherActions, (action, key) => (
|
||||||
|
<MenuItem
|
||||||
|
key={key}
|
||||||
|
onClick={() => {
|
||||||
|
action.handler(
|
||||||
|
this._getSelectedItemsIds(),
|
||||||
|
action.params
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon icon={action.icon} fixedWidth />{' '}
|
||||||
|
{_(action.labelId)}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownButton>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{showPoolsSelector && (
|
||||||
|
<OverlayTrigger
|
||||||
|
trigger='click'
|
||||||
|
rootClose
|
||||||
|
placement='bottom'
|
||||||
|
overlay={
|
||||||
|
<Popover className={styles.selectObject} id='poolPopover'>
|
||||||
|
<SelectPool
|
||||||
|
autoFocus
|
||||||
|
multi
|
||||||
|
onChange={this._updateSelectedPools}
|
||||||
|
value={selectedPools}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button btnStyle='link'>
|
||||||
|
<Icon icon='pool' /> {_('homeAllPools')}
|
||||||
|
</Button>
|
||||||
|
</OverlayTrigger>
|
||||||
|
)}
|
||||||
|
{showHostsSelector && (
|
||||||
|
<OverlayTrigger
|
||||||
|
trigger='click'
|
||||||
|
rootClose
|
||||||
|
placement='bottom'
|
||||||
|
overlay={
|
||||||
|
<Popover className={styles.selectObject} id='HostPopover'>
|
||||||
|
<SelectHost
|
||||||
|
autoFocus
|
||||||
|
multi
|
||||||
|
onChange={this._updateSelectedHosts}
|
||||||
|
value={selectedHosts}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button btnStyle='link'>
|
||||||
|
<Icon icon='host' /> {_('homeAllHosts')}
|
||||||
|
</Button>
|
||||||
|
</OverlayTrigger>
|
||||||
|
)}
|
||||||
|
<OverlayTrigger
|
||||||
|
autoFocus
|
||||||
|
trigger='click'
|
||||||
|
rootClose
|
||||||
|
placement='bottom'
|
||||||
|
overlay={
|
||||||
|
<Popover className={styles.selectObject} id='tagPopover'>
|
||||||
|
<SelectTag
|
||||||
|
autoFocus
|
||||||
|
multi
|
||||||
|
objects={items}
|
||||||
|
onChange={this._updateSelectedTags}
|
||||||
|
value={selectedTags}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button btnStyle='link'>
|
||||||
|
<Icon icon='tags' /> {_('homeAllTags')}
|
||||||
|
</Button>
|
||||||
|
</OverlayTrigger>
|
||||||
|
{showResourceSetsSelector &&
|
||||||
|
isAdmin &&
|
||||||
|
!noResourceSets && (
|
||||||
|
<OverlayTrigger
|
||||||
|
trigger='click'
|
||||||
|
rootClose
|
||||||
|
placement='bottom'
|
||||||
|
overlay={
|
||||||
|
<Popover
|
||||||
|
className={styles.selectObject}
|
||||||
|
id='resourceSetPopover'
|
||||||
|
>
|
||||||
|
<SelectResourceSet
|
||||||
|
autoFocus
|
||||||
|
multi
|
||||||
|
onChange={this._updateSelectedResourceSets}
|
||||||
|
value={selectedResourceSets}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button btnStyle='link'>
|
||||||
|
<Icon icon='resource-set' /> {_('homeAllResourceSets')}
|
||||||
|
</Button>
|
||||||
|
</OverlayTrigger>
|
||||||
|
)}
|
||||||
|
<DropdownButton
|
||||||
|
bsStyle='link'
|
||||||
|
id='sort'
|
||||||
|
title={_('homeSortBy')}
|
||||||
|
>
|
||||||
|
{map(
|
||||||
|
options.sortOptions,
|
||||||
|
({ labelId, sortBy: _sortBy, sortOrder }, key) => (
|
||||||
|
<MenuItem
|
||||||
|
key={key}
|
||||||
|
data-sort-by={_sortBy}
|
||||||
|
data-sort-order={sortOrder}
|
||||||
|
onClick={this._setSort}
|
||||||
|
>
|
||||||
|
{this._tick(_sortBy === sortBy)}
|
||||||
|
{_sortBy === sortBy ? (
|
||||||
|
<strong>{_(labelId)}</strong>
|
||||||
|
) : (
|
||||||
|
_(labelId)
|
||||||
|
)}
|
||||||
|
</MenuItem>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</DropdownButton>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Col>
|
||||||
|
<Col smallSize={1} mediumSize={1} className='text-xs-right'>
|
||||||
|
<Button onClick={this._expandAll}>
|
||||||
|
<Icon icon='nav' />
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -879,29 +1082,8 @@ export default class Home extends Component {
|
|||||||
|
|
||||||
const filteredItems = this._getFilteredItems()
|
const filteredItems = this._getFilteredItems()
|
||||||
const visibleItems = this._getVisibleItems()
|
const visibleItems = this._getVisibleItems()
|
||||||
|
const { Item } = OPTIONS[this.props.type]
|
||||||
const {
|
const { activePage, expandAll, highlighted, selectedItems } = this.state
|
||||||
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
|
|
||||||
|
|
||||||
// Necessary because indeterminate cannot be used as an attribute
|
// Necessary because indeterminate cannot be used as an attribute
|
||||||
if (this.refs.masterCheckbox) {
|
if (this.refs.masterCheckbox) {
|
||||||
@ -919,200 +1101,6 @@ export default class Home extends Component {
|
|||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.itemContainer}>
|
<div className={styles.itemContainer}>
|
||||||
<SingleLineRow className={styles.itemContainerHeader}>
|
|
||||||
<Col smallsize={11} mediumSize={3}>
|
|
||||||
<input
|
|
||||||
checked={this._getIsAllSelected()}
|
|
||||||
onChange={this._toggleMaster}
|
|
||||||
ref='masterCheckbox'
|
|
||||||
type='checkbox'
|
|
||||||
/>{' '}
|
|
||||||
<span className='text-muted'>
|
|
||||||
{this._getNumberOfSelectedItems()
|
|
||||||
? _('homeSelectedItems', {
|
|
||||||
icon: <Icon icon={type.toLowerCase()} />,
|
|
||||||
selected: this._getNumberOfSelectedItems(),
|
|
||||||
total: nItems,
|
|
||||||
})
|
|
||||||
: _('homeDisplayedItems', {
|
|
||||||
displayed: filteredItems.length,
|
|
||||||
icon: <Icon icon={type.toLowerCase()} />,
|
|
||||||
total: nItems,
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</Col>
|
|
||||||
<Col mediumSize={8} className='text-xs-right hidden-sm-down'>
|
|
||||||
{this._getNumberOfSelectedItems() ? (
|
|
||||||
<div>
|
|
||||||
{mainActions && (
|
|
||||||
<div className='btn-group'>
|
|
||||||
{map(mainActions, (action, key) => (
|
|
||||||
<Tooltip content={action.tooltip} key={key}>
|
|
||||||
<ActionButton
|
|
||||||
{...action}
|
|
||||||
handlerParam={this._getSelectedItemsIds()}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{otherActions && (
|
|
||||||
<DropdownButton
|
|
||||||
bsStyle='secondary'
|
|
||||||
id='advanced'
|
|
||||||
title={_('homeMore')}
|
|
||||||
>
|
|
||||||
{map(otherActions, (action, key) => (
|
|
||||||
<MenuItem
|
|
||||||
key={key}
|
|
||||||
onClick={() => {
|
|
||||||
action.handler(
|
|
||||||
this._getSelectedItemsIds(),
|
|
||||||
action.params
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Icon icon={action.icon} fixedWidth />{' '}
|
|
||||||
{_(action.labelId)}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</DropdownButton>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div>
|
|
||||||
{showPoolsSelector && (
|
|
||||||
<OverlayTrigger
|
|
||||||
trigger='click'
|
|
||||||
rootClose
|
|
||||||
placement='bottom'
|
|
||||||
overlay={
|
|
||||||
<Popover
|
|
||||||
className={styles.selectObject}
|
|
||||||
id='poolPopover'
|
|
||||||
>
|
|
||||||
<SelectPool
|
|
||||||
autoFocus
|
|
||||||
multi
|
|
||||||
onChange={this._updateSelectedPools}
|
|
||||||
value={selectedPools}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button btnStyle='link'>
|
|
||||||
<Icon icon='pool' /> {_('homeAllPools')}
|
|
||||||
</Button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
)}
|
|
||||||
{showHostsSelector && (
|
|
||||||
<OverlayTrigger
|
|
||||||
trigger='click'
|
|
||||||
rootClose
|
|
||||||
placement='bottom'
|
|
||||||
overlay={
|
|
||||||
<Popover
|
|
||||||
className={styles.selectObject}
|
|
||||||
id='HostPopover'
|
|
||||||
>
|
|
||||||
<SelectHost
|
|
||||||
autoFocus
|
|
||||||
multi
|
|
||||||
onChange={this._updateSelectedHosts}
|
|
||||||
value={selectedHosts}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button btnStyle='link'>
|
|
||||||
<Icon icon='host' /> {_('homeAllHosts')}
|
|
||||||
</Button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
)}
|
|
||||||
<OverlayTrigger
|
|
||||||
autoFocus
|
|
||||||
trigger='click'
|
|
||||||
rootClose
|
|
||||||
placement='bottom'
|
|
||||||
overlay={
|
|
||||||
<Popover
|
|
||||||
className={styles.selectObject}
|
|
||||||
id='tagPopover'
|
|
||||||
>
|
|
||||||
<SelectTag
|
|
||||||
autoFocus
|
|
||||||
multi
|
|
||||||
objects={items}
|
|
||||||
onChange={this._updateSelectedTags}
|
|
||||||
value={selectedTags}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button btnStyle='link'>
|
|
||||||
<Icon icon='tags' /> {_('homeAllTags')}
|
|
||||||
</Button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
{showResourceSetsSelector &&
|
|
||||||
isAdmin &&
|
|
||||||
!noResourceSets && (
|
|
||||||
<OverlayTrigger
|
|
||||||
trigger='click'
|
|
||||||
rootClose
|
|
||||||
placement='bottom'
|
|
||||||
overlay={
|
|
||||||
<Popover
|
|
||||||
className={styles.selectObject}
|
|
||||||
id='resourceSetPopover'
|
|
||||||
>
|
|
||||||
<SelectResourceSet
|
|
||||||
autoFocus
|
|
||||||
multi
|
|
||||||
onChange={this._updateSelectedResourceSets}
|
|
||||||
value={selectedResourceSets}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Button btnStyle='link'>
|
|
||||||
<Icon icon='resource-set' />{' '}
|
|
||||||
{_('homeAllResourceSets')}
|
|
||||||
</Button>
|
|
||||||
</OverlayTrigger>
|
|
||||||
)}
|
|
||||||
<DropdownButton
|
|
||||||
bsStyle='link'
|
|
||||||
id='sort'
|
|
||||||
title={_('homeSortBy')}
|
|
||||||
>
|
|
||||||
{map(
|
|
||||||
options.sortOptions,
|
|
||||||
({ labelId, sortBy: _sortBy, sortOrder }, key) => (
|
|
||||||
<MenuItem
|
|
||||||
key={key}
|
|
||||||
data-sort-by={_sortBy}
|
|
||||||
data-sort-order={sortOrder}
|
|
||||||
onClick={this._setSort}
|
|
||||||
>
|
|
||||||
{this._tick(_sortBy === sortBy)}
|
|
||||||
{_sortBy === sortBy ? (
|
|
||||||
<strong>{_(labelId)}</strong>
|
|
||||||
) : (
|
|
||||||
_(labelId)
|
|
||||||
)}
|
|
||||||
</MenuItem>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</DropdownButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Col>
|
|
||||||
<Col smallsize={1} mediumSize={1} className='text-xs-right'>
|
|
||||||
<Button onClick={this._expandAll}>
|
|
||||||
<Icon icon='nav' />
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</SingleLineRow>
|
|
||||||
{isEmpty(filteredItems) ? (
|
{isEmpty(filteredItems) ? (
|
||||||
<p className='text-xs-center mt-1'>
|
<p className='text-xs-center mt-1'>
|
||||||
<a className='btn btn-link' onClick={this._clearFilter}>
|
<a className='btn btn-link' onClick={this._clearFilter}>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user