use connectStore in VmGroup TabGeneral

src/xo-app/vm-group/tab-general.js

@@ -1,58 +1,56 @@
-import Component from 'base-component'
 import forEach from 'lodash/forEach'
 import Icon from 'icon'
 import reduce from 'lodash/reduce'
 import React from 'react'
 import size from 'lodash/size'
-import store from 'store'
+import { connectStore, formatSize } from 'utils'
 import { Container, Row, Col } from 'grid'
-import { formatSize } from 'utils'
 import { getObject } from 'selectors'
 
-export default class TabGeneral extends Component {
-
-  _getMemoryDynamicTotal = () => reduce(this.props.vms, (sum, vm) => vm.memory.dynamic[1] + sum, 0)
-  _getMemoryTotal = () => {
+export default connectStore(() => {
+  const getMemoryTotal = (state, props) => {
     const vbdIds = new Set()
-    forEach(this.props.vms, vm => forEach(vm.$VBDs, vbd => vbdIds.add(vbd)))
+    forEach(props.vms, vm => forEach(vm.$VBDs, vbd => vbdIds.add(vbd)))
     var sum = 0
     vbdIds.forEach(vbdId => {
-      const vbd = getObject(store.getState(), vbdId)
-      if (vbd) sum += getObject(store.getState(), vbd.VDI).size
+      const vbd = getObject(state, vbdId)
+      if (vbd) sum += getObject(state, vbd.VDI).size
     })
     return sum
   }
-  _getNbCPU = () => reduce(this.props.vms, (sum, vm) => vm.CPUs.number + sum, 0)
 
-  _addTag = tag => { /* TODO */ }
-  _removeTag = tag => { /* TODO */ }
+  const getMemoryDynamicTotal = props => reduce(props.vms, (sum, vm) => vm.memory.dynamic[1] + sum, 0)
 
-  render () {
-    const { vms } = this.props
-    return (
+  const getNbCPU = props => reduce(props.vms, (sum, vm) => vm.CPUs.number + sum, 0)
 
-      <Container>
-        <br />
-        <div>
-          <Row className='text-xs-center'>
-            <Col mediumSize={3}>
-              <h2>{size(vms)}x <Icon icon='vm' size='lg' /></h2>
-            </Col>
-            <Col mediumSize={3}>
-              <h2>{this._getNbCPU()}x <Icon icon='cpu' size='lg' /></h2>
-            </Col>
-            <Col mediumSize={3}>
-              <h2 className='form-inline'>
-                {formatSize(this._getMemoryDynamicTotal())}
-                &nbsp;<span><Icon icon='memory' size='lg' /></span>
-              </h2>
-            </Col>
-            <Col mediumSize={3}>
-              <h2>{formatSize(this._getMemoryTotal())} <Icon icon='disk' size='lg' /></h2>
-            </Col>
-          </Row>
-        </div>
-      </Container>
-    )
-  }
-}
+  return (state, props) => ({
+    memoryTotal: getMemoryTotal(state, props),
+    memoryDynamical: getMemoryDynamicTotal(props),
+    nbCPU: getNbCPU(props)
+  })
+})(({ vms, memoryTotal, memoryDynamical, nbCPU }) => {
+  return (
+    <Container>
+      <br />
+      <div>
+        <Row className='text-xs-center'>
+          <Col mediumSize={3}>
+            <h2>{size(vms)}x <Icon icon='vm' size='lg' /></h2>
+          </Col>
+          <Col mediumSize={3}>
+            <h2>{nbCPU}x <Icon icon='cpu' size='lg' /></h2>
+          </Col>
+          <Col mediumSize={3}>
+            <h2 className='form-inline'>
+              {formatSize(memoryDynamical)}
+              &nbsp;<span><Icon icon='memory' size='lg' /></span>
+            </h2>
+          </Col>
+          <Col mediumSize={3}>
+            <h2>{formatSize(memoryTotal)} <Icon icon='disk' size='lg' /></h2>
+          </Col>
+        </Row>
+      </div>
+    </Container>
+  )
+})