5.10.3

Fixes #2070

.gitignore

@@ -1,6 +1,7 @@
 /dist/
 /node_modules/
 /src/common/intl/locales/index.js
+/src/common/themes/index.js
 
 npm-debug.log
 npm-debug.log.*

CHANGELOG.md

@@ -1,5 +1,172 @@
 # ChangeLog
 
+## **5.10.0** (2017-05-31)
+
+### Enhancements
+
+- Improve backup log display [\#2239](https://github.com/vatesfr/xo-web/issues/2239)
+- Patch SR detection improvement [\#2215](https://github.com/vatesfr/xo-web/issues/2215)
+- Less strict coalesce detection [\#2207](https://github.com/vatesfr/xo-web/issues/2207)
+- IP pool UI improvement [\#2203](https://github.com/vatesfr/xo-web/issues/2203)
+- Ability to clear "Auto power on" flag for DR-ed VM [\#2097](https://github.com/vatesfr/xo-web/issues/2097)
+- [Delta backup restoration] Choose SR for each VDIs [\#2070](https://github.com/vatesfr/xo-web/issues/2070)
+- Ability to forget an host (even if no longer present) [\#1934](https://github.com/vatesfr/xo-web/issues/1934)
+
+### Bug fixes
+
+- Cross pool migrate fail [\#2248](https://github.com/vatesfr/xo-web/issues/2248)
+- ActionButtons with modals stay in pending state forever [\#2222](https://github.com/vatesfr/xo-web/issues/2222)
+- Permission issue for a user on self service VMs [\#2212](https://github.com/vatesfr/xo-web/issues/2212)
+- Self-Service resource loophole [\#2198](https://github.com/vatesfr/xo-web/issues/2198)
+- Backup log no longer shows the name of destination VM [\#2195](https://github.com/vatesfr/xo-web/issues/2195)
+- State not restored when exiting modal dialog [\#2194](https://github.com/vatesfr/xo-web/issues/2194)
+- [Xapi#exportDeltaVm] Cannot read property 'managed' of undefined [\#2189](https://github.com/vatesfr/xo-web/issues/2189)
+- VNC keyboard layout change [\#404](https://github.com/vatesfr/xo-web/issues/404)
+
+## **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
+
+- Improve ActionButton error reporting [\#2048](https://github.com/vatesfr/xo-web/issues/2048)
+- Home view master checkbox UI issue [\#2027](https://github.com/vatesfr/xo-web/issues/2027)
+- HU Translation [\#2019](https://github.com/vatesfr/xo-web/issues/2019)
+- [Usage report] Add name for all objects [\#2017](https://github.com/vatesfr/xo-web/issues/2017)
+- [Home] Improve inter-types linkage [\#2012](https://github.com/vatesfr/xo-web/issues/2012)
+- Remove bootable checkboxes in VM creation [\#2007](https://github.com/vatesfr/xo-web/issues/2007)
+- Do not display bootable toggles for disks of non-PV VMs [\#1996](https://github.com/vatesfr/xo-web/issues/1996)
+- Try to match network VLAN for VM migration modal [\#1990](https://github.com/vatesfr/xo-web/issues/1990)
+- [Usage reports] Add VM names in addition to UUIDs [\#1984](https://github.com/vatesfr/xo-web/issues/1984)
+- Host affinity in "advanced" VM creation [\#1983](https://github.com/vatesfr/xo-web/issues/1983)
+- Add job tag in backup logs [\#1982](https://github.com/vatesfr/xo-web/issues/1982)
+- Possibility to add a label/description to servers [\#1965](https://github.com/vatesfr/xo-web/issues/1965)
+- Possibility to create shared VM in a resource set [\#1964](https://github.com/vatesfr/xo-web/issues/1964)
+- Clearer display of disabled (backup) jobs [\#1958](https://github.com/vatesfr/xo-web/issues/1958)
+- Job should have a configurable timeout [\#1956](https://github.com/vatesfr/xo-web/issues/1956)
+- Sort failed VMs in backup report [\#1950](https://github.com/vatesfr/xo-web/issues/1950)
+- Support for UNIX socket path [\#1944](https://github.com/vatesfr/xo-web/issues/1944)
+- Interface - Host Patching - Button Verbiage [\#1911](https://github.com/vatesfr/xo-web/issues/1911)
+- Display if a VM is in Self Service (and which group) [\#1905](https://github.com/vatesfr/xo-web/issues/1905)
+- Install supplemental pack on a whole pool [\#1896](https://github.com/vatesfr/xo-web/issues/1896)
+- Allow VM snapshots with ACLs [\#1865](https://github.com/vatesfr/xo-web/issues/1886)
+- Icon to indicate if a snapshot is quiesce [\#1858](https://github.com/vatesfr/xo-web/issues/1858)
+- Pool Ips input too permissive [\#1731](https://github.com/vatesfr/xo-web/issues/1731)
+- Select is going on top after each choice [\#1359](https://github.com/vatesfr/xo-web/issues/1359)
+
+### Bug fixes
+
+- Missing objects should be displayed in backup edition [\#2052](https://github.com/vatesfr/xo-web/issues/2052)
+- Search bar content changes while typing [\#2035](https://github.com/vatesfr/xo-web/issues/2035)
+- VM.$guest_metrics.PV_drivers_up_to_date is deprecated in XS 7.1 [\#2024](https://github.com/vatesfr/xo-web/issues/2024)
+- Bootable flag selection checkbox for extra disk not fetched [\#1994](https://github.com/vatesfr/xo-web/issues/1994)
+- Home view − Changing type must reset paging [\#1993](https://github.com/vatesfr/xo-web/issues/1993)
+- XOSAN menu item should only be displayed to admins [\#1968](https://github.com/vatesfr/xo-web/issues/1968)
+- Object type change are not correctly handled in UI [\#1967](https://github.com/vatesfr/xo-web/issues/1967)
+- VM creation is stuck when using ISO/DVD as install method [\#1966](https://github.com/vatesfr/xo-web/issues/1966)
+- Install pack on whole pool fails [\#1957](https://github.com/vatesfr/xo-web/issues/1957)
+- Consoles are broken in next-release [\#1954](https://github.com/vatesfr/xo-web/issues/1954)
+- [VHD merge] Increase BAT when necessary [\#1939](https://github.com/vatesfr/xo-web/issues/1939)
+- Issue on VM restore time [\#1936](https://github.com/vatesfr/xo-web/issues/1936)
+- Two remotes should not be able to have the same name [\#1879](https://github.com/vatesfr/xo-web/issues/1879)
+- Selfservice limits not honored after VM creation [\#1695](https://github.com/vatesfr/xo-web/issues/1695)
+
+## **5.6.0** (2017-01-27)
+
+Reporting, LVM File level restore.
+
+### Enhancements
+
+- Do not stop patches install if already applied [\#1904](https://github.com/vatesfr/xo-web/issues/1904)
+- Improve scheduling UI [\#1893](https://github.com/vatesfr/xo-web/issues/1893)
+- Smart backup and tag [\#1885](https://github.com/vatesfr/xo-web/issues/1885)
+- Missing embeded API documention [\#1882](https://github.com/vatesfr/xo-web/issues/1882)
+- Add local DVD in CD selector [\#1880](https://github.com/vatesfr/xo-web/issues/1880)
+- File level restore for LVM [\#1878](https://github.com/vatesfr/xo-web/issues/1878)
+- Restore multiple files from file level restore [\#1877](https://github.com/vatesfr/xo-web/issues/1877)
+- Add a VM tab for host & pool views [\#1864](https://github.com/vatesfr/xo-web/issues/1864)
+- Icon to indicate if a snapshot is quiesce [\#1858](https://github.com/vatesfr/xo-web/issues/1858)
+- UI for disconnect hosts comp [\#1833](https://github.com/vatesfr/xo-web/issues/1833)
+- Eject all xs-guest.iso in a pool [\#1798](https://github.com/vatesfr/xo-web/issues/1798)
+- Display installed supplemental pack on host [\#1506](https://github.com/vatesfr/xo-web/issues/1506)
+- Install supplemental pack on host comp [\#1460](https://github.com/vatesfr/xo-web/issues/1460)
+- Pool-wide combined stats [\#1324](https://github.com/vatesfr/xo-web/issues/1324)
+
+### Bug fixes
+
+- IP-address not released when VM removed [\#1906](https://github.com/vatesfr/xo-web/issues/1906)
+- Interface broken due to new Bootstrap Alpha [\#1871](https://github.com/vatesfr/xo-web/issues/1871)
+- Self service recompute all limits broken [\#1866](https://github.com/vatesfr/xo-web/issues/1866)
+- Patch not found error for XS 6.5 [\#1863](https://github.com/vatesfr/xo-web/issues/1863)
+- Convert To Template issues [\#1855](https://github.com/vatesfr/xo-web/issues/1855)
+- Removing PIF seems to fail [\#1853](https://github.com/vatesfr/xo-web/issues/1853)
+- Depth should be >= 1 in backup creation [\#1851](https://github.com/vatesfr/xo-web/issues/1851)
+- Wrong link in Dashboard > Health [\#1850](https://github.com/vatesfr/xo-web/issues/1850)
+- Incorrect file dates shown in new File Restore feature [\#1840](https://github.com/vatesfr/xo-web/issues/1840)
+- IP allocation problem [\#1747](https://github.com/vatesfr/xo-web/issues/1747)
+- Selfservice limits not honored after VM creation [\#1695](https://github.com/vatesfr/xo-web/issues/1695)
+
 ## **5.5.0** (2016-12-20)
 
 File level restore.
@@ -177,7 +344,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.6.2",
+  "version": "5.10.3",
   "license": "AGPL-3.0",
   "description": "Web interface client for Xen-Orchestra",
   "keywords": [
@@ -31,9 +31,11 @@
     "npm": ">=3"
   },
   "devDependencies": {
+    "@nraynaud/novnc": "^0.6.1-1",
     "ansi_up": "^1.3.0",
     "asap": "^2.0.4",
     "babel-eslint": "^7.0.0",
+    "babel-plugin-dev": "^1.0.0",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-react-constant-elements": "^6.5.0",
@@ -60,27 +62,27 @@
     "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-csso": "^2.0.0",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-csso": "^3.0.0",
     "gulp-embedlr": "^0.5.2",
     "gulp-plumber": "^1.1.0",
     "gulp-pug": "^3.1.0",
     "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",
@@ -88,20 +90,19 @@
     "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",
@@ -113,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",
@@ -123,15 +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",
-    "standard": "^8.4.0",
+    "reselect": "^2.5.4",
+    "semver": "^5.3.0",
+    "standard": "^10.0.0",
+    "styled-components": "^2.1.0",
     "superagent": "^3.5.0",
     "tar-stream": "^1.5.2",
+    "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"
   },
@@ -169,6 +174,8 @@
       }
     },
     "plugins": [
+      "dev",
+      "lodash",
       "transform-decorators-legacy",
       "transform-runtime"
     ],
@@ -184,6 +191,9 @@
     ]
   },
   "standard": {
+    "globals": [
+      "__DEV__"
+    ],
     "ignore": [
       "dist"
     ],

src/common/action-bar.js

@@ -1,14 +1,9 @@
-import _ from 'intl'
-import ActionButton from 'action-button'
-import map from 'lodash/map'
 import React from 'react'
-import Tooltip from 'tooltip'
-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>
@@ -17,18 +12,24 @@ const ActionBar = ({ actions, param }) => (
         return
       }
 
-      const { handler, handlerParam = param, label, icon, redirectOnSuccess } = button
-      return <Tooltip key={index} content={_(label)}>
-        <ActionButton
-          key={index}
-          btnStyle='secondary'
-          handler={handler || noop}
-          handlerParam={handlerParam}
-          icon={icon}
-          redirectOnSuccess={redirectOnSuccess}
-          size='large'
-        />
-      </Tooltip>
+      const {
+        handler,
+        handlerParam = param,
+        icon,
+        label,
+        pending,
+        redirectOnSuccess
+      } = button
+      return <ActionButton
+        key={index}
+        handler={handler || noop}
+        handlerParam={handlerParam}
+        icon={icon}
+        pending={pending}
+        redirectOnSuccess={redirectOnSuccess}
+        size='large'
+        tooltip={_(label)}
+      />
     })}
   </ButtonGroup>
 )

src/common/action-button.js

@@ -1,59 +1,82 @@
-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
     }
 
     const {
+      children,
       handler,
-      handlerParam
+      handlerParam,
+      tooltip
     } = this.props
 
     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({
@@ -68,6 +91,7 @@ export default class ActionButton extends Component {
       // ignore when undefined because it usually means that the action has been canceled
       if (error !== undefined) {
         logError(error)
+        _error(children || tooltip || error.name, error.message || String(error))
       }
     }
   }
@@ -97,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/auto-controlled-input.js

@@ -1,87 +0,0 @@
-import React from 'react'
-import { isFunction, omit } from 'lodash'
-
-import Component from './base-component'
-import getEventValue from './get-event-value'
-
-const __DEV__ = process.env.NODE_ENV !== 'production'
-
-// This decorator can be used on a controlled input component to make
-// it able to automatically handled the uncontrolled mode.
-export default options => ControlledInput => {
-  class AutoControlledInput extends Component {
-    constructor (props) {
-      super()
-
-      const opts = isFunction(options) ? options(props) : options
-      const controlled = this._controlled = 'value' in props
-      if (!controlled) {
-        this.state.value = props.defaultValue || opts && opts.defaultValue
-
-        this._onChange = event => {
-          let defaultPrevented = false
-
-          const { onChange } = this.props
-          if (onChange) {
-            onChange(event)
-            defaultPrevented = event && event.defaultPrevented
-          }
-
-          if (!defaultPrevented) {
-            this.setState({ value: getEventValue(event) })
-          }
-        }
-      } else if (__DEV__ && 'defaultValue' in props) {
-        throw new Error(`${this.constructor.name}: controlled component should not have a default value`)
-      }
-    }
-
-    get value () {
-      return this._controlled
-        ? this.props.value
-        : this.state.value
-    }
-
-    set value (value) {
-      if (__DEV__ && this._controlled) {
-        throw new Error(`${this.constructor.name}: should not set value on controlled component`)
-      }
-
-      this.setState({ value })
-    }
-
-    render () {
-      if (this._controlled) {
-        return <ControlledInput {...this.props} />
-      }
-
-      return <ControlledInput
-        {...omit(this.props, 'defaultValue')}
-        onChange={this._onChange}
-        value={this.state.value}
-      />
-    }
-  }
-
-  if (__DEV__) {
-    AutoControlledInput.prototype.componentWillReceiveProps = function (newProps) {
-      const { name } = this.constructor
-      const controlled = this._controlled
-      const newControlled = 'value' in newProps
-
-      if (!controlled) {
-        if (newControlled) {
-          throw new Error(`${name}: uncontrolled component should not become controlled`)
-        }
-      } else if (!newControlled) {
-        throw new Error(`${name}: controlled component should not become uncontrolled`)
-      }
-
-      if (newProps.defaultValue !== this.props.defaultValue) {
-        throw new Error(`${name}: default value should not change`)
-      }
-    }
-  }
-
-  return AutoControlledInput
-}

src/common/base-component.js

@@ -3,11 +3,9 @@ import includes from 'lodash/includes'
 import isArray from 'lodash/isArray'
 import forEach from 'lodash/forEach'
 import map from 'lodash/map'
-import { Component } from 'react'
+import { PureComponent } from 'react'
 
 import getEventValue from './get-event-value'
-import invoke from './invoke'
-import shallowEqual from './shallow-equal'
 
 // Should components logs every renders?
 //
@@ -19,7 +17,7 @@ const cowSet = (object, path, value, depth) => {
     return value
   }
 
-  object = clone(object)
+  object = object != null ? clone(object) : {}
   const prop = path[depth]
   object[prop] = cowSet(object[prop], path, value, depth + 1)
   return object
@@ -36,7 +34,7 @@ const get = (object, path, depth) => {
     : get(object[prop], path, depth)
 }
 
-export default class BaseComponent extends Component {
+export default class BaseComponent extends PureComponent {
   constructor (props, context) {
     super(props, context)
 
@@ -46,30 +44,30 @@ export default class BaseComponent extends Component {
     this._linkedState = null
 
     if (VERBOSE) {
-      this.render = invoke(this.render, render => () => {
+      this.render = (render => () => {
         console.log('render', this.constructor.name)
 
         return render.call(this)
-      })
+      })(this.render)
     }
   }
 
   // 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 {
@@ -93,9 +91,9 @@ export default class BaseComponent extends Component {
   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
     }
 
@@ -112,13 +110,6 @@ export default class BaseComponent extends Component {
       })
     })
   }
-
-  shouldComponentUpdate (newProps, newState) {
-    return !(
-      shallowEqual(this.props, newProps) &&
-      shallowEqual(this.state, newState)
-    )
-  }
 }
 
 if (VERBOSE) {

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/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'
@@ -394,7 +394,7 @@ const MAP_TYPE_SELECT = {
   value: propTypes.oneOfType([
     propTypes.string,
     propTypes.object
-  ]).isRequired
+  ])
 })
 export class XoSelect extends Editable {
   get value () {

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

@@ -1,10 +1,10 @@
-import autoControlledInput from 'auto-controlled-input'
+import uncontrollableInput from 'uncontrollable-input'
 import Component from 'base-component'
 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'
 
@@ -20,7 +20,7 @@ import Select from './select'
   required: propTypes.bool,
   value: propTypes.any
 })
-@autoControlledInput()
+@uncontrollableInput()
 export default class SelectPlainObject extends Component {
   componentDidMount () {
     const { options, value } = this.props

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

@@ -0,0 +1,46 @@
+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-decorator'
+
+@uncontrollableInput()
+@propTypes({
+  className: propTypes.string,
+  onChange: propTypes.func,
+  icon: propTypes.string,
+  iconOn: propTypes.string,
+  iconOff: propTypes.string,
+  iconSize: propTypes.number,
+  value: propTypes.bool
+})
+export default class Toggle extends Component {
+  static defaultProps = {
+    iconOn: 'toggle-on',
+    iconOff: 'toggle-off',
+    iconSize: 2
+  }
+
+  _toggle = () => {
+    const { props } = this
+    props.onChange(!props.value)
+  }
+
+  render () {
+    const { props } = this
+
+    return (
+      <Icon
+        className={classNames(
+          props.disabled ? 'text-muted' : props.value ? 'text-success' : null,
+          props.className
+        )}
+        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/form/toggle/index.js

@@ -1,90 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-import Component from '../../base-component'
-import Icon from '../../icon'
-import propTypes from '../../prop-types'
-
-import styles from './index.css'
-
-@propTypes({
-  className: propTypes.string,
-  defaultValue: propTypes.bool,
-  onChange: propTypes.func,
-  icon: propTypes.string,
-  iconOn: propTypes.string,
-  iconOff: propTypes.string,
-  iconSize: propTypes.number,
-  value: propTypes.bool
-})
-export default class Toggle extends Component {
-  static defaultProps = {
-    iconOn: 'toggle-on',
-    iconOff: 'toggle-off',
-    iconSize: 2
-  }
-
-  get value () {
-    const { props } = this
-
-    const { value } = props
-    if (value != null) {
-      return value
-    }
-
-    const { input } = this.refs
-    if (input) {
-      return input.checked
-    }
-
-    return props.defaultValue || false
-  }
-
-  set value (value) {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      this.props.value != null
-    ) {
-      throw new Error('cannot set value of controlled Toggle')
-    }
-
-    this.refs.input.checked = Boolean(value)
-    this.forceUpdate()
-  }
-
-  _onChange = event => {
-    if (this.props.value == null) {
-      this.forceUpdate()
-    }
-
-    const { onChange } = this.props
-    onChange && onChange(event.target.checked)
-  }
-
-  render () {
-    const { props, value } = this
-
-    return (
-      <label
-        className={classNames(
-          props.disabled ? 'text-muted' : value ? 'text-success' : null,
-          props.className
-        )}
-      >
-        <Icon
-          icon={props.icon || (value ? props.iconOn : props.iconOff)}
-          size={props.iconSize}
-        />
-        <input
-          checked={props.value}
-          className={styles.checkbox}
-          defaultChecked={props.defaultValue}
-          disabled={props.disabled}
-          onChange={this._onChange}
-          ref='input'
-          type='checkbox'
-        />
-      </label>
-    )
-  }
-}

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

@@ -1,4 +1,9 @@
+const common = {
+  homeFilterNone: ''
+}
+
 export const VM = {
+  ...common,
   homeFilterPendingVms: 'current_operations:"" ',
   homeFilterNonRunningVms: '!power_state:running ',
   homeFilterHvmGuests: 'virtualizationMode:hvm ',
@@ -7,18 +12,22 @@ export const VM = {
 }
 
 export const host = {
+  ...common,
   homeFilterRunningHosts: 'power_state:running ',
   homeFilterTags: 'tags:'
 }
 
 export const pool = {
+  ...common,
   homeFilterTags: 'tags:'
 }
 
 export const vmTemplate = {
+  ...common,
   homeFilterTags: 'tags:'
 }
 
 export const SR = {
+  ...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/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',
@@ -123,6 +128,7 @@ var messages = {
   homeAllHosts: 'Hosts',
   homeAllTags: 'Tags',
   homeNewVm: 'New VM',
+  homeFilterNone: 'None',
   homeFilterRunningHosts: 'Running hosts',
   homeFilterDisabledHosts: 'Disabled hosts',
   homeFilterRunningVms: 'Running VMs',
@@ -212,8 +218,15 @@ var messages = {
   cronPattern: 'Cron Pattern:',
   backupEditNotFoundTitle: 'Cannot edit backup',
   backupEditNotFoundMessage: 'Missing required info for edition',
+  successfulJobCall: 'Successful',
+  failedJobCall: 'Failed',
+  jobCallInProgess: 'In progress',
+  jobTransferredDataSize: 'size:',
+  jobTransferredDataSpeed: 'speed:',
   job: 'Job',
-  jobId: 'Job ID',
+  jobModalTitle: 'Job {job}',
+  jobId: 'ID',
+  jobType: 'Type',
   jobName: 'Name',
   jobNamePlaceholder: 'Name of your job (forbidden: "_")',
   jobStart: 'Start',
@@ -224,6 +237,8 @@ var messages = {
   jobTag: 'Tag',
   jobScheduling: 'Scheduling',
   jobState: 'State',
+  jobStateEnabled: 'Enabled',
+  jobStateDisabled: 'Disabled',
   jobTimezone: 'Timezone',
   jobServerTimezone: 'Server',
   runJob: 'Run job',
@@ -240,6 +255,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 a VM is considered failed)',
   jobSchedules: 'Schedules',
   jobScheduleNamePlaceHolder: 'Name of your schedule',
   jobScheduleJobPlaceHolder: 'Select a Job',
@@ -265,9 +281,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',
@@ -283,7 +300,10 @@ var messages = {
   remoteTestError: 'Error',
   remoteTestStep: 'Test Step',
   remoteTestFile: 'Test file',
+  remoteTestName: 'Test name',
+  remoteTestNameFailure: 'Remote name already exists!',
   remoteTestSuccessMessage: 'The remote appears to work correctly',
+  remoteConnectionFailed: 'Connection failed',
 
   // ------ Remote -----
   remoteName: 'Name',
@@ -291,11 +311,14 @@ var messages = {
   remoteState: 'State',
   remoteDevice: 'Device',
   remoteShare: 'Share',
+  remoteAction: 'Action',
   remoteAuth: 'Auth',
   remoteMounted: 'Mounted',
   remoteUnmounted: 'Unmounted',
   remoteConnectTip: 'Connect',
   remoteDisconnectTip: 'Disconnect',
+  remoteConnected: 'Connected',
+  remoteDisconnected: 'Disconnected',
   remoteDeleteTip: 'Delete',
   remoteNamePlaceHolder: 'remote name *',
   remoteMyNamePlaceHolder: 'Name *',
@@ -370,7 +393,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 ------
@@ -443,6 +466,8 @@ var messages = {
   displayAllVMs: 'Display all VMs of this pool',
   // ----- Pool tabs -----
   hostsTabName: 'Hosts',
+  vmsTabName: 'Vms',
+  srsTabName: 'Srs',
   // ----- Pool advanced tab -----
   poolHaStatus: 'High Availability',
   poolHaEnabled: 'Enabled',
@@ -473,6 +498,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 ------
@@ -486,7 +515,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 -----
@@ -540,6 +569,7 @@ var messages = {
   pifStatusDisconnected: 'Disconnected',
   pifNoInterface: 'No physical interface detected',
   pifInUse: 'This interface is currently in use',
+  pifAction: 'Action',
   defaultLockingMode: 'Default locking mode',
   pifConfigureIp: 'Configure IP address',
   configIpErrorTitle: 'Invalid parameters',
@@ -552,6 +582,7 @@ var messages = {
   addSrDeviceButton: 'Add a storage',
   srNameLabel: 'Name',
   srType: 'Type',
+  pbdAction: 'Action',
   pbdStatus: 'Status',
   pbdStatusConnected: 'Connected',
   pbdStatusDisconnected: 'Disconnected',
@@ -577,6 +608,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',
@@ -606,6 +641,7 @@ var messages = {
   vmSettings: 'Started {ago}',
   vmCurrentStatus: 'Current status:',
   vmNotRunning: 'Not running',
+  vmHaltedSince: 'Halted {ago}',
 
   // ----- VM general tab -----
   noToolsDetected: 'No Xen tools detected',
@@ -630,7 +666,6 @@ var messages = {
   copyToClipboardLabel: 'Copy',
   ctrlAltDelButtonLabel: 'Ctrl+Alt+Del',
   tipLabel: 'Tip:',
-  tipConsoleLabel: 'Due to a XenServer issue, non-US keyboard layouts aren\'t well supported. Switch your own layout to US to workaround it.',
   hideHeaderTooltip: 'Hide infos',
   showHeaderTooltip: 'Show infos',
 
@@ -654,6 +689,8 @@ var messages = {
   vdiBootOrder: 'Boot order',
   vdiNameLabel: 'Name',
   vdiNameDescription: 'Description',
+  vdiPool: 'Pool',
+  vdiDisconnect: 'Disconnect',
   vdiTags: 'Tags',
   vdiSize: 'Size',
   vdiSr: 'SR',
@@ -665,18 +702,22 @@ 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',
-  vdbCreate: 'Create',
-  vdbNamePlaceHolder: 'Disk name',
-  vdbSizePlaceHolder: 'Size',
+  vbdBootable: 'Bootable',
+  vbdReadonly: 'Readonly',
+  vbdAction: 'Action',
+  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',
   resetBootOption: 'Reset',
 
@@ -701,6 +742,7 @@ var messages = {
   vifLockedNetworkNoIps: 'Network locked and no IPs are allowed for this interface',
   vifUnLockedNetwork: 'Network not locked',
   vifUnknownNetwork: 'Unknown network',
+  vifAction: 'Action',
   vifCreate: 'Create',
 
   // ----- VM snapshot tab -----
@@ -746,12 +788,21 @@ var messages = {
   osKernel: 'OS kernel',
   autoPowerOn: 'Auto power on',
   ha: 'HA',
+  vmAffinityHost: 'Affinity host',
+  vmVga: 'VGA',
+  vmVideoram: 'Video RAM',
+  noAffinityHost: 'None',
   originalTemplate: 'Original template',
   unknownOsName: 'Unknown',
   unknownOsKernel: 'Unknown',
   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:',
@@ -793,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',
@@ -818,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',
@@ -855,7 +907,6 @@ var messages = {
   newVmAddInterface: 'Add interface',
   newVmDisksPanel: 'Disks',
   newVmSrLabel: 'SR',
-  newVmBootableLabel: 'Bootable',
   newVmSizeLabel: 'Size',
   newVmAddDisk: 'Add disk',
   newVmSummaryPanel: 'Summary',
@@ -873,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:',
@@ -881,9 +932,11 @@ var messages = {
   newVmFirstIndex: 'First index:',
   newVmNumberRecalculate: 'Recalculate VMs number',
   newVmNameRefresh: 'Refresh VMs name',
+  newVmAffinityHost: 'Affinity host',
   newVmAdvancedPanel: 'Advanced',
   newVmShowAdvanced: 'Show advanced settings',
   newVmHideAdvanced: 'Hide advanced settings',
+  newVmShare: 'Share this VM',
 
   // ----- Self -----
   resourceSets: 'Resource sets',
@@ -952,6 +1005,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',
@@ -961,6 +1015,10 @@ var messages = {
   availableBackupsColumn: 'Available Backups',
   backupRestoreErrorTitle: 'Missing parameters',
   backupRestoreErrorMessage: 'Choose a SR and a backup',
+  backupRestoreSelectDefaultSr: 'Select default SR…',
+  backupRestoreChooseSrForEachVdis: 'Choose a SR for each VDI',
+  backupRestoreVdiLabel: 'VDI',
+  backupRestoreSrLabel: 'SR',
   displayBackup: 'Display backups',
   importBackupTitle: 'Import VM',
   importBackupMessage: 'Starting your backup import',
@@ -985,7 +1043,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',
@@ -993,42 +1051,53 @@ 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',
   migrateVmSelectHost: 'Select a destination host:',
   migrateVmSelectMigrationNetwork: 'Select a migration network:',
-  migrateVmSelectSrs: 'For each VDI, select an SR:',
   migrateVmSelectNetworks: 'For each VIF, select a network:',
   migrateVmsSelectSr: 'Select a destination SR:',
   migrateVmsSelectSrIntraPool: 'Select a destination SR for local disks:',
   migrateVmsSelectNetwork: 'Select a network on which to connect each VIF:',
   migrateVmsSmartMapping: 'Smart mapping',
-  migrateVmName: 'Name',
-  migrateVmSr: 'SR',
   migrateVmVif: 'VIF',
   migrateVmNetwork: 'Network',
   migrateVmNoTargetHost: 'No target host',
   migrateVmNoTargetHostMessage: 'A target host is required to migrate a VM',
+  migrateVmNoDefaultSrError: 'No default SR',
+  migrateVmNotConnectedDefaultSrError: 'Default SR not connected to host',
+  chooseSrForEachVdisModalSelectSr: 'For each VDI, select an SR:',
+  chooseSrForEachVdisModalMainSr: 'Select main SR…',
+  chooseSrForEachVdisModalVdiLabel: 'VDI',
+  chooseSrForEachVdisModalSrLabel: 'SR*',
+  chooseSrForEachVdisModalOptionalEntry: '* optional',
   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',
@@ -1053,25 +1122,32 @@ var messages = {
   trialReadyModalText: 'During the trial period, XOA need to have a working internet connection. This limitation does not apply for our paid plans!',
 
   // ----- Servers -----
+  serverLabel: 'Label',
   serverHost: 'Host',
   serverUsername: 'Username',
   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',
   serverPlaceHolderAddress: 'address[:port]',
+  serverPlaceHolderLabel: 'label',
   serverConnect: 'Connect',
   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',
@@ -1090,6 +1166,11 @@ var messages = {
   detachHostModalMessage: 'Are you sure you want to detach {host} from its pool? THIS WILL REMOVE ALL VMs ON ITS LOCAL STORAGE AND REBOOT THE HOST.',
   detachHost: 'Detach',
 
+  // ----- Forget host -----
+  forgetHostModalTitle: 'Forget host',
+  forgetHostModalMessage: 'Are you sure you want to forget {host} from its pool? Be sure this host can\'t be back online, or use detach instead.',
+  forgetHost: 'Forget',
+
   // ----- Network -----
   newNetworkCreate: 'Create network',
   newBondedNetworkCreate: 'Create bonded network',
@@ -1191,6 +1272,10 @@ var messages = {
   disconnectPifConfirm: 'Are you sure you want to disconnect this PIF?',
   deletePif: 'Delete PIF',
   deletePifConfirm: 'Are you sure you want to delete this PIF?',
+  pifConnected: 'Connected',
+  pifDisconnected: 'Disconnected',
+  pifPhysicallyConnected: 'Physically connected',
+  pifPhysicallyDisconnected: 'Physically disconnected',
 
   // ----- User -----
   username: 'Username',
@@ -1236,6 +1321,8 @@ var messages = {
   logDeleteAll: 'Delete all logs',
   logDeleteAllTitle: 'Delete all logs',
   logDeleteAllMessage: 'Are you sure you want to delete all the logs?',
+  logIndicationToEnable: 'Click to enable',
+  logIndicationToDisable: 'Click to disable',
   reportBug: 'Report a bug',
 
   // ----- IPs ------
@@ -1250,6 +1337,7 @@ var messages = {
   ipsVifs: 'VIFs',
   ipsNotUsed: 'Not used',
   ipPoolUnknownVif: 'unknown VIF',
+  ipPoolNameAlreadyExists: 'Name already exists',
 
   // ----- Shortcuts -----
   shortcutModalTitle: 'Keyboard shortcuts',
@@ -1314,17 +1402,18 @@ 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',
   xosanRedundancy: 'Redundancy',
-  xosanRedundancyN: 'Redundancy {redundancy}',
   xosanCapacity: 'Capacity',
   xosanAvailableSpace: 'Available space',
   xosanDiskLossLegend: '* Can fail without data loss',
-  xosanCreate: 'Create XOSAN',
+  xosanCreate: 'Create',
   xosanInstalling: 'Installing XOSAN. Please wait...',
-  xosanBadVersion: 'You need XenServer 7 to install XOSAN',
   xosanCommunity: 'No XOSAN available for Community Edition',
   // Pack download modal
   xosanInstallCloudPlugin: 'Install cloud plugin first',
@@ -1334,7 +1423,9 @@ var messages = {
   xosanRegisterBeta: 'Register for the XOSAN beta',
   xosanSuccessfullyRegistered: 'You have successfully registered for the XOSAN beta. Please wait until your request has been approved.',
   xosanInstallPackOnHosts: 'Install XOSAN pack on these hosts:',
-  xosanInstallPack: 'Install {pack} v{version}?'
+  xosanInstallPack: 'Install {pack} v{version}?',
+  xosanNoPackFound: 'No compatible XOSAN pack found for your XenServer versions.',
+  xosanPackRequirements: 'At least one of these version requirements must be satisfied by all the hosts in this pool:'
 
 }
 forEach(messages, function (message, id) {

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

@@ -1,8 +1,12 @@
 import React from 'react'
 
+import _ from 'intl'
 import ActionButton from './action-button'
 import Component from './base-component'
-import propTypes from './prop-types'
+import Icon from 'icon'
+import propTypes from './prop-types-decorator'
+import Tooltip from 'tooltip'
+import { alert } from 'modal'
 import { connectStore } from './utils'
 import { SelectVdi } from './select-objects'
 import {
@@ -51,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))
       )
     }
   )
@@ -69,8 +74,10 @@ export default class IsoDevice extends Component {
 
   _handleEject = () => ejectCd(this.props.vm)
 
+  _showWarning = () => alert(_('cdDriveNotInstalled'), _('cdDriveInstallation'))
+
   render () {
-    const { mountedIso } = this.props
+    const {cdDrive, mountedIso} = this.props
 
     return (
       <div className='input-group'>
@@ -81,12 +88,24 @@ export default class IsoDevice extends Component {
         />
         <span className='input-group-btn'>
           <ActionButton
-            btnStyle='secondary'
             disabled={!mountedIso}
             handler={this._handleEject}
             icon='vm-eject'
           />
         </span>
+        {mountedIso && !cdDrive.device &&
+          <Tooltip content={_('cdDriveNotInstalled')}>
+            <a
+              className='text-warning btn btn-link'
+              onClick={this._showWarning}
+            >
+              <Icon
+                icon='alarm'
+                size='lg'
+              />
+            </a>
+          </Tooltip>
+        }
       </div>
     )
   }

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

@@ -1,26 +0,0 @@
-import { Component } from 'react'
-
-import propTypes from '../prop-types'
-
-// ===================================================================
-
-@propTypes({
-  disabled: propTypes.bool,
-  label: propTypes.any.isRequired,
-  onChange: propTypes.func,
-  placeholder: propTypes.string,
-  required: propTypes.bool,
-  schema: propTypes.object.isRequired,
-  uiSchema: propTypes.object,
-  defaultValue: propTypes.any
-})
-export default class AbstractInput extends Component {
-  set value (value) {
-    this.refs.input.value = value === undefined ? '' : String(value)
-  }
-
-  get value () {
-    const { value } = this.refs.input
-    return !value ? undefined : value
-  }
-}

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

@@ -1,10 +1,12 @@
-import React, { Component, cloneElement } from 'react'
-import map from 'lodash/map'
-import filter from 'lodash/filter'
+import React from 'react'
+import uncontrollableInput from 'uncontrollable-input'
+import { filter, map } from 'lodash'
 
 import _ from '../intl'
-import propTypes from '../prop-types'
-import { propsEqual } from '../utils'
+import Button from '../button'
+import Component from '../base-component'
+import propTypes from '../prop-types-decorator'
+import { EMPTY_ARRAY } from '../utils'
 
 import GenericInput from './generic-input'
 import {
@@ -12,175 +14,110 @@ import {
   forceDisplayOptionalAttr
 } from './helpers'
 
-// ===================================================================
-
-class ArrayItem extends Component {
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.setState({
-      use: true
-    }, () => {
-      this.refs.input.value = value
-    })
-  }
-
-  render () {
-    const { children } = this.props
-
-    return (
-      <li className='list-group-item clearfix'>
-        {cloneElement(children, {
-          ref: 'input'
-        })}
-        <button disabled={children.props.disabled} className='btn btn-danger pull-right' type='button' onClick={this.props.onDelete}>
-          {_('remove')}
-        </button>
-      </li>
-    )
-  }
-}
-
-// ===================================================================
-
 @propTypes({
   depth: propTypes.number,
   disabled: propTypes.bool,
   label: propTypes.any.isRequired,
   required: propTypes.bool,
   schema: propTypes.object.isRequired,
-  uiSchema: propTypes.object,
-  defaultValue: propTypes.array
+  uiSchema: propTypes.object
 })
-export default class ArrayInput extends Component {
-  constructor (props) {
-    super(props)
-
-    this._nextChildKey = 0
-
-    this.state = {
-      use: props.required || forceDisplayOptionalAttr(props),
-      children: this._makeChildren(props)
-    }
+@uncontrollableInput()
+export default class ObjectInput extends Component {
+  state = {
+    use: this.props.required || forceDisplayOptionalAttr(this.props)
   }
 
-  get value () {
-    if (this.state.use) {
-      return map(this.refs, 'value')
-    }
+  _onAddItem = () => {
+    const { props } = this
+    props.onChange((props.value || EMPTY_ARRAY).concat(undefined))
   }
 
-  set value (value = []) {
-    this.setState({
-      children: this._makeChildren({ ...this.props, value })
-    })
+  _onChangeItem = (value, name) => {
+    const key = Number(name)
+
+    const { props } = this
+    const newValue = (props.value || EMPTY_ARRAY).slice()
+    newValue[key] = value
+    props.onChange(newValue)
   }
 
-  _handleOptionalChange = event => {
-    this.setState({
-      use: event.target.checked
-    })
-  }
-
-  _handleAdd = () => {
-    const { children } = this.state
-    this.setState({
-      children: children.concat(this._makeChild(this.props))
-    })
-  }
-
-  _remove (key) {
-    this.setState({
-      children: filter(this.state.children, child => child.key !== key)
-    })
-  }
-
-  _makeChild (props, defaultValue) {
-    const key = String(this._nextChildKey++)
-    const {
-      schema: {
-        items
-      }
-    } = props
-
-    return (
-      <ArrayItem key={key} onDelete={() => { this._remove(key) }}>
-        <GenericInput
-          depth={props.depth}
-          disabled={props.disabled}
-          label={items.title || _('item')}
-          required
-          schema={items}
-          uiSchema={props.uiSchema.items}
-          defaultValue={defaultValue}
-        />
-      </ArrayItem>
-    )
-  }
-
-  _makeChildren (props) {
-    return map(props.defaultValue, defaultValue =>
-      this._makeChild(props, defaultValue)
-    )
-  }
-
-  componentWillReceiveProps (props) {
-    if (
-      !propsEqual(
-        this.props,
-        props,
-        [ 'depth', 'disabled', 'label', 'required', 'schema', 'uiSchema' ]
-      )
-    ) {
-      this.setState({
-        children: this._makeChildren(props)
-      })
-    }
+  _onRemoveItem = key => {
+    const { props } = this
+    props.onChange(filter(props.value, (_, i) => i !== key))
   }
 
   render () {
     const {
-      props,
-      state
+      props: {
+        depth = 0,
+        disabled,
+        label,
+        required,
+        schema,
+        uiSchema,
+        value = EMPTY_ARRAY
+      },
+      state: { use }
     } = this
-    const {
-      disabled,
-      schema
-    } = props
-    const { use } = state
-    const depth = props.depth || 0
+
+    const childDepth = depth + 2
+    const itemSchema = schema.items
+    const itemUiSchema = uiSchema && uiSchema.items
+
+    const itemLabel = itemSchema.title || _('item')
 
     return (
       <div style={{'paddingLeft': `${depth}em`}}>
-        <legend>{props.label}</legend>
+        <legend>{label}</legend>
         {descriptionRender(schema.description)}
         <hr />
-        {!props.required &&
-          <div className='checkbox'>
-            <label>
-              <input
-                checked={use}
-                disabled={disabled}
-                onChange={this._handleOptionalChange}
-                type='checkbox'
-              /> {_('fillOptionalInformations')}
-            </label>
-          </div>
-        }
-        {use &&
-          <div className={'card-block'}>
-            <ul style={{'paddingLeft': 0}} >
-              {map(this.state.children, (child, index) =>
-                cloneElement(child, { ref: index })
-              )}
-            </ul>
-            <button disabled={disabled} className='btn btn-primary pull-right mt-1 mr-1' type='button' onClick={this._handleAdd}>
-              {_('add')}
-            </button>
-          </div>
-        }
+        {!required && <div className='checkbox'>
+          <label>
+            <input
+              checked={use}
+              disabled={disabled}
+              onChange={this.linkState('use')}
+              type='checkbox'
+            /> {_('fillOptionalInformations')}
+          </label>
+        </div>}
+        {use && <div className='card-block'>
+          <ul style={{'paddingLeft': 0}} >
+            {map(value, (value, key) =>
+              <li className='list-group-item clearfix' key={key}>
+                <GenericInput
+                  depth={childDepth}
+                  disabled={disabled}
+                  label={itemLabel}
+                  name={key}
+                  onChange={this._onChangeItem}
+                  required
+                  schema={itemSchema}
+                  uiSchema={itemUiSchema}
+                  value={value}
+                />
+                <Button
+                  btnStyle='danger'
+                  className='pull-right'
+                  disabled={disabled}
+                  name={key}
+                  onClick={() => this._onRemoveItem(key)}
+                >
+                  {_('remove')}
+                </Button>
+              </li>
+            )}
+          </ul>
+          <Button
+            btnStyle='primary'
+            className='pull-right mt-1 mr-1'
+            disabled={disabled}
+            onClick={this._onAddItem}
+          >
+            {_('add')}
+          </Button>
+        </div>}
       </div>
     )
   }

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

@@ -1,32 +1,30 @@
 import React from 'react'
-import { Toggle } from 'form'
 
-import AbstractInput from './abstract-input'
+import uncontrollableInput from 'uncontrollable-input'
+import Component from '../base-component'
+import { Toggle } from '../form'
+
 import { PrimitiveInputWrapper } from './helpers'
 
 // ===================================================================
 
-export default class BooleanInput extends AbstractInput {
-
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
-  }
-
+@uncontrollableInput()
+export default class BooleanInput extends Component {
   render () {
-    const { props } = this
+    const {
+      disabled,
+      onChange,
+      value,
+      ...props
+    } = this.props
 
     return (
       <PrimitiveInputWrapper {...props}>
         <div className='checkbox form-control'>
           <Toggle
-            defaultValue={props.defaultValue}
-            disabled={props.disabled}
-            onChange={props.onChange}
-            ref='input'
+            disabled={disabled}
+            onChange={onChange}
+            value={value}
           />
         </div>
       </PrimitiveInputWrapper>

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

@@ -1,33 +1,54 @@
-import React from 'react'
 import _ from 'intl'
-import map from 'lodash/map'
+import uncontrollableInput from 'uncontrollable-input'
+import Component from 'base-component'
+import React from 'react'
+import { createSelector } from 'reselect'
+import { findIndex, map } from 'lodash'
 
-import AbstractInput from './abstract-input'
 import { PrimitiveInputWrapper } from './helpers'
 
 // ===================================================================
 
-export default class EnumInput extends AbstractInput {
+@uncontrollableInput()
+export default class EnumInput extends Component {
+  _getSelectedIndex = createSelector(
+    () => this.props.schema.enum,
+    () => {
+      const {
+        schema,
+        value = schema.default
+      } = this.props
+      return value
+    },
+    (enumValues, value) => {
+      const index = findIndex(enumValues, current => current === value)
+      return index === -1 ? '' : index
+    }
+  )
+
+  _onChange = event => {
+    this.props.onChange(this.props.schema.enum[event.target.value])
+  }
+
   render () {
-    const { props } = this
     const {
-      onChange,
+      disabled,
+      schema: { enum: enumValues, enumNames = enumValues },
       required
-    } = props
+    } = this.props
 
     return (
-      <PrimitiveInputWrapper {...props}>
+      <PrimitiveInputWrapper {...this.props}>
         <select
           className='form-control'
-          defaultValue={props.defaultValue || ''}
-          disabled={props.disabled}
-          onChange={onChange && (event => onChange(event.target.value))}
-          ref='input'
+          disabled={disabled}
+          onChange={this._onChange}
           required={required}
+          value={this._getSelectedIndex()}
         >
           {_('noSelectedValue', message => <option value=''>{message}</option>)}
-          {map(props.schema.enum, (value, index) =>
-            <option value={value} key={index}>{value}</option>
+          {map(enumNames, (name, index) =>
+            <option value={index} key={index}>{name}</option>
           )}
         </select>
       </PrimitiveInputWrapper>

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

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 
-import propTypes from '../prop-types'
+import getEventValue from '../get-event-value'
+import propTypes from '../prop-types-decorator'
+import uncontrollableInput from 'uncontrollable-input'
 import { EMPTY_OBJECT } from '../utils'
 
 import ArrayInput from './array-input'
@@ -30,35 +32,31 @@ const InputByType = {
   depth: propTypes.number,
   disabled: propTypes.bool,
   label: propTypes.any.isRequired,
-  onChange: propTypes.func,
   required: propTypes.bool,
   schema: propTypes.object.isRequired,
-  uiSchema: propTypes.object,
-  defaultValue: propTypes.any
+  uiSchema: propTypes.object
 })
+@uncontrollableInput()
 export default class GenericInput extends Component {
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
+  _onChange = event => {
+    const { name, onChange } = this.props
+    onChange && onChange(getEventValue(event), name)
   }
 
   render () {
     const {
       schema,
-      defaultValue = schema.default,
+      value = schema.default,
       uiSchema = EMPTY_OBJECT,
       ...opts
     } = this.props
 
     const props = {
       ...opts,
-      defaultValue,
+      onChange: this._onChange,
       schema,
       uiSchema,
-      ref: 'input'
+      value
     }
 
     // Enum, special case.

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

@@ -62,19 +62,19 @@ export const PrimitiveInputWrapper = ({ label, required = false, schema, childre
 
 // ===================================================================
 
-export const forceDisplayOptionalAttr = ({ schema, defaultValue }) => {
-  if (!schema || !defaultValue) {
+export const forceDisplayOptionalAttr = ({ schema, value }) => {
+  if (!schema || !value) {
     return false
   }
 
   // Array
-  if (schema.items && Array.isArray(defaultValue)) {
+  if (schema.items && Array.isArray(value)) {
     return true
   }
 
   // Object
   for (const key in schema.properties) {
-    if (defaultValue[key]) {
+    if (value[key]) {
       return true
     }
   }

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

@@ -1,40 +1,42 @@
 import React from 'react'
 
-import AbstractInput from './abstract-input'
+import uncontrollableInput from 'uncontrollable-input'
 import Combobox from '../combobox'
+import Component from '../base-component'
+import getEventValue from '../get-event-value'
+
 import { PrimitiveInputWrapper } from './helpers'
 
 // ===================================================================
 
-export default class IntegerInput extends AbstractInput {
-  get value () {
-    const { value } = this.refs.input
-    return !value ? undefined : +value
-  }
-
-  set value (value) {
-    // Getter/Setter are always inherited together.
-    // `get value` is defined in the subclass, so `set value`
-    // must be defined too.
-    super.value = value
+@uncontrollableInput()
+export default class IntegerInput extends Component {
+  _onChange = event => {
+    const value = getEventValue(event)
+    this.props.onChange(value ? +value : undefined)
   }
 
   render () {
-    const { props } = this
-    const { schema } = props
+    const { required, schema } = this.props
+    const {
+      disabled,
+      onChange, // eslint-disable-line no-unused-vars
+      placeholder = schema.default,
+      value,
+      ...props
+    } = this.props
 
     return (
       <PrimitiveInputWrapper {...props}>
         <Combobox
-          defaultValue={props.defaultValue}
-          disabled={props.disabled}
+          value={value === undefined ? '' : String(value)}
+          disabled={disabled}
           max={schema.max}
           min={schema.min}
-          onChange={props.onChange}
+          onChange={this._onChange}
           options={schema.defaults}
-          placeholder={props.placeholder || schema.default}
-          ref='input'
-          required={props.required}
+          placeholder={placeholder}
+          required={required}
           step={1}
           type='number'
         />

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

@@ -1,40 +1,42 @@
 import React from 'react'
 
-import AbstractInput from './abstract-input'
+import uncontrollableInput from 'uncontrollable-input'
 import Combobox from '../combobox'
+import Component from '../base-component'
+import getEventValue from '../get-event-value'
+
 import { PrimitiveInputWrapper } from './helpers'
 
 // ===================================================================
 
-export default class NumberInput extends AbstractInput {
-  get value () {
-    const { value } = this.refs.input
-    return !value ? undefined : +value
-  }
-
-  set value (value) {
-    // Getter/Setter are always inherited together.
-    // `get value` is defined in the subclass, so `set value`
-    // must be defined too.
-    super.value = value
+@uncontrollableInput()
+export default class NumberInput extends Component {
+  _onChange = event => {
+    const value = getEventValue(event)
+    this.props.onChange(value ? +value : undefined)
   }
 
   render () {
-    const { props } = this
-    const { schema } = props
+    const { required, schema } = this.props
+    const {
+      disabled,
+      onChange, // eslint-disable-line no-unused-vars
+      placeholder = schema.default,
+      value,
+      ...props
+    } = this.props
 
     return (
       <PrimitiveInputWrapper {...props}>
         <Combobox
-          defaultValue={props.defaultValue}
-          disabled={props.disabled}
+          value={value === undefined ? '' : String(value)}
+          disabled={disabled}
           max={schema.max}
           min={schema.min}
-          onChange={props.onChange}
+          onChange={this._onChange}
           options={schema.defaults}
-          placeholder={props.placeholder || schema.default}
-          ref='input'
-          required={props.required}
+          placeholder={placeholder}
+          required={required}
           step='any'
           type='number'
         />

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

@@ -1,167 +1,97 @@
-import _ from 'intl'
-import React, { Component, cloneElement } from 'react'
-import forEach from 'lodash/forEach'
-import includes from 'lodash/includes'
-import map from 'lodash/map'
+import React from 'react'
+import uncontrollableInput from 'uncontrollable-input'
+import { createSelector } from 'reselect'
+import { keyBy, map } from 'lodash'
 
-import propTypes from '../prop-types'
-import { propsEqual } from '../utils'
+import _ from '../intl'
+import Component from '../base-component'
+import propTypes from '../prop-types-decorator'
+import { EMPTY_OBJECT } from '../utils'
 
 import GenericInput from './generic-input'
-
 import {
   descriptionRender,
   forceDisplayOptionalAttr
 } from './helpers'
 
-// ===================================================================
-
-class ObjectItem extends Component {
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
-  }
-
-  render () {
-    const { props } = this
-
-    return (
-      <div className='pb-1'>
-        {cloneElement(props.children, {
-          ref: 'input'
-        })}
-      </div>
-    )
-  }
-}
-
-// ===================================================================
-
 @propTypes({
   depth: propTypes.number,
   disabled: propTypes.bool,
   label: propTypes.any.isRequired,
   required: propTypes.bool,
   schema: propTypes.object.isRequired,
-  uiSchema: propTypes.object,
-  defaultValue: propTypes.object
+  uiSchema: propTypes.object
 })
+@uncontrollableInput()
 export default class ObjectInput extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      use: Boolean(props.required) || forceDisplayOptionalAttr(props),
-      children: this._makeChildren(props)
-    }
+  state = {
+    use: this.props.required || forceDisplayOptionalAttr(this.props)
   }
 
-  get value () {
-    if (!this.state.use) {
-      return
-    }
-
-    const obj = {}
-
-    forEach(this.refs, (instance, key) => {
-      obj[key] = instance.value
-    })
-
-    return obj
-  }
-
-  set value (value = {}) {
-    this.setState({
-      use: true
-    }, () => {
-      forEach(this.refs, (instance, id) => {
-        instance.value = value[id]
-      })
+  _onChildChange = (value, key) => {
+    this.props.onChange({
+      ...this.props.value,
+      [key]: value
     })
   }
 
-  _handleOptionalChange = event => {
-    const { checked } = event.target
-
-    this.setState({
-      use: checked
-    })
-  }
-
-  _makeChildren (props) {
-    const {
-      depth = 0,
-      schema,
-      uiSchema = {},
-      defaultValue = {}
-    } = props
-    const obj = {}
-    const { properties } = uiSchema
-
-    forEach(schema.properties, (childSchema, key) => {
-      obj[key] = (
-        <ObjectItem key={key}>
-          <GenericInput
-            depth={depth + 2}
-            disabled={props.disabled}
-            label={childSchema.title || key}
-            required={includes(schema.required, key)}
-            schema={childSchema}
-            uiSchema={properties && properties[key]}
-            defaultValue={defaultValue[key]}
-          />
-        </ObjectItem>
-      )
-    })
-
-    return obj
-  }
-
-  componentWillReceiveProps (props) {
-    if (
-      !propsEqual(
-        this.props,
-        props,
-        [ 'depth', 'disabled', 'label', 'required', 'schema', 'uiSchema' ]
-      )
-    ) {
-      this.setState({
-        children: this._makeChildren(props)
-      })
-    }
-  }
+  _getRequiredProps = createSelector(
+    () => this.props.schema.required,
+    required => required
+      ? keyBy(required)
+      : EMPTY_OBJECT
+  )
 
   render () {
-    const { props, state } = this
-    const { use } = state
-    const depth = props.depth || 0
+    const {
+      props: {
+        depth = 0,
+        disabled,
+        label,
+        required,
+        schema,
+        uiSchema,
+        value = EMPTY_OBJECT
+      },
+      state: { use }
+    } = this
+
+    const childDepth = depth + 2
+    const properties = (uiSchema != null && uiSchema.properties) || EMPTY_OBJECT
+    const requiredProps = this._getRequiredProps()
 
     return (
       <div style={{'paddingLeft': `${depth}em`}}>
-        <legend>{props.label}</legend>
-        {descriptionRender(props.schema.description)}
+        <legend>{label}</legend>
+        {descriptionRender(schema.description)}
         <hr />
-        {!props.required &&
-          <div className='checkbox'>
-            <label>
-              <input
-                checked={use}
-                disabled={props.disabled}
-                onChange={this._handleOptionalChange}
-                type='checkbox'
-              /> {_('fillOptionalInformations')}
-            </label>
-          </div>
-        }
-        {use &&
-          <div className='card-block'>
-            {map(state.children, (child, index) =>
-              cloneElement(child, { ref: index })
-            )}
-          </div>
-        }
+        {!required && <div className='checkbox'>
+          <label>
+            <input
+              checked={use}
+              disabled={disabled}
+              onChange={this.linkState('use')}
+              type='checkbox'
+            /> {_('fillOptionalInformations')}
+          </label>
+        </div>}
+        {use && <div className='card-block'>
+          {map(schema.properties, (childSchema, key) =>
+            <div className='pb-1' key={key}>
+              <GenericInput
+                depth={childDepth}
+                disabled={disabled}
+                label={childSchema.title || key}
+                name={key}
+                onChange={this._onChildChange}
+                required={Boolean(requiredProps[key])}
+                schema={childSchema}
+                uiSchema={properties[key]}
+                value={value[key]}
+              />
+            </div>
+          )}
+        </div>}
       </div>
     )
   }

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

@@ -1,8 +1,11 @@
 import React from 'react'
+import uncontrollableInput from 'uncontrollable-input'
 
-import AbstractInput from './abstract-input'
 import Combobox from '../combobox'
-import propTypes from '../prop-types'
+import Component from '../base-component'
+import getEventValue from '../get-event-value'
+import propTypes from '../prop-types-decorator'
+
 import { PrimitiveInputWrapper } from './helpers'
 
 // ===================================================================
@@ -10,22 +13,36 @@ import { PrimitiveInputWrapper } from './helpers'
 @propTypes({
   password: propTypes.bool
 })
-export default class StringInput extends AbstractInput {
+@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 { props } = this
-    const { schema } = props
+    const { required, schema } = this.props
+    const {
+      disabled,
+      password,
+      placeholder = schema.default,
+      value,
+      ...props
+    } = this.props
+    delete props.onChange
 
     return (
       <PrimitiveInputWrapper {...props}>
         <Combobox
-          defaultValue={props.defaultValue}
-          disabled={props.disabled}
-          onChange={props.onChange}
+          value={value !== undefined ? value : ''}
+          disabled={disabled}
+          onChange={this._onChange}
           options={schema.defaults}
-          placeholder={props.placeholder || schema.default}
-          ref='input'
-          required={props.required}
-          type={props.password && 'password'}
+          placeholder={placeholder || schema.default}
+          required={required}
+          type={password && 'password'}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -1,14 +1,13 @@
 import React, { Component } from 'react'
+import RFB from '@nraynaud/novnc/lib/rfb'
 import { createBackoff } from 'jsonrpc-websocket-client'
-import { RFB } from 'novnc-node'
 import {
-  format as formatUrl,
   parse as parseUrl,
   resolve as resolveUrl
 } 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))
 
@@ -77,6 +76,11 @@ export default class NoVnc extends Component {
   _connect = () => {
     this._clean()
 
+    const { canvas } = this.refs
+    if (!canvas) {
+      return
+    }
+
     const url = parseRelativeUrl(this.props.url)
     fixProtocol(url)
 
@@ -86,14 +90,23 @@ export default class NoVnc extends Component {
     const rfb = this._rfb = new RFB({
       encrypt: isSecure,
       target: this.refs.canvas,
-      wsProtocols: [ 'chat' ],
       onClipboard: onClipboardChange && ((_, text) => {
         onClipboardChange(text)
       }),
       onUpdateState: this._onUpdateState
     })
 
-    rfb.connect(formatUrl(url))
+    // remove leading slashes from the path
+    //
+    // a leading slassh will be added by noVNC
+    const clippedPath = url.path.replace(/^\/+/, '')
+
+    // a port is required
+    //
+    // if not available from the URL, use the default ones
+    const { port = isSecure ? 443 : 80 } = url
+
+    rfb.connect(url.hostname, port, null, clippedPath)
     disableShortcuts()
   }
 

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 {
@@ -182,6 +182,10 @@ const renderXoItem = (item, {
 } = {}) => {
   const { id, type, label } = item
 
+  if (item.removed) {
+    return <span key={id} className='text-danger'> <Icon icon='alarm' /> {id}</span>
+  }
+
   if (!type) {
     if (process.env.NODE_ENV !== 'production' && !label) {
       throw new Error(`an item must have at least either a type or a label`)
@@ -218,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,9 +259,12 @@ class TableSelect extends Component {
           ))}
         </tbody>
       </table>
-      <button className='btn btn-secondary pull-right' onClick={this._reset}>
+      <Button
+        className='pull-right'
+        onClick={this._reset}
+      >
         {_(`selectTableAll${labelId}`)} {value && !value.length && <Icon icon='success' />}
-      </button>
+      </Button>
     </div>
   }
 }
@@ -447,23 +450,27 @@ class DayPicker extends Component {
 // ===================================================================
 
 @propTypes({
-  cronPattern: propTypes.string.isRequired,
+  cronPattern: propTypes.string,
   onChange: propTypes.func,
-  timezone: propTypes.string
+  timezone: propTypes.string,
+  value: propTypes.shape({
+    cronPattern: propTypes.string.isRequired,
+    timezone: propTypes.string
+  })
 })
 export default class Scheduler extends Component {
   constructor (props) {
     super(props)
 
     this._onCronChange = newCrons => {
-      const cronPattern = this.props.cronPattern.split(' ')
+      const cronPattern = this._getCronPattern().split(' ')
       forEach(newCrons, (cron, unit) => {
         cronPattern[PICKTIME_TO_ID[unit]] = cron
       })
 
       this.props.onChange({
         cronPattern: cronPattern.join(' '),
-        timezone: this.props.timezone
+        timezone: this._getTimezone()
       })
     }
 
@@ -475,17 +482,24 @@ export default class Scheduler extends Component {
 
   _onTimezoneChange = timezone => {
     this.props.onChange({
-      cronPattern: this.props.cronPattern,
+      cronPattern: this._getCronPattern(),
       timezone
     })
   }
 
+  _getCronPattern = () => {
+    const { value, cronPattern = value.cronPattern } = this.props
+    return cronPattern
+  }
+
+  _getTimezone = () => {
+    const { value, timezone = value && value.timezone } = this.props
+    return timezone
+  }
+
   render () {
-    const {
-      cronPattern,
-      timezone
-    } = this.props
-    const cronPatternArr = cronPattern.split(' ')
+    const cronPatternArr = this._getCronPattern().split(' ')
+    const timezone = this._getTimezone()
 
     return (
       <div className='card-block'>

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 autoControlledInput from './auto-controlled-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,
@@ -42,7 +42,6 @@ import {
 import {
   addSubscriptions,
   connectStore,
-  mapPlus,
   resolveResourceSets
 } from './utils'
 import {
@@ -135,37 +134,6 @@ const options = props => ({
   ]).isRequired
 })
 export class GenericSelect extends Component {
-  componentDidUpdate (prevProps) {
-    const { onChange, xoObjects } = this.props
-
-    if (!onChange || prevProps.xoObjects === xoObjects) {
-      return
-    }
-
-    const ids = this._getSelectValue()
-    const objectsById = this._getObjectsById()
-
-    if (!isArray(ids)) {
-      ids && !objectsById[ids] && onChange(undefined)
-    } else {
-      let shouldTriggerOnChange
-
-      const newValue = isArray(ids) && mapPlus(ids, (id, push) => {
-        const object = objectsById[id]
-
-        if (object) {
-          push(object)
-        } else {
-          shouldTriggerOnChange = true
-        }
-      })
-
-      if (shouldTriggerOnChange) {
-        this.props.onChange(newValue)
-      }
-    }
-  }
-
   _getObjectsById = createSelector(
     () => this.props.xoObjects,
     objects => keyBy(
@@ -180,22 +148,19 @@ export class GenericSelect extends Component {
     () => this.props.xoContainers,
     () => this.props.xoObjects,
     (containers, objects) => { // createCollectionWrapper with a depth?
-      const __DEV__ = process.env.NODE_ENV !== 'production'
       const { name } = this.constructor
 
+      let options = []
       if (!containers) {
         if (__DEV__ && !isArray(objects)) {
           throw new Error(`${name}: without xoContainers, xoObjects must be an array`)
         }
 
-        return map(objects, getOption)
-      }
-
-      if (__DEV__ && isArray(objects)) {
+        options = map(objects, getOption)
+      } else if (__DEV__ && isArray(objects)) {
         throw new Error(`${name}: with xoContainers, xoObjects must be an object`)
       }
 
-      const options = []
       forEach(containers, container => {
         options.push({
           disabled: true,
@@ -206,6 +171,30 @@ export class GenericSelect extends Component {
           options.push(getOption(object, container))
         })
       })
+
+      const values = this._getSelectValue()
+      const objectsById = this._getObjectsById()
+      const addIfMissing = val => {
+        if (val && !objectsById[val]) {
+          options.push({
+            disabled: true,
+            id: val,
+            label: val,
+            value: val,
+            xoItem: {
+              id: val,
+              removed: true
+            }
+          })
+        }
+      }
+
+      if (isArray(values)) {
+        forEach(values, addIfMissing)
+      } else {
+        addIfMissing(values)
+      }
+
       return options
     }
   )
@@ -289,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>
@@ -298,7 +287,7 @@ export class GenericSelect extends Component {
   }
 }
 
-const makeStoreSelect = (createSelectors, defaultProps) => autoControlledInput(options)(
+const makeStoreSelect = (createSelectors, defaultProps) => uncontrollableInput(options)(
   connectStore(createSelectors)(
     props =>
       <GenericSelect
@@ -308,7 +297,7 @@ const makeStoreSelect = (createSelectors, defaultProps) => autoControlledInput(o
   )
 )
 
-const makeSubscriptionSelect = (subscribe, props) => autoControlledInput(options)(
+const makeSubscriptionSelect = (subscribe, props) => uncontrollableInput(options)(
   class extends Component {
     constructor (props) {
       super(props)

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>
     )
@@ -93,7 +95,7 @@ class TableFilter extends Component {
 
 @propTypes({
   columnId: propTypes.number.isRequired,
-  name: propTypes.any.isRequired,
+  name: propTypes.node,
   sort: propTypes.func,
   sortIcon: propTypes.string
 })
@@ -104,10 +106,10 @@ class ColumnHead extends Component {
   }
 
   render () {
-    const { name, sortIcon } = this.props
+    const { name, sortIcon, textAlign } = this.props
 
     if (!this.props.sort) {
-      return <th>{name}</th>
+      return <th className={textAlign && `text-xs-${textAlign}`}>{name}</th>
     }
 
     const isSelected = sortIcon === 'asc' || sortIcon === 'desc'
@@ -115,6 +117,7 @@ class ColumnHead extends Component {
     return (
       <th
         className={classNames(
+          textAlign && `text-xs-${textAlign}`,
           styles.clickableColumn,
           isSelected && classNames('text-white', 'bg-info')
         )}
@@ -135,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.isRequired,
-    itemRenderer: propTypes.func.isRequired,
+    name: propTypes.node,
+    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,
@@ -173,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
     }
@@ -189,7 +198,7 @@ export default class SortedTable extends Component {
       createFilter(
         () => this.props.collection,
         createSelector(
-          () => this.state.filter || '',
+          () => this.state.filter,
           createMatcher
         )
       ),
@@ -288,6 +297,7 @@ export default class SortedTable extends Component {
 
     const filterInstance = (
       <TableFilter
+        defaultFilter={state.filter}
         filters={filters}
         nFilteredItems={nFilteredItems}
         nItems={this._getTotalNumberOfItems()}
@@ -302,7 +312,9 @@ export default class SortedTable extends Component {
             <tr>
               {map(props.columns, (column, key) => (
                 <ColumnHead
+                  textAlign={column.textAlign}
                   columnId={key}
+
                   key={key}
                   name={column.name}
                   sort={column.sortCriteria && this._sort}
@@ -313,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}>
-                  {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

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import ActionButton from './action-button'
+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`]};
+`
+
+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'}
+    size='small'
+    state={state}
+  >
+    {state ? enabledLabel : disabledLabel}
+  </Button>
+
+export default propTypes({
+  state: propTypes.bool.isRequired
+})(StateButton)

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/themes/base.js

@@ -0,0 +1,6 @@
+export default {
+  disabledStateBg: '#fff',
+  disabledStateColor: '#c0392b',
+  enabledStateBg: '#fff',
+  enabledStateColor: '#27ae60'
+}

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

@@ -15,6 +15,7 @@ import mapValues from 'lodash/mapValues'
 import React from 'react'
 import ReadableStream from 'readable-stream'
 import replace from 'lodash/replace'
+import startsWith from 'lodash/startsWith'
 import { connect } from 'react-redux'
 
 import _ from './intl'
@@ -63,13 +64,22 @@ export const addSubscriptions = subscriptions => Component => {
 
     componentWillMount () {
       this._unsubscribes = map(isFunction(subscriptions) ? subscriptions() : subscriptions, (subscribe, prop) =>
-        subscribe(value => this.setState({ [prop]: value }))
+        subscribe(value => this._setState({ [prop]: value }))
       )
     }
 
+    componentDidMount () {
+      this._setState = this.setState
+    }
+
     componentWillUnmount () {
       forEach(this._unsubscribes, unsubscribe => unsubscribe())
       this._unsubscribes = null
+      delete this._setState
+    }
+
+    _setState (nextState) {
+      this.state = { ...this.state, nextState }
     }
 
     render () {
@@ -180,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) {
@@ -258,6 +268,11 @@ export const formatSize = bytes => humanFormat(bytes, { scale: 'binary', unit: '
 
 export const formatSizeRaw = bytes => humanFormat.raw(bytes, { scale: 'binary', unit: 'B' })
 
+export const formatSpeed = (bytes, milliseconds) => humanFormat(
+  bytes * 1e3 / milliseconds,
+  { scale: 'binary', unit: 'B/s' }
+)
+
 export const parseSize = size => {
   let bytes = humanFormat.parse.raw(size, { scale: 'binary' })
   if (bytes.unit && bytes.unit !== 'B') {
@@ -349,20 +364,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 => {
@@ -482,7 +483,35 @@ export const resolveIds = params => {
 
 // ===================================================================
 
-export const compareVersions = (v1, v2) => {
+const OPs = {
+  '<': a => a < 0,
+  '<=': a => a <= 0,
+  '===': a => a === 0,
+  '>': a => a > 0,
+  '>=': a => a >= 0
+}
+
+const makeNiceCompare = compare => function () {
+  const { length } = arguments
+  if (length === 2) {
+    return compare(arguments[0], arguments[1])
+  }
+
+  let i = 1
+  let v1 = arguments[0]
+  let op, v2
+  while (i < length) {
+    op = arguments[i++]
+    v2 = arguments[i++]
+    if (!OPs[op](compare(v1, v2))) {
+      return false
+    }
+    v1 = v2
+  }
+  return true
+}
+
+export const compareVersions = makeNiceCompare((v1, v2) => {
   v1 = v1.split('.')
   v2 = v2.split('.')
 
@@ -495,4 +524,25 @@ export const compareVersions = (v1, v2) => {
   }
 
   return 0
+})
+
+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

@@ -1,20 +1,21 @@
 import map from 'lodash/map'
-import AbstractInput from '../json-schema-input/abstract-input'
+import { PureComponent } from 'react'
+
+import getEventValue from '../get-event-value'
 
 // ===================================================================
 
-export default class XoAbstractInput extends AbstractInput {
-  get value () {
-    const value = this.refs.input.value
+const getId = value => (value != null && value.id) || value
 
-    if (this.props.schema.type === 'array') {
-      return map(value, object => object.id || object)
-    }
+export default class XoAbstractInput extends PureComponent {
+  _onChange = event => {
+    const value = getEventValue(event)
+    const { props } = this
 
-    return value.id || value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
+    return props.onChange(
+      props.schema.type === 'array'
+        ? map(value, getId)
+        : getId(value)
+    )
   }
 }

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

@@ -16,10 +16,10 @@ export default class HighLevelObjectInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class HostInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class PoolInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class RemoteInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class RoleInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class SrInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class SubjectInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class TagInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -16,10 +16,10 @@ export default class VmInput extends XoAbstractInput {
           disabled={props.disabled}
           hasSelectAll
           multi={props.multi}
-          onChange={props.onChange}
+          onChange={this._onChange}
           ref='input'
           required={props.required}
-          defaultValue={props.defaultValue}
+          value={props.value}
         />
       </PrimitiveInputWrapper>
     )

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

@@ -15,7 +15,7 @@ import {
   values
 } from 'lodash'
 
-import propTypes from '../prop-types'
+import propTypes from '../prop-types-decorator'
 import { computeArraysSum } from '../xo-stats'
 import { formatSize } from '../utils'
 

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/choose-sr-for-each-vdis-modal/index.js

@@ -0,0 +1,139 @@
+import Collapse from 'collapse'
+import Component from 'base-component'
+import React from 'react'
+import { every, forEach, map } from 'lodash'
+
+import _ from '../../intl'
+import propTypes from '../../prop-types-decorator'
+import SingleLineRow from '../../single-line-row'
+import { createSelector } from '../../selectors'
+import { SelectSr } from '../../select-objects'
+import { isSrWritable } from 'xo'
+import {
+  Container,
+  Col
+} from 'grid'
+
+// Can 2 SRs on the same pool have 2 VDIs used by the same VM
+const areSrsCompatible = (sr1, sr2) =>
+  sr1.shared || sr2.shared || sr1.$container === sr2.$container
+
+const Collapsible = ({collapsible, children, ...props}) => collapsible
+  ? <Collapse {...props}>{children}</Collapse>
+  : <div>
+    <span>{props.buttonText}</span>
+    <br />
+    {children}
+  </div>
+
+Collapsible.propTypes = {
+  collapsible: propTypes.bool.isRequired,
+  children: propTypes.node.isRequired
+}
+
+@propTypes({
+  vdis: propTypes.array.isRequired,
+  predicate: propTypes.func
+})
+export default class ChooseSrForEachVdisModal extends Component {
+  state = {
+    mapVdisSrs: {}
+  }
+
+  componentWillReceiveProps (newProps) {
+    if (
+      this.props.predicate !== undefined &&
+      newProps.predicate !== this.props.predicate
+    ) {
+      this.state = {
+        mainSr: undefined,
+        mapVdisSrs: {}
+      }
+    }
+  }
+
+  _onChange = props => {
+    this.setState(props)
+    this.props.onChange(props)
+  }
+
+  _onChangeMainSr = newSr => {
+    const oldSr = this.state.mainSr
+
+    if (oldSr == null || newSr == null || oldSr.$pool !== newSr.$pool) {
+      this.setState({
+        mapVdisSrs: {}
+      })
+    } else if (!newSr.shared) {
+      const mapVdisSrs = {...this.state.mapVdisSrs}
+      forEach(mapVdisSrs, (sr, vdi) => {
+        if (sr != null && newSr !== sr && sr.$container !== newSr.$container && !sr.shared) {
+          delete mapVdisSrs[vdi]
+        }
+      })
+      this._onChange({mapVdisSrs})
+    }
+
+    this._onChange({
+      mainSr: newSr
+    })
+  }
+
+  _getSrPredicate = createSelector(
+    () => this.state.mainSr,
+    () => this.state.mapVdisSrs,
+    (mainSr, mapVdisSrs) => sr =>
+      isSrWritable(sr) &&
+      mainSr.$pool === sr.$pool &&
+      areSrsCompatible(mainSr, sr) &&
+      every(mapVdisSrs, selectedSr => selectedSr == null || areSrsCompatible(selectedSr, sr))
+  )
+
+  render () {
+    const { props, state } = this
+    const { vdis } = props
+    const {
+      mainSr,
+      mapVdisSrs
+    } = state
+
+    const srPredicate = props.predicate || this._getSrPredicate()
+
+    return <div>
+      <SelectSr
+        onChange={mainSr => props.predicate !== undefined
+          ? this._onChange({mainSr})
+          : this._onChangeMainSr(mainSr)
+        }
+        predicate={props.predicate || isSrWritable}
+        placeholder={_('chooseSrForEachVdisModalMainSr')}
+        value={mainSr}
+      />
+      <br />
+      {vdis != null && mainSr != null &&
+        <Collapsible collapsible={vdis.length >= 3} buttonText={_('chooseSrForEachVdisModalSelectSr')}>
+          <br />
+          <Container>
+            <SingleLineRow>
+              <Col size={6}><strong>{_('chooseSrForEachVdisModalVdiLabel')}</strong></Col>
+              <Col size={6}><strong>{_('chooseSrForEachVdisModalSrLabel')}</strong></Col>
+            </SingleLineRow>
+            {map(vdis, vdi =>
+              <SingleLineRow key={vdi.uuid}>
+                <Col size={6}>{ vdi.name_label || vdi.name }</Col>
+                <Col size={6}>
+                  <SelectSr
+                    onChange={sr => this._onChange({ mapVdisSrs: { ...mapVdisSrs, [vdi.uuid]: sr } })}
+                    value={mapVdisSrs[vdi.uuid]}
+                    predicate={srPredicate}
+                  />
+                </Col>
+              </SingleLineRow>
+            )}
+            <i>{_('chooseSrForEachVdisModalOptionalEntry')}</i>
+          </Container>
+        </Collapsible>
+      }
+    </div>
+  }
+}

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,8 +43,12 @@ 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 isSrShared = sr => sr && sr.shared
 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,
@@ -128,6 +134,13 @@ export const connectStore = store => {
     sendUpdates()
   })
   subscribePermissions(permissions => store.dispatch(updatePermissions(permissions)))
+
+  // work around to keep the user in Redux store up to date
+  //
+  // FIXME: store subscriptions data directly in Redux
+  subscribeUsers(user => {
+    store.dispatch(signedIn(xo.user))
+  })
 }
 
 // -------------------------------------------------------------------
@@ -273,6 +286,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')
@@ -299,20 +334,21 @@ export const exportConfig = () => (
 
 // Server ------------------------------------------------------------
 
-export const addServer = (host, username, password) => (
-  _call('server.add', { host, username, password })::tap(
-    subscribeServers.forceRefresh
-  )::rethrow(() => error(_('serverError'), _('serverAddFailed')))
+export const addServer = (host, username, password, label) => (
+  _call('server.add', { host, label, password, username })::tap(
+    subscribeServers.forceRefresh,
+    () => error(_('serverError'), _('serverAddFailed'))
+  )
 )
 
-export const editServer = (server, { host, username, password, readOnly }) => (
-  _call('server.set', { id: resolveId(server), host, username, password, readOnly })::tap(
+export const editServer = (server, props) => (
+  _call('server.set', { ...props, id: resolveId(server) })::tap(
     subscribeServers.forceRefresh
   )
 )
 
 export const connectServer = server => (
-  _call('server.connect', { id: resolveId(server) })::tap(
+  _call('server.connect', { id: resolveId(server) })::lastly(
     subscribeServers.forceRefresh
   )
 )
@@ -335,10 +371,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(() =>
@@ -347,6 +384,7 @@ export const addHostToPool = (pool, host) => {
   }
 
   return confirm({
+    icon: 'add',
     title: _('addHostModalTitle'),
     body: <AddHostModalBody pool={pool} />
   }).then(
@@ -355,7 +393,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
   )
@@ -371,6 +415,16 @@ export const detachHost = host => (
   )
 )
 
+export const forgetHost = host => (
+  confirm({
+    icon: 'host-forget',
+    title: _('forgetHostModalTitle'),
+    body: _('forgetHostModalMessage', { host: <strong>{host.name_label}</strong> })
+  }).then(
+    () => _call('host.forget', { host: resolveId(host) })
+  )
+)
+
 export const setDefaultSr = sr => (
   _call('pool.setDefaultSr', { sr: resolveId(sr) })
 )
@@ -429,7 +483,7 @@ export const restartHostsAgents = hosts => {
     title: _('restartHostsAgentsModalTitle', { nHosts }),
     body: _('restartHostsAgentsModalMessage', { nHosts })
   }).then(
-    () => map(hosts, restartHostAgent),
+    () => Promise.all(map(hosts, restartHostAgent)),
     noop
   )
 }
@@ -487,15 +541,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) => {
@@ -560,8 +620,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 => (
@@ -569,7 +659,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
   )
 )
@@ -636,7 +771,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({
@@ -660,7 +795,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({
@@ -678,7 +813,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
@@ -732,7 +867,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'),
@@ -748,7 +883,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'),
@@ -827,11 +962,16 @@ export const importBackup = ({ remote, file, sr }) => (
   _call('vm.importBackup', resolveIds({ remote, file, sr }))
 )
 
-export const importDeltaBackup = ({ remote, file, sr }) => (
-  _call('vm.importDeltaBackup', resolveIds({ remote, filePath: file, sr }))
+export const importDeltaBackup = ({ remote, file, sr, mapVdisSrs }) => (
+  _call('vm.importDeltaBackup', resolveIds({
+    remote,
+    filePath: file,
+    sr,
+    mapVdisSrs: resolveIds(mapVdisSrs)
+  }))
 )
 
-import RevertSnapshotModalBody from './revert-snapshot-modal'
+import RevertSnapshotModalBody from './revert-snapshot-modal' // eslint-disable-line import/first
 export const revertSnapshot = vm => (
   confirm({
     title: _('revertVmModalTitle'),
@@ -904,7 +1044,7 @@ 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)
   })
@@ -953,7 +1093,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) })
@@ -1003,7 +1143,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',
@@ -1023,7 +1163,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',
@@ -1312,17 +1452,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'))
   )
 )
 
@@ -1338,16 +1476,14 @@ export const disablePluginAutoload = id => (
   )
 )
 
-export const configurePlugin = (id, configuration) => {
+export const configurePlugin = (id, configuration) =>
   _call('plugin.configure', { id, configuration })::tap(
     () => {
       info(_('pluginConfigurationSuccess'), _('pluginConfigurationChanges'))
       subscribePlugins.forceRefresh()
-    }
-  )::rethrow(
+    },
     err => error(_('pluginError'), JSON.stringify(err.data) || _('unknownPluginError'))
   )
-}
 
 export const purgePluginConfiguration = async id => {
   await confirm({
@@ -1393,7 +1529,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))
   )
 )
@@ -1430,20 +1567,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))
   )
 )
@@ -1550,16 +1688,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))
   )
 )
@@ -1574,14 +1710,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))
   )
 )
@@ -1592,35 +1729,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))
   )
 )
@@ -1630,9 +1767,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))
+    )
   )
 )
 
@@ -1661,10 +1799,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,
@@ -1707,7 +1845,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({
@@ -1817,7 +1955,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 }),

src/common/xo/install-xosan-pack-modal/index.js

@@ -1,32 +1,53 @@
 import _ from 'intl'
 import Component from 'base-component'
 import React from 'react'
-import { connectStore, compareVersions } from 'utils'
+import { connectStore, compareVersions, isXosanPack } from 'utils'
 import { subscribeResourceCatalog, subscribePlugins } from 'xo'
-import { createGetObjectsOfType, createSelector } from 'selectors'
+import { createGetObjectsOfType, createSelector, createCollectionWrapper } from 'selectors'
+import { satisfies as versionSatisfies } from 'semver'
 import {
+  every,
   filter,
   forEach,
-  map
+  map,
+  some
 } from 'lodash'
 
-const findLatestPack = packs => {
-  let latestPack = packs[0]
+const findLatestPack = (packs, hostsVersions) => {
+  const checkVersion = version =>
+    every(hostsVersions, hostVersion => versionSatisfies(hostVersion, version))
 
+  let latestPack = { version: '0' }
   forEach(packs, pack => {
-    if (compareVersions(pack.version, latestPack.version) > 0) {
+    const xsVersionRequirement = pack.requirements && pack.requirements.xenserver
+
+    if (
+      pack.type === 'iso' &&
+      compareVersions(pack.version, latestPack.version) > 0 &&
+      (!xsVersionRequirement || checkVersion(xsVersionRequirement))
+    ) {
       latestPack = pack
     }
   })
 
+  if (latestPack.version === '0') {
+    // No compatible pack was found
+    return
+  }
+
   return latestPack
 }
 
-@connectStore({
+@connectStore(() => ({
   hosts: createGetObjectsOfType('host').filter(
-    (_, { pool }) => host => pool && host.$pool === pool.id && !host.supplementalPacks['vates:XOSAN']
+    createSelector(
+      (_, { pool }) => pool != null && pool.id,
+      poolId => poolId
+        ? host => host.$pool === poolId && !some(host.supplementalPacks, isXosanPack)
+        : false
+    )
   )
-}, { withRef: true })
+}), { withRef: true })
 export default class InstallXosanPackModal extends Component {
   componentDidMount () {
     this._unsubscribePlugins = subscribePlugins(plugins => this.setState({ plugins }))
@@ -40,9 +61,16 @@ export default class InstallXosanPackModal extends Component {
 
   _getXosanLatestPack = createSelector(
     () => this.state.catalog && this.state.catalog.xosan,
-    xosanCatalog => findLatestPack(
-      filter(xosanCatalog, (value, key) => key !== '_token' && value.type === 'iso')
-    )
+    createSelector(
+      () => this.props.hosts,
+      createCollectionWrapper(hosts => map(hosts, 'version'))
+    ),
+    findLatestPack
+  )
+
+  _getXosanPacks = createSelector(
+    () => this.state.catalog && this.state.catalog.xosan,
+    packs => filter(packs, ({ type }) => type === 'iso')
   )
 
   get value () {
@@ -54,13 +82,28 @@ export default class InstallXosanPackModal extends Component {
     const latestPack = this._getXosanLatestPack()
 
     return <div>
-      {_('xosanInstallPackOnHosts')}
-      <ul>
-        {map(hosts, host => <li key={host.id}>{host.name_label}</li>)}
-      </ul>
-      {latestPack && <div className='mt-1'>
-        {_('xosanInstallPack', { pack: latestPack.name, version: latestPack.version })}
-      </div>}
+      {latestPack
+        ? <div>
+          {_('xosanInstallPackOnHosts')}
+          <ul>
+            {map(hosts, host => <li key={host.id}>{host.name_label}</li>)}
+          </ul>
+          <div className='mt-1'>
+            {_('xosanInstallPack', { pack: latestPack.name, version: latestPack.version })}
+          </div>
+        </div>
+        : <div>
+          <p>{_('xosanNoPackFound')}</p>
+          <p>
+            {_('xosanPackRequirements')}
+            <ul>
+              {map(this._getXosanPacks(), ({ name, requirements }) => <li>
+                {name}: <strong>{requirements && requirements.xenserver ? requirements.xenserver : '/'}</strong>
+              </li>)}
+            </ul>
+          </p>
+        </div>
+      }
     </div>
   }
 }

src/common/xo/migrate-vm-modal/index.js

@@ -3,23 +3,23 @@ import every from 'lodash/every'
 import forEach from 'lodash/forEach'
 import find from 'lodash/find'
 import map from 'lodash/map'
-import mapValues from 'lodash/mapValues'
 import React from 'react'
 import store from 'store'
 
 import _ from '../../intl'
+import ChooseSrForEachVdisModal from '../choose-sr-for-each-vdis-modal'
 import invoke from '../../invoke'
 import SingleLineRow from '../../single-line-row'
 import { Col } from '../../grid'
 import { getDefaultNetworkForVif } from '../utils'
 import {
   SelectHost,
-  SelectNetwork,
-  SelectSr
+  SelectNetwork
 } from '../../select-objects'
 import {
   connectStore,
-  mapPlus
+  mapPlus,
+  resolveIds
 } from '../../utils'
 import {
   createGetObjectsOfType,
@@ -138,7 +138,8 @@ export default class MigrateVmModalBody extends BaseComponent {
   get value () {
     return {
       targetHost: this.state.host && this.state.host.id,
-      mapVdisSrs: this.state.mapVdisSrs,
+      sr: this.state.mainSr && this.state.mainSr.id,
+      mapVdisSrs: resolveIds(this.state.mapVdisSrs),
       mapVifsNetworks: this.state.mapVifsNetworks,
       migrationNetwork: this.state.migrationNetworkId
     }
@@ -158,11 +159,10 @@ export default class MigrateVmModalBody extends BaseComponent {
       return
     }
 
-    const { pools, vbds, vdis, vm } = this.props
+    const { vbds, vm } = this.props
     const intraPool = vm.$pool === host.$pool
 
     // Intra-pool
-    const defaultSr = pools[host.$pool].default_SR
     if (intraPool) {
       let doNotMigrateVdis
       if (vm.$container === host.id) {
@@ -181,7 +181,6 @@ export default class MigrateVmModalBody extends BaseComponent {
         doNotMigrateVdis,
         host,
         intraPool,
-        mapVdisSrs: doNotMigrateVdis ? undefined : mapValues(vdis, vdi => defaultSr),
         mapVifsNetworks: undefined,
         migrationNetwork: undefined
       })
@@ -212,7 +211,6 @@ export default class MigrateVmModalBody extends BaseComponent {
       doNotMigrateVdis: false,
       host,
       intraPool,
-      mapVdisSrs: mapValues(vdis, vdi => defaultSr),
       mapVifsNetworks: defaultNetworksForVif,
       migrationNetworkId: defaultMigrationNetworkId
     })
@@ -226,7 +224,6 @@ export default class MigrateVmModalBody extends BaseComponent {
       doNotMigrateVdis,
       host,
       intraPool,
-      mapVdisSrs,
       mapVifsNetworks,
       migrationNetworkId
     } = this.state
@@ -245,25 +242,14 @@ export default class MigrateVmModalBody extends BaseComponent {
       </div>
       {host && !doNotMigrateVdis && <div className={styles.groupBlock}>
         <SingleLineRow>
-          <Col>{_('migrateVmSelectSrs')}</Col>
+          <Col size={12}>
+            <ChooseSrForEachVdisModal
+              onChange={props => this.setState(props)}
+              predicate={this._getSrPredicate()}
+              vdis={vdis}
+            />
+          </Col>
         </SingleLineRow>
-        <br />
-        <SingleLineRow>
-          <Col size={6}><span className={styles.listTitle}>{_('migrateVmName')}</span></Col>
-          <Col size={6}><span className={styles.listTitle}>{_('migrateVmSr')}</span></Col>
-        </SingleLineRow>
-        {map(vdis, vdi => <div className={styles.listItem} key={vdi.id}>
-          <SingleLineRow>
-            <Col size={6}>{vdi.name_label}</Col>
-            <Col size={6}>
-              <SelectSr
-                onChange={sr => this.setState({ mapVdisSrs: { ...mapVdisSrs, [vdi.id]: sr.id } })}
-                predicate={this._getSrPredicate()}
-                value={mapVdisSrs[vdi.id]}
-              />
-            </Col>
-          </SingleLineRow>
-        </div>)}
       </div>}
       {intraPool !== undefined &&
         (!intraPool &&

src/common/xo/migrate-vms-modal/index.js

@@ -12,8 +12,10 @@ import some from 'lodash/some'
 import store from 'store'
 
 import _ from '../../intl'
+import Icon from 'icon'
 import invoke from '../../invoke'
 import SingleLineRow from '../../single-line-row'
+import Tooltip from '../../tooltip'
 import { Col } from '../../grid'
 import { getDefaultNetworkForVif } from '../utils'
 import {
@@ -217,6 +219,7 @@ export default class MigrateVmsModalBody extends BaseComponent {
     const { pools, pifs } = this.props
     const defaultMigrationNetworkId = find(pifs, pif => pif.$host === host.id && pif.management).$network
     const defaultSrId = pools[host.$pool].default_SR
+    const defaultSrConnectedToHost = some(host.$PBDs, pbd => this._getObject(pbd).SR === defaultSrId)
     const doNotMigrateVmVdis = {}
     const doNotMigrateVdi = {}
     forEach(this.props.vbdsByVm, (vbds, vm) => {
@@ -234,6 +237,8 @@ export default class MigrateVmsModalBody extends BaseComponent {
     })
     const noVdisMigration = every(doNotMigrateVmVdis)
     this.setState({
+      defaultSrConnectedToHost,
+      defaultSrId,
       host,
       intraPool: every(this.props.vms, vm => vm.$pool === host.$pool),
       doNotMigrateVdi,
@@ -242,7 +247,7 @@ export default class MigrateVmsModalBody extends BaseComponent {
       networkId: defaultMigrationNetworkId,
       noVdisMigration,
       smartVifMapping: true,
-      srId: defaultSrId
+      srId: defaultSrConnectedToHost ? defaultSrId : undefined
     })
   }
   _selectMigrationNetwork = migrationNetwork => this.setState({ migrationNetworkId: migrationNetwork.id })
@@ -252,6 +257,8 @@ export default class MigrateVmsModalBody extends BaseComponent {
 
   render () {
     const {
+      defaultSrConnectedToHost,
+      defaultSrId,
       host,
       intraPool,
       migrationNetworkId,
@@ -290,7 +297,24 @@ export default class MigrateVmsModalBody extends BaseComponent {
       {host && (!intraPool || !noVdisMigration) &&
         <div key='sr' style={LINE_STYLE}>
           <SingleLineRow>
-            <Col size={6}>{!intraPool ? _('migrateVmsSelectSr') : _('migrateVmsSelectSrIntraPool')}</Col>
+            <Col size={6}>
+              {!intraPool ? _('migrateVmsSelectSr') : _('migrateVmsSelectSrIntraPool')}
+              {' '}
+              {(defaultSrId === undefined || !defaultSrConnectedToHost) &&
+                <Tooltip
+                  content={defaultSrId !== undefined
+                    ? _('migrateVmNotConnectedDefaultSrError')
+                    : _('migrateVmNoDefaultSrError')
+                  }
+                >
+                  <Icon
+                    icon={defaultSrId !== undefined ? 'alarm' : 'info'}
+                    className={defaultSrId !== undefined ? 'text-warning' : 'text-info'}
+                    size='lg'
+                  />
+                </Tooltip>
+              }
+            </Col>
             <Col size={6}>
               <SelectSr
                 onChange={this._selectSr}

src/common/xo/utils.js

@@ -1,14 +1,28 @@
-import forEach from 'lodash/forEach'
+import {
+  forEach,
+  includes,
+  map
+} from 'lodash'
+
+export const getDefaultNetworkForVif = (vif, destHost, pifs, networks) => {
+  const originNetwork = networks[vif.$network]
+  const originVlans = map(originNetwork.PIFs, pifId => pifs[pifId].vlan)
+
+  let destNetworkId = pifs[destHost.$PIFs[0]].$network
+
+  forEach(destHost.$PIFs, pifId => {
+    const { $network, vlan } = pifs[pifId]
+
+    if (networks[$network].name_label === originNetwork.name_label) {
+      destNetworkId = $network
 
-export const getDefaultNetworkForVif = (vif, host, pifs, networks) => {
-  const nameLabel = networks[vif.$network].name_label
-  let defaultNetwork
-  forEach(host.$PIFs, pifId => {
-    const pif = pifs[pifId]
-    if (networks[pif.$network].name_label === nameLabel) {
-      defaultNetwork = pif.$network
       return false
     }
+
+    if (vlan !== -1 && includes(originVlans, vlan)) {
+      destNetworkId = $network
+    }
   })
-  return defaultNetwork
+
+  return destNetworkId
 }

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,15 @@
       @extend .fa-server;
       @extend .text-danger;
     }
+    &-disabled {
+      @extend .fa;
+      @extend .fa-server;
+      @extend .text-warning;
+    }
+    &-forget {
+      @extend .fa;
+      @extend .fa-ban;
+    }
     &-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 {