5.1.9

fix(settings/logs): show params in a modal (#1424 )
feat(menu): add warning icon when disconnected
2016-08-22 14:02:40 -04:00 · 2016-08-19 16:09:20 +02:00 · 2016-08-19 13:52:31 +02:00 · 2016-08-19 13:40:55 +02:00 · 2016-08-19 12:27:48 +02:00 · 2016-08-19 10:06:45 +02:00
232 changed files with 40033 additions and 318 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,12 +0,0 @@
-{
-  "comments": false,
-  "compact": true,
-  "plugins": [
-    "transform-runtime"
-  ],
-  "presets": [
-    "es2015",
-    "stage-0",
-    "react"
-  ]
-}
--- a/.bowerrc
+++ b/.bowerrc
@@ -1,3 +0,0 @@
-{
-  "directory": "dist/bower_components"
-}
--- a/.mocha.js
+++ b/.mocha.js
@@ -1,5 +0,0 @@
-Error.stackTraceLimit = 100
-
-try { require('trace') } catch (_) {}
-try { require('clarify') } catch (_) {}
-try { require('source-map-support/register') } catch (_) {}
--- a/.mocha.opts
+++ b/.mocha.opts
@@ -1 +0,0 @@
--require ./.mocha.js
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,9 +1,11 @@
 language: node_js
 node_js:
  - 'stable'
-  - '4'
-  - '0.12'
-  - '0.10'
+  #- '4' # Disabled for now because npm 2 cannot properly handled broken peer dependencies.
+
+cache:
+  directories:
+    - node_modules

 # Use containers.
 # http://docs.travis-ci.com/user/workers/container-based-infrastructure/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,403 @@
 # ChangeLog

+## **5.1.0** (2016-07-26)
+
+### Enhancements
+
+- Improve backups timezone UI [\#1314](https://github.com/vatesfr/xo-web/issues/1314)
+- HOME view submenus [\#1306](https://github.com/vatesfr/xo-web/issues/1306)
+- Ability for a user to save SSH keys [\#1299](https://github.com/vatesfr/xo-web/issues/1299)
+- \[ACLs\] Ability to select all hosts/VMs [\#1296](https://github.com/vatesfr/xo-web/issues/1296)
+- Improve scheduling UI [\#1295](https://github.com/vatesfr/xo-web/issues/1295)
+- Plugins: Predefined configurations [\#1289](https://github.com/vatesfr/xo-web/issues/1289)
+- Button to recompute resource sets limits [\#1287](https://github.com/vatesfr/xo-web/issues/1287)
+- Credit scheduler CAP and weight configuration [\#1283](https://github.com/vatesfr/xo-web/issues/1283)
+- Migration form problem on the /v5/vms/\_\_UUID\_\_ page when doing xenmotion inside a pool [\#1254](https://github.com/vatesfr/xo-web/issues/1254)
+- /v5/\#/pools/\_\_UUID\_\_: patch table improvement  [\#1246](https://github.com/vatesfr/xo-web/issues/1246)
+- /v5/\#/hosts/\_\_UUID\_\_: patch list improvements ? [\#1245](https://github.com/vatesfr/xo-web/issues/1245)
+- F\*cking patches, how do they work? [\#1236](https://github.com/vatesfr/xo-web/issues/1236)
+- Change Default Filter [\#1235](https://github.com/vatesfr/xo-web/issues/1235)
+- Add a property on jobs to know their state [\#1232](https://github.com/vatesfr/xo-web/issues/1232)
+- Spanish translation [\#1231](https://github.com/vatesfr/xo-web/issues/1231)
+- Home: "Filter" input and keyboard focus [\#1228](https://github.com/vatesfr/xo-web/issues/1228)
+- Display xenserver version [\#1225](https://github.com/vatesfr/xo-web/issues/1225)
+- Plugin config: presets & defaults [\#1222](https://github.com/vatesfr/xo-web/issues/1222)
+- Allow halted VM migration [\#1216](https://github.com/vatesfr/xo-web/issues/1216)
+- Missing confirm dialog on critical button [\#1211](https://github.com/vatesfr/xo-web/issues/1211)
+- Backup logs are not sortable [\#1196](https://github.com/vatesfr/xo-web/issues/1196)
+- Page title with the name of current object [\#1185](https://github.com/vatesfr/xo-web/issues/1185)
+- Existing VIF management [\#1176](https://github.com/vatesfr/xo-web/issues/1176)
+- Do not display fast clone option is there isn't template disks [\#1172](https://github.com/vatesfr/xo-web/issues/1172)
+- UI issue when adding a user [\#1159](https://github.com/vatesfr/xo-web/issues/1159)
+- Combined values on stats [\#1158](https://github.com/vatesfr/xo-web/issues/1158)
+- Parallel coordinates graph [\#1157](https://github.com/vatesfr/xo-web/issues/1157)
+- VM creation on self-service as user [\#1155](https://github.com/vatesfr/xo-web/issues/1155)
+- VM copy bulk action on home view [\#1154](https://github.com/vatesfr/xo-web/issues/1154)
+- Better VDI map [\#1151](https://github.com/vatesfr/xo-web/issues/1151)
+- Missing tooltips on buttons [\#1150](https://github.com/vatesfr/xo-web/issues/1150)
+- Patching from pool view [\#1149](https://github.com/vatesfr/xo-web/issues/1149)
+- Missing patches in dashboard [\#1148](https://github.com/vatesfr/xo-web/issues/1148)
+- Improve tasks view [\#1147](https://github.com/vatesfr/xo-web/issues/1147)
+- Home bulk VM migration [\#1146](https://github.com/vatesfr/xo-web/issues/1146)
+- LDAP plugin clear password field [\#1145](https://github.com/vatesfr/xo-web/issues/1145)
+- Cron default behavior [\#1144](https://github.com/vatesfr/xo-web/issues/1144)
+- Modal for migrate on home [\#1143](https://github.com/vatesfr/xo-web/issues/1143)
+- /v5/\#/srs/\_\_UUID\_\_: UI improvements [\#1142](https://github.com/vatesfr/xo-web/issues/1142)
+- /v5/\#/pools/: some name should be links [\#1141](https://github.com/vatesfr/xo-web/issues/1141)
+- create the page /v5/\#/pools/ [\#1140](https://github.com/vatesfr/xo-web/issues/1140)
+- Dashboard: add links to different part of XOA [\#1139](https://github.com/vatesfr/xo-web/issues/1139)
+- /v5/\#/dashboard/overview: add link on the "Top 5 SR Usage" graph [\#1135](https://github.com/vatesfr/xo-web/issues/1135)
+- /v5/\#/backup/overview: display the error when there is one returned by xenserver on failed job. [\#1134](https://github.com/vatesfr/xo-web/issues/1134)
+- /v5/: add an option to set the number of element displayed in tables [\#1133](https://github.com/vatesfr/xo-web/issues/1133)
+- Updater refresh page after update [\#1131](https://github.com/vatesfr/xo-web/issues/1131)
+- /v5/\#/settings/plugins [\#1130](https://github.com/vatesfr/xo-web/issues/1130)
+- /v5/\#/new/sr: layout issue [\#1129](https://github.com/vatesfr/xo-web/issues/1129)
+- v5 /v5/\#/vms/new: layout issue [\#1128](https://github.com/vatesfr/xo-web/issues/1128)
+- v5 user page missing style [\#1127](https://github.com/vatesfr/xo-web/issues/1127)
+- Remote helper/tester [\#1075](https://github.com/vatesfr/xo-web/issues/1075)
+- Generate uiSchema from custom schema properties [\#951](https://github.com/vatesfr/xo-web/issues/951)
+- Customizing VM names generation during batch creation [\#949](https://github.com/vatesfr/xo-web/issues/949)
+
+### Bug fixes
+
+- Plugins: Don't use `default` attributes in presets list [\#1288](https://github.com/vatesfr/xo-web/issues/1288)
+- CPU weight must be an integer [\#1286](https://github.com/vatesfr/xo-web/issues/1286)
+- Overview of self service is always empty [\#1282](https://github.com/vatesfr/xo-web/issues/1282)
+- SR attach/creation issue [\#1281](https://github.com/vatesfr/xo-web/issues/1281)
+- Self service resources not modified after a VM deletion [\#1276](https://github.com/vatesfr/xo-web/issues/1276)
+- Scheduled jobs seems use GMT since 5.0 [\#1258](https://github.com/vatesfr/xo-web/issues/1258)
+- Can't create a VM with disks on 2 different SRs [\#1257](https://github.com/vatesfr/xo-web/issues/1257)
+- Graph display bug [\#1247](https://github.com/vatesfr/xo-web/issues/1247)
+- /v5/#/hosts/__UUID__: Patch list not limited to the current pool [\#1244](https://github.com/vatesfr/xo-web/issues/1244)
+- Replication issues [\#1233](https://github.com/vatesfr/xo-web/issues/1233)
+- VM creation install method disabled fields [\#1198](https://github.com/vatesfr/xo-web/issues/1198)
+- Update icon shouldn't be displayed when menu is collapsed [\#1188](https://github.com/vatesfr/xo-web/issues/1188)
+- /v5/ : Load average graph axis issue [\#1167](https://github.com/vatesfr/xo-web/issues/1167)
+- Some remote can't be opened [\#1164](https://github.com/vatesfr/xo-web/issues/1164)
+- Bulk action for hosts in home and pool view [\#1153](https://github.com/vatesfr/xo-web/issues/1153)
+- New Vif [\#1138](https://github.com/vatesfr/xo-web/issues/1138)
+- Missing SRs [\#1123](https://github.com/vatesfr/xo-web/issues/1123)
+- Continuous replication email alert does not obey per job setting [\#1121](https://github.com/vatesfr/xo-web/issues/1121)
+- Safari XO5 issue [\#1120](https://github.com/vatesfr/xo-web/issues/1120)
+- ACLs shoud be available in Enterprise Edition [\#1118](https://github.com/vatesfr/xo-web/issues/1118)
+- SR edit name or description doesn't work [\#1116](https://github.com/vatesfr/xo-web/issues/1116)
+- Bad RRD parsing for VIFs [\#969](https://github.com/vatesfr/xo-web/issues/969)
+
+## **5.0.0** (2016-06-24)
+
+### Enhancements
+
+- Handle failed quiesce in snapshots [\#1088](https://github.com/vatesfr/xo-web/issues/1088)
+- Sparklines stats [\#1061](https://github.com/vatesfr/xo-web/issues/1061)
+- Task view [\#1060](https://github.com/vatesfr/xo-web/issues/1060)
+- Improved import system [\#1048](https://github.com/vatesfr/xo-web/issues/1048)
+- Backup restore view improvements [\#1021](https://github.com/vatesfr/xo-web/issues/1021)
+- Restore VM - Wrong VLAN on the VMs interface [\#1016](https://github.com/vatesfr/xo-web/issues/1016)
+- Fast Disk Cloning [\#960](https://github.com/vatesfr/xo-web/issues/960)
+- Disaster recovery job should target SRs, not pools [\#955](https://github.com/vatesfr/xo-web/issues/955)
+- Improve Header/Content interaction in a page [\#926](https://github.com/vatesfr/xo-web/issues/926)
+- New default view [\#912](https://github.com/vatesfr/xo-web/issues/912)
+- Xen Patching - Restart Pending [\#883](https://github.com/vatesfr/xo-web/issues/883)
+- Hide About page for user that are not admin [\#877](https://github.com/vatesfr/xo-web/issues/877)
+- ACL: Ability to view/sort/group by User/Group, Objects or Role [\#875](https://github.com/vatesfr/xo-web/issues/875)
+- ACL: Ability to select multiple users & group when creating a rule [\#874](https://github.com/vatesfr/xo-web/issues/874)
+- Translation [\#839](https://github.com/vatesfr/xo-web/issues/839)
+- XO offer useless network interfaces for XenMontion [\#833](https://github.com/vatesfr/xo-web/issues/833)
+- Show HVM, PVM, PVHVM modes in guest details [\#806](https://github.com/vatesfr/xo-web/issues/806)
+- Tree view: display cpu available/total for each host [\#696](https://github.com/vatesfr/xo-web/issues/696)
+- Greenkeeper integration [\#667](https://github.com/vatesfr/xo-web/issues/667)
+- Clarify vCPUs and RAM editor  [\#658](https://github.com/vatesfr/xo-web/issues/658)
+- Backup LZ4 compression [\#647](https://github.com/vatesfr/xo-web/issues/647)
+- Support enum in plugins configuration [\#638](https://github.com/vatesfr/xo-web/issues/638)
+- Add configuration option to disable xoa-updater  [\#535](https://github.com/vatesfr/xo-web/issues/535)
+- Use cursors to add more context to actions [\#523](https://github.com/vatesfr/xo-web/issues/523)
+- Review UI for flat view [\#354](https://github.com/vatesfr/xo-web/issues/354)
+- Review UI for the tree view [\#353](https://github.com/vatesfr/xo-web/issues/353)
+- Tag filtering [\#233](https://github.com/vatesfr/xo-web/issues/233)
+- GUI review [\#230](https://github.com/vatesfr/xo-web/issues/230)
+- Review UI for VM creation [\#214](https://github.com/vatesfr/xo-web/issues/214)
+- Ability to collapse pools/hosts in main view [\#173](https://github.com/vatesfr/xo-web/issues/173)
+- Issue importing .xva VM via xo-web [\#1022](https://github.com/vatesfr/xo-web/issues/1022)
+- Enhancement Proposal - Cancel In Progress Backups [\#1003](https://github.com/vatesfr/xo-web/issues/1003)
+- Can't create VM with  CloudConfigDrive [\#917](https://github.com/vatesfr/xo-web/issues/917)
+- Auth: LDAP User causes problems [\#893](https://github.com/vatesfr/xo-web/issues/893)
+- No tags in Continuous Replication [\#838](https://github.com/vatesfr/xo-web/issues/838)
+- Delta backup Depth not working [\#802](https://github.com/vatesfr/xo-web/issues/802)
+- Update Section - Running version info missing - gui enhancement [\#795](https://github.com/vatesfr/xo-web/issues/795)
+- On reboot, vnc console wrongly scaled [\#722](https://github.com/vatesfr/xo-web/issues/722)
+- Make the object name \(title\) "sticky" at the top of the page [\#705](https://github.com/vatesfr/xo-web/issues/705)
+- pool view: display Local SR from hosts in the current pool [\#692](https://github.com/vatesfr/xo-web/issues/692)
+- tree view: display all IPs [\#689](https://github.com/vatesfr/xo-web/issues/689)
+- XO5 parallel distribution [\#462](https://github.com/vatesfr/xo-web/issues/462)
+- Load balancing with XO [\#423](https://github.com/vatesfr/xo-web/issues/423)
+
+### Bug fixes
+
+- vCPUs number when no tools installed [\#1089](https://github.com/vatesfr/xo-web/issues/1089)
+- Config Drive textbox disappears when content is deleted [\#1012](https://github.com/vatesfr/xo-web/issues/1012)
+- storage status not changed in host view page after disconnect/connect  [\#1009](https://github.com/vatesfr/xo-web/issues/1009)
+- Cannot Delete Logs From Backup Overview [\#1004](https://github.com/vatesfr/xo-web/issues/1004)
+- \[v5.x\] Plugins configuration: optional non-used objects are sent [\#1000](https://github.com/vatesfr/xo-web/issues/1000)
+- "@" char in remote password break the remote view [\#997](https://github.com/vatesfr/xo-web/issues/997)
+- Handle MEMORY\_CONSTRAINT\_VIOLATION correctly [\#970](https://github.com/vatesfr/xo-web/issues/970)
+- VM creation error on XenServer Dundee [\#964](https://github.com/vatesfr/xo-web/issues/964)
+- Copy VMs doesn't display all SRs [\#945](https://github.com/vatesfr/xo-web/issues/945)
+- Autopower\_on wrong value [\#937](https://github.com/vatesfr/xo-web/issues/937)
+- Correctly handle unknown users in group view [\#900](https://github.com/vatesfr/xo-web/issues/900)
+- Importing into Dundee [\#887](https://github.com/vatesfr/xo-web/issues/887)
+- update status - gui resize issue [\#803](https://github.com/vatesfr/xo-web/issues/803)
+- Backup Remote Stores Problem [\#751](https://github.com/vatesfr/xo-web/issues/751)
+- VM view is broken when changing a disk SR twice [\#670](https://github.com/vatesfr/xo-web/issues/670)
+- console mouse sync  [\#280](https://github.com/vatesfr/xo-web/issues/280)
+
+## **4.16.0** (2016-04-29)
+
+Maintenance release
+
+### Enhancements
+
+- TOO\_MANY\_PENDING\_TASKS [\#861](https://github.com/vatesfr/xo-web/issues/861)
+
+### Bug fixes
+
+- Incorrect VM target name with continuous replication [\#904](https://github.com/vatesfr/xo-web/issues/904)
+- Error while deleting users [\#901](https://github.com/vatesfr/xo-web/issues/901)
+- Use an available path to the SR to create a config drive [\#882](https://github.com/vatesfr/xo-web/issues/882)
+- VM autoboot don't set the right pool parameter [\#879](https://github.com/vatesfr/xo-web/issues/879)
+- BUG: ACL with NFS ISO Library not working! [\#870](https://github.com/vatesfr/xo-web/issues/870)
+- Broken paths in backups in SMB [\#865](https://github.com/vatesfr/xo-web/issues/865)
+- Plugins page loads users/groups multiple times [\#829](https://github.com/vatesfr/xo-web/issues/829)
+- "Ghost" VM remains after migration [\#769](https://github.com/vatesfr/xo-web/issues/769)
+
+## **4.15.0** (2016-03-21)
+
+Load balancing, SMB delta support, advanced network operations...
+
+### Enhancements
+
+- Add the job name inside the backup email report [\#819](https://github.com/vatesfr/xo-web/issues/819)
+- Delta backup with quiesce [\#812](https://github.com/vatesfr/xo-web/issues/812)
+- Hosts: No user feedback when error occurs with SR connect / disconnect [\#810](https://github.com/vatesfr/xo-web/issues/810)
+- Expose components versions [\#807](https://github.com/vatesfr/xo-web/issues/807)
+- Rework networks/PIFs management [\#805](https://github.com/vatesfr/xo-web/issues/805)
+- Displaying all SRs and a list of available hosts for creating VM from a pool [\#790](https://github.com/vatesfr/xo-web/issues/790)
+- Add "Source network" on "VM migration" screen [\#785](https://github.com/vatesfr/xo-web/issues/785)
+- Migration queue [\#783](https://github.com/vatesfr/xo-web/issues/783)
+- Match network names for VM migration [\#782](https://github.com/vatesfr/xo-web/issues/782)
+- Disk names [\#780](https://github.com/vatesfr/xo-web/issues/780)
+- Self service: should the user be able to set the CPU weight? [\#767](https://github.com/vatesfr/xo-web/issues/767)
+- host & pool Citrix license status [\#763](https://github.com/vatesfr/xo-web/issues/763)
+- pool view: Provide "updates" section [\#762](https://github.com/vatesfr/xo-web/issues/762)
+- XOA ISO image: ambigious root disk label [\#761](https://github.com/vatesfr/xo-web/issues/761)
+- Host info: provide system serial number [\#760](https://github.com/vatesfr/xo-web/issues/760)
+- CIFS ISO SR Creation [\#731](https://github.com/vatesfr/xo-web/issues/731)
+- MAC address not preserved on VM restore [\#707](https://github.com/vatesfr/xo-web/issues/707)
+- Failing replication job should send reports [\#659](https://github.com/vatesfr/xo-web/issues/659)
+- Display networks in the Pool view [\#226](https://github.com/vatesfr/xo-web/issues/226)
+
+### Bug fixes
+
+- Broken link to backup remote  [\#821](https://github.com/vatesfr/xo-web/issues/821)
+- Issue with self-signed cert for email plugin [\#817](https://github.com/vatesfr/xo-web/issues/817)
+- Plugins view, reset form and errors [\#815](https://github.com/vatesfr/xo-web/issues/815)
+- HVM recovery mode is broken [\#794](https://github.com/vatesfr/xo-web/issues/794)
+- Disk bug when creating vm from template [\#778](https://github.com/vatesfr/xo-web/issues/778)
+- Can't mount NFS shares in remote stores [\#775](https://github.com/vatesfr/xo-web/issues/775)
+- VM disk name and description not passed during creation [\#774](https://github.com/vatesfr/xo-web/issues/774)
+- NFS mount problem for Windows share [\#771](https://github.com/vatesfr/xo-web/issues/771)
+- lodash.pluck not installed [\#757](https://github.com/vatesfr/xo-web/issues/757)
+- this.\_getAuthenticationTokensForUser is not a function [\#755](https://github.com/vatesfr/xo-web/issues/755)
+- CentOS 6.x 64bit template creates a VM that won't boot [\#733](https://github.com/vatesfr/xo-web/issues/733)
+- Lot of xo:perf leading to XO crash [\#575](https://github.com/vatesfr/xo-web/issues/575)
+- New collection checklist [\#262](https://github.com/vatesfr/xo-web/issues/262)
+
+## **4.14.0** (2016-02-23)
+
+Self service, custom CloudInit...
+
+### Enhancements
+
+- VM creation self service with quotas [\#285](https://github.com/vatesfr/xo-web/issues/285)
+- Cloud config custom user data [\#706](https://github.com/vatesfr/xo-web/issues/706)
+- Patches behind a proxy [\#737](https://github.com/vatesfr/xo-web/issues/737)
+- Remote store status indicator [\#728](https://github.com/vatesfr/xo-web/issues/728)
+- Patch list order [\#724](https://github.com/vatesfr/xo-web/issues/724)
+- Enable reporting on additional backup types [\#717](https://github.com/vatesfr/xo-web/issues/717)
+- Tooltip name for cancel [\#703](https://github.com/vatesfr/xo-web/issues/703)
+- Portable VHD merging [\#646](https://github.com/vatesfr/xo-web/issues/646)
+
+### Bug fixes
+
+- Avoid merge between two delta vdi backups [\#702](https://github.com/vatesfr/xo-web/issues/702)
+- Text in table is not cut anymore [\#713](https://github.com/vatesfr/xo-web/issues/713)
+- Disk size edition issue with float numbers [\#719](https://github.com/vatesfr/xo-web/issues/719)
+- Create vm, summary is not refreshed [\#721](https://github.com/vatesfr/xo-web/issues/721)
+- Boot order problem [\#726](https://github.com/vatesfr/xo-web/issues/726)
+
+## **4.13.0** (2016-02-05)
+
+Backup checksum, SMB remotes...
+
+### Enhancements
+
+- Add SMB mount for remote [\#338](https://github.com/vatesfr/xo-web/issues/338)
+- Centralize Perm in a lib [\#345](https://github.com/vatesfr/xo-web/issues/345)
+- Expose interpool migration details [\#567](https://github.com/vatesfr/xo-web/issues/567)
+- Add checksum for delta backup [\#617](https://github.com/vatesfr/xo-web/issues/617)
+- Redirect from HTTP to HTTPS [\#626](https://github.com/vatesfr/xo-web/issues/626)
+- Expose vCPU weight [\#633](https://github.com/vatesfr/xo-web/issues/633)
+- Avoid metadata in delta backup [\#651](https://github.com/vatesfr/xo-web/issues/651)
+- Button to clear logs [\#661](https://github.com/vatesfr/xo-web/issues/661)
+- Units for RAM and disks [\#666](https://github.com/vatesfr/xo-web/issues/666)
+- Remove multiple VDIs at once [\#676](https://github.com/vatesfr/xo-web/issues/676)
+- Find orphaned VDI snapshots [\#679](https://github.com/vatesfr/xo-web/issues/679)
+- New health view in Dashboard [\#680](https://github.com/vatesfr/xo-web/issues/680)
+- Use physical usage for VDI and SR [\#682](https://github.com/vatesfr/xo-web/issues/682)
+- TLS configuration [\#685](https://github.com/vatesfr/xo-web/issues/685)
+- Better VM info on tree view [\#688](https://github.com/vatesfr/xo-web/issues/688)
+- Absolute values in tooltips for tree view [\#690](https://github.com/vatesfr/xo-web/issues/690)
+- Absolute values for host memory [\#691](https://github.com/vatesfr/xo-web/issues/691)
+
+### Bug fixes
+
+- Issues on host console screen [\#672](https://github.com/vatesfr/xo-web/issues/672)
+- NFS remote mount fails in particular case [\#665](https://github.com/vatesfr/xo-web/issues/665)
+- Unresponsive pages [\#662](https://github.com/vatesfr/xo-web/issues/662)
+- Live migration fail in the same pool with local SR fails [\#655](https://github.com/vatesfr/xo-web/issues/655)
+
+## **4.12.0** (2016-01-18)
+
+Continuous Replication, Continuous Delta backup...
+
+### Enhancements
+
+- Continuous VM replication [\#582](https://github.com/vatesfr/xo-web/issues/582)
+- Continuous Delta Backup [\#576](https://github.com/vatesfr/xo-web/issues/576)
+- Scheduler should not run job again if previous instance is not finished [\#642](https://github.com/vatesfr/xo-web/issues/642)
+- Boot VM automatically after creation [\#635](https://github.com/vatesfr/xo-web/issues/635)
+- Manage existing VIFs in templates [\#630](https://github.com/vatesfr/xo-web/issues/630)
+- Support templates with existing install repository [\#627](https://github.com/vatesfr/xo-web/issues/627)
+- Remove running VMs [\#616](https://github.com/vatesfr/xo-web/issues/616)
+- Prevent a VM to start before delta import is finished [\#613](https://github.com/vatesfr/xo-web/issues/613)
+- Spawn multiple VMs at once [\#606](https://github.com/vatesfr/xo-web/issues/606)
+- Fixed `suspendVM` in tree view. [\#619](https://github.com/vatesfr/xo-web/pull/619) ([pdonias](https://github.com/pdonias))
+
+### Bug fixes
+
+- User defined MAC address is not fetch in VM install [\#643](https://github.com/vatesfr/xo-web/issues/643)
+- CoreOsCloudConfig is not shown with CoreOS [\#639](https://github.com/vatesfr/xo-web/issues/639)
+- Plugin activation/deactivation in web UI seems broken [\#637](https://github.com/vatesfr/xo-web/issues/637)
+- Issue when creating CloudConfig drive [\#636](https://github.com/vatesfr/xo-web/issues/636)
+- CloudConfig hostname shouldn't have space [\#634](https://github.com/vatesfr/xo-web/issues/634)
+- Cloned VIFs are not properly deleted on VM creation [\#632](https://github.com/vatesfr/xo-web/issues/632)
+- Default PV args missing during VM creation [\#628](https://github.com/vatesfr/xo-web/issues/628)
+- VM creation problems from custom templates [\#625](https://github.com/vatesfr/xo-web/issues/625)
+- Emergency shutdown race condition [\#622](https://github.com/vatesfr/xo-web/issues/622)
+- `vm.delete\(\)` should not delete VDIs attached to other VMs [\#621](https://github.com/vatesfr/xo-web/issues/621)
+- VM creation error from template with a disk [\#581](https://github.com/vatesfr/xo-web/issues/581)
+- Only delete VDI exports when VM backup is successful [\#644](https://github.com/vatesfr/xo-web/issues/644)
+- Change the name of an imported VM during the import process [\#641](https://github.com/vatesfr/xo-web/issues/641)
+- Creating a new VIF in view is partially broken [\#652](https://github.com/vatesfr/xo-web/issues/652)
+- Grey out the "create button" during VM creation [\#654](https://github.com/vatesfr/xo-web/issues/654)
+
+## **4.11.0** (2015-12-22)
+
+Delta backup, CloudInit...
+
+### Enhancements
+
+- Visible list of SR inside a VM [\#601](https://github.com/vatesfr/xo-web/issues/601)
+- VDI move [\#591](https://github.com/vatesfr/xo-web/issues/591)
+- Edit pre-existing disk configuration during VM creation [\#589](https://github.com/vatesfr/xo-web/issues/589)
+- Allow disk size edition [\#587](https://github.com/vatesfr/xo-web/issues/587)
+- Better VDI resize support [\#585](https://github.com/vatesfr/xo-web/issues/585)
+- Remove manual VM export metadata in UI [\#580](https://github.com/vatesfr/xo-web/issues/580)
+- Support import VM metadata [\#579](https://github.com/vatesfr/xo-web/issues/579)
+- Set a default pool SR [\#572](https://github.com/vatesfr/xo-web/issues/572)
+- ISOs should be sorted by name [\#565](https://github.com/vatesfr/xo-web/issues/565)
+- Button to boot a VM from a disc once [\#564](https://github.com/vatesfr/xo-web/issues/564)
+- Ability to boot a PV VM from a disc [\#563](https://github.com/vatesfr/xo-web/issues/563)
+- Add an option to manually run backup jobs [\#562](https://github.com/vatesfr/xo-web/issues/562)
+- backups to unmounted storage [\#561](https://github.com/vatesfr/xo-web/issues/561)
+- Root integer properties cannot be edited in plugins configuration form [\#550](https://github.com/vatesfr/xo-web/issues/550)
+- Generic CloudConfig drive [\#549](https://github.com/vatesfr/xo-web/issues/549)
+- Auto-discovery of installed xo-server plugins [\#546](https://github.com/vatesfr/xo-web/issues/546)
+- Hide info on flat view [\#545](https://github.com/vatesfr/xo-web/issues/545)
+- Config plugin boolean properties must have a default value \(undefined prohibited\) [\#543](https://github.com/vatesfr/xo-web/issues/543)
+- Present detailed errors on plugin configuration failures [\#530](https://github.com/vatesfr/xo-web/issues/530)
+- Do not reset form on failures in plugins configuration [\#529](https://github.com/vatesfr/xo-web/issues/529)
+- XMPP alert plugin [\#518](https://github.com/vatesfr/xo-web/issues/518)
+- Hide tag adders depending on ACLs [\#516](https://github.com/vatesfr/xo-web/issues/516)
+- Choosing a framework for xo-web 5 [\#514](https://github.com/vatesfr/xo-web/issues/514)
+- Prevent adding a host in an existing XAPI connection [\#466](https://github.com/vatesfr/xo-web/issues/466)
+- Read only connection to Xen servers/pools [\#439](https://github.com/vatesfr/xo-web/issues/439)
+- generic notification system [\#391](https://github.com/vatesfr/xo-web/issues/391)
+- Data architecture review [\#384](https://github.com/vatesfr/xo-web/issues/384)
+- Make filtering easier to understand/add some "default" filters [\#207](https://github.com/vatesfr/xo-web/issues/207)
+- Improve performance [\#148](https://github.com/vatesfr/xo-web/issues/148)
+
+### Bug fixes
+
+- VM metadata export should not require a snapshot [\#615](https://github.com/vatesfr/xo-web/issues/615)
+- Missing patch for all hosts is continuously refreshed [\#609](https://github.com/vatesfr/xo-web/issues/609)
+- Backup import memory issue [\#608](https://github.com/vatesfr/xo-web/issues/608)
+- Host list missing patch is buggy [\#604](https://github.com/vatesfr/xo-web/issues/604)
+- Servers infos should not been refreshed while a field is being edited [\#595](https://github.com/vatesfr/xo-web/issues/595)
+- Servers list should not been re-order while a field is being edited [\#594](https://github.com/vatesfr/xo-web/issues/594)
+- Correctly display size in interface \(binary scale\) [\#592](https://github.com/vatesfr/xo-web/issues/592)
+- Display failures on VM boot order modification [\#560](https://github.com/vatesfr/xo-web/issues/560)
+- `vm.setBootOrder\(\)` should throw errors on failures \(non-HVM VMs\) [\#559](https://github.com/vatesfr/xo-web/issues/559)
+- Hide boot order form for non-HVM VMs [\#558](https://github.com/vatesfr/xo-web/issues/558)
+- Allow editing PV args even when empty \(but only for PV VMs\) [\#557](https://github.com/vatesfr/xo-web/issues/557)
+- Crashes when using legacy event system [\#556](https://github.com/vatesfr/xo-web/issues/556)
+- XenServer patches check error for 6.1 [\#555](https://github.com/vatesfr/xo-web/issues/555)
+- activation plugin xo-server-transport-email  [\#553](https://github.com/vatesfr/xo-web/issues/553)
+- Server error with JSON on 32 bits Dom0 [\#552](https://github.com/vatesfr/xo-web/issues/552)
+- Cloud Config drive shouldn't be created on default SR [\#548](https://github.com/vatesfr/xo-web/issues/548)
+- Deep properties cannot be edited in plugins configuration form [\#521](https://github.com/vatesfr/xo-web/issues/521)
+- Aborted VM export should cancel the operation [\#490](https://github.com/vatesfr/xo-web/issues/490)
+- VM missing with same UUID after an inter-pool migration [\#284](https://github.com/vatesfr/xo-web/issues/284)
+
+## **4.10.0** (2015-11-27)
+
+Job management, email notifications, CoreOS/Docker, Quiesce snapshots...
+
+### Enhancements
+
+- Job management ([xo-web#487](https://github.com/vatesfr/xo-web/issues/487))
+- Patch upload on all connected servers ([xo-web#168](https://github.com/vatesfr/xo-web/issues/168))
+- Emergency shutdown ([xo-web#185](https://github.com/vatesfr/xo-web/issues/185))
+- CoreOS/docker template install ([xo-web#246](https://github.com/vatesfr/xo-web/issues/246))
+- Email for backups ([xo-web#308](https://github.com/vatesfr/xo-web/issues/308))
+- Console Clipboard ([xo-web#408](https://github.com/vatesfr/xo-web/issues/408))
+- Logs from CLI ([xo-web#486](https://github.com/vatesfr/xo-web/issues/486))
+- Save disconnected servers ([xo-web#489](https://github.com/vatesfr/xo-web/issues/489))
+- Snapshot with quiesce ([xo-web#491](https://github.com/vatesfr/xo-web/issues/491))
+- Start VM in reovery mode ([xo-web#495](https://github.com/vatesfr/xo-web/issues/495))
+- Username in logs ([xo-web#498](https://github.com/vatesfr/xo-web/issues/498))
+- Delete associated tokens with user ([xo-web#500](https://github.com/vatesfr/xo-web/issues/500))
+- Validate plugin configuration ([xo-web#503](https://github.com/vatesfr/xo-web/issues/503))
+- Avoid non configured plugins to be loaded ([xo-web#504](https://github.com/vatesfr/xo-web/issues/504))
+- Verbose API logs if configured ([xo-web#505](https://github.com/vatesfr/xo-web/issues/505))
+- Better backup overview ([xo-web#512](https://github.com/vatesfr/xo-web/issues/512))
+- VM auto power on ([xo-web#519](https://github.com/vatesfr/xo-web/issues/519))
+- Title property supported in config schema ([xo-web#522](https://github.com/vatesfr/xo-web/issues/522))
+- Start VM export only when necessary ([xo-web#534](https://github.com/vatesfr/xo-web/issues/534))
+- Input type should be number ([xo-web#538](https://github.com/vatesfr/xo-web/issues/538))
+
+### Bug fixes
+
+- Numbers/int support in plugins config ([xo-web#531](https://github.com/vatesfr/xo-web/issues/531))
+- Boolean support in plugins config ([xo-web#528](https://github.com/vatesfr/xo-web/issues/528))
+- Keyboard unusable outside console ([xo-web#513](https://github.com/vatesfr/xo-web/issues/513))
+- UsernameField for SAML ([xo-web#513](https://github.com/vatesfr/xo-web/issues/513))
+- Wrong display of "no plugin found" ([xo-web#508](https://github.com/vatesfr/xo-web/issues/508))
+- Bower build error ([xo-web#488](https://github.com/vatesfr/xo-web/issues/488))
+- VM cloning should require SR permission ([xo-web#472](https://github.com/vatesfr/xo-web/issues/472))
+- Xen tools status ([xo-web#471](https://github.com/vatesfr/xo-web/issues/471))
+- Can't delete ghost user ([xo-web#464](https://github.com/vatesfr/xo-web/issues/464))
+- Stats with old versions of Node ([xo-web#463](https://github.com/vatesfr/xo-web/issues/463))
+
 ## **4.9.0** (2015-11-13)

 Automated DR, restore backup, VM copy
--- a/ISSUE_TEMPLATE.md
+++ b/ISSUE_TEMPLATE.md
@@ -0,0 +1,28 @@
+<!--
+Welcome to the issue section of Xen Orchestra!
+
+Here you can:
+- report an issue
+- propose an enhancement
+- ask a question
+
+The template below is only a proposition for your ticket, feel free to
+change it as appropriate :)
+-->
+
+### Context
+
+- **XO version**: XO appliance / `stable` branch / `next-release` branch
+
+If from the sources:
+
+- **Component**: xo-web / xo-server / *unknown*
+- **Node/npm version**: *just execute `npm version`*
+
+### Expected behavior
+
+<!-- What you expect to happen -->
+
+### Current behavior
+
+<!-- What is actually happening -->
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Xen Orchestra Web
+# Xen Orchestra Web [![Build Status](https://travis-ci.org/vatesfr/xo-web.png?branch=master)](https://travis-ci.org/vatesfr/xo-web)

 ![](http://i.imgur.com/tRffA5y.png)

@@ -6,9 +6,6 @@ XO-Web is part of [Xen Orchestra](https://github.com/vatesfr/xo), a web interfac

 It is a web client for [XO-Server](https://github.com/vatesfr/xo-server).

-[![Dependency Status](https://david-dm.org/vatesfr/xo-web.svg?theme=shields.io)](https://david-dm.org/vatesfr/xo-web)
-[![devDependency Status](https://david-dm.org/vatesfr/xo-web/dev-status.svg?theme=shields.io)](https://david-dm.org/vatesfr/xo-web#info=devDependencies)
-
 ___

 ## Installation
@@ -29,6 +26,31 @@ Development build:
 $ npm run dev
 ```

+### Environment
+
+#### `NODE_ENV`
+
+Set to *production* it disables many checks which result in increased
+performance.
+
+#### `XOA_PLAN`
+
+- 1: Free
+- 2: Starter
+- 3: Enterprise
+- 4: Premium
+- 5: Sources
+
+```js
+if (process.env.XOA_PLAN < 5) {
+  console.log('included only in XOA')
+}
+
+if (process.env.XOA_PLAN > 3) {
+  console.log('included only in Premium and Sources')
+}
+```
+
 ## How to report a bug?

 If you are certain the bug is exclusively related to XO-Web, you may use the [bugtracker of this repository](https://github.com/vatesfr/xo-web/issues).
@@ -38,8 +60,8 @@ Otherwise, please consider using the [bugtracker of the general repository](http
 ## Process for new release

 ```bash
-# Switch to the master branch.
-git checkout master
+# Switch to the stable branch.
+git checkout stable

 # Fetches latest changes.
 git pull --ff-only
@@ -53,12 +75,12 @@ npm version minor
 # Go back to the next-release branch.
 git checkout next-release

-# Fetches the last changes (the merge and version bump) from master to
+# Fetches the last changes (the merge and version bump) from stable to
 # next-release.
-git merge --ff-only master
+git merge --ff-only stable

 # Push the changes on git.
-git push --follow-tags origin master next-release
+git push --follow-tags origin stable next-release

 # Publish this release to npm.
 npm publish
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,8 +2,8 @@

 // ===================================================================

-var SRC_DIR = __dirname + '/src'
-var DIST_DIR = __dirname + '/dist'
+var SRC_DIR = __dirname + '/src' // eslint-disable-line no-path-concat
+var DIST_DIR = __dirname + '/dist' // eslint-disable-line no-path-concat

 // Port to use for the livereload server.
 //
@@ -22,9 +22,13 @@ var SERVER_PORT = LIVERELOAD_PORT + 1
 // - `null` to make it accessible for the whole network
 var SERVER_ADDR = 'localhost'

-var PRODUCTION = process.argv.indexOf('--production') !== -1
+var PRODUCTION = process.env.NODE_ENV === 'production'
 var DEVELOPMENT = !PRODUCTION

+if (!process.env.XOA_PLAN) {
+  process.env.XOA_PLAN = '5' // Open Source
+}
+
 // ===================================================================

 var gulp = require('gulp')
@@ -45,20 +49,47 @@ function lazyFn (factory) {
 // -------------------------------------------------------------------

 var livereload = lazyFn(function () {
-  var livereload = require('gulp-livereload')
-  livereload.listen(LIVERELOAD_PORT)
+  var livereload = require('gulp-refresh')
+  livereload.listen({
+    port: LIVERELOAD_PORT
+  })

  return livereload
 })

 var pipe = lazyFn(function () {
-  var pipe = require('nice-pipe')
-
-  return PRODUCTION
-    ? pipe
-    : function () {
-      return require('gulp-plumber')().pipe(pipe.apply(this, arguments))
+  var current
+  function pipeCore (streams) {
+    var i, n, stream
+    for (i = 0, n = streams.length; i < n; ++i) {
+      stream = streams[i]
+      if (!stream) {
+        // Nothing to do
+      } else if (stream instanceof Array) {
+        pipeCore(stream)
+      } else {
+        current = current
+          ? current.pipe(stream)
+          : stream
+      }
    }
+  }
+
+  var push = Array.prototype.push
+  return function (streams) {
+    try {
+      if (!(streams instanceof Array)) {
+        streams = []
+        push.apply(streams, arguments)
+      }
+
+      pipeCore(streams)
+
+      return current
+    } finally {
+      current = null
+    }
+  }
 })

 var resolvePath = lazyFn(function () {
@@ -77,23 +108,25 @@ var src = lazyFn(function () {
  }

  return PRODUCTION
-    ? function src (pattern, base) {
-      base = resolve(base)
+    ? function src (pattern, opts) {
+      var base = resolve(opts && opts.base)

      return gulp.src(pattern, {
        base: base,
        cwd: base,
-        sourcemaps: true
+        passthrough: opts && opts.passthrough,
+        sourcemaps: opts && opts.sourcemaps
      })
    }
-    : function src (pattern, base) {
-      base = resolve(base)
+    : function src (pattern, opts) {
+      var base = resolve(opts && opts.base)

      return pipe(
        gulp.src(pattern, {
          base: base,
          cwd: base,
-          sourcemaps: true
+          passthrough: opts && opts.passthrough,
+          sourcemaps: opts && opts.sourcemaps
        }),
        require('gulp-watch')(pattern, {
          base: base,
@@ -125,10 +158,9 @@ var dest = lazyFn(function () {
      return gulp.dest(resolve(path), opts)
    }
    : function dest (path) {
-      return pipe(
-        gulp.dest(resolve(path), opts),
-        livereload()
-      )
+      var stream = gulp.dest(resolve(path), opts)
+      stream.pipe(livereload())
+      return stream
    }
 })

@@ -141,9 +173,10 @@ function browserify (path, opts) {

  var bundler = require('browserify')(path, {
    basedir: SRC_DIR,
-    debug: DEVELOPMENT,
+    debug: DEVELOPMENT, // TODO: enable also in production but need to make it work with gulp-uglify.
    extensions: opts.extensions,
-    fullPaths: DEVELOPMENT,
+    fullPaths: false,
+    paths: SRC_DIR + '/common',
    standalone: opts.standalone,

    // Required by Watchify.
@@ -151,8 +184,15 @@ function browserify (path, opts) {
    packageCache: {}
  })

+  var plugins = opts.plugins
+  for (var i = 0, n = plugins && plugins.length; i < n; ++i) {
+    var plugin = plugins[i]
+    bundler.plugin(require(plugin[0]), plugin[1])
+  }
+
  if (PRODUCTION) {
-    bundler.plugin('bundle-collapser/plugin')
+    // FIXME: does not work with react-intl (?!)
+    // bundler.plugin('bundle-collapser/plugin')
  } else {
    bundler = require('watchify')(bundler)
  }
@@ -209,7 +249,7 @@ function browserify (path, opts) {

 gulp.task(function buildPages () {
  return pipe(
-    src('index.jade'),
+    src('index.jade', { sourcemaps: true }),
    require('gulp-jade')(),
    DEVELOPMENT && require('gulp-embedlr')({
      port: LIVERELOAD_PORT
@@ -220,17 +260,22 @@ gulp.task(function buildPages () {

 gulp.task(function buildScripts () {
  return pipe(
-    browserify('./index.js'),
-    PRODUCTION && require('gulp-uglify')({
-      mangle: false // Avoid breaking Angular deps injector.
+    browserify('./index.js', {
+      plugins: [
+        // ['css-modulesify', {
+        ['modular-css/browserify', {
+          css: DIST_DIR + '/modules.css'
+        }]
+      ]
    }),
+    PRODUCTION && require('gulp-uglify')(),
    dest()
  )
 })

 gulp.task(function buildStyles () {
  return pipe(
-    src('index.scss'),
+    src('index.scss', { sourcemaps: true }),
    require('gulp-sass')(),
    require('gulp-autoprefixer')([
      'last 1 version',
@@ -244,10 +289,14 @@ gulp.task(function buildStyles () {
 gulp.task(function copyAssets () {
  return pipe(
    src(['assets/**/*', 'favicon.*']),
-    src(
-      'fontawesome-webfont.*',
-      __dirname + '/node_modules/font-awesome/fonts'
-    ),
+    src('fontawesome-webfont.*', {
+      base: __dirname + '/node_modules/font-awesome/fonts', // eslint-disable-line no-path-concat
+      passthrough: true
+    }),
+    src(['!*.css', 'font-mfizz.*'], {
+      base: __dirname + '/node_modules/font-mfizz/dist', // eslint-disable-line no-path-concat
+      passthrough: true
+    }),
    dest()
  )
 })
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "private": true,
+  "private": false,
  "name": "xo-web",
-  "version": "5.0.0",
+  "version": "5.1.9",
  "license": "AGPL-3.0",
  "description": "Web interface client for Xen-Orchestra",
  "keywords": [
@@ -27,81 +27,150 @@
    "dist/"
  ],
  "engines": {
-    "node": ">=0.12"
+    "node": ">=4",
+    "npm": ">=3"
  },
  "devDependencies": {
-    "babel-eslint": "^5.0.0-beta6",
-    "babel-plugin-transform-runtime": "^6.4.3",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
+    "ansi_up": "^1.3.0",
+    "asap": "^2.0.4",
+    "ava": "^0.16.0",
+    "babel-eslint": "^6.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-constant-elements": "^6.5.0",
+    "babel-plugin-transform-react-inline-elements": "^6.6.5",
+    "babel-plugin-transform-runtime": "^6.6.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-runtime": "^6.6.1",
    "babelify": "^7.2.0",
+    "benchmark": "^2.1.0",
    "bootstrap": "github:twbs/bootstrap#v4-dev",
    "browserify": "^13.0.0",
-    "browserify-plain-jade": "^0.2.2",
    "bundle-collapser": "^1.2.1",
-    "clarify": "^1.0.5",
-    "connect": "^3.4.0",
+    "chartist-plugin-legend": "^0.3.1",
+    "chartist-plugin-tooltip": "0.0.11",
+    "classnames": "^2.2.3",
+    "connect": "^3.4.1",
+    "cookies-js": "^1.2.2",
+    "d3": "^4.0.0-alpha.50",
    "dependency-check": "^2.5.1",
    "font-awesome": "^4.5.0",
+    "font-mfizz": "github:fizzed/font-mfizz",
+    "ghooks": "^1.1.1",
+    "globby": "^6.0.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.0",
-    "gulp-csso": "^1.0.1",
+    "gulp-csso": "^2.0.0",
    "gulp-embedlr": "^0.5.2",
    "gulp-jade": "^1.1.0",
-    "gulp-livereload": "^3.8.1",
-    "gulp-plumber": "^1.0.1",
-    "gulp-sass": "^2.1.1",
-    "gulp-uglify": "^1.5.1",
+    "gulp-plumber": "^1.1.0",
+    "gulp-refresh": "^1.1.0",
+    "gulp-sass": "^2.2.0",
+    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.5",
-    "history": "^2.0.0-rc2",
-    "mocha": "^2.3.4",
-    "must": "^0.13.1",
-    "nice-pipe": "^0.3.4",
-    "nyc": "^5.3.0",
-    "react": "^0.14.6",
-    "react-dom": "^0.14.6",
-    "react-intl": "^1.2.2",
-    "react-redux": "^4.0.6",
-    "react-router": "^2.0.0-rc5",
-    "redux": "^3.0.5",
-    "redux-devtools": "^3.0.1",
-    "redux-router": "^1.0.0-beta7",
-    "redux-thunk": "^1.0.3",
+    "human-format": "^0.6.0",
+    "jsonrpc-websocket-client": "0.0.1-5",
+    "later": "^1.2.0",
+    "lodash": "^4.6.1",
+    "loose-envify": "^1.1.0",
+    "marked": "^0.3.5",
+    "modular-css": "^0.26.0",
+    "moment": "^2.13.0",
+    "moment-timezone": "^0.5.4",
+    "notifyjs": "^2.0.1",
+    "novnc-node": "^0.5.3",
+    "promise-toolbox": "^0.5.0",
+    "random-password": "^0.1.2",
+    "react": "^15.0.0",
+    "react-addons-shallow-compare": "^15.1.0",
+    "react-bootstrap-4": "^0.29.1",
+    "react-chartist": "^0.10.1",
+    "react-copy-to-clipboard": "^4.0.2",
+    "react-debounce-input": "^2.4.0",
+    "react-dnd": "^2.1.4",
+    "react-dnd-html5-backend": "^2.1.2",
+    "react-document-title": "^2.0.2",
+    "react-dom": "^15.0.0",
+    "react-dropzone": "^3.5.0",
+    "react-intl": "^2.0.1",
+    "react-key-handler": "^0.2.0",
+    "react-notify": "^2.0.1",
+    "react-redux": "^4.4.0",
+    "react-router": "^3.0.0-alpha.1",
+    "react-select": "^1.0.0-beta13",
+    "react-sparklines": "^1.5.0",
+    "react-virtualized": "^7.4.0",
+    "readable-stream": "^2.0.6",
+    "redux": "^3.3.1",
+    "redux-devtools": "^3.1.1",
+    "redux-devtools-dock-monitor": "^1.1.0",
+    "redux-devtools-log-monitor": "^1.0.5",
+    "redux-thunk": "^2.0.1",
+    "reselect": "^2.2.1",
    "serve-static": "^1.10.2",
-    "source-map-support": "^0.4.0",
-    "standard": "^5.4.1",
-    "trace": "^2.0.2",
+    "standard": "^7.0.0",
+    "superagent": "^2.0.0",
+    "vinyl": "^1.1.1",
    "watchify": "^3.7.0",
-    "xo-lib": "^0.8.0-1"
+    "xo-acl-resolver": "^0.2.1",
+    "xo-lib": "^0.8.0",
+    "xo-remote-parser": "^0.3"
  },
  "scripts": {
-    "build": "gulp build --production",
-    "dev": "gulp build server",
-    "dev-test": "mocha --opts .mocha.opts --watch --reporter=min \"dist/**/*.spec.js\"",
+    "benchmarks": "./tools/run-benchmarks.js 'src/**/*.bench.js'",
+    "build": "npm run build-indexes && NODE_ENV=production gulp build",
+    "build-indexes": "./tools/generate-index src/common/intl/locales",
+    "dev": "npm run build-indexes && gulp build server",
+    "dev-test": "ava --watch",
    "lint": "standard",
-    "depcheck": "dependency-check ./package.json",
-    "posttest": "npm run lint && npm run depcheck",
+    "posttest": "npm run lint",
    "prepublish": "npm run build",
-    "test": "nyc mocha --opts .mocha.opts \"dist/**/*.spec.js\""
-  },
-  "browser": {
-    "node_modules/ws/index.js": "./ws.js"
+    "test": "ava"
  },
  "browserify": {
    "transform": [
      "babelify",
-      "browserify-plain-jade"
+      "loose-envify"
    ]
  },
+  "ava": {
+    "babel": "inherit",
+    "files": [
+      "src/**/*.spec.js"
+    ],
+    "require": [
+      "babel-register"
+    ]
+  },
+  "babel": {
+    "env": {
+      "production": {
+        "plugins": [
+          "transform-react-constant-elements",
+          "transform-react-inline-elements"
+        ]
+      }
+    },
+    "plugins": [
+      "transform-decorators-legacy",
+      "transform-runtime"
+    ],
+    "presets": [
+      "es2015",
+      "react",
+      "stage-0"
+    ]
+  },
+  "config": {
+    "ghooks": {
+      "commit-msg": "npm test"
+    }
+  },
  "standard": {
    "ignore": [
      "dist"
    ],
    "parser": "babel-eslint"
-  },
-  "dependencies": {
-    "babel-runtime": "^6.3.19",
-    "redux-promise": "^0.5.1"
  }
 }
--- a/src/assets/loading.svg
+++ b/src/assets/loading.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width='62px' height='62px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#cfcfcf" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#366e98" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="1s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="1s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/chartist.scss
+++ b/src/chartist.scss
@@ -0,0 +1,126 @@
+
+// CHARTIST  ===================================================================
+
+$ct-series-colors: (
+  $brand-success,
+  $brand-primary,
+  #60bd68,
+  #f17cb0,
+  #b2912f,
+  #b276b2,
+  #decf3f,
+  #f15854,
+  #4d4d4d,
+  #dda458,
+  #eacf7d,
+  #86797d,
+  #b2c326,
+  #6188e2,
+  #a748ca
+) !default;
+
+@import "../node_modules/chartist/dist/scss/settings/_chartist-settings";
+@import "../node_modules/chartist/dist/scss/chartist";
+
+.ct-chart {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+// Line in charts with only 2px in width
+.ct-line {
+  stroke-width: 2px;
+}
+
+.ct-bar {
+  stroke-width: 10%;
+}
+
+.ct-point {
+  stroke-width: 30px;
+  stroke-opacity: 0!important;
+}
+
+.ct-point:hover {
+  stroke-opacity: 0.2!important;
+  stroke-width: 20px;
+}
+
+.ct-tooltip {
+  position: absolute;
+  display: inline-block;
+  min-width: 5em;
+  padding: 8px 10px;
+  background: #383838;
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+  z-index: 10;
+  font-weight: 700;
+
+  // Arrow!
+  &:before {
+    bottom: -14px;
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    pointer-events: none;
+    border-color: rgba(251, 249, 228, 0);
+    border-top-color: #383838;
+    border-width: 7px;
+    margin-left: -8px;
+  }
+
+  &.hide {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+// CHARTIST LEGEND =============================================================
+
+.ct-legend {
+  bottom: 0;
+  margin-bottom: -1em;
+
+  li {
+    position: relative;
+    padding-left: 0.5em;
+    list-style-type: none;
+    display: inline-block;
+    margin-right: 0.5em;
+    font-size: 0.8em;
+  }
+
+  li:before {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    left: 0;
+    content: '';
+    border: 3px solid transparent;
+    border-radius: 2px;
+    margin-right: 0.2em;
+  }
+
+  li.inactive:before {
+    background: transparent;
+  }
+
+  &.ct-legend-inside {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  @for $i from 0 to length($ct-series-colors) {
+    .ct-series-#{$i}:before {
+      background-color: nth($ct-series-colors, $i + 1);
+      border-color: nth($ct-series-colors, $i + 1);
+    }
+  }
+}
--- a/src/common/action-bar.js
+++ b/src/common/action-bar.js
@@ -0,0 +1,41 @@
+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'
+
+const ActionBar = ({ actions, param }) => (
+  <ButtonGroup>
+      {map(actions, ({ handler, handlerParam = param, label, icon, redirectOnSuccess }, index) => (
+        <Tooltip key={index} content={_(label)}>
+          <ActionButton
+            key={index}
+            btnStyle='secondary'
+            handler={handler || noop}
+            handlerParam={handlerParam}
+            icon={icon}
+            redirectOnSuccess={redirectOnSuccess}
+            size='large'
+          />
+        </Tooltip>
+    ))}
+  </ButtonGroup>
+)
+ActionBar.propTypes = {
+  actions: React.PropTypes.arrayOf(
+    React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      icon: React.PropTypes.string.isRequired,
+      handler: React.PropTypes.func,
+      redirectOnSuccess: React.PropTypes.string
+    })
+  ).isRequired,
+  display: React.PropTypes.oneOf(['icon', 'text', 'both'])
+}
+export { ActionBar as default }
--- a/src/common/action-button.js
+++ b/src/common/action-button.js
@@ -0,0 +1,119 @@
+import Icon from 'icon'
+import isFunction from 'lodash/isFunction'
+import React from 'react'
+import { Button } from 'react-bootstrap-4/lib'
+
+import Component from './base-component'
+import logError from './log-error'
+import propTypes from './prop-types'
+
+@propTypes({
+  btnStyle: propTypes.string,
+  disabled: propTypes.bool,
+  form: propTypes.string,
+  handler: propTypes.func.isRequired,
+  handlerParam: propTypes.any,
+  icon: propTypes.string.isRequired,
+  redirectOnSuccess: propTypes.oneOfType([
+    propTypes.func,
+    propTypes.string
+  ]),
+  size: propTypes.oneOf([
+    'large',
+    'small'
+  ])
+})
+export default class ActionButton extends Component {
+  static contextTypes = {
+    router: React.PropTypes.object
+  }
+
+  async _execute () {
+    if (this.state.working) {
+      return
+    }
+
+    const {
+      handler,
+      handlerParam
+    } = this.props
+
+    try {
+      this.setState({
+        error: null,
+        working: true
+      })
+
+      const result = await handler(handlerParam)
+
+      let { redirectOnSuccess } = this.props
+      if (redirectOnSuccess) {
+        if (isFunction(redirectOnSuccess)) {
+          redirectOnSuccess = redirectOnSuccess(result)
+        }
+        return this.context.router.push(redirectOnSuccess)
+      }
+
+      this.setState({
+        working: false
+      })
+    } catch (error) {
+      this.setState({
+        error,
+        working: false
+      })
+      logError(error)
+    }
+  }
+  _execute = ::this._execute
+
+  _eventListener = event => {
+    event.preventDefault()
+    this._execute()
+  }
+
+  componentDidMount () {
+    const { form } = this.props
+
+    if (form) {
+      document.getElementById(form).addEventListener('submit', this._eventListener)
+    }
+  }
+
+  componentWillUnmount () {
+    const { form } = this.props
+
+    if (form) {
+      document.getElementById(form).removeEventListener('submit', this._eventListener)
+    }
+  }
+
+  render () {
+    const {
+      props: {
+        btnStyle,
+        children,
+        className,
+        disabled,
+        form,
+        icon,
+        size: bsSize,
+        style
+      },
+      state: { error, working }
+    } = this
+
+    return <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 />
+      {children && ' '}
+      {children}
+    </Button>
+  }
+}
--- a/src/common/action-row-button/index.css
+++ b/src/common/action-row-button/index.css
@@ -0,0 +1,7 @@
+.button {
+  opacity: 0.5;
+}
+
+tr:hover .button, tr:focus .button {
+  opacity: 1;
+}
--- a/src/common/action-row-button/index.js
+++ b/src/common/action-row-button/index.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import ActionButton from '../action-button'
+
+import styles from './index.css'
+
+const ActionRowButton = props => (
+  <ActionButton
+    {...props}
+    className={styles.button}
+    size='small'
+  />
+)
+export { ActionRowButton as default }
--- a/src/common/action-toggle.js
+++ b/src/common/action-toggle.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import ActionButton from './action-button'
+import propTypes from './prop-types'
+
+const ActionToggle = ({ className, value, ...props }) =>
+  <ActionButton
+    {...props}
+    btnStyle={value ? 'success' : null}
+    icon={value ? 'toggle-on' : 'toggle-off'}
+  />
+
+export default propTypes({
+  value: propTypes.bool
+})(ActionToggle)
--- a/src/common/base-component.js
+++ b/src/common/base-component.js
@@ -0,0 +1,71 @@
+import forEach from 'lodash/forEach'
+import { Component } from 'react'
+
+import getEventValue from './get-event-value'
+import invoke from './invoke'
+import shallowEqual from './shallow-equal'
+
+export default class BaseComponent extends Component {
+  constructor (props, context) {
+    super(props, context)
+
+    // It really should have been done in React.Component!
+    this.state = {}
+
+    this._linkedState = null
+
+    if (process.env.NODE_ENV !== 'production') {
+      this.render = invoke(this.render, render => () => {
+        console.log('render', this.constructor.name)
+
+        return render.call(this)
+      })
+    }
+  }
+
+  // See https://preactjs.com/guide/linked-state
+  linkState (name) {
+    let linkedState = this._linkedState
+    let cb
+    if (!linkedState) {
+      linkedState = this._linkedState = {}
+    } else if ((cb = linkedState[name])) {
+      return cb
+    }
+
+    return (linkedState[name] = event => {
+      this.setState({
+        [name]: getEventValue(event)
+      })
+    })
+  }
+
+  shouldComponentUpdate (newProps, newState) {
+    return !(
+      shallowEqual(this.props, newProps) &&
+      shallowEqual(this.state, newState)
+    )
+  }
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  const diff = (name, old, cur) => {
+    const keys = []
+
+    forEach(old, (value, key) => {
+      if (cur[key] !== value) {
+        keys.push(key)
+      }
+    })
+
+    if (keys.length) {
+      console.log(name, keys.sort().join())
+    }
+  }
+
+  BaseComponent.prototype.componentDidUpdate = function (oldProps, oldState) {
+    const prefix = `${this.constructor.name} updated because of its`
+    diff(`${prefix} props:`, oldProps, this.props)
+    diff(`${prefix} state:`, oldState, this.state)
+  }
+}
--- a/src/common/browser-notification.js
+++ b/src/common/browser-notification.js
@@ -0,0 +1,35 @@
+import { noop } from 'utils'
+import Notify from 'notifyjs'
+
+let notify
+export { notify as default }
+
+const sendNotification = (title, body) => {
+  new Notify(title, {
+    body,
+    timeout: 5,
+    icon: 'assets/logo.png'
+  }).show()
+}
+
+const requestPermission = (...args) => {
+  if (Notify.isSupported()) {
+    Notify.requestPermission(
+      () => {
+        console.log('notifications allowed')
+
+        return (notify = sendNotification)(...args)
+      },
+      () => {
+        console.log('notifications denied')
+
+        notify = noop
+      }
+    )
+  } else {
+    notify = noop
+    console.warn('notifications are not supported')
+  }
+}
+
+notify = Notify.needsPermission ? requestPermission : sendNotification
--- a/src/common/card.js
+++ b/src/common/card.js
@@ -0,0 +1,51 @@
+import React from 'react'
+
+import propTypes from './prop-types'
+
+const CARD_STYLE = {
+  minHeight: '100%'
+}
+
+const CARD_STYLE_WITH_SHADOW = {
+  ...CARD_STYLE,
+  boxShadow: '0 10px 6px -6px #777' // https://css-tricks.com/almanac/properties/b/box-shadow/
+}
+
+const CARD_HEADER_STYLE = {
+  minHeight: '100%',
+  textAlign: 'center'
+}
+
+export const Card = propTypes({
+  disableMaxHeight: propTypes.bool,
+  shadow: propTypes.bool
+})(({
+  children,
+  shadow
+}) => (
+  <div className='card' style={shadow ? CARD_STYLE_WITH_SHADOW : CARD_STYLE}>
+    {children}
+  </div>
+))
+
+export const CardHeader = propTypes({
+  className: propTypes.string
+})(({
+  children,
+  className
+}) => (
+  <h4 className={`card-header ${className || ''}`} style={CARD_HEADER_STYLE}>
+    {children}
+  </h4>
+))
+
+export const CardBlock = propTypes({
+  className: propTypes.string
+})(({
+  children,
+  className
+}) => (
+  <div className={`card-block ${className || ''}`}>
+    {children}
+  </div>
+))
--- a/src/common/center-panel/index.css
+++ b/src/common/center-panel/index.css
@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  min-height: 100%;
+}
+
+.content {
+  margin: auto;
+  text-align: center;
+}
--- a/src/common/center-panel/index.js
+++ b/src/common/center-panel/index.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+import styles from './index.css'
+
+const CenterPanel = ({ children }) =>
+  <div className={styles.container}>
+    <div className={styles.content}>
+      {children}
+    </div>
+  </div>
+
+export { CenterPanel as default }
--- a/src/common/collapse.js
+++ b/src/common/collapse.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Component from './base-component'
+import Icon from './icon'
+import propTypes from './prop-types'
+
+@propTypes({
+  children: propTypes.any.isRequired,
+  className: propTypes.string,
+  buttonText: propTypes.any.isRequired
+})
+export default class Collapse extends Component {
+  _onClick = () => {
+    this.setState({
+      isOpened: !this.state.isOpened
+    })
+  }
+
+  render () {
+    const { props } = this
+    const { isOpened } = this.state
+
+    return (
+      <div className={props.className}>
+        <button className='btn btn-lg btn-primary btn-block' onClick={this._onClick}>
+          {props.buttonText} <Icon icon={`chevron-${isOpened ? 'up' : 'down'}`} />
+        </button>
+        {isOpened && props.children}
+      </div>
+    )
+  }
+}
--- a/src/common/combobox/index.css
+++ b/src/common/combobox/index.css
@@ -0,0 +1,3 @@
+.button {
+    border-radius: 0px;
+};
--- a/src/common/combobox/index.js
+++ b/src/common/combobox/index.js
@@ -0,0 +1,101 @@
+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,
+  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}
+        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>
+    )
+  }
+}
--- a/src/common/complex-matcher/index.bench.js
+++ b/src/common/complex-matcher/index.bench.js
@@ -0,0 +1,18 @@
+import {
+  parse,
+  toString
+} from './'
+import {
+  ast,
+  pattern
+} from './index.fixtures'
+
+export default ({ benchmark }) => {
+  benchmark('parse', () => {
+    parse(pattern)
+  })
+
+  benchmark('toString', () => {
+    ast::toString()
+  })
+}
--- a/src/common/complex-matcher/index.fixtures.js
+++ b/src/common/complex-matcher/index.fixtures.js
@@ -0,0 +1,18 @@
+import {
+  createAnd,
+  createOr,
+  createNot,
+  createProperty,
+  createString
+} from './'
+
+export const pattern = 'foo !"\\\\ \\"" name:|(wonderwoman batman)'
+
+export const ast = createAnd([
+  createString('foo'),
+  createNot(createString('\\ "')),
+  createProperty('name', createOr([
+    createString('wonderwoman'),
+    createString('batman')
+  ]))
+])
--- a/src/common/complex-matcher/index.js
+++ b/src/common/complex-matcher/index.js
@@ -0,0 +1,405 @@
+import every from 'lodash/every'
+import filter from 'lodash/filter'
+import forEach from 'lodash/forEach'
+import isArray from 'lodash/isArray'
+import isPlainObject from 'lodash/isPlainObject'
+import isString from 'lodash/isString'
+import map from 'lodash/map'
+import some from 'lodash/some'
+
+import filterReduce from '../filter-reduce'
+import invoke from '../invoke'
+
+// ===================================================================
+
+const RAW_STRING_CHARS = invoke(() => {
+  const chars = { __proto__: null }
+  const add = (a, b = a) => {
+    let i = a.charCodeAt(0)
+    const j = b.charCodeAt(0)
+    while (i <= j) {
+      chars[String.fromCharCode(i++)] = true
+    }
+  }
+  add('$')
+  add('-')
+  add('.')
+  add('0', '9')
+  add('_')
+  add('A', 'Z')
+  add('a', 'z')
+  return chars
+})
+const isRawString = string => {
+  const { length } = string
+  for (let i = 0; i < length; ++i) {
+    if (!RAW_STRING_CHARS[string[i]]) {
+      return false
+    }
+  }
+  return true
+}
+
+// -------------------------------------------------------------------
+
+export const createAnd = children => children.length === 1
+  ? children[0]
+  : { type: 'and', children }
+
+export const createOr = children => children.length === 1
+  ? children[0]
+  : { type: 'or', children }
+
+export const createNot = child => ({ type: 'not', child })
+
+export const createProperty = (name, child) => ({ type: 'property', name, child })
+
+export const createString = value => ({ type: 'string', value })
+
+// -------------------------------------------------------------------
+
+// *and         = terms
+// terms        = term+
+// term         = ws (groupedAnd | or | not | property | string) ws
+// ws           = ' '*
+// groupedAnd   = "(" and ")"
+// *or          = "|" ws "(" terms ")"
+// *not         = "!" term
+// *property    = string ws ":" term
+// *string      = quotedString | rawString
+// quotedString = "\"" ( /[^"\]/ | "\\\\" | "\\\"" )+
+// rawString    = /[a-z0-9-_.]+/i
+export const parse = invoke(() => {
+  let i
+  let n
+  let input
+
+  // -----
+
+  const backtrace = parser => () => {
+    const pos = i
+    const node = parser()
+    if (node != null) {
+      return node
+    }
+    i = pos
+  }
+
+  // -----
+
+  const parseAnd = () => parseTerms(createAnd)
+  const parseTerms = fn => {
+    let term = parseTerm()
+    if (!term) {
+      return
+    }
+
+    const terms = [ term ]
+    while ((term = parseTerm())) {
+      terms.push(term)
+    }
+    return fn(terms)
+  }
+  const parseTerm = () => {
+    parseWs()
+
+    const child = (
+      parseGroupedAnd() ||
+      parseOr() ||
+      parseNot() ||
+      parseProperty() ||
+      parseString()
+    )
+    if (child) {
+      parseWs()
+      return child
+    }
+  }
+  const parseWs = () => {
+    while (input[i] === ' ') {
+      ++i
+    }
+
+    return true
+  }
+  const parseGroupedAnd = backtrace(() => {
+    let and
+    if (
+      input[i++] === '(' &&
+      (and = parseAnd()) &&
+      input[i++] === ')'
+    ) {
+      return and
+    }
+  })
+  const parseOr = backtrace(() => {
+    let or
+    if (
+      input[i++] === '|' &&
+      parseWs() &&
+      input[i++] === '(' &&
+      (or = parseTerms(createOr)) &&
+      input[i++] === ')'
+    ) {
+      return or
+    }
+  })
+  const parseNot = backtrace(() => {
+    let child
+    if (
+      input[i++] === '!' &&
+      (child = parseTerm())
+    ) {
+      return createNot(child)
+    }
+  })
+  const parseProperty = backtrace(() => {
+    let name, child
+    if (
+      (name = parseString()) &&
+      parseWs() &&
+      (input[i++] === ':') &&
+      (child = parseTerm())
+    ) {
+      return createProperty(name.value, child)
+    }
+  })
+  const parseString = () => {
+    let value
+    if (
+      (value = parseQuotedString()) != null ||
+      (value = parseRawString()) != null
+    ) {
+      return createString(value)
+    }
+  }
+  const parseQuotedString = backtrace(() => {
+    if (input[i++] !== '"') {
+      return
+    }
+
+    const value = []
+    let char
+    while (i < n && (char = input[i++]) !== '"') {
+      if (char === '\\') {
+        char = input[i++]
+      }
+      value.push(char)
+    }
+
+    return value.join('')
+  })
+  const parseRawString = () => {
+    let value = ''
+    let c
+    while (
+      (c = input[i]) &&
+      RAW_STRING_CHARS[c]
+    ) {
+      ++i
+      value += c
+    }
+    if (value.length) {
+      return value
+    }
+  }
+
+  return input_ => {
+    if (!input_) {
+      return
+    }
+
+    i = 0
+    input = input_.split('')
+    n = input.length
+
+    try {
+      return parseAnd()
+    } finally {
+      input = null
+    }
+  }
+})
+
+// -------------------------------------------------------------------
+
+const _getPropertyClauseStrings = ({ child }) => {
+  const { type } = child
+
+  if (type === 'or') {
+    const strings = []
+    forEach(child.children, child => {
+      if (child.type === 'string') {
+        strings.push(child.value)
+      }
+    })
+    return strings
+  }
+
+  if (type === 'string') {
+    return [ child.value ]
+  }
+
+  return []
+}
+
+// Find possible values for property clauses in a and clause.
+export const getPropertyClausesStrings = function () {
+  if (!this) {
+    return {}
+  }
+
+  const { type } = this
+
+  if (type === 'property') {
+    return {
+      [this.name]: _getPropertyClauseStrings(this)
+    }
+  }
+
+  if (type === 'and') {
+    const strings = {}
+    forEach(this.children, node => {
+      if (node.type === 'property') {
+        const { name } = node
+        const values = strings[name]
+        if (values) {
+          values.push.apply(values, _getPropertyClauseStrings(node))
+        } else {
+          strings[name] = _getPropertyClauseStrings(node)
+        }
+      }
+    })
+    return strings
+  }
+
+  return {}
+}
+
+// -------------------------------------------------------------------
+
+export const removePropertyClause = function (name) {
+  let type
+  if (
+    !this ||
+    (type = this.type) === 'property' && this.name === name
+  ) {
+    return
+  }
+
+  if (type === 'and') {
+    return createAnd(filter(this.children, node =>
+      node.type !== 'property' || node.name !== name
+    ))
+  }
+
+  return this
+}
+
+// -------------------------------------------------------------------
+
+const _addAndClause = (node, child, predicate, reducer) =>
+  createAnd(filterReduce(
+    node.type === 'and'
+      ? node.children
+      : [ node ],
+    predicate,
+    reducer,
+    child
+  ))
+
+export const setPropertyClause = function (name, child) {
+  const property = createProperty(
+    name,
+    isString(child) ? createString(child) : child
+  )
+
+  if (!this) {
+    return property
+  }
+
+  return _addAndClause(
+    this,
+    property,
+    node => node.type === 'property' && node.name === name,
+  )
+}
+
+// -------------------------------------------------------------------
+
+export const execute = invoke(() => {
+  const visitors = {
+    and: ({ children }, value) => (
+      every(children, child => child::execute(value))
+    ),
+    not: ({ child }, value) => (
+      !child::execute(value)
+    ),
+    or: ({ children }, value) => (
+      some(children, child => child::execute(value))
+    ),
+    property: ({ name, child }, value) => (
+      value != null && child::execute(value[name])
+    ),
+    string: invoke(() => {
+      const match = (pattern, value) => {
+        if (isString(value)) {
+          return value.toLowerCase().indexOf(pattern) !== -1
+        }
+
+        if (isArray(value) || isPlainObject(value)) {
+          return some(value, value => match(pattern, value))
+        }
+
+        return false
+      }
+
+      return ({ value: pattern }, value) => (
+        match(pattern.toLowerCase(), value)
+      )
+    })
+  }
+
+  return function (value) {
+    return visitors[this.type](this, value)
+  }
+})
+
+// -------------------------------------------------------------------
+
+export const toString = invoke(() => {
+  const toStringTerms = terms => map(terms, toString).join(' ')
+  const toStringGroup = terms => `(${toStringTerms(terms)})`
+
+  const visitors = {
+    and: ({ children }) => toStringGroup(children),
+    not: ({ child }) => `!${toString(child)}`,
+    or: ({ children }) => `|${toStringGroup(children)}`,
+    property: ({ name, child }) => `${toString(createString(name))}:${toString(child)}`,
+    string: ({ value }) => isRawString(value)
+      ? value
+      : `"${value.replace(/\\|"/g, match => `\\${match}`)}"`
+  }
+
+  const toString = node => visitors[node.type](node)
+
+  // Special case for a root “and”: do not add braces.
+  return function () {
+    return !this
+      ? ''
+      : this.type === 'and'
+        ? toStringTerms(this.children)
+        : toString(this)
+  }
+})
+
+// -------------------------------------------------------------------
+
+export const create = pattern => {
+  pattern = parse(pattern)
+  if (!pattern) {
+    return
+  }
+
+  return value => pattern::execute(value)
+}
--- a/src/common/complex-matcher/index.spec.js
+++ b/src/common/complex-matcher/index.spec.js
@@ -0,0 +1,53 @@
+import test from 'ava'
+
+import {
+  getPropertyClausesStrings,
+  parse,
+  setPropertyClause,
+  toString
+} from './'
+import {
+  ast,
+  pattern
+} from './index.fixtures'
+
+test('getPropertyClausesStrings', t => {
+  let tmp = parse('foo bar:baz baz:|(foo bar)')::getPropertyClausesStrings()
+  t.deepEqual(
+    tmp,
+    {
+      bar: [ 'baz' ],
+      baz: [ 'foo', 'bar' ]
+    }
+  )
+})
+
+test('parse', t => {
+  t.deepEqual(parse(pattern), ast)
+})
+
+test('setPropertyClause', t => {
+  t.is(
+    null::setPropertyClause('foo', 'bar')::toString(),
+    'foo:bar'
+  )
+
+  t.is(
+    parse('baz')::setPropertyClause('foo', 'bar')::toString(),
+    'baz foo:bar'
+  )
+
+  t.is(
+    parse('plip foo:baz plop')::setPropertyClause('foo', 'bar')::toString(),
+    'plip plop foo:bar'
+  )
+
+  t.is(
+    parse('foo:|(baz plop)')::setPropertyClause('foo', 'bar')::toString(),
+    'foo:bar'
+  )
+})
+
+test('toString', t => {
+  t.is(pattern, ast::toString())
+})
--- a/src/common/copiable/index.css
+++ b/src/common/copiable/index.css
@@ -0,0 +1,9 @@
+.container .button {
+  position: absolute;
+  margin-left: 1ex;
+  visibility: hidden;
+}
+
+.container:hover .button {
+  visibility: visible;
+}
--- a/src/common/copiable/index.js
+++ b/src/common/copiable/index.js
@@ -0,0 +1,31 @@
+import _ from 'intl'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import classNames from 'classnames'
+import Tooltip from 'tooltip'
+import React, { createElement } from 'react'
+
+import Icon from '../icon'
+import propTypes from '../prop-types'
+
+import styles from './index.css'
+
+const Copiable = propTypes({
+  data: propTypes.string,
+  tagName: propTypes.string
+})(props => createElement(
+  props.tagName || 'span',
+  {
+    ...props,
+    className: classNames(styles.container, props.className)
+  },
+  props.children,
+  ' ',
+  <Tooltip content={_('copyToClipboard')}>
+    <CopyToClipboard text={props.data || props.children}>
+      <button className={classNames('btn btn-sm btn-secondary', styles.button)}>
+        <Icon icon='clipboard' />
+      </button>
+    </CopyToClipboard>
+  </Tooltip>
+))
+export { Copiable as default }
--- a/src/common/d3-utils.js
+++ b/src/common/d3-utils.js
@@ -0,0 +1,9 @@
+import forEach from 'lodash/forEach'
+
+export function setStyles (style) {
+  forEach(style, (value, key) => {
+    this.style(key, value)
+  })
+
+  return this
+}
--- a/src/common/debug.js
+++ b/src/common/debug.js
@@ -0,0 +1,53 @@
+import React, { Component, PropTypes } from 'react'
+import { isPromise } from 'promise-toolbox'
+
+const toString = value => JSON.stringify(value, null, 2)
+
+// This component does not handle changes in its `promise` property.
+class DebugAsync extends Component {
+  static propTypes = {
+    promise: PropTypes.object.isRequired
+  }
+
+  constructor (props) {
+    super()
+
+    this.state = {
+      status: 'pending'
+    }
+
+    props.promise.then(
+      value => this.setState({ status: 'resolved', value }),
+      value => this.setState({ status: 'rejected', value })
+    )
+  }
+
+  shouldComponentUpdate (_, newState) {
+    return this.state.status !== newState.status
+  }
+
+  render () {
+    const { status, value } = this.state
+
+    if (status === 'pending') {
+      return <pre>{'Promise { <pending> }'}</pre>
+    }
+
+    return <pre>
+      {'Promise { '}
+        {status === 'rejected' && '<rejected> '}
+        {toString(value)}
+      {' }'}
+    </pre>
+  }
+}
+
+const Debug = ({ value }) => isPromise(value)
+  ? <DebugAsync promise={value} />
+  : <pre>{toString(value)}</pre>
+
+Debug.propTypes = {
+  value: PropTypes.any.isRequired
+}
+
+export { Debug as default }
--- a/src/common/editable.js
+++ b/src/common/editable.js
@@ -0,0 +1,477 @@
+import findKey from 'lodash/findKey'
+import isFunction from 'lodash/isFunction'
+import isString from 'lodash/isString'
+import map from 'lodash/map'
+import pick from 'lodash/pick'
+import React from 'react'
+
+import _ from './intl'
+import Component from './base-component'
+import Icon from './icon'
+import logError from './log-error'
+import propTypes from './prop-types'
+import Tooltip from './tooltip'
+import { formatSize } from './utils'
+import { SizeInput } from './form'
+import {
+  SelectHost,
+  SelectNetwork,
+  SelectPool,
+  SelectRemote,
+  SelectSr,
+  SelectSubject,
+  SelectTag,
+  SelectVm,
+  SelectVmTemplate
+} from './select-objects'
+
+const LONG_CLICK = 400
+const SELECT_STYLE = { padding: '0px' }
+const SIZE_STYLE = { width: '10rem' }
+const EDITABLE_STYLE = {
+  borderBottom: '1px dashed #ccc',
+  cursor: 'context-menu'
+}
+const LONG_EDITABLE_STYLE = {
+  cursor: 'context-menu'
+}
+
+@propTypes({
+  alt: propTypes.node.isRequired
+})
+class Hover extends Component {
+  constructor () {
+    super()
+
+    this.state = {
+      hover: false
+    }
+
+    this._onMouseEnter = () => this.setState({ hover: true })
+    this._onMouseLeave = () => this.setState({ hover: false })
+  }
+
+  render () {
+    if (this.state.hover) {
+      return <span onMouseLeave={this._onMouseLeave}>
+        {this.props.alt}
+      </span>
+    }
+
+    return <span onMouseEnter={this._onMouseEnter}>
+      {this.props.children}
+    </span>
+  }
+}
+
+@propTypes({
+  onChange: propTypes.func.isRequired,
+  onUndo: propTypes.oneOfType([
+    propTypes.bool,
+    propTypes.func
+  ]),
+  useLongClick: propTypes.bool,
+  value: propTypes.any.isRequired
+})
+class Editable extends Component {
+  get value () {
+    throw new Error('not implemented')
+  }
+
+  _onKeyDown = event => {
+    const { keyCode } = event
+    if (keyCode === 27) {
+      return this._closeEdition()
+    }
+
+    if (keyCode === 13) {
+      return this._save()
+    }
+  }
+
+  _closeEdition = () => {
+    this.setState({ editing: false })
+  }
+
+  _openEdition = () => {
+    this.setState({
+      editing: true,
+      error: null,
+      saving: false
+    })
+  }
+
+  _undo = () => {
+    const { props } = this
+    const { onUndo } = props
+    if (onUndo === false) {
+      return
+    }
+
+    return this.__save(
+      () => this.state.previous,
+      isFunction(onUndo) ? onUndo : props.onChange
+    )
+  }
+
+  _save () {
+    return this.__save(
+      () => this.value,
+      this.props.onChange
+    )
+  }
+
+  async __save (getValue, saveValue) {
+    const { props } = this
+
+    try {
+      const value = getValue()
+      const previous = props.value
+      if (value === previous) {
+        return this._closeEdition()
+      }
+
+      this.setState({ saving: true })
+
+      await saveValue(value)
+
+      this.setState({ previous })
+      this._closeEdition()
+    } catch (error) {
+      this.setState({
+        error: isString(error) ? error : error.message,
+        saving: false
+      })
+      logError(error)
+    }
+  }
+
+  __startTimer = event => {
+    event.persist()
+    this._timeout = setTimeout(() => {
+      event.preventDefault()
+      this._openEdition()
+    }, LONG_CLICK)
+  }
+  __stopTimer = () => clearTimeout(this._timeout)
+
+  render () {
+    const { state, props } = this
+
+    if (!state.editing) {
+      const { onUndo, previous } = state
+      const { useLongClick } = props
+
+      const success = <Icon icon='success' />
+      return <span style={useLongClick ? LONG_EDITABLE_STYLE : EDITABLE_STYLE}>
+        <span
+          onClick={!useLongClick && this._openEdition}
+          onMouseDown={useLongClick && this.__startTimer}
+          onMouseUp={useLongClick && this.__stopTimer}
+        >
+          {this._renderDisplay()}
+        </span>
+        {previous != null && (onUndo !== false
+          ? <Hover
+            alt={<a onClick={this._undo}><Icon icon='undo' /></a>}
+          >
+            {success}
+          </Hover>
+          : success
+        )}
+      </span>
+    }
+
+    const { error, saving } = state
+
+    return <span>
+      {this._renderEdition()}
+      {saving && <span>{' '}<Icon icon='loading' /></span>}
+      {error != null && <span>
+        {' '}<Tooltip content={error}><Icon icon='error' /></Tooltip>
+      </span>}
+    </span>
+  }
+}
+
+@propTypes({
+  autoComplete: propTypes.string,
+  maxLength: propTypes.number,
+  minLength: propTypes.number,
+  pattern: propTypes.string,
+  value: propTypes.string.isRequired
+})
+export class Text extends Editable {
+  get value () {
+    const { input } = this.refs
+
+    // FIXME: should be properly forwarded to the user.
+    const error = input.validationMessage
+    if (error) {
+      throw new Error(error)
+    }
+
+    return input.value
+  }
+
+  _onInput = ({ target }) => {
+    target.style.width = `${target.value.length + 1}ex`
+  }
+
+  _renderDisplay () {
+    const {
+      children,
+      value
+    } = this.props
+
+    if (children || value) {
+      return <span> {children || value} </span>
+    }
+
+    const {
+      placeholder,
+      useLongClick
+    } = this.props
+
+    return <span className='text-muted'>
+      {placeholder ||
+        (useLongClick ? _('editableLongClickPlaceholder') : _('editableClickPlaceholder'))
+      }
+    </span>
+  }
+
+  _renderEdition () {
+    const { value } = this.props
+    const { saving } = this.state
+
+    // Optional props that the user may set on the input.
+    const extraProps = pick(this.props, [
+      'autoComplete',
+      'maxLength',
+      'minLength',
+      'pattern'
+    ])
+
+    return <input
+      {...extraProps}
+
+      autoFocus
+      defaultValue={value}
+      onBlur={this._closeEdition}
+      onInput={this._onInput}
+      onKeyDown={this._onKeyDown}
+      readOnly={saving}
+      ref='input'
+      style={{
+        width: `${value.length + 1}ex`
+      }}
+      type={this._isPassword ? 'password' : 'text'}
+    />
+  }
+}
+
+export class Password extends Text {
+  // TODO: this is a hack, this class should probably have a better
+  // implementation.
+  _isPassword = true
+}
+
+@propTypes({
+  nullable: propTypes.bool,
+  value: propTypes.number
+})
+export class Number extends Component {
+  get value () {
+    return +this.refs.input.value
+  }
+
+  _onChange = value => {
+    if (value === '') {
+      if (this.props.nullable) {
+        value = null
+      } else {
+        return
+      }
+    } else {
+      value = +value
+    }
+
+    this.props.onChange(value)
+  }
+
+  render () {
+    const { value } = this.props
+    return <Text
+      {...this.props}
+      onChange={this._onChange}
+      value={value === null ? '' : String(value)}
+    />
+  }
+}
+
+@propTypes({
+  labelProp: propTypes.string.isRequired,
+  options: propTypes.oneOfType([
+    propTypes.array,
+    propTypes.object
+  ]).isRequired
+})
+export class Select extends Editable {
+  constructor (props) {
+    super()
+
+    this._defaultValue = findKey(props.options, option => option === props.value)
+  }
+
+  get value () {
+    return this.props.options[this._select.value]
+  }
+
+  _onChange = event => {
+    this._save()
+  }
+  _optionToJsx = (option, index) => {
+    const { labelProp } = this.props
+    return <option
+      key={index}
+      value={index}
+    >
+      {labelProp ? option[labelProp] : option}
+    </option>
+  }
+
+  _onEditionMount = ref => {
+    this._select = ref
+    // Seems to work in Google Chrome (not in Firefox)
+    ref && ref.dispatchEvent(new window.MouseEvent('mousedown'))
+  }
+
+  _renderDisplay () {
+    return this.props.children ||
+      <span>{this.props.value[this.props.labelProp]}</span>
+  }
+
+  _renderEdition () {
+    const { saving } = this.state
+    const { options } = this.props
+
+    return <select
+      autoFocus
+      className='form-control'
+      defaultValue={this._defaultValue}
+      onBlur={this._closeEdition}
+      onChange={this._onChange}
+      onKeyDown={this._onKeyDown}
+      readOnly={saving}
+      ref={this._onEditionMount}
+      style={SELECT_STYLE}
+    >
+      {map(options, this._optionToJsx)}
+    </select>
+  }
+}
+
+const MAP_TYPE_SELECT = {
+  host: SelectHost,
+  network: SelectNetwork,
+  pool: SelectPool,
+  remote: SelectRemote,
+  SR: SelectSr,
+  subject: SelectSubject,
+  tag: SelectTag,
+  VM: SelectVm,
+  'VM-template': SelectVmTemplate
+}
+
+@propTypes({
+  labelProp: propTypes.string.isRequired,
+  predicate: propTypes.func,
+  value: propTypes.oneOfType([
+    propTypes.string,
+    propTypes.object
+  ]).isRequired
+})
+export class XoSelect extends Editable {
+  get value () {
+    return this.refs.select.value
+  }
+
+  _renderDisplay () {
+    return this.props.children ||
+      <span>{this.props.value[this.props.labelProp]}</span>
+  }
+
+  _onChange = object => {
+    object ? this._save() : this._closeEdition()
+  }
+
+  _renderEdition () {
+    const {
+      placeholder,
+      predicate,
+      saving,
+      xoType
+    } = this.props
+
+    const Select = MAP_TYPE_SELECT[xoType]
+    if (process.env.NODE_ENV !== 'production') {
+      if (!Select) {
+        throw new Error(`${xoType} is not a valid XoSelect type.`)
+      }
+    }
+
+    // Anchor is needed so that the BlockLink does not trigger a redirection
+    // when this element is clicked.
+    return <a onBlur={this._closeEdition}>
+      <Select
+        autoFocus
+        disabled={saving}
+        onChange={this._onChange}
+        placeholder={placeholder}
+        predicate={predicate}
+        ref='select'
+      />
+    </a>
+  }
+}
+
+@propTypes({
+  value: propTypes.number.isRequired
+})
+export class Size extends Editable {
+  get value () {
+    return this.refs.input.value
+  }
+
+  _renderDisplay () {
+    return this.props.children || formatSize(this.props.value)
+  }
+
+  _closeEditionIfUnfocused = () => {
+    this._focused = false
+    setTimeout(() => {
+      !this._focused && this._closeEdition()
+    }, 10)
+  }
+
+  _focus = () => { this._focused = true }
+
+  _renderEdition () {
+    const { saving } = this.state
+    const { value } = this.props
+
+    return <span
+      onBlur={this._closeEditionIfUnfocused}
+      onFocus={this._focus}
+      onKeyDown={this._onKeyDown}
+    >
+      <SizeInput
+        autoFocus
+        ref='input'
+        readOnly={saving}
+        style={SIZE_STYLE}
+        defaultValue={value}
+      />
+    </span>
+  }
+}
--- a/src/common/ellipsis.js
+++ b/src/common/ellipsis.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const ellipsisStyle = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}
+
+const ellipsisContainerStyle = {
+  display: 'flex'
+}
+
+const Ellipsis = ({ children }) => (
+  <span style={ellipsisStyle}>
+    {children}
+  </span>
+)
+export { Ellipsis as default }
+
+export const EllipsisContainer = ({ children }) => (
+  <div style={ellipsisContainerStyle}>
+    {React.Children.map(children, child =>
+      child == null || child.type === Ellipsis ? child : <span>{child}</span>
+    )}
+  </div>
+)
--- a/src/common/filter-reduce.js
+++ b/src/common/filter-reduce.js
@@ -0,0 +1,45 @@
+import findIndex from 'lodash/findIndex'
+import identity from 'lodash/identity'
+
+// Returns a copy of the array containing:
+// - the elements which did not matches the predicate
+// - the result of the reduction of the elements matching the
+//   predicates
+//
+// As a special case, if the predicate is not provided, it is
+// considered to have not matched.
+const filterReduce = (array, predicate, reducer, initial) => {
+  const { length } = array
+  let i
+  if (
+    !length ||
+    !predicate ||
+    (i = findIndex(array, predicate)) === -1
+  ) {
+    return initial == null
+      ? array.slice(0)
+      : array.concat(initial)
+  }
+
+  if (reducer == null) {
+    reducer = identity
+  }
+
+  const result = array.slice(0, i)
+  let value = initial == null
+    ? array[i]
+    : reducer(initial, array[i], i, array)
+
+  for (i = i + 1; i < length; ++i) {
+    const current = array[i]
+    if (predicate(current, i, array)) {
+      value = reducer(value, current, i, array)
+    } else {
+      result.push(current)
+    }
+  }
+
+  result.push(value)
+  return result
+}
+export { filterReduce as default }
--- a/src/common/filter-reduce.spec.js
+++ b/src/common/filter-reduce.spec.js
@@ -0,0 +1,28 @@
+import test from 'ava'
+
+import filterReduce from './filter-reduce'
+
+const add = (a, b) => a + b
+const data = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
+const isEven = x => !(x & 1)
+
+test('filterReduce', t => {
+  // Returns all elements not matching the predicate and the result of
+  // a reduction over those who do.
+  t.deepEqual(
+    filterReduce(data, isEven, add),
+    [ 1, 3, 5, 7, 9, 20 ]
+  )
+
+  // The default reducer is the identity.
+  t.deepEqual(
+    filterReduce(data, isEven),
+    [ 1, 3, 5, 7, 9, 0 ]
+  )
+
+  // If an initial value is passed it is used.
+  t.deepEqual(
+    filterReduce(data, isEven, add, 22),
+    [ 1, 3, 5, 7, 9, 42 ]
+  )
+})
--- a/src/common/form-grid.js
+++ b/src/common/form-grid.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import * as Grid from './grid'
+import propTypes from './prop-types'
+
+export const LabelCol = propTypes({
+  children: propTypes.any.isRequired
+})(({ children }) => (
+  <label className='col-md-2 form-control-label'>{children}</label>
+))
+
+export const InputCol = propTypes({
+  children: propTypes.any.isRequired
+})(({ children }) => (
+  <Grid.Col mediumSize={10}>{children}</Grid.Col>
+))
+
+export const Row = propTypes({
+  children: propTypes.arrayOf(propTypes.element).isRequired
+})(({ children }) => (
+  <Grid.Row className='form-group'>
+    {children}
+  </Grid.Row>
+))
--- a/src/common/form/index.js
+++ b/src/common/form/index.js
@@ -0,0 +1,295 @@
+import BaseComponent from 'base-component'
+import classNames from 'classnames'
+import Icon from 'icon'
+import map from 'lodash/map'
+import randomPassword from 'random-password'
+import React from 'react'
+import round from 'lodash/round'
+import {
+  DropdownButton,
+  MenuItem
+} from 'react-bootstrap-4/lib'
+
+import Component from '../base-component'
+import propTypes from '../prop-types'
+import {
+  firstDefined,
+  formatSizeRaw,
+  parseSize
+} from '../utils'
+
+export Select from './select'
+export SelectPlainObject from './select-plain-object'
+
+// ===================================================================
+
+@propTypes({
+  enableGenerator: propTypes.bool
+})
+export class Password extends Component {
+  get value () {
+    return this.refs.field.value
+  }
+
+  set value (value) {
+    this.refs.field.value = value
+  }
+
+  _generate = () => {
+    this.refs.field.value = randomPassword(8)
+    this.setState({
+      visible: true
+    })
+  }
+
+  _toggleVisibility = () => {
+    this.setState({
+      visible: !this.state.visible
+    })
+  }
+
+  render () {
+    const {
+      className,
+      enableGenerator = false,
+      ...props
+    } = this.props
+    const { visible } = this.state
+
+    return <div className='input-group'>
+      {enableGenerator && <span className='input-group-btn'>
+        <button type='button' className='btn btn-secondary' onClick={this._generate}>
+          <Icon icon='password' />
+        </button>
+      </span>}
+      <input
+        {...props}
+        className={classNames(className, 'form-control')}
+        ref='field'
+        type={visible ? 'text' : 'password'}
+      />
+      <span className='input-group-btn'>
+        <button type='button' className='btn btn-secondary' onClick={this._toggleVisibility}>
+          <Icon icon={visible ? 'shown' : 'hidden'} />
+        </button>
+      </span>
+    </div>
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  defaultValue: propTypes.number,
+  max: propTypes.number.isRequired,
+  min: propTypes.number.isRequired,
+  step: propTypes.number,
+  onChange: propTypes.func
+})
+export class Range extends Component {
+  constructor (props) {
+    super()
+    this.state = {
+      value: props.defaultValue || props.min
+    }
+  }
+
+  get value () {
+    return this.state.value
+  }
+
+  set value (value) {
+    this.setState({
+      value: +value
+    })
+  }
+
+  _handleChange = event => {
+    const { onChange } = this.props
+    const { value } = event.target
+
+    if (value === this.state.value) {
+      return
+    }
+
+    this.setState({
+      value
+    }, onChange && (() => onChange(value)))
+  }
+
+  render () {
+    const {
+      props
+    } = this
+    const step = props.step || 1
+    const { value } = this.state
+
+    return (
+      <div className='form-group row'>
+        <label className='col-sm-2 control-label'>
+          {value}
+        </label>
+        <div className='col-sm-10'>
+          <input
+            className='form-control'
+            type='range'
+            min={props.min}
+            max={props.max}
+            step={step}
+            value={value}
+            onChange={this._handleChange}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+export Toggle from './toggle'
+
+const UNITS = ['kiB', 'MiB', 'GiB']
+const DEFAULT_UNIT = 'GiB'
+@propTypes({
+  autoFocus: propTypes.bool,
+  className: propTypes.string,
+  defaultUnit: propTypes.oneOf(UNITS),
+  defaultValue: propTypes.number,
+  onChange: propTypes.func,
+  placeholder: propTypes.string,
+  readOnly: propTypes.bool,
+  required: propTypes.bool,
+  style: propTypes.object,
+  value: propTypes.number
+})
+export class SizeInput extends BaseComponent {
+  constructor (props) {
+    super(props)
+
+    this.state = this._createStateFromBytes(firstDefined(props.value, props.defaultValue, 0))
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { value } = newProps
+    if (value == null && value === this.props.value) {
+      return
+    }
+
+    const { _bytes, _unit, _value } = this
+    this._bytes = this._unit = this._value = null
+
+    if (value === _bytes) {
+      // Update input value
+      this.setState({
+        unit: _unit,
+        value: _value
+      })
+    } else {
+      this.setState(this._createStateFromBytes(value))
+    }
+  }
+
+  _createStateFromBytes = bytes => {
+    const humanSize = bytes && formatSizeRaw(bytes)
+    return {
+      unit: humanSize && humanSize.value ? humanSize.prefix + 'B' : this.props.defaultUnit || DEFAULT_UNIT,
+      value: humanSize ? round(humanSize.value, 3) : ''
+    }
+  }
+
+  get value () {
+    const { unit, value } = this.state
+    return parseSize(value + ' ' + unit)
+  }
+
+  set value (newValue) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      this.props.value != null
+    ) {
+      throw new Error('cannot set value of controlled SizeInput')
+    }
+    this.setState(this._createStateFromBytes(newValue))
+  }
+
+  _onChange = value =>
+    this.props.onChange && this.props.onChange(value)
+
+  _updateValue = event => {
+    const { value } = event.target
+    if (this.props.value != null) {
+      this._value = value
+      this._unit = this.state.unit
+      this._bytes = parseSize((value || 0) + ' ' + this.state.unit)
+
+      this._onChange(this._bytes)
+    } else {
+      this.setState({ value }, () => {
+        this._onChange(this.value)
+      })
+    }
+  }
+  _updateUnit = unit => {
+    if (this.props.value != null) {
+      this._value = this.state.value
+      this._unit = unit
+      this._bytes = parseSize((this.state.value || 0) + ' ' + unit)
+
+      this._onChange(this._bytes)
+    } else {
+      this.setState({ unit }, () => {
+        this._onChange(this.value)
+      })
+    }
+  }
+
+  render () {
+    const {
+      autoFocus,
+      className,
+      placeholder,
+      readOnly,
+      required,
+      style
+    } = this.props
+
+    const {
+      value,
+      unit
+    } = this.state
+
+    return <span
+      className={classNames(className, 'input-group')}
+      style={style}
+    >
+      <input
+        autoFocus={autoFocus}
+        className='form-control'
+        min={0}
+        onChange={this._updateValue}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        type='number'
+        value={value}
+      />
+      <span className='input-group-btn'>
+        <DropdownButton
+          bsStyle='secondary'
+          disabled={readOnly}
+          id='size'
+          pullRight
+          title={unit}
+        >
+          {map(UNITS, unit =>
+            <MenuItem
+              key={unit}
+              onClick={() => this._updateUnit(unit)}
+            >
+              {unit}
+            </MenuItem>
+          )}
+        </DropdownButton>
+      </span>
+    </span>
+  }
+}
--- a/src/common/form/select-plain-object.js
+++ b/src/common/form/select-plain-object.js
@@ -0,0 +1,117 @@
+import find from 'lodash/find'
+import map from 'lodash/map'
+import React, { Component } from 'react'
+
+import propTypes from '../prop-types'
+
+import Select from './select'
+
+@propTypes({
+  autoFocus: propTypes.bool,
+  defaultValue: propTypes.any,
+  disabled: propTypes.bool,
+  optionRenderer: propTypes.func,
+  multi: propTypes.bool,
+  onChange: propTypes.func,
+  options: propTypes.array,
+  placeholder: propTypes.string,
+  predicate: propTypes.func,
+  required: propTypes.bool
+})
+export default class SelectPlainObject extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      value: this._computeValue(props.defaultValue, props)
+    }
+  }
+
+  _computeValue (value, props = this.props) {
+    let { optionKey } = props
+    optionKey || (optionKey = 'id')
+    const reduceValue = value => value != null ? (value[optionKey] || value) : ''
+    if (props.multi) {
+      if (!Array.isArray(value)) {
+        value = [value]
+      }
+      return map(value, reduceValue)
+    }
+    return reduceValue(value)
+  }
+
+  componentWillMount () {
+    const { options } = this.props
+
+    this.setState({
+      options: this._computeOptions(options)
+    })
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { options } = newProps
+
+    this.setState({
+      options: this._computeOptions(options)
+    })
+  }
+
+  _computeOptions (options) {
+    const { optionKey = 'id' } = this.props
+    const { optionRenderer = o => o.label || o[optionKey] || o } = this.props
+    return map(options, option => ({
+      value: option[optionKey] || option,
+      label: optionRenderer(option)
+    }))
+  }
+
+  get value () {
+    const { optionKey = 'id' } = this.props
+    const { value } = this.state
+    const { options } = this.props
+    const pickValue = value => {
+      value = value.value || value
+      return find(options, option => option[optionKey] === value || option === value)
+    }
+
+    if (this.props.multi) {
+      return map(value, pickValue)
+    }
+
+    return pickValue(value)
+  }
+
+  set value (value) {
+    this.setState({
+      value: this._computeValue(value)
+    })
+  }
+
+  _handleChange = value => {
+    const { onChange } = this.props
+
+    this.setState({
+      value: this._computeValue(value)
+    }, onChange && (() => { onChange(this.value) }))
+  }
+
+  _renderOption = option => option.label
+
+  render () {
+    const { props, state } = this
+
+    return (
+      <Select
+        autofocus={props.autoFocus}
+        disabled={props.disabled}
+        multi={props.multi}
+        onChange={this._handleChange}
+        openOnFocus
+        optionRenderer={this._renderOption}
+        options={state.options}
+        placeholder={props.placeholder}
+        required={props.required}
+        value={state.value}
+        valueRenderer={this._renderOption} />
+    )
+  }
+}
--- a/src/common/form/select.js
+++ b/src/common/form/select.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react'
+import ReactSelect from 'react-select'
+import {
+  AutoSizer,
+  VirtualScroll
+} from 'react-virtualized'
+
+import propTypes from '../prop-types'
+
+const SELECT_MENU_STYLE = {
+  overflow: 'hidden'
+}
+
+const SELECT_STYLE = {
+  minWidth: '10em'
+}
+
+// See: https://github.com/bvaughn/react-virtualized-select/blob/master/source/VirtualizedSelect/VirtualizedSelect.js
+@propTypes({
+  maxHeight: propTypes.number,
+  optionHeight: propTypes.number
+})
+export default class Select extends Component {
+  static defaultProps = {
+    maxHeight: 200,
+    optionHeight: 40,
+    optionRenderer: (option, labelKey) => option[labelKey]
+  }
+
+  _renderMenu = ({
+    focusedOption,
+    options,
+    ...otherOptions
+  }) => {
+    const {
+      maxHeight,
+      optionHeight
+    } = this.props
+
+    const focusedOptionIndex = options.indexOf(focusedOption)
+    const height = Math.min(maxHeight, options.length * optionHeight)
+
+    const wrappedRowRenderer = ({ index }) =>
+      this._optionRenderer({
+        ...otherOptions,
+        focusedOption,
+        focusedOptionIndex,
+        option: options[index],
+        options
+      })
+
+    return (
+      <AutoSizer disableHeight>
+        {({ width }) => (
+          <VirtualScroll
+            height={height}
+            rowCount={options.length}
+            rowHeight={optionHeight}
+            rowRenderer={wrappedRowRenderer}
+            scrollToIndex={focusedOptionIndex}
+            width={width}
+          />
+        )}
+      </AutoSizer>
+    )
+  }
+
+  _optionRenderer = ({
+    focusedOption,
+    focusOption,
+    labelKey,
+    option,
+    selectValue
+  }) => {
+    let className = 'Select-option'
+
+    if (option === focusedOption) {
+      className += ' is-focused'
+    }
+
+    const { disabled } = option
+
+    if (disabled) {
+      className += ' is-disabled'
+    }
+
+    const { props } = this
+
+    return (
+      <div
+        className={className}
+        onClick={!disabled && (() => selectValue(option))}
+        onMouseOver={!disabled && (() => focusOption(option))}
+        style={{ height: props.optionHeight }}
+      >
+        {props.optionRenderer(option, labelKey)}
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <ReactSelect
+        {...this.props}
+        menuRenderer={this._renderMenu}
+        menuStyle={SELECT_MENU_STYLE}
+        style={SELECT_STYLE}
+      />
+    )
+  }
+}
--- a/src/common/form/toggle/index.css
+++ b/src/common/form/toggle/index.css
@@ -0,0 +1,3 @@
+.checkbox {
+    display: none;
+}
--- a/src/common/form/toggle/index.js
+++ b/src/common/form/toggle/index.js
@@ -0,0 +1,90 @@
+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>
+    )
+  }
+}
--- a/src/common/get-event-value.js
+++ b/src/common/get-event-value.js
@@ -0,0 +1,17 @@
+// If the param is an event, returns the value of it's target,
+// otherwise returns the param.
+const getEventValue = event => {
+  let target
+  if (!event || !(target = event.target)) {
+    return event
+  }
+
+  return (
+    target.nodeName.toLowerCase() === 'input' &&
+    target.type.toLowerCase() === 'checkbox'
+  )
+    ? target.checked
+    : target.value
+}
+
+export { getEventValue as default }
--- a/src/common/grid.js
+++ b/src/common/grid.js
@@ -0,0 +1,58 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import propTypes from './prop-types'
+
+export const Col = propTypes({
+  className: propTypes.string,
+  size: propTypes.number,
+  smallSize: propTypes.number,
+  mediumSize: propTypes.number,
+  largeSize: propTypes.number,
+  offset: propTypes.number,
+  smallOffset: propTypes.number,
+  mediumOffset: propTypes.number,
+  largeOffset: propTypes.number
+})(({
+  children,
+  className,
+  size = 12,
+  smallSize = size,
+  mediumSize,
+  largeSize,
+  offset,
+  smallOffset = offset,
+  mediumOffset,
+  largeOffset,
+  style
+}) => <div className={classNames(
+  className,
+  smallSize && `col-xs-${smallSize}`,
+  mediumSize && `col-md-${mediumSize}`,
+  largeSize && `col-lg-${largeSize}`,
+  smallOffset && `offset-xs-${smallOffset}`,
+  mediumOffset && `offset-md-${mediumOffset}`,
+  largeOffset && `offset-lg-${largeOffset}`
+)}
+  style={style}
+>
+  {children}
+</div>)
+
+export const Container = propTypes({
+  className: propTypes.string
+})(({
+  children,
+  className
+}) => <div className={classNames(className, 'container-fluid')}>
+  {children}
+</div>)
+
+export const Row = propTypes({
+  className: propTypes.string
+})(({
+  children,
+  className
+}) => <div className={`${className || ''} row`}>
+  {children}
+</div>)
--- a/src/common/home-filters.js
+++ b/src/common/home-filters.js
@@ -0,0 +1,16 @@
+export const VM = {
+  homeFilterPendingVms: 'current_operations:"" ',
+  homeFilterNonRunningVms: '!power_state:running ',
+  homeFilterHvmGuests: 'virtualizationMode:hvm ',
+  homeFilterRunningVms: 'power_state:running ',
+  homeFilterTags: 'tags:'
+}
+
+export const host = {
+  homeFilterRunningHosts: 'power_state:running ',
+  homeFilterTags: 'tags:'
+}
+
+export const pool = {
+  homeFilterTags: 'tags:'
+}
--- a/src/common/hosts-patches-table.js
+++ b/src/common/hosts-patches-table.js
@@ -0,0 +1,216 @@
+import isEmpty from 'lodash/isEmpty'
+import map from 'lodash/map'
+import React from 'react'
+import { Portal } from 'react-overlays'
+
+import _ from './intl'
+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 SortedTable from './sorted-table'
+import TabButton from './tab-button'
+import { connectStore } from './utils'
+import {
+  createGetObjectsOfType,
+  createFilter,
+  createSelector
+} from './selectors'
+import {
+  getHostMissingPatches,
+  installAllHostPatches
+} from './xo'
+
+// ===================================================================
+
+const MISSING_PATCHES_COLUMNS = [
+  {
+    name: _('srHost'),
+    itemRenderer: host => <Link to={`/hosts/${host.id}`}>{host.name_label}</Link>,
+    sortCriteria: host => host.name_label
+  },
+  {
+    name: _('hostDescription'),
+    itemRenderer: host => host.name_description,
+    sortCriteria: host => host.name_description
+  },
+  {
+    name: _('hostMissingPatches'),
+    itemRenderer: (host, { missingPatches }) => <Link to={`/hosts/${host.id}/patches`}>{missingPatches[host.id]}</Link>,
+    sortCriteria: (host, { missingPatches }) => missingPatches[host.id]
+  },
+  {
+    name: _('patchUpdateButton'),
+    itemRenderer: (host, { installAllHostPatches }) => (
+      <ActionButton
+        btnStyle='primary'
+        handler={installAllHostPatches}
+        handlerParam={host}
+        icon='host-patch-update'
+      />
+    )
+  }
+]
+
+const POOLS_MISSING_PATCHES_COLUMNS = [{
+  name: _('srPool'),
+  itemRenderer: (host, { pools }) => {
+    const pool = pools[host.$pool]
+    return <Link to={`/pools/${pool.id}`}>{pool.name_label}</Link>
+  },
+  sortCriteria: (host, { pools }) => pools[host.$pool].name_label
+}].concat(MISSING_PATCHES_COLUMNS)
+
+// ===================================================================
+
+class HostsPatchesTable extends Component {
+  constructor (props) {
+    super(props)
+    this.state.missingPatches = {}
+  }
+
+  _getHosts = createFilter(
+    () => this.props.hosts,
+    createSelector(
+      () => this.state.missingPatches,
+      missingPatches => host => missingPatches[host.id]
+    )
+  )
+
+  _refreshMissingPatches = () => (
+    Promise.all(
+      map(this.props.hosts, this._refreshHostMissingPatches)
+    )
+  )
+
+  _installAllMissingPatches = () => (
+    Promise.all(map(this._getHosts(), this._installAllHostPatches))
+  )
+
+  _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()
+  }
+
+  componentWillReceiveProps (nextProps) {
+    forEach(nextProps.hosts, host => {
+      const { id } = host
+
+      if (this.state.missingPatches[id] !== undefined) {
+        return
+      }
+
+      this.setState({
+        missingPatches: {
+          ...this.state.missingPatches,
+          [id]: 0
+        }
+      })
+
+      this._refreshHostMissingPatches(host)
+    })
+  }
+
+  render () {
+    const hosts = this._getHosts()
+    const noPatches = isEmpty(hosts)
+    const { props } = this
+
+    const Container = props.container || 'div'
+    const Button = props.useTabButton ? TabButton : ActionButton
+
+    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>
+    )
+
+    return (
+      <div>
+        {!noPatches
+          ? (
+          <SortedTable
+            collection={hosts}
+            columns={props.displayPools ? POOLS_MISSING_PATCHES_COLUMNS : MISSING_PATCHES_COLUMNS}
+            userData={{
+              installAllHostPatches: this._installAllHostPatches,
+              missingPatches: this.state.missingPatches,
+              pools: props.pools
+            }}
+          />
+          ) : <p>{_('patchNothing')}</p>
+        }
+        <Portal container={() => props.buttonsGroupContainer()}>
+          {Buttons}
+        </Portal>
+      </div>
+    )
+  }
+}
+
+// ===================================================================
+
+@connectStore(() => {
+  const getPools = createGetObjectsOfType('pool')
+
+  return {
+    pools: getPools
+  }
+})
+class HostsPatchesTableByPool extends Component {
+  render () {
+    const { props } = this
+    return <HostsPatchesTable {...props} pools={props.pools} />
+  }
+}
+
+// ===================================================================
+
+export default propTypes({
+  buttonsGroupContainer: propTypes.func.isRequired,
+  container: propTypes.any,
+  displayPools: propTypes.bool,
+  hosts: propTypes.oneOfType([
+    propTypes.arrayOf(propTypes.object),
+    propTypes.objectOf(propTypes.object)
+  ]).isRequired,
+  useTabButton: propTypes.bool
+})(props => props.displayPools
+  ? <HostsPatchesTableByPool {...props} />
+  : <HostsPatchesTable {...props} />
+)
--- a/src/common/icon.js
+++ b/src/common/icon.js
@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import isInteger from 'lodash/isInteger'
+import React, { PropTypes } 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
+  ])
+}
+export default Icon
--- a/src/common/intl/index.js
+++ b/src/common/intl/index.js
@@ -0,0 +1,83 @@
+
+import isFunction from 'lodash/isFunction'
+import isString from 'lodash/isString'
+import moment from 'moment'
+import React, {
+  Component,
+  PropTypes
+} from 'react'
+import {
+  connect
+} from 'react-redux'
+import {
+  FormattedMessage,
+  IntlProvider as IntlProvider_
+} from 'react-intl'
+
+import messages from './messages'
+import locales from './locales'
+
+// ===================================================================
+
+// Params:
+//
+// - props (optional): properties to add to the FormattedMessage
+// - messageId: identifier of the message to format/translate
+// - values (optional): values to pass to the message
+// - render (optional): a function receiving the React nodes of the
+//     translated message and returning the React node to render
+const getMessage = (props, messageId, values, render) => {
+  if (isString(props)) {
+    render = values
+    values = messageId
+    messageId = props
+    props = undefined
+  }
+
+  const message = messages[messageId]
+  if (process.env.NODE_ENV !== 'production' && !message) {
+    throw new Error(`no message defined for ${messageId}`)
+  }
+
+  if (isFunction(values)) {
+    render = values
+    values = undefined
+  }
+
+  return <FormattedMessage {...props} {...message} values={values}>
+    {render}
+  </FormattedMessage>
+}
+
+export { getMessage as default }
+
+export { messages }
+
+@connect(({ lang }) => ({ lang }))
+export class IntlProvider extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    lang: PropTypes.string.isRequired
+  };
+
+  render () {
+    const { lang, children } = this.props
+    return <IntlProvider_
+      locale={lang}
+      messages={locales[lang]}
+    >
+     {children}
+    </IntlProvider_>
+  }
+}
+
+@connect(({ lang }) => ({ lang }))
+export class FormattedDuration extends Component {
+  render () {
+    const {
+      duration,
+      lang
+    } = this.props
+    return <span>{moment.duration(duration).locale(lang).humanize()}</span>
+  }
+}
--- a/src/common/intl/locales/.gitignore
+++ b/src/common/intl/locales/.gitignore
@@ -0,0 +1 @@
+/index.js
--- a/src/common/intl/locales/es.js
+++ b/src/common/intl/locales/es.js
--- a/src/common/intl/locales/fr.js
+++ b/src/common/intl/locales/fr.js
@@ -0,0 +1,430 @@
+// See http://momentjs.com/docs/#/use-it/browserify/
+import 'moment/locale/fr'
+
+import reactIntlData from 'react-intl/locale-data/fr'
+import { addLocaleData } from 'react-intl'
+addLocaleData(reactIntlData)
+
+// ===================================================================
+
+export default {
+  statusConnecting: 'Connexion…',
+  statusDisconnected: 'Déconnecté',
+
+  editableLongClickPlaceholder: 'Clic long pour éditer',
+  editableClickPlaceholder: 'Cliquer pour éditer',
+
+  // ----- Modals -----
+  alertOk: 'OK',
+  confirmOk: 'OK',
+  confirmCancel: 'Annuler',
+
+  // ----- General Menu -----
+  dashboardPage: 'Tableau de bord',
+  overviewDashboardPage: 'Vue d\'ensemble',
+  overviewVisualizationDashboardPage: 'Visualisations',
+  overviewStatsDashboardPage: 'Statistiques',
+  overviewHealthDashboardPage: 'État de santé',
+  selfServicePage: 'Self service',
+  selfServiceDashboardPage: 'Tableau de bord',
+  settingsServersPage: 'Serveurs',
+  settingsUsersPage: 'Utilisateurs',
+  settingsGroupsPage: 'Groupes',
+  settingsAclsPage: 'ACLs',
+  settingsPluginsPage: 'Extensions',
+  selfServiceAdminPage: 'Administration',
+  backupPage: 'Sauvegarde',
+  backupOverviewPage: 'Vue d\'ensemble',
+  backupNewPage: 'Créer',
+  backupRemotesPage: 'Emplacement',
+  backupRestorePage: 'Restaurer',
+  updatePage: 'Mises à jour',
+  settingsPage: 'Paramètres',
+  aboutPage: 'À propos',
+  newMenu: 'Nouveau',
+  newVmPage: 'VM',
+  newServerPage: 'Serveur',
+  newSrPage: 'Stockage',
+  newImport: 'Importer',
+  // ----- Home view -----
+  homeDisplayedItems: '{displayed}x {icon} (sur {total})',
+  homeSelectedItems: '{selected}x {icon} sélectionnée{selected, plural, zero {} one {} other {s}} (sur {total})',
+  homeMigrateTo: 'Migrer sur…',
+  // ----- General Stuff -----
+  homePage: 'Accueil',
+  usernameLabel: 'Nom :',
+  passwordLabel: 'Mot de passe :',
+  signInButton: 'Connexion',
+  signOut: 'Déconnexion',
+  add: 'Ajouter',
+  remove: 'Supprimer',
+  schedule: 'Plan',
+  newVmBackup: 'Nouvelle sauvegarde de VM',
+  editVmBackup: 'Edition d\'un job de backup',
+  backup: 'Sauvegarde',
+  rollingSnapshot: 'Sauvegarde continue',
+  deltaBackup: 'Sauvegarde différentielle',
+  disasterRecovery: 'Reprise après panne',
+  continuousReplication: 'Réplication continue',
+  preview: 'Aperçu',
+  item: 'Objet',
+  noSelectedValue: 'Pas de valeur sélectionnée',
+  selectSubjects: 'Select. utilisateurs et/ou groupe(s)',
+  selectHosts: 'Selectionner Hôte(s)…',
+  selectNetworks: 'Selectionner Network(s)…',
+  selectPifs: 'Sélectionner PIF(s)…',
+  selectHostsVms: 'Selectionner objet(s)…',
+  selectPools: 'Selectionner Pool(s)…',
+  selectRemotes: 'Selectionner Remote(s)…',
+  selectSrs: 'Selectionner Stockages(s)…',
+  selectVms: 'Selectionner VM(s)…',
+  selectVmTemplates: 'Selectionner patrons de VM…',
+  selectTags: 'Selectionner tag(s)…',
+  selectVdis: 'Selectionner disque(s)…',
+  fillRequiredInformations: 'Remplir les champs requis.',
+  fillOptionalInformations: 'Remplir informations (optionnel)',
+  selectTableReset: 'Réinitialiser',
+  schedulingMonth: 'Mois',
+  schedulingEachSelectedMonth: 'Chaque mois sélectionné',
+  schedulingMonthDay: 'Jour du mois',
+  schedulingEachSelectedMonthDay: 'Chaque jour sélectionné',
+  schedulingWeekDay: 'Jour de la semaine',
+  schedulingEachSelectedWeekDay: 'Chaque jour sélectionné',
+  schedulingHour: 'Heure',
+  schedulingEveryNHour: 'Toutes les N heures',
+  schedulingEachSelectedHour: 'Chaque heure sélectionnée',
+  schedulingMinute: 'Minute',
+  schedulingEveryNMinute: 'Toutes les N minutes',
+  schedulingEachSelectedMinute: 'Chaque minute sélectionnée',
+  schedulingReset: 'Reset',
+  unknownSchedule: 'Inconnu',
+  job: 'Job',
+  jobTag: 'Tag',
+  jobScheduling: 'Plan d\'exécution',
+  jobState: 'Etat',
+  runJob: 'Execution d\'un job',
+  runJobVerbose: 'Une exécution a été lancée. Voir l\'overview pour plus de détails.',
+  jobStarted: 'Démarré',
+  jobFinished: 'Terminé',
+  saveBackupJob: 'Sauvegarder',
+  deleteJob: 'Supprimer Job',
+  deleteJobQuestion: 'Etes-vous sûr de vouloir supprimer ce job ?',
+  noScheduledJobs: 'Aucun job programmé.',
+  newBackupSelection: 'Sélectionner votre type de sauvegarde :',
+  autoloadPlugin: 'Charger au démarrage du serveur',
+  savePluginConfiguration: 'Sauvegarder config.',
+  deletePluginConfiguration: 'Supprimer config.',
+  pluginError: 'Erreur plugin',
+  unknownPluginError: 'Erreur inconnue',
+  purgePluginConfiguration: 'Suppression de la config. du plugin',
+  purgePluginConfigurationQuestion: 'Etes-vous sûr de vouloir supprimer la configuration de ce plugin ?',
+  editPluginConfiguration: 'Editer',
+  cancelPluginEdition: 'Annuler',
+  pluginConfigurationSuccess: 'Configuration du plugin',
+  pluginConfigurationChanges: 'La configuration du plugin a été sauvegardée !',
+  startVmLabel: 'Démarrer',
+  recoveryModeLabel: 'Démarrer en mode sans échec',
+  suspendVmLabel: 'Suspendre',
+  stopVmLabel: 'Arrêter',
+  forceShutdownVmLabel: 'Forcer l\'arrêt',
+  rebootVmLabel: 'Redémarrer',
+  forceRebootVmLabel: 'Forcer le redémarrage',
+  deleteVmLabel: 'Supprimer',
+  migrateVmLabel: 'Migrer',
+  snapshotVmLabel: 'Prendre un instantané',
+  exportVmLabel: 'Exporter',
+  copyVmLabel: 'Copier',
+  cloneVmLabel: 'Cloner',
+  convertToTemplateLabel: 'Convertir en modèle',
+  // ----- host tab names -----
+  storageTabName: 'Stockage',
+  patchesTabName: 'Patches',
+  // ----- host advanced tab -----
+  hardwareHostSettingsLabel: 'Matériel',
+  hostAddress: 'Adresse',
+  hostStatus: 'Statut',
+  hostBuildNumber: 'Numéro de build',
+  hostIscsiName: 'Nom iSCSI',
+  hostXenServerVersion: 'Version',
+  hostStatusEnabled: 'Activé',
+  hostStatusDisabled: 'Désactivé',
+  hostPowerOnMode: 'Mode d\'allumage',
+  powerOnDisabled: 'Désactivé',
+  hostStartedSince: 'Système',
+  hostStackStartedSince: 'XAPI',
+  hostCpusModel: 'Modèle de processeur',
+  hostCpusNumber: 'Cœur (socket)',
+  hostManufacturerinfo: 'Informations constructeur',
+  hostBiosinfo: 'Informations BIOS',
+  licenseHostSettingsLabel: 'Licence',
+  hostLicenseType: 'Type de licence',
+  hostLicenseSocket: 'Nombre de socket',
+  hostLicenseExpiry: 'Expiration',
+  // ----- VM stat tab -----
+  statLoad: 'Charge système',
+  // ----- VM tab names -----
+  vmConsoleLabel: 'Console',
+  generalTabName: 'Général',
+  statsTabName: 'Stats',
+  consoleTabName: 'Console',
+  snapshotsTabName: 'Instantanés',
+  logsTabName: 'Journaux',
+  advancedTabName: 'Avancé',
+  networkTabName: 'Réseau',
+  disksTabName: 'Disque{disks, plural, zero {} one {} other {s}}',
+  powerStateHalted: 'arrêtée',
+  powerStateRunning: 'en marche',
+  started: 'Démarrée {ago}',
+  noToolsDetected: 'Pas d\'outils Xen détectés',
+  noIpv4Record: 'Aucune IPv4',
+  noIpRecord: 'Aucune IP',
+  virtualizationMode: 'Mode de virtualisation',
+  // ----- VM stat tab -----
+  statsCpu: 'Utilisation processeur',
+  statsMemory: 'Utilisation mémoire',
+  statsNetwork: 'Débit réseau',
+  statDisk: 'Débit disque',
+  statLastTenMinutes: 'Il y a 10 minutes',
+  statLastTwoHours: 'Il y a 2 heures',
+  statLastWeek: 'La semaine dernière',
+  statLastYear: 'L\'année dernière',
+  // ----- VM console tab -----
+  copyToClipboardLabel: 'Copier',
+  ctrlAltDelButtonLabel: 'Ctrl+Alt+Suppr',
+  tipLabel: 'Conseil :',
+  tipConsoleLabel: 'Les agencements de clavier hors États-Unis ont des problèmes avec la console: passez le votre en "US".',
+  // ----- VM disk tab -----
+  vdiAttachDeviceButton: 'Brancher un disque',
+  vbdCreateDeviceButton: 'Nouveau disque',
+  vdiBootOrder: 'Ordre de démarrage',
+  vdiNameLabel: 'Nom',
+  vdiNameDescription: 'Déscription',
+  vdiTags: 'Tags',
+  vdiSize: 'Taille',
+  vdiSr: 'Stockage',
+  vdbBootableStatus: 'Démarrable ?',
+  vdbBootable: 'Démarrable',
+  vdbNotBootable: 'Non démarrable',
+  vdbStatus: 'Statut',
+  vbdStatusConnected: 'Connecté',
+  vbdStatusDisconnected: 'Déconnecté',
+  vbdNoVbd: 'Pas de disque',
+  // ----- VM network tab -----
+  vifCreateDeviceButton: 'Nouvelle interface',
+  vifNoInterface: 'Aucune interface',
+  vifDeviceLabel: 'Interface',
+  vifMacLabel: 'Adresse physique',
+  vifMtuLabel: 'MTU',
+  vifNetworkLabel: 'Réseau',
+  vifStatusLabel: 'Statut',
+  vifStatusConnected: 'Connecté',
+  vifStatusDisconnected: 'Déconnecté',
+  // ----- VM snapshot tab -----
+  noSnapshot: 'Aucun instantané',
+  snapshotCreateButton: 'Nouvel instantané',
+  tipCreateSnapshotLabel: 'Cliquez sur le bouton pour en créer un !',
+  snapshotDate: 'Date de l\'instantané',
+  snapshotName: 'Nom',
+  snapshotAction: 'Action',
+  // ----- VM log tab -----
+  logRemoveAll: 'Supprimer tous les journaux',
+  noLogs: 'Aucun journal pour l\'instant',
+  logDate: 'Date du journal',
+  logName: 'Nom',
+  logContent: 'Contenu',
+  logAction: 'Action',
+  // ----- VM advanced tab -----
+  uuid: 'Identifiant unique',
+  miscLabel: 'Divers',
+  xenSettingsLabel: 'Paramètres Xen',
+  guestOsLabel: 'Système d\'exploitatation',
+  paraVirtualizedMode: 'Paravirtualisation (PV)',
+  hardwareVirtualizedMode: 'Virtualisation matérielle (HVM)',
+  xenToolsStatus: 'État des outils Xen',
+  xenToolsStatusValue: `{status, select,
+    unknown {Inconnu}
+    up-to-date {À jour}
+    out-of-date {Obsolètes}
+    not-installed {Pas installés}
+  }`,
+  osName: 'Nom du système d\'exploitation',
+  cpuWeightLabel: 'Poids CPU',
+  defaultCpuWeight: 'Par défaut',
+  osKernel: 'Noyau du système d\'exploitation',
+  autoPowerOn: 'Démarrage automatique',
+  ha: 'Haute disponibilité',
+  originalTemplate: 'Modèle d\'origine',
+  unknownOsName: 'Inconnu',
+  unknownOsKernel: 'Inconnu',
+  vmLimitsLabel: 'Limites',
+  vmCpuLimitsLabel: 'Limites processeur',
+  vmMemoryLimitsLabel: 'Limites mémoire',
+  unknownOriginalTemplate: 'Inconnu',
+  // ----- VM placholders -----
+  vmHomeNamePlaceholder: 'Clic long pour ajouter un nom',
+  vmHomeDescriptionPlaceholder: 'Clic long pour ajouter une description',
+  vmViewNamePlaceholder: 'Cliquer pour ajouter un nom',
+  vmViewDescriptionPlaceholder: 'Cliquer pour ajouter une description',
+
+  // ----- Dashboard -----
+  poolPanel: 'Pool{pools, plural, zero {} one {} other {s}}',
+  hostPanel: 'Hôte{hosts, plural, zero {} one {} other {s}}',
+  vmPanel: 'VM{vms, plural, zero {} one {} other {s}}',
+  memoryStatePanel: 'Utilisation mémoire',
+  cpuStatePanel: 'Attribution CPU',
+  srUsageStatePanel: 'Utilisation du stockage',
+  vmStatePanel: 'État des VMs',
+  srStatePanel: 'État du stockage',
+  taskStatePanel: 'Tâches en cours',
+  usersStatePanel: 'Utilisateurs',
+  ofUsage: '{usage} (sur {total})',
+  noSrs: 'Aucun stockage',
+  srName: 'Nom',
+  srPool: 'Pool',
+  srHost: 'Hôte',
+  srFormat: 'Type',
+  srSize: 'Taille',
+  srUsage: 'Utilisation',
+  srTopUsageStatePanel: 'Top 5 d\'utilisation des stockages (en %)',
+  // --- Stats board --
+  weekHeatmapNoData: 'Pas de données.',
+  statsDashboardGenericErrorTitle: 'Erreur stats',
+  statsDashboardGenericErrorMessage: 'Pas de stats disponibles pour :',
+  noSelectedMetric: 'Pas de métrique sélectionnée',
+  statsDashboardSelectObjects: 'Valider',
+  metricsLoading: 'Chargement…',
+  // ----- Health -----
+  orphanedVdis: 'Disques orphelins',
+  orphanedVms: 'VM orphelines',
+  noOrphanedObject: 'Pas d\'orphelin',
+  vmNameLabel: 'Nom',
+  vmNameDescription: 'Description',
+  vmContainer: 'Présent sur',
+  alarmMessage: 'Alarmes',
+  noAlarms: 'Aucune alarme',
+  alarmDate: 'Date',
+  alarmContent: 'Contenu',
+  alarmObject: 'Concernant',
+  alarmPool: 'Pool',
+  alarmRemoveAll: 'Supprimer toutes les alarmes',
+  // ----- New VM -----
+  newVmCreateNewVmOn: 'Créer une nouvelle VM sur {select}',
+  newVmCreateNewVmOn2: 'Créer une nouvelle VM sur {select1} ou {select2}',
+  newVmInfoPanel: 'Informations',
+  newVmNameLabel: 'Nom',
+  newVmTemplateLabel: 'Modèle',
+  newVmDescriptionLabel: 'Description',
+  newVmPerfPanel: 'Performances',
+  newVmVcpusLabel: 'vCPUs',
+  newVmRamLabel: 'RAM',
+  newVmInstallSettingsPanel: 'Paramètres d\'installation',
+  newVmIsoDvdLabel: 'ISO/DVD',
+  newVmNetworkLabel: 'Network',
+  newVmPvArgsLabel: 'PV Args',
+  newVmPxeLabel: 'PXE',
+  newVmInterfacesPanel: 'Interfaces',
+  newVmMacLabel: 'MAC',
+  newVmAddInterface: 'Ajouter une interface',
+  newVmDisksPanel: 'Disques',
+  newVmSrLabel: 'SR',
+  newVmBootableLabel: 'Amorçable',
+  newVmSizeLabel: 'Taille',
+  newVmAddDisk: 'Ajouter un disque',
+  newVmSummaryPanel: 'Résumé',
+  newVmCreate: 'Créer',
+  newVmReset: 'Effacer',
+  newVmSelectTemplate: 'Sélectionner un template',
+  newVmSshKey: 'Clé SSH',
+  newVmCustomConfig: 'Configuration personnalisée',
+  newVmBootAfterCreate: 'Démarrer la VM après sa création',
+  newVmMacPlaceholder: 'Auto-généré si vide',
+  newVmCpuWeightLabel: 'Poids CPU',
+  newVmCpuWeightQuarter: 'Quart (1/4)',
+  newVmCpuWeightHalf: 'Moitié (1/2)',
+  newVmCpuWeightNormal: 'Normal',
+  newVmCpuWeightDouble: 'Double (x2)',
+  newVmCreateVms: 'Créer plusieurs VMs',
+  newVmCreateVmsConfirm: 'Etes-vous sûr de vouloir créer {nbVms} VMs ?',
+  newVmMultipleVms: 'VMs multiples :',
+
+  // ---- VM import ---
+  importVmsList: 'Glissez des backups ici ou cliquez pour sélectionner des backups à envoyer. Accepte seulement les fichiers .xva.',
+  noSelectedVms: 'Pas de VMs sélectionnées.',
+  vmImportToPool: 'Sur le Pool:',
+  vmImportToSr: 'Sur le SR:',
+  vmsToImport: 'VMs à importer',
+  importVmsCleanList: 'Reset',
+  vmImportSuccess: 'Import de VM réussi',
+  vmImportFailed: 'Import de VM échoué',
+  startVmImport: 'Lancement de l\'import…',
+  startVmExport: 'Lancement de l\'export…',
+  // ----- Modals -----
+  stopHostModalTitle: 'Arrêter l\'hôte',
+  stopHostModalMessage: 'Cette action va arrêter l\'hôte. Êtes vous sûr de vouloir continuer ?',
+  restartHostModalTitle: 'Redémarrer l\'hôte',
+  restartHostModalMessage: 'Cette action va redémarrer l\'hôte. Êtes vous sûr de vouloir continuer ?',
+  startVmsModalTitle: 'Démarrer {vms, plural, one {la} other {les}} VM{vms, plural, one {} other {s}}',
+  startVmsModalMessage: 'Voulez-vous vraiment démarrer {vms} VM{vms, plural, one {} other {s}} ?',
+  stopVmsModalTitle: 'Arrêter {vms, plural, one {la} other {les}} VM{vms, plural, one {} other {s}}',
+  restartVmModalTitle: 'Redémarrer la VM',
+  restartVmModalMessage: 'Voulez-vous vraiment redémarrer {name} ?',
+  stopVmModalTitle: 'Arrêter la VM',
+  stopVmModalMessage: 'Voulez-vous vraiment arrêter {name} ?',
+  stopVmsModalMessage: 'Voulez-vous vraiment arrêter {vms} VM{vms, plural, one {} other {s}} ?',
+  restartVmsModalTitle: 'Redémarrer {vms, plural, one {la} other {les}} VM{vms, plural, one {} other {s}}',
+  restartVmsModalMessage: 'Voulez-vous vraiment redémarrer {vms} VM{vms, plural, one {} other {s}} ?',
+  migrateVmModalTitle: 'Migrer la VM',
+  migrateVmAdvancedModalSelectHost: 'Sélectionnez un hôte de destination:',
+  migrateVmAdvancedModalSelectNetwork: 'Sélectionnez un réseau pour la migration:',
+  migrateVmAdvancedModalSelectSrs: 'Pour chaque VDI, sélectionnez un SR:',
+  migrateVmAdvancedModalSelectNetworks: 'Pour chaque VIF, sélectionnez un réseau:',
+  migrateVmAdvancedModalName: 'Nom',
+  migrateVmAdvancedModalSr: 'SR',
+  migrateVmAdvancedModalVif: 'VIF',
+  migrateVmAdvancedModalNetwork: 'Réseau',
+  migrateVmAdvancedModalNoRemapping: 'Migration intra-pool : le re-mappage n\'est pas requis',
+  // ------ Self ------
+  resourceSets: 'Ensemble de ressources',
+  resourceSetName: 'Nom de l\'ensemble de ressources',
+  resourceSetCreation: 'Création and édition',
+  saveResourceSet: 'Sauvegarder',
+  resetResourceSet: 'Effacer',
+  editResourceSet: 'Editer',
+  deleteResourceSet: 'Supprimer',
+  deleteResourceSetWarning: 'Suppression d\'un ensemble de ressources.',
+  deleteResourceSetQuestion: 'Etes-vous sûr de vouloir supprimer cet ensemble ?',
+  resourceSetMissingObjects: 'Objets manquants :',
+  resourceSetVcpus: 'vCPUs',
+  resourceSetMemory: 'Mémoire',
+  resourceSetStorage: 'Stockage',
+  unknownResourceSetValue: 'Inconnu',
+  availableHosts: 'Hôtes disponibles',
+  excludedHosts: 'Hôtes exclus',
+  noHostsAvailable: 'Pas d\'hôtes disponibles.',
+  availableHostsDescription: 'Les VMs crées par cet ensemble de ressources doivent tourner sur les hôtes suivants.',
+  maxCpus: 'Nombre max de CPUs',
+  maxRam: 'Maximum RAM (GiB)',
+  maxDiskSpace: 'Maximum d\'espace disque',
+  totalResource: 'Total :',
+  remainingResource: 'Restants :',
+  usedResource: 'Utilisés :',
+  noResourceSetLimits: 'Pas de limites.',
+  // ----- Copy VM -----
+  copyVm: 'Copier la VM',
+  copyVmConfirm: 'Voulez-vous vraiment copier cette VM sur {SR} ?',
+  copyVmName: 'Nom',
+  copyVmNamePlaceholder: 'Si vide : nom de la VM copiée',
+  copyVmSelectSr: 'Sélectionnez un SR',
+  copyVmCompress: 'Utiliser la compression',
+  // ----- Network -----
+  networkCreate: 'Créer un réseau',
+  deleteNetwork: 'Supprimer le réseau',
+  deleteNetworkConfirm: 'Etes-vous sûr de vouloir supprimer ce réseau ?',
+  // ----- PIF -----
+  connectPif: 'Connecter la PIF',
+  connectPifConfirm: 'Etes-vous sûr de vouloir connecter cette PIF ?',
+  disconnectPif: 'Déconnecter la PIF',
+  disconnectPifConfirm: 'Etes-vous sûr de vouloir déconnecter cette PIF ?',
+  deletePif: 'Supprimer la PIF',
+  deletePifConfirm: 'Etes-vous sûr de vouloir supprimer cette PIF ?'
+}
--- a/src/common/intl/locales/he.js
+++ b/src/common/intl/locales/he.js
--- a/src/common/intl/locales/pt.js
+++ b/src/common/intl/locales/pt.js
--- a/src/common/intl/locales/zh.js
+++ b/src/common/intl/locales/zh.js
--- a/src/common/intl/messages.js
+++ b/src/common/intl/messages.js
@@ -0,0 +1,988 @@
+// This file is coded in ES5 and CommonJS to be compatible with
+// `create-locale`.
+
+var forEach = require('lodash/forEach')
+var isString = require('lodash/isString')
+
+var messages = {
+  statusConnecting: 'Connecting',
+  statusDisconnected: 'Disconnected',
+
+  editableLongClickPlaceholder: 'Long click to edit',
+  editableClickPlaceholder: 'Click to edit',
+
+  // ----- Modals -----
+  alertOk: 'OK',
+  confirmOk: 'OK',
+  confirmCancel: 'Cancel',
+
+  // ----- Filters -----
+  onError: 'On error',
+  successful: 'Successful',
+
+  // ----- Copiable component -----
+  copyToClipboard: 'Copy to clipboard',
+
+  // ----- Titles -----
+  homePage: 'Home',
+  homeVmPage: 'VMs',
+  homeHostPage: 'Hosts',
+  homePoolPage: 'Pools',
+  dashboardPage: 'Dashboard',
+  overviewDashboardPage: 'Overview',
+  overviewVisualizationDashboardPage: 'Visualizations',
+  overviewStatsDashboardPage: 'Statistics',
+  overviewHealthDashboardPage: 'Health',
+  selfServicePage: 'Self service',
+  selfServiceDashboardPage: 'Dashboard',
+  selfServiceAdminPage: 'Administration',
+  backupPage: 'Backup',
+  jobsPage: 'Jobs',
+  updatePage: 'Updates',
+  settingsPage: 'Settings',
+  settingsServersPage: 'Servers',
+  settingsUsersPage: 'Users',
+  settingsGroupsPage: 'Groups',
+  settingsAclsPage: 'ACLs',
+  settingsPluginsPage: 'Plugins',
+  settingsLogsPage: 'Logs',
+  aboutPage: 'About',
+  newMenu: 'New',
+  taskMenu: 'Tasks',
+  taskPage: 'Tasks',
+  newVmPage: 'VM',
+  newSrPage: 'Storage',
+  newServerPage: 'Server',
+  newImport: 'Import',
+  backupOverviewPage: 'Overview',
+  backupNewPage: 'New',
+  backupRemotesPage: 'Remotes',
+  backupRestorePage: 'Restore',
+  schedule: 'Schedule',
+  newVmBackup: 'New VM backup',
+  editVmBackup: 'Edit VM backup',
+  backup: 'Backup',
+  rollingSnapshot: 'Rolling Snapshot',
+  deltaBackup: 'Delta Backup',
+  disasterRecovery: 'Disaster Recovery',
+  continuousReplication: 'Continuous Replication',
+  jobsOverviewPage: 'Overview',
+  jobsNewPage: 'New',
+  jobsSchedulingPage: 'Scheduling',
+  customJob: 'Custom Job',
+  userPage: 'User',
+
+  // ----- Sign out -----
+  signOut: 'Sign out',
+
+  // ----- Home view ------
+  homeFetchingData: 'Fetching data…',
+  homeWelcome: 'Welcome on Xen Orchestra!',
+  homeWelcomeText: 'Add your XenServer hosts or pools',
+  homeHelp: 'Want some help?',
+  homeAddServer: 'Add server',
+  homeOnlineDoc: 'Online Doc',
+  homeProSupport: 'Pro Support',
+  homeNoVms: 'There are no VMs!',
+  homeNoVmsOr: 'Or…',
+  homeImportVm: 'Import VM',
+  homeImportVmMessage: 'Import an existing VM in xva format',
+  homeRestoreBackup: 'Restore a backup',
+  homeRestoreBackupMessage: 'Restore a backup from a remote store',
+  homeNewVmMessage: 'This will create a new VM',
+  homeFilters: 'Filters',
+  homeTypePool: 'Pool',
+  homeTypeHost: 'Host',
+  homeTypeVm: 'VM',
+  homeTypeSr: 'SR',
+  homeTypeVdi: 'VDI',
+  homeSort: 'Sort',
+  homeAllPools: 'Pools',
+  homeAllHosts: 'Hosts',
+  homeAllTags: 'Tags',
+  homeNewVm: 'New VM',
+  homeFilterRunningHosts: 'Running hosts',
+  homeFilterDisabledHosts: 'Disabled hosts',
+  homeFilterRunningVms: 'Running VMs',
+  homeFilterNonRunningVms: 'Non running VMs',
+  homeFilterPendingVms: 'Pending VMs',
+  homeFilterHvmGuests: 'HVM guests',
+  homeFilterTags: 'Tags',
+  homeSortBy: 'Sort by',
+  homeSortByName: 'Name',
+  homeSortByPowerstate: 'Power state',
+  homeSortByRAM: 'RAM',
+  homeSortByvCPUs: 'vCPUs',
+  homeSortByCpus: 'CPUs',
+  homeDisplayedItems: '{displayed, number}x {icon} (on {total, number})',
+  homeSelectedItems: '{selected, number}x {icon} selected (on {total, number})',
+  homeMore: 'More',
+  homeMigrateTo: 'Migrate to…',
+  homeMissingPaths: 'Missing patches',
+  highAvailability: 'High Availability',
+
+  // ----- Forms -----
+  add: 'Add',
+  remove: 'Remove',
+  preview: 'Preview',
+  item: 'Item',
+  noSelectedValue: 'No selected value',
+  selectSubjects: 'Choose user(s) and/or group(s)',
+  selectObjects: 'Select Object(s)…',
+  selectRole: 'Choose a role',
+  selectHosts: 'Select Host(s)…',
+  selectHostsVms: 'Select object(s)…',
+  selectNetworks: 'Select Network(s)…',
+  selectPifs: 'Select PIF(s)…',
+  selectPools: 'Select Pool(s)…',
+  selectRemotes: 'Select Remote(s)…',
+  selectResourceSets: 'Select resource set(s)…',
+  selectResourceSetsVmTemplate: 'Select template(s)…',
+  selectResourceSetsSr: 'Select SR(s)…',
+  selectResourceSetsNetwork: 'Select network(s)…',
+  selectResourceSetsVdi: 'Select disk(s)…',
+  selectSshKey: 'Select SSH key(s)…',
+  selectSrs: 'Select SR(s)…',
+  selectVms: 'Select VM(s)…',
+  selectVmTemplates: 'Select VM template(s)…',
+  selectTags: 'Select tag(s)…',
+  selectVdis: 'Select disk(s)…',
+  selectTimezone: 'Select timezone…',
+  fillRequiredInformations: 'Fill required informations.',
+  fillOptionalInformations: 'Fill informations (optional)',
+  selectTableReset: 'Reset',
+
+  // --- Dates/Scheduler ---
+
+  schedulingMonth: 'Month',
+  schedulingEachSelectedMonth: 'Each selected month',
+  schedulingMonthDay: 'Day of the month',
+  schedulingEachSelectedMonthDay: 'Each selected day',
+  schedulingWeekDay: 'Day of the week',
+  schedulingEachSelectedWeekDay: 'Each selected day',
+  schedulingHour: 'Hour',
+  schedulingEveryNHour: 'Every N hour',
+  schedulingEachSelectedHour: 'Each selected hour',
+  schedulingMinute: 'Minute',
+  schedulingEveryNMinute: 'Every N minute',
+  schedulingEachSelectedMinute: 'Each selected minute',
+  schedulingReset: 'Reset',
+  unknownSchedule: 'Unknown',
+  timezonePickerServerValue: 'Xo-server timezone:',
+  timezonePickerUseLocalTime: 'Web browser timezone',
+  timezonePickerUseServerTime: 'Xo-server timezone',
+  serverTimezoneOption: 'Server timezone ({value})',
+  cronPattern: 'Cron Pattern:',
+  backupEditNotFoundTitle: 'Cannot edit backup',
+  backupEditNotFoundMessage: 'Missing required info for edition',
+  job: 'Job',
+  jobId: 'Job ID',
+  jobName: 'Name',
+  jobStart: 'Start',
+  jobEnd: 'End',
+  jobDuration: 'Duration',
+  jobStatus: 'Status',
+  jobAction: 'Action',
+  jobTag: 'Tag',
+  jobScheduling: 'Scheduling',
+  jobState: 'State',
+  jobTimezone: 'Timezone',
+  jobServerTimezone: 'xo-server',
+  runJob: 'Run job',
+  runJobVerbose: 'One shot running started. See overview for logs.',
+  jobStarted: 'Started',
+  jobFinished: 'Finished',
+  saveBackupJob: 'Save',
+  deleteBackupSchedule: 'Remove backup job',
+  deleteBackupScheduleQuestion: 'Are you sure you want to delete this backup job?',
+  scheduleEnableAfterCreation: 'Enable immediately after creation',
+  scheduleEditMessage: 'You are editing Schedule {name} ({id}). Saving will override previous schedule state.',
+  jobEditMessage: 'You are editing job {name} ({id}). Saving will override previous job state.',
+  noScheduledJobs: 'No scheduled jobs.',
+  noJobs: 'No jobs found.',
+  noSchedules: 'No schedules found',
+  jobActionPlaceHolder: 'Select a xo-server API command',
+
+  // ------ New backup -----
+  newBackupSelection: 'Select your backup type:',
+  smartBackupModeSelection: 'Select backup mode:',
+  normalBackup: 'Normal backup',
+  smartBackup: 'Smart backup',
+
+  // ------ New Remote -----
+  remoteList: 'Remote stores for backup',
+  newRemote: 'New File System Remote',
+  remoteTypeLocal: 'Local',
+  remoteTypeNfs: 'NFS',
+  remoteTypeSmb: 'SMB',
+  remoteType: 'Type',
+  remoteTestTip: 'Test your remote',
+  testRemote: 'Test Remote',
+  remoteTestFailure: 'Test failed for {name}',
+  remoteTestSuccess: 'Test passed for {name}',
+  remoteTestError: 'Error',
+  remoteTestStep: 'Test Step',
+  remoteTestFile: 'Test file',
+  remoteTestSuccessMessage: 'The remote appears to work correctly',
+
+  // ------ New Storage -----
+  newSrTitle: 'Create a new SR',
+  newSrGeneral: 'General',
+  newSrTypeSelection: 'Select Strorage Type:',
+  newSrSettings: 'Settings',
+  newSrUsage: 'Storage Usage',
+  newSrSummary: 'Summary',
+  newSrHost: 'Host',
+  newSrType: 'Type',
+  newSrName: 'Name',
+  newSrDescription: 'Description',
+  newSrServer: 'Server',
+  newSrPath: 'Path',
+  newSrIqn: 'IQN',
+  newSrLun: 'LUN',
+  newSrAuth: 'with auth.',
+  newSrUsername: 'User Name',
+  newSrPassword: 'Password',
+  newSrDevice: 'Device',
+  newSrInUse: 'in use',
+  newSrSize: 'Size',
+  newSrCreate: 'Create',
+
+  // ----- Acls, Users, Groups ------
+  subjectName: 'Users/Groups',
+  objectName: 'Object',
+  roleName: 'Role',
+  newGroupName: 'New Group Name',
+  createGroup: 'Create Group',
+  createGroupButton: 'Create',
+  deleteGroup: 'Delete Group',
+  deleteGroupConfirm: 'Are you sure you want to delete this group?',
+  removeUserFromGroup: 'Remove user from Group',
+  deleteUserConfirm: 'Are you sure you want to delete this user?',
+  deleteUser: 'Delete User',
+  unknownUser: 'unknown user',
+  noGroupFound: 'No group found',
+  groupNameColumn: 'Name',
+  groupUsersColumn: 'Users',
+  addUserToGroupColumn: 'Add User',
+  userNameColumn: 'Email',
+  userPermissionColumn: 'Permissions',
+  userPasswordColumn: 'Password',
+  userName: 'Email',
+  userPassword: 'Password',
+  createUserButton: 'Create',
+  noUserFound: 'No user found',
+  userLabel: 'User',
+  adminLabel: 'Admin',
+  noUserInGroup: 'No user in group',
+  countUsers: '{users} user{users, plural, one {} other {s}}',
+  selectPermission: 'Select Permission',
+
+  // ----- Plugins ------
+  autoloadPlugin: 'Auto-load at server start',
+  savePluginConfiguration: 'Save configuration',
+  deletePluginConfiguration: 'Delete configuration',
+  pluginError: 'Plugin error',
+  unknownPluginError: 'Unknown error',
+  purgePluginConfiguration: 'Purge plugin configuration',
+  purgePluginConfigurationQuestion: 'Are you sure you want to purge this configuration ?',
+  editPluginConfiguration: 'Edit',
+  cancelPluginEdition: 'Cancel',
+  pluginConfigurationSuccess: 'Plugin configuration',
+  pluginConfigurationChanges: 'Plugin configuration successfully saved!',
+  pluginConfigurationPresetTitle: 'Predefined configuration',
+  pluginConfigurationChoosePreset: 'Choose a predefined configuration.',
+  applyPluginPreset: 'Apply',
+
+  // ----- User preferences -----
+  saveNewUserFilterErrorTitle: 'Save filter error',
+  saveNewUserFilterErrorBody: 'Bad parameter: name must be given.',
+  filterName: 'Name:',
+  filterValue: 'Value:',
+  saveNewFilterTitle: 'Save new filter',
+  setUserFiltersTitle: 'Set custom filters',
+  setUserFiltersBody: 'Are you sure you want to set custom filters?',
+  removeUserFilterTitle: 'Remove custom filter',
+  removeUserFilterBody: 'Are you sure you want to remove custom filter?',
+  defaultFilter: 'Default filter',
+  defaultFilters: 'Default filters',
+  customFilters: 'Custom filters',
+  customizeFilters: 'Customize filters',
+  saveCustomFilters: 'Save custom filters',
+
+  // ----- VM actions ------
+  startVmLabel: 'Start',
+  recoveryModeLabel: 'Recovery start',
+  suspendVmLabel: 'Suspend',
+  stopVmLabel: 'Stop',
+  forceShutdownVmLabel: 'Force shutdown',
+  rebootVmLabel: 'Reboot',
+  forceRebootVmLabel: 'Force reboot',
+  deleteVmLabel: 'Delete',
+  migrateVmLabel: 'Migrate',
+  snapshotVmLabel: 'Snapshot',
+  exportVmLabel: 'Export',
+  resumeVmLabel: 'Resume',
+  copyVmLabel: 'Copy',
+  cloneVmLabel: 'Clone',
+  fastCloneVmLabel: 'Fast clone',
+  convertVmToTemplateLabel: 'Convert to template',
+  vmConsoleLabel: 'Console',
+
+  // ----- SR tabs -----
+  // ----- SR actions -----
+  srRescan: 'Rescan all disks',
+  srReconnectAll: 'Connect to all hosts',
+  srDisconnectAll: 'Disconnect to all hosts',
+  srForget: 'Forget this SR',
+  srRemoveButton: 'Remove this SR',
+  srNoVdis: 'No VDIs in this storage',
+  // ----- Pool general -----
+  poolRamUsage: '{used} used on {total}',
+  // ----- Pool tabs -----
+  hostsTabName: 'Hosts',
+  // ----- Pool advanced tab -----
+  poolHaStatus: 'High Availability',
+  poolHaEnabled: 'Enabled',
+  poolHaDisabled: 'Disabled',
+  // ----- Pool host tab -----
+  hostNameLabel: 'Name',
+  hostDescription: 'Description',
+  hostMemory: 'Memory',
+  noHost: 'No hosts',
+  memoryLeftTooltip: '{used}% used ({free} free)',
+  // ----- Pool network tab -----
+  poolNetworkNameLabel: 'Name',
+  poolNetworkDescription: 'Description',
+  poolNetworkPif: 'PIFs',
+  poolNoNetwork: 'No networks',
+  poolNetworkMTU: 'MTU',
+  poolNetworkPifAttached: 'Connected',
+  poolNetworkPifDetached: 'Disconnected',
+  // ----- Pool actions ------
+  addSrLabel: 'Add SR',
+  addVmLabel: 'Add VM',
+  addHostLabel: 'Add Host',
+  disconnectServer: 'Disconnect',
+
+  // ----- Host actions ------
+  startHostLabel: 'Start',
+  stopHostLabel: 'Stop',
+  enableHostLabel: 'Enable',
+  disableHostLabel: 'Disable',
+  restartHostAgent: 'Restart toolstack',
+  forceRebootHostLabel: 'Force reboot',
+  rebootHostLabel: 'Reboot',
+  emergencyModeLabel: 'Emergency mode',
+  // ----- Host tabs -----
+  storageTabName: 'Storage',
+  patchesTabName: 'Patches',
+    // ----- host stat tab -----
+  statLoad: 'Load average',
+    // ----- host advanced tab -----
+  hardwareHostSettingsLabel: 'Hardware',
+  hostAddress: 'Address',
+  hostStatus: 'Status',
+  hostBuildNumber: 'Build number',
+  hostIscsiName: 'iSCSI name',
+  hostXenServerVersion: 'Version',
+  hostStatusEnabled: 'Enabled',
+  hostStatusDisabled: 'Disabled',
+  hostPowerOnMode: 'Power on mode',
+  hostStartedSince: 'Host uptime',
+  hostStackStartedSince: 'Toolstack uptime',
+  hostCpusModel: 'CPU model',
+  hostCpusNumber: 'Core (socket)',
+  hostManufacturerinfo: 'Manufacturer info',
+  hostBiosinfo: 'BIOS info',
+  licenseHostSettingsLabel: 'Licence',
+  hostLicenseType: 'Type',
+  hostLicenseSocket: 'Socket',
+  hostLicenseExpiry: 'Expiry',
+  // ----- Host net tabs -----
+  networkCreateButton: 'Add a network',
+  pifDeviceLabel: 'Device',
+  pifNetworkLabel: 'Network',
+  pifVlanLabel: 'VLAN',
+  pifAddressLabel: 'Address',
+  pifMacLabel: 'MAC',
+  pifMtuLabel: 'MTU',
+  pifStatusLabel: 'Status',
+  pifStatusConnected: 'Connected',
+  pifStatusDisconnected: 'Disconnected',
+  pifNoInterface: 'No physical interface detected',
+  // ----- Host storage tabs -----
+  addSrDeviceButton: 'Add a storage',
+  srNameLabel: 'Name',
+  srType: 'Type',
+  pdbStatus: 'Status',
+  pbdStatusConnected: 'Connected',
+  pbdStatusDisconnected: 'Disconnected',
+  srShared: 'Shared',
+  srNotShared: 'Not shared',
+  pbdNoSr: 'No storage detected',
+  // ----- Host patch tabs -----
+  patchNameLabel: 'Name',
+  patchUpdateButton: 'Install all patches',
+  patchDescription: 'Description',
+  patchApplied: 'Applied date',
+  patchSize: 'Size',
+  patchStatus: 'Status',
+  patchStatusApplied: 'Applied',
+  patchStatusNotApplied: 'Missing patches',
+  patchNothing: 'No patch detected',
+  patchReleaseDate: 'Release date',
+  patchGuidance: 'Guidance',
+  patchAction: 'Action',
+  hostAppliedPatches: 'Applied patches',
+  hostMissingPatches: 'Missing patches',
+  hostUpToDate: 'Host up-to-date!',
+  // ----- Pool patch tabs -----
+  refreshPatches: 'Refresh patches',
+  installPoolPatches: 'Install pool patches',
+
+  // ----- VM tabs -----
+  generalTabName: 'General',
+  statsTabName: 'Stats',
+  consoleTabName: 'Console',
+  snapshotsTabName: 'Snapshots',
+  logsTabName: 'Logs',
+  advancedTabName: 'Advanced',
+  networkTabName: 'Network',
+  disksTabName: 'Disk{disks, plural, one {} other {s}}',
+
+  powerStateHalted: 'halted',
+  powerStateRunning: 'running',
+  powerStateSuspended: 'suspended',
+
+  // ----- VM home -----
+  vmStatus: 'No Xen tools detected',
+  vmName: 'No IPv4 record',
+  vmDescription: 'No IP record',
+  vmSettings: 'Started {ago}',
+  vmCurrentStatus: 'Current status:',
+  vmNotRunning: 'Not running',
+
+  // ----- VM general tab -----
+  noToolsDetected: 'No Xen tools detected',
+  noIpv4Record: 'No IPv4 record',
+  noIpRecord: 'No IP record',
+  started: 'Started {ago}',
+  paraVirtualizedMode: 'Paravirtualization (PV)',
+  hardwareVirtualizedMode: 'Hardware virtualization (HVM)',
+
+  // ----- VM stat tab -----
+  statsCpu: 'CPU usage',
+  statsMemory: 'Memory usage',
+  statsNetwork: 'Network throughput',
+  useStackedValuesOnStats: 'Stacked values',
+  statDisk: 'Disk throughput',
+  statLastTenMinutes: 'Last 10 minutes',
+  statLastTwoHours: 'Last 2 hours',
+  statLastWeek: 'Last week',
+  statLastYear: 'Last year',
+
+  // ----- VM console tab -----
+  copyToClipboardLabel: 'Copy',
+  ctrlAltDelButtonLabel: 'Ctrl+Alt+Del',
+  tipLabel: 'Tip:',
+  tipConsoleLabel: 'non-US keyboard could have issues with console: switch your own layout to US.',
+  hideHeaderTooltip: 'Hide infos',
+  showHeaderTooltip: 'Show infos',
+
+  // ----- VM disk tab -----
+  vdiAction: 'Action',
+  vdiAttachDeviceButton: 'Attach disk',
+  vbdCreateDeviceButton: 'New disk',
+  vdiBootOrder: 'Boot order',
+  vdiNameLabel: 'Name',
+  vdiNameDescription: 'Description',
+  vdiTags: 'Tags',
+  vdiSize: 'Size',
+  vdiSr: 'SR',
+  vdiVm: 'VM',
+  vdbBootableStatus: 'Boot flag',
+  vdbStatus: 'Status',
+  vbdStatusConnected: 'Connected',
+  vbdStatusDisconnected: 'Disconnected',
+  vbdNoVbd: 'No disks',
+
+  // ----- VM network tab -----
+  vifCreateDeviceButton: 'New device',
+  vifNoInterface: 'No interface',
+  vifDeviceLabel: 'Device',
+  vifMacLabel: 'MAC address',
+  vifMtuLabel: 'MTU',
+  vifNetworkLabel: 'Network',
+  vifStatusLabel: 'Status',
+  vifStatusConnected: 'Connected',
+  vifStatusDisconnected: 'Disconnected',
+  vifIpAddresses: 'IP addresses',
+  vifMacAutoGenerate: 'Auto-generated if empty',
+
+  // ----- VM snapshot tab -----
+  noSnapshots: 'No snapshots',
+  snapshotCreateButton: 'New snapshot',
+  tipCreateSnapshotLabel: 'Just click on the snapshot button to create one!',
+  revertSnapshot: 'Revert VM to this snapshot',
+  deleteSnapshot: 'Remove this snapshot',
+  copySnapshot: 'Create a VM from this snapshot',
+  exportSnapshot: 'Export this snapshot',
+  snapshotDate: 'Creation date',
+  snapshotName: 'Name',
+  snapshotAction: 'Action',
+
+  // ----- VM log tab -----
+  logRemoveAll: 'Remove all logs',
+  noLogs: 'No logs so far',
+  logDate: 'Creation date',
+  logName: 'Name',
+  logContent: 'Content',
+  logAction: 'Action',
+
+  // ----- VM advanced tab -----
+  vmRemoveButton: 'Remove',
+  vmConvertButton: 'Convert',
+  xenSettingsLabel: 'Xen settings',
+  guestOsLabel: 'Guest OS',
+  miscLabel: 'Misc',
+  uuid: 'UUID',
+  virtualizationMode: 'Virtualization mode',
+  cpuWeightLabel: 'CPU weight',
+  defaultCpuWeight: 'Default ({value, number})',
+  cpuCapLabel: 'CPU cap',
+  defaultCpuCap: 'Default ({value, number})',
+  pvArgsLabel: 'PV args',
+  xenToolsStatus: 'Xen tools status',
+  xenToolsStatusValue: {
+    defaultMessage: '{status}',
+    description: 'status can be `not-installed`, `unknown`, `out-of-date` & `up-to-date`'
+  },
+  osName: 'OS name',
+  osKernel: 'OS kernel',
+  autoPowerOn: 'Auto power on',
+  ha: 'HA',
+  originalTemplate: 'Original template',
+  unknownOsName: 'Unknown',
+  unknownOsKernel: 'Unknown',
+  unknownOriginalTemplate: 'Unknown',
+  vmLimitsLabel: 'VM limits',
+  vmCpuLimitsLabel: 'CPU limits',
+  vmMemoryLimitsLabel: 'Memory limits (min/max)',
+  vmMaxVcpus: 'vCPUs max:',
+  vmMaxRam: 'Memory max:',
+
+  // ----- VM placeholders -----
+
+  vmHomeNamePlaceholder: 'Long click to add a name',
+  vmHomeDescriptionPlaceholder: 'Long click to add a description',
+  vmViewNamePlaceholder: 'Click to add a name',
+  vmViewDescriptionPlaceholder: 'Click to add a description',
+
+  // ----- Dashboard -----
+  poolPanel: 'Pool{pools, plural, one {} other {s}}',
+  hostPanel: 'Host{hosts, plural, one {} other {s}}',
+  vmPanel: 'VM{vms, plural, one {} other {s}}',
+  memoryStatePanel: 'RAM Usage',
+  cpuStatePanel: 'CPUs Usage',
+  vmStatePanel: 'VMs Power state',
+  taskStatePanel: 'Pending tasks',
+  usersStatePanel: 'Users',
+  srStatePanel: 'Storage state',
+  ofUsage: '{usage} (of {total})',
+  noSrs: 'No storage',
+  srName: 'Name',
+  srPool: 'Pool',
+  srHost: 'Host',
+  srFormat: 'Type',
+  srSize: 'Size',
+  srUsage: 'Usage',
+  srUsed: 'used',
+  srFree: 'free',
+  srUsageStatePanel: 'Storage Usage',
+  srTopUsageStatePanel: 'Top 5 SR Usage (in %)',
+  vmsStates: '{running} running ({halted} halted)',
+
+  // --- Stats board --
+  weekHeatmapData: '{value} {date, date, medium}',
+  weekHeatmapNoData: 'No data.',
+  weeklyHeatmap: 'Weekly Heatmap',
+  weeklyCharts: 'Weekly Charts',
+  weeklyChartsScaleInfo: 'Synchronize scale:',
+  statsDashboardGenericErrorTitle: 'Stats error',
+  statsDashboardGenericErrorMessage: 'There is no stats available for:',
+  noSelectedMetric: 'No selected metric',
+  statsDashboardSelectObjects: 'Select',
+  metricsLoading: 'Loading…',
+
+  // ----- Visualizations -----
+  comingSoon: 'Coming soon!',
+
+  // ----- Health -----
+  orphanedVdis: 'Orphaned VDIs',
+  orphanedVms: 'Orphaned VMs',
+  noOrphanedObject: 'No orphans',
+  removeAllOrphanedObject: 'Remove all orphaned VDIs',
+  vmNameLabel: 'Name',
+  vmNameDescription: 'Description',
+  vmContainer: 'Resident on',
+  alarmMessage: 'Alarms',
+  noAlarms: 'No alarms',
+  alarmDate: 'Date',
+  alarmContent: 'Content',
+  alarmObject: 'Issue on',
+  alarmPool: 'Pool',
+  alarmRemoveAll: 'Remove all alarms',
+  spaceLeftTooltip: '{used}% used ({free} left)',
+
+  // ----- New VM -----
+  newVmCreateNewVmOn: 'Create a new VM on {select}',
+  newVmCreateNewVmOn2: 'Create a new VM on {select1} or {select2}',
+  newVmCreateNewVmNoPermission: 'You have no permission to create a VM',
+  newVmInfoPanel: 'Infos',
+  newVmNameLabel: 'Name',
+  newVmTemplateLabel: 'Template',
+  newVmDescriptionLabel: 'Description',
+  newVmPerfPanel: 'Performances',
+  newVmVcpusLabel: 'vCPUs',
+  newVmRamLabel: 'RAM',
+  newVmInstallSettingsPanel: 'Install settings',
+  newVmIsoDvdLabel: 'ISO/DVD',
+  newVmNetworkLabel: 'Network',
+  newVmPvArgsLabel: 'PV Args',
+  newVmPxeLabel: 'PXE',
+  newVmInterfacesPanel: 'Interfaces',
+  newVmMacLabel: 'MAC',
+  newVmAddInterface: 'Add interface',
+  newVmDisksPanel: 'Disks',
+  newVmSrLabel: 'SR',
+  newVmBootableLabel: 'Bootable',
+  newVmSizeLabel: 'Size',
+  newVmAddDisk: 'Add disk',
+  newVmSummaryPanel: 'Summary',
+  newVmCreate: 'Create',
+  newVmReset: 'Reset',
+  newVmSelectTemplate: 'Select template',
+  newVmSshKey: 'SSH key',
+  newVmConfigDrive: 'Config drive',
+  newVmCustomConfig: 'Custom config',
+  newVmBootAfterCreate: 'Boot VM after creation',
+  newVmMacPlaceholder: 'Auto-generated if empty',
+  newVmCpuWeightLabel: 'CPU weight',
+  newVmDefaultCpuWeight: 'Default: {value, number}',
+  newVmCpuCapLabel: 'CPU cap',
+  newVmDefaultCpuCap: 'Default: {value, number}',
+  newVmCloudConfig: 'Cloud config',
+  newVmCreateVms: 'Create VMs',
+  newVmCreateVmsConfirm: 'Are you sure you want to create {nbVms} VMs?',
+  newVmMultipleVms: 'Multiple VMs:',
+  newVmSelectResourceSet: 'Select a resource set:',
+  newVmMultipleVmsPattern: 'Name pattern:',
+  newVmMultipleVmsPatternPlaceholder: 'e.g.: \\{name\\}_%',
+  newVmFirstIndex: 'First index:',
+  newVmNumberRecalculate: 'Recalculate VMs number',
+  newVmNameRefresh: 'Refresh VMs name',
+
+  // ----- Self -----
+  resourceSets: 'Resource sets',
+  noResourceSets: 'No resource sets.',
+  resourceSetName: 'Resource set name',
+  resourceSetCreation: 'Creation and edition',
+  recomputeResourceSets: 'Recompute all limits',
+  saveResourceSet: 'Save',
+  resetResourceSet: 'Reset',
+  editResourceSet: 'Edit',
+  deleteResourceSet: 'Delete',
+  deleteResourceSetWarning: 'Delete resource set',
+  deleteResourceSetQuestion: 'Are you sure you want to delete this resource set?',
+  resourceSetMissingObjects: 'Missing objects:',
+  resourceSetVcpus: 'vCPUs',
+  resourceSetMemory: 'Memory',
+  resourceSetStorage: 'Storage',
+  unknownResourceSetValue: 'Unknown',
+  availableHosts: 'Available hosts',
+  excludedHosts: 'Excluded hosts',
+  noHostsAvailable: 'No hosts available.',
+  availableHostsDescription: 'VMs created from this resource set shall run on the following hosts.',
+  maxCpus: 'Maximum CPUs',
+  maxRam: 'Maximum RAM (GiB)',
+  maxDiskSpace: 'Maximum disk space',
+  noResourceSetLimits: 'No limits.',
+  totalResource: 'Total:',
+  remainingResource: 'Remaining:',
+  usedResource: 'Used:',
+
+  // ---- VM import ---
+  importVmsList: 'Try dropping some backups here, or click to select backups to upload. Accept only .xva files.',
+  noSelectedVms: 'No selected VMs.',
+  vmImportToPool: 'To Pool:',
+  vmImportToSr: 'To SR:',
+  vmsToImport: 'VMs to import',
+  importVmsCleanList: 'Reset',
+  vmImportSuccess: 'VM import success',
+  vmImportFailed: 'VM import failed',
+  startVmImport: 'Import starting…',
+  startVmExport: 'Export starting…',
+
+  // ---- Tasks ---
+  noTasks: 'No pending tasks',
+  xsTasks: 'Currently, there are not any pending XenServer tasks',
+
+  // ---- Backup views ---
+  listRemote: 'List Remote',
+  simpleBackup: 'simple',
+  delta: 'delta',
+  restoreBackups: 'Restore Backups',
+  noRemotes: 'No remotes',
+  remoteEnabled: 'enabled',
+  remoteError: 'error',
+  noBackup: 'No backup available',
+  backupVmNameColumn: 'VM Name',
+  backupTagColumn: 'Backup Tag',
+  lastBackupColumn: 'Last Backup',
+  availableBackupsColumn: 'Available Backups',
+  restoreColumn: 'Restore',
+  restoreTip: 'View restore options',
+  displayBackup: 'Display backups',
+  importBackupTitle: 'Import VM',
+  importBackupMessage: 'Starting your backup import',
+  vmsToBackup: 'VMs to backup',
+
+  // ----- 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}}?',
+  stopHostModalTitle: 'Shutdown host',
+  stopHostModalMessage: 'This will shutdown your host. Do you want to continue?',
+  addHostModalTitle: 'Add host',
+  addHostModalMessage: 'Are you sure you want to add {host} to {pool}?',
+  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}}?',
+  restartHostsModalTitle: 'Restart Host{nHosts, plural, one {} other {s}}',
+  restartHostsModalMessage: 'Are you sure you want to restart {nHosts} 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}}?',
+  stopHostsModalTitle: 'Stop Host{nHosts, plural, one {} other {s}}',
+  stopHostsModalMessage: 'Are you sure you want to stop {nHosts} 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}}?',
+  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}}?',
+  snapshotVmsModalTitle: 'Snapshot VM{vms, plural, one {} other {s}}',
+  snapshotVmsModalMessage: 'Are you sure you want to snapshot {vms} 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',
+  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',
+  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',
+  revertVmModalMessage: 'You are about to revert your VM to the snapshot state. This operation is irreversible',
+  importBackupModalTitle: 'Import a {name} Backup',
+  importBackupModalStart: 'Start VM after restore',
+  importBackupModalSelectBackup: 'Select your backup…',
+  removeAllOrphanedModalWarning: 'Are you sure you want to remove all orphaned VDIs?',
+  removeAllLogsModalTitle: 'Remove all logs',
+  removeAllLogsModalWarning: 'Are you sure you want to remove all logs?',
+  definitiveMessageModal: 'This operation is definitive.',
+  existingSrModalTitle: 'Previous SR Usage',
+  existingSrModalText: 'This path has been previously used as a Storage by a XenServer host. All data will be lost if you choose to continue the SR creation.',
+  existingLunModalTitle: 'Previous LUN Usage',
+  existingLunModalText: 'This LUN has been previously used as a Storage by a XenServer host. All data will be lost if you choose to continue the SR creation.',
+  alreadyRegisteredModal: 'Replace current registration?',
+  alreadyRegisteredModalText: 'Your XO appliance is already registered to {email}, do you want to forget and replace this registration ?',
+  trialReadyModal: 'Ready for trial?',
+  trialReadyModalText: 'During the trial period, XOA need to have a working internet connection. This limitation does not apply for our paid plans!',
+
+  // ----- Servers -----
+  serverHost: 'Host',
+  serverUsername: 'Username',
+  serverPassword: 'Password',
+  serverAction: 'Action',
+  serverReadOnly: 'Read Only',
+  serverConnect: 'Connect server',
+  serverDisconnect: 'Disconnect server',
+
+  // ----- Copy VM -----
+  copyVm: 'Copy VM',
+  copyVmConfirm: 'Are you sure you want to copy this VM to {SR}?',
+  copyVmName: 'Name',
+  copyVmNamePattern: 'Name pattern',
+  copyVmNamePlaceholder: 'If empty: name of the copied VM',
+  copyVmNamePatternPlaceholder: 'e.g.: "\\{name\\}_COPY"',
+  copyVmSelectSr: 'Select SR',
+  copyVmCompress: 'Use compression',
+  copyVmsNoTargetSr: 'No target SR',
+  copyVmsNoTargetSrMessage: 'A target SR is required to copy a VM',
+
+  // ----- Detach host -----
+  detachHostModalTitle: 'Detach host',
+  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',
+
+  // ----- Network -----
+  newNetworkCreate: 'Create network',
+  newNetworkInterface: 'Interface',
+  newNetworkName: 'Name',
+  newNetworkDescription: 'Description',
+  newNetworkVlan: 'VLAN',
+  newNetworkDefaultVlan: 'No VLAN if empty',
+  newNetworkMtu: 'MTU',
+  newNetworkDefaultMtu: 'Default: 1500',
+  deleteNetwork: 'Delete network',
+  deleteNetworkConfirm: 'Are you sure you want to delete this network?',
+
+  // ----- Add host -----
+  addHostSelectHost: 'Host',
+  addHostNoHost: 'No host',
+  addHostNoHostMessage: 'No host selected to be added',
+
+  // ----- About View -----
+  xenOrchestra: 'Xen Orchestra',
+  xenOrchestraServer: 'server',
+  xenOrchestraWeb: 'web client',
+  noProSupport: 'No pro support provided!',
+  noProductionUse: 'Use in production at your own risks',
+  downloadXoa: 'You can download our turnkey appliance at',
+  bugTracker: 'Bug Tracker',
+  bugTrackerText: 'Issues? Report it!',
+  community: 'Community',
+  communityText: 'Join our community forum!',
+  freeTrial: 'Free Trial for Premium Edition!',
+  freeTrialNow: 'Request your trial now!',
+  issues: 'Any issue?',
+  issuesText: 'Problem? Contact us!',
+  documentation: 'Documentation',
+  documentationText: 'Read our official doc',
+  proSupportIncluded: 'Pro support included',
+  xoAccount: 'Acces your XO Account',
+  openTicket: 'Report a problem',
+  openTicketText: 'Problem? Open a ticket !',
+
+  // ----- Upgrade Panel -----
+  upgradeNeeded: 'Upgrade needed',
+  upgradeNow: 'Upgrade now!',
+  or: 'Or',
+  tryIt: 'Try it for free!',
+  availableIn: 'This feature is available starting from {plan} Edition',
+
+  // ----- Updates View -----
+  updateTitle: 'Updates',
+  registration: 'Registration',
+  trial: 'Trial',
+  settings: 'Settings',
+  proxySettings: 'Proxy settings',
+  update: 'Update',
+  refresh: 'Refresh',
+  upgrade: 'Upgrade',
+  noUpdaterCommunity: 'No updater available for Community Edition',
+  noUpdaterSubscribe: 'Please consider subscribe and try it with all features for free during 15 days on',
+  noUpdaterWarning: 'Manual update could break your current installation due to dependencies issues, do it with caution',
+  currentVersion: 'Current version:',
+  register: 'Register',
+  editRegistration: 'Edit registration',
+  trialRegistration: 'Please, take time to register in order to enjoy your trial.',
+  trialStartButton: 'Start trial',
+  trialAvailableUntil: 'You can use a trial version until {date, date, medium}. Upgrade your appliance to get it.',
+  trialConsumed: 'Your trial has been ended. Contact us or downgrade to Free version',
+  trialLocked: 'Your xoa-updater service appears to be down. Your XOA cannot run fully without reaching this service.',
+  noUpdateInfo: 'No update information available',
+  waitingUpdateInfo: 'Update information may be available',
+  upToDate: 'Your XOA is up-to-date',
+  mustUpgrade: 'You need to update your XOA (new version is available)',
+  registerNeeded: 'Your XOA is not registered for updates',
+  updaterError: 'Can\'t fetch update information',
+  promptUpgradeReloadTitle: 'Upgrade successful',
+  promptUpgradeReloadMessage: 'Your XOA has successfully upgraded, and your browser must reload the application. Do you want to reload now ?',
+
+  // ----- OS Disclaimer -----
+  disclaimerTitle: 'Xen Orchestra from the sources',
+  disclaimerText1: 'You are using XO from the sources! That\'s great for a personal/non-profit usage.',
+  disclaimerText2: 'If you are a company, it\'s better to use it with our appliance + pro support included:',
+  disclaimerText3: 'This version is not bundled with any support nor updates. Use it with caution for critical tasks.',
+
+  // ----- PIF -----
+  connectPif: 'Connect PIF',
+  connectPifConfirm: 'Are you sure you want to connect this PIF?',
+  disconnectPif: 'Disconnect PIF',
+  disconnectPifConfirm: 'Are you sure you want to disconnect this PIF?',
+  deletePif: 'Delete PIF',
+  deletePifConfirm: 'Are you sure you want to delete this PIF?',
+
+  // ----- User -----
+  username: 'Username',
+  password: 'Password',
+  language: 'Language',
+  oldPasswordPlaceholder: 'Old password',
+  newPasswordPlaceholder: 'New password',
+  confirmPasswordPlaceholder: 'Confirm new password',
+  confirmationPasswordError: 'Confirmation password incorrect',
+  confirmationPasswordErrorBody: 'Password does not match the confirm password.',
+  pwdChangeSuccess: 'Password changed',
+  pwdChangeSuccessBody: 'Your password has been successfully changed.',
+  pwdChangeError: 'Incorrect password',
+  pwdChangeErrorBody: 'The old password provided is incorrect. Your password has not been changed.',
+  changePasswordOk: 'OK',
+  sshKeys: 'SSH keys',
+  newSshKey: 'New SSH key',
+  deleteSshKey: 'Delete',
+  noSshKeys: 'No SSH keys',
+  newSshKeyModalTitle: 'New SSH key',
+  sshKeyErrorTitle: 'Invalid key',
+  sshKeyErrorMessage: 'An SSH key requires both a title and a key.',
+  title: 'Title',
+  key: 'Key',
+  deleteSshKeyConfirm: 'Delete SSH key',
+  deleteSshKeyConfirmMessage: 'Are you sure you want to delete the SSH key {title}?',
+
+  // ----- Usage -----
+  others: 'Others',
+
+  // ----- Logs -----
+  loadingLogs: 'Loading logs...',
+  logUser: 'User',
+  logMethod: 'Method',
+  logParams: 'Params',
+  logMessage: 'Message',
+  logStack: 'Stack trace',
+  logShowStackTrace: 'Show stack',
+  logShowParams: 'ShowParams',
+  logTime: 'Date',
+  logNoStackTrace: 'No stack trace',
+  logNoParams: 'No params',
+  logDeleteAll: 'Delete all logs',
+  logDeleteAllTitle: 'Delete all logs',
+  logDeleteAllMessage: 'Are you sure you want to delete all the logs?'
+}
+forEach(messages, function (message, id) {
+  if (isString(message)) {
+    messages[id] = {
+      id,
+      defaultMessage: message
+    }
+  } else if (!message.id) {
+    message.id = id
+  }
+})
+
+module.exports = messages
--- a/src/common/invoke.js
+++ b/src/common/invoke.js
@@ -0,0 +1,33 @@
+// Invoke a function and returns it result.
+// All parameters are forwarded.
+//
+// Why using `invoke()`?
+// - avoid tedious IIFE syntax
+// - avoid declaring variables in the common scope
+// - monkey-patching
+//
+// ```js
+// const sum = invoke(1, 2, (a, b) => a + b)
+//
+// eventEmitter.emit = invoke(eventEmitter.emit, emit => function (event) {
+//   if (event === 'foo') {
+//     throw new Error('event foo is disabled')
+//   }
+//
+//   return emit.apply(this, arguments)
+// })
+// ```
+export default function invoke (fn) {
+  const n = arguments.length - 1
+  if (!n) {
+    return fn()
+  }
+
+  fn = arguments[n]
+  const args = new Array(n)
+  for (let i = 0; i < n; ++i) {
+    args[i] = arguments[i]
+  }
+
+  return fn.apply(undefined, args)
+}
--- a/src/common/iso-device.js
+++ b/src/common/iso-device.js
@@ -0,0 +1,84 @@
+import React from 'react'
+
+import ActionButton from './action-button'
+import Component from './base-component'
+import propTypes from './prop-types'
+import { connectStore } from './utils'
+import { SelectVdi } from './select-objects'
+import {
+  createGetObjectsOfType,
+  createFinder,
+  createGetObject,
+  createSelector
+} from './selectors'
+import {
+  ejectCd,
+  insertCd
+} from './xo'
+
+@propTypes({
+  vm: propTypes.object.isRequired
+})
+@connectStore(() => {
+  const getCdDrive = createFinder(
+    createGetObjectsOfType('VBD').pick(
+      (_, { vm }) => vm.$VBDs
+    ),
+    [ vbd => vbd.is_cd_drive ]
+  )
+
+  const getMountedIso = createGetObject(
+    (state, props) => {
+      const cdDrive = getCdDrive(state, props)
+      if (cdDrive) {
+        return cdDrive.VDI
+      }
+    }
+  )
+
+  return {
+    cdDrive: getCdDrive,
+    mountedIso: getMountedIso
+  }
+})
+export default class IsoDevice extends Component {
+  _getPredicate = createSelector(
+    () => this.props.vm.$pool,
+    poolId => sr => sr.$pool === poolId && sr.SR_type === 'iso'
+  )
+
+  _handleInsert = iso => {
+    const { vm } = this.props
+
+    if (iso) {
+      insertCd(vm, iso.id, true)
+    } else {
+      ejectCd(vm)
+    }
+  }
+
+  _handleEject = () => ejectCd(this.props.vm)
+
+  render () {
+    const { mountedIso } = this.props
+
+    return (
+      <div className='input-group'>
+        <SelectVdi
+          srPredicate={this._getPredicate()}
+          onChange={this._handleInsert}
+          ref='selectIso'
+          value={mountedIso}
+        />
+        <span className='input-group-btn'>
+          <ActionButton
+            btnStyle='secondary'
+            disabled={!mountedIso}
+            handler={this._handleEject}
+            icon='vm-eject'
+          />
+        </span>
+      </div>
+    )
+  }
+}
--- a/src/common/json-schema-input/abstract-input.js
+++ b/src/common/json-schema-input/abstract-input.js
@@ -0,0 +1,26 @@
+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
+  }
+}
--- a/src/common/json-schema-input/array-input.js
+++ b/src/common/json-schema-input/array-input.js
@@ -0,0 +1,186 @@
+import React, { Component, cloneElement } from 'react'
+import map from 'lodash/map'
+import filter from 'lodash/filter'
+
+import _ from '../intl'
+import propTypes from '../prop-types'
+import { propsEqual } from '../utils'
+
+import GenericInput from './generic-input'
+import {
+  descriptionRender,
+  forceDisplayOptionalAttr
+} from './helpers'
+
+// ===================================================================
+
+class ArrayItem extends Component {
+  get value () {
+    return this.refs.input.value
+  }
+
+  set value (value) {
+    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-xs-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
+})
+export default class ArrayInput extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      use: props.required || forceDisplayOptionalAttr(props),
+      children: this._makeChildren(props)
+    }
+    this._nextChildKey = 0
+  }
+
+  get value () {
+    if (this.state.use) {
+      return map(this.refs, 'value')
+    }
+  }
+
+  set value (value = []) {
+    this.setState({
+      children: this._makeChildren({ ...this.props, value })
+    })
+  }
+
+  _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) {
+    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={props.defaultValue}
+        />
+      </ArrayItem>
+    )
+  }
+
+  _makeChildren ({ defaultValue, ...props }) {
+    return map(defaultValue, defaultValue => {
+      return (
+        this._makeChild({
+          ...props,
+          defaultValue
+        })
+      )
+    })
+  }
+
+  componentWillReceiveProps (props) {
+    if (
+      !propsEqual(
+        this.props,
+        props,
+        [ 'depth', 'disabled', 'label', 'required', 'schema', 'uiSchema' ]
+      )
+    ) {
+      this.setState({
+        children: this._makeChildren(props)
+      })
+    }
+  }
+
+  render () {
+    const {
+      props,
+      state
+    } = this
+    const {
+      disabled,
+      schema
+    } = props
+    const { use } = state
+    const depth = props.depth || 0
+
+    return (
+      <div style={{'paddingLeft': `${depth}em`}}>
+        <legend>{props.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-xs-right m-t-1 m-r-1' type='button' onClick={this._handleAdd}>
+              {_('add')}
+            </button>
+          </div>
+        }
+      </div>
+    )
+  }
+}
--- a/src/common/json-schema-input/boolean-input.js
+++ b/src/common/json-schema-input/boolean-input.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Toggle } from 'form'
+
+import AbstractInput from './abstract-input'
+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
+  }
+
+  render () {
+    const { props } = this
+
+    return (
+      <PrimitiveInputWrapper {...props}>
+        <div className='checkbox form-control'>
+          <Toggle
+            defaultValue={props.defaultValue}
+            disabled={props.disabled}
+            onChange={props.onChange}
+            ref='input'
+          />
+        </div>
+      </PrimitiveInputWrapper>
+    )
+  }
+}
--- a/src/common/json-schema-input/enum-input.js
+++ b/src/common/json-schema-input/enum-input.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import _ from 'intl'
+import map from 'lodash/map'
+
+import AbstractInput from './abstract-input'
+import { PrimitiveInputWrapper } from './helpers'
+
+// ===================================================================
+
+export default class EnumInput extends AbstractInput {
+  render () {
+    const { props } = this
+    const {
+      onChange,
+      required
+    } = props
+
+    return (
+      <PrimitiveInputWrapper {...props}>
+        <select
+          className='form-control'
+          defaultValue={props.defaultValue || ''}
+          disabled={props.disabled}
+          onChange={onChange && (event => onChange(event.target.value))}
+          ref='input'
+          required={required}
+        >
+          {_('noSelectedValue', message => <option value=''>{message}</option>)}
+          {map(props.schema.enum, (value, index) =>
+            <option value={value} key={index}>{value}</option>
+          )}
+        </select>
+      </PrimitiveInputWrapper>
+    )
+  }
+}
--- a/src/common/json-schema-input/generic-input.js
+++ b/src/common/json-schema-input/generic-input.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+
+import propTypes from '../prop-types'
+import { EMPTY_OBJECT } from '../utils'
+
+import ArrayInput from './array-input'
+import BooleanInput from './boolean-input'
+import EnumInput from './enum-input'
+import IntegerInput from './integer-input'
+import NumberInput from './number-input'
+import ObjectInput from './object-input'
+import StringInput from './string-input'
+
+import { getType } from './helpers'
+
+// ===================================================================
+
+const InputByType = {
+  array: ArrayInput,
+  boolean: BooleanInput,
+  integer: IntegerInput,
+  number: NumberInput,
+  object: ObjectInput,
+  string: StringInput
+}
+
+// ===================================================================
+
+@propTypes({
+  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
+})
+export default class GenericInput extends Component {
+  get value () {
+    return this.refs.input.value
+  }
+
+  set value (value) {
+    this.refs.input.value = value
+  }
+
+  render () {
+    const {
+      schema,
+      defaultValue = schema.default,
+      uiSchema = EMPTY_OBJECT,
+      ...opts
+    } = this.props
+
+    const props = {
+      ...opts,
+      defaultValue,
+      schema,
+      uiSchema,
+      ref: 'input'
+    }
+
+    // Enum, special case.
+    if (schema.enum) {
+      return <EnumInput {...props} />
+    }
+
+    const type = getType(schema)
+    const Input = uiSchema.widget || InputByType[type.toLowerCase()]
+
+    if (!Input) {
+      throw new Error(`Unsupported type: ${type}.`)
+    }
+
+    return <Input {...props} {...uiSchema.config} />
+  }
+}
--- a/src/common/json-schema-input/helpers.js
+++ b/src/common/json-schema-input/helpers.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import includes from 'lodash/includes'
+import isArray from 'lodash/isArray'
+import marked from 'marked'
+
+import { Col, Row } from 'grid'
+
+// ===================================================================
+
+export const getType = schema => {
+  if (!schema) {
+    return
+  }
+
+  const type = schema.type
+
+  if (isArray(type)) {
+    if (includes(type, 'integer')) {
+      return 'integer'
+    }
+    if (includes(type, 'number')) {
+      return 'number'
+    }
+
+    return 'string'
+  }
+
+  return type
+}
+
+export const getXoType = schema => {
+  const type = schema && (schema['xo:type'] || schema.$type)
+
+  if (type) {
+    return type.toLowerCase()
+  }
+}
+
+// ===================================================================
+
+export const descriptionRender = description =>
+  <span className='text-muted' dangerouslySetInnerHTML={{__html: marked(description || '')}} />
+
+// ===================================================================
+
+export const PrimitiveInputWrapper = ({ label, required = false, schema, children }) => (
+  <Row>
+    <Col mediumSize={6}>
+      <div className='input-group'>
+        <span className='input-group-addon'>
+          {label}
+          {required && <span className='text-warning'>*</span>}
+        </span>
+        {children}
+      </div>
+    </Col>
+    <Col mediumSize={6}>
+      {descriptionRender(schema.description)}
+    </Col>
+  </Row>
+)
+
+// ===================================================================
+
+export const forceDisplayOptionalAttr = ({ schema, defaultValue }) => {
+  if (!schema || !defaultValue) {
+    return false
+  }
+
+  // Array
+  if (schema.items && Array.isArray(defaultValue)) {
+    return true
+  }
+
+  // Object
+  for (const key in schema.properties) {
+    if (defaultValue[key]) {
+      return true
+    }
+  }
+
+  return false
+}
--- a/src/common/json-schema-input/index.js
+++ b/src/common/json-schema-input/index.js
@@ -0,0 +1 @@
+export default from './generic-input'
--- a/src/common/json-schema-input/integer-input.js
+++ b/src/common/json-schema-input/integer-input.js
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AbstractInput from './abstract-input'
+import Combobox from '../combobox'
+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
+  }
+
+  render () {
+    const { props } = this
+    const { schema } = props
+
+    return (
+      <PrimitiveInputWrapper {...props}>
+        <Combobox
+          defaultValue={props.defaultValue}
+          disabled={props.disabled}
+          onChange={props.onChange}
+          options={schema.defaults}
+          placeholder={props.placeholder || schema.default}
+          ref='input'
+          required={props.required}
+          step={1}
+          type='number'
+        />
+      </PrimitiveInputWrapper>
+    )
+  }
+}
--- a/src/common/json-schema-input/number-input.js
+++ b/src/common/json-schema-input/number-input.js
@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AbstractInput from './abstract-input'
+import Combobox from '../combobox'
+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
+  }
+
+  render () {
+    const { props } = this
+    const { schema } = props
+
+    return (
+      <PrimitiveInputWrapper {...props}>
+        <Combobox
+          defaultValue={props.defaultValue}
+          disabled={props.disabled}
+          onChange={props.onChange}
+          options={schema.defaults}
+          placeholder={props.placeholder || schema.default}
+          ref='input'
+          required={props.required}
+          step='any'
+          type='number'
+        />
+      </PrimitiveInputWrapper>
+    )
+  }
+}
--- a/src/common/json-schema-input/object-input.js
+++ b/src/common/json-schema-input/object-input.js
@@ -0,0 +1,164 @@
+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 propTypes from '../prop-types'
+import { propsEqual } 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='p-b-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
+})
+export default class ObjectInput extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      use: Boolean(props.required) || forceDisplayOptionalAttr(props),
+      children: this._makeChildren(props)
+    }
+  }
+
+  get value () {
+    if (!this.state.use) {
+      return
+    }
+
+    const obj = {}
+
+    forEach(this.refs, (instance, key) => {
+      obj[key] = instance.value
+    })
+
+    return obj
+  }
+
+  set value (value = {}) {
+    forEach(this.refs, (instance, id) => {
+      instance.value = value[id]
+    })
+  }
+
+  _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)
+      })
+    }
+  }
+
+  render () {
+    const { props, state } = this
+    const { use } = state
+    const depth = props.depth || 0
+
+    return (
+      <div style={{'paddingLeft': `${depth}em`}}>
+        <legend>{props.label}</legend>
+        {descriptionRender(props.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>
+        }
+      </div>
+    )
+  }
+}
--- a/src/common/json-schema-input/string-input.js
+++ b/src/common/json-schema-input/string-input.js
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import AbstractInput from './abstract-input'
+import Combobox from '../combobox'
+import propTypes from '../prop-types'
+import { PrimitiveInputWrapper } from './helpers'
+
+// ===================================================================
+
+@propTypes({
+  password: propTypes.bool
+})
+export default class StringInput extends AbstractInput {
+  render () {
+    const { props } = this
+    const { schema } = props
+
+    return (
+      <PrimitiveInputWrapper {...props}>
+        <Combobox
+          defaultValue={props.defaultValue}
+          disabled={props.disabled}
+          onChange={props.onChange}
+          options={schema.defaults}
+          placeholder={props.placeholder || schema.default}
+          ref='input'
+          required={props.required}
+          type={props.password && 'password'}
+        />
+      </PrimitiveInputWrapper>
+    )
+  }
+}
--- a/src/common/link.js
+++ b/src/common/link.js
@@ -0,0 +1,59 @@
+import Link from 'react-router/lib/Link'
+import React from 'react'
+import { routerShape } from 'react-router/lib/PropTypes'
+
+import Component from './base-component'
+import propTypes from './prop-types'
+
+// ===================================================================
+
+export { Link as default }
+
+// -------------------------------------------------------------------
+
+const _IGNORED_TAGNAMES = {
+  A: true,
+  BUTTON: true,
+  INPUT: true,
+  SELECT: true
+}
+
+@propTypes({
+  tagName: propTypes.string
+})
+export class BlockLink extends Component {
+  static contextTypes = {
+    router: routerShape
+  }
+
+  _style = { cursor: 'pointer' }
+  _onClickCapture = event => {
+    const { currentTarget } = event
+    let element = event.target
+    while (element !== currentTarget) {
+      if (_IGNORED_TAGNAMES[element.tagName]) {
+        return
+      }
+      element = element.parentNode
+    }
+    event.stopPropagation()
+    if (event.ctrlKey || event.button === 1) {
+      window.open(this.context.router.createHref(this.props.to))
+    } else {
+      this.context.router.push(this.props.to)
+    }
+  }
+
+  render () {
+    const { children, tagName = 'div' } = this.props
+    const Component = tagName
+    return (
+      <Component
+        style={this._style}
+        onClickCapture={this._onClickCapture}
+      >
+        {children}
+      </Component>
+    )
+  }
+}
--- a/src/common/log-error.js
+++ b/src/common/log-error.js
@@ -0,0 +1,13 @@
+// Logs an error properly, correctly use the source map for the stack.
+//
+// This is achieved by throwing the error asynchronously.
+const logError = (error, ...args) => {
+  setTimeout(() => {
+    if (args.length) {
+      console.error(...args)
+    }
+
+    throw error
+  }, 0)
+}
+export { logError as default }
--- a/src/common/modal.js
+++ b/src/common/modal.js
@@ -0,0 +1,167 @@
+import _ from 'intl'
+import Icon from 'icon'
+import isArray from 'lodash/isArray'
+import isString from 'lodash/isString'
+import React, { Component, cloneElement } from 'react'
+import { Button, Modal as ReactModal } from 'react-bootstrap-4/lib'
+
+import propTypes from './prop-types'
+
+let instance
+
+const modal = (content, onClose) => {
+  if (!instance) {
+    throw new Error('No modal instance.')
+  } else if (instance.state.showModal) {
+    throw new Error('Other modal still open.')
+  }
+  instance.setState({ content, onClose, showModal: true })
+}
+
+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
+  }
+
+  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.value || body.getWrappedInstance && body.getWrappedInstance().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 body = _addRef(this.props.children, 'body')
+
+    return <div>
+      <Header closeButton>
+        <Title>
+        {icon
+          ? <span><Icon icon={icon} /> {title}</span>
+          : title}
+        </Title>
+      </Header>
+      <Body>
+        {body}
+      </Body>
+      <Footer>
+        <Button
+          bsStyle='primary'
+          onClick={this._resolve}
+          style={this._style}
+        >
+          {_('confirmOk')}
+        </Button>
+        <Button
+          bsStyle='secondary'
+          onClick={this._reject}
+        >
+          {_('confirmCancel')}
+        </Button>
+      </Footer>
+    </div>
+  }
+}
+
+export const confirm = ({
+  body,
+  title,
+  icon = 'alarm'
+}) => {
+  return new Promise((resolve, reject) => {
+    modal(
+      <Confirm
+        title={title}
+        resolve={resolve}
+        reject={reject}
+        icon={icon}
+      >
+        {body}
+      </Confirm>,
+      reject
+    )
+  })
+}
+
+export default class Modal extends Component {
+  constructor () {
+    super()
+
+    if (instance) {
+      throw new Error('Modal is a singleton!')
+    }
+    instance = this
+  }
+
+  componentWillMount () {
+    this.setState({ showModal: false })
+  }
+
+  close () {
+    this.setState({ showModal: false })
+  }
+
+  _onHide = () => {
+    this.close()
+
+    const { onClose } = this.state
+    onClose && onClose()
+  }
+
+  render () {
+    const { showModal } = this.state
+    /* TODO: remove this work-around and use
+     * ReactModal.Body, ReactModal.Header, ...
+     * after this issue has been fixed:
+     * https://phabricator.babeljs.io/T6976
+     */
+    return (
+      <ReactModal show={showModal} onHide={this._onHide}>
+        {this.state.content}
+      </ReactModal>
+    )
+  }
+}
--- a/src/common/nav.js
+++ b/src/common/nav.js
@@ -0,0 +1,18 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import Link from './link'
+
+export const NavLink = ({ children, to }) => (
+  <li className='nav-item' role='tab'>
+    <Link className='nav-link' activeClassName='active' to={to}>
+      {children}
+    </Link>
+  </li>
+)
+
+export const NavTabs = ({ children, className }) => (
+  <ul className={classNames(className, 'nav nav-tabs')} role='tablist'>
+    {children}
+  </ul>
+)
--- a/src/common/notification.js
+++ b/src/common/notification.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import ReactNotify from 'react-notify'
+
+let instance
+
+export let error
+export let info
+export let success
+
+export class Notification extends Component {
+  constructor () {
+    super()
+
+    if (instance) {
+      throw new Error('Notification is a singleton!')
+    }
+    instance = this
+  }
+
+  // This special component never have to rerender!
+  shouldComponentUpdate () {
+    return false
+  }
+
+  render () {
+    return <ReactNotify ref={notification => {
+      if (!notification) {
+        return
+      }
+
+      error = (title, body) => notification.error(title, body, 3e3)
+      info = (title, body) => notification.info(title, body, 3e3)
+      success = (title, body) => notification.success(title, body, 3e3)
+    }} />
+  }
+}
+
+export { info as default }
+
+/* Example:
+
+import info, { success, error } from 'notification'
+
+<button onClick={() => info('Info', 'This is an info notification')}>
+  Info notification
+</button>
+
+<button onClick={() => success('Success', 'This is a success notification')}>
+  Success notification
+</button>
+
+<button onClick={() => error('Error', 'This is an error notification')}>
+  Error notification
+</button>
+*/
--- a/src/common/object-name.js
+++ b/src/common/object-name.js
@@ -0,0 +1,15 @@
+/** EXPERIMENT: this is here to avoid a littel code dupplication, but is not admitted as a highly recommendable component */
+import { connectStore } from 'utils'
+import { createGetObject } from 'selectors'
+import React, { Component } from 'react'
+
+@connectStore(() => {
+  const object = createGetObject()
+  return (state, props) => ({object: object(state, props)})
+})
+export default class ObjectName extends Component {
+  render () {
+    const { object } = this.props
+    return <span>{object && object.name_label}</span>
+  }
+}
--- a/src/common/prop-types.js
+++ b/src/common/prop-types.js
@@ -0,0 +1,22 @@
+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 }
--- a/src/common/react-novnc.js
+++ b/src/common/react-novnc.js
@@ -0,0 +1,144 @@
+import React, { Component } from 'react'
+import { createBackoff } from 'jsonrpc-websocket-client'
+import { RFB } from 'novnc-node'
+import {
+  format as formatUrl,
+  parse as parseUrl,
+  resolve as resolveUrl
+} from 'url'
+
+import propTypes from './prop-types'
+
+const parseRelativeUrl = url => parseUrl(resolveUrl(String(window.location), url))
+
+const PROTOCOL_ALIASES = {
+  'http:': 'ws:',
+  'https:': 'wss:'
+}
+const fixProtocol = url => {
+  const protocol = PROTOCOL_ALIASES[url.protocol]
+  if (protocol) {
+    url.protocol = protocol
+  }
+}
+
+@propTypes({
+  onClipboardChange: propTypes.func,
+  url: propTypes.string.isRequired
+})
+export default class NoVnc extends Component {
+  constructor (props) {
+    super(props)
+    this._rfb = null
+    this._retryGen = createBackoff(Infinity)
+
+    this._onUpdateState = (rfb, state) => {
+      if (state === 'normal') {
+        if (this._retryTimeout) {
+          clearTimeout(this._retryTimeout)
+          this._retryTimeout = undefined
+          this._retryGen = createBackoff(Infinity)
+        }
+      }
+
+      if (state !== 'disconnected') {
+        return
+      }
+
+      clearTimeout(this._retryTimeout)
+      this._retryTimeout = setTimeout(this._connect, this._retryGen.next().value)
+    }
+  }
+
+  sendCtrlAltDel () {
+    const rfb = this._rfb
+    if (rfb) {
+      rfb.sendCtrlAltDel()
+    }
+  }
+
+  setClipboard (text) {
+    const rfb = this._rfb
+    if (rfb) {
+      rfb.clipboardPasteFrom(text)
+    }
+  }
+
+  _clean () {
+    const rfb = this._rfb
+    if (rfb) {
+      this._rfb = null
+      rfb.disconnect()
+    }
+  }
+
+  _connect = () => {
+    this._clean()
+
+    const url = parseRelativeUrl(this.props.url)
+    fixProtocol(url)
+
+    const isSecure = url.protocol === 'wss:'
+
+    const { onClipboardChange } = this.props
+    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))
+  }
+
+  componentDidMount () {
+    this._connect()
+  }
+
+  componentWillUnmount () {
+    this._clean()
+  }
+
+  componentWillReceiveProps (props) {
+    const rfb = this._rfb
+    if (rfb && this.props.scale !== props.scale) {
+      rfb.get_display().set_scale(props.scale || 1)
+      rfb.get_mouse().set_scale(props.scale || 1)
+    }
+  }
+
+  _focus = () => {
+    const rfb = this._rfb
+    if (rfb) {
+      const { activeElement } = document
+      if (activeElement) {
+        activeElement.blur()
+      }
+
+      rfb.get_keyboard().grab()
+      rfb.get_mouse().grab()
+    }
+  }
+
+  _unfocus = () => {
+    const rfb = this._rfb
+    if (rfb) {
+      rfb.get_keyboard().ungrab()
+      rfb.get_mouse().ungrab()
+    }
+  }
+
+  render () {
+    return <canvas
+      className='center-block'
+      height='480'
+      onMouseEnter={this._focus}
+      onMouseLeave={this._unfocus}
+      ref='canvas'
+      width='640'
+    />
+  }
+}
--- a/src/common/render-xo-item.js
+++ b/src/common/render-xo-item.js
@@ -0,0 +1,209 @@
+import React, { Component } from 'react'
+
+import Icon from './icon'
+import propTypes from './prop-types'
+import { createGetObject } from './selectors'
+import { isSrWritable } from './xo'
+import {
+  connectStore,
+  formatSize
+} from './utils'
+
+// ===================================================================
+
+const OBJECT_TYPE_TO_ICON = {
+  'VM-template': 'vm',
+  host: 'host',
+  network: 'network'
+}
+
+// Host, Network, VM-template.
+export const PoolObjectItem = propTypes({
+  object: propTypes.object.isRequired
+})(connectStore(() => {
+  const getPool = createGetObject(
+    (_, props) => props.object.$pool
+  )
+
+  return (state, props) => ({
+    pool: getPool(state, props)
+  })
+})(({ object, pool }) => {
+  const icon = OBJECT_TYPE_TO_ICON[object.type]
+  const { id } = object
+
+  return (
+    <span>
+      <Icon icon={icon} /> {`${object.name_label || id} `}
+      {pool && `(${pool.name_label || pool.id})`}
+    </span>
+  )
+}))
+
+// SR.
+export const SrItem = propTypes({
+  sr: propTypes.object.isRequired
+})(connectStore(() => {
+  const getContainer = createGetObject(
+    (_, props) => props.sr.$container
+  )
+
+  return (state, props) => ({
+    container: getContainer(state, props)
+  })
+})(({ sr, container }) => {
+  let label = `${sr.name_label || sr.id}`
+
+  if (isSrWritable(sr)) {
+    label += ` (${formatSize(sr.size - sr.physical_usage)} free)`
+  }
+
+  return (
+    <span>
+      <Icon icon='sr' /> {label}
+    </span>
+  )
+}))
+
+// VM.
+export const VmItem = propTypes({
+  vm: propTypes.object.isRequired
+})(connectStore(() => {
+  const getContainer = createGetObject(
+    (_, props) => props.vm.$container
+  )
+
+  return (state, props) => ({
+    container: getContainer(state, props)
+  })
+})(({ vm, container }) => (
+  <span>
+    <Icon icon={`vm-${vm.power_state.toLowerCase()}`} /> {vm.name_label || vm.id}
+    {container && ` (${container.name_label || container.id})`}
+  </span>
+)))
+
+// ===================================================================
+
+const xoItemToRender = {
+  // Subscription objects.
+  group: group => (
+    <span>
+      <Icon icon='group' /> {group.name}
+    </span>
+  ),
+  remote: remote => (
+    <span>
+      <Icon icon='remote' /> {remote.value.name}
+    </span>
+  ),
+  role: role => (
+    <span>
+      {role.name}
+    </span>
+  ),
+  user: user => (
+    <span>
+      <Icon icon='user' /> {user.email}
+    </span>
+  ),
+  resourceSet: resourceSet => (
+    <span>
+      <Icon icon='resource-set' /> {resourceSet.name}
+    </span>
+  ),
+  sshKey: key => (
+    <span>
+      <Icon icon='ssh-key' /> {key.label}
+    </span>
+  ),
+
+  // XO objects.
+  pool: pool => (
+    <span>
+      <Icon icon='pool' /> {pool.name_label || pool.id}
+    </span>
+  ),
+
+  VDI: vdi => (
+    <span>
+      <Icon icon='disk' /> {vdi.name_label} {vdi.name_description && <span> ({vdi.name_description})</span>}
+    </span>
+  ),
+
+  // Pool objects.
+  'VM-template': vmTemplate => <PoolObjectItem object={vmTemplate} />,
+  host: host => <PoolObjectItem object={host} />,
+  network: network => <PoolObjectItem object={network} />,
+
+  // SR.
+  SR: sr => <SrItem sr={sr} />,
+
+  // VM.
+  VM: vm => <VmItem vm={vm} />,
+  'VM-snapshot': vm => <VmItem vm={vm} />,
+  'VM-controller': vm => (
+    <span>
+      <Icon icon='host' />
+      {' '}
+      <VmItem vm={vm} />
+    </span>
+  ),
+
+  // PIF.
+  PIF: pif => (
+    <span>
+      <Icon icon='network' /> {pif.device}
+    </span>
+  ),
+
+  // Tags.
+  tag: tag => (
+    <span>
+      <Icon icon='tag' /> {tag.value}
+    </span>
+  )
+}
+
+const renderXoItem = (item, {
+  className
+} = {}) => {
+  const { id, type, label } = item
+
+  if (!type && label) {
+    return (
+      <span key={id} className={className}>
+        {label}
+      </span>
+    )
+  }
+
+  const Component = xoItemToRender[type]
+
+  if (process.env.NODE_ENV !== 'production' && !Component) {
+    throw new Error(`no available component for type ${type}`)
+  }
+
+  if (Component) {
+    return (
+      <span key={id} className={className}>
+        <Component {...item} />
+      </span>
+    )
+  }
+}
+
+export { renderXoItem as default }
+
+const GenericXoItem = connectStore(() => {
+  const getObject = createGetObject()
+
+  return (state, props) => ({
+    xoItem: getObject(state, props)
+  })
+})(({ xoItem, ...props }) => xoItem
+  ? renderXoItem(xoItem, props)
+  : <span className='text-muted'>no such item</span>
+)
+
+export const renderXoItemFromId = (id, props) => <GenericXoItem {...props} id={id} />
--- a/src/common/scheduling.js
+++ b/src/common/scheduling.js
@@ -0,0 +1,485 @@
+import includes from 'lodash/includes'
+import join from 'lodash/join'
+import later from 'later'
+import map from 'lodash/map'
+import React from 'react'
+import sortedIndex from 'lodash/sortedIndex'
+import { FormattedTime } from 'react-intl'
+import {
+  Tab,
+  Tabs
+} from 'react-bootstrap-4/lib'
+
+import _ from './intl'
+import Component from './base-component'
+import propTypes from './prop-types'
+import TimezonePicker from './timezone-picker'
+import { Card, CardHeader, CardBlock } from './card'
+import { Col, Row } from './grid'
+import { Range } from './form'
+
+// ===================================================================
+
+// By default later use UTC but we use this line for futures versions.
+later.date.UTC()
+
+// ===================================================================
+
+const NAV_EACH_SELECTED = 1
+const NAV_EVERY_N = 2
+
+const MIN_PREVIEWS = 5
+const MAX_PREVIEWS = 20
+
+const MONTHS = [
+  [ 0, 1, 2, 3, 4, 5 ],
+  [ 6, 7, 8, 9, 10, 11 ]
+]
+
+const DAYS = (() => {
+  const days = []
+
+  for (let i = 0; i < 4; i++) {
+    days[i] = []
+
+    for (let j = 1; j < 8; j++) {
+      days[i].push(7 * i + j)
+    }
+  }
+
+  days.push([29, 30, 31])
+
+  return days
+})()
+
+const WEEK_DAYS = [[ 0, 1, 2, 3, 4, 5, 6 ]]
+
+const HOURS = (() => {
+  const hours = []
+
+  for (let i = 0; i < 3; i++) {
+    hours[i] = []
+
+    for (let j = 0; j < 8; j++) {
+      hours[i].push(8 * i + j)
+    }
+  }
+
+  return hours
+})()
+
+const MINS = (() => {
+  const minutes = []
+
+  for (let i = 0; i < 6; i++) {
+    minutes[i] = []
+
+    for (let j = 0; j < 10; j++) {
+      minutes[i].push(10 * i + j)
+    }
+  }
+
+  return minutes
+})()
+
+const PICKTIME_TO_ID = {
+  minute: 0,
+  hour: 1,
+  monthDay: 2,
+  month: 3,
+  weekDay: 4
+}
+
+const TIME_FORMAT = {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+
+  // The timezone is not significant for displaying the date previews
+  // as long as it is the same used to generate the next occurrences
+  // from the cron patterns.
+
+  // Therefore we can use UTC everywhere and say to the user that the
+  // previews are in the configured timezone.
+  timeZone: 'UTC'
+}
+
+// ===================================================================
+
+// monthNum: [ 0 : 11 ]
+const getMonthName = (monthNum) =>
+  <FormattedTime value={new Date(1970, monthNum)} month='long' />
+
+// dayNum: [ 0 : 6 ]
+const getDayName = (dayNum) =>
+  // January, 1970, 5th => Monday
+  <FormattedTime value={new Date(1970, 0, 4 + dayNum)} weekday='long' />
+
+// ===================================================================
+
+@propTypes({
+  cronPattern: propTypes.string.isRequired
+})
+export class SchedulePreview extends Component {
+  _handleChange = value => {
+    this.setState({
+      value
+    })
+  }
+
+  render () {
+    const { cronPattern } = this.props
+    const cronSched = later.parse.cron(cronPattern)
+    const dates = later.schedule(cronSched).next(this.state.value || MIN_PREVIEWS)
+
+    return (
+      <div>
+        <div className='alert alert-info' role='alert'>
+          {_('cronPattern')} <strong>{cronPattern}</strong>
+        </div>
+        <div className='form-inline p-b-1'>
+          <Range min={MIN_PREVIEWS} max={MAX_PREVIEWS} onChange={this._handleChange} />
+        </div>
+        <ul className='list-group'>
+          {map(dates, (date, id) => (
+            <li className='list-group-item' key={id}>
+              <FormattedTime value={date} {...TIME_FORMAT} />
+            </li>
+          ))}
+          <li className='list-group-item'>...</li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  children: propTypes.any.isRequired,
+  onChange: propTypes.func.isRequired,
+  tdId: propTypes.number.isRequired,
+  value: propTypes.bool.isRequired
+})
+class ToggleTd extends Component {
+  _onClick = () => {
+    const { props } = this
+    props.onChange(props.tdId, !props.value)
+  }
+
+  render () {
+    const { props } = this
+    return (
+      <td style={{ cursor: 'pointer' }} className={props.value ? 'table-success' : ''} onClick={this._onClick}>
+        {props.children}
+      </td>
+    )
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  options: propTypes.array.isRequired,
+  optionsRenderer: propTypes.func,
+  onChange: propTypes.func.isRequired,
+  value: propTypes.array.isRequired
+})
+class TableSelect extends Component {
+  static defaultProps = {
+    optionsRenderer: value => value
+  }
+
+  _reset = () => {
+    this.props.onChange([])
+  }
+
+  _handleChange = (tdId, tdValue) => {
+    const { props } = this
+
+    const newValue = props.value.slice()
+    const index = sortedIndex(newValue, tdId)
+
+    if (tdValue) {
+      // Add
+      if (newValue[index] !== tdId) {
+        newValue.splice(index, 0, tdId)
+      }
+    } else {
+      // Remove
+      if (newValue[index] === tdId) {
+        newValue.splice(index, 1)
+      }
+    }
+
+    props.onChange(newValue)
+  }
+
+  render () {
+    const {
+      options,
+      optionsRenderer,
+      value
+    } = this.props
+    const { length } = options[0]
+
+    return (
+      <div>
+        <table className='table table-bordered table-sm'>
+          <tbody>
+            {map(options, (line, i) => (
+              <tr key={i}>
+                {map(line, (tdOption, j) => {
+                  const tdId = length * i + j
+                  return (
+                    <ToggleTd
+                      children={optionsRenderer(tdOption)}
+                      tdId={tdId}
+                      key={tdId}
+                      onChange={this._handleChange}
+                      value={includes(value, tdId)}
+                    />
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <button className='btn btn-secondary pull-xs-right' onClick={this._reset}>
+          {_('selectTableReset')}
+        </button>
+      </div>
+    )
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  optionsRenderer: propTypes.func,
+  onChange: propTypes.func.isRequired,
+  range: propTypes.array,
+  labelId: propTypes.string.isRequired,
+  value: propTypes.any.isRequired,
+  valueRenderer: propTypes.func
+})
+class TimePicker extends Component {
+  static defaultProps = {
+    valueRenderer: e => +e
+  }
+
+  constructor () {
+    super()
+    this.state = {
+      activeKey: NAV_EACH_SELECTED,
+      tableValue: []
+    }
+  }
+
+  _update (props) {
+    const { value, valueRenderer } = props
+
+    if (value.indexOf('/') === 1) {
+      this.setState({
+        activeKey: NAV_EVERY_N
+      }, () => { this.refs.range.value = value.split('/')[1] })
+    } else {
+      this.setState({
+        activeKey: NAV_EACH_SELECTED,
+        tableValue: value === '*'
+          ? []
+          : map(value.split(','), valueRenderer)
+      })
+    }
+  }
+
+  componentWillMount () {
+    this._update(this.props)
+  }
+
+  componentWillReceiveProps (props) {
+    this._update(props)
+  }
+
+  _selectTab = activeKey => {
+    this.setState({
+      activeKey
+    }, () => {
+      const { activeKey, tableValue } = this.state
+      const { onChange } = this.props
+      const { refs } = this
+
+      if (activeKey === NAV_EACH_SELECTED) {
+        onChange(tableValue)
+      } else {
+        onChange(refs.range.value)
+      }
+    })
+  }
+
+  _handleTableValue = tableValue => {
+    this.setState({
+      tableValue
+    }, () => this.props.onChange(tableValue))
+  }
+
+  render () {
+    const {
+      onChange,
+      options,
+      optionsRenderer,
+      range,
+      labelId
+    } = this.props
+    const { tableValue } = this.state
+
+    const tableSelect = (
+      <TableSelect
+        onChange={this._handleTableValue}
+        options={options}
+        optionsRenderer={optionsRenderer}
+        value={tableValue}
+      />
+    )
+
+    return (
+      <Card>
+        <CardHeader>
+          {_(`scheduling${labelId}`)}
+        </CardHeader>
+        <CardBlock>
+          {range
+            ? (
+            <Tabs bsStyle='tabs' activeKey={this.state.activeKey} onSelect={this._selectTab}>
+              <Tab tabClassName='nav-item' eventKey={NAV_EACH_SELECTED} title={_(`schedulingEachSelected${labelId}`)}>
+                {tableSelect}
+              </Tab>
+              <Tab tabClassName='nav-item' eventKey={NAV_EVERY_N} title={_(`schedulingEveryN${labelId}`)}>
+                <Range ref='range' min={range[0]} max={range[1]} onChange={onChange} />
+              </Tab>
+            </Tabs>
+            ) : tableSelect
+          }
+        </CardBlock>
+      </Card>
+    )
+  }
+}
+
+// ===================================================================
+
+const HOURS_RANGE = [2, 12]
+const MINUTES_RANGE = [2, 30]
+
+const decrement = e => e - 1
+
+@propTypes({
+  cronPattern: propTypes.string.isRequired,
+  onChange: propTypes.func,
+  timezone: propTypes.string
+})
+export default class Scheduler extends Component {
+  _update (type, value) {
+    if (Array.isArray(value)) {
+      if (!value.length) {
+        value = '*'
+      } else {
+        value = join(
+          (type === 'monthDay' || type === 'month')
+            ? map(value, n => n + 1)
+            : value,
+          ','
+        )
+      }
+    } else {
+      value = `*/${value}`
+    }
+
+    const { props } = this
+    const cronPattern = props.cronPattern.split(' ')
+    cronPattern[PICKTIME_TO_ID[type]] = value
+
+    this.props.onChange({
+      cronPattern: cronPattern.join(' '),
+      timezone: props.timezone
+    })
+  }
+
+  _onHourChange = value => this._update('hour', value)
+  _onMinuteChange = value => this._update('minute', value)
+  _onMonthChange = value => this._update('month', value)
+  _onMonthDayChange = value => this._update('monthDay', value)
+  _onWeekDayChange = value => this._update('weekDay', value)
+
+  _onTimezoneChange = timezone => {
+    const { props } = this
+    props.onChange({
+      cronPattern: props.cronPattern,
+      timezone
+    })
+  }
+
+  render () {
+    const {
+      cronPattern,
+      timezone
+    } = this.props
+    const cronPatternArr = cronPattern.split(' ')
+
+    return (
+      <div className='card-block'>
+        <Row>
+          <Col mediumSize={6}>
+            <TimePicker
+              labelId='Month'
+              optionsRenderer={getMonthName}
+              options={MONTHS}
+              onChange={this._onMonthChange}
+              value={cronPatternArr[PICKTIME_TO_ID['month']]}
+              valueRenderer={decrement}
+            />
+            <TimePicker
+              labelId='MonthDay'
+              options={DAYS}
+              onChange={this._onMonthDayChange}
+              value={cronPatternArr[PICKTIME_TO_ID['monthDay']]}
+              valueRenderer={decrement}
+            />
+            <TimePicker
+              labelId='WeekDay'
+              optionsRenderer={getDayName}
+              options={WEEK_DAYS}
+              onChange={this._onWeekDayChange}
+              value={cronPatternArr[PICKTIME_TO_ID['weekDay']]}
+            />
+          </Col>
+          <Col mediumSize={6}>
+            <TimePicker
+              labelId='Hour'
+              options={HOURS}
+              range={HOURS_RANGE}
+              onChange={this._onHourChange}
+              value={cronPatternArr[PICKTIME_TO_ID['hour']]}
+            />
+            <TimePicker
+              labelId='Minute'
+              options={MINS}
+              range={MINUTES_RANGE}
+              onChange={this._onMinuteChange}
+              value={cronPatternArr[PICKTIME_TO_ID['minute']]}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <hr />
+            <TimezonePicker value={timezone} onChange={this._onTimezoneChange} />
+          </Col>
+        </Row>
+      </div>
+    )
+  }
+}
--- a/src/common/select-objects.js
+++ b/src/common/select-objects.js
@@ -0,0 +1,804 @@
+import React from 'react'
+import assign from 'lodash/assign'
+import classNames from 'classnames'
+import filter from 'lodash/filter'
+import flatten from 'lodash/flatten'
+import forEach from 'lodash/forEach'
+import groupBy from 'lodash/groupBy'
+import keyBy from 'lodash/keyBy'
+import keys from 'lodash/keys'
+import map from 'lodash/map'
+import sortBy from 'lodash/sortBy'
+import store from 'store'
+import { parse as parseRemote } from 'xo-remote-parser'
+
+import _ from './intl'
+import Component from './base-component'
+import propTypes from './prop-types'
+import renderXoItem from './render-xo-item'
+import { Select } from './form'
+import {
+  createFilter,
+  createGetObjectsOfType,
+  createGetTags,
+  createSelector,
+  getObject
+} from './selectors'
+import {
+  connectStore,
+  mapPlus,
+  resolveResourceSets
+} from './utils'
+import {
+  isSrWritable,
+  subscribeCurrentUser,
+  subscribeGroups,
+  subscribeRemotes,
+  subscribeResourceSets,
+  subscribeRoles,
+  subscribeUsers
+} from './xo'
+
+// ===================================================================
+
+const getLabel = object =>
+  object.name_label ||
+  object.name ||
+  object.email ||
+  (object.value && object.value.name) ||
+  object.value ||
+  object.label
+
+// ===================================================================
+
+@propTypes({
+  autoFocus: propTypes.bool,
+  clearable: propTypes.bool,
+  defaultValue: propTypes.any,
+  disabled: propTypes.bool,
+  multi: propTypes.bool,
+  onChange: propTypes.func,
+  placeholder: propTypes.any.isRequired,
+  predicate: propTypes.func,
+  required: propTypes.bool,
+  value: propTypes.any,
+  xoContainers: propTypes.array,
+  xoObjects: propTypes.oneOfType([
+    propTypes.array,
+    propTypes.objectOf(propTypes.array)
+  ]).isRequired
+})
+export class GenericSelect extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      value: this._setValue(props.value || props.defaultValue, props)
+    }
+  }
+
+  _getValue (xoObjectsById = this.state.xoObjectsById, props = this.props) {
+    const { value } = this.state
+
+    if (props.multi) {
+      // Returns the values of the selected objects
+      // if they are contained in xoObjectsById.
+      return mapPlus(value, (value, push) => {
+        const o = xoObjectsById[value.value !== undefined ? value.value : value]
+
+        if (o) {
+          push(o)
+        }
+      })
+    }
+
+    return xoObjectsById[value.value || value] || ''
+  }
+
+  // Supports id strings and objects.
+  _setValue (value, props = this.props) {
+    if (props.multi) {
+      return map(value, object => object.id !== undefined ? object.id : object)
+    }
+
+    return (value != null)
+      ? value.id !== undefined ? value.id : value
+      : ''
+  }
+
+  componentWillMount () {
+    const { props } = this
+
+    this.setState({
+      ...this._computeOptions(props)
+    })
+  }
+
+  componentWillReceiveProps (newProps) {
+    const { props } = this
+    const { value, xoContainers, xoObjects } = newProps
+
+    if (
+      xoContainers !== props.xoContainers ||
+      xoObjects !== props.xoObjects
+    ) {
+      const {
+        options,
+        xoObjectsById
+      } = this._computeOptions(newProps)
+
+      const value = this._getValue(xoObjectsById, newProps)
+
+      this.setState({
+        options,
+        value: this._setValue(value, newProps),
+        xoObjectsById
+      })
+    }
+
+    if (value !== props.value) {
+      this.setState({
+        value: this._setValue(value, newProps)
+      })
+    }
+  }
+
+  _computeOptions ({ xoContainers, xoObjects }) {
+    if (!xoContainers) {
+      if (process.env.NODE_ENV !== 'production') {
+        if (!Array.isArray(xoObjects)) {
+          throw new Error('without xoContainers, xoObjects must be an array')
+        }
+      }
+
+      return {
+        xoObjectsById: keyBy(xoObjects, 'id'),
+        options: map(xoObjects, object => ({
+          label: getLabel(object),
+          value: object.id,
+          xoItem: object
+        }))
+      }
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (Array.isArray(xoObjects)) {
+        throw new Error('with xoContainers, xoObjects must be an object')
+      }
+    }
+
+    const options = []
+    const xoObjectsById = {}
+
+    forEach(xoContainers, container => {
+      const containerObjects = keyBy(xoObjects[container.id], 'id')
+      assign(xoObjectsById, containerObjects)
+
+      options.push({
+        disabled: true,
+        xoItem: container
+      })
+
+      options.push.apply(options, map(containerObjects, object => ({
+        label: `${getLabel(object)} ${getLabel(container)}`,
+        value: object.id,
+        xoItem: object
+      })))
+    })
+
+    return { xoObjectsById, options }
+  }
+
+  get value () {
+    return this._getValue()
+  }
+
+  set value (value) {
+    this.setState({
+      value: this._setValue(value)
+    })
+  }
+
+  _handleChange = value => {
+    const { onChange } = this.props
+
+    this.setState({
+      value: this._setValue(value)
+    }, onChange && (() => onChange(this.value)))
+  }
+
+  // GroupBy: Display option with margin if not disabled and containers exists.
+  _renderOption = option => (
+    <span
+      className={classNames(
+        !option.disabled && this.props.xoContainers && 'm-l-1'
+      )}
+    >
+      {renderXoItem(option.xoItem)}
+    </span>
+  )
+
+  render () {
+    const { props, state } = this
+
+    return (
+      <Select
+        autofocus={props.autoFocus}
+        clearable={props.clearable}
+        disabled={props.disabled}
+        multi={props.multi}
+        onChange={this._handleChange}
+        openOnFocus
+        optionRenderer={this._renderOption}
+        options={state.options}
+        placeholder={props.placeholder}
+        required={props.required}
+        value={state.value}
+        valueRenderer={this._renderOption}
+      />
+    )
+  }
+}
+
+const makeStoreSelect = (createSelectors, props) => connectStore(
+  createSelectors,
+  { withRef: true }
+)(
+  class extends Component {
+    get value () {
+      return this.refs.select.value
+    }
+
+    set value (value) {
+      this.refs.select.value = value
+    }
+
+    render () {
+      return (
+        <GenericSelect
+          ref='select'
+          {...props}
+          {...this.props}
+        />
+      )
+    }
+  }
+)
+
+const makeSubscriptionSelect = (subscribe, props) => (
+  class extends Component {
+    constructor (props) {
+      super(props)
+      this.state = {
+        xoObjects: []
+      }
+
+      this._getFilteredXoObjects = createFilter(
+        () => this.state.xoObjects,
+        () => this.props.predicate
+      )
+    }
+
+    get value () {
+      return this.refs.select.value
+    }
+
+    set value (value) {
+      this.refs.select.value = value
+    }
+
+    componentWillMount () {
+      this.componentWillUnmount = subscribe(::this.setState)
+    }
+
+    render () {
+      return (
+        <GenericSelect
+          ref='select'
+          {...props}
+          {...this.props}
+          xoObjects={this._getFilteredXoObjects()}
+          xoContainers={this.state.xoContainers}
+        />
+      )
+    }
+  }
+)
+
+// ===================================================================
+// XO objects.
+// ===================================================================
+
+const getPredicate = (state, props) => props.predicate
+
+// ===================================================================
+
+export const SelectHost = makeStoreSelect(() => {
+  const getHostsByPool = createGetObjectsOfType('host').filter(
+    getPredicate
+  ).sort()
+
+  return {
+    xoObjects: getHostsByPool
+  }
+}, { placeholder: _('selectHosts') })
+
+// ===================================================================
+
+export const SelectPool = makeStoreSelect(() => ({
+  xoObjects: createGetObjectsOfType('pool').filter(getPredicate).sort()
+}), { placeholder: _('selectPools') })
+
+// ===================================================================
+
+export const SelectSr = makeStoreSelect(() => {
+  const getSrsByContainer = createGetObjectsOfType('SR').filter(
+    (_, { predicate }) => predicate || isSrWritable
+  ).sort().groupBy('$container')
+
+  const getContainerIds = createSelector(
+    getSrsByContainer,
+    srsByContainer => keys(srsByContainer)
+  )
+
+  const getPools = createGetObjectsOfType('pool').pick(getContainerIds).sort()
+  const getHosts = createGetObjectsOfType('host').pick(getContainerIds).sort()
+
+  const getContainers = createSelector(
+    getPools,
+    getHosts,
+    (pools, hosts) => pools.concat(hosts)
+  )
+
+  return {
+    xoObjects: getSrsByContainer,
+    xoContainers: getContainers
+  }
+}, { placeholder: _('selectSrs') })
+
+// ===================================================================
+
+export const SelectVm = makeStoreSelect(() => {
+  const getVmsByContainer = createGetObjectsOfType('VM').filter(
+    getPredicate
+  ).sort().groupBy('$container')
+
+  const getContainerIds = createSelector(
+    getVmsByContainer,
+    vmsByContainer => keys(vmsByContainer)
+  )
+
+  const getPools = createGetObjectsOfType('pool').pick(getContainerIds).sort()
+  const getHosts = createGetObjectsOfType('host').pick(getContainerIds).sort()
+
+  const getContainers = createSelector(
+    getPools,
+    getHosts,
+    (pools, hosts) => pools.concat(hosts)
+  )
+
+  return {
+    xoObjects: getVmsByContainer,
+    xoContainers: getContainers
+  }
+}, { placeholder: _('selectVms') })
+
+// ===================================================================
+
+export const SelectHostVm = makeStoreSelect(() => {
+  const getHosts = createGetObjectsOfType('host').filter(
+    getPredicate
+  ).sort()
+  const getVms = createGetObjectsOfType('VM').filter(
+    getPredicate
+  ).sort()
+
+  const getObjects = createSelector(
+    getHosts,
+    getVms,
+    (hosts, vms) => hosts.concat(vms)
+  )
+
+  return {
+    xoObjects: getObjects
+  }
+}, { placeholder: _('selectHostsVms') })
+
+// ===================================================================
+
+export const SelectVmTemplate = makeStoreSelect(() => {
+  const getVmTemplatesByPool = createGetObjectsOfType('VM-template').filter(
+    getPredicate
+  ).sort().groupBy('$container')
+  const getPools = createGetObjectsOfType('pool').pick(
+    createSelector(
+      getVmTemplatesByPool,
+      vmTemplatesByPool => keys(vmTemplatesByPool)
+    )
+  ).sort()
+
+  return {
+    xoObjects: getVmTemplatesByPool,
+    xoContainers: getPools
+  }
+}, { placeholder: _('selectVms') })
+
+// ===================================================================
+
+export const SelectNetwork = makeStoreSelect(() => {
+  const getNetworksByPool = createGetObjectsOfType('network').filter(
+    getPredicate
+  ).sort().groupBy('$pool')
+  const getPools = createGetObjectsOfType('pool').pick(
+    createSelector(
+      getNetworksByPool,
+      networksByPool => keys(networksByPool)
+    )
+  ).sort()
+
+  return {
+    xoObjects: getNetworksByPool,
+    xoContainers: getPools
+  }
+}, { placeholder: _('selectNetworks') })
+
+// ===================================================================
+
+export const SelectPif = makeStoreSelect(() => {
+  const getPifsByHost = createGetObjectsOfType('PIF').filter(
+    getPredicate
+  ).sort().groupBy('$host')
+  const getHosts = createGetObjectsOfType('host').pick(
+    createSelector(
+      getPifsByHost,
+      networksByPool => keys(networksByPool)
+    )
+  ).sort()
+
+  return {
+    xoObjects: getPifsByHost,
+    xoContainers: getHosts
+  }
+}, { placeholder: _('selectPifs') })
+
+// ===================================================================
+
+export const SelectTag = makeStoreSelect((_, props) => ({
+  xoObjects: createSelector(
+    createGetTags(
+      'objects' in props
+        ? (_, props) => props.objects
+        : undefined
+    ).filter(getPredicate).sort(),
+    tags => map(tags, tag => ({ id: tag, type: 'tag', value: tag }))
+  )
+}), { placeholder: _('selectTags') })
+
+export const SelectHighLevelObject = makeStoreSelect(() => {
+  const getHosts = createGetObjectsOfType('host')
+  const getNetworks = createGetObjectsOfType('network')
+  const getPools = createGetObjectsOfType('pool')
+  const getSrs = createGetObjectsOfType('SR')
+  const getVms = createGetObjectsOfType('VM')
+
+  const getHighLevelObjects = createSelector(
+    getHosts,
+    getNetworks,
+    getPools,
+    getSrs,
+    getVms,
+    (hosts, networks, pools, srs, vms) => sortBy(assign({}, hosts, networks, pools, srs, vms), ['type', 'name_label'])
+  )
+
+  return {xoObjects: getHighLevelObjects}
+}, { placeholder: _('selectObjects') })
+
+// ===================================================================
+
+export const SelectVdi = propTypes({
+  srPredicate: propTypes.func
+})(makeStoreSelect(() => {
+  const getSrs = createGetObjectsOfType('SR').filter((_, props) => props.srPredicate)
+  const getVdis = createGetObjectsOfType('VDI').filter(createSelector(
+    getSrs,
+    getPredicate,
+    (srs, predicate) => predicate ? vdi => srs[vdi.$SR] && predicate(vdi) : vdi => srs[vdi.$SR]
+  )).sort().groupBy('$SR')
+
+  return {
+    xoObjects: getVdis,
+    xoContainers: getSrs.sort()
+  }
+}, { placeholder: _('selectVdis') }))
+
+// ===================================================================
+// Objects from subscriptions.
+// ===================================================================
+
+export const SelectSubject = makeSubscriptionSelect(subscriber => {
+  let subjects = {}
+
+  let usersLoaded, groupsLoaded
+  const set = newSubjects => {
+    subjects = newSubjects
+    /* We must wait for groups AND users options to be loaded,
+     * or a previously setted value belonging to one type or another might be discarded
+     * by the internal <GenericSelect>
+     */
+    if (usersLoaded && groupsLoaded) {
+      subscriber({
+        xoObjects: subjects
+      })
+    }
+  }
+
+  const unsubscribeGroups = subscribeGroups(groups => {
+    groupsLoaded = true
+    set([
+      ...filter(subjects, subject => subject.type === 'user'),
+      ...groups
+    ])
+  })
+
+  const unsubscribeUsers = subscribeUsers(users => {
+    usersLoaded = true
+    set([
+      ...filter(subjects, subject => subject.type === 'group'),
+      ...users
+    ])
+  })
+
+  return () => {
+    unsubscribeGroups()
+    unsubscribeUsers()
+  }
+}, { placeholder: _('selectSubjects') })
+
+// ===================================================================
+
+export const SelectRole = makeSubscriptionSelect(subscriber => {
+  const unsubscribeRoles = subscribeRoles(roles => {
+    const xoObjects = map(sortBy(roles, 'name'), role => ({...role, type: 'role'}))
+    subscriber({xoObjects})
+  })
+  return unsubscribeRoles
+}, { placeholder: _('selectRole') })
+
+// ===================================================================
+
+export const SelectRemote = makeSubscriptionSelect(subscriber => {
+  const unsubscribeRemotes = subscribeRemotes(remotes => {
+    const xoObjects = groupBy(
+      map(sortBy(remotes, 'name'), remote => {
+        remote = {...remote, ...parseRemote(remote.url)}
+        return { id: remote.id, type: 'remote', value: remote }
+      }),
+      remote => remote.value.type
+    )
+
+    subscriber({
+      xoObjects,
+      xoContainers: map(xoObjects, (remote, type) => ({
+        id: type,
+        label: type
+      }))
+    })
+  })
+
+  return unsubscribeRemotes
+}, { placeholder: _('selectRemotes') })
+
+// ===================================================================
+
+export const SelectResourceSet = makeSubscriptionSelect(subscriber => {
+  const unsubscribeResourceSets = subscribeResourceSets(resourceSets => {
+    const xoObjects = map(sortBy(resolveResourceSets(resourceSets), 'name'), resourceSet => ({...resourceSet, type: 'resourceSet'}))
+
+    subscriber({xoObjects})
+  })
+
+  return unsubscribeResourceSets
+}, { placeholder: _('selectResourceSets') })
+
+// ===================================================================
+
+export class SelectResourceSetsVmTemplate extends Component {
+  get value () {
+    return this.refs.select.value
+  }
+
+  set value (value) {
+    this.refs.select.value = value
+  }
+
+  componentWillMount () {
+    this.componentWillUnmount = subscribeResourceSets(resourceSets => {
+      this.setState({
+        resourceSets: resolveResourceSets(resourceSets)
+      })
+    })
+  }
+
+  _getTemplates = createSelector(
+    () => this.props.resourceSet,
+    ({ objectsByType }) => {
+      const { predicate } = this.props
+      const templates = objectsByType['VM-template']
+      return sortBy(predicate ? filter(templates, predicate) : templates, 'name_label')
+    }
+  )
+
+  render () {
+    return (
+      <GenericSelect
+        ref='select'
+        placeholder={_('selectResourceSetsVmTemplate')}
+        {...this.props}
+        xoObjects={this._getTemplates()}
+      />
+    )
+  }
+}
+
+// ===================================================================
+
+export class SelectResourceSetsSr extends Component {
+  get value () {
+    return this.refs.select.value
+  }
+
+  set value (value) {
+    this.refs.select.value = value
+  }
+
+  componentWillMount () {
+    this.componentWillUnmount = subscribeResourceSets(resourceSets => {
+      this.setState({
+        resourceSets: resolveResourceSets(resourceSets)
+      })
+    })
+  }
+
+  _getSrs = createSelector(
+    () => this.props.resourceSet,
+    ({ objectsByType }) => {
+      const { predicate } = this.props
+      const srs = objectsByType['SR']
+      return sortBy(predicate ? filter(srs, predicate) : srs, 'name_label')
+    }
+  )
+
+  render () {
+    return (
+      <GenericSelect
+        ref='select'
+        placeholder={_('selectResourceSetsSr')}
+        {...this.props}
+        xoObjects={this._getSrs()}
+      />
+    )
+  }
+}
+
+// ===================================================================
+
+export class SelectResourceSetsVdi extends Component {
+  get value () {
+    return this.refs.select.value
+  }
+
+  set value (value) {
+    this.refs.select.value = value
+  }
+
+  componentWillMount () {
+    this.componentWillUnmount = subscribeResourceSets(resourceSets => {
+      this.setState({
+        resourceSets: resolveResourceSets(resourceSets)
+      })
+    })
+  }
+
+  _getObject (id) {
+    return getObject(store.getState(), id, true)
+  }
+
+  _getSrs = createSelector(
+    () => this.props.resourceSet,
+    ({ objectsByType }) => {
+      const { srPredicate } = this.props
+      const srs = objectsByType['SR']
+      return srPredicate ? filter(srs, srPredicate) : srs
+    }
+  )
+
+  _getVdis = createSelector(
+    this._getSrs,
+    srs => sortBy(map(flatten(map(srs, sr => sr.VDIs)), this._getObject), 'name_label')
+  )
+
+  render () {
+    return (
+      <GenericSelect
+        ref='select'
+        placeholder={_('selectResourceSetsVdi')}
+        {...this.props}
+        xoObjects={this._getVdis()}
+      />
+    )
+  }
+}
+
+// ===================================================================
+
+export class SelectResourceSetsNetwork extends Component {
+  get value () {
+    return this.refs.select.value
+  }
+
+  set value (value) {
+    this.refs.select.value = value
+  }
+
+  componentWillMount () {
+    this.componentWillUnmount = subscribeResourceSets(resourceSets => {
+      this.setState({
+        resourceSets: resolveResourceSets(resourceSets)
+      })
+    })
+  }
+
+  _getNetworks = createSelector(
+    () => this.props.resourceSet,
+    ({ objectsByType }) => {
+      const { predicate } = this.props
+      const networks = objectsByType['network']
+      return sortBy(predicate ? filter(networks, predicate) : networks, 'name_label')
+    }
+  )
+
+  render () {
+    return (
+      <GenericSelect
+        ref='select'
+        placeholder={_('selectResourceSetsNetwork')}
+        {...this.props}
+        xoObjects={this._getNetworks()}
+      />
+    )
+  }
+}
+
+// ===================================================================
+
+export class SelectSshKey extends Component {
+  get value () {
+    return this.refs.select.value
+  }
+
+  set value (value) {
+    this.refs.select.value = value
+  }
+
+  componentWillMount () {
+    this.componentWillUnmount = subscribeCurrentUser(user => {
+      this.setState({
+        sshKeys: user && user.preferences && map(user.preferences.sshKeys, (key, id) => ({
+          id,
+          label: key.title,
+          type: 'sshKey'
+        }))
+      })
+    })
+  }
+
+  render () {
+    return (
+      <GenericSelect
+        ref='select'
+        placeholder={_('selectSshKey')}
+        {...this.props}
+        xoObjects={this.state.sshKeys || []}
+      />
+    )
+  }
+}
--- a/src/common/selectors.js
+++ b/src/common/selectors.js
@@ -0,0 +1,438 @@
+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 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 invoke from './invoke'
+import shallowEqual from './shallow-equal'
+import { EMPTY_ARRAY, EMPTY_OBJECT } from './utils'
+
+// ===================================================================
+
+export {
+  // That's usually the name we want to import.
+  createSelector,
+
+  // But selectors.create is nice too :)
+  createSelector as create
+} from 'reselect'
+
+// -------------------------------------------------------------------
+
+// Wraps a function which returns a collection to returns the previous
+// result if the collection has not really changed (ie still has the
+// same items).
+//
+// Use case: in connect, to avoid rerendering a component where the
+// objects are still the same.
+const _createCollectionWrapper = selector => {
+  let cache
+
+  return (...args) => {
+    const value = selector(...args)
+    if (!shallowEqual(value, cache)) {
+      cache = value
+    }
+    return cache
+  }
+}
+export { _createCollectionWrapper as createCollectionWrapper }
+
+const _SELECTOR_PLACEHOLDER = Symbol('selector placeholder')
+
+// Experimental!
+//
+// Similar to reselect's createSelector() but inputs can be either
+// selectors or plain values.
+//
+// To pass a function as a plain value, simply wrap it with an array.
+const _create2 = (...inputs) => {
+  const resultFn = inputs.pop()
+
+  if (inputs.length === 1 && isArray(inputs[0])) {
+    inputs = inputs[0]
+  }
+
+  const n = inputs.length
+
+  const inputSelectors = []
+  for (let i = 0; i < n; ++i) {
+    const input = inputs[i]
+
+    if (isFunction(input)) {
+      inputSelectors.push(input)
+      inputs[i] = _SELECTOR_PLACEHOLDER
+    } else if (isArray(input) && input.length === 1) {
+      inputs[i] = input[0]
+    }
+  }
+
+  if (!inputSelectors.length) {
+    throw new Error('no input selectors')
+  }
+
+  return create(inputSelectors, function () {
+    const args = new Array(n)
+    for (let i = 0, j = 0; i < n; ++i) {
+      const input = inputs[i]
+      args[i] = input === _SELECTOR_PLACEHOLDER
+        ? arguments[j++]
+        : input
+    }
+
+    return resultFn.apply(this, args)
+  })
+}
+
+// ===================================================================
+// Generic selector creators.
+
+export const createCounter = (collection, predicate) =>
+  _create2(
+    collection,
+    predicate,
+    (collection, predicate) => {
+      if (!predicate) {
+        return size(collection)
+      }
+
+      let count = 0
+      forEach(collection, item => {
+        if (predicate(item)) {
+          ++count
+        }
+      })
+      return count
+    }
+  )
+
+// Creates an object selector from an object selector and a properties
+// selector.
+//
+// Should only be used with a reasonable number of properties.
+export const createPicker = (object, props) =>
+  _createCollectionWrapper(
+    _create2(
+      object, props,
+      (object, props) => {
+        const values = {}
+        forEach(props, prop => {
+          const value = object[prop]
+          if (value) {
+            values[prop] = value
+          }
+        })
+        return values
+      }
+    )
+  )
+
+// Special cases:
+// - predicate == null → no filtering
+// - predicate === false → everything is filtered out
+export const createFilter = (collection, predicate) =>
+  _createCollectionWrapper(
+    _create2(
+      collection,
+      predicate,
+      (collection, predicate) => predicate === false
+        ? (isArrayLike(collection) ? EMPTY_ARRAY : EMPTY_OBJECT)
+        : predicate
+          ? (isArrayLike(collection) ? filter : pickBy)(collection, predicate)
+          : collection
+    )
+  )
+
+export const createFinder = (collection, predicate) =>
+  _create2(
+    collection,
+    predicate,
+    find
+  )
+
+export const createGroupBy = (collection, getter) =>
+  _create2(
+    collection,
+    getter,
+    groupBy
+  )
+
+export const createPager = (array, page, n = 25) => _createCollectionWrapper(
+  _create2(
+    array,
+    page,
+    n,
+    (array, page, n) => {
+      const start = (page - 1) * n
+      return slice(array, start, start + n)
+    }
+  )
+)
+
+export const createSort = (
+  collection,
+  getter = 'name_label',
+  order = 'asc'
+) => _create2(collection, getter, order, orderBy)
+
+export const createTop = (collection, iteratee, n) =>
+  _createCollectionWrapper(
+    _create2(
+      collection,
+      iteratee,
+      n,
+      (objects, iteratee, n) => {
+        let results = orderBy(objects, iteratee, 'desc')
+        if (n < results.length) {
+          results.length = n
+        }
+        return results
+      }
+    )
+  )
+
+// ===================================================================
+// Root-ish selectors (no dependencies).
+
+export const areObjectsFetched = state => state.objects.fetched
+
+const _getId = (state, { routeParams, id }) => routeParams
+  ? routeParams.id
+  : id
+
+export const getLang = state => state.lang
+
+export const getStatus = state => state.status
+
+export const getUser = state => state.user
+
+const _getPermissionsPredicate = invoke(() => {
+  const getPredicate = create(
+    state => state.permissions,
+    state => state.objects,
+    (permissions, objects) => {
+      objects = objects.all
+      const getObject = id => (objects[id] || EMPTY_OBJECT)
+
+      return id => checkPermissions(permissions, getObject, id.id || id, 'view')
+    }
+  )
+
+  return state => {
+    const user = getUser(state)
+    if (!user) {
+      return false
+    }
+
+    if (user.permission === 'admin') {
+      return // No predicate means no filtering.
+    }
+
+    return getPredicate(state)
+  }
+})
+
+// ===================================================================
+// Common selector creators.
+
+// Creates an object selector from an id selector.
+export const createGetObject = (idSelector = _getId) =>
+  (state, props, useResourceSet) => {
+    const object = state.objects.all[idSelector(state, props)]
+    if (!object) {
+      return
+    }
+
+    if (useResourceSet) {
+      return object
+    }
+
+    const predicate = _getPermissionsPredicate(state)
+
+    if (!predicate) {
+      if (predicate == null) {
+        return object // no filtering
+      }
+
+      // predicate is false.
+      return
+    }
+
+    if (predicate(object)) {
+      return object
+    }
+  }
+
+// Specialized createSort() configured for a given type.
+export const createSortForType = invoke(() => {
+  const iterateesByType = {
+    message: message => message.time,
+    PIF: pif => pif.device,
+    pool: pool => pool.name_label,
+    pool_patch: patch => patch.name,
+    tag: tag => tag,
+    VBD: vbd => vbd.position,
+    'VDI-snapshot': snapshot => snapshot.snapshot_time,
+    'VM-snapshot': snapshot => snapshot.snapshot_time
+  }
+  const defaultIteratees = [
+    object => object.$pool,
+    object => object.name_label
+  ]
+  const getIteratees = type => iterateesByType[type] || defaultIteratees
+
+  const ordersByType = {
+    message: 'desc',
+    'VDI-snapshot': 'desc',
+    'VM-snapshot': 'desc'
+  }
+  const getOrders = type => ordersByType[type]
+
+  const autoSelector = (type, fn) => isFunction(type)
+    ? (state, props) => fn(type(state, props))
+    : [ fn(type) ]
+
+  return (type, collection) => createSort(
+    collection,
+    autoSelector(type, getIteratees),
+    autoSelector(type, getOrders),
+  )
+})
+
+// Add utility methods to a collection selector.
+const _extendCollectionSelector = (selector, objectsType) => {
+  // Terminal methods.
+  const _addCount = selector => {
+    selector.count = predicate => createCounter(selector, predicate)
+    return selector
+  }
+  _addCount(selector)
+  const _addGroupBy = selector => {
+    selector.groupBy = getter => createGroupBy(selector, getter)
+    return selector
+  }
+  _addGroupBy(selector)
+  selector.find = predicate => createFinder(selector, predicate)
+
+  // groupBy can be chained.
+  const _addSort = selector => {
+    // TODO: maybe memoize when no idsSelector.
+    selector.sort = () => _addGroupBy(createSortForType(objectsType, selector))
+    return selector
+  }
+  _addSort(selector)
+
+  // count, groupBy and sort can be chained.
+  const _addFilter = selector => {
+    selector.filter = predicate => _addCount(_addGroupBy(_addSort(
+      createFilter(selector, predicate)
+    )))
+    return selector
+  }
+  _addFilter(selector)
+
+  // filter, groupBy and sort can be chained.
+  selector.pick = idsSelector => _addFilter(_addGroupBy(_addSort(
+    createPicker(selector, idsSelector)
+  )))
+
+  return selector
+}
+
+// Creates a collection selector which returns all objects of a given
+// type.
+//
+// The selector as the following methods:
+//
+// - count: returns a selector which returns the number of objects
+// - filter: returns a selector which returns the objects filtered by
+//           a predicate (count, groupBy and sort can be chained)
+// - find: returns a selector which returns the first object matching
+//         a predicate
+// - groupBy: returns a selector which returns the objects grouped by
+//            a value determined by a getter selector
+// - pick: returns a selector which returns only the objects with given
+//         ids (filter, groupBy and sort can be chained)
+// - sort: returns a selector which returns the objects appropriately
+//         sorted (groupBy can be chained)
+export const createGetObjectsOfType = type => {
+  const getObjects = isFunction(type)
+    ? (state, props) => state.objects.byType[type(state, props)] || EMPTY_OBJECT
+    : state => state.objects.byType[type] || EMPTY_OBJECT
+
+  return _extendCollectionSelector(createFilter(
+    getObjects,
+    _getPermissionsPredicate
+  ), type)
+}
+
+export const createGetTags = collectionSelectors => {
+  if (!collectionSelectors) {
+    collectionSelectors = [
+      createGetObjectsOfType('host'),
+      createGetObjectsOfType('pool'),
+      createGetObjectsOfType('VM')
+    ]
+  }
+
+  const getTags = create(
+    collectionSelectors,
+    (...collections) => {
+      const tags = {}
+
+      const addTag = tag => { tags[tag] = null }
+      const addItemTags = item => { forEach(item.tags, addTag) }
+      const addCollectionTags = collection => { forEach(collection, addItemTags) }
+      forEach(collections, addCollectionTags)
+
+      return keys(tags)
+    }
+  )
+
+  return _extendCollectionSelector(getTags, 'tag')
+}
+
+export const createGetObjectMessages = objectSelector =>
+  createGetObjectsOfType('message').filter(
+    create(
+      (...args) => objectSelector(...args).id,
+      id => message => message.$object === id
+    )
+  ).sort()
+
+// Example of use:
+// import store from 'store'
+// const object = getObject(store.getState(), objectId)
+// ...
+export const getObject = createGetObject((_, id) => id)
+
+export const createGetHostMetrics = hostSelector => _createCollectionWrapper(
+  create(
+    hostSelector,
+    hosts => {
+      const metrics = {
+        count: 0,
+        cpus: 0,
+        memoryTotal: 0,
+        memoryUsage: 0
+      }
+      forEach(hosts, host => {
+        metrics.count++
+        metrics.cpus += host.cpus.cores
+        metrics.memoryTotal += host.memory.size
+        metrics.memoryUsage += host.memory.usage
+      })
+      return metrics
+    }
+  )
+)
--- a/src/common/shallow-equal.js
+++ b/src/common/shallow-equal.js
@@ -0,0 +1,42 @@
+// Tests that two collections (arrays or objects) have strictly equals
+// values (items or properties)
+const shallowEqual = (c1, c2) => {
+  if (c1 === c2) {
+    return true
+  }
+
+  const type = typeof c1
+  if (type !== typeof c2) {
+    return false
+  }
+
+  if (type === 'array') {
+    const { length } = c1
+    if (length !== c2.length) {
+      return false
+    }
+
+    for (let i = 0; i < length; ++i) {
+      if (c1[i] !== c2[i]) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  let n = 0
+  for (const _ in c2) { // eslint-disable-line no-unused-vars
+    ++n
+  }
+
+  for (const key in c1) {
+    if (c1[key] !== c2[key]) {
+      return false
+    }
+    --n
+  }
+
+  return !n
+}
+export { shallowEqual as default }
--- a/src/common/single-line-row.js
+++ b/src/common/single-line-row.js
@@ -0,0 +1,19 @@
+import React, { cloneElement } from 'react'
+
+import propTypes from './prop-types'
+
+const SINGLE_LINE_STYLE = { display: 'flex' }
+const COL_STYLE = { marginTop: 'auto', marginBottom: 'auto' }
+
+const SingleLineRow = propTypes({
+  className: propTypes.string
+})(({
+  children,
+  className
+}) => <div
+  className={`${className || ''} row`}
+  style={SINGLE_LINE_STYLE}
+>
+  {React.Children.map(children, child => child && cloneElement(child, { style: COL_STYLE }))}
+</div>)
+export { SingleLineRow as default }
--- a/src/common/sorted-table/index.css
+++ b/src/common/sorted-table/index.css
@@ -0,0 +1,8 @@
+.clickableColumn {
+    cursor: pointer;
+}
+
+.clickableColumn:hover {
+    color: #fff;
+    background-color: #96b8d1;
+}
--- a/src/common/sorted-table/index.js
+++ b/src/common/sorted-table/index.js
@@ -0,0 +1,349 @@
+import _ from 'intl'
+import ceil from 'lodash/ceil'
+import debounce from 'lodash/debounce'
+import isEmpty from 'lodash/isEmpty'
+import isFunction from 'lodash/isFunction'
+import map from 'lodash/map'
+import React from 'react'
+import { Dropdown, MenuItem, Pagination } from 'react-bootstrap-4/lib'
+import DropdownMenu from 'react-bootstrap-4/lib/DropdownMenu' // https://phabricator.babeljs.io/T6662 so Dropdown.Menu won't work like https://react-bootstrap.github.io/components.html#btn-dropdowns-custom
+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 Component from '../base-component'
+import Icon from '../icon'
+import propTypes from '../prop-types'
+import SingleLineRow from '../single-line-row'
+import { BlockLink } from '../link'
+import { Container, Col } from '../grid'
+import { create as createMatcher } from '../complex-matcher'
+import {
+  createCounter,
+  createFilter,
+  createPager,
+  createSelector,
+  createSort
+} from '../selectors'
+
+import styles from './index.css'
+
+// ===================================================================
+
+@propTypes({
+  filters: propTypes.object,
+  nFilteredItems: propTypes.number.isRequired,
+  nItems: propTypes.number.isRequired,
+  onChange: propTypes.func.isRequired
+})
+class TableFilter extends Component {
+  _cleanFilter = () => this._setFilter('')
+
+  _setFilter = filterValue => {
+    const { filter } = this.refs
+    filter.value = filterValue
+    filter.focus()
+    this.props.onChange(filterValue)
+  }
+
+  _onChange = event => {
+    this.props.onChange(event.target.value)
+  }
+
+  render () {
+    const { props } = this
+
+    return (
+      <div className='input-group'>
+        <span className='input-group-addon'>{props.nFilteredItems} / {props.nItems}</span>
+        {isEmpty(props.filters)
+          ? <span className='input-group-addon'><Icon icon='search' /></span>
+          : <div className='input-group-btn'>
+            <Dropdown id='filter'>
+              <DropdownToggle bsStyle='info'>
+                <Icon icon='search' />
+              </DropdownToggle>
+              <DropdownMenu>
+                {map(props.filters, (filter, label) =>
+                  <MenuItem key={label} onClick={() => this._setFilter(filter)}>
+                    {_(label)}
+                  </MenuItem>
+                )}
+              </DropdownMenu>
+            </Dropdown>
+          </div>}
+        <input
+          type='text'
+          ref='filter'
+          onChange={this._onChange}
+          className='form-control'
+        />
+        <div className='input-group-btn'>
+          <button className='btn btn-secondary' onClick={this._cleanFilter}>
+            <Icon icon='clear-search' />
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  columnId: propTypes.number.isRequired,
+  name: propTypes.any.isRequired,
+  sort: propTypes.func,
+  sortIcon: propTypes.string
+})
+class ColumnHead extends Component {
+  _sort = () => {
+    const { props } = this
+    props.sort(props.columnId)
+  }
+
+  render () {
+    const { name, sortIcon } = this.props
+
+    if (!this.props.sort) {
+      return <th>{name}</th>
+    }
+
+    let className = styles.clickableColumn
+
+    if (sortIcon === 'asc' || sortIcon === 'desc') {
+      className += ' bg-info'
+    }
+
+    return (
+      <th
+        className={className}
+        onClick={this._sort}
+      >
+        {name}
+        <span className='pull-xs-right'>
+          <Icon icon={sortIcon} />
+        </span>
+      </th>
+    )
+  }
+}
+
+// ===================================================================
+
+const DEFAULT_ITEMS_PER_PAGE = 10
+
+@propTypes({
+  defaultColumn: propTypes.number,
+  collection: propTypes.oneOfType([
+    propTypes.array,
+    propTypes.object
+  ]).isRequired,
+  columns: propTypes.arrayOf(propTypes.shape({
+    name: propTypes.node.isRequired,
+    itemRenderer: propTypes.func.isRequired,
+    sortCriteria: propTypes.oneOfType([
+      propTypes.func,
+      propTypes.string
+    ]),
+    sortOrder: propTypes.string
+  })).isRequired,
+  filterContainer: propTypes.func,
+  filters: propTypes.object,
+  itemsPerPage: propTypes.number,
+  paginationContainer: propTypes.func,
+  rowLink: propTypes.oneOfType([
+    propTypes.func,
+    propTypes.string
+  ]),
+  userData: propTypes.any
+})
+export default class SortedTable extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      selectedColumn: props.defaultColumn || 0,
+      itemsPerPage: props.itemsPerPage || DEFAULT_ITEMS_PER_PAGE
+    }
+
+    this._getSelectedColumn = () =>
+      this.props.columns[this.state.selectedColumn]
+
+    this._getTotalNumberOfItems = createCounter(
+      () => this.props.collection
+    )
+
+    this._getAllItems = createSort(
+      createFilter(
+        () => this.props.collection,
+        createSelector(
+          () => this.state.filter || '',
+          createMatcher
+        )
+      ),
+      createSelector(
+        () => this._getSelectedColumn().sortCriteria,
+        () => this.props.userData,
+        (sortCriteria, userData) =>
+          (typeof sortCriteria === 'function')
+            ? object => sortCriteria(object, userData)
+            : sortCriteria
+      ),
+      () => this.state.sortOrder
+    )
+
+    this.state.activePage = 1
+
+    this._getVisibleItems = createPager(
+      this._getAllItems,
+      () => this.state.activePage,
+      this.state.itemsPerPage
+    )
+  }
+
+  componentWillMount () {
+    this.setState({
+      sortOrder: this.props.columns[this.state.selectedColumn].sortOrder === 'desc' ? 'desc' : 'asc'
+    })
+  }
+
+  componentDidMount () {
+    // Force one Portal refresh.
+    // Because Portal cannot see the container reference at first rendering.
+    if (this.props.paginationContainer) {
+      this.forceUpdate()
+    }
+  }
+
+  _sort = columnId => {
+    const { state } = this
+    let sortOrder
+
+    if (state.selectedColumn === columnId) {
+      sortOrder = state.sortOrder === 'desc'
+        ? 'asc'
+        : 'desc'
+    } else {
+      sortOrder = this.props.columns[columnId].sortOrder === 'desc'
+        ? 'desc'
+        : 'asc'
+    }
+
+    this.setState({
+      selectedColumn: columnId,
+      sortOrder
+    })
+  }
+
+  _onPageSelection = (_, event) => this.setState({
+    activePage: event.eventKey
+  })
+
+  _onFilterChange = debounce(filter => {
+    this.setState({
+      filter,
+      activePage: 1
+    })
+  }, 500)
+
+  render () {
+    const { props, state } = this
+    const {
+      paginationContainer,
+      filterContainer,
+      filters,
+      rowLink,
+      userData
+    } = props
+
+    const nFilteredItems = this._getAllItems().length
+
+    const paginationInstance = (
+      <Pagination
+        first
+        last
+        prev
+        next
+        ellipsis
+        boundaryLinks
+        maxButtons={10}
+        items={ceil(nFilteredItems / state.itemsPerPage)}
+        activePage={this.state.activePage}
+        onSelect={this._onPageSelection}
+      />
+    )
+
+    const filterInstance = (
+      <TableFilter
+        filters={filters}
+        nFilteredItems={nFilteredItems}
+        nItems={this._getTotalNumberOfItems()}
+        onChange={this._onFilterChange}
+      />
+    )
+
+    return (
+      <div>
+        <table className='table'>
+          <thead className='thead-default'>
+            <tr>
+              {map(props.columns, (column, key) => (
+                <ColumnHead
+                  columnId={key}
+                  key={key}
+                  name={column.name}
+                  sort={column.sortCriteria && this._sort}
+                  sortIcon={state.selectedColumn === key ? state.sortOrder : 'sort'}
+               />
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {map(this._getVisibleItems(), (item, i) => {
+              const columns = map(props.columns, (column, key) => (
+                <td key={key}>
+                  {column.itemRenderer(item, userData)}
+                </td>
+              ))
+
+              const { id = i } = item
+
+              return rowLink
+                ? <BlockLink
+                  key={id}
+                  tagName='tr'
+                  to={isFunction(rowLink) ? rowLink(item, userData) : rowLink}
+                >{columns}</BlockLink>
+                : <tr key={id}>{columns}</tr>
+            })}
+          </tbody>
+        </table>
+        {(!paginationContainer || !filterContainer) && (
+          <Container>
+            <SingleLineRow>
+              <Col mediumSize={8}>
+                {paginationContainer
+                  ? (
+                  // Rebuild container function to refresh Portal component.
+                  <Portal container={() => paginationContainer()}>
+                    {paginationInstance}
+                  </Portal>
+                  ) : paginationInstance
+                }
+              </Col>
+              <Col mediumSize={4}>
+                {filterContainer
+                  ? (
+                  <Portal container={() => filterContainer()}>
+                    {filterInstance}
+                  </Portal>
+                  ) : filterInstance
+                }
+              </Col>
+            </SingleLineRow>
+          </Container>
+        )}
+      </div>
+    )
+  }
+}
--- a/src/common/store/actions.js
+++ b/src/common/store/actions.js
@@ -0,0 +1,52 @@
+import isFunction from 'lodash/isFunction'
+
+// ===================================================================
+
+const createAction = (() => {
+  const { defineProperty } = Object
+  const noop = function () {
+    if (arguments.length) {
+      throw new Error('this action expects no payload!')
+    }
+  }
+
+  return (type, payloadCreator = noop) => {
+    const createActionObject = payload => {
+      // Thunks
+      if (isFunction(payload)) {
+        return payload
+      }
+
+      return payload === undefined
+        ? { type }
+        : { type, payload }
+    }
+
+    return defineProperty(
+      (...args) => createActionObject(payloadCreator(...args)),
+      'toString',
+      { value: () => type }
+    )
+  }
+})()
+
+// ===================================================================
+
+export const selectLang = createAction('SELECT_LANG', lang => lang)
+
+// ===================================================================
+
+export const connected = createAction('CONNECTED')
+export const disconnected = createAction('DISCONNECTED')
+
+export const updateObjects = createAction('UPDATE_OBJECTS', updates => updates)
+export const updatePermissions = createAction('UPDATE_PERMISSIONS', permissions => permissions)
+
+export const signedIn = createAction('SIGNED_IN', user => user)
+export const signedOut = createAction('SIGNED_OUT')
+
+export const xoaUpdaterState = createAction('XOA_UPDATER_STATE', state => state)
+export const xoaTrialState = createAction('XOA_TRIAL_STATE', state => state)
+export const xoaUpdaterLog = createAction('XOA_UPDATER_LOG', log => log)
+export const xoaRegisterState = createAction('XOA_REGISTER_STATE', registration => registration)
+export const xoaConfiguration = createAction('XOA_CONFIGURATION', configuration => configuration)
--- a/src/common/store/dev-tools/dev.js
+++ b/src/common/store/dev-tools/dev.js
@@ -0,0 +1,13 @@
+import DockMonitor from 'redux-devtools-dock-monitor'
+import LogMonitor from 'redux-devtools-log-monitor'
+import React from 'react'
+import { createDevTools } from 'redux-devtools'
+
+export default createDevTools(
+  <DockMonitor
+    changePositionKey='ctrl-q'
+    toggleVisibilityKey='ctrl-h'
+  >
+    <LogMonitor />
+  </DockMonitor>
+)
--- a/src/common/store/dev-tools/index.js
+++ b/src/common/store/dev-tools/index.js
@@ -0,0 +1 @@
+module.exports = false // process.env.NODE_ENV !== 'production' && require('./dev-tools.dev')
--- a/src/common/store/index.js
+++ b/src/common/store/index.js
@@ -0,0 +1,32 @@
+import reduxThunk from 'redux-thunk'
+import {
+  applyMiddleware,
+  combineReducers,
+  compose,
+  createStore
+} from 'redux'
+
+import { connectStore as connectXo } from '../xo'
+
+import DevTools from './dev-tools'
+import reducer from './reducer'
+
+// ===================================================================
+
+const enhancers = [
+  applyMiddleware(reduxThunk)
+]
+DevTools && enhancers.push(DevTools.instrument())
+
+const store = createStore(
+  combineReducers(reducer),
+  compose.apply(null, enhancers)
+)
+
+connectXo(store)
+
+if (process.env.XOA_PLAN < 5) {
+  require('xoa-updater').connectStore(store)
+}
+
+export default store
--- a/src/common/store/reducer.js
+++ b/src/common/store/reducer.js
@@ -0,0 +1,152 @@
+import cookies from 'cookies-js'
+
+import invoke from '../invoke'
+
+import * as actions from './actions'
+
+// ===================================================================
+
+const createAsyncHandler = ({ error, next }) => (state, payload, action) => {
+  if (action.error) {
+    if (error) {
+      return error(state, payload, action)
+    }
+  } else {
+    if (next) {
+      return next(state, payload, action)
+    }
+  }
+
+  return state
+}
+
+// Action handlers are reducers but bound to a specific action.
+const combineActionHandlers = invoke(
+  Object.hasOwnProperty,
+  obj => {
+    for (const prop in obj) {
+      return prop
+    }
+  },
+  (has, firstProp) => (initialState, handlers) => {
+    let n = 0
+    for (const actionType in handlers) {
+      if (has.call(handlers, actionType)) {
+        if (actionType === 'undefined') {
+          throw new Error('invalid action type: undefined')
+        }
+
+        ++n
+
+        const handler = handlers[actionType]
+        if (typeof handler === 'object') {
+          handlers[actionType] = createAsyncHandler(handler)
+        }
+      }
+    }
+
+    if (!n) {
+      throw new Error('no action handlers declared')
+    }
+
+    // Optimization for this special case.
+    if (n === 1) {
+      const actionType = firstProp(handlers)
+      const handler = handlers[actionType]
+
+      return (state = initialState, action) => (
+        action.type === actionType
+          ? handler(state, action.payload, action)
+          : state
+      )
+    }
+
+    return (state = initialState, action) => {
+      const handler = handlers[action.type]
+
+      return handler
+        ? handler(state, action.payload, action)
+        : state
+    }
+  }
+)
+
+// ===================================================================
+
+export default {
+  lang: combineActionHandlers(cookies.get('lang') || 'en', {
+    [actions.selectLang]: (_, lang) => {
+      cookies.set('lang', lang)
+
+      return lang
+    }
+  }),
+
+  permissions: combineActionHandlers({}, {
+    [actions.updatePermissions]: (_, permissions) => permissions
+  }),
+
+  objects: combineActionHandlers({
+    all: {}, // Mutable for performance!
+    byType: {}
+  }, {
+    [actions.updateObjects]: ({ all, byType: prevByType }, updates) => {
+      const byType = { ...prevByType }
+      const get = type => {
+        const curr = byType[type]
+        const prev = prevByType[type]
+        return curr === prev
+          ? (byType[type] = { ...prev })
+          : curr
+      }
+
+      for (const id in updates) {
+        const object = updates[id]
+
+        if (object) {
+          all[id] = object
+          get(object.type)[id] = object
+        } else {
+          const previous = all[id]
+          if (previous) {
+            delete all[id]
+            delete get(previous.type)[id]
+          }
+        }
+      }
+
+      return { all, byType, fetched: true }
+    }
+  }),
+
+  user: combineActionHandlers(null, {
+    [actions.signedIn]: {
+      next: (_, user) => user
+    }
+  }),
+
+  status: combineActionHandlers('disconnected', {
+    [actions.connected]: () => 'connected',
+    [actions.disconnected]: () => 'disconnected'
+  }),
+
+  xoaUpdaterState: combineActionHandlers('disconnected', {
+    [actions.xoaUpdaterState]: (_, state) => state
+  }),
+  xoaTrialState: combineActionHandlers({}, {
+    [actions.xoaTrialState]: (_, state) => state
+  }),
+  xoaUpdaterLog: combineActionHandlers([], {
+    [actions.xoaUpdaterLog]: (_, log) => log
+  }),
+  xoaRegisterState: combineActionHandlers({state: '?'}, {
+    [actions.xoaRegisterState]: (_, registration) => registration
+  }),
+  xoaConfiguration: combineActionHandlers({proxyHost: '', proxyPort: '', proxyUser: ''}, { // defined values for controlled inputs
+    [actions.xoaConfiguration]: (_, configuration) => {
+      delete configuration.password
+      return configuration
+    }
+  })
+
+}
--- a/src/common/tab-button.js
+++ b/src/common/tab-button.js
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import _ from './intl'
+import ActionButton from './action-button'
+import Icon from './icon'
+import Link from './link'
+
+const STYLE = {
+  marginBottom: '1em',
+  marginLeft: '1em'
+}
+
+const TabButton = ({
+  labelId,
+  ...props
+}) => (
+  <ActionButton
+    {...props}
+    size='large'
+    style={STYLE}
+  ><span className='hidden-md-down'>{_(labelId)}</span></ActionButton>
+)
+export { TabButton as default }
+
+export const TabButtonLink = ({
+  labelId,
+  icon,
+  ...props
+}) => (
+  <Link
+    {...props}
+    className='btn btn-lg btn-primary'
+    style={STYLE}
+  >
+    <span className='hidden-md-down'>
+      {icon && (
+        <span>
+          <Icon icon={icon} />
+          {' '}
+        </span>
+      )}
+      {_(labelId)}
+    </span>
+  </Link>
+)
--- a/src/common/tags.js
+++ b/src/common/tags.js
@@ -0,0 +1,83 @@
+import React from 'react'
+import map from 'lodash/map'
+
+import Component from './base-component'
+import Icon from './icon'
+import propTypes from './prop-types'
+
+@propTypes({
+  labels: propTypes.arrayOf(React.PropTypes.string).isRequired,
+  onDelete: propTypes.func,
+  onAdd: propTypes.func
+})
+export default class Tags extends Component {
+  componentWillMount () {
+    this.setState({editing: false})
+  }
+
+  _startEdit = () => {
+    this.setState({ editing: true })
+  }
+  _stopEdit = () => {
+    this.setState({ editing: false })
+  }
+
+  render () {
+    const {
+      labels,
+      onDelete,
+      onAdd
+    } = this.props
+    return (
+      <span className='form-group' style={{ color: '#999' }}>
+        <Icon icon='tags' />
+        {' '}
+        <span>
+          {map(labels.sort(), (label, index) =>
+            <Tag label={label} onDelete={onDelete} key={index} />
+          )}
+        </span>
+        {onAdd
+          ? !this.state.editing
+            ? <span className='add-tag-action' onClick={this._startEdit} style={{cursor: 'pointer'}}>
+              <Icon icon='add-tag' />
+            </span>
+            : <span>
+              <input
+                type='text'
+                autoFocus
+                style={{maxWidth: '4em', margin: '2px'}}
+                onKeyDown={event => {
+                  const { target } = event
+
+                  if (event.keyCode === 13 && target.value) {
+                    onAdd(target.value)
+                    target.value = ''
+                  } else if (event.keyCode === 27) {
+                    this._stopEdit()
+                  }
+                }}
+                onBlur={this._stopEdit}
+              ></input>
+            </span>
+          : []
+        }
+      </span>
+    )
+  }
+}
+
+export const Tag = ({ label, onDelete }) => (
+  <span className='xo-tag'>
+    {label}{' '}
+    {onDelete
+      ? <span onClick={onDelete && (() => onDelete(label))} style={{cursor: 'pointer'}}>
+        <Icon icon='remove-tag' />
+      </span>
+      : []
+    }
+  </span>
+)
+Tag.propTypes = {
+  label: React.PropTypes.string.isRequired
+}
--- a/src/common/timezone-picker.js
+++ b/src/common/timezone-picker.js
@@ -0,0 +1,106 @@
+import ActionButton from 'action-button'
+import map from 'lodash/map'
+import moment from 'moment-timezone'
+import React from 'react'
+
+import _ from './intl'
+import Component from './base-component'
+import propTypes from './prop-types'
+import { getXoServerTimezone } from './xo'
+import { Select } from './form'
+
+const XO_SERVER_TIMEZONE = 'xo-server'
+
+@propTypes({
+  defaultValue: propTypes.string,
+  onChange: propTypes.func.isRequired,
+  value: propTypes.string
+})
+export default class TimezonePicker extends Component {
+  constructor (props) {
+    super(props)
+    this.state.options = map(moment.tz.names(), value => ({ label: value, value }))
+  }
+
+  get value () {
+    const value = this.refs.select.value
+    return (value === XO_SERVER_TIMEZONE) ? null : value
+  }
+
+  set value (value) {
+    this.refs.select.value = value || XO_SERVER_TIMEZONE
+  }
+
+  _updateTimezone (value) {
+    this.props.onChange(value)
+  }
+  _handleChange = option => {
+    return this._updateTimezone(
+      !option || option.value === XO_SERVER_TIMEZONE
+        ? null
+        : option.value
+    )
+  }
+  _useServerTime = () => {
+    this._updateTimezone(null)
+  }
+  _useLocalTime = () => {
+    this._updateTimezone(moment.tz.guess())
+  }
+
+  componentWillMount () {
+    // Use local timezone (Web browser) if no default value.
+    if (this.props.value === undefined) {
+      this._useLocalTime()
+    }
+
+    getXoServerTimezone.then(serverTimezone => {
+      this.setState({
+        options: [{
+          label: _('serverTimezoneOption', {
+            value: serverTimezone
+          }),
+          value: XO_SERVER_TIMEZONE
+        }].concat(this.state.options),
+        serverTimezone
+      })
+    })
+  }
+
+  render () {
+    const { props, state } = this
+    return (
+      <div>
+        <div className='alert alert-info' role='alert'>
+          {_('timezonePickerServerValue')} <strong>{state.serverTimezone}</strong>
+        </div>
+        <Select
+          className='m-b-1'
+          defaultValue={props.defaultValue}
+          onChange={this._handleChange}
+          options={state.options}
+          placeholder={_('selectTimezone')}
+          ref='select'
+          value={props.value || XO_SERVER_TIMEZONE}
+        />
+        <div className='pull-right'>
+          <ActionButton
+            btnStyle='primary'
+            className='m-r-1'
+            handler={this._useServerTime}
+            icon='time'
+          >
+            {_('timezonePickerUseServerTime')}
+          </ActionButton>
+          <ActionButton
+            btnStyle='secondary'
+            handler={this._useLocalTime}
+            icon='time'
+          >
+            {_('timezonePickerUseLocalTime')}
+          </ActionButton>
+        </div>
+      </div>
+    )
+  }
+}
--- a/src/common/tooltip/get-position.js
+++ b/src/common/tooltip/get-position.js
@@ -0,0 +1,287 @@
+// Source: https://github.com/wwayne/react-tooltip/blob/master/src/utils/getPosition.js
+
+/**
+ * Calculate the position of tooltip
+ *
+ * @params
+ * - `e` {Event} the event of current mouse
+ * - `target` {Element} the currentTarget of the event
+ * - `node` {DOM} the react-tooltip object
+ * - `place` {String} top / right / bottom / left
+ * - `effect` {String} float / solid
+ * - `offset` {Object} the offset to default position
+ *
+ * @return {Object
+ * - `isNewState` {Bool} required
+ * - `newState` {Object}
+ * - `position` {OBject} {left: {Number}, top: {Number}}
+ */
+export default function (e, target, node, place, effect, offset) {
+  const tipWidth = node.clientWidth
+  const tipHeight = node.clientHeight
+  const {mouseX, mouseY} = getCurrentOffset(e, target, effect)
+  const defaultOffset = getDefaultPosition(effect, target.clientWidth, target.clientHeight, tipWidth, tipHeight)
+  const {extraOffsetX, extraOffsetY} = calculateOffset(offset)
+
+  const windowWidth = window.innerWidth
+  const windowHeight = window.innerHeight
+
+  const {parentTop, parentLeft} = getParent(target)
+
+  // Get the edge offset of the tooltip
+  const getTipOffsetLeft = (place) => {
+    const offsetX = defaultOffset[place].l
+    return mouseX + offsetX + extraOffsetX
+  }
+  const getTipOffsetRight = (place) => {
+    const offsetX = defaultOffset[place].r
+    return mouseX + offsetX + extraOffsetX
+  }
+  const getTipOffsetTop = (place) => {
+    const offsetY = defaultOffset[place].t
+    return mouseY + offsetY + extraOffsetY
+  }
+  const getTipOffsetBottom = (place) => {
+    const offsetY = defaultOffset[place].b
+    return mouseY + offsetY + extraOffsetY
+  }
+
+  // Judge if the tooltip has over the window(screen)
+  const outsideVertical = () => {
+    let result = false
+    let newPlace
+    if (getTipOffsetTop('left') < 0 &&
+      getTipOffsetBottom('left') <= windowHeight &&
+      getTipOffsetBottom('bottom') <= windowHeight) {
+      result = true
+      newPlace = 'bottom'
+    } else if (getTipOffsetBottom('left') > windowHeight &&
+      getTipOffsetTop('left') >= 0 &&
+      getTipOffsetTop('top') >= 0) {
+      result = true
+      newPlace = 'top'
+    }
+    return {result, newPlace}
+  }
+  const outsideLeft = () => {
+    let {result, newPlace} = outsideVertical() // Deal with vertical as first priority
+    if (result && outsideHorizontal().result) {
+      return {result: false} // No need to change, if change to vertical will out of space
+    }
+    if (!result && getTipOffsetLeft('left') < 0 && getTipOffsetRight('right') <= windowWidth) {
+      result = true // If vertical ok, but let out of side and right won't out of side
+      newPlace = 'right'
+    }
+    return {result, newPlace}
+  }
+  const outsideRight = () => {
+    let {result, newPlace} = outsideVertical()
+    if (result && outsideHorizontal().result) {
+      return {result: false} // No need to change, if change to vertical will out of space
+    }
+    if (!result && getTipOffsetRight('right') > windowWidth && getTipOffsetLeft('left') >= 0) {
+      result = true
+      newPlace = 'left'
+    }
+    return {result, newPlace}
+  }
+
+  const outsideHorizontal = () => {
+    let result = false
+    let newPlace
+    if (getTipOffsetLeft('top') < 0 &&
+      getTipOffsetRight('top') <= windowWidth &&
+      getTipOffsetRight('right') <= windowWidth) {
+      result = true
+      newPlace = 'right'
+    } else if (getTipOffsetRight('top') > windowWidth &&
+      getTipOffsetLeft('top') >= 0 &&
+      getTipOffsetLeft('left') >= 0) {
+      result = true
+      newPlace = 'left'
+    }
+    return {result, newPlace}
+  }
+  const outsideTop = () => {
+    let {result, newPlace} = outsideHorizontal()
+    if (result && outsideVertical().result) {
+      return {result: false}
+    }
+    if (!result && getTipOffsetTop('top') < 0 && getTipOffsetBottom('bottom') <= windowHeight) {
+      result = true
+      newPlace = 'bottom'
+    }
+    return {result, newPlace}
+  }
+  const outsideBottom = () => {
+    let {result, newPlace} = outsideHorizontal()
+    if (result && outsideVertical().result) {
+      return {result: false}
+    }
+    if (!result && getTipOffsetBottom('bottom') > windowHeight && getTipOffsetTop('top') >= 0) {
+      result = true
+      newPlace = 'top'
+    }
+    return {result, newPlace}
+  }
+
+  // Return new state to change the placement to the reverse if possible
+  const outsideLeftResult = outsideLeft()
+  const outsideRightResult = outsideRight()
+  const outsideTopResult = outsideTop()
+  const outsideBottomResult = outsideBottom()
+
+  if (place === 'left' && outsideLeftResult.result) {
+    return {
+      isNewState: true,
+      newState: {place: outsideLeftResult.newPlace}
+    }
+  } else if (place === 'right' && outsideRightResult.result) {
+    return {
+      isNewState: true,
+      newState: {place: outsideRightResult.newPlace}
+    }
+  } else if (place === 'top' && outsideTopResult.result) {
+    return {
+      isNewState: true,
+      newState: {place: outsideTopResult.newPlace}
+    }
+  } else if (place === 'bottom' && outsideBottomResult.result) {
+    return {
+      isNewState: true,
+      newState: {place: outsideBottomResult.newPlace}
+    }
+  }
+
+  // Return tooltip offset position
+  return {
+    isNewState: false,
+    position: {
+      left: getTipOffsetLeft(place) - parentLeft,
+      top: getTipOffsetTop(place) - parentTop
+    }
+  }
+}
+
+// Get current mouse offset
+const getCurrentOffset = (e, currentTarget, effect) => {
+  const boundingClientRect = currentTarget.getBoundingClientRect()
+  const targetTop = boundingClientRect.top
+  const targetLeft = boundingClientRect.left
+  const targetWidth = currentTarget.clientWidth
+  const targetHeight = currentTarget.clientHeight
+
+  if (effect === 'float') {
+    return {
+      mouseX: e.clientX,
+      mouseY: e.clientY
+    }
+  }
+  return {
+    mouseX: targetLeft + (targetWidth / 2),
+    mouseY: targetTop + (targetHeight / 2)
+  }
+}
+
+// List all possibility of tooltip final offset
+// This is useful in judging if it is necessary for tooltip to switch position when out of window
+const getDefaultPosition = (effect, targetWidth, targetHeight, tipWidth, tipHeight) => {
+  let top
+  let right
+  let bottom
+  let left
+  const disToMouse = 3
+  const triangleHeight = 2
+  const cursorHeight = 12 // Optimize for float bottom only, cause the cursor will hide the tooltip
+
+  if (effect === 'float') {
+    top = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: -(tipHeight + disToMouse + triangleHeight),
+      b: -disToMouse
+    }
+    bottom = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: disToMouse + cursorHeight,
+      b: tipHeight + disToMouse + triangleHeight + cursorHeight
+    }
+    left = {
+      l: -(tipWidth + disToMouse + triangleHeight),
+      r: -disToMouse,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+    right = {
+      l: disToMouse,
+      r: tipWidth + disToMouse + triangleHeight,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+  } else if (effect === 'solid') {
+    top = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: -(targetHeight / 2 + tipHeight + triangleHeight),
+      b: -(targetHeight / 2)
+    }
+    bottom = {
+      l: -(tipWidth / 2),
+      r: tipWidth / 2,
+      t: targetHeight / 2,
+      b: targetHeight / 2 + tipHeight + triangleHeight
+    }
+    left = {
+      l: -(tipWidth + targetWidth / 2 + triangleHeight),
+      r: -(targetWidth / 2),
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+    right = {
+      l: targetWidth / 2,
+      r: tipWidth + targetWidth / 2 + triangleHeight,
+      t: -(tipHeight / 2),
+      b: tipHeight / 2
+    }
+  }
+
+  return {top, bottom, left, right}
+}
+
+// Consider additional offset into position calculation
+const calculateOffset = (offset) => {
+  let extraOffsetX = 0
+  let extraOffsetY = 0
+
+  if (Object.prototype.toString.apply(offset) === '[object String]') {
+    offset = JSON.parse(offset.toString().replace(/'/g, '"'))
+  }
+  for (let key in offset) {
+    if (key === 'top') {
+      extraOffsetY -= parseInt(offset[key], 10)
+    } else if (key === 'bottom') {
+      extraOffsetY += parseInt(offset[key], 10)
+    } else if (key === 'left') {
+      extraOffsetX -= parseInt(offset[key], 10)
+    } else if (key === 'right') {
+      extraOffsetX += parseInt(offset[key], 10)
+    }
+  }
+
+  return {extraOffsetX, extraOffsetY}
+}
+
+// Get the offset of the parent elements
+const getParent = (currentTarget) => {
+  let currentParent = currentTarget
+  while (currentParent) {
+    if (currentParent.style.transform.length > 0) break
+    currentParent = currentParent.parentElement
+  }
+
+  const parentTop = currentParent && currentParent.getBoundingClientRect().top || 0
+  const parentLeft = currentParent && currentParent.getBoundingClientRect().left || 0
+
+  return {parentTop, parentLeft}
+}
--- a/src/common/tooltip/index.css
+++ b/src/common/tooltip/index.css
@@ -0,0 +1,20 @@
+.tooltipEnabled {
+  background-color: #222;
+  border-radius: 3px;
+  border: 1px solid $fff;
+  color: #fff;
+  display: inline-block;
+  font-size: 13px;
+  margin-left: 0px;
+  margin-top: 0px;
+  opacity: 0.9;
+  padding: 8px 21px;
+  pointer-events: none;
+  position: fixed;
+  transition: opacity 0.3s ease-out, margin-top 0.3s ease-out, margin-left 0.3s ease-out;
+  z-index: 999;
+}
+
+.tooltipDisabled {
+  display: none;
+}
--- a/src/common/tooltip/index.js
+++ b/src/common/tooltip/index.js
@@ -0,0 +1,148 @@
+import classNames from 'classnames'
+import isString from 'lodash/isString'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import Component from '../base-component'
+import getPosition from './get-position'
+import propTypes from '../prop-types'
+
+import styles from './index.css'
+
+// ===================================================================
+
+let instance
+
+export class TooltipViewer extends Component {
+  constructor () {
+    super()
+
+    if (instance) {
+      throw new Error('Tooltip viewer is a singleton!')
+    }
+    instance = this
+    this.state.place = 'top'
+  }
+
+  render () {
+    const {
+      className,
+      content,
+      place,
+      show,
+      style
+    } = this.state
+
+    return (
+      <div
+        className={classNames(show ? styles.tooltipEnabled : styles.tooltipDisabled, className)}
+        style={{
+          marginTop: (place === 'top' && '-10px') || (place === 'bottom' && '10px'),
+          marginLeft: (place === 'left' && '-10px') || (place === 'right' && '10px'),
+          ...style
+        }}
+      >
+        {content}
+      </div>
+    )
+  }
+}
+
+// ===================================================================
+
+@propTypes({
+  children: propTypes.oneOfType([
+    propTypes.element,
+    propTypes.string
+  ]),
+  className: propTypes.string,
+  content: propTypes.node,
+  style: propTypes.object,
+  tagName: propTypes.string
+})
+export default class Tooltip extends Component {
+  componentDidMount () {
+    this._addListeners()
+  }
+
+  componentWillUnmount () {
+    this._removeListeners()
+  }
+
+  componentWillReceiveProps (props) {
+    if (props.children !== this.props.children) {
+      this._removeListeners()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.children !== this.props.children) {
+      this._addListeners()
+    }
+  }
+
+  _addListeners () {
+    const node = this._node = ReactDOM.findDOMNode(this)
+
+    node.addEventListener('mouseenter', this._showTooltip)
+    node.addEventListener('mouseleave', this._hideTooltip)
+    node.addEventListener('mousemove', this._updateTooltip)
+  }
+
+  _removeListeners () {
+    const node = this._node
+    this._hideTooltip()
+
+    if (!node) {
+      return
+    }
+
+    node.removeEventListener('mouseenter', this._showTooltip)
+    node.removeEventListener('mouseleave', this._hideTooltip)
+    node.removeEventListener('mousemove', this._updateTooltip)
+
+    this._node = null
+  }
+
+  _showTooltip = () => {
+    const { props } = this
+
+    instance.setState({
+      className: props.className,
+      content: props.content,
+      show: true,
+      style: props.style
+    })
+  }
+
+  _hideTooltip = () => {
+    instance.setState({ show: false })
+  }
+
+  _updateTooltip = event => {
+    const node = ReactDOM.findDOMNode(instance)
+    const result = getPosition(event, event.currentTarget, node, instance.state.place, 'solid', {})
+
+    if (result.isNewState) {
+      return instance.setState(result.newState, () => this._updateTooltip(event))
+    }
+
+    const { position } = result
+    node.style.left = `${position.left}px`
+    node.style.top = `${position.top}px`
+  }
+
+  render () {
+    const { children } = this.props
+
+    if (!children) {
+      return <span />
+    }
+
+    if (isString(children)) {
+      return <span>{children}</span>
+    }
+
+    return children
+  }
+}
--- a/src/common/usage/index.js
+++ b/src/common/usage/index.js
@@ -0,0 +1,52 @@
+import _ from 'intl'
+import classNames from 'classnames'
+import React, { PropTypes, cloneElement } from 'react'
+import sum from 'lodash/sum'
+
+import Tooltip from '../tooltip'
+
+const Usage = ({ total, children }) => {
+  const limit = total / 400
+  const othersValues = React.Children.map(children, child => {
+    const { value } = child.props
+    return value < limit && value
+  })
+  const othersTotal = sum(othersValues)
+  return <span className='usage'>
+    {React.Children.map(children, (child, index) =>
+      child.props.value > limit && cloneElement(child, { total })
+    )}
+    <Element
+      others
+      tooltip={_('others')}
+      total={total}
+      value={othersTotal}
+    />
+  </span>
+}
+Usage.propTypes = {
+  total: PropTypes.number.isRequired
+}
+export { Usage as default }
+
+const Element = ({ highlight, href, others, tooltip, total, value }) => (
+  <Tooltip content={tooltip}>
+    <a
+      href={href}
+      className={classNames(
+        'usage-element',
+        highlight && 'usage-element-highlight',
+        others && 'usage-element-others'
+      )}
+      style={{ width: (value / total) * 100 + '%' }}
+    />
+  </Tooltip>
+)
+Element.propTypes = {
+  highlight: PropTypes.bool,
+  href: PropTypes.string,
+  others: PropTypes.bool,
+  tooltip: PropTypes.node,
+  value: PropTypes.number.isRequired
+}
+export { Element as UsageElement }
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -0,0 +1,419 @@
+import * as actions from 'store/actions'
+import escapeRegExp from 'lodash/escapeRegExp'
+import every from 'lodash/every'
+import forEach from 'lodash/forEach'
+import humanFormat from 'human-format'
+import isArray from 'lodash/isArray'
+import isEmpty from 'lodash/isEmpty'
+import isFunction from 'lodash/isFunction'
+import isPlainObject from 'lodash/isPlainObject'
+import isString from 'lodash/isString'
+import join from 'lodash/join'
+import keys from 'lodash/keys'
+import map from 'lodash/map'
+import mapValues from 'lodash/mapValues'
+import React from 'react'
+import replace from 'lodash/replace'
+import store from 'store'
+import { connect } from 'react-redux'
+import { getObject } from 'selectors'
+
+import BaseComponent from './base-component'
+import invoke from './invoke'
+
+export const EMPTY_ARRAY = Object.freeze([ ])
+export const EMPTY_OBJECT = Object.freeze({ })
+
+// ===================================================================
+
+export const ensureArray = (value) => {
+  if (value === undefined) {
+    return []
+  }
+
+  return Array.isArray(value) ? value : [ value ]
+}
+
+export const propsEqual = (o1, o2, props) => {
+  props = ensureArray(props)
+
+  for (const prop of props) {
+    if (o1[prop] !== o2[prop]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+// ===================================================================
+
+export const addSubscriptions = subscriptions => Component => {
+  class SubscriptionWrapper extends BaseComponent {
+    constructor () {
+      super()
+
+      this._unsubscribes = null
+    }
+
+    componentWillMount () {
+      this._unsubscribes = map(subscriptions, (subscribe, prop) =>
+        subscribe(value => this.setState({ [prop]: value }))
+      )
+    }
+
+    componentWillUnmount () {
+      forEach(this._unsubscribes, unsubscribe => unsubscribe())
+      this._unsubscribes = null
+    }
+
+    render () {
+      return <Component
+        {...this.props}
+        {...this.state}
+      />
+    }
+  }
+
+  return SubscriptionWrapper
+}
+
+// -------------------------------------------------------------------
+
+export const checkPropsState = (propsNames, stateNames) => Component => {
+  const nProps = propsNames && propsNames.length
+  const nState = stateNames && stateNames.length
+
+  Component.prototype.shouldComponentUpdate = (newProps, newState) => {
+    const { props, state } = this
+
+    for (let i = 0; i < nProps; ++i) {
+      const name = propsNames[i]
+      if (newProps[name] !== props[name]) {
+        return true
+      }
+    }
+
+    for (let i = 0; i < nState; ++i) {
+      const name = stateNames[i]
+      if (newState[name] !== state[name]) {
+        return true
+      }
+    }
+  }
+
+  return Component
+}
+
+// -------------------------------------------------------------------
+
+const _normalizeMapStateToProps = mapper => {
+  if (isFunction(mapper)) {
+    let factoryOrMapper = (state, props) => {
+      const result = mapper(state, props)
+
+      // Properly handles factory pattern.
+      if (isFunction(result)) {
+        mapper = result
+        return factoryOrMapper
+      }
+
+      if (isPlainObject(result)) {
+        if (isEmpty(result)) {
+          // Nothing can be determined, wait for it.
+          return result
+        }
+
+        if (every(result, isFunction)) {
+          indirection = (state, props) => mapValues(result, selector => selector(state, props))
+          return indirection(state, props)
+        }
+      }
+
+      indirection = mapper
+      return result
+    }
+
+    let indirection = factoryOrMapper
+    return (state, props) => indirection(state, props)
+  }
+
+  mapper = mapValues(mapper, _normalizeMapStateToProps)
+  return (state, props) => mapValues(mapper, fn => fn(state, props))
+}
+
+export const connectStore = (mapStateToProps, opts = {}) => {
+  const connector = connect(
+    _normalizeMapStateToProps(mapStateToProps),
+    actions,
+    undefined,
+    opts
+  )
+
+  return Component => {
+    const ConnectedComponent = connector(Component)
+
+    if (opts.withRef && 'value' in Component.prototype) {
+      Object.defineProperty(ConnectedComponent.prototype, 'value', {
+        configurable: true,
+        get () {
+          return this.getWrappedInstance().value
+        },
+        set (value) {
+          this.getWrappedInstance().value = value
+        }
+      })
+    }
+
+    return ConnectedComponent
+  }
+}
+
+// -------------------------------------------------------------------
+
+export { default as Debug } from './debug'
+
+// -------------------------------------------------------------------
+
+// Returns the first defined (non-null, non-undefined) value.
+export const firstDefined = function () {
+  const n = arguments.length
+  for (let i = 0; i < n; ++i) {
+    const arg = arguments[i]
+    if (arg != null) {
+      return arg
+    }
+  }
+}
+// -------------------------------------------------------------------
+
+// Returns the current XOA Plan or the Plan name if number given
+export const getXoaPlan = plan => {
+  switch (plan || +process.env.XOA_PLAN) {
+    case 1:
+      return 'Free'
+    case 2:
+      return 'Starter'
+    case 3:
+      return 'Enterprise'
+    case 4:
+      return 'Premium'
+    case 5:
+      return 'Community'
+  }
+  return 'Unknown'
+}
+
+// -------------------------------------------------------------------
+
+export const mapPlus = (collection, cb) => {
+  const result = []
+  const push = ::result.push
+  forEach(collection, value => cb(value, push))
+  return result
+}
+
+// -------------------------------------------------------------------
+
+export const noop = () => {}
+
+// -------------------------------------------------------------------
+
+export const osFamily = invoke({
+  centos: [ 'centos' ],
+  debian: [ 'debian' ],
+  fedora: [ 'fedora' ],
+  freebsd: [ 'freebsd' ],
+  gentoo: [ 'gentoo' ],
+  linux: [ 'coreos' ],
+  'linux-mint': [ 'linux-mint' ],
+  netbsd: [ 'netbsd' ],
+  oracle: [ 'oracle' ],
+  osx: [ 'osx' ],
+  redhat: [ 'redhat', 'rhel' ],
+  solaris: [ 'solaris' ],
+  suse: [ 'sles', 'suse' ],
+  ubuntu: [ 'ubuntu' ],
+  windows: [ 'windows' ]
+}, osByFamily => {
+  const osToFamily = Object.create(null)
+  forEach(osByFamily, (list, family) => {
+    forEach(list, os => {
+      osToFamily[os] = family
+    })
+  })
+
+  return osName => osName && osToFamily[osName.toLowerCase()]
+})
+
+// -------------------------------------------------------------------
+
+export const formatSize = bytes => humanFormat(bytes, { scale: 'binary', unit: 'B' })
+
+export const formatSizeRaw = bytes => humanFormat.raw(bytes, { scale: 'binary', unit: 'B' })
+
+export const parseSize = size => {
+  let bytes = humanFormat.parse.raw(size, { scale: 'binary' })
+  if (bytes.unit && bytes.unit !== 'B') {
+    bytes = humanFormat.parse.raw(size)
+
+    if (bytes.unit && bytes.unit !== 'B') {
+      throw new Error('invalid size: ' + size)
+    }
+  }
+  return Math.floor(bytes.value * bytes.factor)
+}
+
+// -------------------------------------------------------------------
+
+export const normalizeXenToolsStatus = status => {
+  if (status === false) {
+    return 'not-installed'
+  }
+  if (status === undefined) {
+    return 'unknown'
+  }
+  if (status === 'up to date') {
+    return 'up-to-date'
+  }
+  return 'out-of-date'
+}
+
+// -------------------------------------------------------------------
+
+const _NotFound = () => <h1>Page not found</h1>
+
+// Decorator to declare routes on a component.
+//
+// TODO: add support for function childRoutes (getChildRoutes).
+export const routes = (indexRoute, childRoutes) => target => {
+  if (isArray(indexRoute)) {
+    childRoutes = indexRoute
+    indexRoute = undefined
+  } else if (isFunction(indexRoute)) {
+    indexRoute = {
+      component: indexRoute
+    }
+  } else if (isString(indexRoute)) {
+    indexRoute = {
+      onEnter: invoke(indexRoute, pathname => (state, replace) => {
+        const current = state.location.pathname
+        replace((current === '/' ? '' : current) + '/' + pathname)
+      })
+    }
+  }
+
+  if (isPlainObject(childRoutes)) {
+    childRoutes = map(childRoutes, (component, path) => {
+      // The logic can be bypassed by passing a plain object.
+      if (isPlainObject(component)) {
+        return { ...component, path }
+      }
+
+      return { ...component.route, component, path }
+    })
+  }
+
+  if (childRoutes) {
+    childRoutes.push({ component: _NotFound, path: '*' })
+  }
+
+  target.route = {
+    indexRoute,
+    childRoutes
+  }
+
+  return target
+}
+
+// -------------------------------------------------------------------
+
+// Creates a new function which throws an error.
+//
+// ```js
+// promise.catch(throwFn('an error has occured'))
+//
+// function foo (param = throwFn('param is required')) {}
+// ```
+export const throwFn = error => () => {
+  throw (
+    isString(error)
+      ? new Error(error)
+      : 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 resolveResourceSets = resourceSets => (
+  map(resourceSets, resourceSet => {
+    const { objects, ...attrs } = resourceSet
+    const resolvedObjects = {}
+    const resolvedSet = {
+      ...attrs,
+      missingObjects: [],
+      objectsByType: resolvedObjects
+    }
+    const state = store.getState()
+
+    forEach(objects, id => {
+      const object = getObject(state, id, true) // true: useResourceSet to bypass permissions
+
+      // Error, missing resource.
+      if (!object) {
+        resolvedSet.missingObjects.push(id)
+        return
+      }
+
+      const { type } = object
+
+      if (!resolvedObjects[type]) {
+        resolvedObjects[type] = [ object ]
+      } else {
+        resolvedObjects[type].push(object)
+      }
+    })
+
+    return resolvedSet
+  })
+)
+
+// -------------------------------------------------------------------
+
+// Creates a string replacer based on a pattern and a list of rules
+//
+// ```js
+// const myReplacer = buildTemplate('{name}_COPY_{name}_{id}_%', {
+//   '{name}': vm => vm.name_label,
+//   '{id}': vm => vm.id,
+//   '%': (_, i) => i
+// })
+//
+// const newString = myReplacer({
+//   name_label: 'foo',
+//   id: 42,
+// }, 32)
+//
+// newString === 'foo_COPY_foo_42_32'
+// ```
+export function buildTemplate (pattern, rules) {
+  const regExp = new RegExp(join(map(keys(rules), escapeRegExp), '|'), 'g')
+  return (...params) => replace(pattern, regExp, match => {
+    const rule = rules[match]
+    return isFunction(rule) ? rule(...params) : rule
+  })
+}
--- a/src/common/wizard/index.css
+++ b/src/common/wizard/index.css
@@ -0,0 +1,64 @@
+/* Wizard */
+@value done: #089944;
+
+.wizard {
+  margin: 1em;
+}
+
+/* Section */
+
+.section {
+  padding-bottom: 1em;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.title {
+  flex: 0 0 15em;
+}
+.title.success {
+  color: done;
+}
+
+.content {
+  border: solid 2px;
+  flex: 1 1 40em;
+  min-width: 15em;
+  padding: 0.5em;
+}
+.content.success {
+  border-color: done;
+}
+.content.active {
+  box-shadow: 0 0 0 2px;
+}
+.content.success.active {
+  box-shadow: 0 0 0 2px done;
+}
+
+/* Bulleted list */
+
+.bullet {
+  position:relative;
+  margin-bottom: 0;
+}
+.bullet:after {
+  font-family: FontAwesome;
+  content: '\f111';
+  position: absolute;
+  left: -25px;
+  top: 5px;
+}
+.bullet:not(:last-child):before {
+  content: '';
+  position: absolute;
+  left: -19px;
+  border-left: 1px solid;
+  height: calc(100% - 11px);
+  width: 1px;
+  top: 22px;
+}
+.bullet.success:after {
+  content: '\f058';
+  color: done;
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<?xml version="1.0" encoding="utf-8"?><svg width='62px' height='62px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#cfcfcf" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#366e98" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="1s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="1s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
				`@@ -0,0 +1 @@`
				`module.exports = false // process.env.NODE_ENV !== 'production' && require('./dev-tools.dev')`