add multi-select delete and filters to pods pane

pkg/ui/src/components/MultiResourceActionButton.js

@@ -0,0 +1,25 @@
+
+import React from 'react'
+import FloatingActionButton from 'material-ui/FloatingActionButton'
+
+export default class MultiResourceActionButton extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      disabled: props.disabled,
+    }
+  }
+
+  setDisabled = (disabled) => {
+    this.setState({disabled: disabled})
+  }
+
+  render() {
+    let { props } = this
+    return <FloatingActionButton {...props} disabled={this.state.disabled}>
+       {props.children}
+      </FloatingActionButton>
+  }
+
+}

pkg/ui/src/components/WorkloadsPage.js

@@ -22,6 +22,7 @@ import ConfirmationDialog from './ConfirmationDialog'
 import ScaleDialog from './ScaleDialog'
 import FilteredResourceCountsPanel from './FilteredResourceCountsPanel'
 import RowActionMenu from './RowActionMenu'
+import MultiResourceActionButton from './MultiResourceActionButton'
 import './WorkloadsPage.css'
 
 // import Perf from 'react-addons-perf'
@@ -629,25 +630,3 @@ class WorkloadsPage extends React.Component {
     )
   }
 })))
-
-class MultiResourceActionButton extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      disabled: props.disabled,
-    }
-  }
-
-  setDisabled = (disabled) => {
-    this.setState({disabled: disabled})
-  }
-
-  render() {
-    let { props } = this
-    return <FloatingActionButton {...props} disabled={this.state.disabled}>
-       {props.children}
-      </FloatingActionButton>
-  }
-
-}

pkg/ui/src/components/cluster/NodesTab.js

