add message for current operation

Fixes #2222

CHANGELOG.md

@@ -1,5 +1,68 @@
 # ChangeLog
 
+## **5.9.0** (2017-05-31)
+
+### Enhancements
+
+- Allow DR to remove previous backup first [\#2157](https://github.com/vatesfr/xo-web/issues/2157)
+- Feature request - add amount of RAM to memory bars [\#2149](https://github.com/vatesfr/xo-web/issues/2149)
+- Make the acceptability of invalid certificates configurable [\#2138](https://github.com/vatesfr/xo-web/issues/2138)
+- label of VM names in tasks link [\#2135](https://github.com/vatesfr/xo-web/issues/2135)
+- Backup report timezone [\#2133](https://github.com/vatesfr/xo-web/issues/2133)
+- xo-server-recover-account [\#2129](https://github.com/vatesfr/xo-web/issues/2129)
+- Detect disks attached to control domain [\#2126](https://github.com/vatesfr/xo-web/issues/2126)
+- Add task description in Tasks view [\#2125](https://github.com/vatesfr/xo-web/issues/2125)
+- Host reboot warning after patching for 7.1 [\#2124](https://github.com/vatesfr/xo-web/issues/2124)
+- Continuous Replication - possibility run VM without a clone [\#2119](https://github.com/vatesfr/xo-web/issues/2119)
+- Unreachable host should be detected [\#2099](https://github.com/vatesfr/xo-web/issues/2099)
+- Orange icon when host is is disabled [\#2098](https://github.com/vatesfr/xo-web/issues/2098)
+- Enhanced backup report logs [\#2096](https://github.com/vatesfr/xo-web/issues/2096)
+- Only show failures when configured to report on failures [\#2095](https://github.com/vatesfr/xo-web/issues/2095)
+- "Add all" button in self service [\#2081](https://github.com/vatesfr/xo-web/issues/2081)
+- Patch and pack mechanism changed on Ely [\#2058](https://github.com/vatesfr/xo-web/issues/2058)
+- Tip or ask people to patch from pool view [\#2057](https://github.com/vatesfr/xo-web/issues/2057)
+- File restore - Remind compatible backup [\#1930](https://github.com/vatesfr/xo-web/issues/1930)
+- Reporting for halted vm time [\#1613](https://github.com/vatesfr/xo-web/issues/1613)
+- Add standalone XS server to a pool and patch it to the pool level [\#878](https://github.com/vatesfr/xo-web/issues/878)
+- Add Cores-per-sockets [\#130](https://github.com/vatesfr/xo-web/issues/130)
+
+### Bug fixes
+
+- VM creation is broken for non-admins [\#2168](https://github.com/vatesfr/xo-web/issues/2168)
+- Can't create cloud config drive [\#2162](https://github.com/vatesfr/xo-web/issues/2162)
+- Select is "moving" [\#2142](https://github.com/vatesfr/xo-web/issues/2142)
+- Select issue for affinity host [\#2141](https://github.com/vatesfr/xo-web/issues/2141)
+- Dashboard Storage Usage incorrect [\#2123](https://github.com/vatesfr/xo-web/issues/2123)
+- Detect unmerged *base copy* and prevent too long chains [\#2047](https://github.com/vatesfr/xo-web/issues/2047)
+
+
+## **5.8.0** (2017-04-28)
+
+### Enhancements
+
+- Limit About view info for non-admins [\#2109](https://github.com/vatesfr/xo-web/issues/2109)
+- Enabling/disabling boot device on HVM VM [\#2105](https://github.com/vatesfr/xo-web/issues/2105)
+- Filter: Hide snapshots in SR disk view [\#2102](https://github.com/vatesfr/xo-web/issues/2102)
+- Smarter XOSAN install [\#2084](https://github.com/vatesfr/xo-web/issues/2084)
+- PL translation [\#2079](https://github.com/vatesfr/xo-web/issues/2079)
+- Remove the "share this VM" option if not in self service [\#2061](https://github.com/vatesfr/xo-web/issues/2061)
+- "connected" status graphics are not the same on the host storage and networking tabs [\#2060](https://github.com/vatesfr/xo-web/issues/2060)
+- Ability to view and edit `vga` and `videoram` fields in VM view [\#158](https://github.com/vatesfr/xo-web/issues/158)
+- Performances [\#1](https://github.com/vatesfr/xen-api/issues/1)
+
+### Bug fixes
+
+- Dashboard display issues [\#2108](https://github.com/vatesfr/xo-web/issues/2108)
+- Dashboard CPUs Usage [\#2105](https://github.com/vatesfr/xo-web/issues/2105)
+- [Dashboard/Overview] Warning [\#2090](https://github.com/vatesfr/xo-web/issues/2090)
+- VM creation displays all networks [\#2086](https://github.com/vatesfr/xo-web/issues/2086)
+- Cannot change HA mode for a VM [\#2080](https://github.com/vatesfr/xo-web/issues/2080)
+- [Smart backup] Tags selection does not work [\#2077](https://github.com/vatesfr/xo-web/issues/2077)
+- [Backup jobs] Timeout should be in seconds, not milliseconds [\#2076](https://github.com/vatesfr/xo-web/issues/2076)
+- Missing VM templates [\#2075](https://github.com/vatesfr/xo-web/issues/2075)
+- [transport-email] From header not set [\#2074](https://github.com/vatesfr/xo-web/issues/2074)
+- Missing objects should be displayed in backup edition [\#2052](https://github.com/vatesfr/xo-web/issues/2052)
+
 ## **5.7.0** (2017-03-31)
 
 ### Enhancements
@@ -258,7 +321,7 @@ File level restore.
 - Tooltip on OS icon in VM view [\#1416](https://github.com/vatesfr/xo-web/issues/1416)
 - Display pool master [\#1407](https://github.com/vatesfr/xo-web/issues/1407)
 - Missing tooltips in VM creation view [\#1402](https://github.com/vatesfr/xo-web/issues/1402)
-- Handle VDB disconnect and connect [\#1397](https://github.com/vatesfr/xo-web/issues/1397)
+- Handle VBD disconnect and connect [\#1397](https://github.com/vatesfr/xo-web/issues/1397)
 - Eject host from a pool [\#1395](https://github.com/vatesfr/xo-web/issues/1395)
 - Improve pool general view [\#1393](https://github.com/vatesfr/xo-web/issues/1393)
 - Improve patching system [\#1392](https://github.com/vatesfr/xo-web/issues/1392)

gulpfile.js

@@ -258,7 +258,7 @@ gulp.task(function buildScripts () {
       ]
     }),
     require('gulp-sourcemaps').init({ loadMaps: true }),
-    PRODUCTION && require('gulp-uglify')(),
+    PRODUCTION && require('gulp-uglify/composer')(require('uglify-es'))(),
     dest()
   )
 })

package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "xo-web",
-  "version": "5.7.8",
+  "version": "5.9.1",
   "license": "AGPL-3.0",
   "description": "Web interface client for Xen-Orchestra",
   "keywords": [
@@ -61,13 +61,13 @@
     "dependency-check": "^2.5.1",
     "enzyme": "^2.6.0",
     "enzyme-to-json": "^1.4.4",
-    "event-to-promise": "^0.7.0",
+    "event-to-promise": "^0.8.0",
     "font-awesome": "^4.7.0",
     "font-mfizz": "github:fizzed/font-mfizz",
     "get-stream": "^2.3.0",
     "globby": "^6.0.0",
     "gulp": "github:gulpjs/gulp#4.0",
-    "gulp-autoprefixer": "^3.1.0",
+    "gulp-autoprefixer": "^4.0.0",
     "gulp-csso": "^3.0.0",
     "gulp-embedlr": "^0.5.2",
     "gulp-plumber": "^1.1.0",
@@ -75,13 +75,13 @@
     "gulp-refresh": "^1.1.0",
     "gulp-sass": "^3.0.0",
     "gulp-sourcemaps": "^2.2.3",
-    "gulp-uglify": "^2.0.0",
+    "gulp-uglify": "^3.0.0",
     "gulp-watch": "^4.3.5",
-    "human-format": "^0.7.0",
+    "human-format": "^0.8.0",
     "husky": "^0.13.1",
     "index-modules": "^0.3.0",
     "is-ip": "^1.0.0",
-    "jest": "^19.0.2",
+    "jest": "^20.0.4",
     "jsonrpc-websocket-client": "^0.1.1",
     "kindof": "^2.0.0",
     "later": "^1.2.0",
@@ -89,20 +89,20 @@
     "loose-envify": "^1.1.0",
     "make-error": "^1.2.1",
     "marked": "^0.3.5",
-    "modular-css": "^4.1.1",
+    "modular-css": "^5.1.6",
     "moment": "^2.13.0",
     "moment-timezone": "^0.5.4",
     "notifyjs": "^3.0.0",
     "novnc-node": "^0.5.3",
-    "promise-toolbox": "^0.8.0",
+    "promise-toolbox": "^0.9.4",
     "random-password": "^0.1.2",
     "react": "^15.4.1",
     "react-addons-shallow-compare": "^15.1.0",
     "react-addons-test-utils": "^15.4.1",
     "react-bootstrap-4": "^0.29.1",
     "react-chartist": "^0.12.0",
-    "react-copy-to-clipboard": "^4.0.2",
-    "react-debounce-input": "^2.4.0",
+    "react-copy-to-clipboard": "^5.0.0",
+    "react-debounce-input": "^3.0.0",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
     "react-document-title": "^2.0.2",
@@ -114,7 +114,7 @@
     "react-overlays": "^0.6.0",
     "react-redux": "^5.0.0",
     "react-router": "^3.0.0",
-    "react-select": "^1.0.0-rc.3",
+    "react-select": "^1.0.0-rc.4",
     "react-shortcuts": "^1.3.1",
     "react-sparklines": "^1.5.0",
     "react-virtualized": "^8.0.8",
@@ -124,18 +124,19 @@
     "redux-devtools-dock-monitor": "^1.1.0",
     "redux-devtools-log-monitor": "^1.0.5",
     "redux-thunk": "^2.0.1",
-    "reselect": "^2.2.1",
+    "reselect": "^2.5.4",
     "semver": "^5.3.0",
-    "standard": "^8.4.0",
-    "styled-components": "^1.4.4",
+    "standard": "^10.0.0",
+    "styled-components": "^2.1.0",
     "superagent": "^3.5.0",
     "tar-stream": "^1.5.2",
-    "uncontrollable-input": "^0.0.0",
+    "uglify-es": "^3.0.18",
+    "uncontrollable-input": "^0.0.1",
     "vinyl": "^2.0.0",
     "watchify": "^3.7.0",
     "xml2js": "^0.4.17",
     "xo-acl-resolver": "^0.2.3",
-    "xo-common": "0.1.0",
+    "xo-common": "^0.1.1",
     "xo-lib": "^0.8.0",
     "xo-remote-parser": "^0.3"
   },

src/common/action-bar.js

@@ -1,13 +1,9 @@
-import _ from 'intl'
-import ActionButton from 'action-button'
-import map from 'lodash/map'
 import React from 'react'
-import {
-  ButtonGroup
-} from 'react-bootstrap-4/lib'
-import {
-  noop
-} from 'utils'
+import { map, noop } from 'lodash'
+
+import _ from './intl'
+import ActionButton from './action-button'
+import ButtonGroup from './button-group'
 
 const ActionBar = ({ actions, param }) => (
   <ButtonGroup>
@@ -16,13 +12,20 @@ const ActionBar = ({ actions, param }) => (
         return
       }
 
-      const { handler, handlerParam = param, label, icon, redirectOnSuccess } = button
+      const {
+        handler,
+        handlerParam = param,
+        icon,
+        label,
+        pending,
+        redirectOnSuccess
+      } = button
       return <ActionButton
         key={index}
-        btnStyle='secondary'
         handler={handler || noop}
         handlerParam={handlerParam}
         icon={icon}
+        pending={pending}
         redirectOnSuccess={redirectOnSuccess}
         size='large'
         tooltip={_(label)}

src/common/action-button.js

@@ -1,38 +1,59 @@
-import Icon from 'icon'
 import isFunction from 'lodash/isFunction'
 import React from 'react'
-import { Button } from 'react-bootstrap-4/lib'
 
+import Button from './button'
 import Component from './base-component'
+import Icon from './icon'
 import logError from './log-error'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import Tooltip from './tooltip'
 import { error as _error } from './notification'
 
 @propTypes({
-  btnStyle: propTypes.string,
+  // React element to use as button content
+  children: propTypes.node,
+
+  // whether this button is disabled (default to false)
   disabled: propTypes.bool,
+
+  // form identifier
+  //
+  // if provided, this button and its action are associated to this
+  // form for the submit event
   form: propTypes.string,
+
+  // function to call when the action is triggered (via a clik on the
+  // button or submit on the form)
   handler: propTypes.func.isRequired,
+
+  // optional value which will be passed as first param to the handler
   handlerParam: propTypes.any,
+
+  // XO icon to use for this button
   icon: propTypes.string.isRequired,
+
+  // whether the action of this action is already underway
+  pending: propTypes.bool,
+
+  // path to redirect to when the triggered action finish successfully
+  //
+  // if a function, it will be called with the result of the action to
+  // compute the path
   redirectOnSuccess: propTypes.oneOfType([
     propTypes.func,
     propTypes.string
   ]),
-  size: propTypes.oneOf([
-    'large',
-    'small'
-  ]),
+
+  // React element to use tooltip for the component
   tooltip: propTypes.node
 })
 export default class ActionButton extends Component {
   static contextTypes = {
-    router: React.PropTypes.object
+    router: propTypes.object
   }
 
   async _execute () {
-    if (this.state.working) {
+    if (this.props.pending || this.state.working) {
       return
     }
 
@@ -45,18 +66,17 @@ export default class ActionButton extends Component {
 
     try {
       this.setState({
-        error: null,
+        error: undefined,
         working: true
       })
 
       const result = await handler(handlerParam)
 
-      let { redirectOnSuccess } = this.props
+      const { redirectOnSuccess } = this.props
       if (redirectOnSuccess) {
-        if (isFunction(redirectOnSuccess)) {
-          redirectOnSuccess = redirectOnSuccess(result)
-        }
-        return this.context.router.push(redirectOnSuccess)
+        return this.context.router.push(
+          isFunction(redirectOnSuccess) ? redirectOnSuccess(result) : redirectOnSuccess
+        )
       }
 
       this.setState({
@@ -101,28 +121,30 @@ export default class ActionButton extends Component {
   render () {
     const {
       props: {
-        btnStyle,
         children,
-        className,
-        disabled,
-        form,
         icon,
-        size: bsSize,
-        style,
-        tooltip
+        pending,
+        tooltip,
+        ...props
       },
       state: { error, working }
     } = this
 
-    const button = <Button
-      bsStyle={error ? 'warning' : btnStyle}
-      form={form}
-      onClick={!form && this._execute}
-      disabled={working || disabled}
-      type={form ? 'submit' : 'button'}
-      {...{ bsSize, className, style }}
-    >
-      <Icon icon={working ? 'loading' : icon} fixedWidth />
+    if (error !== undefined) {
+      props.btnStyle = 'warning'
+    }
+    if (pending || working) {
+      props.disabled = true
+    }
+    delete props.handler
+    delete props.handlerParam
+    if (props.form === undefined) {
+      props.onClick = this._execute
+    }
+    delete props.redirectOnSuccess
+
+    const button = <Button {...props}>
+      <Icon icon={pending || working ? 'loading' : icon} fixedWidth />
       {children && ' '}
       {children}
     </Button>

src/common/action-toggle.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import ActionButton from './action-button'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const ActionToggle = ({ className, value, ...props }) =>
   <ActionButton

src/common/base-component.js

@@ -54,20 +54,20 @@ export default class BaseComponent extends PureComponent {
 
   // See https://preactjs.com/guide/linked-state
   linkState (name, targetPath) {
-    const key = targetPath
+    const key = targetPath !== undefined
       ? `${name}##${targetPath}`
       : name
 
     let linkedState = this._linkedState
     let cb
-    if (!linkedState) {
+    if (linkedState === null) {
       linkedState = this._linkedState = {}
-    } else if ((cb = linkedState[key])) {
+    } else if ((cb = linkedState[key]) !== undefined) {
       return cb
     }
 
     let getValue
-    if (targetPath) {
+    if (targetPath !== undefined) {
       const path = targetPath.split('.')
       getValue = event => get(getEventValue(event), path, 0)
     } else {
@@ -91,9 +91,9 @@ export default class BaseComponent extends PureComponent {
   toggleState (name) {
     let linkedState = this._linkedState
     let cb
-    if (!linkedState) {
+    if (linkedState === null) {
       linkedState = this._linkedState = {}
-    } else if ((cb = linkedState[name])) {
+    } else if ((cb = linkedState[name]) !== undefined) {
       return cb
     }
 

src/common/button-group.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const ButtonGroup = ({ children }) =>
+  <div className='btn-group' role='group'>
+    {children}
+  </div>
+
+export { ButtonGroup as default }

src/common/button.js

@@ -0,0 +1,56 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import propTypes from './prop-types-decorator'
+
+const Button = ({
+  active,
+  block,
+  btnStyle = 'secondary',
+  children,
+  outline,
+  size,
+  ...props
+}) => {
+  props.className = classNames(
+    props.className,
+    'btn',
+    `btn${outline ? '-outline' : ''}-${btnStyle}`,
+    active !== undefined && 'active',
+    block && 'btn-block',
+    size === 'large' ? 'btn-lg' : size === 'small' ? 'btn-sm' : null
+  )
+  if (props.type === undefined && props.form === undefined) {
+    props.type = 'button'
+  }
+
+  return <button {...props}>{children}</button>
+}
+
+propTypes({
+  active: propTypes.bool,
+  block: propTypes.bool,
+
+  // Bootstrap button style
+  //
+  // See https://v4-alpha.getbootstrap.com/components/buttons/#examples
+  //
+  // The default value (secondary) is not listed here because it does
+  // not make sense to explicit it.
+  btnStyle: propTypes.oneOf([
+    'danger',
+    'info',
+    'link',
+    'primary',
+    'success',
+    'warning'
+  ]),
+
+  outline: propTypes.bool,
+  size: propTypes.oneOf([
+    'large',
+    'small'
+  ])
+})(Button)
+
+export { Button as default }

src/common/card.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const CARD_STYLE = {
   minHeight: '100%'

src/common/collapse.js

@@ -1,8 +1,9 @@
 import React from 'react'
 
+import Button from './button'
 import Component from './base-component'
 import Icon from './icon'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 @propTypes({
   children: propTypes.any.isRequired,
@@ -27,9 +28,9 @@ export default class Collapse extends Component {
 
     return (
       <div className={props.className}>
-        <button className='btn btn-lg btn-primary btn-block' onClick={this._onClick}>
+        <Button block btnStyle='primary' size='large' onClick={this._onClick}>
           {props.buttonText} <Icon icon={`chevron-${isOpened ? 'up' : 'down'}`} />
-        </button>
+        </Button>
         {isOpened && props.children}
       </div>
     )

src/common/combobox.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import uncontrollableInput from 'uncontrollable-input'
+import { isEmpty, map } from 'lodash'
+import {
+  DropdownButton,
+  MenuItem
+} from 'react-bootstrap-4/lib'
+
+import Component from './base-component'
+import propTypes from './prop-types-decorator'
+
+@uncontrollableInput({
+  defaultValue: ''
+})
+@propTypes({
+  disabled: propTypes.bool,
+  options: propTypes.oneOfType([
+    propTypes.arrayOf(propTypes.string),
+    propTypes.objectOf(propTypes.string)
+  ]),
+  onChange: propTypes.func.isRequired,
+  value: propTypes.string.isRequired
+})
+export default class Combobox extends Component {
+  _handleChange = event => {
+    this.props.onChange(event.target.value)
+  }
+
+  _setText (value) {
+    this.props.onChange(value)
+  }
+
+  render () {
+    const { options, ...props } = this.props
+
+    props.className = 'form-control'
+    props.onChange = this._handleChange
+    const Input = <input {...props} />
+
+    if (isEmpty(options)) {
+      return Input
+    }
+
+    return (
+      <div className='input-group'>
+        <div className='input-group-btn'>
+          <DropdownButton
+            bsStyle='secondary'
+            disabled={props.disabled}
+            id='selectInput'
+            title=''
+          >
+            {map(options, option =>
+              <MenuItem key={option} onClick={() => this._setText(option)}>
+                {option}
+              </MenuItem>
+            )}
+          </DropdownButton>
+        </div>
+        {Input}
+      </div>
+    )
+  }
+}

src/common/combobox/index.css

@@ -1,3 +0,0 @@
-.button {
-    border-radius: 0px;
-};

src/common/combobox/index.js

@@ -1,105 +0,0 @@
-import map from 'lodash/map'
-import React from 'react'
-import size from 'lodash/size'
-
-import Component from '../base-component'
-import propTypes from '../prop-types'
-import { ensureArray } from '../utils'
-import {
-  DropdownButton,
-  MenuItem
-} from 'react-bootstrap-4/lib'
-
-import styles from './index.css'
-
-@propTypes({
-  defaultValue: propTypes.any,
-  disabled: propTypes.bool,
-  max: propTypes.number,
-  min: propTypes.number,
-  options: propTypes.oneOfType([
-    propTypes.arrayOf(propTypes.string),
-    propTypes.number,
-    propTypes.objectOf(propTypes.string),
-    propTypes.string
-  ]),
-  onChange: propTypes.func,
-  placeholder: propTypes.string,
-  required: propTypes.bool,
-  step: propTypes.any,
-  type: propTypes.string,
-  value: propTypes.any
-})
-export default class Combobox extends Component {
-  static defaultProps = {
-    type: 'text'
-  }
-
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
-  }
-
-  _handleChange = event => {
-    const { onChange } = this.props
-
-    if (onChange) {
-      onChange(event.target.value)
-    }
-  }
-
-  _setText (value) {
-    this.refs.input.value = value
-  }
-
-  render () {
-    const { props } = this
-    const options = ensureArray(props.options)
-
-    const Input = (
-      <input
-        className='form-control'
-        defaultValue={props.defaultValue}
-        disabled={props.disabled}
-        max={props.max}
-        min={props.min}
-        options={options}
-        onChange={this._handleChange}
-        placeholder={props.placeholder}
-        ref='input'
-        required={props.required}
-        step={props.step}
-        type={props.type}
-        value={props.value}
-      />
-    )
-
-    if (!size(options)) {
-      return Input
-    }
-
-    return (
-      <div className='input-group'>
-        <div className='input-group-btn'>
-          <DropdownButton
-            bsStyle='secondary'
-            className={styles.button}
-            disabled={props.disabled}
-            id='selectInput'
-            title=''
-          >
-            {map(options, option => (
-              <MenuItem key={option} onClick={() => this._setText(option)}>
-                {option}
-              </MenuItem>
-            ))}
-          </DropdownButton>
-        </div>
-        {Input}
-      </div>
-    )
-  }
-}

src/common/complex-matcher/index.js

@@ -294,10 +294,10 @@ export const getPropertyClausesStrings = function () {
 
 export const removePropertyClause = function (name) {
   let type
-  if (
-    !this ||
-    (type = this.type) === 'property' && this.name === name
-  ) {
+  if (!this || (
+    (type = this.type) === 'property' &&
+    this.name === name
+  )) {
     return
   }
 
@@ -335,7 +335,7 @@ export const setPropertyClause = function (name, child) {
   return _addAndClause(
     this,
     property,
-    node => node.type === 'property' && node.name === name,
+    node => node.type === 'property' && node.name === name
   )
 }
 

src/common/copiable/index.js

@@ -1,11 +1,12 @@
-import _ from 'intl'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import classNames from 'classnames'
-import Tooltip from 'tooltip'
 import React, { createElement } from 'react'
 
+import _ from '../intl'
+import Button from '../button'
 import Icon from '../icon'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
+import Tooltip from '../tooltip'
 
 import styles from './index.css'
 
@@ -22,9 +23,9 @@ const Copiable = propTypes({
   ' ',
   <Tooltip content={_('copyToClipboard')}>
     <CopyToClipboard text={props.data || props.children}>
-      <button className={classNames('btn btn-sm btn-secondary', styles.button)}>
+      <Button className={styles.button} size='small'>
         <Icon icon='clipboard' />
-      </button>
+      </Button>
     </CopyToClipboard>
   </Tooltip>
 ))

src/common/drag-n-drop-order.js

@@ -0,0 +1,128 @@
+import _ from 'intl'
+import ActionButton from 'action-button'
+import Component from 'base-component'
+import HTML5Backend from 'react-dnd-html5-backend'
+import Icon from 'icon'
+import map from 'lodash/map'
+import propTypes from 'prop-types-decorator'
+import React from 'react'
+import { DragDropContext, DragSource, DropTarget } from 'react-dnd'
+import { Toggle } from 'form'
+
+const orderItemSource = {
+  beginDrag: props => ({
+    id: props.id,
+    index: props.index
+  })
+}
+
+const orderItemTarget = {
+  hover: (props, monitor, component) => {
+    const dragIndex = monitor.getItem().index
+    const hoverIndex = props.index
+    if (dragIndex === hoverIndex) {
+      return
+    }
+    props.move(dragIndex, hoverIndex)
+    monitor.getItem().index = hoverIndex
+  }
+}
+
+@DropTarget('orderItem', orderItemTarget, connect => ({
+  connectDropTarget: connect.dropTarget()
+}))
+@DragSource('orderItem', orderItemSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))
+@propTypes({
+  connectDragSource: propTypes.func.isRequired,
+  connectDropTarget: propTypes.func.isRequired,
+  index: propTypes.number.isRequired,
+  isDragging: propTypes.bool.isRequired,
+  id: propTypes.any.isRequired,
+  item: propTypes.object.isRequired,
+  move: propTypes.func.isRequired
+})
+class OrderItem extends Component {
+  _toggle = checked => {
+    const { item } = this.props
+    item.active = checked
+    this.forceUpdate()
+  }
+
+  render () {
+    const { item, connectDragSource, connectDropTarget, toggle } = this.props
+    return connectDragSource(connectDropTarget(
+      <li className='list-group-item'>
+        <Icon icon='grab' />
+        {' '}
+        <Icon icon='grab' />
+        {' '}
+        {item.text}
+        {toggle && <span className='pull-right'>
+          <Toggle value={item.active} onChange={this._toggle} />
+        </span>}
+      </li>
+    ))
+  }
+}
+
+@propTypes({
+  onClose: propTypes.func
+})
+@DragDropContext(HTML5Backend)
+export default class DragNDropOrder extends Component {
+  constructor (props) {
+    super(props)
+    const { parseOrderParam, parseOrder } = props
+    this.state = parseOrder(parseOrderParam)
+  }
+
+  _moveOrderItem = (dragIndex, hoverIndex) => {
+    const order = this.state.order.slice()
+    const dragItem = order.splice(dragIndex, 1)
+    if (dragItem.length) {
+      order.splice(hoverIndex, 0, dragItem.pop())
+      this.setState({order})
+    }
+  }
+
+  _reset = () => {
+    const { parseOrderParam, parseOrder } = this.props
+    this.state = this.setState(parseOrder(parseOrderParam))
+  }
+
+  _save = () => {
+    const { order, toggleActive } = this.state
+    this.props.setOrder(this.props.parseOrderParam, order, toggleActive)
+  }
+
+  _toggleOnChange = event => this.setState({toggleActive: event})
+
+  render () {
+    const { order, toggleActive } = this.state
+    const { toggleItems } = this.props
+    return <form>
+      {!toggleItems && <Toggle value={toggleActive} onChange={this._toggleOnChange} />}
+      <ul>
+        {map(order, (item, index) => <OrderItem
+          toggle={toggleItems}
+          key={index}
+          index={index}
+          id={item.id}
+          // FIXME missing translation
+          item={item}
+          move={this._moveOrderItem}
+        />)}
+      </ul>
+      <fieldset className='form-inline'>
+        <span className='pull-right'>
+          <ActionButton icon='save' btnStyle='primary' handler={this._save}>{_('saveBootOption')}</ActionButton>
+          {' '}
+          <ActionButton icon='reset' handler={this._reset}>{_('resetBootOption')}</ActionButton>
+        </span>
+      </fieldset>
+    </form>
+  }
+}

src/common/dropzone/index.js

@@ -1,5 +1,5 @@
 import Component from 'base-component'
-import propTypes from 'prop-types'
+import propTypes from 'prop-types-decorator'
 import React from 'react'
 import ReactDropzone from 'react-dropzone'
 

src/common/editable/index.js

@@ -11,7 +11,7 @@ import Component from '../base-component'
 import getEventValue from '../get-event-value'
 import Icon from '../icon'
 import logError from '../log-error'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import Tooltip from '../tooltip'
 import { formatSize } from '../utils'
 import { SizeInput } from '../form'

src/common/form-grid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import * as Grid from './grid'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 export const LabelCol = propTypes({
   children: propTypes.any.isRequired

src/common/form/index.js

@@ -12,9 +12,10 @@ import {
   MenuItem
 } from 'react-bootstrap-4/lib'
 
+import Button from '../button'
 import Component from '../base-component'
 import getEventValue from '../get-event-value'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import {
   firstDefined,
   formatSizeRaw,
@@ -70,9 +71,9 @@ export class Password extends Component {
 
     return <div className='input-group'>
       {enableGenerator && <span className='input-group-btn'>
-        <button type='button' className='btn btn-secondary' onClick={this._generate}>
+        <Button onClick={this._generate}>
           <Icon icon='password' />
-        </button>
+        </Button>
       </span>}
       <input
         {...props}
@@ -81,9 +82,9 @@ export class Password extends Component {
         type={visible ? 'text' : 'password'}
       />
       <span className='input-group-btn'>
-        <button type='button' className='btn btn-secondary' onClick={this._toggleVisibility}>
+        <Button onClick={this._toggleVisibility}>
           <Icon icon={visible ? 'shown' : 'hidden'} />
-        </button>
+        </Button>
       </span>
     </div>
   }

src/common/form/select-plain-object.js

@@ -4,7 +4,7 @@ import find from 'lodash/find'
 import map from 'lodash/map'
 import React from 'react'
 
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 
 import Select from './select'
 

src/common/form/select.js

@@ -8,7 +8,7 @@ import {
   List
 } from 'react-virtualized'
 
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 
 const SELECT_MENU_STYLE = {
   overflow: 'hidden'

src/common/form/toggle.js

@@ -2,11 +2,9 @@ import React from 'react'
 import classNames from 'classnames'
 import uncontrollableInput from 'uncontrollable-input'
 
-import Component from '../../base-component'
-import Icon from '../../icon'
-import propTypes from '../../prop-types'
-
-import styles from './index.css'
+import Component from '../base-component'
+import Icon from '../icon'
+import propTypes from '../prop-types-decorator'
 
 @uncontrollableInput()
 @propTypes({
@@ -25,30 +23,24 @@ export default class Toggle extends Component {
     iconSize: 2
   }
 
-  _onChange = event => this.props.onChange(event.target.checked)
+  _toggle = () => {
+    const { props } = this
+    props.onChange(!props.value)
+  }
 
   render () {
     const { props } = this
 
     return (
-      <label
+      <Icon
         className={classNames(
           props.disabled ? 'text-muted' : props.value ? 'text-success' : null,
           props.className
         )}
-      >
-        <Icon
-          icon={props.icon || (props.value ? props.iconOn : props.iconOff)}
-          size={props.iconSize}
-        />
-        <input
-          checked={props.value || false}
-          className={styles.checkbox}
-          disabled={props.disabled}
-          onChange={this._onChange}
-          type='checkbox'
-        />
-      </label>
+        icon={props.icon || (props.value ? props.iconOn : props.iconOff)}
+        onClick={this._toggle}
+        size={props.iconSize}
+      />
     )
   }
 }

src/common/form/toggle/index.css

@@ -1,3 +0,0 @@
-.checkbox {
-    display: none;
-}

src/common/grid.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 export const Col = propTypes({
   className: propTypes.string,

src/common/home-filters.js

@@ -31,3 +31,8 @@ export const SR = {
   ...common,
   homeFilterTags: 'tags:'
 }
+
+export const vmGroup = {
+  ...common,
+  homeFilterTags: 'tags:'
+}

src/common/home-tags.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Component from './base-component'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import Tags from './tags'
 import { createString, createProperty, toString } from './complex-matcher'
 

src/common/hosts-patches-table.js

@@ -9,7 +9,7 @@ import ActionButton from './action-button'
 import Component from './base-component'
 import forEach from 'lodash/forEach'
 import Link from './link'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import SortedTable from './sorted-table'
 import TabButton from './tab-button'
 import { connectStore } from './utils'
@@ -19,9 +19,9 @@ import {
   createSelector
 } from './selectors'
 import {
-  getHostMissingPatches,
   installAllHostPatches,
-  installAllPatchesOnPool
+  installAllPatchesOnPool,
+  subscribeHostMissingPatches
 } from './xo'
 
 // ===================================================================
@@ -64,6 +64,15 @@ const POOLS_MISSING_PATCHES_COLUMNS = [{
   sortCriteria: (host, { pools }) => pools[host.$pool].name_label
 }].concat(MISSING_PATCHES_COLUMNS)
 
+// Small component to homogenize Button usage in HostsPatchesTable
+const ActionButton_ = ({ children, labelId, ...props }) =>
+  <ActionButton
+    {...props}
+    tooltip={_(labelId)}
+  >
+    {children}
+  </ActionButton>
+
 // ===================================================================
 
 class HostsPatchesTable extends Component {
@@ -80,11 +89,25 @@ class HostsPatchesTable extends Component {
     )
   )
 
-  _refreshMissingPatches = () => (
-    Promise.all(
-      map(this.props.hosts, this._refreshHostMissingPatches)
+  _subscribeMissingPatches = (hosts = this.props.hosts) => {
+    const unsubs = map(hosts, host =>
+      subscribeHostMissingPatches(
+        host,
+        patches => this.setState({
+          missingPatches: {
+            ...this.state.missingPatches,
+            [host.id]: patches.length
+          }
+        })
+      )
     )
-  )
+
+    if (this.unsubscribeMissingPatches !== undefined) {
+      this.unsubscribeMissingPatches()
+    }
+
+    this.unsubscribeMissingPatches = () => forEach(unsubs, unsub => unsub())
+  }
 
   _installAllMissingPatches = () => {
     const pools = {}
@@ -95,80 +118,43 @@ class HostsPatchesTable extends Component {
     return Promise.all(map(
       keys(pools),
       installAllPatchesOnPool
-    )).then(this._refreshMissingPatches)
-  }
-
-  _refreshHostMissingPatches = host => (
-    getHostMissingPatches(host).then(patches => {
-      this.setState({
-        missingPatches: {
-          ...this.state.missingPatches,
-          [host.id]: patches.length
-        }
-      })
-    })
-  )
-
-  _installAllHostPatches = host => (
-    installAllHostPatches(host).then(() =>
-      this._refreshHostMissingPatches(host)
-    )
-  )
-
-  componentWillMount () {
-    this._refreshMissingPatches()
+    ))
   }
 
   componentDidMount () {
     // Force one Portal refresh.
     // Because Portal cannot see the container reference at first rendering.
     this.forceUpdate()
+    this._subscribeMissingPatches()
   }
 
   componentWillReceiveProps (nextProps) {
-    forEach(nextProps.hosts, host => {
-      const { id } = host
+    if (nextProps.hosts !== this.props.hosts) {
+      this._subscribeMissingPatches(nextProps.hosts)
+    }
+  }
 
-      if (this.state.missingPatches[id] !== undefined) {
-        return
-      }
-
-      this.setState({
-        missingPatches: {
-          ...this.state.missingPatches,
-          [id]: 0
-        }
-      })
-
-      this._refreshHostMissingPatches(host)
-    })
+  componentWillUnmount () {
+    this.unsubscribeMissingPatches()
   }
 
   render () {
+    const {
+      buttonsGroupContainer,
+      container,
+      displayPools,
+      pools,
+      useTabButton
+    } = this.props
+
     const hosts = this._getHosts()
     const noPatches = isEmpty(hosts)
-    const { props } = this
 
-    const Container = props.container || 'div'
-    const Button = props.useTabButton ? TabButton : ActionButton
+    const Container = container || 'div'
 
-    const Buttons = (
-      <Container>
-        <Button
-          btnStyle='secondary'
-          handler={this._refreshMissingPatches}
-          icon='refresh'
-          labelId='refreshPatches'
-        />
-        <Button
-          btnStyle='primary'
-          disabled={noPatches}
-          handler={this._installAllMissingPatches}
-          icon='host-patch-update'
-          labelId='installPoolPatches'
-        />
-      </Container>
-    )
+    const Button = useTabButton
+      ? TabButton
+      : ActionButton_
 
     return (
       <div>
@@ -176,17 +162,25 @@ class HostsPatchesTable extends Component {
           ? (
             <SortedTable
               collection={hosts}
-              columns={props.displayPools ? POOLS_MISSING_PATCHES_COLUMNS : MISSING_PATCHES_COLUMNS}
+              columns={displayPools ? POOLS_MISSING_PATCHES_COLUMNS : MISSING_PATCHES_COLUMNS}
               userData={{
-                installAllHostPatches: this._installAllHostPatches,
+                installAllHostPatches,
                 missingPatches: this.state.missingPatches,
-                pools: props.pools
+                pools
               }}
             />
           ) : <p>{_('patchNothing')}</p>
         }
-        <Portal container={() => props.buttonsGroupContainer()}>
-          {Buttons}
+        <Portal container={() => buttonsGroupContainer()}>
+          <Container>
+            <Button
+              btnStyle='primary'
+              disabled={noPatches}
+              handler={this._installAllMissingPatches}
+              icon='host-patch-update'
+              labelId='installPoolPatches'
+            />
+          </Container>
         </Portal>
       </div>
     )

src/common/icon.js

@@ -1,21 +1,25 @@
 import classNames from 'classnames'
 import isInteger from 'lodash/isInteger'
-import React, { PropTypes } from 'react'
+import React from 'react'
 
-const Icon = ({ className, icon, size = 1, fixedWidth }) => (
-  <i className={classNames(
-      className,
-      icon ? `xo-icon-${icon}` : 'fa', // Without icon prop, is a placeholder.
-      isInteger(size) ? `fa-${size}x` : `fa-${size}`,
-      fixedWidth && 'fa-fw'
-  )} />
-)
-Icon.propTypes = {
-  fixedWidth: PropTypes.bool,
-  icon: PropTypes.string,
-  size: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ])
+import propTypes from './prop-types-decorator'
+
+const Icon = ({ icon, size = 1, fixedWidth, ...props }) => {
+  props.className = classNames(
+    props.className,
+    icon !== undefined ? `xo-icon-${icon}` : 'fa', // Without icon prop, is a placeholder.
+    isInteger(size) ? `fa-${size}x` : `fa-${size}`,
+    fixedWidth && 'fa-fw'
+  )
+
+  return <i {...props} />
 }
+propTypes(Icon)({
+  fixedWidth: propTypes.bool,
+  icon: propTypes.string,
+  size: propTypes.oneOfType([
+    propTypes.string,
+    propTypes.number
+  ])
+})
 export default Icon

src/common/intl/locales/es.js

@@ -627,7 +627,7 @@ export default {
   editBackupReportTitle: undefined,
 
   // Original text: 'Enable immediately after creation'
-  editBackupReportEnable: undefined,
+  editBackupScheduleEnabled: undefined,
 
   // Original text: 'Depth'
   editBackupDepthTitle: undefined,
@@ -1605,10 +1605,10 @@ export default {
   vdiRemove: undefined,
 
   // Original text: "Boot flag"
-  vdbBootableStatus: 'Etiqueta de Inicio',
+  vbdBootableStatus: 'Etiqueta de Inicio',
 
   // Original text: "Status"
-  vdbStatus: 'Estado',
+  vbdStatus: 'Estado',
 
   // Original text: "Connected"
   vbdStatusConnected: 'Conectado',
@@ -1626,19 +1626,19 @@ export default {
   vbdDisconnect: undefined,
 
   // Original text: 'Bootable'
-  vdbBootable: undefined,
+  vbdBootable: undefined,
 
   // Original text: 'Readonly'
-  vdbReadonly: undefined,
+  vbdReadonly: undefined,
 
   // Original text: 'Create'
-  vdbCreate: undefined,
+  vbdCreate: undefined,
 
   // Original text: 'Disk name'
-  vdbNamePlaceHolder: undefined,
+  vbdNamePlaceHolder: undefined,
 
   // Original text: 'Size'
-  vdbSizePlaceHolder: undefined,
+  vbdSizePlaceHolder: undefined,
 
   // Original text: 'Save'
   saveBootOption: undefined,

src/common/intl/locales/fr.js

@@ -630,7 +630,7 @@ export default {
   editBackupReportTitle: 'Rapport',
 
   // Original text: "Enable immediately after creation"
-  editBackupReportEnable: 'Activer aussitôt après la création',
+  editBackupScheduleEnabled: 'Executer en fonction de la planification',
 
   // Original text: "Depth"
   editBackupDepthTitle: 'Profondeur',
@@ -1608,10 +1608,10 @@ export default {
   vdiRemove: 'Supprimer le VDI',
 
   // Original text: "Boot flag"
-  vdbBootableStatus: 'Boot flag',
+  vbdBootableStatus: 'Boot flag',
 
   // Original text: "Status"
-  vdbStatus: 'État',
+  vbdStatus: 'État',
 
   // Original text: "Connected"
   vbdStatusConnected: 'Connecté',
@@ -1629,19 +1629,19 @@ export default {
   vbdDisconnect: 'Déconnecter un VBD',
 
   // Original text: "Bootable"
-  vdbBootable: 'Bootable',
+  vbdBootable: 'Bootable',
 
   // Original text: "Readonly"
-  vdbReadonly: 'Lecture seule',
+  vbdReadonly: 'Lecture seule',
 
   // Original text: "Create"
-  vdbCreate: 'Créer',
+  vbdCreate: 'Créer',
 
   // Original text: "Disk name"
-  vdbNamePlaceHolder: 'Nom du disque',
+  vbdNamePlaceHolder: 'Nom du disque',
 
   // Original text: "Size"
-  vdbSizePlaceHolder: 'Taille',
+  vbdSizePlaceHolder: 'Taille',
 
   // Original text: "Save"
   saveBootOption: 'Enregistrer',

src/common/intl/locales/he.js

@@ -627,7 +627,7 @@ export default {
   editBackupReportTitle: undefined,
 
   // Original text: 'Enable immediately after creation'
-  editBackupReportEnable: undefined,
+  editBackupScheduleEnabled: undefined,
 
   // Original text: 'Depth'
   editBackupDepthTitle: undefined,
@@ -1605,10 +1605,10 @@ export default {
   vdiRemove: undefined,
 
   // Original text: 'Boot flag'
-  vdbBootableStatus: undefined,
+  vbdBootableStatus: undefined,
 
   // Original text: 'Status'
-  vdbStatus: undefined,
+  vbdStatus: undefined,
 
   // Original text: 'Connected'
   vbdStatusConnected: undefined,
@@ -1626,19 +1626,19 @@ export default {
   vbdDisconnect: undefined,
 
   // Original text: 'Bootable'
-  vdbBootable: undefined,
+  vbdBootable: undefined,
 
   // Original text: 'Readonly'
-  vdbReadonly: undefined,
+  vbdReadonly: undefined,
 
   // Original text: 'Create'
-  vdbCreate: undefined,
+  vbdCreate: undefined,
 
   // Original text: 'Disk name'
-  vdbNamePlaceHolder: undefined,
+  vbdNamePlaceHolder: undefined,
 
   // Original text: 'Size'
-  vdbSizePlaceHolder: undefined,
+  vbdSizePlaceHolder: undefined,
 
   // Original text: 'Save'
   saveBootOption: undefined,

src/common/intl/locales/hu.js

@@ -726,7 +726,7 @@ export default {
   editBackupReportTitle: 'Riport',
 
   // Original text: "Enable immediately after creation"
-  editBackupReportEnable: 'Azonnal a létrehozás után',
+  editBackupScheduleEnabled: 'Azonnal a létrehozás után',
 
   // Original text: "Depth"
   editBackupDepthTitle: 'Mélység',
@@ -1806,10 +1806,10 @@ export default {
   vdiRemove: 'VDI Eltávolítás',
 
   // Original text: "Boot flag"
-  vdbBootableStatus: 'Boot flag',
+  vbdBootableStatus: 'Boot flag',
 
   // Original text: "Status"
-  vdbStatus: 'Állapot',
+  vbdStatus: 'Állapot',
 
   // Original text: "Connected"
   vbdStatusConnected: 'Kapcsolódva',
@@ -1827,22 +1827,22 @@ export default {
   vbdDisconnect: 'VBD Lecsatlakozás',
 
   // Original text: "Bootable"
-  vdbBootable: 'Bootolható',
+  vbdBootable: 'Bootolható',
 
   // Original text: "Readonly"
-  vdbReadonly: 'Csak olvasható',
+  vbdReadonly: 'Csak olvasható',
 
   // Original text: 'Action'
   vbdAction: undefined,
 
   // Original text: "Create"
-  vdbCreate: 'Létrehozás',
+  vbdCreate: 'Létrehozás',
 
   // Original text: "Disk name"
-  vdbNamePlaceHolder: 'Diszk név',
+  vbdNamePlaceHolder: 'Diszk név',
 
   // Original text: "Size"
-  vdbSizePlaceHolder: 'Méret',
+  vbdSizePlaceHolder: 'Méret',
 
   // Original text: "Save"
   saveBootOption: 'Mentés',

src/common/intl/locales/pl.js

@@ -281,8 +281,8 @@ export default {
   // Original text: "Tags"
   homeAllTags: 'Tagi',
 
-  // Original text: "Nowa VM"
-  homeNewVm: 'Nouvelle VM',
+  // Original text: "New VM"
+  homeNewVm: 'Nowa VM',
 
   // Original text: "Running hosts"
   homeFilterRunningHosts: 'Działające hosty',
@@ -549,10 +549,10 @@ export default {
   runJobVerbose: 'One shot running started. See overview for logs.',
 
   // Original text: "Started"
-  jobStarted: 'Rozpoczęto',
+  jobStarted: 'Uruchomiono',
 
   // Original text: "Finished"
-  jobFinished: 'Skończono',
+  jobFinished: 'Zakończono',
 
   // Original text: "Save"
   saveBackupJob: 'Zapisz',
@@ -630,7 +630,7 @@ export default {
   editBackupReportTitle: 'Raport',
 
   // Original text: "Enable immediately after creation"
-  editBackupReportEnable: 'Uruchom natychamiast po utworzeniu',
+  editBackupScheduleEnabled: 'Uruchom natychamiast po utworzeniu',
 
   // Original text: "Depth"
   editBackupDepthTitle: 'Depth',
@@ -1419,7 +1419,7 @@ export default {
   containersTabName: 'Kontener',
 
   // Original text: "Snapshots"
-  snapshotsTabName: 'Snapshots',
+  snapshotsTabName: 'Snapshoty',
 
   // Original text: "Logs"
   logsTabName: 'Logi',
@@ -1452,7 +1452,7 @@ export default {
   vmDescription: 'Nie zapisano IP',
 
   // Original text: "Started {ago}"
-  vmSettings: 'Rozpoczęto {ago}',
+  vmSettings: 'Uruchomiono {ago}',
 
   // Original text: "Current status:"
   vmCurrentStatus: 'Obecny status:',
@@ -1470,7 +1470,7 @@ export default {
   noIpRecord: 'Nie zapisano IP',
 
   // Original text: "Started {ago}"
-  started: 'Rozpoczęto {ago}',
+  started: 'Uruchomiono {ago}',
 
   // Original text: "Paravirtualization (PV)"
   paraVirtualizedMode: 'Parawirtualizacja (PV)',
@@ -1488,7 +1488,7 @@ export default {
   statsNetwork: 'Wydajność sieci',
 
   // Original text: "Stacked values"
-  useStackedValuesOnStats: 'Stacked values',
+  useStackedValuesOnStats: 'Skumulowane wartości',
 
   // Original text: "Disk throughput"
   statDisk: 'Wydajność dysku',
@@ -1608,10 +1608,10 @@ export default {
   vdiRemove: 'Usuń VDI',
 
   // Original text: "Boot flag"
-  vdbBootableStatus: 'Boot flag',
+  vbdBootableStatus: 'Boot flag',
 
   // Original text: "Status"
-  vdbStatus: 'Status',
+  vbdStatus: 'Status',
 
   // Original text: "Connected"
   vbdStatusConnected: 'Połączono',
@@ -1629,19 +1629,19 @@ export default {
   vbdDisconnect: 'Rozłącz z VBD',
 
   // Original text: "Bootable"
-  vdbBootable: 'Bootable',
+  vbdBootable: 'Bootable',
 
   // Original text: "Readonly"
-  vdbReadonly: 'Tylko do odcztu',
+  vbdReadonly: 'Tylko do odcztu',
 
   // Original text: "Create"
-  vdbCreate: 'Utwórz',
+  vbdCreate: 'Utwórz',
 
   // Original text: "Disk name"
-  vdbNamePlaceHolder: 'Nazwa dysku',
+  vbdNamePlaceHolder: 'Nazwa dysku',
 
   // Original text: "Size"
-  vdbSizePlaceHolder: 'Rozmiar',
+  vbdSizePlaceHolder: 'Rozmiar',
 
   // Original text: "Save"
   saveBootOption: 'Zapisz',
@@ -1719,7 +1719,7 @@ export default {
   snapshotCreateButton: 'Nowy snapshot',
 
   // Original text: "Just click on the snapshot button to create one!"
-  tipCreateSnapshotLabel: 'Kliknij na guzuik snapshota żeby stworzyć !',
+  tipCreateSnapshotLabel: 'Kliknij na guzik żeby stworzyć snapshota !',
 
   // Original text: "Revert VM to this snapshot"
   revertSnapshot: 'Przywróć VM do tego snapshota',
@@ -1755,7 +1755,7 @@ export default {
   logName: 'Nazwa',
 
   // Original text: "Content"
-  logContent: 'Content',
+  logContent: 'Zawartość',
 
   // Original text: "Action"
   logAction: 'Akcja',
@@ -1893,7 +1893,7 @@ export default {
   usersStatePanel: 'Użytkownicy',
 
   // Original text: "Storage state"
-  srStatePanel: 'Storage state',
+  srStatePanel: 'Status przestrzeni dyskowej',
 
   // Original text: "{usage} (of {total})"
   ofUsage: '{usage} (sur {total})',
@@ -1950,7 +1950,7 @@ export default {
   weekHeatmapNoData: 'No data.',
 
   // Original text: "Weekly Heatmap"
-  weeklyHeatmap: 'Weekly Heatmap',
+  weeklyHeatmap: 'Tygodniowa mapa cieplna',
 
   // Original text: "Weekly Charts"
   weeklyCharts: 'Wykresy tygodniowe',
@@ -2739,7 +2739,7 @@ export default {
   noProSupport: 'No pro support provided!',
 
   // Original text: "Use in production at your own risks"
-  noProductionUse: 'Używani produkcyjne na własne ryzyko',
+  noProductionUse: 'Używanie produkcyjne na własne ryzyko',
 
   // Original text: "You can download our turnkey appliance at {website}"
   downloadXoaFromWebsite: 'You can download our turnkey appliance at {website}',

src/common/intl/locales/pt.js

@@ -627,7 +627,7 @@ export default {
   editBackupReportTitle: undefined,
 
   // Original text: 'Enable immediately after creation'
-  editBackupReportEnable: undefined,
+  editBackupScheduleEnabled: undefined,
 
   // Original text: 'Depth'
   editBackupDepthTitle: undefined,
@@ -1605,10 +1605,10 @@ export default {
   vdiRemove: undefined,
 
   // Original text: "Boot flag"
-  vdbBootableStatus: 'Indicador de inicialização',
+  vbdBootableStatus: 'Indicador de inicialização',
 
   // Original text: "Status"
-  vdbStatus: 'Status',
+  vbdStatus: 'Status',
 
   // Original text: "Connected"
   vbdStatusConnected: 'Conectado',
@@ -1626,19 +1626,19 @@ export default {
   vbdDisconnect: undefined,
 
   // Original text: 'Bootable'
-  vdbBootable: undefined,
+  vbdBootable: undefined,
 
   // Original text: 'Readonly'
-  vdbReadonly: undefined,
+  vbdReadonly: undefined,
 
   // Original text: 'Create'
-  vdbCreate: undefined,
+  vbdCreate: undefined,
 
   // Original text: 'Disk name'
-  vdbNamePlaceHolder: undefined,
+  vbdNamePlaceHolder: undefined,
 
   // Original text: 'Size'
-  vdbSizePlaceHolder: undefined,
+  vbdSizePlaceHolder: undefined,
 
   // Original text: 'Save'
   saveBootOption: undefined,

src/common/intl/locales/zh.js

@@ -1203,10 +1203,10 @@ export default {
   vdiVm: '虚拟机',
 
   // Original text: "Boot flag"
-  vdbBootableStatus: '启动标识',
+  vbdBootableStatus: '启动标识',
 
   // Original text: "Status"
-  vdbStatus: '状态',
+  vbdStatus: '状态',
 
   // Original text: "Connected"
   vbdStatusConnected: '已连接',

src/common/intl/messages.js

@@ -18,11 +18,16 @@ var messages = {
   // ----- Modals -----
   alertOk: 'OK',
   confirmOk: 'OK',
-  confirmCancel: 'Cancel',
+  genericCancel: 'Cancel',
 
   // ----- Filters -----
   onError: 'On error',
   successful: 'Successful',
+  filterOnlyManaged: 'Managed disks',
+  filterOnlyOrphaned: 'Orphaned disks',
+  filterOnlyRegular: 'Normal disks',
+  filterOnlySnapshots: 'Snapshot disks',
+  filterOnlyUnmanaged: 'Unmanaged disks',
 
   // ----- Copiable component -----
   copyToClipboard: 'Copy to clipboard',
@@ -33,6 +38,7 @@ var messages = {
   // ----- Titles -----
   homePage: 'Home',
   homeVmPage: 'VMs',
+  homeVmGroupPage: 'VM-Groups',
   homeHostPage: 'Hosts',
   homePoolPage: 'Pools',
   homeTemplatePage: 'Templates',
@@ -61,6 +67,7 @@ var messages = {
   taskMenu: 'Tasks',
   taskPage: 'Tasks',
   newVmPage: 'VM',
+  newVmGroupPage: 'VM-Group',
   newSrPage: 'Storage',
   newServerPage: 'Server',
   newImport: 'Import',
@@ -116,6 +123,7 @@ var messages = {
   homeTypePool: 'Pool',
   homeTypeHost: 'Host',
   homeTypeVm: 'VM',
+  homeTypeVmGroup: 'VM group',
   homeTypeSr: 'SR',
   homeTypeVmTemplate: 'Template',
   homeSort: 'Sort',
@@ -245,7 +253,7 @@ var messages = {
   noJobs: 'No jobs found.',
   noSchedules: 'No schedules found',
   jobActionPlaceHolder: 'Select a xo-server API command',
-  jobTimeoutPlaceHolder: ' Timeout (number of seconds after which the job is considered failed)',
+  jobTimeoutPlaceHolder: ' Timeout (number of seconds after which a VM is considered failed)',
   jobSchedules: 'Schedules',
   jobScheduleNamePlaceHolder: 'Name of your schedule',
   jobScheduleJobPlaceHolder: 'Select a Job',
@@ -271,9 +279,10 @@ var messages = {
   editBackupNot: 'Reverse',
   editBackupTagTitle: 'Tag',
   editBackupReportTitle: 'Report',
-  editBackupReportEnable: 'Enable immediately after creation',
+  editBackupScheduleEnabled: 'Automatically run as scheduled',
   editBackupDepthTitle: 'Depth',
   editBackupRemoteTitle: 'Remote',
+  deleteOldBackupsFirst: 'Delete the old backups first',
 
   // ------ New Remote -----
   remoteList: 'Remote stores for backup',
@@ -382,7 +391,7 @@ var messages = {
   userLabel: 'User',
   adminLabel: 'Admin',
   noUserInGroup: 'No user in group',
-  countUsers: '{users} user{users, plural, one {} other {s}}',
+  countUsers: '{users, number} user{users, plural, one {} other {s}}',
   selectPermission: 'Select Permission',
 
   // ----- Plugins ------
@@ -487,6 +496,10 @@ var messages = {
   addSrLabel: 'Add SR',
   addVmLabel: 'Add VM',
   addHostLabel: 'Add Host',
+  hostNeedsPatchUpdate: 'This host needs to install {patches, number} patch{patches, plural, one {} other {es}} before it can be added to the pool. This operation may be long.',
+  hostNeedsPatchUpdateNoInstall: 'This host cannot be added to the pool because it\'s missing some patches.',
+  addHostErrorTitle: 'Adding host failed',
+  addHostNotHomogeneousErrorMessage: 'Host patches could not be homogenized.',
   disconnectServer: 'Disconnect',
 
   // ----- Host actions ------
@@ -500,7 +513,7 @@ var messages = {
   noHostsAvailableErrorTitle: 'Error while restarting host',
   noHostsAvailableErrorMessage: 'Some VMs cannot be migrated before restarting this host. Please try force reboot.',
   failHostBulkRestartTitle: 'Error while restarting hosts',
-  failHostBulkRestartMessage: '{failedHosts}/{totalHosts} host{failedHosts, plural, one {} other {s}} could not be restarted.',
+  failHostBulkRestartMessage: '{failedHosts, number}/{totalHosts, number} host{failedHosts, plural, one {} other {s}} could not be restarted.',
   rebootUpdateHostLabel: 'Reboot to apply updates',
   emergencyModeLabel: 'Emergency mode',
   // ----- Host tabs -----
@@ -593,6 +606,10 @@ var messages = {
   hostAppliedPatches: 'Applied patches',
   hostMissingPatches: 'Missing patches',
   hostUpToDate: 'Host up-to-date!',
+  installPatchWarningTitle: 'Non-recommended patch install',
+  installPatchWarningContent: 'This will install a patch only on this host. This is NOT the recommended way: please go into the Pool patch view and follow instructions there. If you are sure about this, you can continue anyway',
+  installPatchWarningReject: 'Go to pool',
+  installPatchWarningResolve: 'Install',
   // ----- Pool patch tabs -----
   refreshPatches: 'Refresh patches',
   installPoolPatches: 'Install pool patches',
@@ -610,6 +627,7 @@ var messages = {
   advancedTabName: 'Advanced',
   networkTabName: 'Network',
   disksTabName: 'Disk{disks, plural, one {} other {s}}',
+  managementTabName: 'Management',
 
   powerStateHalted: 'halted',
   powerStateRunning: 'running',
@@ -622,6 +640,7 @@ var messages = {
   vmSettings: 'Started {ago}',
   vmCurrentStatus: 'Current status:',
   vmNotRunning: 'Not running',
+  vmHaltedSince: 'Halted {ago}',
 
   // ----- VM general tab -----
   noToolsDetected: 'No Xen tools detected',
@@ -670,6 +689,8 @@ var messages = {
   vdiBootOrder: 'Boot order',
   vdiNameLabel: 'Name',
   vdiNameDescription: 'Description',
+  vdiPool: 'Pool',
+  vdiDisconnect: 'Disconnect',
   vdiTags: 'Tags',
   vdiSize: 'Size',
   vdiSr: 'SR',
@@ -681,19 +702,20 @@ var messages = {
   vdiMigrateNoSrMessage: 'A target SR is required to migrate a VDI',
   vdiForget: 'Forget',
   vdiRemove: 'Remove VDI',
-  vdbBootableStatus: 'Boot flag',
-  vdbStatus: 'Status',
+  noControlDomainVdis: 'No VDIs attached to Control Domain',
+  vbdBootableStatus: 'Boot flag',
+  vbdStatus: 'Status',
   vbdStatusConnected: 'Connected',
   vbdStatusDisconnected: 'Disconnected',
   vbdNoVbd: 'No disks',
   vbdConnect: 'Connect VBD',
   vbdDisconnect: 'Disconnect VBD',
-  vdbBootable: 'Bootable',
-  vdbReadonly: 'Readonly',
+  vbdBootable: 'Bootable',
+  vbdReadonly: 'Readonly',
   vbdAction: 'Action',
-  vdbCreate: 'Create',
-  vdbNamePlaceHolder: 'Disk name',
-  vdbSizePlaceHolder: 'Size',
+  vbdCreate: 'Create',
+  vbdNamePlaceHolder: 'Disk name',
+  vbdSizePlaceHolder: 'Size',
   cdDriveNotInstalled: 'CD drive not completely installed',
   cdDriveInstallation: 'Stop and start the VM to install the CD drive',
   saveBootOption: 'Save',
@@ -767,6 +789,8 @@ var messages = {
   autoPowerOn: 'Auto power on',
   ha: 'HA',
   vmAffinityHost: 'Affinity host',
+  vmVga: 'VGA',
+  vmVideoram: 'Video RAM',
   noAffinityHost: 'None',
   originalTemplate: 'Original template',
   unknownOsName: 'Unknown',
@@ -774,6 +798,11 @@ var messages = {
   unknownOriginalTemplate: 'Unknown',
   vmLimitsLabel: 'VM limits',
   vmCpuLimitsLabel: 'CPU limits',
+  vmCpuTopology: 'Topology',
+  vmChooseCoresPerSocket: 'Default behavior',
+  vmCoresPerSocket: '{nSockets, number} socket{nSockets, plural, one {} other {s}} with {nCores, number} core{nCores, plural, one {} other {s}} per socket',
+  vmCoresPerSocketIncorrectValue: 'Incorrect cores per socket value',
+  vmCoresPerSocketIncorrectValueSolution: 'Please change the selected value to fix it.',
   vmMemoryLimitsLabel: 'Memory limits (min/max)',
   vmMaxVcpus: 'vCPUs max:',
   vmMaxRam: 'Memory max:',
@@ -815,7 +844,7 @@ var messages = {
   srFree: 'free',
   srUsageStatePanel: 'Storage Usage',
   srTopUsageStatePanel: 'Top 5 SR Usage (in %)',
-  vmsStates: '{running} running ({halted} halted)',
+  vmsStates: '{running, number} running ({halted, number} halted)',
   dashboardStatsButtonRemoveAll: 'Clear selection',
   dashboardStatsButtonAddAllHost: 'Add all hosts',
   dashboardStatsButtonAddAllVM: 'Add all VMs',
@@ -840,6 +869,7 @@ var messages = {
   orphanedVms: 'Orphaned VMs snapshot',
   noOrphanedObject: 'No orphans',
   removeAllOrphanedObject: 'Remove all orphaned snapshot VDIs',
+  vdisOnControlDomain: 'VDIs attached to Control Domain',
   vmNameLabel: 'Name',
   vmNameDescription: 'Description',
   vmContainer: 'Resident on',
@@ -894,7 +924,7 @@ var messages = {
   newVmDefaultCpuCap: 'Default: {value, number}',
   newVmCloudConfig: 'Cloud config',
   newVmCreateVms: 'Create VMs',
-  newVmCreateVmsConfirm: 'Are you sure you want to create {nbVms} VMs?',
+  newVmCreateVmsConfirm: 'Are you sure you want to create {nbVms, number} VMs?',
   newVmMultipleVms: 'Multiple VMs:',
   newVmSelectResourceSet: 'Select a resource set:',
   newVmMultipleVmsPattern: 'Name pattern:',
@@ -908,6 +938,32 @@ var messages = {
   newVmHideAdvanced: 'Hide advanced settings',
   newVmShare: 'Share this VM',
 
+  // ----- VM-Group-----
+  newVmGroupTitle: 'Create a new Vm-Group on ',
+  newVmGroupNameLabel: 'Label',
+  newVmGroupDescriptionLabel: 'Description',
+  newVmGroupReset: 'Reset',
+  newVmGroupCreate: 'Create',
+  newVmGroupInfoPanel: 'Infos',
+
+  // ----- VM-Group item -----
+  powerStateVmGroupRunning: 'All vms are running',
+  powerStateVmGroupHalted: 'All vms are halted',
+  powerStateVmGroupBusy: 'Contains vms halted and vms running',
+
+  // ----- VM-Group management Tab -----
+  'attachVmButton': 'new VM',
+  'vmsBootOrder': 'Boot order',
+  'vmGroupLabel': 'Label',
+  'vmGroupDescription': 'Description',
+  'vmGroupActions': 'Actions',
+
+  // ----- VM-Group general Tab -----
+  'vmGroupCurrentStatus': 'Current status',
+
+  // ----- VM-Group stats Tab -----
+  'vmGroupAllVm': 'All VMs',
+
   // ----- Self -----
   resourceSets: 'Resource sets',
   noResourceSets: 'No resource sets.',
@@ -975,6 +1031,7 @@ var messages = {
   delta: 'delta',
   restoreBackups: 'Restore Backups',
   restoreBackupsInfo: 'Click on a VM to display restore options',
+  restoreDeltaBackupsInfo: 'Only the files of Delta Backup which are not on a SMB remote can be restored',
   remoteEnabled: 'Enabled',
   remoteError: 'Error',
   noBackup: 'No backup available',
@@ -1008,7 +1065,7 @@ var messages = {
 
   // ----- Modals -----
   emergencyShutdownHostsModalTitle: 'Emergency shutdown Host{nHosts, plural, one {} other {s}}',
-  emergencyShutdownHostsModalMessage: 'Are you sure you want to shutdown {nHosts} Host{nHosts, plural, one {} other {s}}?',
+  emergencyShutdownHostsModalMessage: 'Are you sure you want to shutdown {nHosts, number} Host{nHosts, plural, one {} other {s}}?',
   stopHostModalTitle: 'Shutdown host',
   stopHostModalMessage: 'This will shutdown your host. Do you want to continue? If it\'s the pool master, your connection to the pool will be lost',
   addHostModalTitle: 'Add host',
@@ -1016,25 +1073,32 @@ var messages = {
   restartHostModalTitle: 'Restart host',
   restartHostModalMessage: 'This will restart your host. Do you want to continue?',
   restartHostsAgentsModalTitle: 'Restart Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}',
-  restartHostsAgentsModalMessage: 'Are you sure you want to restart {nHosts} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?',
+  restartHostsAgentsModalMessage: 'Are you sure you want to restart {nHosts, number} Host{nHosts, plural, one {} other {s}} agent{nHosts, plural, one {} other {s}}?',
   restartHostsModalTitle: 'Restart Host{nHosts, plural, one {} other {s}}',
-  restartHostsModalMessage: 'Are you sure you want to restart {nHosts} Host{nHosts, plural, one {} other {s}}?',
+  restartHostsModalMessage: 'Are you sure you want to restart {nHosts, number} Host{nHosts, plural, one {} other {s}}?',
   startVmsModalTitle: 'Start VM{vms, plural, one {} other {s}}',
-  startVmsModalMessage: 'Are you sure you want to start {vms} VM{vms, plural, one {} other {s}}?',
+  cloneAndStartVM: 'Start a copy',
+  forceStartVm: 'Force start',
+  forceStartVmModalTitle: 'Forbidden operation',
+  blockedStartVmModalMessage: 'Start operation for this vm is blocked.',
+  blockedStartVmsModalMessage: 'Forbidden operation start for {nVms, number} vm{nVms, plural, one {} other {s}}.',
+  startVmsModalMessage: 'Are you sure you want to start {vms, number} VM{vms, plural, one {} other {s}}?',
+  failedVmsErrorMessage: '{nVms, number} vm{nVms, plural, one {} other {s}} are failed. Please see your logs to get more information',
+  failedVmsErrorTitle: 'Start failed',
   stopHostsModalTitle: 'Stop Host{nHosts, plural, one {} other {s}}',
-  stopHostsModalMessage: 'Are you sure you want to stop {nHosts} Host{nHosts, plural, one {} other {s}}?',
+  stopHostsModalMessage: 'Are you sure you want to stop {nHosts, number} Host{nHosts, plural, one {} other {s}}?',
   stopVmsModalTitle: 'Stop VM{vms, plural, one {} other {s}}',
-  stopVmsModalMessage: 'Are you sure you want to stop {vms} VM{vms, plural, one {} other {s}}?',
+  stopVmsModalMessage: 'Are you sure you want to stop {vms, number} VM{vms, plural, one {} other {s}}?',
   restartVmModalTitle: 'Restart VM',
   restartVmModalMessage: 'Are you sure you want to restart {name}?',
   stopVmModalTitle: 'Stop VM',
   stopVmModalMessage: 'Are you sure you want to stop {name}?',
   restartVmsModalTitle: 'Restart VM{vms, plural, one {} other {s}}',
-  restartVmsModalMessage: 'Are you sure you want to restart {vms} VM{vms, plural, one {} other {s}}?',
+  restartVmsModalMessage: 'Are you sure you want to restart {vms, number} VM{vms, plural, one {} other {s}}?',
   snapshotVmsModalTitle: 'Snapshot VM{vms, plural, one {} other {s}}',
-  snapshotVmsModalMessage: 'Are you sure you want to snapshot {vms} VM{vms, plural, one {} other {s}}?',
+  snapshotVmsModalMessage: 'Are you sure you want to snapshot {vms, number} VM{vms, plural, one {} other {s}}?',
   deleteVmsModalTitle: 'Delete VM{vms, plural, one {} other {s}}',
-  deleteVmsModalMessage: 'Are you sure you want to delete {vms} VM{vms, plural, one {} other {s}}? ALL VM DISKS WILL BE REMOVED',
+  deleteVmsModalMessage: 'Are you sure you want to delete {vms, number} VM{vms, plural, one {} other {s}}? ALL VM DISKS WILL BE REMOVED',
   deleteVmModalTitle: 'Delete VM',
   deleteVmModalMessage: 'Are you sure you want to delete this VM? ALL VM DISKS WILL BE REMOVED',
   migrateVmModalTitle: 'Migrate VM',
@@ -1052,6 +1116,8 @@ var messages = {
   migrateVmNetwork: 'Network',
   migrateVmNoTargetHost: 'No target host',
   migrateVmNoTargetHostMessage: 'A target host is required to migrate a VM',
+  deleteVmGroupModalTitle: 'Delete VM-Group',
+  deleteVmGroupModalMessage: 'Are you sure you want to delete this VMGroup ?',
   deleteVdiModalTitle: 'Delete VDI',
   deleteVdiModalMessage: 'Are you sure you want to delete this disk? ALL DATA ON THIS DISK WILL BE LOST',
   revertVmModalTitle: 'Revert your VM',
@@ -1082,6 +1148,9 @@ var messages = {
   serverPassword: 'Password',
   serverAction: 'Action',
   serverReadOnly: 'Read Only',
+  serverUnauthorizedCertificates: 'Unauthorized Certificates',
+  serverAllowUnauthorizedCertificates: 'Allow Unauthorized Certificates',
+  serverUnauthorizedCertificatesInfo: 'Enable it if your certificate is rejected, but it\'s not recommended because your connection will not be secured.',
   serverDisconnect: 'Disconnect server',
   serverPlaceHolderUser: 'username',
   serverPlaceHolderPassword: 'password',
@@ -1091,12 +1160,14 @@ var messages = {
   serverError: 'Error',
   serverAddFailed: 'Adding server failed',
   serverStatus: 'Status',
-  serverConnectionFailed: 'Connection failed',
+  serverConnectionFailed: 'Connection failed. Click for more information.',
   serverConnecting: 'Connecting...',
   serverConnected: 'Connected',
   serverDisconnected: 'Disconnected',
   serverAuthFailed: 'Authentication error',
   serverUnknownError: 'Unknown error',
+  serverSelfSignedCertError: 'Invalid self-signed certificate',
+  serverSelfSignedCertQuestion: 'Do you want to accept self-signed certificate for this server even though it would decrease security?',
 
   // ----- Copy VM -----
   copyVm: 'Copy VM',
@@ -1346,6 +1417,9 @@ var messages = {
   xosanUsedSpace: 'Used space',
   xosanNeedPack: 'XOSAN pack needs to be installed on each host of the pool.',
   xosanInstallIt: 'Install it now!',
+  xosanNeedRestart: 'Some hosts need their toolstack to be restarted before you can create an XOSAN',
+  xosanRestartAgents: 'Restart toolstacks',
+  xosanMasterOffline: 'Pool master is not running',
   xosanInstallPackTitle: 'Install XOSAN pack on {pool}',
   xosanSelect2Srs: 'Select at least 2 SRs',
   xosanLayout: 'Layout',

src/common/ip.js

@@ -28,7 +28,7 @@ function assertIpv4 (str, msg) {
   if (!ipv4.test(str)) { throw new Error(msg) }
 }
 
-function *range (ip1, ip2) {
+function * range (ip1, ip2) {
   assertIpv4(ip1, 'argument "ip1" must be a valid IPv4 address')
   assertIpv4(ip2, 'argument "ip2" must be a valid IPv4 address')
 

src/common/iso-device.js

@@ -4,7 +4,7 @@ import _ from 'intl'
 import ActionButton from './action-button'
 import Component from './base-component'
 import Icon from 'icon'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import Tooltip from 'tooltip'
 import { alert } from 'modal'
 import { connectStore } from './utils'
@@ -55,8 +55,9 @@ export default class IsoDevice extends Component {
       const samePool = vmPool === sr.$pool
 
       return (
-        samePool && (vmRunning ? sr.shared || sameHost : true) &&
-        sr.SR_type === 'iso' || sr.SR_type === 'udev' && sr.size
+        samePool &&
+        (vmRunning ? sr.shared || sameHost : true) &&
+        (sr.SR_type === 'iso' || (sr.SR_type === 'udev' && sr.size))
       )
     }
   )
@@ -87,7 +88,6 @@ export default class IsoDevice extends Component {
         />
         <span className='input-group-btn'>
           <ActionButton
-            btnStyle='secondary'
             disabled={!mountedIso}
             handler={this._handleEject}
             icon='vm-eject'

src/common/json-schema-input/array-input.js

@@ -3,8 +3,9 @@ import uncontrollableInput from 'uncontrollable-input'
 import { filter, map } from 'lodash'
 
 import _ from '../intl'
+import Button from '../button'
 import Component from '../base-component'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import { EMPTY_ARRAY } from '../utils'
 
 import GenericInput from './generic-input'
@@ -96,26 +97,26 @@ export default class ObjectInput extends Component {
                   uiSchema={itemUiSchema}
                   value={value}
                 />
-                <button
-                  className='btn btn-danger pull-right'
+                <Button
+                  btnStyle='danger'
+                  className='pull-right'
                   disabled={disabled}
                   name={key}
                   onClick={() => this._onRemoveItem(key)}
-                  type='button'
                 >
                   {_('remove')}
-                </button>
+                </Button>
               </li>
             )}
           </ul>
-          <button
-            className='btn btn-primary pull-right mt-1 mr-1'
+          <Button
+            btnStyle='primary'
+            className='pull-right mt-1 mr-1'
             disabled={disabled}
             onClick={this._onAddItem}
-            type='button'
           >
             {_('add')}
-          </button>
+          </Button>
         </div>}
       </div>
     )

src/common/json-schema-input/generic-input.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
 import getEventValue from '../get-event-value'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import uncontrollableInput from 'uncontrollable-input'
 import { EMPTY_OBJECT } from '../utils'
 

src/common/json-schema-input/object-input.js

@@ -5,7 +5,7 @@ import { keyBy, map } from 'lodash'
 
 import _ from '../intl'
 import Component from '../base-component'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import { EMPTY_OBJECT } from '../utils'
 
 import GenericInput from './generic-input'
@@ -57,7 +57,7 @@ export default class ObjectInput extends Component {
     } = this
 
     const childDepth = depth + 2
-    const properties = uiSchema && uiSchema.properties || EMPTY_OBJECT
+    const properties = (uiSchema != null && uiSchema.properties) || EMPTY_OBJECT
     const requiredProps = this._getRequiredProps()
 
     return (

src/common/json-schema-input/string-input.js

@@ -1,9 +1,10 @@
 import React from 'react'
-
 import uncontrollableInput from 'uncontrollable-input'
+
 import Combobox from '../combobox'
 import Component from '../base-component'
-import propTypes from '../prop-types'
+import getEventValue from '../get-event-value'
+import propTypes from '../prop-types-decorator'
 
 import { PrimitiveInputWrapper } from './helpers'
 
@@ -14,23 +15,30 @@ import { PrimitiveInputWrapper } from './helpers'
 })
 @uncontrollableInput()
 export default class StringInput extends Component {
+  // the value of this input  is undefined not '' when empty to make
+  // it homogenous with when the user has never touched this input
+  _onChange = event => {
+    const value = getEventValue(event)
+    this.props.onChange(value !== '' ? value : undefined)
+  }
+
   render () {
     const { required, schema } = this.props
     const {
       disabled,
-      onChange,
       password,
       placeholder = schema.default,
       value,
       ...props
     } = this.props
+    delete props.onChange
 
     return (
       <PrimitiveInputWrapper {...props}>
         <Combobox
-          value={value || ''}
+          value={value !== undefined ? value : ''}
           disabled={disabled}
-          onChange={onChange}
+          onChange={this._onChange}
           options={schema.defaults}
           placeholder={placeholder || schema.default}
           required={required}

src/common/link.js

@@ -3,7 +3,7 @@ import React from 'react'
 import { routerShape } from 'react-router/lib/PropTypes'
 
 import Component from './base-component'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 // ===================================================================
 

src/common/modal.js

@@ -1,11 +1,14 @@
-import _ from 'intl'
-import Icon from 'icon'
 import isArray from 'lodash/isArray'
 import isString from 'lodash/isString'
+import map from 'lodash/map'
 import React, { Component, cloneElement } from 'react'
-import { Button, Modal as ReactModal } from 'react-bootstrap-4/lib'
+import { Modal as ReactModal } from 'react-bootstrap-4/lib'
 
-import propTypes from './prop-types'
+import _ from './intl'
+import Button from './button'
+import Icon from './icon'
+import propTypes from './prop-types-decorator'
+import Tooltip from './tooltip'
 import {
   disable as disableShortcuts,
   enable as enableShortcuts
@@ -22,64 +25,46 @@ const modal = (content, onClose) => {
   instance.setState({ content, onClose, showModal: true }, disableShortcuts)
 }
 
-export const alert = (title, body) => {
-  return new Promise(resolve => {
-    const { Body, Footer, Header, Title } = ReactModal
-    modal(
-      <div>
-        <Header closeButton>
-          <Title>{title}</Title>
-        </Header>
-        <Body>{body}</Body>
-        <Footer>
-          <Button bsStyle='primary' onClick={() => {
-            resolve()
-            instance.close()
-          }}>
-            {_('alertOk')}
-          </Button>
-        </Footer>
-      </div>,
-      resolve
-    )
-  })
-}
-
-const _addRef = (component, ref) => {
-  if (isString(component) || isArray(component)) {
-    return component
+@propTypes({
+  buttons: propTypes.arrayOf(propTypes.shape({
+    btnStyle: propTypes.string,
+    icon: propTypes.string,
+    label: propTypes.string.isRequired,
+    tooltip: propTypes.node,
+    value: propTypes.any
+  })).isRequired,
+  children: propTypes.node.isRequired,
+  icon: propTypes.string,
+  title: propTypes.node.isRequired
+})
+class GenericModal extends Component {
+  _getBodyValue = () => {
+    const { body } = this.refs
+    if (body !== undefined) {
+      return body.getWrappedInstance === undefined
+        ? body.value
+        : body.getWrappedInstance().value
+    }
   }
 
-  try {
-    return cloneElement(component, { ref })
-  } catch (_) {} // Stateless component.
-  return component
-}
-
-@propTypes({
-  children: propTypes.node.isRequired,
-  title: propTypes.node.isRequired,
-  icon: propTypes.string
-})
-class Confirm extends Component {
-  _resolve = () => {
-    const { body } = this.refs
-    this.props.resolve(body && (body.getWrappedInstance
-      ? body.getWrappedInstance().value
-      : body.value
-    ))
+  _resolve = (value = this._getBodyValue()) => {
+    this.props.resolve(value)
     instance.close()
   }
+
   _reject = () => {
     this.props.reject()
     instance.close()
   }
 
-  _style = { marginRight: '0.5em' }
-
   render () {
     const { Body, Footer, Header, Title } = ReactModal
-    const { title, icon } = this.props
+
+    const {
+      buttons,
+      icon,
+      title
+    } = this.props
 
     const body = _addRef(this.props.children, 'body')
 
@@ -96,39 +81,99 @@ class Confirm extends Component {
         {body}
       </Body>
       <Footer>
-        <Button
-          bsStyle='primary'
-          onClick={this._resolve}
-          style={this._style}
-        >
-          {_('confirmOk')}
-        </Button>
-        <Button
-          bsStyle='secondary'
-          onClick={this._reject}
-        >
-          {_('confirmCancel')}
-        </Button>
+        {map(buttons, ({
+          label,
+          tooltip,
+          value,
+          icon,
+          ...props
+        }) => {
+          const button = <Button
+            onClick={() => this._resolve(value)}
+            key={value}
+            {...props}
+          >
+            {icon !== undefined && <Icon icon={icon} fixedWidth />}
+            {label}
+          </Button>
+          return <span>
+            {tooltip !== undefined
+              ? <Tooltip content={tooltip}>{button}</Tooltip>
+              : button
+            }
+            {' '}
+          </span>
+        })}
+        {this.props.reject !== undefined &&
+          <Button onClick={this._reject} >
+            {_('genericCancel')}
+          </Button>
+        }
       </Footer>
     </div>
   }
 }
 
+const ALERT_BUTTONS = [ { label: _('alertOk'), value: 'ok' } ]
+
+export const alert = (title, body) => (
+  new Promise(resolve => {
+    modal(
+      <GenericModal
+        buttons={ALERT_BUTTONS}
+        resolve={resolve}
+        title={title}
+      >
+        {body}
+      </GenericModal>,
+      resolve
+    )
+  })
+)
+
+const _addRef = (component, ref) => {
+  if (isString(component) || isArray(component)) {
+    return component
+  }
+
+  try {
+    return cloneElement(component, { ref })
+  } catch (_) {} // Stateless component.
+  return component
+}
+
+const CONFIRM_BUTTONS = [ { btnStyle: 'primary', label: _('confirmOk') } ]
+
 export const confirm = ({
   body,
-  title,
-  icon = 'alarm'
+  icon = 'alarm',
+  title
+}) => (
+  chooseAction({
+    body,
+    buttons: CONFIRM_BUTTONS,
+    icon,
+    title
+  })
+)
+
+export const chooseAction = ({
+  body,
+  buttons,
+  icon,
+  title
 }) => {
   return new Promise((resolve, reject) => {
     modal(
-      <Confirm
-        title={title}
-        resolve={resolve}
-        reject={reject}
+      <GenericModal
+        buttons={buttons}
         icon={icon}
+        reject={reject}
+        resolve={resolve}
+        title={title}
       >
         {body}
-      </Confirm>,
+      </GenericModal>,
       reject
     )
   })

src/common/prop-types-decorator.js

@@ -0,0 +1,33 @@
+import assign from 'lodash/assign'
+import { PropTypes } from 'react'
+
+// Decorators to help declaring properties and context types on React
+// components without using the tedious static properties syntax.
+//
+// ```js
+// @propTypes({
+//   children: propTypes.node.isRequired
+// }, {
+//   store: propTypes.object.isRequired
+// })
+// class MyComponent extends React.Component {}
+// ```
+const propTypes = (propTypes, contextTypes) => target => {
+  if (propTypes !== undefined) {
+    target.propTypes = {
+      ...target.propTypes,
+      ...propTypes
+    }
+  }
+  if (contextTypes !== undefined) {
+    target.contextTypes = {
+      ...target.contextTypes,
+      ...contextTypes
+    }
+  }
+
+  return target
+}
+assign(propTypes, PropTypes)
+
+export { propTypes as default }

src/common/prop-types.js

@@ -1,22 +0,0 @@
-import assign from 'lodash/assign'
-import { PropTypes } from 'react'
-
-// Decorators to help declaring on React components without using the
-// tedious static properties syntax.
-//
-// ```js
-// @propTypes({
-//   children: propTypes.node.isRequired
-// })
-// class MyComponent extends React.Component {}
-// ```
-const propTypes = types => target => {
-  target.propTypes = {
-    ...target.propTypes,
-    ...types
-  }
-
-  return target
-}
-assign(propTypes, PropTypes)
-export { propTypes as default }

src/common/react-novnc.js

@@ -8,7 +8,7 @@ import {
 } from 'url'
 import { enable as enableShortcuts, disable as disableShortcuts } from 'shortcuts'
 
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const parseRelativeUrl = url => parseUrl(resolveUrl(String(window.location), url))
 

src/common/render-xo-item.js

@@ -2,7 +2,7 @@ import _ from 'intl'
 import React from 'react'
 
 import Icon from './icon'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import { createGetObject } from './selectors'
 import { isSrWritable } from './xo'
 import {
@@ -222,7 +222,9 @@ const GenericXoItem = connectStore(() => {
   })
 })(({ xoItem, ...props }) => xoItem
   ? renderXoItem(xoItem, props)
-  : <span className='text-muted'>{_('errorNoSuchItem')}</span>
+  : renderXoUnknownItem()
 )
 
 export const renderXoItemFromId = (id, props) => <GenericXoItem {...props} id={id} />
+
+export const renderXoUnknownItem = () => <span className='text-muted'>{_('errorNoSuchItem')}</span>

src/common/scheduling.js

@@ -1,9 +1,6 @@
 import classNames from 'classnames'
-import Icon from 'icon'
 import later from 'later'
 import React from 'react'
-import Tooltip from 'tooltip'
-import { Toggle } from 'form'
 import { FormattedDate, FormattedTime } from 'react-intl'
 import {
   forEach,
@@ -14,12 +11,15 @@ import {
 } from 'lodash'
 
 import _ from './intl'
+import Button from './button'
 import Component from './base-component'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import TimezonePicker from './timezone-picker'
+import Icon from './icon'
+import Tooltip from './tooltip'
 import { Card, CardHeader, CardBlock } from './card'
 import { Col, Row } from './grid'
-import { Range } from './form'
+import { Range, Toggle } from './form'
 
 // ===================================================================
 
@@ -259,13 +259,12 @@ class TableSelect extends Component {
           ))}
         </tbody>
       </table>
-      <button
-        className='btn btn-secondary pull-right'
+      <Button
+        className='pull-right'
         onClick={this._reset}
-        type='button'
       >
         {_(`selectTableAll${labelId}`)} {value && !value.length && <Icon icon='success' />}
-      </button>
+      </Button>
     </div>
   }
 }

src/common/select-files.js

@@ -1,7 +1,7 @@
 import _ from 'intl'
 import Component from 'base-component'
 import Icon from 'icon'
-import propTypes from 'prop-types'
+import propTypes from 'prop-types-decorator'
 import React from 'react'
 import { omit } from 'lodash'
 

src/common/select-objects.js

@@ -1,9 +1,5 @@
 import React from 'react'
 import classNames from 'classnames'
-import Icon from 'icon'
-import store from 'store'
-import Tooltip from 'tooltip'
-import { Button } from 'react-bootstrap-4/lib'
 import { parse as parseRemote } from 'xo-remote-parser'
 import {
   assign,
@@ -26,10 +22,14 @@ import {
 } from 'lodash'
 
 import _ from './intl'
-import uncontrollableInput from 'uncontrollable-input'
+import Button from './button'
 import Component from './base-component'
-import propTypes from './prop-types'
+import Icon from './icon'
+import propTypes from './prop-types-decorator'
 import renderXoItem from './render-xo-item'
+import store from './store'
+import Tooltip from './tooltip'
+import uncontrollableInput from 'uncontrollable-input'
 import { Select } from './form'
 import {
   createCollectionWrapper,
@@ -278,7 +278,7 @@ export class GenericSelect extends Component {
       {select}
       <span className='input-group-btn'>
         <Tooltip content={_('selectAll')}>
-          <Button type='button' bsStyle='secondary' onClick={this._selectAll} style={ADDON_BUTTON_STYLE}>
+          <Button onClick={this._selectAll} style={ADDON_BUTTON_STYLE}>
             <Icon icon='add' />
           </Button>
         </Tooltip>

src/common/selectors.js

@@ -1,18 +1,21 @@
+import add from 'lodash/add'
 import checkPermissions from 'xo-acl-resolver'
-import filter from 'lodash/filter'
-import find from 'lodash/find'
-import forEach from 'lodash/forEach'
-import groupBy from 'lodash/groupBy'
-import isArray from 'lodash/isArray'
-import isArrayLike from 'lodash/isArrayLike'
-import isFunction from 'lodash/isFunction'
-import keys from 'lodash/keys'
-import map from 'lodash/map'
-import orderBy from 'lodash/orderBy'
-import pickBy from 'lodash/pickBy'
-import size from 'lodash/size'
-import slice from 'lodash/slice'
 import { createSelector as create } from 'reselect'
+import {
+  filter,
+  find,
+  forEach,
+  groupBy,
+  isArray,
+  isArrayLike,
+  isFunction,
+  keys,
+  map,
+  orderBy,
+  pickBy,
+  size,
+  slice
+} from 'lodash'
 
 import invoke from './invoke'
 import shallowEqual from './shallow-equal'
@@ -126,9 +129,9 @@ export const createCounter = (collection, predicate) =>
 //
 // Should only be used with a reasonable number of properties.
 export const createPicker = (object, props) =>
-  _createCollectionWrapper(
-    _create2(
-      object, props,
+  _create2(
+    object, props,
+    _createCollectionWrapper(
       (object, props) => {
         const values = {}
         forEach(props, prop => {
@@ -191,6 +194,13 @@ export const createSort = (
   order = 'asc'
 ) => _create2(collection, getter, order, orderBy)
 
+export const createSumBy = (itemsSelector, iterateeSelector) =>
+  _create2(
+    itemsSelector,
+    iterateeSelector,
+    (items, iteratee) => map(items, iteratee).reduce(add, 0)
+  )
+
 export const createTop = (collection, iteratee, n) =>
   _create2(
     collection,
@@ -347,7 +357,7 @@ export const createSortForType = invoke(() => {
   return (type, collection) => createSort(
     collection,
     autoSelector(type, getIteratees),
-    autoSelector(type, getOrders),
+    autoSelector(type, getOrders)
   )
 })
 
@@ -448,6 +458,24 @@ export const createGetTags = collectionSelectors => {
   return _extendCollectionSelector(getTags, 'tag')
 }
 
+export const createGetVmLastShutdownTime = (getVmId = (_, {vm}) => vm != null ? vm.id : undefined) => create(
+  getVmId,
+  createGetObjectsOfType('message'),
+  (vmId, messages) => {
+    let max = null
+    forEach(messages, message => {
+      if (
+        message.$object === vmId &&
+        message.name === 'VM_SHUTDOWN' &&
+        (max === null || message.time > max)
+      ) {
+        max = message.time
+      }
+    })
+    return max
+  }
+)
+
 export const createGetObjectMessages = objectSelector =>
   createGetObjectsOfType('message').filter(
     create(
@@ -463,9 +491,10 @@ export const createGetObjectMessages = objectSelector =>
 export const getObject = createGetObject((_, id) => id)
 
 export const createDoesHostNeedRestart = hostSelector => {
-  // Returns the first patch of the host which requires it to be
-  // restarted.
-  const restartPoolPatch = createGetObjectsOfType('pool_patch').pick(
+  // XS < 7.1
+  const patchRequiresReboot = createGetObjectsOfType('pool_patch').pick(
+    // Returns the first patch of the host which requires it to be
+    // restarted.
     create(
       createGetObjectsOfType('host_patch').pick(
         (state, props) => {
@@ -485,7 +514,11 @@ export const createDoesHostNeedRestart = hostSelector => {
     action === 'restartHost' || action === 'restartXapi'
   ) ])
 
-  return (state, props) => restartPoolPatch(state, props) !== undefined
+  return create(
+    hostSelector,
+    (...args) => args,
+    (host, args) => host.rebootRequired || !!patchRequiresReboot(...args)
+  )
 }
 
 export const createGetHostMetrics = hostSelector =>
@@ -509,3 +542,17 @@ export const createGetHostMetrics = hostSelector =>
       }
     )
   )
+
+export const createGetVmDisks = vmSelector =>
+  createGetObjectsOfType('VDI').pick(
+    create(
+      createGetObjectsOfType('VBD').pick(
+        (state, props) => vmSelector(state, props).$VBDs
+      ),
+      _createCollectionWrapper(vbds => map(vbds, vbd =>
+        vbd.is_cd_drive
+          ? undefined
+          : vbd.VDI
+      ))
+    )
+  )

src/common/single-line-row.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react'
 
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const SINGLE_LINE_STYLE = { display: 'flex' }
 const COL_STYLE = { marginTop: 'auto', marginBottom: 'auto' }

src/common/sorted-table/index.js

@@ -12,9 +12,10 @@ import DropdownMenu from 'react-bootstrap-4/lib/DropdownMenu' // https://phabric
 import DropdownToggle from 'react-bootstrap-4/lib/DropdownToggle' // https://phabricator.babeljs.io/T6662 so Dropdown.Toggle won't work https://react-bootstrap.github.io/components.html#btn-dropdowns-custom
 import { Portal } from 'react-overlays'
 
+import Button from '../button'
 import Component from '../base-component'
 import Icon from '../icon'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import SingleLineRow from '../single-line-row'
 import { BlockLink } from '../link'
 import { Container, Col } from '../grid'
@@ -32,6 +33,7 @@ import styles from './index.css'
 // ===================================================================
 
 @propTypes({
+  defaultFilter: propTypes.string,
   filters: propTypes.object,
   nFilteredItems: propTypes.number.isRequired,
   nItems: propTypes.number.isRequired,
@@ -74,15 +76,15 @@ class TableFilter extends Component {
             </Dropdown>
           </div>}
         <input
-          type='text'
-          ref='filter'
-          onChange={this._onChange}
           className='form-control'
+          defaultValue={props.defaultFilter}
+          onChange={this._onChange}
+          ref='filter'
         />
         <div className='input-group-btn'>
-          <button className='btn btn-secondary' onClick={this._cleanFilter}>
+          <Button onClick={this._cleanFilter}>
             <Icon icon='clear-search' />
-          </button>
+          </Button>
         </div>
       </div>
     )
@@ -136,19 +138,22 @@ const DEFAULT_ITEMS_PER_PAGE = 10
 
 @propTypes({
   defaultColumn: propTypes.number,
+  defaultFilter: propTypes.string,
   collection: propTypes.oneOfType([
     propTypes.array,
     propTypes.object
   ]).isRequired,
   columns: propTypes.arrayOf(propTypes.shape({
+    component: propTypes.func,
     default: propTypes.bool,
     name: propTypes.node,
-    itemRenderer: propTypes.func.isRequired,
+    itemRenderer: propTypes.func,
     sortCriteria: propTypes.oneOfType([
       propTypes.func,
       propTypes.string
     ]),
-    sortOrder: propTypes.string
+    sortOrder: propTypes.string,
+    textAlign: propTypes.string
   })).isRequired,
   filterContainer: propTypes.func,
   filters: propTypes.object,
@@ -174,7 +179,10 @@ export default class SortedTable extends Component {
       }
     }
 
+    const { defaultFilter } = props
+
     this.state = {
+      filter: defaultFilter !== undefined ? props.filters[defaultFilter] : undefined,
       selectedColumn,
       itemsPerPage: props.itemsPerPage || DEFAULT_ITEMS_PER_PAGE
     }
@@ -190,7 +198,7 @@ export default class SortedTable extends Component {
       createFilter(
         () => this.props.collection,
         createSelector(
-          () => this.state.filter || '',
+          () => this.state.filter,
           createMatcher
         )
       ),
@@ -289,6 +297,7 @@ export default class SortedTable extends Component {
 
     const filterInstance = (
       <TableFilter
+        defaultFilter={state.filter}
         filters={filters}
         nFilteredItems={nFilteredItems}
         nItems={this._getTotalNumberOfItems()}
@@ -316,11 +325,21 @@ export default class SortedTable extends Component {
           </thead>
           <tbody>
             {map(this._getVisibleItems(), (item, i) => {
-              const columns = map(props.columns, (column, key) => (
-                <td key={key} className={column.textAlign && `text-xs-${column.textAlign}`}>
-                  {column.itemRenderer(item, userData)}
+              const columns = map(props.columns, ({
+                component: Component,
+                itemRenderer,
+                textAlign
+              }, key) =>
+                <td
+                  className={textAlign && `text-xs-${textAlign}`}
+                  key={key}
+                >
+                  {Component !== undefined
+                    ? <Component item={item} userData={userData} />
+                    : itemRenderer(item, userData)
+                  }
                 </td>
-              ))
+              )
 
               const { id = i } = item
 

src/common/state-button.js

@@ -2,28 +2,31 @@ import React from 'react'
 import styled from 'styled-components'
 
 import ActionButton from './action-button'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const Button = styled(ActionButton)`
-  background-color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateBg`]}
-  border: 2px solid ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]}
-  color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]}
+  background-color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateBg`]};
+  border: 2px solid ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]};
+  color: ${p => p.theme[`${p.state ? 'enabled' : 'disabled'}StateColor`]};
 `
 
 const StateButton = ({
   disabledHandler,
+  disabledHandlerParam,
   disabledLabel,
   disabledTooltip,
 
   enabledLabel,
   enabledTooltip,
   enabledHandler,
+  enabledHandlerParam,
 
   state,
   ...props
 }) =>
   <Button
     handler={state ? enabledHandler : disabledHandler}
+    handlerParam={state ? enabledHandlerParam : disabledHandlerParam}
     tooltip={state ? enabledTooltip : disabledTooltip}
     {...props}
     icon={state ? 'running' : 'halted'}

src/common/tags.js

@@ -5,7 +5,7 @@ import React from 'react'
 
 import Component from './base-component'
 import Icon from './icon'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 
 const INPUT_STYLE = {
   margin: '2px',

src/common/timezone-picker.js

@@ -5,7 +5,7 @@ import React from 'react'
 
 import _ from './intl'
 import Component from './base-component'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import { getXoServerTimezone } from './xo'
 import { Select } from './form'
 
@@ -56,7 +56,7 @@ export default class TimezonePicker extends Component {
     }
 
     this.setState({
-      timezone: option && option.value || SERVER_TIMEZONE_TAG
+      timezone: (option != null && option.value) || SERVER_TIMEZONE_TAG
     }, () =>
       this.props.onChange(this.state.timezone === SERVER_TIMEZONE_TAG ? null : this.state.timezone)
     )
@@ -81,7 +81,6 @@ export default class TimezonePicker extends Component {
         />
         <div className='pull-right'>
           <ActionButton
-            btnStyle='secondary'
             handler={this._useLocalTime}
             icon='time'
           >

src/common/tooltip/get-position.js

@@ -280,8 +280,8 @@ const getParent = (currentTarget) => {
     currentParent = currentParent.parentElement
   }
 
-  const parentTop = currentParent && currentParent.getBoundingClientRect().top || 0
-  const parentLeft = currentParent && currentParent.getBoundingClientRect().left || 0
+  const parentTop = currentParent && currentParent.getBoundingClientRect().top
+  const parentLeft = currentParent && currentParent.getBoundingClientRect().left
 
   return {parentTop, parentLeft}
 }

src/common/tooltip/index.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom'
 
 import Component from '../base-component'
 import getPosition from './get-position'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 
 import styles from './index.css'
 

src/common/utils.js

@@ -190,7 +190,7 @@ export { default as Debug } from './debug'
 
 // -------------------------------------------------------------------
 
-// Returns the first defined (non-null, non-undefined) value.
+// Returns the first defined (non-undefined) value.
 export const firstDefined = function () {
   const n = arguments.length
   for (let i = 0; i < n; ++i) {
@@ -359,20 +359,6 @@ export const throwFn = error => () => {
   )
 }
 
-// -------------------------------------------------------------------
-
-export function tap (cb) {
-  return this.then(value =>
-    Promise.resolve(cb(value)).then(() => value)
-  )
-}
-
-export function rethrow (cb) {
-  return this.catch(error =>
-    Promise.resolve(cb(error)).then(() => { throw error })
-  )
-}
-
 // ===================================================================
 
 export const resolveResourceSet = resourceSet => {
@@ -537,3 +523,21 @@ export const compareVersions = makeNiceCompare((v1, v2) => {
 
 export const isXosanPack = ({ name }) =>
   startsWith(name, 'XOSAN')
+
+// ===================================================================
+
+export const getCoresPerSocketPossibilities = (maxCoresPerSocket, vCPUs) => {
+  // According to : https://www.citrix.com/blogs/2014/03/11/citrix-xenserver-setting-more-than-one-vcpu-per-vm-to-improve-application-performance-and-server-consolidation-e-g-for-cad3-d-graphical-applications/
+  const maxVCPUs = 16
+
+  const options = []
+  if (maxCoresPerSocket !== undefined && vCPUs !== '') {
+    const ratio = vCPUs / maxVCPUs
+
+    for (let coresPerSocket = maxCoresPerSocket; coresPerSocket >= ratio; coresPerSocket--) {
+      if (vCPUs % coresPerSocket === 0) options.push(coresPerSocket)
+    }
+  }
+
+  return options
+}

src/common/wizard/index.js

@@ -1,18 +1,22 @@
 import classNames from 'classnames'
 import every from 'lodash/every'
-import map from 'lodash/map'
 import React, { Component, cloneElement } from 'react'
 
 import _ from '../intl'
 import Icon from '../icon'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 
 import styles from './index.css'
 
 const Wizard = ({ children }) => {
-  const allDone = every(React.Children.toArray(children), (child) => child.props.done || child.props.summary)
+  const allDone = every(React.Children.toArray(children), child =>
+    child.props.done || child.props.summary
+  )
+
   return <ul className={styles.wizard}>
-    {map(React.Children.toArray(children), (child, key) => cloneElement(child, { allDone, key }))}
+    {React.Children.map(children, (child, key) =>
+      child && cloneElement(child, { allDone, key })
+    )}
   </ul>
 }
 export { Wizard as default }

src/common/xo-json-schema-input/xo-abstract-input.js

@@ -5,7 +5,7 @@ import getEventValue from '../get-event-value'
 
 // ===================================================================
 
-const getId = value => value != null && value.id || value
+const getId = value => (value != null && value.id) || value
 
 export default class XoAbstractInput extends PureComponent {
   _onChange = event => {

src/common/xo-line-chart/index.js

@@ -8,6 +8,7 @@ import {
   find,
   flatten,
   floor,
+  forEach,
   map,
   max,
   size,
@@ -15,8 +16,8 @@ import {
   values
 } from 'lodash'
 
-import propTypes from '../prop-types'
-import { computeArraysSum } from '../xo-stats'
+import propTypes from '../prop-types-decorator'
+import { computeArraysSum, computeArraysAvg } from '../xo-stats'
 import { formatSize } from '../utils'
 
 import styles from './index.css'
@@ -214,6 +215,54 @@ export const PoolCpuLineChart = injectIntl(propTypes({
   )
 }))
 
+export const VmGroupCpuLineChart = injectIntl(propTypes({
+  addSumSeries: propTypes.bool,
+  data: propTypes.object.isRequired,
+  options: propTypes.object
+})(({ addSumSeries, data, options = {}, intl }) => {
+  const firstVmData = data[0]
+  const length = getStatsLength(firstVmData.stats.cpus)
+
+  if (!length) {
+    return templateError
+  }
+
+  const series = map(data, ({ vm, stats }) => ({
+    name: vm,
+    data: computeArraysSum(stats.cpus)
+  }))
+
+  if (addSumSeries) {
+    series.push({
+      name: intl.formatMessage(messages.vmGroupAllVm),
+      data: computeArraysSum(map(series, 'data')),
+      className: styles.dashedLine
+    })
+  }
+
+  const nbCpusByVm = map(data, ({ stats }) => stats.cpus.length)
+
+  return (
+    <ChartistGraph
+      type='Line'
+      data={{
+        series
+      }}
+      options={{
+        ...makeOptions({
+          intl,
+          nValues: length,
+          endTimestamp: firstVmData.endTimestamp,
+          interval: firstVmData.interval,
+          valueTransform: value => `${floor(value)}%`
+        }),
+        high: 100 * (addSumSeries ? sum(nbCpusByVm) : max(nbCpusByVm)),
+        ...options
+      }}
+    />
+  )
+}))
+
 export const MemoryLineChart = injectIntl(propTypes({
   data: propTypes.object.isRequired,
   options: propTypes.object
@@ -302,6 +351,57 @@ export const PoolMemoryLineChart = injectIntl(propTypes({
   )
 }))
 
+export const VmGroupMemoryLineChart = injectIntl(propTypes({
+  addSumSeries: propTypes.bool,
+  data: propTypes.object.isRequired,
+  options: propTypes.object
+})(({ addSumSeries, data, options = {}, intl }) => {
+  const firstVmData = data[0]
+  const {
+    memory,
+    memoryUsed
+  } = firstVmData.stats
+
+  if (!memory || !memoryUsed) {
+    return templateError
+  }
+
+  const series = map(data, ({ vm, stats }) => ({
+    name: vm,
+    data: stats.memoryUsed
+  }))
+
+  if (addSumSeries) {
+    series.push({
+      name: intl.formatMessage(messages.vmGroupAllVm),
+      data: computeArraysSum(map(data, 'stats.memoryUsed')),
+      className: styles.dashedLine
+    })
+  }
+
+  const currentMemoryByHost = map(data, ({ stats }) => stats.memory[stats.memory.length - 1])
+
+  return (
+    <ChartistGraph
+      type='Line'
+      data={{
+        series
+      }}
+      options={{
+        ...makeOptions({
+          intl,
+          nValues: firstVmData.stats.memoryUsed.length,
+          endTimestamp: firstVmData.endTimestamp,
+          interval: firstVmData.interval,
+          valueTransform: formatSize
+        }),
+        high: addSumSeries ? sum(currentMemoryByHost) : max(currentMemoryByHost),
+        ...options
+      }}
+    />
+  )
+}))
+
 export const XvdLineChart = injectIntl(propTypes({
   addSumSeries: propTypes.bool,
   data: propTypes.object.isRequired,
@@ -334,6 +434,60 @@ export const XvdLineChart = injectIntl(propTypes({
   )
 }))
 
+export const VmGroupXvdLineChart = injectIntl(propTypes({
+  addSumSeries: propTypes.bool,
+  data: propTypes.object.isRequired,
+  options: propTypes.object
+})(({ addSumSeries, data, options = {}, intl }) => {
+  const firstVmData = data[0]
+  const {
+    memory,
+    memoryUsed
+  } = firstVmData.stats
+
+  if (!memory || !memoryUsed) {
+    return templateError
+  }
+
+  const series = flatten(map(data, ({ stats, vm }) =>
+    map(stats.xvds, (xvd, key) => {
+      return {
+        name: `${vm} (${key})`,
+        data: computeArraysAvg(stats.xvds[key])
+      }
+    })
+  ))
+
+  const datas = []
+  forEach(series, ({ data }) => datas.push(data))
+  if (addSumSeries) {
+    series.push({
+      name: intl.formatMessage(messages.vmGroupAllVm),
+      data: computeArraysSum(datas),
+      className: styles.dashedLine
+    })
+  }
+
+  return (
+    <ChartistGraph
+      type='Line'
+      data={{
+        series
+      }}
+      options={{
+        ...makeOptions({
+          intl,
+          nValues: firstVmData.stats.xvds.r.length,
+          endTimestamp: data.endTimestamp,
+          interval: data.interval,
+          valueTransform: formatSize
+        }),
+        ...options
+      }}
+    />
+  )
+}))
+
 export const VifLineChart = injectIntl(propTypes({
   addSumSeries: propTypes.bool,
   data: propTypes.object.isRequired,
@@ -443,6 +597,48 @@ export const PoolPifLineChart = injectIntl(propTypes({
   )
 }))
 
+export const VmGroupVifLineChart = injectIntl(propTypes({
+  addSumSeries: propTypes.bool,
+  data: propTypes.object.isRequired,
+  options: propTypes.object
+})(({ addSumSeries, data, options = {}, intl }) => {
+  const firstVmData = data[0]
+  const length = firstVmData.stats && getStatsLength(firstVmData.stats.vifs.rx)
+
+  if (!length) {
+    return templateError
+  }
+  const series = addSumSeries
+      ? map(ios, io => ({
+        name: `${intl.formatMessage(messages.vmGroupAllVm)} (${io})`,
+        data: computeArraysSum(map(data, ({ stats }) => computeArraysSum(stats.vifs[io])))
+      }))
+      : flatten(map(data, ({ stats, vm }) =>
+        map(ios, io => ({
+          name: `${vm} (${io})`,
+          data: computeArraysSum(stats.vifs[io])
+        }))
+      ))
+  return (
+    <ChartistGraph
+      type='Line'
+      data={{
+        series
+      }}
+      options={{
+        ...makeOptions({
+          intl,
+          nValues: length,
+          endTimestamp: firstVmData.endTimestamp,
+          interval: firstVmData.interval,
+          valueTransform: formatSize
+        }),
+        ...options
+      }}
+    />
+  )
+}))
+
 export const LoadLineChart = injectIntl(propTypes({
   data: propTypes.object.isRequired,
   options: propTypes.object

src/common/xo-parallel-chart.js

@@ -6,7 +6,7 @@ import map from 'lodash/map'
 import times from 'lodash/times'
 
 import Component from './base-component'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import { setStyles } from './d3-utils'
 
 // ===================================================================

src/common/xo-sparklines.js

@@ -4,7 +4,7 @@ import {
   SparklinesLine
 } from 'react-sparklines'
 
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import {
   computeArraysAvg,
   computeObjectsAvg

src/common/xo-week-charts/index.js

@@ -5,7 +5,7 @@ import map from 'lodash/map'
 
 import Component from '../base-component'
 import _ from '../intl'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import { Toggle } from '../form'
 import { setStyles } from '../d3-utils'
 import {
@@ -381,7 +381,7 @@ export default class XoWeekCharts extends Component {
           <p className='mt-1'>
             {_('weeklyChartsScaleInfo')}
             {' '}
-            <Toggle iconSize={1} icon='scale' className='btn btn-secondary' onChange={this._updateScale} />
+            <Toggle iconSize={1} icon='scale' onChange={this._updateScale} />
           </p>
         </div>
         <div

src/common/xo-week-heatmap/index.js

@@ -13,7 +13,7 @@ import { FormattedTime } from 'react-intl'
 
 import _ from '../intl'
 import Component from '../base-component'
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import Tooltip from '../tooltip'
 
 import styles from './index.css'

src/common/xo/add-host-modal/index.js

@@ -1,12 +1,16 @@
 import _ from 'intl'
 import BaseComponent from 'base-component'
+import Icon from 'icon'
 import React from 'react'
 import SingleLineRow from 'single-line-row'
 import { Col } from 'grid'
 import { connectStore } from 'utils'
-import { createCollectionWrapper, createGetObjectsOfType, createSelector } from 'selectors'
-import { forEach } from 'lodash'
+import { createCollectionWrapper, createGetObjectsOfType, createSelector, createGetObject } from 'selectors'
 import { SelectHost } from 'select-objects'
+import {
+  differenceBy,
+  forEach
+} from 'lodash'
 
 @connectStore(() => ({
   singleHosts: createSelector(
@@ -30,10 +34,20 @@ import { SelectHost } from 'select-objects'
       })
       return singleHosts
     })
+  ),
+  poolMasterPatches: createSelector(
+    createGetObject(
+      (_, props) => props.pool.master
+    ),
+    ({ patches }) => patches
   )
 }), { withRef: true })
 export default class AddHostModal extends BaseComponent {
   get value () {
+    if (process.env.XOA_PLAN < 2 && this.state.nMissingPatches) {
+      return {}
+    }
+
     return this.state
   }
 
@@ -42,18 +56,40 @@ export default class AddHostModal extends BaseComponent {
     singleHosts => host => singleHosts[host.id]
   )
 
+  _onChangeHost = host => {
+    this.setState({
+      host,
+      nMissingPatches: host
+       ? differenceBy(this.props.poolMasterPatches, host.patches, 'name').length
+       : undefined
+    })
+  }
+
   render () {
+    const { nMissingPatches } = this.state
+
     return <div>
       <SingleLineRow>
         <Col size={6}>{_('addHostSelectHost')}</Col>
         <Col size={6}>
           <SelectHost
-            onChange={this.linkState('host')}
+            onChange={this._onChangeHost}
             predicate={this._getHostPredicate()}
             value={this.state.host}
           />
         </Col>
       </SingleLineRow>
+      <br />
+      {nMissingPatches > 0 && <SingleLineRow>
+        <Col>
+          <span className='text-danger'>
+            <Icon icon='error' /> {process.env.XOA_PLAN > 1
+              ? _('hostNeedsPatchUpdate', { patches: nMissingPatches })
+              : _('hostNeedsPatchUpdateNoInstall')
+            }
+          </span>
+        </Col>
+      </SingleLineRow>}
     </div>
   }
 }

src/common/xo/add-user-filter-modal/index.js

@@ -5,7 +5,7 @@ import * as FormGrid from '../../form-grid'
 import _ from '../../intl'
 import Combobox from '../../combobox'
 import Component from '../../base-component'
-import propTypes from '../../prop-types'
+import propTypes from '../../prop-types-decorator'
 import { createSelector } from '../../selectors'
 
 @propTypes({

src/common/xo/index.js

@@ -15,16 +15,18 @@ import sortBy from 'lodash/sortBy'
 import throttle from 'lodash/throttle'
 import Xo from 'xo-lib'
 import { createBackoff } from 'jsonrpc-websocket-client'
-import { noHostsAvailable } from 'xo-common/api-errors'
-import { reflect } from 'promise-toolbox'
+import { lastly, reflect, tap } from 'promise-toolbox'
+import { forbiddenOperation, noHostsAvailable } from 'xo-common/api-errors'
 import { resolve } from 'url'
 
 import _ from '../intl'
 import invoke from '../invoke'
 import logError from '../log-error'
-import { alert, confirm } from '../modal'
+import store from 'store'
+import { getObject } from 'selectors'
+import { alert, chooseAction, confirm } from '../modal'
 import { error, info, success } from '../notification'
-import { noop, rethrow, tap, resolveId, resolveIds } from '../utils'
+import { noop, resolveId, resolveIds } from '../utils'
 import {
   connected,
   disconnected,
@@ -41,6 +43,10 @@ export const XEN_DEFAULT_CPU_CAP = 0
 
 // ===================================================================
 
+export const XEN_VIDEORAM_VALUES = [1, 2, 4, 8, 16]
+
+// ===================================================================
+
 export const isSrWritable = sr => sr && sr.content_type !== 'iso' && sr.size > 0
 export const isSrShared = sr => sr && sr.$PBDs.length > 1
 export const isVmRunning = vm => vm && vm.power_state === 'Running'
@@ -86,7 +92,7 @@ const _call = (method, params) => {
   let promise = _signIn.then(() => xo.call(method, params))
 
   if (process.env.NODE_ENV !== 'production') {
-    promise = promise::rethrow(error => {
+    promise = promise::tap(null, error => {
       console.error('XO error', {
         method,
         params,
@@ -269,6 +275,8 @@ export const subscribeIpPools = createSubscription(() => _call('ipPool.getAll'))
 
 export const subscribeResourceCatalog = createSubscription(() => _call('cloud.getResourceCatalog'))
 
+export const subscribeVmGroups = createSubscription(() => _call('vmGroup.get'))
+
 const xosanSubscriptions = {}
 export const subscribeIsInstallingXosan = (pool, cb) => {
   const poolId = resolveId(pool)
@@ -280,6 +288,28 @@ export const subscribeIsInstallingXosan = (pool, cb) => {
   return xosanSubscriptions[poolId](cb)
 }
 
+const missingPatchesByHost = {}
+export const subscribeHostMissingPatches = (host, cb) => {
+  const hostId = resolveId(host)
+
+  if (missingPatchesByHost[hostId] == null) {
+    missingPatchesByHost[hostId] = createSubscription(() => _call('host.listMissingPatches', { host: hostId }))
+  }
+
+  return missingPatchesByHost[hostId](cb)
+}
+subscribeHostMissingPatches.forceRefresh = host => {
+  if (host === undefined) {
+    forEach(missingPatchesByHost, subscription => subscription.forceRefresh())
+    return
+  }
+
+  const subscription = missingPatchesByHost[resolveId(host)]
+  if (subscription !== undefined) {
+    subscription.forceRefresh()
+  }
+}
+
 // System ============================================================
 
 export const apiMethods = _call('system.getMethodsInfo')
@@ -308,8 +338,9 @@ export const exportConfig = () => (
 
 export const addServer = (host, username, password, label) => (
   _call('server.add', { host, label, password, username })::tap(
-    subscribeServers.forceRefresh
-  )::rethrow(() => error(_('serverError'), _('serverAddFailed')))
+    subscribeServers.forceRefresh,
+    () => error(_('serverError'), _('serverAddFailed'))
+  )
 )
 
 export const editServer = (server, props) => (
@@ -319,7 +350,7 @@ export const editServer = (server, props) => (
 )
 
 export const connectServer = server => (
-  _call('server.connect', { id: resolveId(server) })::tap(
+  _call('server.connect', { id: resolveId(server) })::lastly(
     subscribeServers.forceRefresh
   )
 )
@@ -342,10 +373,11 @@ export const editPool = (pool, props) => (
   _call('pool.set', { id: resolveId(pool), ...props })
 )
 
-import AddHostModalBody from './add-host-modal'
+import AddHostModalBody from './add-host-modal' // eslint-disable-line import/first
 export const addHostToPool = (pool, host) => {
   if (host) {
     return confirm({
+      icon: 'add',
       title: _('addHostModalTitle'),
       body: _('addHostModalMessage', { pool: pool.name_label, host: host.name_label })
     }).then(() =>
@@ -354,6 +386,7 @@ export const addHostToPool = (pool, host) => {
   }
 
   return confirm({
+    icon: 'add',
     title: _('addHostModalTitle'),
     body: <AddHostModalBody pool={pool} />
   }).then(
@@ -362,7 +395,13 @@ export const addHostToPool = (pool, host) => {
         error(_('addHostNoHost'), _('addHostNoHostMessage'))
         return
       }
-      _call('pool.mergeInto', { source: params.host.$pool, target: pool.id, force: true })
+      return _call('pool.mergeInto', { source: params.host.$pool, target: pool.id, force: true }).catch(error => {
+        if (error.code !== 'HOSTS_NOT_HOMOGENEOUS') {
+          throw error
+        }
+
+        error(_('addHostErrorTitle'), _('addHostNotHomogeneousErrorMessage'))
+      })
     },
     noop
   )
@@ -436,7 +475,7 @@ export const restartHostsAgents = hosts => {
     title: _('restartHostsAgentsModalTitle', { nHosts }),
     body: _('restartHostsAgentsModalMessage', { nHosts })
   }).then(
-    () => map(hosts, restartHostAgent),
+    () => Promise.all(map(hosts, restartHostAgent)),
     noop
   )
 }
@@ -494,15 +533,21 @@ export const emergencyShutdownHosts = hosts => {
 }
 
 export const installHostPatch = (host, { uuid }) => (
-  _call('host.installPatch', { host: resolveId(host), patch: uuid })
+  _call('host.installPatch', { host: resolveId(host), patch: uuid })::tap(
+    () => subscribeHostMissingPatches.forceRefresh(host)
+  )
 )
 
 export const installAllHostPatches = host => (
-  _call('host.installAllPatches', { host: resolveId(host) })
+  _call('host.installAllPatches', { host: resolveId(host) })::tap(
+    () => subscribeHostMissingPatches.forceRefresh(host)
+  )
 )
 
 export const installAllPatchesOnPool = pool => (
-  _call('pool.installAllPatches', { pool: resolveId(pool) })
+  _call('pool.installAllPatches', { pool: resolveId(pool) })::tap(
+    () => subscribeHostMissingPatches.forceRefresh()
+  )
 )
 
 export const installSupplementalPack = (host, file) => {
@@ -567,8 +612,38 @@ export const unpauseContainer = (vm, container) => (
 
 // VM ----------------------------------------------------------------
 
+const chooseActionToUnblockForbiddenStartVm = props => (
+  chooseAction({
+    icon: 'alarm',
+    buttons: [
+      { label: _('cloneAndStartVM'), value: 'clone', btnStyle: 'success' },
+      { label: _('forceStartVm'), value: 'force', btnStyle: 'danger' }
+    ],
+    ...props
+  })
+)
+
+const cloneAndStartVM = async vm => (
+  _call('vm.start', { id: await cloneVm(vm) })
+)
+
 export const startVm = vm => (
-  _call('vm.start', { id: resolveId(vm) })
+  _call('vm.start', { id: resolveId(vm) }).catch(async reason => {
+    if (!forbiddenOperation.is(reason)) {
+      throw reason
+    }
+
+    const choice = await chooseActionToUnblockForbiddenStartVm({
+      body: _('blockedStartVmModalMessage'),
+      title: _('forceStartVmModalTitle')
+    })
+
+    if (choice === 'clone') {
+      return cloneAndStartVM(vm)
+    }
+
+    return _call('vm.start', { id: resolveId(vm), force: true })
+  })
 )
 
 export const startVms = vms => (
@@ -576,7 +651,52 @@ export const startVms = vms => (
     title: _('startVmsModalTitle', { vms: vms.length }),
     body: _('startVmsModalMessage', { vms: vms.length })
   }).then(
-    () => map(vms, vmId => startVm({ id: vmId })),
+    async () => {
+      const forbiddenStart = []
+      let nErrors = 0
+
+      await Promise.all(map(
+        vms,
+        id => _call('vm.start', { id }).catch(reason => {
+          if (forbiddenOperation.is(reason)) {
+            forbiddenStart.push(id)
+          } else {
+            nErrors++
+          }
+        })
+      ))
+
+      if (forbiddenStart.length === 0) {
+        if (nErrors === 0) {
+          return
+        }
+
+        return error(_('failedVmsErrorTitle'), _('failedVmsErrorMessage', {nVms: nErrors}))
+      }
+
+      const choice = await chooseActionToUnblockForbiddenStartVm({
+        body: _('blockedStartVmsModalMessage', {nVms: forbiddenStart.length}),
+        title: _('forceStartVmModalTitle')
+      }).catch(noop)
+
+      if (nErrors !== 0) {
+        error(_('failedVmsErrorTitle'), _('failedVmsErrorMessage', {nVms: nErrors}))
+      }
+
+      if (choice === 'clone') {
+        return Promise.all(map(
+          forbiddenStart,
+          async id => cloneAndStartVM(getObject(store.getState(), id))
+        ))
+      }
+
+      if (choice === 'force') {
+        return Promise.all(map(
+          forbiddenStart,
+          id => _call('vm.start', { id, force: true })
+        ))
+      }
+    },
     noop
   )
 )
@@ -643,7 +763,7 @@ export const cloneVm = ({ id, name_label: nameLabel }, fullCopy = false) => (
   })
 )
 
-import CopyVmModalBody from './copy-vm-modal'
+import CopyVmModalBody from './copy-vm-modal' // eslint-disable-line import/first
 export const copyVm = (vm, sr, name, compress) => {
   if (sr) {
     return confirm({
@@ -667,7 +787,7 @@ export const copyVm = (vm, sr, name, compress) => {
   }
 }
 
-import CopyVmsModalBody from './copy-vms-modal'
+import CopyVmsModalBody from './copy-vms-modal' // eslint-disable-line import/first
 export const copyVms = vms => {
   const _vms = resolveIds(vms)
   return confirm({
@@ -685,7 +805,7 @@ export const copyVms = vms => {
         sr
       } = params
       Promise.all(map(_vms, (vm, index) =>
-        _call('vm.copy', { vm, sr, compress, name: names[index] }),
+        _call('vm.copy', { vm, sr, compress, name: names[index] })
       ))
     },
     noop
@@ -739,7 +859,7 @@ export const deleteSnapshot = vm => (
   )
 )
 
-import MigrateVmModalBody from './migrate-vm-modal'
+import MigrateVmModalBody from './migrate-vm-modal' // eslint-disable-line import/first
 export const migrateVm = (vm, host) => (
   confirm({
     title: _('migrateVmModalTitle'),
@@ -755,7 +875,7 @@ export const migrateVm = (vm, host) => (
   )
 )
 
-import MigrateVmsModalBody from './migrate-vms-modal'
+import MigrateVmsModalBody from './migrate-vms-modal' // eslint-disable-line import/first
 export const migrateVms = vms => (
   confirm({
     title: _('migrateVmModalTitle'),
@@ -838,7 +958,7 @@ export const importDeltaBackup = ({ remote, file, sr }) => (
   _call('vm.importDeltaBackup', resolveIds({ remote, filePath: file, sr }))
 )
 
-import RevertSnapshotModalBody from './revert-snapshot-modal'
+import RevertSnapshotModalBody from './revert-snapshot-modal' // eslint-disable-line import/first
 export const revertSnapshot = vm => (
   confirm({
     title: _('revertVmModalTitle'),
@@ -911,12 +1031,16 @@ export const attachDiskToVm = (vdi, vm, { bootable, mode, position }) => (
   _call('vm.attachDisk', {
     bootable,
     mode,
-    position: position && String(position) || undefined,
+    position: (position && String(position)) || undefined,
     vdi: resolveId(vdi),
     vm: resolveId(vm)
   })
 )
 
+export const removeAppliance = vm => {
+  _call('vm.removeAppliance', { id: resolveId(vm) })
+}
+
 // DISK ---------------------------------------------------------------
 
 export const createDisk = (name, size, sr) => (
@@ -960,7 +1084,7 @@ export const migrateVdi = (vdi, sr) => (
   _call('vdi.migrate', { id: resolveId(vdi), sr_id: resolveId(sr) })
 )
 
-// VDB ---------------------------------------------------------------
+// VBD ---------------------------------------------------------------
 
 export const connectVbd = vbd => (
   _call('vbd.connect', { id: resolveId(vbd) })
@@ -1010,7 +1134,7 @@ export const editNetwork = (network, props) => (
   _call('network.set', { ...props, id: resolveId(network) })
 )
 
-import CreateNetworkModalBody from './create-network-modal'
+import CreateNetworkModalBody from './create-network-modal' // eslint-disable-line import/first
 export const createNetwork = container => (
   confirm({
     icon: 'network',
@@ -1030,7 +1154,7 @@ export const createNetwork = container => (
 export const getBondModes = () =>
   _call('network.getBondModes')
 
-import CreateBondedNetworkModalBody from './create-bonded-network-modal'
+import CreateBondedNetworkModalBody from './create-bonded-network-modal' // eslint-disable-line import/first
 export const createBondedNetwork = container => (
   confirm({
     icon: 'network',
@@ -1319,17 +1443,15 @@ export const getSchedule = id => (
 
 export const loadPlugin = async id => (
   _call('plugin.load', { id })::tap(
-    subscribePlugins.forceRefresh
-  )::rethrow(
-    err => error(_('pluginError'), err && err.message || _('unknownPluginError'))
+    subscribePlugins.forceRefresh,
+    err => error(_('pluginError'), (err && err.message) || _('unknownPluginError'))
   )
 )
 
 export const unloadPlugin = id => (
   _call('plugin.unload', { id })::tap(
-    subscribePlugins.forceRefresh
-  )::rethrow(
-    err => error(_('pluginError'), err && err.message || _('unknownPluginError'))
+    subscribePlugins.forceRefresh,
+    err => error(_('pluginError'), (err && err.message) || _('unknownPluginError'))
   )
 )
 
@@ -1350,8 +1472,7 @@ export const configurePlugin = (id, configuration) =>
     () => {
       info(_('pluginConfigurationSuccess'), _('pluginConfigurationChanges'))
       subscribePlugins.forceRefresh()
-    }
-  )::rethrow(
+    },
     err => error(_('pluginError'), JSON.stringify(err.data) || _('unknownPluginError'))
   )
 
@@ -1399,7 +1520,8 @@ export const recomputeResourceSetsLimits = () => (
 // Remote ------------------------------------------------------------
 
 export const getRemote = remote => (
-  _call('remote.get', resolveIds({ id: remote }))::rethrow(
+  _call('remote.get', resolveIds({ id: remote }))::tap(
+    null,
     err => error(_('getRemote'), err.message || String(err))
   )
 )
@@ -1436,20 +1558,21 @@ export const editRemote = (remote, { name, url }) => (
 
 export const listRemote = remote => (
   _call('remote.list', resolveIds({ id: remote }))::tap(
-    subscribeRemotes.forceRefresh
-  )::rethrow(
+    subscribeRemotes.forceRefresh,
     err => error(_('listRemote'), err.message || String(err))
   )
 )
 
 export const listRemoteBackups = remote => (
-  _call('backup.list', resolveIds({ remote }))::rethrow(
+  _call('backup.list', resolveIds({ remote }))::tap(
+    null,
     err => error(_('listRemote'), err.message || String(err))
   )
 )
 
 export const testRemote = remote => (
-  _call('remote.test', resolveIds({ id: remote }))::rethrow(
+  _call('remote.test', resolveIds({ id: remote }))::tap(
+    null,
     err => error(_('testRemote'), err.message || String(err))
   )
 )
@@ -1556,16 +1679,14 @@ export const deleteApiLog = id => (
 
 export const addAcl = ({ subject, object, action }) => (
   _call('acl.add', resolveIds({ subject, object, action }))::tap(
-    subscribeAcls.forceRefresh
-  )::rethrow(
+    subscribeAcls.forceRefresh,
     err => error('Add ACL', err.message || String(err))
   )
 )
 
 export const removeAcl = ({ subject, object, action }) => (
   _call('acl.remove', resolveIds({ subject, object, action }))::tap(
-    subscribeAcls.forceRefresh
-  )::rethrow(
+    subscribeAcls.forceRefresh,
     err => error('Remove ACL', err.message || String(err))
   )
 )
@@ -1580,14 +1701,15 @@ export const editAcl = (
 ) => (
   _call('acl.remove', resolveIds({ subject, object, action }))
     .then(() => _call('acl.add', resolveIds({ subject: newSubject, object: newObject, action: newAction })))
-    ::tap(subscribeAcls.forceRefresh)
-    ::rethrow(err => error('Edit ACL', err.message || String(err)))
+    ::tap(
+      subscribeAcls.forceRefresh,
+      err => error('Edit ACL', err.message || String(err))
+    )
 )
 
 export const createGroup = name => (
   _call('group.create', { name })::tap(
-    subscribeGroups.forceRefresh
-  ):: rethrow(
+    subscribeGroups.forceRefresh,
     err => error(_('createGroup'), err.message || String(err))
   )
 )
@@ -1598,35 +1720,35 @@ export const setGroupName = (group, name) => (
   )
 )
 
-export const deleteGroup = group => (
+export const deleteGroup = group =>
   confirm({
     title: _('deleteGroup'),
     body: <p>{_('deleteGroupConfirm')}</p>
-  }).then(() => _call('group.delete', resolveIds({ id: group })))
-    ::tap(subscribeGroups.forceRefresh)
-    ::rethrow(err => error(_('deleteGroup'), err.message || String(err)))
-)
+  }).then(() =>
+    _call('group.delete', resolveIds({ id: group }))::tap(
+      subscribeGroups.forceRefresh,
+      err => error(_('deleteGroup'), err.message || String(err))
+    ),
+    noop
+  )
 
 export const removeUserFromGroup = (user, group) => (
   _call('group.removeUser', resolveIds({ id: group, userId: user }))::tap(
-    subscribeGroups.forceRefresh
-  )::rethrow(
+    subscribeGroups.forceRefresh,
     err => error(_('removeUserFromGroup'), err.message || String(err))
   )
 )
 
 export const addUserToGroup = (user, group) => (
   _call('group.addUser', resolveIds({ id: group, userId: user }))::tap(
-    subscribeGroups.forceRefresh
-  )::rethrow(
+    subscribeGroups.forceRefresh,
     err => error('Add User', err.message || String(err))
   )
 )
 
 export const createUser = (email, password, permission) => (
   _call('user.create', { email, password, permission })::tap(
-    subscribeUsers.forceRefresh
-  )::rethrow(
+    subscribeUsers.forceRefresh,
     err => error('Create user', err.message || String(err))
   )
 )
@@ -1636,9 +1758,10 @@ export const deleteUser = user => (
     title: _('deleteUser'),
     body: <p>{_('deleteUserConfirm')}</p>
   }).then(() =>
-    _call('user.delete', { id: resolveId(user) })
-      ::tap(subscribeUsers.forceRefresh)
-      ::rethrow(err => error(_('deleteUser'), err.message || String(err)))
+    _call('user.delete', { id: resolveId(user) })::tap(
+      subscribeUsers.forceRefresh,
+      err => error(_('deleteUser'), err.message || String(err))
+    )
   )
 )
 
@@ -1667,10 +1790,10 @@ const _setUserPreferences = preferences => (
   )
 )
 
-import NewSshKeyModalBody from './new-ssh-key-modal'
+import NewSshKeyModalBody from './new-ssh-key-modal' // eslint-disable-line import/first
 export const addSshKey = key => {
   const { preferences } = xo.user
-  const otherKeys = preferences && preferences.sshKeys || []
+  const otherKeys = (preferences && preferences.sshKeys) || []
   if (key) {
     return _setUserPreferences({ sshKeys: [
       ...otherKeys,
@@ -1713,7 +1836,7 @@ export const deleteSshKey = key => (
 
 // User filters --------------------------------------------------
 
-import AddUserFilterModalBody from './add-user-filter-modal'
+import AddUserFilterModalBody from './add-user-filter-modal' // eslint-disable-line import/first
 export const addCustomFilter = (type, value) => {
   const { user } = xo
   return confirm({
@@ -1823,7 +1946,7 @@ export const createXosanSR = ({ template, pif, vlan, srs, glusterType, redundanc
 
 export const computeXosanPossibleOptions = lvmSrs => _call('xosan.computeXosanPossibleOptions', { lvmSrs })
 
-import InstallXosanPackModal from './install-xosan-pack-modal'
+import InstallXosanPackModal from './install-xosan-pack-modal' // eslint-disable-line import/first
 export const downloadAndInstallXosanPack = pool =>
   confirm({
     title: _('xosanInstallPackTitle', { pool: pool.name_label }),
@@ -1834,3 +1957,33 @@ export const downloadAndInstallXosanPack = pool =>
   )
 
 export const registerXosan = namespace => _call('cloud.registerResource', { namespace: 'xosan' })
+
+// VM-Group ----------------------------------------------------------------------
+
+export const startVmGroup = vmGroup => {
+  _call('vmGroup.start', { id: resolveId(vmGroup) })
+}
+export const shutdownVmGroup = vmGroup => _call('vmGroup.shutdown', { id: resolveId(vmGroup) })
+export const rebootVmGroup = async vmGroup => {
+  await shutdownVmGroup(vmGroup)
+  await startVmGroup(vmGroup)
+}
+export const editVmGroup = (vmGroup, props) => _call('vmGroup.set', { id: resolveId(vmGroup), ...props })
+export const deleteVmGroup = (vmGroup, vms) =>
+  confirm({
+    title: _('deleteVmGroupModalTitle'),
+    body: _('deleteVmGroupModalMessage')
+  }).then(() => {
+    forEach(vms, vm => removeAppliance(vm))
+    _call('vmGroup.destroy', { id: resolveId(vmGroup) })
+  }, Promise.reject())
+export const createVmGroup = ({ pool, name_label, name_description }) => _call('vmGroup.create', { id: resolveId(pool), name_label, name_description })
+export const startVmGroups = (vmGroupIds) => {
+  forEach(vmGroupIds, id => startVmGroup({id: id}))
+}
+export const shutdownVmGroups = (vmGroupIds) => {
+  forEach(vmGroupIds, id => shutdownVmGroup({id: id}))
+}
+export const rebootVmGroups = (vmGroupIds) => {
+  forEach(vmGroupIds, id => rebootVmGroup({id: id}))
+}

src/common/xoa-updater.js

@@ -240,7 +240,7 @@ class XoaUpdater extends EventEmitter {
         this.registerState = 'error'
       }
     } finally {
-      this.emit('registerState', {state: this.registerState, email: this.token && this.token.registrationEmail || '', error: this.registerError})
+      this.emit('registerState', {state: this.registerState, email: (this.token && this.token.registrationEmail) || '', error: this.registerError})
     }
   }
 
@@ -262,7 +262,7 @@ class XoaUpdater extends EventEmitter {
         this.registerState = 'error'
       }
     } finally {
-      this.emit('registerState', {state: this.registerState, email: this.token && this.token.registrationEmail || '', error: this.registerError})
+      this.emit('registerState', {state: this.registerState, email: (this.token && this.token.registrationEmail) || '', error: this.registerError})
       if (this.registerState === 'registered') {
         this.update()
       }
@@ -351,7 +351,7 @@ class XoaUpdater extends EventEmitter {
   }
 
   log (level, message) {
-    message = message && message.message || String(message)
+    message = (message != null && message.message) || String(message)
     const date = new Date()
     this._log.unshift({
       date: date.toLocaleString(),

src/common/xoa-upgrade.js

@@ -3,7 +3,7 @@ import React from 'react'
 import _ from './intl'
 import Icon from './icon'
 import Link from './link'
-import propTypes from './prop-types'
+import propTypes from './prop-types-decorator'
 import { Card, CardHeader, CardBlock } from './card'
 import { connectStore, getXoaPlan } from './utils'
 import { isAdmin } from 'selectors'

src/icons.scss

@@ -375,6 +375,12 @@
     @extend .xo-status-busy;
   }
 
+  &-disabled {
+    @extend .fa;
+    @extend .fa-circle;
+    @extend .xo-status-busy;
+  }
+
   &-all-connected {
     @extend .fa;
     @extend .fa-circle;
@@ -441,6 +447,11 @@
       @extend .fa-server;
       @extend .text-danger;
     }
+    &-disabled {
+      @extend .fa;
+      @extend .fa-server;
+      @extend .text-warning;
+    }
     &-working {
       @extend .fa;
       @extend .fa-circle;

src/usage.scss

@@ -18,7 +18,7 @@
 }
 
 .usage-element-highlight {
-  background-color: $brand-primary;
+  background-color: $brand-warning;
 }
 
 .usage-element-others {

src/xo-app/backup/file-restore/index.css

@@ -0,0 +1,3 @@
+.listRestoreBackupInfos {
+  list-style-type: none;
+}

src/xo-app/backup/file-restore/index.js

@@ -27,6 +27,7 @@ import {
 } from 'xo'
 
 import RestoreFileModalBody from './restore-file-modal'
+import styles from './index.css'
 
 const VM_COLUMNS = [
   {
@@ -118,9 +119,18 @@ export default class FileRestore extends Component {
       ? <Container>
         <h2>{_('restoreFiles')}</h2>
         {isEmpty(backupInfoByVm)
-          ? _('noBackup')
+          ? <div>
+            <em><Icon icon='info' /> {_('restoreDeltaBackupsInfo')}</em>
+            <div>
+              <a>{_('noBackup')}</a>
+            </div>
+          </div>
           : <div>
-            <em><Icon icon='info' /> {_('restoreBackupsInfo')}</em>
+            <ul className={styles.listRestoreBackupInfos}>
+              <li><em><Icon icon='info' /> {_('restoreBackupsInfo')}</em></li>
+              <li><em><Icon icon='info' /> {_('restoreDeltaBackupsInfo')}</em></li>
+            </ul>
+
             <SortedTable collection={backupInfoByVm} columns={VM_COLUMNS} rowAction={openImportModal} defaultColumn={2} />
           </div>
         }

src/xo-app/backup/file-restore/restore-file-modal.js

@@ -85,7 +85,8 @@ export default class RestoreFileModalBody extends Component {
     return scanFiles(backup.remoteId, disk, path, partition).then(
       rawFiles => this.setState({
         files: formatFilesOptions(rawFiles, path),
-        scanningFiles: false
+        scanningFiles: false,
+        scanFilesError: false
       }),
       error => {
         this.setState({
@@ -104,7 +105,8 @@ export default class RestoreFileModalBody extends Component {
       partition: undefined,
       file: undefined,
       selectedFiles: undefined,
-      scanDiskError: false
+      scanDiskError: false,
+      scanFilesError: false
     })
   }
 
@@ -113,7 +115,8 @@ export default class RestoreFileModalBody extends Component {
       partition: undefined,
       file: undefined,
       selectedFiles: undefined,
-      scanDiskError: false
+      scanDiskError: false,
+      scanFilesError: false
     })
 
     if (!disk) {
@@ -268,7 +271,7 @@ export default class RestoreFileModalBody extends Component {
           value={partition}
         />
       ]}
-      {(partition || disk && !scanDiskError && noPartitions) && [
+      {(partition || (disk && !scanDiskError && noPartitions)) && [
         <br />,
         <Container>
           <Row>
@@ -280,7 +283,7 @@ export default class RestoreFileModalBody extends Component {
             <Col size={2}>
               <span className='pull-right'>
                 <Tooltip content={_('restoreFilesSelectAllFiles')}>
-                  <ActionButton btnStyle='secondary' handler={this._selectAllFolderFiles} icon='add' size='small' />
+                  <ActionButton handler={this._selectAllFolderFiles} icon='add' size='small' />
                 </Tooltip>
               </span>
             </Col>
@@ -322,12 +325,13 @@ export default class RestoreFileModalBody extends Component {
               <Col className='pl-0 pb-1' size={10}>
                 <em>{_('restoreFilesSelectedFiles', { files: selectedFiles.length })}</em>
               </Col>
-              <Col size={2}>
-                <span className='pull-right'>
-                  <Tooltip content={_('restoreFilesUnselectAll')}>
-                    <ActionButton btnStyle='secondary' handler={this._unselectAllFiles} icon='remove' size='small' />
-                  </Tooltip>
-                </span>
+              <Col size={2} className='text-xs-right'>
+                <ActionButton
+                  handler={this._unselectAllFiles}
+                  icon='remove'
+                  size='small'
+                  tooltip={_('restoreFilesUnselectAll')}
+                />
               </Col>
             </Row>
             {map(selectedFiles, file =>
@@ -335,10 +339,8 @@ export default class RestoreFileModalBody extends Component {
                 <Col size={10}>
                   <pre>{file.path}</pre>
                 </Col>
-                <Col size={2}>
-                  <span className='pull-right'>
-                    <ActionButton btnStyle='secondary' handler={this._unselectFile} handlerParam={file} icon='remove' size='small' />
-                  </span>
+                <Col size={2} className='text-xs-right'>
+                  <ActionButton handler={this._unselectFile} handlerParam={file} icon='remove' size='small' />
                 </Col>
               </Row>
             )}

src/xo-app/backup/new/index.js

@@ -1,5 +1,6 @@
 import _ from 'intl'
 import ActionButton from 'action-button'
+import Button from 'button'
 import Component from 'base-component'
 import GenericInput from 'json-schema-input'
 import getEventValue from 'get-event-value'
@@ -131,7 +132,7 @@ const COMMON_SCHEMA = {
     },
     enabled: {
       type: 'boolean',
-      title: _('editBackupReportEnable')
+      title: _('editBackupScheduleEnabled')
     }
   },
   required: [ 'tag', 'vms', '_reportWhen' ]
@@ -189,6 +190,15 @@ const DISASTER_RECOVERY_SCHEMA = {
   properties: {
     ...COMMON_SCHEMA.properties,
     depth: DEPTH_PROPERTY,
+    deleteOldBackupsFirst: {
+      type: 'boolean',
+      title: _('deleteOldBackupsFirst'),
+      description: [
+        'Delete the old backups before copy the vms.',
+        '',
+        'If the backup fails, you will lose your old backups.'
+      ].join('\n')
+    },
     sr: {
       type: 'string',
       'xo:type': 'sr',
@@ -281,6 +291,7 @@ class TimeoutInput extends Component {
     return <input
       {...props}
       onChange={this._onChange}
+      min='1'
       type='number'
       value={value == null ? '' : String(value / 1e3)}
     />
@@ -325,19 +336,22 @@ const constructPattern = ({ not, values } = EMPTY_OBJECT, valueTransform = ident
 export default class New extends Component {
   _getParams = createSelector(
     () => this.props.job,
-    job => {
+    () => this.props.schedule,
+    (job, schedule) => {
       if (!job) {
         return { main: {}, vms: { vms: [] } }
       }
 
       const { items } = job.paramsVector
+      const enabled = schedule != null && schedule.enabled
 
       // legacy backup jobs
       if (items.length === 1) {
-        const { ...main } = items[0].values[0]
-
         return {
-          main,
+          main: {
+            enabled,
+            ...items[0].values[0]
+          },
           vms: { vms: map(items[0].values.slice(1), extractId) }
         }
       }
@@ -348,7 +362,10 @@ export default class New extends Component {
         const { $pool, tags } = pattern
 
         return {
-          main: items[0].values[0],
+          main: {
+            enabled,
+            ...items[0].values[0]
+          },
           vms: {
             $pool: destructPattern($pool),
             power_state: pattern.power_state,
@@ -359,7 +376,10 @@ export default class New extends Component {
 
       // normal backup
       return {
-        main: items[1].values[0],
+        main: {
+          enabled,
+          ...items[1].values[0]
+        },
         vms: { vms: map(items[0].values, extractId) }
       }
     }
@@ -401,7 +421,6 @@ export default class New extends Component {
     const vms = this._getVmsParam()
 
     const job = {
-      ...props.job,
       ...state.job,
 
       type: 'call',
@@ -480,6 +499,7 @@ export default class New extends Component {
       return editSchedule({
         id: props.schedule.id,
         cron: scheduling.cronPattern,
+        enabled,
         timezone: scheduling.timezone
       })
     }
@@ -648,18 +668,19 @@ export default class New extends Component {
                       : <fieldset className='pull-right pt-1'>
                         <ActionButton
                           btnStyle='primary'
-                          className='btn-lg mr-1'
+                          className='mr-1'
                           disabled={!backupInfo}
                           form='form-new-vm-backup'
                           handler={this._handleSubmit}
                           icon='save'
                           redirectOnSuccess='/backup/overview'
+                          size='large'
                         >
                           {_('saveBackupJob')}
                         </ActionButton>
-                        <button type='button' className='btn btn-lg btn-secondary' onClick={this._handleReset}>
+                        <Button onClick={this._handleReset} size='large'>
                           {_('selectTableReset')}
-                        </button>
+                        </Button>
                       </fieldset>)
                 }
                 </Col>

src/xo-app/backup/overview/index.js

@@ -1,5 +1,6 @@
 import _ from 'intl'
 import ActionRowButton from 'action-row-button'
+import ButtonGroup from 'button-group'
 import Component from 'base-component'
 import filter from 'lodash/filter'
 import find from 'lodash/find'
@@ -15,7 +16,6 @@ import SortedTable from 'sorted-table'
 import StateButton from 'state-button'
 import Tooltip from 'tooltip'
 import { addSubscriptions } from 'utils'
-import { ButtonGroup } from 'react-bootstrap-4/lib'
 import { createSelector } from 'selectors'
 import {
   Card,

src/xo-app/dashboard/health/index.js

@@ -1,12 +1,8 @@
 import _ from 'intl'
 import ActionRowButton from 'action-row-button'
 import Component from 'base-component'
-import get from 'lodash/get'
 import Icon from 'icon'
-import isEmpty from 'lodash/isEmpty'
 import Link from 'link'
-import map from 'lodash/map'
-import mapValues from 'lodash/mapValues'
 import SortedTable from 'sorted-table'
 import TabButton from 'tab-button'
 import Tooltip from 'tooltip'
@@ -15,11 +11,26 @@ import React from 'react'
 import xml2js from 'xml2js'
 import { Card, CardHeader, CardBlock } from 'card'
 import { confirm } from 'modal'
-import { deleteMessage, deleteVdi, deleteOrphanedVdis, deleteVm, isSrWritable } from 'xo'
 import { FormattedRelative, FormattedTime } from 'react-intl'
 import { fromCallback } from 'promise-toolbox'
 import { Container, Row, Col } from 'grid'
 import {
+  deleteMessage,
+  deleteOrphanedVdis,
+  deleteVbd,
+  deleteVdi,
+  deleteVm,
+  isSrWritable
+} from 'xo'
+import {
+  flatten,
+  get,
+  isEmpty,
+  map,
+  mapValues
+} from 'lodash'
+import {
+  createCollectionWrapper,
   createGetObject,
   createGetObjectsOfType,
   createSelector
@@ -27,6 +38,7 @@ import {
 import {
   connectStore,
   formatSize,
+  mapPlus,
   noop
 } from 'utils'
 
@@ -102,10 +114,21 @@ const SR_COLUMNS = [
   }
 ]
 
-const VDI_COLUMNS = [
+const ORPHANED_VDI_COLUMNS = [
   {
     name: _('snapshotDate'),
-    itemRenderer: vdi => <span><FormattedTime value={vdi.snapshot_time * 1000} minute='numeric' hour='numeric' day='numeric' month='long' year='numeric' /> (<FormattedRelative value={vdi.snapshot_time * 1000} />)</span>,
+    itemRenderer: vdi => <span>
+      <FormattedTime
+        day='numeric'
+        hour='numeric'
+        minute='numeric'
+        month='long'
+        value={vdi.snapshot_time * 1000}
+        year='numeric'
+      />
+      {' '}
+      (<FormattedRelative value={vdi.snapshot_time * 1000} />)
+    </span>,
     sortCriteria: vdi => vdi.snapshot_time,
     sortOrder: 'desc'
   },
@@ -141,10 +164,58 @@ const VDI_COLUMNS = [
   }
 ]
 
+const CONTROL_DOMAIN_VDI_COLUMNS = [
+  {
+    name: _('vdiNameLabel'),
+    itemRenderer: vdi => vdi && vdi.name_label,
+    sortCriteria: vdi => vdi && vdi.name_label
+  },
+  {
+    name: _('vdiNameDescription'),
+    itemRenderer: vdi => vdi && vdi.name_description,
+    sortCriteria: vdi => vdi && vdi.name_description
+  },
+  {
+    name: _('vdiPool'),
+    itemRenderer: vdi => vdi && vdi.pool && <Link to={`pools/${vdi.pool.id}`}>{vdi.pool.name_label}</Link>,
+    sortCriteria: vdi => vdi && vdi.pool && vdi.pool.name_label
+  },
+  {
+    name: _('vdiSize'),
+    itemRenderer: vdi => vdi && formatSize(vdi.size),
+    sortCriteria: vdi => vdi && vdi.size
+  },
+  {
+    name: _('vdiSr'),
+    itemRenderer: vdi => vdi && vdi.sr && <Link to={`srs/${vdi.sr.id}`}>{vdi.sr.name_label}</Link>,
+    sortCriteria: vdi => vdi && vdi.sr && vdi.sr.name_label
+  },
+  {
+    name: _('vdiAction'),
+    itemRenderer: vdi => vdi && vdi.vbd && <ActionRowButton
+      btnStyle='danger'
+      handler={deleteVbd}
+      handlerParam={vdi.vbd}
+      icon='delete'
+    />
+  }
+]
+
 const VM_COLUMNS = [
   {
     name: _('snapshotDate'),
-    itemRenderer: vm => <span><FormattedTime value={vm.snapshot_time * 1000} minute='numeric' hour='numeric' day='numeric' month='long' year='numeric' /> (<FormattedRelative value={vm.snapshot_time * 1000} />)</span>,
+    itemRenderer: vm => <span>
+      <FormattedTime
+        day='numeric'
+        hour='numeric'
+        minute='numeric'
+        month='long'
+        value={vm.snapshot_time * 1000}
+        year='numeric'
+      />
+      {' '}
+      (<FormattedRelative value={vm.snapshot_time * 1000} />)
+    </span>,
     sortCriteria: vm => vm.snapshot_time,
     sortOrder: 'desc'
   },
@@ -178,9 +249,18 @@ const VM_COLUMNS = [
 const ALARM_COLUMNS = [
   {
     name: _('alarmDate'),
-    itemRenderer: message => (
-      <span><FormattedTime value={message.time * 1000} minute='numeric' hour='numeric' day='numeric' month='long' year='numeric' /> (<FormattedRelative value={message.time * 1000} />)</span>
-    ),
+    itemRenderer: message => <span>
+      <FormattedTime
+        day='numeric'
+        hour='numeric'
+        minute='numeric'
+        month='long'
+        value={message.time * 1000}
+        year='numeric'
+      />
+      {' '}
+      (<FormattedRelative value={message.time * 1000} />)
+    </span>,
     sortCriteria: message => message.time,
     sortOrder: 'desc'
   },
@@ -224,8 +304,40 @@ const ALARM_COLUMNS = [
 
 @connectStore(() => {
   const getOrphanVdiSnapshots = createGetObjectsOfType('VDI-snapshot')
-    .filter([ snapshot => !snapshot.$snapshot_of ])
+    .filter([ _ => !_.$snapshot_of && _.$VBDs.length === 0 ])
     .sort()
+  const getControlDomainVbds = createGetObjectsOfType('VBD')
+    .pick(
+      createSelector(
+        createGetObjectsOfType('VM-controller'),
+        createCollectionWrapper(
+          vmControllers => flatten(map(vmControllers, '$VBDs'))
+        )
+      )
+    )
+    .sort()
+  const getControlDomainVdis = createSelector(
+    getControlDomainVbds,
+    createGetObjectsOfType('VDI'),
+    createGetObjectsOfType('pool'),
+    createGetObjectsOfType('SR'),
+    (vbds, vdis, pools, srs) =>
+      mapPlus(vbds, (vbd, push) => {
+        const vdi = vdis[vbd.VDI]
+
+        if (vdi == null) {
+          return
+        }
+
+        push({
+          ...vdi,
+          pool: pools[vbd.$pool],
+          sr: srs[vdi.$SR],
+          vbd
+        })
+      }
+    )
+  )
   const getOrphanVmSnapshots = createGetObjectsOfType('VM-snapshot')
     .filter([ snapshot => !snapshot.$snapshot_of ])
     .sort()
@@ -241,6 +353,7 @@ const ALARM_COLUMNS = [
 
   return {
     alertMessages: getAlertMessages,
+    controlDomainVdis: getControlDomainVdis,
     userSrs: getUserSrs,
     vdiOrphaned: getOrphanVdiSnapshots,
     vdiSr: getVdiSrs,
@@ -362,7 +475,7 @@ export default class Health extends Component {
                     </Row>
                     <Row>
                       <Col>
-                        <SortedTable collection={this.props.vdiOrphaned} columns={VDI_COLUMNS} />
+                        <SortedTable collection={this.props.vdiOrphaned} columns={ORPHANED_VDI_COLUMNS} />
                       </Col>
                     </Row>
                   </div>
@@ -371,6 +484,21 @@ export default class Health extends Component {
             </Card>
           </Col>
         </Row>
+        <Row>
+          <Col>
+            <Card>
+              <CardHeader>
+                <Icon icon='disk' /> {_('vdisOnControlDomain')}
+              </CardHeader>
+              <CardBlock>
+                {isEmpty(this.props.controlDomainVdis)
+                  ? <p className='text-xs-center'>{_('noControlDomainVdis')}</p>
+                  : <SortedTable collection={this.props.controlDomainVdis} columns={CONTROL_DOMAIN_VDI_COLUMNS} />
+                }
+              </CardBlock>
+            </Card>
+          </Col>
+        </Row>
         <Row>
           <Col>
             <Card>

src/xo-app/dashboard/overview/index.js

@@ -1,16 +1,16 @@
 import _ from 'intl'
+import ButtonGroup from 'button-group'
 import ChartistGraph from 'react-chartist'
 import Component from 'base-component'
 import forEach from 'lodash/forEach'
 import Icon from 'icon'
-import propTypes from 'prop-types'
+import propTypes from 'prop-types-decorator'
 import Link, { BlockLink } from 'link'
 import map from 'lodash/map'
 import HostsPatchesTable from 'hosts-patches-table'
 import React from 'react'
 import size from 'lodash/size'
 import Upgrade from 'xoa-upgrade'
-import { ButtonGroup } from 'react-bootstrap-4/lib'
 import { Card, CardBlock, CardHeader } from 'card'
 import { Container, Row, Col } from 'grid'
 import {
@@ -19,7 +19,8 @@ import {
   createGetObjectsOfType,
   createGetHostMetrics,
   createSelector,
-  createTop
+  createTop,
+  isAdmin
 } from 'selectors'
 import {
   connectStore,
@@ -68,23 +69,19 @@ class PatchesCard extends Component {
 
   const getHostMetrics = createGetHostMetrics(getHosts)
 
-  const userSrs = createTop(
-    createGetObjectsOfType('SR').filter(
-      [ isSrWritable ]
-    ),
-    [ sr => sr.physical_usage / sr.size ],
-    5
+  const writableSrs = createGetObjectsOfType('SR').filter(
+    [ isSrWritable ]
   )
 
   const getSrMetrics = createCollectionWrapper(
     createSelector(
-      userSrs,
-      userSrs => {
+      writableSrs,
+      writableSrs => {
         const metrics = {
           srTotal: 0,
           srUsage: 0
         }
-        forEach(userSrs, sr => {
+        forEach(writableSrs, sr => {
           metrics.srUsage += sr.physical_usage
           metrics.srTotal += sr.size
         })
@@ -136,13 +133,18 @@ class PatchesCard extends Component {
   return {
     hostMetrics: getHostMetrics,
     hosts: getHosts,
+    isAdmin,
     nAlarmMessages: getNumberOfAlarmMessages,
     nHosts: getNumberOfHosts,
     nPools: getNumberOfPools,
     nTasks: getNumberOfTasks,
     nVms: getNumberOfVms,
     srMetrics: getSrMetrics,
-    userSrs: userSrs,
+    topWritableSrs: createTop(
+      writableSrs,
+      [ sr => sr.physical_usage / sr.size ],
+      5
+    ),
     vmMetrics: getVmMetrics
   }
 })
@@ -238,8 +240,8 @@ export default class Overview extends Component {
                     />
                     <p className='text-xs-center'>
                       {_('ofUsage', {
-                        total: `${props.vmMetrics.vcpus} vCPUs`,
-                        usage: `${props.hostMetrics.cpus} CPUs`
+                        total: `${props.hostMetrics.cpus} CPUs`,
+                        usage: `${props.vmMetrics.vcpus} vCPUs`
                       })}
                     </p>
                   </div>
@@ -306,7 +308,10 @@ export default class Overview extends Component {
                 </CardHeader>
                 <CardBlock>
                   <p className={styles.bigCardContent}>
-                    <Link to='/settings/users'>{nUsers}</Link>
+                    {props.isAdmin
+                      ? <Link to='/settings/users'>{nUsers}</Link>
+                      : <p>{nUsers}</p>
+                    }
                   </p>
                 </CardBlock>
               </Card>
@@ -345,8 +350,8 @@ export default class Overview extends Component {
                     <ChartistGraph
                       style={{strokeWidth: '30px'}}
                       data={{
-                        labels: map(props.userSrs, 'name_label'),
-                        series: map(props.userSrs, sr => (sr.physical_usage / sr.size) * 100)
+                        labels: map(props.topWritableSrs, 'name_label'),
+                        series: map(props.topWritableSrs, sr => (sr.physical_usage / sr.size) * 100)
                       }}
                       options={{ showLabel: false, showGrid: false, distributeSeries: true, high: 100 }}
                       type='Bar'

src/xo-app/dashboard/stats/index.js

@@ -5,7 +5,7 @@ import Component from 'base-component'
 import forEach from 'lodash/forEach'
 import Icon from 'icon'
 import map from 'lodash/map'
-import propTypes from 'prop-types'
+import propTypes from 'prop-types-decorator'
 import React from 'react'
 import renderXoItem from 'render-xo-item'
 import sortBy from 'lodash/sortBy'
@@ -305,32 +305,22 @@ class SelectMetric extends Component {
               />
             </div>
             <div className='btn-group mt-1' role='group'>
-              <button
-                className='btn btn-secondary'
-                onClick={this._resetSelection}
-                tooltip={_('dashboardStatsButtonRemoveAll')}
-                type='button'
-              >
-                <Icon icon='remove' />
-              </button>
-              <button
-                className='btn btn-secondary'
-                onClick={this._selectAllHosts}
-                tooltip={_('dashboardStatsButtonAddAllHost')}
-                type='button'
-              >
-                <Icon icon='host' />
-              </button>
-              <button
-                className='btn btn-secondary'
-                onClick={this._selectAllVms}
-                tooltip={_('dashboardStatsButtonAddAllVM')}
-                type='button'
-              >
-                <Icon icon='vm' />
-              </button>
               <ActionButton
-                btnStyle='secondary'
+                handler={this._resetSelection}
+                icon='remove'
+                tooltip={_('dashboardStatsButtonRemoveAll')}
+              />
+              <ActionButton
+                handler={this._selectAllHosts}
+                icon='host'
+                tooltip={_('dashboardStatsButtonAddAllHost')}
+              />
+              <ActionButton
+                handler={this._selectAllVms}
+                icon='vm'
+                tooltip={_('dashboardStatsButtonAddAllVM')}
+              />
+              <ActionButton
                 disabled={!objects.length}
                 handler={this._validSelection}
                 icon='success'

src/xo-app/home/host-item.js

@@ -79,7 +79,7 @@ class MiniStats extends Component {
   }
 }
 
-@connectStore(({
+@connectStore(() => ({
   container: createGetObject((_, props) => props.item.$pool),
   needsRestart: createDoesHostNeedRestart((_, props) => props.item),
   nVms: createGetObjectsOfType('VM').count(
@@ -106,6 +106,7 @@ export default class HostItem extends Component {
 
   render () {
     const { item: host, container, expandAll, selected, nVms } = this.props
+    const toolTipContent = host.power_state === `Running` && !host.enabled ? `disabled` : _(`powerState${host.power_state}`)
     return <div className={styles.item}>
       <BlockLink to={`/hosts/${host.id}`}>
         <SingleLineRow>
@@ -115,13 +116,15 @@ export default class HostItem extends Component {
               &nbsp;&nbsp;
               <Tooltip
                 content={isEmpty(host.current_operations)
-                  ? _(`powerState${host.power_state}`)
-                  : <div>{_(`powerState${host.power_state}`)}{' ('}{map(host.current_operations)[0]}{')'}</div>
+                  ? toolTipContent
+                  : <div>{toolTipContent}{' ('}{map(host.current_operations)[0]}{')'}</div>
                 }
               >
-                {isEmpty(host.current_operations)
-                  ? <Icon icon={`${host.power_state.toLowerCase()}`} />
-                  : <Icon icon='busy' />
+                {!isEmpty(host.current_operations)
+                  ? <Icon icon='busy' />
+                  : (host.power_state === 'Running' && !host.enabled)
+                    ? <Icon icon='disabled' />
+                    : <Icon icon={`${host.power_state.toLowerCase()}`} />
                 }
               </Tooltip>
               &nbsp;&nbsp;

src/xo-app/home/index.js

@@ -2,6 +2,7 @@ import * as ComplexMatcher from 'complex-matcher'
 import * as homeFilters from 'home-filters'
 import _ from 'intl'
 import ActionButton from 'action-button'
+import Button from 'button'
 import CenterPanel from 'center-panel'
 import Component from 'base-component'
 import Icon from 'icon'
@@ -41,12 +42,15 @@ import {
   forgetSrs,
   isSrShared,
   migrateVms,
+  rebootVmGroups,
   reconnectAllHostsSrs,
   rescanSrs,
   restartHosts,
   restartHostsAgents,
   restartVms,
+  shutdownVmGroups,
   snapshotVms,
+  startVmGroups,
   startVms,
   stopHosts,
   stopVms,
@@ -75,7 +79,6 @@ import {
   getUser
 } from 'selectors'
 import {
-  Button,
   DropdownButton,
   MenuItem,
   OverlayTrigger,
@@ -86,6 +89,7 @@ import {
 import styles from './index.css'
 import HostItem from './host-item'
 import PoolItem from './pool-item'
+import VmGroupItem from './vm-group-item'
 import VmItem from './vm-item'
 import TemplateItem from './template-item'
 import SrItem from './sr-item'
@@ -150,6 +154,20 @@ const OPTIONS = {
       { labelId: 'homeSortByCpus', sortBy: 'CPUs.number', sortOrder: 'desc' }
     ]
   },
+  'VmGroup': {
+    defaultFilter: '',
+    filters: homeFilters.vmGroup,
+    mainActions: [
+      { handler: shutdownVmGroups, icon: 'vm-stop', tooltip: _('stopVmLabel') },
+      { handler: startVmGroups, icon: 'vm-start', tooltip: _('startVmLabel') },
+      { handler: rebootVmGroups, icon: 'vm-reboot', tooltip: _('rebootVmLabel') }
+    ],
+    Item: VmGroupItem,
+    sortOptions: [
+      { labelId: 'homeSortByName', sortBy: 'name_label', sortOrder: 'asc' },
+      { labelId: 'homeSortByPowerstate', sortBy: 'power_state', sortOrder: 'desc' }
+    ]
+  },
   pool: {
     defaultFilter: '',
     filters: homeFilters.pool,
@@ -196,6 +214,7 @@ const OPTIONS = {
 
 const TYPES = {
   VM: _('homeTypeVm'),
+  VmGroup: _('homeTypeVmGroup'),
   'VM-template': _('homeTypeVmTemplate'),
   host: _('homeTypeHost'),
   pool: _('homeTypePool'),
@@ -212,14 +231,18 @@ const DEFAULT_TYPE = 'VM'
     createGetObjectsOfType('host'),
     hosts => state => isEmpty(hosts(state))
   )
-  const type = (_, props) => props.location.query.t || DEFAULT_TYPE
+  const getType = (_, props) => props.location.query.t || DEFAULT_TYPE
+  const getObjectsByType = createGetObjectsOfType(getType)
 
-  return {
-    areObjectsFetched,
-    items: createGetObjectsOfType(type),
-    noServersConnected,
-    type,
-    user: getUser
+  return (state, props) => {
+    const type = getType(state, props)
+    return {
+      areObjectsFetched: areObjectsFetched(state, props),
+      items: getObjectsByType(state, props),
+      noServersConnected: noServersConnected(state, props),
+      type,
+      user: getUser(state, props)
+    }
   }
 })
 export default class Home extends Component {
@@ -313,7 +336,7 @@ export default class Home extends Component {
       const defaultFilter = this._getDefaultFilter(props)
 
       if (defaultFilter != null) {
-        this._setFilter(defaultFilter, props)
+        this._setFilter(defaultFilter, props, true)
       }
       return
     }
@@ -359,13 +382,13 @@ export default class Home extends Component {
 
   // Optionally can take the props to be able to use it in
   // componentWillReceiveProps().
-  _setFilter (filter, props = this.props) {
+  _setFilter (filter, props = this.props, replace) {
     if (!isString(filter)) {
       filter = filter::ComplexMatcher.toString()
     }
 
     const { pathname, query } = props.location
-    this.context.router.push({
+    this.context.router[replace ? 'replace' : 'push']({
       pathname,
       query: { ...query, s: filter }
     })
@@ -568,11 +591,9 @@ export default class Home extends Component {
               type='text'
             />
             <div className='input-group-btn'>
-              <a
-                className='btn btn-secondary'
-                onClick={this._clearFilter}>
+              <Button onClick={this._clearFilter}>
                 <Icon icon='clear-search' />
-              </a>
+              </Button>
             </div>
             <div className='input-group-btn'>
               <ActionButton
@@ -751,7 +772,6 @@ export default class Home extends Component {
                       {map(mainActions, (action, key) => (
                         <Tooltip content={action.tooltip} key={key}>
                           <ActionButton
-                            btnStyle='secondary'
                             {...action}
                             handlerParam={this._getSelectedItemsIds()}
                           />
@@ -785,7 +805,7 @@ export default class Home extends Component {
                         </Popover>
                       }
                     >
-                      <Button className='btn-link'><Icon icon='pool' /> {_('homeAllPools')}</Button>
+                      <Button btnStyle='link'><Icon icon='pool' /> {_('homeAllPools')}</Button>
                     </OverlayTrigger>
                   )}
                   {' '}
@@ -805,11 +825,11 @@ export default class Home extends Component {
                         </Popover>
                       }
                     >
-                      <Button className='btn-link'><Icon icon='host' /> {_('homeAllHosts')}</Button>
+                      <Button btnStyle='link'><Icon icon='host' /> {_('homeAllHosts')}</Button>
                     </OverlayTrigger>
                   )}
                   {' '}
-                  <OverlayTrigger
+                  {type !== 'VmGroup' && <OverlayTrigger
                     autoFocus
                     trigger='click'
                     rootClose
@@ -826,8 +846,8 @@ export default class Home extends Component {
                       </Popover>
                     }
                   >
-                    <Button className='btn-link'><Icon icon='tags' /> {_('homeAllTags')}</Button>
-                  </OverlayTrigger>
+                    <Button btnStyle='link'><Icon icon='tags' /> {_('homeAllTags')}</Button>
+                  </OverlayTrigger> }
                   {' '}
                   <DropdownButton bsStyle='link' id='sort' title={_('homeSortBy')}>
                     {map(options.sortOptions, ({ labelId, sortBy: _sortBy, sortOrder }, key) => (
@@ -844,10 +864,9 @@ export default class Home extends Component {
               }
             </Col>
             <Col smallsize={1} mediumSize={1} className='text-xs-right'>
-              <button className='btn btn-secondary'
-                onClick={this._expandAll}>
+              <Button onClick={this._expandAll}>
                 <Icon icon='nav' />
-              </button>
+              </Button>
             </Col>
           </SingleLineRow>
           {isEmpty(filteredItems)

src/xo-app/home/vm-group-item.js

@@ -0,0 +1,77 @@
+import _ from 'intl'
+import Component from 'base-component'
+import Ellipsis, { EllipsisContainer } from 'ellipsis'
+import forEach from 'lodash/forEach'
+import Icon from 'icon'
+import isEmpty from 'lodash/isEmpty'
+import map from 'lodash/map'
+import React from 'react'
+import SingleLineRow from 'single-line-row'
+import Tooltip from 'tooltip'
+import { BlockLink } from 'link'
+import { Col } from 'grid'
+import { connectStore } from 'utils'
+import { createGetObject } from 'selectors'
+import { editVmGroup } from 'xo'
+import { Text } from 'editable'
+
+import styles from './index.css'
+
+@connectStore(() => {
+  return (state, props) => {
+    const vms = {}
+    forEach(props.item.$VMs, vmId => {
+      const getVM = createGetObject(() => vmId)
+      vms[vmId] = getVM(state, props)
+    })
+    return {
+      vms
+    }
+  }
+})
+export default class VmGroupItem extends Component {
+  toggleState = stateField => () => this.setState({ [stateField]: !this.state[stateField] })
+  _onSelect = () => this.props.onSelect(this.props.item.id)
+  _setNameDescription = description => editVmGroup(this.props.item, {name_description: description})
+  _setNameLabel = label => editVmGroup(this.props.item, {name_label: label})
+  _getVmGroupState = (vmGroup) => {
+    const states = map(this.props.vms, vm => vm.power_state)
+    return isEmpty(states)
+    ? 'Busy'
+    : states.indexOf('Halted') === -1
+      ? states[0]
+      : states.indexOf('Running') === -1
+        ? states[0]
+        : 'Busy'
+  }
+
+  render () {
+    const { item: vmGroup, selected, vms } = this.props
+    return <div className={styles.item}>
+      <BlockLink to={`/vm-group/${vmGroup.id}`}>
+        <SingleLineRow>
+          <Col smallSize={10} mediumSize={9} largeSize={3}>
+            <EllipsisContainer>
+              <input type='checkbox' checked={selected} onChange={this._onSelect} value={vmGroup.id} />
+              &nbsp;&nbsp;
+              <Ellipsis>
+                <Tooltip content={_(`powerStateVmGroup${this._getVmGroupState(vmGroup)}`)}>
+                  <Icon icon={isEmpty(vms) ? 'halted' : `${this._getVmGroupState(vmGroup).toLowerCase()}`} />
+                </Tooltip>
+                <Text value={vmGroup.name_label} onChange={this._setNameLabel} useLongClick />
+              </Ellipsis>
+              &nbsp;&nbsp;
+            </EllipsisContainer>
+          </Col>
+          <Col mediumSize={4} className='hidden-md-down'>
+            <EllipsisContainer>
+              <Ellipsis>
+                <Text value={vmGroup.name_description} onChange={this._setNameDescription} useLongClick />
+              </Ellipsis>
+            </EllipsisContainer>
+          </Col>
+        </SingleLineRow>
+      </BlockLink>
+    </div>
+  }
+}

src/xo-app/home/vm-item.js

@@ -31,7 +31,9 @@ import {
 import {
   createFinder,
   createGetObject,
-  createSelector
+  createGetVmDisks,
+  createSelector,
+  createSumBy
 } from 'selectors'
 
 import styles from './index.css'
@@ -39,9 +41,13 @@ import styles from './index.css'
 @addSubscriptions({
   resourceSets: subscribeResourceSets
 })
-@connectStore({
-  container: createGetObject((_, props) => props.item.$container)
-})
+@connectStore(() => ({
+  container: createGetObject((_, props) => props.item.$container),
+  totalDiskSize: createSumBy(
+    createGetVmDisks((_, props) => props.item),
+    'size'
+  )
+}))
 export default class VmItem extends Component {
   get _isRunning () {
     const vm = this.props.item
@@ -164,6 +170,8 @@ export default class VmItem extends Component {
               {' '} {' '}
               {formatSize(vm.memory.size)} <Icon icon='memory' />
               {' '}&nbsp;{' '}
+              {formatSize(this.props.totalDiskSize)} <Icon icon='disk' />
+              {' '}&nbsp;{' '}
               {isEmpty(vm.snapshots)
                 ? null
                 : <span>{vm.snapshots.length}x <Icon icon='vm-snapshot' /></span>

src/xo-app/host/index.js

@@ -7,8 +7,14 @@ import Page from '../page'
 import React, { cloneElement, Component } from 'react'
 import Tooltip from 'tooltip'
 import { Text } from 'editable'
-import { editHost, fetchHostStats, getHostMissingPatches, installAllHostPatches, installHostPatch } from 'xo'
 import { Container, Row, Col } from 'grid'
+import {
+  editHost,
+  fetchHostStats,
+  installAllHostPatches,
+  installHostPatch,
+  subscribeHostMissingPatches
+} from 'xo'
 import {
   connectStore,
   routes
@@ -139,6 +145,10 @@ export default class Host extends Component {
   }
 
   loop (host = this.props.host) {
+    if (host == null) {
+      return
+    }
+
     if (this.cancel) {
       this.cancel()
     }
@@ -166,22 +176,19 @@ export default class Host extends Component {
   }
   loop = ::this.loop
 
-  _getMissingPatches (host) {
-    getHostMissingPatches(host).then(missingPatches => {
-      this.setState({ missingPatches: sortBy(missingPatches, (patch) => -patch.time) })
-    })
-  }
-
-  componentWillMount () {
-    if (!this.props.host) {
-      return
-    }
+  componentDidMount () {
     this.loop()
-    this._getMissingPatches(this.props.host)
+    this.unsubscribeHostMissingPatches = subscribeHostMissingPatches(
+      this.props.routeParams.id,
+      missingPatches => this.setState({
+        missingPatches: sortBy(missingPatches, patch => -patch.time)
+      })
+    )
   }
 
   componentWillUnmount () {
     clearTimeout(this.timeout)
+    this.unsubscribeHostMissingPatches()
   }
 
   componentWillReceiveProps (props) {
@@ -195,10 +202,6 @@ export default class Host extends Component {
       this.context.router.push('/')
     }
 
-    if (!hostCur) {
-      this._getMissingPatches(hostNext)
-    }
-
     if (!isRunning(hostCur) && isRunning(hostNext)) {
       this.loop(hostNext)
     } else if (isRunning(hostCur) && !isRunning(hostNext)) {
@@ -210,16 +213,12 @@ export default class Host extends Component {
 
   _installAllPatches = () => {
     const { host } = this.props
-    return installAllHostPatches(host).then(() => {
-      this._getMissingPatches(host)
-    })
+    return installAllHostPatches(host)
   }
 
   _installPatch = patch => {
     const { host } = this.props
-    return installHostPatch(host, patch).then(() => {
-      this._getMissingPatches(host)
-    })
+    return installHostPatch(host, patch)
   }
 
   _setNameDescription = nameDescription => editHost(this.props.host, { name_description: nameDescription })
@@ -235,7 +234,7 @@ export default class Host extends Component {
       <Row>
         <Col mediumSize={6} className='header-title'>
           <h2>
-            <Icon icon={`host-${host.power_state.toLowerCase()}`} />
+            <Icon icon={host.power_state === 'Running' && !host.enabled ? 'host-disabled' : `host-${host.power_state.toLowerCase()}`} />
             {' '}
             <Text
               value={host.name_label}

src/xo-app/host/tab-console.js

@@ -1,4 +1,5 @@
 import _ from 'intl'
+import Button from 'button'
 import Component from 'base-component'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import debounce from 'lodash/debounce'
@@ -73,20 +74,19 @@ export default class extends Component {
               <input type='text' className='form-control' ref='clipboard' onChange={this._setRemoteClipboard} />
               <span className='input-group-btn'>
                 <CopyToClipboard text={this.state.clipboard || ''}>
-                  <button className='btn btn-secondary'>
+                  <Button>
                     <Icon icon='clipboard' /> {_('copyToClipboardLabel')}
-                  </button>
+                  </Button>
                 </CopyToClipboard>
               </span>
             </div>
           </Col>
           <Col mediumSize={2}>
-            <button
-              className='btn btn-secondary'
+            <Button
               onClick={this._sendCtrlAltDel}
             >
               <Icon icon='vm-keyboard' /> {_('ctrlAltDelButtonLabel')}
-            </button>
+            </Button>
           </Col>
         </Row>
         <Row className='console'>

src/xo-app/host/tab-general.js

@@ -85,11 +85,11 @@ export default ({
         <Usage total={host.memory.size}>
           <UsageElement
             highlight
-            tooltip='XenServer'
+            tooltip={`XenServer (${formatSize(vmController.memory.size)})`}
             value={vmController.memory.size}
           />
           {map(vms, vm => <UsageElement
-            tooltip={vm.name_label}
+            tooltip={`${vm.name_label} (${formatSize(vm.memory.size)})`}
             key={vm.id}
             value={vm.memory.size}
             href={`#/vms/${vm.id}`}

src/xo-app/host/tab-network.js

@@ -190,7 +190,6 @@ class PifItem extends Component {
       </td>
       <td className='text-xs-right'>
         <ActionRowButton
-          btnStyle='default'
           disabled={pif.physical || pif.disallowUnplug || pif.management}
           handler={deletePif}
           handlerParam={pif}
@@ -202,7 +201,7 @@ class PifItem extends Component {
   }
 }
 
-export default (({
+export default ({
   host,
   networks,
   pifs,
@@ -247,4 +246,4 @@ export default (({
       }
     </Col>
   </Row>
-</Container>)
+</Container>

src/xo-app/host/tab-patches.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react'
 import SortedTable from 'sorted-table'
 import TabButton from 'tab-button'
 import Upgrade from 'xoa-upgrade'
+import { chooseAction } from 'modal'
 import { connectStore, formatSize } from 'utils'
 import { Container, Row, Col } from 'grid'
 import { createDoesHostNeedRestart, createSelector } from 'selectors'
@@ -42,11 +43,10 @@ const MISSING_PATCH_COLUMNS = [
   },
   {
     name: _('patchAction'),
-    itemRenderer: (patch, installPatch) => (
+    itemRenderer: (patch, {installPatch, _installPatchWarning}) => (
       <ActionRowButton
         btnStyle='primary'
-        handler={installPatch}
-        handlerParam={patch}
+        handler={() => _installPatchWarning(patch, installPatch)}
         icon='host-patch-update'
       />
     )
@@ -111,6 +111,29 @@ const INSTALLED_PATCH_COLUMNS_2 = [
   needsRestart: createDoesHostNeedRestart((_, props) => props.host)
 }))
 export default class HostPatches extends Component {
+  static contextTypes = {
+    router: React.PropTypes.object
+  }
+
+  _chooseActionPatch = async doInstall => {
+    const choice = await chooseAction({
+      body: <p>{_('installPatchWarningContent')}</p>,
+      buttons: [
+        { label: _('installPatchWarningResolve'), value: 'install', btnStyle: 'primary' },
+        { label: _('installPatchWarningReject'), value: 'goToPool' }
+      ],
+      title: _('installPatchWarningTitle')
+    })
+
+    return choice === 'install'
+      ? doInstall()
+      : this.context.router.push(`/pools/${this.props.host.$pool}/patches`)
+  }
+
+  _installPatchWarning = (patch, installPatch) => this._chooseActionPatch(() => installPatch(patch))
+
+  _installAllPatchesWarning = installAllPatches => this._chooseActionPatch(installAllPatches)
+
   _getPatches = createSelector(
     () => this.props.host,
     () => this.props.hostPatches,
@@ -136,7 +159,7 @@ export default class HostPatches extends Component {
   render () {
     const { host, missingPatches, installAllPatches, installPatch } = this.props
     const { patches, columns } = this._getPatches()
-
+    const hasMissingPatches = !isEmpty(missingPatches)
     return process.env.XOA_PLAN > 1
       ? <Container>
         <Row>
@@ -148,26 +171,20 @@ export default class HostPatches extends Component {
               icon='host-reboot'
               labelId='rebootUpdateHostLabel'
             />}
-            {isEmpty(missingPatches)
-              ? <TabButton
-                disabled
-                handler={installAllPatches}
-                icon='success'
-                labelId='hostUpToDate'
-              />
-              : <TabButton
-                btnStyle='primary'
-                handler={installAllPatches}
-                icon='host-patch-update'
-                labelId='patchUpdateButton'
-              />
-            }
+            <TabButton
+              disabled={!hasMissingPatches}
+              btnStyle={hasMissingPatches ? 'primary' : undefined}
+              handler={this._installAllPatchesWarning}
+              handlerParam={installAllPatches}
+              icon={hasMissingPatches ? 'host-patch-update' : 'success'}
+              labelId={hasMissingPatches ? 'patchUpdateButton' : 'hostUpToDate'}
+            />
           </Col>
         </Row>
-        {!isEmpty(missingPatches) && <Row>
+        {hasMissingPatches && <Row>
           <Col>
             <h3>{_('hostMissingPatches')}</h3>
-            <SortedTable collection={missingPatches} userData={installPatch} columns={MISSING_PATCH_COLUMNS} />
+            <SortedTable collection={missingPatches} userData={{installPatch, _installPatchWarning: this._installPatchWarning}} columns={MISSING_PATCH_COLUMNS} />
           </Col>
         </Row>}
         <Row>

src/xo-app/host/tab-storage.js

@@ -71,7 +71,6 @@ const SR_COLUMNS = [
     name: _('pbdAction'),
     itemRenderer: storage => !storage.attached &&
       <ActionRowButton
-        btnStyle='default'
         handler={deletePbd}
         handlerParam={storage.pbdId}
         icon='sr-forget'

src/xo-app/index.js

@@ -36,6 +36,7 @@ import Sr from './sr'
 import Tasks from './tasks'
 import User from './user'
 import Vm from './vm'
+import VmGroup from './vm-group'
 import VmImport from './vm-import'
 import XoaUpdates from './xoa-updates'
 import Xosan from './xosan'
@@ -86,6 +87,7 @@ const BODY_STYLE = {
   'vms/import': VmImport,
   'vms/new': NewVm,
   'vms/:id': Vm,
+  'vm-group/:id': VmGroup,
   'xoa-update': XoaUpdates,
   'xosan': Xosan
 })

src/xo-app/jobs/new/index.js

@@ -1,6 +1,7 @@
 import _, { messages } from 'intl'
 import ActionButton from 'action-button'
 import ActionRowButton from 'action-row-button'
+import Button from 'button'
 import Component from 'base-component'
 import delay from 'lodash/delay'
 import find from 'lodash/find'
@@ -55,7 +56,7 @@ const getType = function (param) {
 /**
  * Tries extracting Object targeted property
  */
-const reduceObject = (value, propertyName = 'id') => value && value[propertyName] || value
+const reduceObject = (value, propertyName = 'id') => (value != null && value[propertyName]) || value
 
 /**
  * Adapts all data "arrayed" by UI-multiple-selectors to job's cross-product trick
@@ -387,7 +388,7 @@ export default class Jobs extends Component {
           {process.env.XOA_PLAN > 3
             ? <span><ActionButton form='newJobForm' handler={this._handleSubmit} icon='save' btnStyle='primary'>{_('saveResourceSet')}</ActionButton>
               {' '}
-              <button type='button' className='btn btn-default' onClick={this._reset}>{_('resetResourceSet')}</button></span>
+              <Button onClick={this._reset}>{_('resetResourceSet')}</Button></span>
             : <span><Upgrade place='health' available={4} /></span>
           }
         </fieldset>

src/xo-app/jobs/schedules/index.js

@@ -1,5 +1,6 @@
 import _, { messages } from 'intl'
 import ActionButton from 'action-button'
+import Button from 'button'
 import find from 'lodash/find'
 import Icon from 'icon'
 import isEmpty from 'lodash/isEmpty'
@@ -171,7 +172,7 @@ export default class Schedules extends Component {
         {process.env.XOA_PLAN > 3
           ? <span><ActionButton form='newScheduleForm' handler={this._handleSubmit} icon='save' btnStyle='primary'>{_('saveBackupJob')}</ActionButton>
             {' '}
-            <button type='button' className='btn btn-secondary' onClick={this._reset}>{_('selectTableReset')}</button></span>
+            <Button onClick={this._reset}>{_('selectTableReset')}</Button></span>
           : <span><Upgrade place='health' available={4} /></span>
         }
       </div>
@@ -195,9 +196,9 @@ export default class Schedules extends Component {
             <td className='hidden-xs-down'>{schedule.cron}</td>
             <td className='hidden-xs-down'>{schedule.timezone || _('jobServerTimezone')}</td>
             <td>
-              <button type='button' className='btn btn-primary' onClick={() => this._edit(schedule.id)}><Icon icon='edit' /></button>
+              <Button btnStyle='primary' onClick={() => this._edit(schedule.id)}><Icon icon='edit' /></Button>
               {' '}
-              <button type='button' className='btn btn-danger' onClick={() => deleteSchedule(schedule)}><Icon icon='delete' /></button>
+              <Button btnStyle='danger' onClick={() => deleteSchedule(schedule)}><Icon icon='delete' /></Button>
             </td>
           </tr>)}
         </tbody>

src/xo-app/logs/index.js

@@ -1,6 +1,7 @@
 import _, { FormattedDuration } from 'intl'
 import ActionButton from 'action-button'
 import ActionRowButton from 'action-row-button'
+import ButtonGroup from 'button-group'
 import classnames from 'classnames'
 import forEach from 'lodash/forEach'
 import get from 'lodash/get'
@@ -8,13 +9,12 @@ import Icon from 'icon'
 import includes from 'lodash/includes'
 import map from 'lodash/map'
 import orderBy from 'lodash/orderBy'
-import propTypes from 'prop-types'
+import propTypes from 'prop-types-decorator'
 import React, { Component } from 'react'
 import renderXoItem from 'render-xo-item'
 import SortedTable from 'sorted-table'
 import Tooltip from 'tooltip'
 import { alert, confirm } from 'modal'
-import { ButtonGroup } from 'react-bootstrap-4/lib'
 import { connectStore } from 'utils'
 import { createGetObject } from 'selectors'
 import { FormattedDate } from 'react-intl'
@@ -71,20 +71,31 @@ class JobReturn extends Component {
 }
 
 const Log = props => <ul className='list-group'>
-  {map(props.log.calls, call => <li key={call.callKey} className='list-group-item'>
-    <strong className='text-info'>{call.method}: </strong><br />
-    {map(call.params, (value, key) => [ <JobParam id={value} paramKey={key} key={key} />, <br /> ])}
-    {call.returnedValue && <span>{' '}<JobReturn id={call.returnedValue} /></span>}
-    {call.error &&
-      <span className='text-danger'>
-        <Icon icon='error' />
-        {' '}
-        {call.error.message
-          ? <strong>{call.error.message}</strong>
-          : JSON.stringify(call.error)
-        }
-      </span>}
-  </li>)}
+  {map(props.log.calls, call => {
+    const { returnedValue } = call
+    let id
+    if (returnedValue != null) {
+      id = returnedValue.id
+      if (id === undefined && typeof returnedValue === 'string') {
+        id = returnedValue
+      }
+    }
+
+    return <li key={call.callKey} className='list-group-item'>
+      <strong className='text-info'>{call.method}: </strong><br />
+      {map(call.params, (value, key) => [ <JobParam id={value} paramKey={key} key={key} />, <br /> ])}
+      {id !== undefined && <span>{' '}<JobReturn id={id} /></span>}
+      {call.error &&
+        <span className='text-danger'>
+          <Icon icon='error' />
+          {' '}
+          {call.error.message
+            ? <strong>{call.error.message}</strong>
+            : JSON.stringify(call.error)
+          }
+        </span>}
+    </li>
+  })}
 </ul>
 
 const showCalls = log => alert(_('jobModalTitle', { job: log.jobId }), <Log log={log} />)
@@ -139,11 +150,11 @@ const LOG_COLUMNS = [
       <span className='pull-right'>
         <ButtonGroup>
           <Tooltip content={_('logDisplayDetails')}><ActionRowButton icon='preview' handler={showCalls} handlerParam={log} /></Tooltip>
-          <Tooltip content={_('remove')}><ActionRowButton btnStyle='default' handler={deleteJobsLog} handlerParam={log.logKey} icon='delete' /></Tooltip>
+          <Tooltip content={_('remove')}><ActionRowButton handler={deleteJobsLog} handlerParam={log.logKey} icon='delete' /></Tooltip>
         </ButtonGroup>
       </span>
     </span>,
-    sortCriteria: log => log.hasErrors && ' ' || log.status
+    sortCriteria: log => log.hasErrors ? ' ' : log.status
   }
 ]
 

src/xo-app/menu/index.js

@@ -1,13 +1,12 @@
 import _ from 'intl'
-import Component from 'base-component'
 import classNames from 'classnames'
+import Component from 'base-component'
 import Icon from 'icon'
 import isEmpty from 'lodash/isEmpty'
 import Link from 'link'
 import map from 'lodash/map'
 import React from 'react'
 import Tooltip from 'tooltip'
-import { Button } from 'react-bootstrap-4/lib'
 import { UpdateTag } from '../xoa-updates'
 import {
   addSubscriptions,
@@ -32,6 +31,8 @@ import {
 
 import styles from './index.css'
 
+const returnTrue = () => true
+
 @connectStore(() => ({
   isAdmin,
   nTasks: createGetObjectsOfType('task').count(
@@ -70,8 +71,9 @@ export default class Menu extends Component {
   _checkPermissions = createSelector(
     () => this.props.isAdmin,
     () => this.props.permissions,
-    (isAdmin, permissions) => ({ id }) =>
-      isAdmin || permissions && permissions[id] && permissions[id].operate
+    (isAdmin, permissions) => isAdmin
+      ? returnTrue
+      : ({ id }) => permissions && permissions[id] && permissions[id].operate
   )
 
   _getNoOperatablePools = createSelector(
@@ -99,11 +101,22 @@ export default class Menu extends Component {
     return this.refs.content.offsetHeight
   }
 
-  _toggleCollapsed = () => {
+  _toggleCollapsed = event => {
+    event.preventDefault()
     this._removeListener()
     this.setState({ collapsed: !this.state.collapsed })
   }
 
+  _connect = event => {
+    event.preventDefault()
+    return connect()
+  }
+
+  _signOut = event => {
+    event.preventDefault()
+    return signOut()
+  }
+
   render () {
     const { isAdmin, nTasks, status, user, pools, nHosts } = this.props
     const noOperatablePools = this._getNoOperatablePools()
@@ -114,6 +127,7 @@ export default class Menu extends Component {
     const items = [
       { to: '/home', icon: 'menu-home', label: 'homePage', subMenu: [
         { to: '/home?t=VM', icon: 'vm', label: 'homeVmPage' },
+        { to: '/home?t=VmGroup', icon: 'vm', label: 'homeVmGroupPage' },
         nHosts !== 0 && { to: '/home?t=host', icon: 'host', label: 'homeHostPage' },
         !isEmpty(pools) && { to: '/home?t=pool', icon: 'pool', label: 'homePoolPage' },
         isAdmin && { to: '/home?t=VM-template', icon: 'template', label: 'homeTemplatePage' },
@@ -149,11 +163,12 @@ export default class Menu extends Component {
         { to: '/jobs/new', icon: 'menu-jobs-new', label: 'jobsNewPage' },
         { to: '/jobs/schedules', icon: 'menu-jobs-schedule', label: 'jobsSchedulingPage' }
       ]},
-      { to: '/about', icon: 'menu-about', label: 'aboutPage' },
+      isAdmin && { to: '/about', icon: 'menu-about', label: 'aboutPage' },
       { to: '/tasks', icon: 'task', label: 'taskMenu', pill: nTasks },
       isAdmin && { to: '/xosan', icon: 'menu-xosan', label: 'xosan' },
       !(noOperatablePools && noResourceSets) && { to: '/vms/new', icon: 'menu-new', label: 'newMenu', subMenu: [
         { to: '/vms/new', icon: 'menu-new-vm', label: 'newVmPage' },
+        { to: '/new/vm-group', icon: 'menu-new-vm', label: 'newVmGroupPage' },
         isAdmin && { to: '/new/sr', icon: 'menu-new-sr', label: 'newSrPage' },
         isAdmin && { to: '/settings/servers', icon: 'menu-settings-servers', label: 'newServerPage' },
         !noOperatablePools && { to: '/vms/import', icon: 'menu-new-import', label: 'newImport' }
@@ -175,16 +190,16 @@ export default class Menu extends Component {
           </span>
         </li>
         <li>
-          <Button onClick={this._toggleCollapsed}>
+          <a className='nav-link' onClick={this._toggleCollapsed} href='#'>
             <Icon icon='menu-collapse' size='lg' fixedWidth />
-          </Button>
+          </a>
         </li>
         {map(items, (item, index) =>
           item && <MenuLinkItem key={index} item={item} />
         )}
         <li>&nbsp;</li>
         <li>&nbsp;</li>
-        <li className='nav-item xo-menu-item'>
+        { (isAdmin || +process.env.XOA_PLAN === 5) && <li className='nav-item xo-menu-item'>
           <Link className='nav-link' style={{display: 'flex'}} to={'/about'}>
             {+process.env.XOA_PLAN === 5
               ? <span>
@@ -214,14 +229,14 @@ export default class Menu extends Component {
                 </span>
             }
           </Link>
-        </li>
+        </li>}
         <li>&nbsp;</li>
         <li>&nbsp;</li>
         <li className='nav-item xo-menu-item'>
-          <Button className='nav-link' onClick={signOut}>
+          <a className='nav-link' onClick={this._signOut} href='#'>
             <Icon icon='sign-out' size='lg' fixedWidth />
             <span className={styles.hiddenCollapsed}>{' '}{_('signOut')}</span>
-          </Button>
+          </a>
         </li>
         <li className='nav-item xo-menu-item'>
           <Link className='nav-link text-xs-center' to={'/user'}>
@@ -236,9 +251,9 @@ export default class Menu extends Component {
           ? <li className='nav-item text-xs-center'>{_('statusConnecting')}</li>
           : status === 'disconnected' &&
             <li className='nav-item text-xs-center xo-menu-item'>
-              <Button className='nav-link' onClick={connect}>
+              <a className='nav-link' onClick={this._connect} href='#'>
                 <Icon icon='alarm' size='lg' fixedWidth /> {_('statusDisconnected')}
-              </Button>
+              </a>
             </li>
         }
       </ul>

src/xo-app/new-vm/index.js

@@ -1,9 +1,9 @@
 import _, { messages } from 'intl'
 import ActionButton from 'action-button'
 import BaseComponent from 'base-component'
+import Button from 'button'
 import classNames from 'classnames'
 import DebounceInput from 'react-debounce-input'
-import getEventValue from 'get-event-value'
 import Icon from 'icon'
 import isIp from 'is-ip'
 import Page from '../page'
@@ -12,7 +12,6 @@ import store from 'store'
 import Tags from 'tags'
 import Tooltip from 'tooltip'
 import Wizard, { Section } from 'wizard'
-import { Button } from 'react-bootstrap-4/lib'
 import { Container, Row, Col } from 'grid'
 import { injectIntl } from 'react-intl'
 import { Limits } from 'usage'
@@ -24,7 +23,6 @@ import {
   forEach,
   get,
   includes,
-  isArray,
   isEmpty,
   join,
   map,
@@ -70,6 +68,7 @@ import {
   connectStore,
   firstDefined,
   formatSize,
+  getCoresPerSocketPossibilities,
   noop,
   resolveResourceSet
 } from 'utils'
@@ -91,6 +90,8 @@ const NB_VMS_MAX = 100
 
 const getObject = createGetObject((_, id) => id)
 
+const returnTrue = () => true
+
 // Sub-components
 
 const SectionContent = ({ column, children }) => (
@@ -175,7 +176,7 @@ class Vif extends BaseComponent {
         </span>
       </LineItem>
       <Item>
-        <Button onClick={onDelete} bsStyle='secondary'>
+        <Button onClick={onDelete}>
           <Icon icon='new-vm-remove' />
         </Button>
       </Item>
@@ -361,6 +362,7 @@ export default class NewVm extends BaseComponent {
       VIFs: _VIFs,
       resourceSet: resourceSet && resourceSet.id,
       // vm.set parameters
+      coresPerSocket: state.coresPerSocket,
       CPUs: state.CPUs,
       cpuWeight: state.cpuWeight === '' ? null : state.cpuWeight,
       cpuCap: state.cpuCap === '' ? null : state.cpuCap,
@@ -444,7 +446,7 @@ export default class NewVm extends BaseComponent {
       cpuWeight: '',
       memoryDynamicMax: template.memory.dynamic[1],
       // installation
-      installMethod: template.install_methods && template.install_methods[0] || 'SSH',
+      installMethod: (template.install_methods != null && template.install_methods[0]) || 'SSH',
       sshKeys: this.props.userSshKeys && this.props.userSshKeys.length && [ 0 ],
       customConfig: '#cloud-config\n#hostname: myhostname\n#ssh_authorized_keys:\n#  - ssh-rsa <myKey>\n#packages:\n#  - htop\n',
       // interfaces
@@ -492,9 +494,11 @@ export default class NewVm extends BaseComponent {
   )
 
   _getCanOperate = createSelector(
+    () => this.props.isAdmin,
     () => this.props.permissions,
-    permissions => ({ id }) =>
-      this.props.isAdmin || permissions && permissions[id] && permissions[id].operate
+    (isAdmin, permissions) => isAdmin
+      ? returnTrue
+      : ({ id }) => permissions && permissions[id] && permissions[id].operate
   )
   _getVmPredicate = createSelector(
     this._getIsInPool,
@@ -589,58 +593,19 @@ export default class NewVm extends BaseComponent {
     })
   )
 
+  _getCoresPerSocketPossibilities = createSelector(
+    () => {
+      const { pool } = this.props
+      if (pool !== undefined) {
+        return pool.cpus.cores
+      }
+    },
+    () => this.state.state.CPUs,
+    getCoresPerSocketPossibilities
+  )
+
 // On change -------------------------------------------------------------------
-  /*
-   * if index: the element to be modified should be an array/object
-   * if stateObjectProp: the array/object contains objects and stateObjectProp needs to be modified
-   * if targetObjectProp: the event target value is an object and the new value is the targetObjectProp of this object
-   *
-   * SCHEMA:                                      EXAMPLE:
-   *
-   * state: {                                     this.state.state: {
-   *   [prop]: {                                    existingDisks: {
-   *     [index]: {                                   0: {
-   *       [stateObjectProp]: TO BE MODIFIED            name_label: TO BE MODIFIED
-   *       ...                                          name_description
-   *     }                                              ...
-   *     ...                                          }
-   *   }                                              1: {...}
-   *   ...                                          }
-   * }                                            }
-   */
-  _getOnChange (prop, index, stateObjectProp, targetObjectProp) {
-    return event => {
-      let value
-      if (index !== undefined) { // The element should be an array or an object
-        value = this.state.state[prop]
-        value = isArray(value) ? [ ...value ] : { ...value } // Clone the element
-        let eventValue = getEventValue(event)
-        eventValue = targetObjectProp ? eventValue[targetObjectProp] : eventValue // Get the new value
-        if (value[index] && stateObjectProp) {
-          value[index][stateObjectProp] = eventValue
-        } else {
-          value[index] = eventValue
-        }
-      } else {
-        value = getEventValue(event)
-      }
-      this._setState({ [prop]: value })
-    }
-  }
-  _getOnChangeCheckbox (prop, index, stateObjectProp) {
-    return event => {
-      let value
-      if (index !== undefined) {
-        value = this.state.state[prop]
-        value = [ ...value ]
-        let eventValue = event.target.checked
-        stateObjectProp ? value[index][stateObjectProp] = eventValue : value[index] = eventValue
-      } else {
-        value = event.target.checked
-      }
-      this._setState({ [prop]: value })
-    }
-  }
+
   _onChangeSshKeys = keys => this._setState({ sshKeys: map(keys, key => key.id) })
 
   _updateNbVms = () => {
@@ -796,7 +761,6 @@ export default class NewVm extends BaseComponent {
         </Wizard>
         <div className={styles.submitSection}>
           <ActionButton
-            btnStyle='secondary'
             className={styles.button}
             handler={this._reset}
             icon='new-vm-reset'
@@ -856,7 +820,7 @@ export default class NewVm extends BaseComponent {
           <DebounceInput
             className='form-control'
             debounceTimeout={DEBOUNCE_TIMEOUT}
-            onChange={this._getOnChange('name_label')}
+            onChange={this._linkState('name_label')}
             value={name_label}
           />
         </Item>
@@ -864,7 +828,7 @@ export default class NewVm extends BaseComponent {
           <DebounceInput
             className='form-control'
             debounceTimeout={DEBOUNCE_TIMEOUT}
-            onChange={this._getOnChange('name_description')}
+            onChange={this._linkState('name_description')}
             value={name_description}
           />
         </Item>
@@ -877,7 +841,8 @@ export default class NewVm extends BaseComponent {
   }
 
   _renderPerformances = () => {
-    const { CPUs, memoryDynamicMax } = this.state.state
+    const { CPUs, memoryDynamicMax, coresPerSocket } = this.state.state
+
     return <Section icon='new-vm-perf' title='newVmPerfPanel' done={this._isPerformancesDone()}>
       <SectionContent>
         <Item label={_('newVmVcpusLabel')}>
@@ -885,7 +850,7 @@ export default class NewVm extends BaseComponent {
             className='form-control'
             debounceTimeout={DEBOUNCE_TIMEOUT}
             min={0}
-            onChange={this._getOnChange('CPUs')}
+            onChange={this._linkState('CPUs')}
             type='number'
             value={CPUs}
           />
@@ -897,6 +862,25 @@ export default class NewVm extends BaseComponent {
             value={firstDefined(memoryDynamicMax, null)}
           />
         </Item>
+        <Item label={_('vmCpuTopology')}>
+          <select
+            className='form-control'
+            onChange={this._linkState('coresPerSocket')}
+            value={coresPerSocket}
+          >
+            {_('vmChooseCoresPerSocket', message => <option value=''>{message}</option>)}
+            {map(
+              this._getCoresPerSocketPossibilities(),
+              coresPerSocket => _(
+                'vmCoresPerSocket', {
+                  nSockets: CPUs / coresPerSocket,
+                  nCores: coresPerSocket
+                },
+                message => <option key={coresPerSocket} value={coresPerSocket}>{message}</option>
+              )
+            )}
+          </select>
+        </Item>
       </SectionContent>
     </Section>
   }
@@ -935,7 +919,7 @@ export default class NewVm extends BaseComponent {
             <span className={styles.configDriveToggle}>
               <Toggle
                 value={configDrive}
-                onChange={this._getOnChange('configDrive')}
+                onChange={this._linkState('configDrive')}
               />
             </span>
           </div>
@@ -946,7 +930,7 @@ export default class NewVm extends BaseComponent {
               checked={installMethod === 'SSH'}
               disabled={!configDrive}
               name='installMethod'
-              onChange={this._getOnChange('installMethod')}
+              onChange={this._linkState('installMethod')}
               type='radio'
               value='SSH'
             />
@@ -959,11 +943,11 @@ export default class NewVm extends BaseComponent {
               className='form-control'
               disabled={!configDrive || installMethod !== 'SSH'}
               debounceTimeout={DEBOUNCE_TIMEOUT}
-              onChange={this._getOnChange('newSshKey')}
+              onChange={this._linkState('newSshKey')}
               value={newSshKey}
             />
             <span className='input-group-btn'>
-              <Button className='btn btn-secondary' onClick={this._addNewSshKey} disabled={!newSshKey}>
+              <Button onClick={this._addNewSshKey} disabled={!newSshKey}>
                 <Icon icon='add' />
               </Button>
             </span>
@@ -982,7 +966,7 @@ export default class NewVm extends BaseComponent {
             checked={installMethod === 'customConfig'}
             disabled={!configDrive}
             name='installMethod'
-            onChange={this._getOnChange('installMethod')}
+            onChange={this._linkState('installMethod')}
             type='radio'
             value='customConfig'
           />
@@ -994,7 +978,7 @@ export default class NewVm extends BaseComponent {
             debounceTimeout={DEBOUNCE_TIMEOUT}
             disabled={!configDrive || installMethod !== 'customConfig'}
             element='textarea'
-            onChange={this._getOnChange('customConfig')}
+            onChange={this._linkState('customConfig')}
             value={customConfig}
           />
         </LineItem>
@@ -1005,7 +989,7 @@ export default class NewVm extends BaseComponent {
             <input
               checked={installMethod === 'ISO'}
               name='installMethod'
-              onChange={this._getOnChange('installMethod')}
+              onChange={this._linkState('installMethod')}
               type='radio'
               value='ISO'
             />
@@ -1015,13 +999,13 @@ export default class NewVm extends BaseComponent {
             <span className={styles.inlineSelect}>
               {this.props.pool ? <SelectVdi
                 disabled={installMethod !== 'ISO'}
-                onChange={this._getOnChange('installIso')}
+                onChange={this._linkState('installIso')}
                 srPredicate={this._getIsoPredicate()}
                 value={installIso}
               />
               : <SelectResourceSetsVdi
                 disabled={installMethod !== 'ISO'}
-                onChange={this._getOnChange('installIso')}
+                onChange={this._linkState('installIso')}
                 resourceSet={this._getResolvedResourceSet()}
                 srPredicate={this._getIsoPredicate()}
                 value={installIso}
@@ -1035,7 +1019,7 @@ export default class NewVm extends BaseComponent {
               <input
                 checked={installMethod === 'network'}
                 name='installMethod'
-                onChange={this._getOnChange('installMethod')}
+                onChange={this._linkState('installMethod')}
                 type='radio'
                 value='network'
               />
@@ -1047,7 +1031,7 @@ export default class NewVm extends BaseComponent {
                 debounceTimeout={DEBOUNCE_TIMEOUT}
                 disabled={installMethod !== 'network'}
                 key='networkInput'
-                onChange={this._getOnChange('installNetwork')}
+                onChange={this._linkState('installNetwork')}
                 placeholder={formatMessage(messages.newVmInstallNetworkPlaceHolder)}
                 value={installNetwork}
               />
@@ -1056,7 +1040,7 @@ export default class NewVm extends BaseComponent {
               <DebounceInput
                 className='form-control'
                 debounceTimeout={DEBOUNCE_TIMEOUT}
-                onChange={this._getOnChange('pv_args')}
+                onChange={this._linkState('pv_args')}
                 value={pv_args}
               />
             </Item>
@@ -1065,7 +1049,7 @@ export default class NewVm extends BaseComponent {
             <input
               checked={installMethod === 'PXE'}
               name='installMethod'
-              onChange={this._getOnChange('installMethod')}
+              onChange={this._linkState('installMethod')}
               type='radio'
               value='PXE'
             />
@@ -1080,7 +1064,7 @@ export default class NewVm extends BaseComponent {
           className='form-control'
           debounceTimeout={DEBOUNCE_TIMEOUT}
           element='textarea'
-          onChange={this._getOnChange('cloudConfig')}
+          onChange={this._linkState('cloudConfig')}
           rows={7}
           value={cloudConfig}
         />
@@ -1128,7 +1112,7 @@ export default class NewVm extends BaseComponent {
           {index < VIFs.length - 1 && <hr />}
         </div>)}
         <Item>
-          <Button onClick={this._addInterface} bsStyle='secondary'>
+          <Button onClick={this._addInterface}>
             <Icon icon='new-vm-add' />
             {' '}
             {_('newVmAddInterface')}
@@ -1164,12 +1148,12 @@ export default class NewVm extends BaseComponent {
             <Item label={_('newVmSrLabel')}>
               <span className={styles.inlineSelect}>
                 {pool ? <SelectSr
-                  onChange={this._getOnChange('existingDisks', index, '$SR', 'id')}
+                  onChange={this._linkState(`existingDisks.${index}.$SR`, 'id')}
                   predicate={this._getSrPredicate()}
                   value={disk.$SR}
                 />
                 : <SelectResourceSetsSr
-                  onChange={this._getOnChange('existingDisks', index, '$SR', 'id')}
+                  onChange={this._linkState(`existingDisks.${index}.$SR`, 'id')}
                   predicate={this._getSrPredicate()}
                   resourceSet={resourceSet}
                   value={disk.$SR}
@@ -1181,7 +1165,7 @@ export default class NewVm extends BaseComponent {
               <DebounceInput
                 className='form-control'
                 debounceTimeout={DEBOUNCE_TIMEOUT}
-                onChange={this._getOnChange('existingDisks', index, 'name_label')}
+                onChange={this._linkState(`existingDisks.${index}.name_label`)}
                 value={disk.name_label}
               />
             </Item>
@@ -1189,14 +1173,14 @@ export default class NewVm extends BaseComponent {
               <DebounceInput
                 className='form-control'
                 debounceTimeout={DEBOUNCE_TIMEOUT}
-                onChange={this._getOnChange('existingDisks', index, 'name_description')}
+                onChange={this._linkState(`existingDisks.${index}.name_description`)}
                 value={disk.name_description}
               />
             </Item>
             <Item label={_('newVmSizeLabel')}>
               <SizeInput
                 className={styles.sizeInput}
-                onChange={this._getOnChange('existingDisks', index, 'size')}
+                onChange={this._linkState(`existingDisks.${index}.size`)}
                 readOnly={!configDrive}
                 value={firstDefined(disk.size, null)}
               />
@@ -1211,12 +1195,12 @@ export default class NewVm extends BaseComponent {
             <Item label={_('newVmSrLabel')}>
               <span className={styles.inlineSelect}>
                 {pool ? <SelectSr
-                  onChange={this._getOnChange('VDIs', index, 'SR', 'id')}
+                  onChange={this._linkState(`VDIs.${index}.SR`, 'id')}
                   predicate={this._getSrPredicate()}
                   value={vdi.SR}
                 />
                 : <SelectResourceSetsSr
-                  onChange={this._getOnChange('VDIs', index, 'SR', 'id')}
+                  onChange={this._linkState(`VDIs.${index}.SR`, 'id')}
                   predicate={this._getSrPredicate()}
                   resourceSet={resourceSet}
                   value={vdi.SR}
@@ -1227,7 +1211,7 @@ export default class NewVm extends BaseComponent {
               <DebounceInput
                 className='form-control'
                 debounceTimeout={DEBOUNCE_TIMEOUT}
-                onChange={this._getOnChange('VDIs', index, 'name_label')}
+                onChange={this._linkState(`VDIs.${index}.name_label`)}
                 value={vdi.name_label}
               />
             </Item>
@@ -1235,19 +1219,19 @@ export default class NewVm extends BaseComponent {
               <DebounceInput
                 className='form-control'
                 debounceTimeout={DEBOUNCE_TIMEOUT}
-                onChange={this._getOnChange('VDIs', index, 'name_description')}
+                onChange={this._linkState(`VDIs.${index}.name_description`)}
                 value={vdi.name_description}
               />
             </Item>
             <Item label={_('newVmSizeLabel')}>
               <SizeInput
                 className={styles.sizeInput}
-                onChange={this._getOnChange('VDIs', index, 'size')}
+                onChange={this._linkState(`VDIs.${index}.size`)}
                 value={firstDefined(vdi.size, null)}
               />
             </Item>
             <Item>
-              <Button onClick={() => this._removeVdi(index)} bsStyle='secondary'>
+              <Button onClick={() => this._removeVdi(index)}>
                 <Icon icon='new-vm-remove' />
               </Button>
             </Item>
@@ -1255,7 +1239,7 @@ export default class NewVm extends BaseComponent {
           {index < VDIs.length - 1 && <hr />}
         </div>)}
         <Item>
-          <Button onClick={this._addVdi} bsStyle='secondary'>
+          <Button onClick={this._addVdi}>
             <Icon icon='new-vm-add' />
             {' '}
             {_('newVmAddDisk')}
@@ -1295,7 +1279,7 @@ export default class NewVm extends BaseComponent {
     const { formatMessage } = this.props.intl
     return <Section icon='new-vm-advanced' title='newVmAdvancedPanel' done={this._isAdvancedDone()}>
       <SectionContent column>
-        <Button bsStyle='secondary' onClick={this._toggleState('showAdvanced')}>
+        <Button onClick={this._toggleState('showAdvanced')}>
           {showAdvanced ? _('newVmHideAdvanced') : _('newVmShowAdvanced')}
         </Button>
       </SectionContent>
@@ -1305,7 +1289,7 @@ export default class NewVm extends BaseComponent {
           <Item>
             <input
               checked={bootAfterCreate}
-              onChange={this._getOnChangeCheckbox('bootAfterCreate')}
+              onChange={this._linkState('bootAfterCreate')}
               type='checkbox'
             />
             &nbsp;
@@ -1314,7 +1298,7 @@ export default class NewVm extends BaseComponent {
           <Item>
             <input
               checked={autoPoweron}
-              onChange={this._getOnChangeCheckbox('autoPoweron')}
+              onChange={this._linkState('autoPoweron')}
               type='checkbox'
             />
             &nbsp;
@@ -1328,7 +1312,7 @@ export default class NewVm extends BaseComponent {
           <Item>
             <input
               checked={share}
-              onChange={this._getOnChangeCheckbox('share')}
+              onChange={this._linkState('share')}
               type='checkbox'
             />
             &nbsp;
@@ -1342,7 +1326,7 @@ export default class NewVm extends BaseComponent {
               debounceTimeout={DEBOUNCE_TIMEOUT}
               min={0}
               max={65535}
-              onChange={this._getOnChange('cpuWeight')}
+              onChange={this._linkState('cpuWeight')}
               placeholder={formatMessage(messages.newVmDefaultCpuWeight, { value: XEN_DEFAULT_CPU_WEIGHT })}
               type='number'
               value={cpuWeight}
@@ -1353,7 +1337,7 @@ export default class NewVm extends BaseComponent {
               className='form-control'
               debounceTimeout={DEBOUNCE_TIMEOUT}
               min={0}
-              onChange={this._getOnChange('cpuCap')}
+              onChange={this._linkState('cpuCap')}
               placeholder={formatMessage(messages.newVmDefaultCpuCap, { value: XEN_DEFAULT_CPU_CAP })}
               type='number'
               value={cpuCap}
@@ -1373,14 +1357,14 @@ export default class NewVm extends BaseComponent {
         </SectionContent>,
         <SectionContent>
           <Item label={_('newVmMultipleVms')}>
-            <Toggle value={multipleVms} onChange={this._getOnChange('multipleVms')} />
+            <Toggle value={multipleVms} onChange={this._linkState('multipleVms')} />
           </Item>
           <Item label={_('newVmMultipleVmsPattern')}>
             <DebounceInput
               className='form-control'
               debounceTimeout={DEBOUNCE_TIMEOUT}
               disabled={!multipleVms}
-              onChange={this._getOnChange('namePattern')}
+              onChange={this._linkState('namePattern')}
               placeholder={formatMessage(messages.newVmMultipleVmsPatternPlaceholder)}
               value={namePattern}
             />
@@ -1390,7 +1374,7 @@ export default class NewVm extends BaseComponent {
               className={'form-control'}
               debounceTimeout={DEBOUNCE_TIMEOUT}
               disabled={!multipleVms}
-              onChange={this._getOnChange('seqStart')}
+              onChange={this._linkState('seqStart')}
               type='number'
               value={seqStart}
             />
@@ -1402,13 +1386,13 @@ export default class NewVm extends BaseComponent {
               disabled={!multipleVms}
               max={NB_VMS_MAX}
               min={NB_VMS_MIN}
-              onChange={this._getOnChange('nbVms')}
+              onChange={this._linkState('nbVms')}
               type='number'
               value={nbVms}
             />
             <span className='input-group-btn'>
               <Tooltip content={_('newVmNumberRecalculate')}>
-                <Button bsStyle='secondary' disabled={!multipleVms} onClick={this._updateNbVms}>
+                <Button disabled={!multipleVms} onClick={this._updateNbVms}>
                   <Icon icon='arrow-right' />
                 </Button>
               </Tooltip>
@@ -1422,7 +1406,7 @@ export default class NewVm extends BaseComponent {
           {multipleVms && <LineItem>
             {map(nameLabels, (nameLabel, index) =>
               <Item key={`nameLabel_${index}`}>
-                <input type='text' className='form-control' value={nameLabel} onChange={this._getOnChange('nameLabels', index)} />
+                <input type='text' className='form-control' value={nameLabel} onChange={this._linkState(`nameLabels.${index}`)} />
               </Item>
             )}
           </LineItem>}
@@ -1524,7 +1508,7 @@ export default class NewVm extends BaseComponent {
         <span style={{margin: 'auto'}}>
           <input
             checked={fastClone}
-            onChange={this._getOnChangeCheckbox('fastClone')}
+            onChange={this._linkState('fastClone')}
             type='checkbox'
           />
           {' '}