[Activity] Add search box for containers and images #1

MozillaSecurity · May 29, 2019 · d5f46af · d5f46af
1 parent 9ffb0fd
commit d5f46af
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git 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 (
       <Paper className={classes.root}>
         <EnhancedTableToolbar
           numSelected={selected.length}
-          title=""
+          search={search}
           onRemoveCallback={this.onRemove}
           onRefreshListCallback={this.onRefresh}
           onStopCallback={this.onStop}
+          onSearchCallback={this.onSearchChange}
         />
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
@@ -231,6 +237,7 @@ class EnhancedTable extends React.Component {
             <TableBody>
               {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
@@ -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 (
       <Paper className={classes.root}>
         <EnhancedTableToolbar
           numSelected={selected.length}
-          title=""
+          search={search}
           onRemoveCallback={this.onRemove}
           onRefreshListCallback={this.onRefresh}
+          onSearchCallback={this.onSearchChange}
         />
         <TablePagination
           rowsPerPageOptions={[5, 10, 25]}
@@ -213,6 +219,7 @@ class EnhancedTable extends React.Component {
             <TableBody>
               {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 {
                       </TableCell>
                       <TableCell align="right">{n.size}</TableCell>
                       <TableCell align="right">{n.date}</TableCell>
-                      <TableCell align="right">{n.tags}</TableCell>
+                      <TableCell align="right">{n.tags.join(', ')}</TableCell>
                       <TableCell align="right">{n.containers}</TableCell>
                     </TableRow>
                   )

diff --git 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 => {
           </Typography>
         ) : (
           <Typography variant="h6" id="tableTitle">
-            {title}
+            {onSearchCallback && (
+              <TextField
+                value={search}
+                onChange={onSearchCallback}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <SearchIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            )}
           </Typography>
         )}
       </div>
@@ -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)