NuKVM/xen-orchestra
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(xo-web/home): fix toolbar in header (#2798)

Browse Source 
Fixes #1581
This commit is contained in:
Rajaa.BARHTAOUI 2018-03-28 11:29:27 +02:00 committed by Pierre Donias
parent 738d98eb42
commit 934356571c
1 changed files with 208 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
packages/xo-web/src/xo-app/home/index.js
View File

@ -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 (
<Container>
@ -862,65 +881,8 @@ export default class Home extends Component {
</Col>
)}
</Row>
</Container>
)
}
// ---------------------------------------------------------------------------
render () {
const { isAdmin, noResourceSets } = this.props
const nItems = this._getNumberOfItems()
if (nItems < 1) {
return <NoObjects_ isAdmin={isAdmin} noResourceSets={noResourceSets} />
}
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
// Necessary because indeterminate cannot be used as an attribute
if (this.refs.masterCheckbox) {
this.refs.masterCheckbox.indeterminate =
this._getIsSomeSelected() && !this._getIsAllSelected()
}
return (
<Page header={this._renderHeader()}>
<Shortcuts
handler={this._getShortcutsHandler()}
isolate
name='Home'
targetNodeSelector='body'
/>
<div>
<div className={styles.itemContainer}>
<SingleLineRow className={styles.itemContainerHeader}>
<Col smallsize={11} mediumSize={3}>
<Row className={classNames(styles.itemRowHeader, 'mt-1')}>
<Col smallSize={11} mediumSize={3}>
<input
checked={this._getIsAllSelected()}
onChange={this._toggleMaster}
@ -987,10 +949,7 @@ export default class Home extends Component {
rootClose
placement='bottom'
overlay={
<Popover
className={styles.selectObject}
id='poolPopover'
>
<Popover className={styles.selectObject} id='poolPopover'>
<SelectPool
autoFocus
multi
@ -1011,10 +970,7 @@ export default class Home extends Component {
rootClose
placement='bottom'
overlay={
<Popover
className={styles.selectObject}
id='HostPopover'
>
<Popover className={styles.selectObject} id='HostPopover'>
<SelectHost
autoFocus
multi
@ -1035,10 +991,7 @@ export default class Home extends Component {
rootClose
placement='bottom'
overlay={
<Popover
className={styles.selectObject}
id='tagPopover'
>
<Popover className={styles.selectObject} id='tagPopover'>
<SelectTag
autoFocus
multi
@ -1075,8 +1028,7 @@ export default class Home extends Component {
}
>
<Button btnStyle='link'>
<Icon icon='resource-set' />{' '}
{_('homeAllResourceSets')}
<Icon icon='resource-set' /> {_('homeAllResourceSets')}
</Button>
</OverlayTrigger>
)}
@ -1107,12 +1059,48 @@ export default class Home extends Component {
</div>
)}
</Col>
<Col smallsize={1} mediumSize={1} className='text-xs-right'>
<Col smallSize={1} mediumSize={1} className='text-xs-right'>
<Button onClick={this._expandAll}>
<Icon icon='nav' />
</Button>
</Col>
</SingleLineRow>
</Row>
</Container>
)
}
// ---------------------------------------------------------------------------
render () {
const { isAdmin, noResourceSets } = this.props
const nItems = this._getNumberOfItems()
if (nItems < 1) {
return <NoObjects_ isAdmin={isAdmin} noResourceSets={noResourceSets} />
}
const filteredItems = this._getFilteredItems()
const visibleItems = this._getVisibleItems()
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) {
this.refs.masterCheckbox.indeterminate =
this._getIsSomeSelected() && !this._getIsAllSelected()
}
return (
<Page header={this._renderHeader()}>
<Shortcuts
handler={this._getShortcutsHandler()}
isolate
name='Home'
targetNodeSelector='body'
/>
<div>
<div className={styles.itemContainer}>
{isEmpty(filteredItems) ? (
<p className='text-xs-center mt-1'>
<a className='btn btn-link' onClick={this._clearFilter}>