refactor row selection

matt-deboer · Oct 31, 2017 · e8c931a · e8c931a
1 parent 9f705ab
commit e8c931a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 26 deletions.
diff --git a/pkg/ui/src/components/WorkloadsPage.js b/pkg/ui/src/components/WorkloadsPage.js
@@ -13,8 +13,8 @@ import IconDelete from 'material-ui/svg-icons/action/delete'
 import IconSuspend from 'material-ui/svg-icons/content/block'
 import Paper from 'material-ui/Paper'
 
-import { arraysEqual } from '../comparators'
-import { compareStatuses, kindsByResourceGroup } from '../utils/resource-utils'
+import { arraysEqual, objectEmpty } from '../comparators'
+import { compareStatuses, kindsByResourceGroup, anySelectedWithReplicas } from '../utils/resource-utils'
 import { getResourceCellValue, renderResourceCell } from '../utils/resource-column-utils'
 
 import FilterBox from './FilterBox'
@@ -364,26 +364,13 @@ class WorkloadsPage extends React.Component {
   handleRowSelection = (selectedIds) => {
     if (!this.actionsClicked) {
       this.selectedIds = selectedIds
-      this.deleteEnabled = this.canDelete(selectedIds)
-      this.suspendEnabled = this.canSuspend(selectedIds)
+      this.deleteEnabled = !objectEmpty(selectedIds)
+      this.suspendEnabled = anySelectedWithReplicas(selectedIds, this.props.resources)
       this.deleteButton.setDisabled(!this.deleteEnabled)
       this.suspendButton.setDisabled(!this.suspendEnabled)
     }
   }
 
-  canSuspend = (selectedIds) => {
-    for (let id in selectedIds) {
-      if ('spec' in this.props.resources[id] && !!this.props.resources[id].spec.replicas) {
-        return true
-      }
-    }
-    return false
-  }
-
-  canDelete = (selectedIds) => {
-    return Object.keys(selectedIds).length > 0
-  }
-
   handleCellClick = (rowId, colId, resource, col) => {
     this.actionsClicked = false
     if (col.id === 'actions') {

diff --git a/pkg/ui/src/components/configuration-pane/PodsPane.js b/pkg/ui/src/components/configuration-pane/PodsPane.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { removeResource, requestResources, viewResource } from '../../state/actions/resources'
 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'
@@ -16,7 +17,7 @@ const mapStateToProps = function(store) {
     resources: store.resources.resources,
     accessEvaluator: store.session.accessEvaluator,
     linkGenerator: store.session.linkGenerator,
-    podsRevision: store.resources.maxResourceVersionByKind.Pod,
+    maxResourceVersionByKind: store.resources.maxResourceVersionByKind,
     podMetrics: store.metrics.pod,
   }
 }
@@ -53,7 +54,7 @@ const styles = {
 
 export default sizeMe({ monitorHeight: true, monitorWidth: true }) (
 connect(mapStateToProps, mapDispatchToProps) (
-class PodsPane extends React.Component {
+class PodsPane extends React.PureComponent {
 
   static propTypes = {
     node: PropTypes.object.isRequired,
@@ -71,6 +72,7 @@ class PodsPane extends React.Component {
       hoveredRow: -1,
       hoveredResources: null,
       selectedResources: [],
+      pods: [],
     }
     this.selectedIds = {}
     this.columns = [
@@ -245,8 +247,7 @@ class PodsPane extends React.Component {
   handleRowSelection = (selectedIds) => {
     if (!this.actionsClicked) {
       this.selectedIds = selectedIds
-      this.deleteEnabled = this.canDelete(selectedIds)
-      this.suspendEnabled = this.canSuspend(selectedIds)
+      this.deleteEnabled = !objectEmpty(selectedIds)
       this.deleteButton.setDisabled(!this.deleteEnabled)
       this.suspendButton.setDisabled(!this.suspendEnabled)
     }
@@ -302,15 +303,18 @@ class PodsPane extends React.Component {
   }
 
   componentWillReceiveProps = (props) => {
-    this.setState({
-      pods: this.resolvePods(props.resources, this.state.nodeName)
-    })
+    if (props.maxResourceVersionByKind.Pod !== this.props.maxResourceVersionByKind.Pod) {
+      this.setState({
+        pods: this.resolvePods(props.resources, this.state.nodeName)
+      })
+    }
   }
 
   shouldComponentUpdate = (nextProps, nextState) => {
-    return nextProps.podsRevision !== this.props.podsRevision
+    return nextProps.maxResourceVersionByKind.Pod !== this.props.maxResourceVersionByKind.Pod
         || nextState.actionsOpen !== this.state.actionsOpen
         || nextProps.contentTop !== this.props.contentTop
+        || nextState.pods !== this.state.pods
   }
 
   render() {

diff --git a/pkg/ui/src/components/filter-table/FilterTable.js b/pkg/ui/src/components/filter-table/FilterTable.js
@@ -80,7 +80,7 @@ export default class FilterTable extends React.PureComponent {
     this.columnIndexbyId = columnIndexbyId
     let orderBy = (this.state && this.state.orderBy) || props.initialOrderBy
     let order = (this.state && this.state.order) || props.initialOrder
-    let data = props.data.slice(0)
+    let data = (props.data || []).slice(0)
     let sort = props.onRequestSort || this.defaultSort
     if (orderBy && order) {
       sort(props.columns[columnIndexbyId[orderBy]], order, data)

diff --git a/pkg/ui/src/utils/resource-utils.js b/pkg/ui/src/utils/resource-utils.js
@@ -132,6 +132,22 @@ function stripLastSegment(name) {
     return ''
 }
 
+/**
+ * Returns 'true' if any of the resource ids passed has replicas
+ * 
+ * @param {*} selectedIds a hash where keys are resource ids
+ * @param {*} resources the resources hash
+ */
+export function anySelectedWithReplicas(selectedIds, resources) {
+    for (let id in selectedIds) {
+      let r = resources[id]
+      if ('spec' in r && (!!r.spec.replicas || !!r.spec.readyReplicas)) {
+        return true
+      }
+    }
+    return false
+}
+
 var statuses = {
     'ok': 1,
     'none': 2,