diff --git a/src/renderer/containers/Activity/DockerContainers.jsx b/src/renderer/containers/Activity/DockerContainers.jsx index 9d9a390..8b83fe4 100644 --- a/src/renderer/containers/Activity/DockerContainers.jsx +++ b/src/renderer/containers/Activity/DockerContainers.jsx @@ -79,7 +79,8 @@ class EnhancedTable extends React.Component { selected: [], data: [], page: 0, - rowsPerPage: 5 + rowsPerPage: 5, + search: '' } componentDidMount() { @@ -189,18 +190,23 @@ class EnhancedTable extends React.Component { ipcRenderer.send('container.list') } + onSearchChange = event => { + this.setState({ search: event.target.value }) + } + render() { const { classes } = this.props - const { data, order, orderBy, selected, rowsPerPage, page } = this.state + const { data, search, order, orderBy, selected, rowsPerPage, page } = this.state return ( {stableSort(data, getSorting(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .filter(item => !search || item.image.includes(search)) .map(n => { const isSelected = this.isSelected(n.id) return ( diff --git a/src/renderer/containers/Activity/DockerImages.jsx b/src/renderer/containers/Activity/DockerImages.jsx index 902b019..c221c7b 100644 --- a/src/renderer/containers/Activity/DockerImages.jsx +++ b/src/renderer/containers/Activity/DockerImages.jsx @@ -79,7 +79,8 @@ class EnhancedTable extends React.Component { selected: [], data: [], page: 0, - rowsPerPage: 5 + rowsPerPage: 5, + search: '' } componentDidMount() { @@ -171,17 +172,22 @@ class EnhancedTable extends React.Component { ipcRenderer.send('image.list') } + onSearchChange = event => { + this.setState({ search: event.target.value }) + } + render() { const { classes } = this.props - const { data, order, orderBy, selected, rowsPerPage, page } = this.state + const { data, search, order, orderBy, selected, rowsPerPage, page } = this.state return ( {stableSort(data, getSorting(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .filter(item => !search || item.tags.join(', ').includes(search)) .map(n => { const isSelected = this.isSelected(n.id) return ( @@ -233,7 +240,7 @@ class EnhancedTable extends React.Component { {n.size} {n.date} - {n.tags} + {n.tags.join(', ')} {n.containers} ) diff --git a/src/renderer/containers/Activity/Table/TableToolbar.jsx b/src/renderer/containers/Activity/Table/TableToolbar.jsx index 7e229d3..01d9660 100644 --- a/src/renderer/containers/Activity/Table/TableToolbar.jsx +++ b/src/renderer/containers/Activity/Table/TableToolbar.jsx @@ -7,9 +7,12 @@ import PropTypes from 'prop-types' import Toolbar from '@material-ui/core/Toolbar' import Typography from '@material-ui/core/Typography' import IconButton from '@material-ui/core/IconButton' +import InputAdornment from '@material-ui/core/InputAdornment' +import TextField from '@material-ui/core/TextField' import Tooltip from '@material-ui/core/Tooltip' import DeleteIcon from '@material-ui/icons/Delete' import RefreshIcon from '@material-ui/icons/Refresh' +import SearchIcon from '@material-ui/icons/Search' import StopIcon from '@material-ui/icons/Stop' import FilterListIcon from '@material-ui/icons/FilterList' import { lighten } from '@material-ui/core/styles/colorManipulator' @@ -47,12 +50,13 @@ const styles = theme => ({ const EnhancedTableToolbar = props => { const { classes, + search, numSelected, - title, onRemoveCallback, onStopCallback, onRefreshListCallback, - onFilterListCallback + onFilterListCallback, + onSearchCallback } = props return ( @@ -64,7 +68,19 @@ const EnhancedTableToolbar = props => { ) : ( - {title} + {onSearchCallback && ( + + + + ) + }} + /> + )} )} @@ -107,11 +123,12 @@ const EnhancedTableToolbar = props => { EnhancedTableToolbar.propTypes = { classes: PropTypes.object.isRequired, numSelected: PropTypes.number.isRequired, - title: PropTypes.string.isRequired, onRemoveCallback: PropTypes.func.isRequired, onRefreshListCallback: PropTypes.func.isRequired, onFilterListCallback: PropTypes.func, - onStopCallback: PropTypes.func + onStopCallback: PropTypes.func, + onSearchCallback: PropTypes.fun, + search: PropTypes.string } export default withStyles(styles)(EnhancedTableToolbar)