@@ -35,7 +35,6 @@ import Perf from 'react-addons-perf'
 
 const mapStateToProps = function(store) {
   return {
-    filters: store.resources.filters,
     filterNames: store.resources.filterNames,
     fetching: store.requests.fetching,
     autocomplete: store.resources.autocomplete.nodes,
@@ -661,7 +660,6 @@ class NodesTab extends React.Component {
           anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
           targetOrigin={{horizontal: 'left', vertical: 'top'}}
         >
-          {/* can we get a terminal into the kubelet itself? */}
 
           {this.props.kinds.cluster[this.state.hoveredResource.kind].hasTerminal &&
           <FloatingActionButton mini={true} style={styles.miniButton}
@@ -671,7 +669,6 @@ class NodesTab extends React.Component {
           </FloatingActionButton>
           }
 
-          {/* TODO: need to check whether this resource can actually be edited by the user */}
           <FloatingActionButton mini={true} style={styles.miniButton}
             onTouchTap={()=> { this.props.viewResource(this.state.hoveredResource,'edit') }}
             data-rh="Edit...">

pkg/ui/src/components/configuration-pane/PodsPane.js

@@ -1,15 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { removeResource, requestResources, viewResource } from '../../state/actions/resources'
+import { removeResource, requestResources, viewResource, addFilter, removeFilter } from '../../state/actions/resources'
+import { red900 } from 'material-ui/styles/colors'
 import { requestMetrics } from '../../state/actions/metrics'
 import { compareStatuses } from '../../utils/resource-utils'
 import { objectEmpty } from '../../comparators'
 import { getResourceCellValue, renderResourceCell } from '../../utils/resource-column-utils'
 import sizeMe from 'react-sizeme'
 import { connect } from 'react-redux'
+import IconDelete from 'material-ui/svg-icons/action/delete'
+import FilterBox from '../FilterBox'
 import FilterTable from '../filter-table/FilterTable'
 import RowActionMenu from '../RowActionMenu'
 import ConfirmationDialog from '../ConfirmationDialog'
+import MultiResourceActionButton from '../MultiResourceActionButton'
 import './PodsPane.css'
 
 const mapStateToProps = function(store) {
@@ -19,6 +23,8 @@ const mapStateToProps = function(store) {
     linkGenerator: store.session.linkGenerator,
     maxResourceVersionByKind: store.resources.maxResourceVersionByKind,
     podMetrics: store.metrics.pod,
+    filterNames: store.resources.filterNames,
+    autocomplete: store.resources.autocomplete.pods,
   }
 }
 
@@ -36,6 +42,12 @@ const mapDispatchToProps = function(dispatch, ownProps) {
     removeResource: function(...resources) {
       dispatch(removeResource(...resources))
     },
+    addFilter: function(filterName) {
+      dispatch(addFilter(filterName))
+    },
+    removeFilter: function(filterName, index) {
+      dispatch(removeFilter(filterName, index))
+    },
   } 
 }
 
@@ -50,6 +62,14 @@ const styles = {
     paddingLeft: 2,
     paddingRight: 2,
   },
+  deleteResourceButton: {
+    margin: 0,
+    top: 20,
+    right: 40,
+    bottom: 'auto',
+    left: 'auto',
+    position: 'absolute',
+  },
 }
 
 export default sizeMe({ monitorHeight: true, monitorWidth: true }) (
@@ -175,6 +195,7 @@ class PodsPane extends React.PureComponent {
         label: 'actions ',
         headerStyle: {...styles.header,
           paddingLeft: 0,
+          paddingRight: 10,
         },
         style: { ...styles.cell,
           width: 55,
@@ -249,7 +270,6 @@ class PodsPane extends React.PureComponent {
       this.selectedIds = selectedIds
       this.deleteEnabled = !objectEmpty(selectedIds)
       this.deleteButton.setDisabled(!this.deleteEnabled)
-      this.suspendButton.setDisabled(!this.suspendEnabled)
     }
   }
 
@@ -322,12 +342,30 @@ class PodsPane extends React.PureComponent {
     let { props } = this
 
     return (
-      <div>
+      <div style={{padding: '0 15px'}}>
+        <FilterBox
+          addFilter={props.addFilter} 
+          removeFilter={props.removeFilter}
+          filterNames={props.filterNames}
+          autocomplete={props.autocomplete}
+          />
+
+        <MultiResourceActionButton backgroundColor={red900} 
+          mini={true} 
+          style={styles.deleteResourceButton} 
+          disabled={!this.deleteEnabled}
+          onTouchTap={this.handleDelete}
+          ref={(ref)=>{this.deleteButton = ref}}
+          data-rh={'Delete Selected...'}
+          data-rh-at={'bottom'}>
+            <IconDelete/>
+        </MultiResourceActionButton>
+
         <FilterTable
           className={'pods'}
           columns={this.columns}
           data={this.state.pods}
-          height={`calc(100vh - ${props.contentTop + 89}px)`}
+          height={`calc(100vh - ${props.contentTop + 177}px)`}
           multiSelectable={true}
           revision={`${props.resourceRevision}-${props.metricsRevision}`}
           onRowSelection={this.handleRowSelection}
@@ -340,7 +378,7 @@ class PodsPane extends React.PureComponent {
           iconStyle={{fill: 'rgba(255,255,255,0.9)'}}
           iconInactiveStyle={{fill: 'rgba(255,255,255,0.5)'}}
           width={'calc(100vw - 60px)'}
-          wrapperStyle={{overflowX: 'hidden', overflowY: 'auto'}}
+          wrapperStyle={{marginLeft: -15, marginRight: -15, overflowX: 'hidden', overflowY: 'auto'}}
           headerStyle={{backgroundColor: 'rgba(185, 162, 131, 0.85)', color: 'white'}}
           />
 

pkg/ui/src/containers/AccessControlsInfo.js

@@ -181,8 +181,8 @@ class AccessControlsInfo extends React.Component {
     let resourceInfoPage = null
     let resourceNotFound = null
 
-    if (!!this.state.resource && !fetching) {
-      if (this.state.resource.notFound) {
+    if (!!this.state.resource) {
+      if (this.state.resource.notFound && !fetching) {
         resourceNotFound = <ResourceNotFoundPage resourceGroup={'workloads'} {...this.props.match.params}/>
       } else {
         resourceInfoPage = 

pkg/ui/src/containers/ClusterInfo.js

@@ -158,8 +158,8 @@ class ClusterInfo extends React.Component {
     let resourceInfoPage = null
     let resourceNotFound = null
 
-    if (!!this.state.resource && !fetching) {
-      if (this.state.resource.notFound) {
+    if (!!this.state.resource) {
+      if (this.state.resource.notFound && !fetching) {
         resourceNotFound = <ResourceNotFoundPage resourceGroup={'workloads'} {...props.match.params}/>
       } else {
         resourceInfoPage = 

pkg/ui/src/containers/WorkloadInfo.js

@@ -232,8 +232,8 @@ class WorkloadInfo extends React.Component {
     let resourceInfoPage = null
     let resourceNotFound = null
 
-    if (!!this.state.resource && !fetching) {
-      if (this.state.resource.notFound) {
+    if (!!this.state.resource) {
+      if (this.state.resource.notFound && !fetching) {
         resourceNotFound = <ResourceNotFoundPage resourceGroup={'workloads'} {...this.props.match.params}/>
       } else {
         resourceInfoPage = 

pkg/ui/src/state/reducers/resources.js

@@ -25,6 +25,7 @@ const initialState = {
     nodes: {},
     access: {},
     subjects: {},
+    pods: {},
   },
   // the currently selected resource
   resource: null,
@@ -215,6 +216,9 @@ function updateAutocomplete(state, resource, group) {
   switch(autocompleteGroup) {
     case 'workloads':
       updateWorkloadsAutocomplete(autocomplete.workloads, resource)
+      if (resource.kind === 'Pod') {
+        updatePodsAutocomplete(autocomplete.pods, resource)
+      }
       break
     case 'nodes':
       updateNodesAutocomplete(autocomplete.nodes, resource)
@@ -241,6 +245,16 @@ function updateWorkloadsAutocomplete(possible, resource) {
   }
 }
 
+function updatePodsAutocomplete(possible, resource) {
+  if (resource.metadata && resource.metadata.namespace) {
+    possible[`namespace:${resource.metadata.namespace}`]=true
+  }
+  if (resource.metadata.labels && 'app' in resource.metadata.labels) {
+    possible[`app:${resource.metadata.labels.app}`]=true
+  }
+  possible[`status:${resource.statusSummary}`]=true
+}
+
 function updateNodesAutocomplete(possible, resource) {
   for (let key in resource.metadata.labels) {
     possible[`${key.split('/').pop()}:${resource.metadata.labels[key]}`]=true
@@ -575,6 +589,7 @@ function doSetGlobalFilters(state, selectedNamespaces, selectedKinds, kubeKinds)
       nodes: {},
       access: {},
       subjects: {},
+      pods: {},
     },
   }