feat(@xen-orchestra/fs): impement null writer for performance testing

Introduced by 35f6476d0

.commitlintrc.json

@@ -0,0 +1 @@
+{ "extends": ["@commitlint/config-conventional"] }

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: Continous Integration
+on: push
+jobs:
+  CI:
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/actions/checkout
+      - uses: actions/checkout@v3
+      - name: Install packages
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y curl qemu-utils python3-vmdkstream git libxml2-utils libfuse2 nbdkit
+      - name: Cache Turbo
+        # https://github.com/actions/cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules/.cache/turbo'
+          key: ${{ runner.os }}-turbo-cache
+      - name: Setup Node environment
+        # https://github.com/actions/setup-node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'yarn'
+      - name: Install project dependencies
+        run: yarn
+      - name: Build the project
+        run: yarn build
+      - name: Lint tests
+        run: yarn test-lint
+      - name: Integration tests
+        run: sudo yarn test-integration

.github/workflows/push.yml

@@ -1,12 +0,0 @@
-name: CI
-on: push
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Build docker image
-        run: docker-compose -f docker/docker-compose.dev.yml build
-      - name: Create the container and start the tests
-        run: docker-compose -f docker/docker-compose.dev.yml up --exit-code-from xo

.husky/commit-msg

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Only check commit message if commit on master or first commit on another
+# branch to avoid bothering fix commits after reviews
+#
+# FIXME: does not properly run with git commit --amend
+if [ "$(git rev-parse --abbrev-ref HEAD)" = master ] || [ "$(git rev-list --count master..)" -eq 0 ]
+then
+  npx --no -- commitlint --edit "$1"
+fi

@vates/nbd-client/package.json

@@ -22,7 +22,7 @@
     "@vates/read-chunk": "^1.0.1",
     "@xen-orchestra/async-map": "^0.1.2",
     "promise-toolbox": "^0.21.0",
-    "xen-api": "^1.2.5"
+    "xen-api": "^1.2.7"
   },
   "devDependencies": {
     "tap": "^16.3.0",

@xen-orchestra/backups-cli/package.json

@@ -7,8 +7,8 @@
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
   "dependencies": {
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/backups": "^0.29.6",
-    "@xen-orchestra/fs": "^3.3.1",
+    "@xen-orchestra/backups": "^0.32.0",
+    "@xen-orchestra/fs": "^3.3.2",
     "filenamify": "^4.1.0",
     "getopts": "^2.2.5",
     "lodash": "^4.17.15",
@@ -27,7 +27,7 @@
   "scripts": {
     "postversion": "npm publish --access public"
   },
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "AGPL-3.0-or-later",
   "author": {
     "name": "Vates SAS",

@xen-orchestra/backups/Backup.js

@@ -3,6 +3,7 @@
 const { asyncMap, asyncMapSettled } = require('@xen-orchestra/async-map')
 const Disposable = require('promise-toolbox/Disposable')
 const ignoreErrors = require('promise-toolbox/ignoreErrors')
+const pTimeout = require('promise-toolbox/timeout')
 const { compileTemplate } = require('@xen-orchestra/template')
 const { limitConcurrency } = require('limit-concurrency-decorator')
 
@@ -11,6 +12,7 @@ const { PoolMetadataBackup } = require('./_PoolMetadataBackup.js')
 const { Task } = require('./Task.js')
 const { VmBackup } = require('./_VmBackup.js')
 const { XoMetadataBackup } = require('./_XoMetadataBackup.js')
+const createStreamThrottle = require('./_createStreamThrottle.js')
 
 const noop = Function.prototype
 
@@ -25,6 +27,7 @@ const getAdaptersByRemote = adapters => {
 const runTask = (...args) => Task.run(...args).catch(noop) // errors are handled by logs
 
 const DEFAULT_SETTINGS = {
+  getRemoteTimeout: 300e3,
   reportWhen: 'failure',
 }
 
@@ -38,6 +41,7 @@ const DEFAULT_VM_SETTINGS = {
   fullInterval: 0,
   healthCheckSr: undefined,
   healthCheckVmsWithTags: [],
+  maxExportRate: 0,
   maxMergedDeltasPerRun: Infinity,
   offlineBackup: false,
   offlineSnapshot: false,
@@ -53,6 +57,13 @@ const DEFAULT_METADATA_SETTINGS = {
   retentionXoMetadata: 0,
 }
 
+class RemoteTimeoutError extends Error {
+  constructor(remoteId) {
+    super('timeout while getting the remote ' + remoteId)
+    this.remoteId = remoteId
+  }
+}
+
 exports.Backup = class Backup {
   constructor({ config, getAdapter, getConnectedRecord, job, schedule }) {
     this._config = config
@@ -60,13 +71,6 @@ exports.Backup = class Backup {
     this._job = job
     this._schedule = schedule
 
-    this._getAdapter = Disposable.factory(function* (remoteId) {
-      return {
-        adapter: yield getAdapter(remoteId),
-        remoteId,
-      }
-    })
-
     this._getSnapshotNameLabel = compileTemplate(config.snapshotNameLabelTpl, {
       '{job.name}': job.name,
       '{vm.name_label}': vm => vm.name_label,
@@ -87,6 +91,27 @@ exports.Backup = class Backup {
 
     this._baseSettings = baseSettings
     this._settings = { ...baseSettings, ...job.settings[schedule.id] }
+
+    const { getRemoteTimeout } = this._settings
+    this._getAdapter = async function (remoteId) {
+      try {
+        const disposable = await pTimeout.call(getAdapter(remoteId), getRemoteTimeout, new RemoteTimeoutError(remoteId))
+
+        return new Disposable(() => disposable.dispose(), {
+          adapter: disposable.value,
+          remoteId,
+        })
+      } catch (error) {
+        // See https://github.com/vatesfr/xen-orchestra/commit/6aa6cfba8ec939c0288f0fa740f6dfad98c43cbb
+        runTask(
+          {
+            name: 'get remote adapter',
+            data: { type: 'remote', id: remoteId },
+          },
+          () => Promise.reject(error)
+        )
+      }
+    }
   }
 
   async _runMetadataBackup() {
@@ -132,20 +157,7 @@ exports.Backup = class Backup {
           })
         )
       ),
-      Disposable.all(
-        remoteIds.map(id =>
-          this._getAdapter(id).catch(error => {
-            // See https://github.com/vatesfr/xen-orchestra/commit/6aa6cfba8ec939c0288f0fa740f6dfad98c43cbb
-            runTask(
-              {
-                name: 'get remote adapter',
-                data: { type: 'remote', id },
-              },
-              () => Promise.reject(error)
-            )
-          })
-        )
-      ),
+      Disposable.all(remoteIds.map(id => this._getAdapter(id))),
       async (pools, remoteAdapters) => {
         // remove adapters that failed (already handled)
         remoteAdapters = remoteAdapters.filter(_ => _ !== undefined)
@@ -216,9 +228,11 @@ exports.Backup = class Backup {
     // FIXME: proper SimpleIdPattern handling
     const getSnapshotNameLabel = this._getSnapshotNameLabel
     const schedule = this._schedule
+    const settings = this._settings
+
+    const throttleStream = createStreamThrottle(settings.maxExportRate)
 
     const config = this._config
-    const settings = this._settings
     await Disposable.use(
       Disposable.all(
         extractIdsFromSimplePattern(job.srs).map(id =>
@@ -233,19 +247,7 @@ exports.Backup = class Backup {
           })
         )
       ),
-      Disposable.all(
-        extractIdsFromSimplePattern(job.remotes).map(id =>
-          this._getAdapter(id).catch(error => {
-            runTask(
-              {
-                name: 'get remote adapter',
-                data: { type: 'remote', id },
-              },
-              () => Promise.reject(error)
-            )
-          })
-        )
-      ),
+      Disposable.all(extractIdsFromSimplePattern(job.remotes).map(id => this._getAdapter(id))),
       () => (settings.healthCheckSr !== undefined ? this._getRecord('SR', settings.healthCheckSr) : undefined),
       async (srs, remoteAdapters, healthCheckSr) => {
         // remove adapters that failed (already handled)
@@ -280,6 +282,7 @@ exports.Backup = class Backup {
                 schedule,
                 settings: { ...settings, ...allSettings[vm.uuid] },
                 srs,
+                throttleStream,
                 vm,
               }).run()
             )

@xen-orchestra/backups/RemoteAdapter.js

@@ -10,7 +10,14 @@ const groupBy = require('lodash/groupBy.js')
 const pickBy = require('lodash/pickBy.js')
 const { dirname, join, normalize, resolve } = require('path')
 const { createLogger } = require('@xen-orchestra/log')
-const { createVhdDirectoryFromStream, openVhd, VhdAbstract, VhdDirectory, VhdSynthetic } = require('vhd-lib')
+const {
+  createVhdDirectoryFromStream,
+  createVhdStreamWithLength,
+  openVhd,
+  VhdAbstract,
+  VhdDirectory,
+  VhdSynthetic,
+} = require('vhd-lib')
 const { deduped } = require('@vates/disposable/deduped.js')
 const { decorateMethodsWith } = require('@vates/decorate-with')
 const { compose } = require('@vates/compose')
@@ -32,6 +39,7 @@ const { watchStreamSize } = require('./_watchStreamSize')
 // @todo : this import is marked extraneous , sould be fixed when lib is published
 const { mount } = require('@vates/fuse-vhd')
 const { asyncEach } = require('@vates/async-each')
+const { strictEqual } = require('assert')
 
 const DIR_XO_CONFIG_BACKUPS = 'xo-config-backups'
 exports.DIR_XO_CONFIG_BACKUPS = DIR_XO_CONFIG_BACKUPS
@@ -209,8 +217,8 @@ class RemoteAdapter {
 
       const isVhdDirectory = vhd instanceof VhdDirectory
       return isVhdDirectory
-        ? this.#useVhdDirectory() && this.#getCompressionType() === vhd.compressionType
-        : !this.#useVhdDirectory()
+        ? this.useVhdDirectory() && this.#getCompressionType() === vhd.compressionType
+        : !this.useVhdDirectory()
     })
   }
 
@@ -321,12 +329,12 @@ class RemoteAdapter {
     return this._vhdDirectoryCompression
   }
 
-  #useVhdDirectory() {
+  useVhdDirectory() {
     return this.handler.useVhdDirectory()
   }
 
   #useAlias() {
-    return this.#useVhdDirectory()
+    return this.useVhdDirectory()
   }
 
   async *#getDiskLegacy(diskId) {
@@ -660,7 +668,7 @@ class RemoteAdapter {
 
   async writeVhd(path, input, { checksum = true, validator = noop, writeBlockConcurrency, nbdClient } = {}) {
     const handler = this._handler
-    if (this.#useVhdDirectory()) {
+    if (this.useVhdDirectory()) {
       const dataPath = `${dirname(path)}/data/${uuidv4()}.vhd`
       const size = await createVhdDirectoryFromStream(handler, dataPath, input, {
         concurrency: writeBlockConcurrency,
@@ -674,17 +682,37 @@ class RemoteAdapter {
       await VhdAbstract.createAlias(handler, path, dataPath)
       return size
     } else {
-      return this.outputStream(path, input, { checksum, validator })
+      const inputWithSize = await createVhdStreamWithLength(input)
+      return this.outputStream(path, inputWithSize, { checksum, validator, expectedSize: inputWithSize.length })
     }
   }
 
-  async outputStream(path, input, { checksum = true, validator = noop } = {}) {
+  async outputStream(path, input, { checksum = true, validator = noop, expectedSize } = {}) {
     const container = watchStreamSize(input)
+
     await this._handler.outputStream(path, input, {
       checksum,
       dirMode: this._dirMode,
       async validator() {
         await input.task
+        if (expectedSize !== undefined) {
+          // check that we read all the stream
+          strictEqual(
+            container.size,
+            expectedSize,
+            `transferred size ${container.size}, expected file size : ${expectedSize}`
+          )
+        }
+        let size
+        try {
+          size = await this._handler.getSize(path)
+        } catch (err) {
+          // can fail is the remote is encrypted
+        }
+        if (size !== undefined) {
+          // check that everything is written to disk
+          strictEqual(size, container.size, `written size ${size}, transfered size : ${container.size}`)
+        }
         return validator.apply(this, arguments)
       },
     })

@xen-orchestra/backups/_VmBackup.js

@@ -55,6 +55,7 @@ class VmBackup {
     schedule,
     settings,
     srs,
+    throttleStream,
     vm,
   }) {
     if (vm.other_config['xo:backup:job'] === job.id && 'start' in vm.blocked_operations) {
@@ -82,6 +83,7 @@ class VmBackup {
     this._healthCheckSr = healthCheckSr
     this._jobId = job.id
     this._jobSnapshots = undefined
+    this._throttleStream = throttleStream
     this._xapi = vm.$xapi
 
     // Base VM for the export
@@ -244,6 +246,7 @@ class VmBackup {
       fullVdisRequired,
     })
     const sizeContainers = mapValues(deltaExport.streams, stream => watchStreamSize(stream))
+    deltaExport.streams = mapValues(deltaExport.streams, this._throttleStream)
 
     const timestamp = Date.now()
 
@@ -285,10 +288,12 @@ class VmBackup {
 
   async _copyFull() {
     const { compression } = this.job
-    const stream = await this._xapi.VM_export(this.exportedVm.$ref, {
-      compress: Boolean(compression) && (compression === 'native' ? 'gzip' : 'zstd'),
-      useSnapshot: false,
-    })
+    const stream = this._throttleStream(
+      await this._xapi.VM_export(this.exportedVm.$ref, {
+        compress: Boolean(compression) && (compression === 'native' ? 'gzip' : 'zstd'),
+        useSnapshot: false,
+      })
+    )
     const sizeContainer = watchStreamSize(stream)
 
     const timestamp = Date.now()

@xen-orchestra/backups/_backupWorker.js

@@ -1,8 +1,8 @@
 'use strict'
 
-require('@xen-orchestra/log/configure').catchGlobalErrors(
-  require('@xen-orchestra/log').createLogger('xo:backups:worker')
-)
+const logger = require('@xen-orchestra/log').createLogger('xo:backups:worker')
+
+require('@xen-orchestra/log/configure').catchGlobalErrors(logger)
 
 require('@vates/cached-dns.lookup').createCachedLookup().patchGlobal()
 
@@ -20,6 +20,8 @@ const { Backup } = require('./Backup.js')
 const { RemoteAdapter } = require('./RemoteAdapter.js')
 const { Task } = require('./Task.js')
 
+const { debug } = logger
+
 class BackupWorker {
   #config
   #job
@@ -122,6 +124,11 @@ decorateMethodsWith(BackupWorker, {
   ]),
 })
 
+const emitMessage = message => {
+  debug('message emitted', { message })
+  process.send(message)
+}
+
 // Received message:
 //
 // Message {
@@ -139,6 +146,8 @@ decorateMethodsWith(BackupWorker, {
 //   result?: any
 // }
 process.on('message', async message => {
+  debug('message received', { message })
+
   if (message.action === 'run') {
     const backupWorker = new BackupWorker(message.data)
     try {
@@ -147,7 +156,7 @@ process.on('message', async message => {
             {
               name: 'backup run',
               onLog: data =>
-                process.send({
+                emitMessage({
                   data,
                   type: 'log',
                 }),
@@ -156,13 +165,13 @@ process.on('message', async message => {
           )
         : await backupWorker.run()
 
-      process.send({
+      emitMessage({
         type: 'result',
         result,
         status: 'success',
       })
     } catch (error) {
-      process.send({
+      emitMessage({
         type: 'result',
         result: error,
         status: 'failure',

@xen-orchestra/backups/_cleanVm.js

@@ -541,7 +541,8 @@ exports.cleanVm = async function cleanVm(
 
         // don't warn if the size has changed after a merge
         if (!merged && fileSystemSize !== size) {
-          logWarn('incorrect backup size in metadata', {
+          // FIXME: figure out why it occurs so often and, once fixed, log the real problems with `logWarn`
+          console.warn('cleanVm: incorrect backup size in metadata', {
             path: metadataPath,
             actual: size ?? 'none',
             expected: fileSystemSize,

@xen-orchestra/backups/_createStreamThrottle.js

@@ -0,0 +1,17 @@
+'use strict'
+
+const { pipeline } = require('node:stream')
+const { ThrottleGroup } = require('@kldzj/stream-throttle')
+const identity = require('lodash/identity.js')
+
+const noop = Function.prototype
+
+module.exports = function createStreamThrottle(rate) {
+  if (rate === 0) {
+    return identity
+  }
+  const group = new ThrottleGroup({ rate })
+  return function throttleStream(stream) {
+    return pipeline(stream, group.createThrottle(), noop)
+  }
+}

@xen-orchestra/backups/_deltaVm.js

@@ -12,7 +12,7 @@ const { defer } = require('golike-defer')
 
 const { cancelableMap } = require('./_cancelableMap.js')
 const { Task } = require('./Task.js')
-const { pick } = require('lodash')
+const pick = require('lodash/pick.js')
 
 const TAG_BASE_DELTA = 'xo:base_delta'
 exports.TAG_BASE_DELTA = TAG_BASE_DELTA

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.29.6",
+  "version": "0.32.0",
   "engines": {
     "node": ">=14.6"
   },
@@ -17,6 +17,7 @@
     "test": "node--test"
   },
   "dependencies": {
+    "@kldzj/stream-throttle": "^1.1.1",
     "@vates/async-each": "^1.0.0",
     "@vates/cached-dns.lookup": "^1.0.0",
     "@vates/compose": "^2.1.0",
@@ -26,7 +27,7 @@
     "@vates/nbd-client": "^1.0.1",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/fs": "^3.3.1",
+    "@xen-orchestra/fs": "^3.3.2",
     "@xen-orchestra/log": "^0.6.0",
     "@xen-orchestra/template": "^0.1.0",
     "compare-versions": "^5.0.1",
@@ -51,7 +52,7 @@
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^1.6.1"
+    "@xen-orchestra/xapi": "^2.0.0"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

@xen-orchestra/backups/runBackupWorker.js

@@ -12,7 +12,7 @@ exports.runBackupWorker = function runBackupWorker(params, onLog) {
   return new Promise((resolve, reject) => {
     const worker = fork(PATH)
 
-    worker.on('exit', code => reject(new Error(`worker exited with code ${code}`)))
+    worker.on('exit', (code, signal) => reject(new Error(`worker exited with code ${code} and signal ${signal}`)))
     worker.on('error', reject)
 
     worker.on('message', message => {

@xen-orchestra/backups/writers/DeltaBackupWriter.js

@@ -203,7 +203,7 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
           const vdiRef = vm.$xapi.getObject(vdi.uuid).$ref
 
           let nbdClient
-          if (this._backup.config.useNbd) {
+          if (this._backup.config.useNbd && adapter.useVhdDirectory()) {
             debug('useNbd is enabled', { vdi: id, path })
             // get nbd if possible
             try {
@@ -218,7 +218,9 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
               $defer(() => nbdClient.disconnect())
 
               info('NBD client ready', { vdi: id, path })
+              Task.info('NBD used')
             } catch (error) {
+              Task.warning('NBD configured but unusable', { error })
               nbdClient = undefined
               warn('error connecting to NBD server', { error, vdi: id, path })
             }

@xen-orchestra/backups/writers/DeltaReplicationWriter.js

@@ -80,6 +80,7 @@ exports.DeltaReplicationWriter = class DeltaReplicationWriter extends MixinRepli
   }
 
   async _transfer({ timestamp, deltaExport, sizeContainers }) {
+    const { _warmMigration } = this._settings
     const sr = this._sr
     const { job, scheduleId, vm } = this._backup
 
@@ -92,7 +93,7 @@ exports.DeltaReplicationWriter = class DeltaReplicationWriter extends MixinRepli
           __proto__: deltaExport,
           vm: {
             ...deltaExport.vm,
-            tags: [...deltaExport.vm.tags, 'Continuous Replication'],
+            tags: _warmMigration ? deltaExport.vm.tags : [...deltaExport.vm.tags, 'Continuous Replication'],
           },
         },
         sr
@@ -101,11 +102,13 @@ exports.DeltaReplicationWriter = class DeltaReplicationWriter extends MixinRepli
         size: Object.values(sizeContainers).reduce((sum, { size }) => sum + size, 0),
       }
     })
-
+    this._targetVmRef = targetVmRef
     const targetVm = await xapi.getRecord('VM', targetVmRef)
 
     await Promise.all([
-      targetVm.ha_restart_priority !== '' &&
+      // warm migration does not disable HA , since the goal is to start the new VM in production
+      !_warmMigration &&
+        targetVm.ha_restart_priority !== '' &&
         Promise.all([targetVm.set_ha_restart_priority(''), targetVm.add_tags('HA disabled')]),
       targetVm.set_name_label(`${vm.name_label} - ${job.name} - (${formatFilenameDate(timestamp)})`),
       asyncMap(['start', 'start_on'], op =>

@xen-orchestra/backups/writers/FullReplicationWriter.js

@@ -46,7 +46,7 @@ exports.FullReplicationWriter = class FullReplicationWriter extends MixinReplica
     const oldVms = getOldEntries(settings.copyRetention - 1, listReplicatedVms(xapi, scheduleId, srUuid, vm.uuid))
 
     const deleteOldBackups = () => asyncMapSettled(oldVms, vm => xapi.VM_destroy(vm.$ref))
-    const { deleteFirst } = settings
+    const { deleteFirst, _warmMigration } = settings
     if (deleteFirst) {
       await deleteOldBackups()
     }
@@ -55,14 +55,18 @@ exports.FullReplicationWriter = class FullReplicationWriter extends MixinReplica
     await Task.run({ name: 'transfer' }, async () => {
       targetVmRef = await xapi.VM_import(stream, sr.$ref, vm =>
         Promise.all([
-          vm.add_tags('Disaster Recovery'),
-          vm.ha_restart_priority !== '' && Promise.all([vm.set_ha_restart_priority(''), vm.add_tags('HA disabled')]),
+          !_warmMigration && vm.add_tags('Disaster Recovery'),
+          // warm migration does not disable HA , since the goal is to start the new VM in production
+          !_warmMigration &&
+            vm.ha_restart_priority !== '' &&
+            Promise.all([vm.set_ha_restart_priority(''), vm.add_tags('HA disabled')]),
           vm.set_name_label(`${vm.name_label} - ${job.name} - (${formatFilenameDate(timestamp)})`),
         ])
       )
       return { size: sizeContainer.size }
     })
 
+    this._targetVmRef = targetVmRef
     const targetVm = await xapi.getRecord('VM', targetVmRef)
 
     await Promise.all([

@xen-orchestra/backups/writers/_MixinReplicationWriter.js

@@ -1,5 +1,17 @@
 'use strict'
 
+const { Task } = require('../Task')
+const assert = require('node:assert/strict')
+const { HealthCheckVmBackup } = require('../HealthCheckVmBackup')
+
+function extractOpaqueRef(str) {
+  const OPAQUE_REF_RE = /OpaqueRef:[0-9a-z-]+/
+  const matches = OPAQUE_REF_RE.exec(str)
+  if (!matches) {
+    throw new Error('no opaque ref found')
+  }
+  return matches[0]
+}
 exports.MixinReplicationWriter = (BaseClass = Object) =>
   class MixinReplicationWriter extends BaseClass {
     constructor({ sr, ...rest }) {
@@ -7,4 +19,32 @@ exports.MixinReplicationWriter = (BaseClass = Object) =>
 
       this._sr = sr
     }
+
+    healthCheck(sr) {
+      assert.notEqual(this._targetVmRef, undefined, 'A vm should have been transfered to be health checked')
+      // copy VM
+      return Task.run(
+        {
+          name: 'health check',
+        },
+        async () => {
+          const { $xapi: xapi } = sr
+          let clonedVm
+          try {
+            const baseVm = xapi.getObject(this._targetVmRef) ?? (await xapi.waitObject(this._targetVmRef))
+            const clonedRef = await xapi
+              .callAsync('VM.clone', this._targetVmRef, `Health Check - ${baseVm.name_label}`)
+              .then(extractOpaqueRef)
+            clonedVm = xapi.getObject(clonedRef) ?? (await xapi.waitObject(clonedRef))
+
+            await new HealthCheckVmBackup({
+              restoredVm: clonedVm,
+              xapi,
+            }).run()
+          } finally {
+            clonedVm && (await xapi.VM_destroy(clonedVm.$ref))
+          }
+        }
+      )
+    }
   }

@xen-orchestra/cr-seed-cli/package.json

@@ -18,7 +18,7 @@
   "preferGlobal": true,
   "dependencies": {
     "golike-defer": "^0.5.1",
-    "xen-api": "^1.2.5"
+    "xen-api": "^1.2.7"
   },
   "scripts": {
     "postversion": "npm publish"

@xen-orchestra/fs/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@xen-orchestra/fs",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "license": "AGPL-3.0-or-later",
   "description": "The File System for Xen Orchestra backups.",
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/fs",
@@ -20,6 +20,7 @@
     "node": ">=14.13"
   },
   "dependencies": {
+    "@aws-sdk/abort-controller": "^3.272.0",
     "@aws-sdk/client-s3": "^3.54.0",
     "@aws-sdk/lib-storage": "^3.54.0",
     "@aws-sdk/middleware-apply-body-checksum": "^3.58.0",
@@ -50,7 +51,6 @@
     "@babel/plugin-proposal-decorators": "^7.1.6",
     "@babel/plugin-proposal-function-bind": "^7.0.0",
     "@babel/preset-env": "^7.8.0",
-    "babel-plugin-lodash": "^3.3.2",
     "cross-env": "^7.0.2",
     "dotenv": "^16.0.0",
     "rimraf": "^4.1.1",

@xen-orchestra/fs/src/checksum.js

@@ -1,7 +1,7 @@
 import through2 from 'through2'
 import { createHash } from 'crypto'
 import { defer, fromEvent } from 'promise-toolbox'
-import { invert } from 'lodash'
+import invert from 'lodash/invert.js'
 
 // Format: $<algorithm>$<salt>$<encrypted>
 //

@xen-orchestra/fs/src/index.js

@@ -3,6 +3,7 @@ import { parse } from 'xo-remote-parser'
 
 import RemoteHandlerLocal from './local'
 import RemoteHandlerNfs from './nfs'
+import RemoteHandlerNull from './null'
 import RemoteHandlerS3 from './s3'
 import RemoteHandlerSmb from './smb'
 export { DEFAULT_ENCRYPTION_ALGORITHM, UNENCRYPTED_ALGORITHM, isLegacyEncryptionAlgorithm } from './_encryptor'
@@ -10,6 +11,7 @@ export { DEFAULT_ENCRYPTION_ALGORITHM, UNENCRYPTED_ALGORITHM, isLegacyEncryption
 const HANDLERS = {
   file: RemoteHandlerLocal,
   nfs: RemoteHandlerNfs,
+  null: RemoteHandlerNull,
   s3: RemoteHandlerS3,
 }
 

@xen-orchestra/fs/src/local.js

@@ -19,7 +19,12 @@ async function addSyncStackTrace(fn, ...args) {
   try {
     return await fn.apply(this, args)
   } catch (error) {
-    error.syncStack = stackContainer.stack
+    let { stack } = stackContainer
+
+    // remove first line which does not contain stack information, simply `Error`
+    stack = stack.slice(stack.indexOf('\n') + 1)
+
+    error.stack = [error.stack, 'From:', stack].join('\n')
     throw error
   }
 }

@xen-orchestra/fs/src/null.js

@@ -0,0 +1,14 @@
+import LocalHandler from './local'
+
+export default class NullHandler extends LocalHandler {
+  get type() {
+    return 'null'
+  }
+  _outputStream() {}
+  _writeFile(file, data, options) {
+    if (file.indexOf('xo-vm-backups') === -1) {
+      // metadata, remote tests
+      return super._writeFile(file, data, options)
+    }
+  }
+}

@xen-orchestra/fs/src/s3.js

@@ -9,13 +9,11 @@ import {
   ListObjectsV2Command,
   PutObjectCommand,
   S3Client,
-  UploadPartCommand,
   UploadPartCopyCommand,
 } from '@aws-sdk/client-s3'
 import { Upload } from '@aws-sdk/lib-storage'
 import { NodeHttpHandler } from '@aws-sdk/node-http-handler'
 import { getApplyMd5BodyChecksumPlugin } from '@aws-sdk/middleware-apply-body-checksum'
-import assert from 'assert'
 import { Agent as HttpAgent } from 'http'
 import { Agent as HttpsAgent } from 'https'
 import pRetry from 'promise-toolbox/retry'
@@ -24,7 +22,6 @@ import { decorateWith } from '@vates/decorate-with'
 import { PassThrough, pipeline } from 'stream'
 import { parse } from 'xo-remote-parser'
 import copyStreamToBuffer from './_copyStreamToBuffer.js'
-import createBufferFromStream from './_createBufferFromStream.js'
 import guessAwsRegion from './_guessAwsRegion.js'
 import RemoteHandlerAbstract from './abstract'
 import { basename, join, split } from './path'
@@ -33,12 +30,7 @@ import { asyncEach } from '@vates/async-each'
 // endpoints https://docs.aws.amazon.com/general/latest/gr/s3.html
 
 // limits: https://docs.aws.amazon.com/AmazonS3/latest/dev/qfacts.html
-const MIN_PART_SIZE = 1024 * 1024 * 5 // 5MB
 const MAX_PART_SIZE = 1024 * 1024 * 1024 * 5 // 5GB
-const MAX_PARTS_COUNT = 10000
-const MAX_OBJECT_SIZE = 1024 * 1024 * 1024 * 1024 * 5 // 5TB
-const IDEAL_FRAGMENT_SIZE = Math.ceil(MAX_OBJECT_SIZE / MAX_PARTS_COUNT) // the smallest fragment size that still allows a 5TB upload in 10000 fragments, about 524MB
-
 const { warn } = createLogger('xo:fs:s3')
 
 export default class S3Handler extends RemoteHandlerAbstract {
@@ -198,8 +190,6 @@ export default class S3Handler extends RemoteHandlerAbstract {
 
     const upload = new Upload({
       client: this._s3,
-      queueSize: 1,
-      partSize: IDEAL_FRAGMENT_SIZE,
       params: {
         ...this._createParams(path),
         Body,
@@ -396,138 +386,6 @@ export default class S3Handler extends RemoteHandlerAbstract {
     } while (NextContinuationToken !== undefined)
   }
 
-  async _write(file, buffer, position) {
-    if (typeof file !== 'string') {
-      file = file.fd
-    }
-    const uploadParams = this._createParams(file)
-    let fileSize
-    try {
-      fileSize = +(await this._s3.send(new HeadObjectCommand(uploadParams))).ContentLength
-    } catch (e) {
-      if (e.name === 'NotFound') {
-        fileSize = 0
-      } else {
-        throw e
-      }
-    }
-    if (fileSize < MIN_PART_SIZE) {
-      const resultBuffer = Buffer.alloc(Math.max(fileSize, position + buffer.length))
-      if (fileSize !== 0) {
-        const result = await this._s3.send(new GetObjectCommand(uploadParams))
-        await copyStreamToBuffer(result.Body, resultBuffer)
-      } else {
-        Buffer.alloc(0).copy(resultBuffer)
-      }
-      buffer.copy(resultBuffer, position)
-      await this._s3.send(
-        new PutObjectCommand({
-          ...uploadParams,
-          Body: resultBuffer,
-        })
-      )
-      return { buffer, bytesWritten: buffer.length }
-    } else {
-      // using this trick: https://stackoverflow.com/a/38089437/72637
-      // multipart fragments have a minimum size of 5Mo and a max of 5Go unless they are last
-      // splitting the file in 3 parts: [prefix, edit, suffix]
-      // if `prefix` is bigger than 5Mo, it will be sourced from uploadPartCopy()
-      // otherwise otherwise it will be downloaded, concatenated to `edit`
-      // `edit` will always be an upload part
-      // `suffix` will always be sourced from uploadPartCopy()
-      // Then everything will be sliced in 5Gb parts before getting uploaded
-      const multipartParams = await this._s3.send(new CreateMultipartUploadCommand(uploadParams))
-      const copyMultipartParams = {
-        ...multipartParams,
-        CopySource: this._makeCopySource(file),
-      }
-      try {
-        const parts = []
-        const prefixSize = position
-        let suffixOffset = prefixSize + buffer.length
-        let suffixSize = Math.max(0, fileSize - suffixOffset)
-        let hasSuffix = suffixSize > 0
-        let editBuffer = buffer
-        let editBufferOffset = position
-        let partNumber = 1
-        let prefixPosition = 0
-        // use floor() so that last fragment is handled in the if bellow
-        let fragmentsCount = Math.floor(prefixSize / MAX_PART_SIZE)
-        const prefixFragmentSize = MAX_PART_SIZE
-        let prefixLastFragmentSize = prefixSize - prefixFragmentSize * fragmentsCount
-        if (prefixLastFragmentSize >= MIN_PART_SIZE) {
-          // the last fragment of the prefix is smaller than MAX_PART_SIZE, but bigger than the minimum
-          // so we can copy it too
-          fragmentsCount++
-          prefixLastFragmentSize = 0
-        }
-        for (let i = 0; i < fragmentsCount; i++) {
-          const fragmentEnd = Math.min(prefixPosition + prefixFragmentSize, prefixSize)
-          assert.strictEqual(fragmentEnd - prefixPosition <= MAX_PART_SIZE, true)
-          const range = `bytes=${prefixPosition}-${fragmentEnd - 1}`
-          const copyPrefixParams = { ...copyMultipartParams, PartNumber: partNumber++, CopySourceRange: range }
-          const part = await this._s3.send(new UploadPartCopyCommand(copyPrefixParams))
-          parts.push({ ETag: part.CopyPartResult.ETag, PartNumber: copyPrefixParams.PartNumber })
-          prefixPosition += prefixFragmentSize
-        }
-        if (prefixLastFragmentSize) {
-          // grab everything from the prefix that was too small to be copied, download and merge to the edit buffer.
-          const downloadParams = { ...uploadParams, Range: `bytes=${prefixPosition}-${prefixSize - 1}` }
-          let prefixBuffer
-          if (prefixSize > 0) {
-            const result = await this._s3.send(new GetObjectCommand(downloadParams))
-            prefixBuffer = await createBufferFromStream(result.Body)
-          } else {
-            prefixBuffer = Buffer.alloc(0)
-          }
-          editBuffer = Buffer.concat([prefixBuffer, buffer])
-          editBufferOffset -= prefixLastFragmentSize
-        }
-        if (hasSuffix && editBuffer.length < MIN_PART_SIZE) {
-          // the edit fragment is too short and is not the last fragment
-          // let's steal from the suffix fragment to reach the minimum size
-          // the suffix might be too short and itself entirely absorbed in the edit fragment, making it the last one.
-          const complementSize = Math.min(MIN_PART_SIZE - editBuffer.length, suffixSize)
-          const complementOffset = editBufferOffset + editBuffer.length
-          suffixOffset += complementSize
-          suffixSize -= complementSize
-          hasSuffix = suffixSize > 0
-          const prefixRange = `bytes=${complementOffset}-${complementOffset + complementSize - 1}`
-          const downloadParams = { ...uploadParams, Range: prefixRange }
-          const result = await this._s3.send(new GetObjectCommand(downloadParams))
-          const complementBuffer = await createBufferFromStream(result.Body)
-          editBuffer = Buffer.concat([editBuffer, complementBuffer])
-        }
-        const editParams = { ...multipartParams, Body: editBuffer, PartNumber: partNumber++ }
-        const editPart = await this._s3.send(new UploadPartCommand(editParams))
-        parts.push({ ETag: editPart.ETag, PartNumber: editParams.PartNumber })
-        if (hasSuffix) {
-          // use ceil because the last fragment can be arbitrarily small.
-          const suffixFragments = Math.ceil(suffixSize / MAX_PART_SIZE)
-          let suffixFragmentOffset = suffixOffset
-          for (let i = 0; i < suffixFragments; i++) {
-            const fragmentEnd = suffixFragmentOffset + MAX_PART_SIZE
-            assert.strictEqual(Math.min(fileSize, fragmentEnd) - suffixFragmentOffset <= MAX_PART_SIZE, true)
-            const suffixRange = `bytes=${suffixFragmentOffset}-${Math.min(fileSize, fragmentEnd) - 1}`
-            const copySuffixParams = { ...copyMultipartParams, PartNumber: partNumber++, CopySourceRange: suffixRange }
-            const suffixPart = (await this._s3.send(new UploadPartCopyCommand(copySuffixParams))).CopyPartResult
-            parts.push({ ETag: suffixPart.ETag, PartNumber: copySuffixParams.PartNumber })
-            suffixFragmentOffset = fragmentEnd
-          }
-        }
-        await this._s3.send(
-          new CompleteMultipartUploadCommand({
-            ...multipartParams,
-            MultipartUpload: { Parts: parts },
-          })
-        )
-      } catch (e) {
-        await this._s3.send(new AbortMultipartUploadCommand(multipartParams))
-        throw e
-      }
-    }
-  }
-
   async _openFile(path, flags) {
     return path
   }

@xen-orchestra/lite/CHANGELOG.md

@@ -11,6 +11,10 @@
 - Display network throughput chart in pool dashboard (PR [#6610](https://github.com/vatesfr/xen-orchestra/pull/6610))
 - Display RAM usage chart in pool dashboard (PR [#6604](https://github.com/vatesfr/xen-orchestra/pull/6604))
 - Ability to change the state of a VM (PRs [#6571](https://github.com/vatesfr/xen-orchestra/pull/6571) [#6608](https://github.com/vatesfr/xen-orchestra/pull/6608))
+- Display CPU provisioning in pool dashboard (PR [#6601](https://github.com/vatesfr/xen-orchestra/pull/6601))
+- Add a star icon near the pool master (PR [#6712](https://github.com/vatesfr/xen-orchestra/pull/6712))
+- Display an error message if the data cannot be fetched (PR [#6525](https://github.com/vatesfr/xen-orchestra/pull/6525))
+- Add "Under Construction" views (PR [#6673](https://github.com/vatesfr/xen-orchestra/pull/6673))
 
 ## **0.1.0**
 

@xen-orchestra/lite/README.md

@@ -105,7 +105,7 @@ Use the `busy` prop to display a loader icon.
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { faDisplay } from "@fortawesome/free-solid-svg-icons";
 </script>
 ```

@xen-orchestra/lite/docs/component-stories.md

@@ -0,0 +1,406 @@
+<!-- TOC -->
+
+- [Component Stories](#component-stories)
+  - [How to create a story](#how-to-create-a-story)
+  - [How to write a story](#how-to-write-a-story)
+  _ [Example](#example)
+  _ [Props](#props)
+  _ [Required prop](#required-prop)
+  _ [Prop type](#prop-type)
+  _ [String](#string)
+  _ [Number](#number)
+  _ [Boolean](#boolean)
+  _ [Array](#array)
+  _ [Object](#object)
+  _ [Enum](#enum)
+  _ [Any](#any)
+  _ [Custom type](#custom-type)
+  _ [Prop widget](#prop-widget)
+  _ [Text](#text)
+  _ [Number](#number-1)
+  _ [Object](#object-1)
+  _ [Choice](#choice)
+  _ [Boolean](#boolean-1)
+  _ [Prop default](#prop-default)
+  _ [Prop preset](#prop-preset)
+  _ [Prop help](#prop-help)
+  _ [Events](#events)
+  _ [Event with no arguments](#event-with-no-arguments)
+  _ [Event with arguments](#event-with-arguments)
+  _ [Custom function](#custom-function)
+  _ [Event type](#event-type)
+  _ [Models](#models)
+  _ [Default model](#default-model)
+  _ [Custom model](#custom-model)
+  _ [Configure the underlying prop and event](#configure-the-underlying-prop-and-event)
+  _ [Model type](#model-type)
+  _ [Model help](#model-help)
+  _ [Slots](#slots)
+  _ [Default slot](#default-slot)
+  _ [Named slot](#named-slot)
+  _ [Scoped slot (slot with props)](#scoped-slot--slot-with-props-)
+  _ [Slot help](#slot-help)
+  _ [Settings](#settings)
+  <!-- TOC -->
+
+# Component Stories
+
+The `ComponentStory` component allows you to document your components and their props, events and slots.
+
+It takes a `params` prop which is an array of configuration items.
+
+You can configure props, events, models, slots and settings.
+
+Props, Events and Models will be added to the `properties` slot prop.
+
+Slots are only for documentation purpose.
+
+Settings will be added to the `settings` slot prop.
+
+## How to create a story
+
+1. Create a new story component in the `src/stories` directory (ie. `my-component.story.vue`).
+2. To document your component, create the same file with the `.md` extension (ie. `my-component.story.md`).
+
+## How to write a story
+
+In your `.story.vue` file, import and use the `ComponentStory` component.
+
+```vue
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop(...),
+      event(...),
+      model(...),
+      slot(...),
+      setting(...),
+    ]"
+  >
+    <MyComponent v-bind="properties">
+      {{ settings.label }}
+    </MyComponent>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import MyComponent from "@/components/MyComponent.vue";
+import ComponentStory from "@/components/component-story/ComponentStory.vue";
+import { prop, event, model, slot, setting } from "@/libs/story/story-param";
+</script>
+```
+
+### Example
+
+Let's take this Vue component:
+
+```vue
+<template>
+  <div>
+    <div>Required string prop: {{ imString }}</div>
+    <div>Required number prop: {{ imNumber }}</div>
+    <div v-if="imOptional">Optional prop: {{ imOptional }}</div>
+    <div>Optional prop with default: {{ imOptionalWithDefault }}</div>
+    <button @click="handleClick">Click me</button>
+    <button @click="handleClickWithArg('some-id')">Click me with an id</button>
+    <div>
+      <slot />
+    </div>
+    <div>
+      <slot name="named-slot" />
+    </div>
+    <div>
+      <slot :moon-distance="moonDistance" name="named-scoped-slot" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    imString: string;
+    imNumber: number;
+    imOptional?: string;
+    imOptionalWithDefault?: string;
+    modelValue?: string;
+    customModel?: number;
+  }>(),
+  { imOptionalWithDefault: "Hi World" }
+);
+
+const emit = defineEmits<{
+  (event: "click"): void;
+  (event: "clickWithArg", id: string): void;
+  (event: "update:modelValue", value: string): void;
+  (event: "update:customModel", value: number): void;
+}>();
+
+const moonDistance = 384400;
+
+const handleClick = () => emit("click");
+const handleClickWithArg = (id: string) => emit("clickWithArg", id);
+</script>
+```
+
+Here is how to document it with a Component Story:
+
+```vue
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('imString')
+        .str()
+        .required()
+        .preset('Example')
+        .widget()
+        .help('This is a required string prop'),
+      prop('imNumber')
+        .num()
+        .required()
+        .preset(42)
+        .widget()
+        .help('This is a required number prop'),
+      prop('imOptional').str().widget().help('This is an optional string prop'),
+      prop('imOptionalWithDefault')
+        .str()
+        .default('Hi World')
+        .widget()
+        .default('My default value'),
+      model().prop((p) => p.str()),
+      model('customModel').prop((p) => p.num()),
+      event('click').help('Emitted when the user clicks the first button'),
+      event('clickWithArg')
+        .args({ id: 'string' })
+        .help('Emitted when the user clicks the second button'),
+      slot().help('This is the default slot'),
+      slot('namedSlot').help('This is a named slot'),
+      slot('namedScopedSlot')
+        .prop('moon-distance', 'number')
+        .help('This is a named slot'),
+      setting('contentExample').widget(text()).preset('Some content'),
+    ]"
+  >
+    <MyComponent v-bind="properties">
+      {{ settings.contentExample }}
+      <template #named-slot>Named slot content</template>
+      <template #named-scoped-slot="{ moonDistance }">
+        Moon distance is {{ moonDistance }} meters.
+      </template>
+    </MyComponent>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from "@/components/component-story/ComponentStory.vue";
+import MyComponent from "@/components/MyComponent.vue";
+import { event, model, prop, setting, slot } from "@/libs/story/story-param";
+import { text } from "@/libs/story/story-widget";
+</script>
+```
+
+### Props
+
+Use the `prop(name: string)` function to document a prop.
+
+It will appear on the **Props** tab.
+
+#### Required prop
+
+If the prop is required, use the `required()` function.
+
+`prop('title').required()`
+
+#### Prop type
+
+You can set the type of the prop with the `str()`, `num()`, `bool()`, `arr()`, `obj()`, `enum()` and `any()` functions.
+
+The type can also be detected automatically if a [preset](#prop-preset) value is defined.
+
+##### String
+
+`prop('title').str()`: `string`
+
+##### Number
+
+`prop('count').num()`: `number`
+
+##### Boolean
+
+`prop('disabled').bool()`: `boolean`
+
+##### Array
+
+`prop('items').arr()`: `any[]`
+
+`prop('items').arr('string')`: `string[]`
+
+##### Object
+
+`prop('user').obj()`: `object`
+
+`prop('user').obj('{ name: string, age: number }')`: `{ name: string; age: number; }`
+
+##### Enum
+
+`prop('color').enum('red', 'green', 'blue')`: `"red" | "green" | "blue"`
+
+##### Any
+
+`prop('color').any()`: `any`
+
+##### Custom type
+
+`prop('user').type('User')`: `User`
+
+#### Prop widget
+
+When the prop type is defined, the widget is automatically detected.
+
+`prop('title').str().widget()`
+
+But you can also define the widget manually.
+
+##### Text
+
+`prop('...').widget(text())`
+
+##### Number
+
+`prop('...').widget(number())`
+
+##### Object
+
+`prop('...').widget(object())`
+
+##### Choice
+
+`prop('...').widget(choice('red', 'green', 'blue'))`
+
+##### Boolean
+
+`prop('title').widget(boolean())`
+
+#### Prop default
+
+This documents the default value of the prop, which is applied when the prop is not defined.
+
+`prop('color').default('blue')`
+
+#### Prop preset
+
+This allows to preset a prop value for this story.
+
+`prop('color').preset('red')`
+
+#### Prop help
+
+This allows to add a help text for this prop.
+
+`prop('color').help('This is the component text color')`
+
+### Events
+
+Use the `event(name: string)` function to document an event.
+
+It will appear in the **Events** tab.
+
+When triggered, this event will be logged to the `Logs` card.
+
+#### Event with no arguments
+
+`event('edit')`: `() => void`
+
+#### Event with arguments
+
+`event('delete').args({ id: 'string' })`: `(id: string) => void`
+
+#### Custom function
+
+If needed, thanks to the `preset` method, you can attach a custom function to your event.
+
+`const debug = (id: string) => console.log(id);`
+
+`event('my-event').args({ id: 'string' }).preset(debug)`
+
+#### Event type
+
+The event type is automatically generated from the arguments.
+
+You can override it with the `type()` method.
+
+#### Event help
+
+This allows to add a help text for this event.
+
+`event('close').help('Called when user clicks the close icon or on the background')`
+
+### Models
+
+Use the `model(name = "model-value")` function to document a model.
+
+Calling `model("foo")` is kind of equivalent to calling `prop("foo")` + `event("update:foo")`.
+
+#### Default model
+
+`model()` with no argument will create a `model-value` prop and a `update:model-value` event.
+
+#### Custom model
+
+`model('foo')` will create a `foo` prop and a `update:foo` event.
+
+#### Configure the underlying prop and event
+
+You can use `.prop((p) => ...)` and `.event((e) => ...)` methods to access the underlying prop and event respectively
+then use any of the [prop](#props) and [event](#events) methods.
+
+`model().event((e) => e.help('Help for update:modelValue event'))`
+
+#### Model type
+
+`.type(type: string)` function is a shortcut for `.prop((p) => p.type(...))`
+
+#### Model help
+
+Using `.help(text: string)` function is a shortcut for `.prop((p) => p.help(...))`
+
+### Slots
+
+Use the `slot(name = "default")` function to document a slot.
+
+#### Default slot
+
+`slot()`
+
+=> `<slot />`
+
+#### Named slot
+
+`slot('header')`
+
+=> `<slot name="header" />`
+
+#### Scoped slot (slot with props)
+
+`slot('footer').prop('color', 'string').prop('count', 'number')`
+
+#### Slot help
+
+`slot('footer').help('This is the footer slot')`
+
+### Settings
+
+Use the `setting(name: string)` to configure your Story with arbitrary settings.
+
+They will not be passed automatically to your component, but you can access them in your template with the `settings` variable.
+
+For example:
+
+```vue
+<template>
+  <ComponentStory v-slot="{ settings }" :params="[setting('label').widget()]">
+    <button>{{ settings.label }}</button>
+  </ComponentStory>
+</template>
+```

@xen-orchestra/lite/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="json-rpc-2.0/dist" />
+/// <reference types="vite-plugin-pages/client" />
 
 declare const XO_LITE_VERSION: string;
 declare const XO_LITE_GIT_HEAD: string;

@xen-orchestra/lite/package.json

@@ -55,6 +55,7 @@
     "postcss-nested": "^6.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",
+    "vite-plugin-pages": "^0.27.1",
     "vue-tsc": "^1.0.9"
   },
   "private": true,

@xen-orchestra/lite/src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <UiModal
     v-if="isSslModalOpen"
-    color="error"
     :icon="faServer"
+    color="error"
     @close="clearUnreachableHostsUrls"
   >
     <template #title>{{ $t("unreachable-hosts") }}</template>
@@ -10,25 +10,23 @@
     <p>{{ $t("allow-self-signed-ssl") }}</p>
     <ul>
       <li v-for="url in unreachableHostsUrls" :key="url.hostname">
-        <a :href="url.href" target="_blank" rel="noopener">{{ url.href }}</a>
+        <a :href="url.href" rel="noopener" target="_blank">{{ url.href }}</a>
       </li>
     </ul>
     <template #buttons>
-      <UiButton color="success" @click="reload">{{
-        $t("unreachable-hosts-reload-page")
-      }}</UiButton>
+      <UiButton color="success" @click="reload">
+        {{ $t("unreachable-hosts-reload-page") }}
+      </UiButton>
       <UiButton @click="clearUnreachableHostsUrls">{{ $t("cancel") }}</UiButton>
     </template>
   </UiModal>
-  <div v-if="!xenApiStore.isConnected">
+  <div v-if="!$route.meta.hasStoryNav && !xenApiStore.isConnected">
     <AppLogin />
   </div>
   <div v-else>
     <AppHeader />
     <div style="display: flex">
-      <transition name="slide">
-        <AppNavigation />
-      </transition>
+      <AppNavigation />
       <main class="main">
         <RouterView />
       </main>
@@ -38,27 +36,30 @@
 </template>
 
 <script lang="ts" setup>
-import AppNavigation from "@/components/AppNavigation.vue";
-import { useUiStore } from "@/stores/ui.store";
-import { useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
-import { logicAnd } from "@vueuse/math";
-import { difference } from "lodash";
-import { computed, ref, watch, watchEffect } from "vue";
 import favicon from "@/assets/favicon.svg";
-import { faServer } from "@fortawesome/free-solid-svg-icons";
 import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
+import AppNavigation from "@/components/AppNavigation.vue";
 import AppTooltips from "@/components/AppTooltips.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import UiModal from "@/components/ui/UiModal.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
 import { useHostStore } from "@/stores/host.store";
+import { useUiStore } from "@/stores/ui.store";
 import { useXenApiStore } from "@/stores/xen-api.store";
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+import { useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
+import { logicAnd } from "@vueuse/math";
+import { difference } from "lodash";
+import { computed, ref, watch, watchEffect } from "vue";
+import { useRoute } from "vue-router";
 
 const unreachableHostsUrls = ref<URL[]>([]);
 const clearUnreachableHostsUrls = () => (unreachableHostsUrls.value = []);
 
-let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']");
+let link = document.querySelector(
+  "link[rel~='icon']"
+) as HTMLLinkElement | null;
 if (link == null) {
   link = document.createElement("link");
   link.rel = "icon";
@@ -91,7 +92,13 @@ if (import.meta.env.DEV) {
   );
 }
 
+const route = useRoute();
+
 watchEffect(() => {
+  if (route.meta.hasStoryNav) {
+    return;
+  }
+
   if (xenApiStore.isConnected) {
     xenApiStore.init();
   }
@@ -117,21 +124,13 @@ const reload = () => window.location.reload();
 
 <style lang="postcss">
 @import "@/assets/base.css";
+</style>
 
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from,
-.slide-leave-to {
-  transform: translateX(-37rem);
-}
-
+<style lang="postcss" scoped>
 .main {
   overflow: auto;
   flex: 1;
-  height: calc(100vh - 9rem);
+  height: calc(100vh - 8rem);
   background-color: var(--background-color-secondary);
 }
 </style>

@xen-orchestra/lite/src/assets/base.css

@@ -16,8 +16,10 @@ a {
   color: var(--color-extra-blue-base);
 }
 
-code, code * {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+code,
+code * {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
 }
 
 .card-view {
@@ -25,3 +27,17 @@ code, code * {
   display: flex;
   gap: 2rem;
 }
+
+.link {
+  text-decoration: underline;
+  color: var(--color-extra-blue-base);
+  cursor: pointer;
+}
+
+.link:hover {
+  color: var(--color-extra-blue-d20);
+}
+
+.link:active {
+  color: var(--color-extra-blue-d40);
+}

@xen-orchestra/lite/src/assets/color-mode-auto.svg

@@ -0,0 +1,136 @@
+<svg width="200" height="200" viewBox="3 2 200 200" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_ddd_1994_118844)">
+    <g clip-path="url(#clip0_1994_118844)">
+      <g filter="url(#filter1_ddd_1994_118844)">
+        <g clip-path="url(#clip1_1994_118844)">
+          <rect x="3" y="2" width="200" height="200" rx="8" fill="#F6F6F7"/>
+          <rect width="200" height="29" transform="translate(3 2)" fill="#F6F6F7"/>
+          <rect x="13" y="13" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect width="68" height="171" transform="translate(3 31)" fill="white"/>
+          <rect x="13" y="41" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="41" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="58" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="58" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="75" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="75" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="92" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="92" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="109" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="109" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="126" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="126" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="143" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="143" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="160" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="160" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="177" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="177" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="13" y="194" width="7" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="25" y="194" width="36" height="7" rx="3" fill="#E5E5E7"/>
+          <rect x="76" y="36" width="122" height="44" rx="4" fill="white"/>
+          <rect x="86" y="46" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="46" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="86" y="63" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="63" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="76" y="90" width="122" height="44" rx="4" fill="white"/>
+          <rect x="86" y="100" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="100" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="86" y="117" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="117" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="76" y="144" width="122" height="44" rx="4" fill="white"/>
+          <rect x="86" y="154" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="154" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="86" y="171" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="171" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+          <rect x="76" y="198" width="122" height="44" rx="4" fill="white"/>
+        </g>
+      </g>
+    </g>
+    <g clip-path="url(#clip2_1994_118844)">
+      <g filter="url(#filter2_ddd_1994_118844)">
+        <g clip-path="url(#clip3_1994_118844)">
+          <rect x="3" y="2" width="200" height="200" rx="8" fill="#17182B"/>
+          <rect width="200" height="29" transform="translate(3 2)" fill="#17182B"/>
+          <rect x="76" y="36" width="122" height="44" rx="4" fill="#14141E"/>
+          <rect x="86" y="46" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="46" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="86" y="63" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="63" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="76" y="90" width="122" height="44" rx="4" fill="#14141E"/>
+          <rect x="86" y="100" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="100" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="86" y="117" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="117" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="76" y="144" width="122" height="44" rx="4" fill="#14141E"/>
+          <rect x="86" y="154" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="154" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="86" y="171" width="102" height="7" rx="3" fill="#8F84FF"/>
+          <rect x="86" y="171" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+          <rect x="76" y="198" width="122" height="44" rx="4" fill="#14141E"/>
+        </g>
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_ddd_1994_118844" x="0" y="0" width="206" height="206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.08 0"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.06 0"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1994_118844" result="shape"/>
+    </filter>
+    <filter id="filter1_ddd_1994_118844" x="0" y="0" width="206" height="206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.08 0"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.06 0"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1994_118844" result="shape"/>
+    </filter>
+    <filter id="filter2_ddd_1994_118844" x="0" y="0" width="206" height="206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1994_118844"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_1994_118844" result="effect2_dropShadow_1994_118844"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1994_118844" result="shape"/>
+    </filter>
+    <clipPath id="clip0_1994_118844">
+      <rect width="100" height="200" fill="white" transform="translate(3 2)"/>
+    </clipPath>
+    <clipPath id="clip1_1994_118844">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="white"/>
+    </clipPath>
+    <clipPath id="clip2_1994_118844">
+      <rect width="100" height="200" fill="white" transform="translate(103 2)"/>
+    </clipPath>
+    <clipPath id="clip3_1994_118844">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

@xen-orchestra/lite/src/assets/color-mode-dark.svg

@@ -0,0 +1,70 @@
+<svg width="200" height="200" viewBox="3 2 200 200" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_ddd_1994_118694)">
+    <g clip-path="url(#clip0_1994_118694)">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="#17182B"/>
+      <rect width="200" height="29" transform="translate(3 2)" fill="#17182B"/>
+      <rect x="13" y="13" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect width="68" height="171" transform="translate(3 31)" fill="#14141E"/>
+      <rect x="13" y="41" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="41" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="58" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="58" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="75" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="75" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="92" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="92" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="109" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="109" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="126" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="126" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="143" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="143" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="160" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="160" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="177" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="177" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="13" y="194" width="7" height="7" rx="3" fill="#595A6F"/>
+      <rect x="25" y="194" width="36" height="7" rx="3" fill="#595A6F"/>
+      <rect x="76" y="36" width="122" height="44" rx="4" fill="#14141E"/>
+      <rect x="86" y="46" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="46" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="86" y="63" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="63" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="76" y="90" width="122" height="44" rx="4" fill="#14141E"/>
+      <rect x="86" y="100" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="100" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="86" y="117" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="117" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="76" y="144" width="122" height="44" rx="4" fill="#14141E"/>
+      <rect x="86" y="154" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="154" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="86" y="171" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="171" width="102" height="7" rx="3" fill="black" fill-opacity="0.4"/>
+      <rect x="76" y="198" width="122" height="44" rx="4" fill="#14141E"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_ddd_1994_118694" x="0" y="0" width="206" height="206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1994_118694"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_1994_118694" result="effect2_dropShadow_1994_118694"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1994_118694" result="shape"/>
+    </filter>
+    <clipPath id="clip0_1994_118694">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

@xen-orchestra/lite/src/assets/color-mode-light.svg

@@ -0,0 +1,70 @@
+<svg width="200" height="200" viewBox="3 2 200 200" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_ddd_1994_118640)">
+    <g clip-path="url(#clip0_1994_118640)">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="#F6F6F7"/>
+      <rect width="200" height="29" transform="translate(3 2)" fill="#F6F6F7"/>
+      <rect x="13" y="13" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect width="68" height="171" transform="translate(3 31)" fill="white"/>
+      <rect x="13" y="41" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="41" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="58" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="58" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="75" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="75" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="92" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="92" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="109" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="109" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="126" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="126" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="143" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="143" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="160" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="160" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="177" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="177" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="13" y="194" width="7" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="25" y="194" width="36" height="7" rx="3" fill="#E5E5E7"/>
+      <rect x="76" y="36" width="122" height="44" rx="4" fill="white"/>
+      <rect x="86" y="46" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="46" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="86" y="63" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="63" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="76" y="90" width="122" height="44" rx="4" fill="white"/>
+      <rect x="86" y="100" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="100" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="86" y="117" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="117" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="76" y="144" width="122" height="44" rx="4" fill="white"/>
+      <rect x="86" y="154" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="154" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="86" y="171" width="102" height="7" rx="3" fill="#8F84FF"/>
+      <rect x="86" y="171" width="102" height="7" rx="3" fill="white" fill-opacity="0.6"/>
+      <rect x="76" y="198" width="122" height="44" rx="4" fill="white"/>
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_ddd_1994_118640" x="0" y="0" width="206" height="206" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.08 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1994_118640"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="0.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.06 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_1994_118640" result="effect2_dropShadow_1994_118640"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="1"/>
+      <feGaussianBlur stdDeviation="1.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.101961 0 0 0 0 0.105882 0 0 0 0 0.219608 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_1994_118640" result="shape"/>
+    </filter>
+    <clipPath id="clip0_1994_118640">
+      <rect x="3" y="2" width="200" height="200" rx="8" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

@xen-orchestra/lite/src/assets/under-construction.svg

@@ -0,0 +1,79 @@
+<svg width="262" height="164" viewBox="0 0 262 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_814_56662)">
+<path d="M249.387 164.001H28.7878C26.826 164.001 24.9446 163.222 23.5575 161.835C22.1703 160.448 21.391 158.567 21.391 156.606C101.358 147.314 179.822 147.314 256.784 156.606C256.784 158.567 256.005 160.448 254.617 161.835C253.23 163.222 251.349 164.001 249.387 164.001Z" fill="#CCCCCC"/>
+<path d="M256.784 157.04L21.391 156.605L48.6722 110.711L48.8027 110.493V9.34843C48.8026 8.12075 49.0444 6.90507 49.5143 5.77082C49.9841 4.63657 50.6729 3.60597 51.5412 2.73787C52.4095 1.86976 53.4403 1.18117 54.5748 0.7114C55.7093 0.241634 56.9252 -0.000102555 58.1532 3.2638e-08H218.716C219.944 -0.000102555 221.16 0.241634 222.295 0.7114C223.429 1.18117 224.46 1.86976 225.328 2.73787C226.197 3.60597 226.885 4.63657 227.355 5.77082C227.825 6.90507 228.067 8.12075 228.067 9.34843V111.189L256.784 157.04Z" fill="#E6E6E6"/>
+<path d="M57.94 6.52344C57.1325 6.52434 56.3584 6.84545 55.7874 7.41632C55.2164 7.98719 54.8952 8.7612 54.8943 9.56853V101.791C54.8952 102.599 55.2164 103.373 55.7874 103.944C56.3584 104.514 57.1325 104.835 57.94 104.836H220.235C221.042 104.835 221.817 104.514 222.387 103.943C222.958 103.373 223.28 102.599 223.281 101.791V9.56853C223.28 8.76121 222.959 7.98722 222.388 7.41636C221.817 6.8455 221.042 6.52438 220.235 6.52344H57.94Z" fill="white"/>
+<path d="M59.0067 117.02C58.7572 117.02 58.5129 117.092 58.3028 117.226C58.0927 117.361 57.9255 117.553 57.8208 117.779L49.4146 136.05C49.3231 136.248 49.283 136.467 49.2982 136.685C49.3133 136.904 49.3831 137.115 49.5012 137.299C49.6193 137.483 49.7819 137.635 49.9739 137.74C50.166 137.845 50.3814 137.9 50.6003 137.9H227.378C227.6 137.9 227.819 137.843 228.014 137.735C228.208 137.627 228.371 137.47 228.488 137.281C228.605 137.092 228.672 136.876 228.682 136.654C228.692 136.431 228.645 136.21 228.545 136.011L219.408 117.741C219.3 117.524 219.134 117.341 218.927 117.214C218.721 117.086 218.483 117.019 218.241 117.02L59.0067 117.02Z" fill="#CCCCCC"/>
+<path d="M138.435 5.00106C139.516 5.00106 140.393 4.12463 140.393 3.0435C140.393 1.96237 139.516 1.08594 138.435 1.08594C137.353 1.08594 136.477 1.96237 136.477 3.0435C136.477 4.12463 137.353 5.00106 138.435 5.00106Z" fill="white"/>
+<path d="M121.059 141.379C120.772 141.379 120.493 141.474 120.265 141.649C120.038 141.823 119.874 142.068 119.799 142.345L117.69 150.175C117.638 150.368 117.631 150.571 117.67 150.768C117.709 150.964 117.792 151.149 117.914 151.308C118.036 151.467 118.193 151.596 118.373 151.684C118.552 151.773 118.75 151.819 118.95 151.819H159.051C159.259 151.819 159.465 151.769 159.649 151.674C159.834 151.579 159.994 151.441 160.115 151.271C160.235 151.102 160.314 150.906 160.343 150.7C160.373 150.494 160.353 150.284 160.284 150.087L157.574 142.257C157.485 142.001 157.318 141.778 157.097 141.621C156.876 141.464 156.611 141.379 156.34 141.379H121.059Z" fill="#CCCCCC"/>
+<path d="M228.067 108.969V110.709H48.6722L48.8071 110.491V108.969H228.067Z" fill="#CCCCCC"/>
+<path d="M205.924 112.957C205.854 112.957 205.786 112.98 205.731 113.023C205.675 113.065 205.635 113.125 205.617 113.192L205.104 115.099C205.091 115.146 205.089 115.195 205.099 115.243C205.108 115.291 205.129 115.336 205.158 115.375C205.188 115.414 205.226 115.445 205.27 115.467C205.314 115.488 205.362 115.499 205.411 115.499H215.176C215.226 115.499 215.276 115.487 215.321 115.464C215.366 115.441 215.405 115.407 215.435 115.366C215.464 115.325 215.483 115.277 215.49 115.227C215.498 115.177 215.493 115.126 215.476 115.078L214.816 113.171C214.794 113.108 214.754 113.054 214.7 113.016C214.646 112.978 214.582 112.957 214.516 112.957H205.924Z" fill="#CCCCCC"/>
+<path d="M191.666 112.957C191.596 112.957 191.528 112.98 191.472 113.023C191.417 113.065 191.377 113.125 191.359 113.192L190.845 115.099C190.833 115.146 190.831 115.195 190.84 115.243C190.85 115.291 190.87 115.336 190.9 115.375C190.93 115.414 190.968 115.445 191.012 115.467C191.055 115.488 191.103 115.499 191.152 115.499H200.917C200.968 115.499 201.018 115.487 201.063 115.464C201.108 115.441 201.147 115.407 201.176 115.366C201.206 115.325 201.225 115.277 201.232 115.227C201.239 115.177 201.234 115.126 201.218 115.078L200.557 113.171C200.536 113.108 200.495 113.054 200.441 113.016C200.388 112.978 200.323 112.957 200.257 112.957H191.666Z" fill="#CCCCCC"/>
+<path d="M150.356 125.071H151.121L149.591 22.793H148.825L148.856 24.8334H131.702L131.733 22.793H130.967L129.437 125.071H130.202L130.301 118.44H150.257L150.356 125.071ZM149.253 51.3595H131.305L131.492 38.8617H149.066L149.253 51.3595ZM149.264 52.1247L149.451 64.6226H131.107L131.294 52.1247H149.264ZM149.463 65.3877L149.65 77.8856H130.908L131.095 65.3877H149.463ZM149.661 78.6508L149.848 91.1486H130.71L130.897 78.6508H149.661ZM149.86 91.9138L150.047 104.412H130.511L130.698 91.9138H149.86ZM148.867 25.5986L149.054 38.0965H131.504L131.691 25.5986H148.867ZM130.313 117.675L130.5 105.177H150.058L150.245 117.675H130.313Z" fill="#3F3D56"/>
+<path d="M136.488 58.0205C143.38 58.0205 148.967 52.4344 148.967 45.5435C148.967 38.6526 143.38 33.0664 136.488 33.0664C129.595 33.0664 124.008 38.6526 124.008 45.5435C124.008 52.4344 129.595 58.0205 136.488 58.0205Z" fill="#2F2E41"/>
+<path d="M143.828 54.1685L140.098 54.8438L141.308 61.5265L145.038 60.8512L143.828 54.1685Z" fill="#2F2E41"/>
+<path d="M136.367 55.5201L132.636 56.1953L133.846 62.878L137.577 62.2028L136.367 55.5201Z" fill="#2F2E41"/>
+<path d="M135.827 64.2821C137.158 63.1546 137.895 61.836 137.472 61.3367C137.049 60.8375 135.627 61.3468 134.296 62.4742C132.964 63.6017 132.227 64.9203 132.65 65.4196C133.073 65.9188 134.495 65.4095 135.827 64.2821Z" fill="#2F2E41"/>
+<path d="M143.133 62.9618C144.464 61.8343 145.201 60.5156 144.778 60.0164C144.355 59.5172 142.933 60.0264 141.601 61.1539C140.27 62.2813 139.533 63.6 139.956 64.0992C140.379 64.5985 141.801 64.0892 143.133 62.9618Z" fill="#2F2E41"/>
+<path d="M135.614 46.7591C137.97 46.7591 139.879 44.8499 139.879 42.4948C139.879 40.1397 137.97 38.2305 135.614 38.2305C133.258 38.2305 131.349 40.1397 131.349 42.4948C131.349 44.8499 133.258 46.7591 135.614 46.7591Z" fill="white"/>
+<path d="M133.861 42.3858C134.646 42.3858 135.283 41.7494 135.283 40.9644C135.283 40.1794 134.646 39.543 133.861 39.543C133.076 39.543 132.439 40.1794 132.439 40.9644C132.439 41.7494 133.076 42.3858 133.861 42.3858Z" fill="#3F3D56"/>
+<path d="M146.333 31.97C146.52 27.3508 142.538 23.4383 137.439 23.2312C132.339 23.0241 128.053 26.6008 127.865 31.22C127.677 35.8392 131.222 36.8887 136.322 37.0958C141.422 37.303 146.145 36.5892 146.333 31.97Z" fill="#8F84FF"/>
+<path d="M131.047 44.6638C131.288 43.6096 128.761 42.1308 125.402 41.3611C122.043 40.5913 119.124 40.8219 118.882 41.8762C118.641 42.9305 121.168 44.4092 124.527 45.179C127.886 45.9488 130.805 45.7181 131.047 44.6638Z" fill="#2F2E41"/>
+<path d="M155.544 48.7381C155.786 47.6838 153.258 46.2051 149.899 45.4353C146.54 44.6655 143.621 44.8961 143.38 45.9504C143.138 47.0047 145.665 48.4834 149.024 49.2532C152.383 50.023 155.302 49.7924 155.544 48.7381Z" fill="#2F2E41"/>
+<path d="M139.915 50.4628C139.983 50.8302 139.977 51.2073 139.898 51.5724C139.82 51.9376 139.67 52.2837 139.457 52.591C139.245 52.8982 138.974 53.1606 138.66 53.3631C138.346 53.5656 137.995 53.7043 137.628 53.7712C137.26 53.8381 136.883 53.8319 136.518 53.753C136.152 53.6741 135.806 53.524 135.499 53.3113C135.192 53.0986 134.93 52.8275 134.728 52.5135C134.525 52.1994 134.387 51.8486 134.32 51.4811L134.319 51.4756C134.04 49.9306 135.234 49.3839 136.78 49.1042C138.325 48.8245 139.636 48.9178 139.915 50.4628Z" fill="white"/>
+<path d="M94.2194 87.9208C95.4807 84.6216 95.6634 81.6262 94.6275 81.2303C93.5915 80.8344 91.7293 83.188 90.468 86.4872C89.2067 89.7864 89.024 92.7819 90.0599 93.1777C91.0959 93.5736 92.9581 91.22 94.2194 87.9208Z" fill="#2F2E41"/>
+<path d="M93.147 98.9138C94.2787 91.941 89.5425 85.3712 82.5682 84.2397C75.594 83.1082 69.0228 87.8434 67.891 94.8162C66.7593 101.789 71.4955 108.359 78.4698 109.49C85.444 110.622 92.0152 105.886 93.147 98.9138Z" fill="#2F2E41"/>
+<path d="M78.5757 106.902H74.6892V113.864H78.5757V106.902Z" fill="#2F2E41"/>
+<path d="M86.3487 106.902H82.4622V113.864H86.3487V106.902Z" fill="#2F2E41"/>
+<path d="M77.928 115.159C79.7167 115.159 81.1668 114.615 81.1668 113.945C81.1668 113.274 79.7167 112.73 77.928 112.73C76.1393 112.73 74.6892 113.274 74.6892 113.945C74.6892 114.615 76.1393 115.159 77.928 115.159Z" fill="#2F2E41"/>
+<path d="M85.7009 114.995C87.4897 114.995 88.9397 114.451 88.9397 113.781C88.9397 113.11 87.4897 112.566 85.7009 112.566C83.9122 112.566 82.4622 113.11 82.4622 113.781C82.4622 114.451 83.9122 114.995 85.7009 114.995Z" fill="#2F2E41"/>
+<path d="M68.1092 84.9687C67.0762 80.3435 70.3782 75.6699 75.4845 74.53C80.5908 73.39 85.5676 76.2154 86.6006 80.8406C87.6336 85.4658 84.2495 87.1716 79.1432 88.3116C74.037 89.4515 69.1422 89.5939 68.1092 84.9687Z" fill="#8F84FF"/>
+<path d="M71.8891 93.671C72.3643 92.6692 70.162 90.6301 66.9701 89.1165C63.7782 87.603 60.8054 87.1881 60.3301 88.19C59.8549 89.1918 62.0572 91.2309 65.2491 92.7444C68.441 94.258 71.4138 94.6728 71.8891 93.671Z" fill="#2F2E41"/>
+<path d="M25.1257 122.604C32.1911 122.604 37.9188 116.878 37.9188 109.814C37.9188 102.75 32.1911 97.0234 25.1257 97.0234C18.0602 97.0234 12.3325 102.75 12.3325 109.814C12.3325 116.878 18.0602 122.604 25.1257 122.604Z" fill="#2F2E41"/>
+<path d="M23.1824 119.852H19.2959V126.813H23.1824V119.852Z" fill="#2F2E41"/>
+<path d="M30.9554 119.852H27.0688V126.813H30.9554V119.852Z" fill="#2F2E41"/>
+<path d="M22.5347 128.108C24.3234 128.108 25.7735 127.565 25.7735 126.894C25.7735 126.223 24.3234 125.68 22.5347 125.68C20.7459 125.68 19.2959 126.223 19.2959 126.894C19.2959 127.565 20.7459 128.108 22.5347 128.108Z" fill="#2F2E41"/>
+<path d="M30.3076 127.948C32.0963 127.948 33.5464 127.404 33.5464 126.734C33.5464 126.063 32.0963 125.52 30.3076 125.52C28.5189 125.52 27.0688 126.063 27.0688 126.734C27.0688 127.404 28.5189 127.948 30.3076 127.948Z" fill="#2F2E41"/>
+<path d="M25.4495 110.946C27.8643 110.946 29.8218 108.989 29.8218 106.575C29.8218 104.16 27.8643 102.203 25.4495 102.203C23.0347 102.203 21.0771 104.16 21.0771 106.575C21.0771 108.989 23.0347 110.946 25.4495 110.946Z" fill="white"/>
+<path d="M25.4496 108.035C26.2546 108.035 26.9071 107.383 26.9071 106.578C26.9071 105.773 26.2546 105.121 25.4496 105.121C24.6447 105.121 23.9922 105.773 23.9922 106.578C23.9922 107.383 24.6447 108.035 25.4496 108.035Z" fill="#3F3D56"/>
+<path d="M12.7159 97.9179C11.6829 93.2927 14.9849 88.6191 20.0912 87.4792C25.1975 86.3392 30.1743 89.1646 31.2073 93.7898C32.2403 98.415 28.8562 100.121 23.7499 101.261C18.6436 102.401 13.7489 102.543 12.7159 97.9179Z" fill="#E6E6E6"/>
+<path d="M34.4538 64.12C35.7151 60.8208 35.8978 57.8254 34.8618 57.4295C33.8259 57.0336 31.9636 59.3872 30.7023 62.6864C29.4411 65.9856 29.2584 68.9811 30.2943 69.3769C31.3302 69.7728 33.1925 67.4192 34.4538 64.12Z" fill="#2F2E41"/>
+<path d="M33.3813 75.113C34.5131 68.1402 29.7768 61.5704 22.8026 60.4389C15.8284 59.3074 9.25717 64.0427 8.12541 71.0154C6.99365 77.9881 11.7299 84.5579 18.7041 85.6894C25.6784 86.8209 32.2496 82.0857 33.3813 75.113Z" fill="#2F2E41"/>
+<path d="M18.81 83.1016H14.9235V90.0634H18.81V83.1016Z" fill="#2F2E41"/>
+<path d="M26.5831 83.1016H22.6965V90.0634H26.5831V83.1016Z" fill="#2F2E41"/>
+<path d="M18.1622 91.3583C19.951 91.3583 21.401 90.8146 21.401 90.144C21.401 89.4733 19.951 88.9297 18.1622 88.9297C16.3735 88.9297 14.9235 89.4733 14.9235 90.144C14.9235 90.8146 16.3735 91.3583 18.1622 91.3583Z" fill="#2F2E41"/>
+<path d="M25.9353 91.1942C27.724 91.1942 29.1741 90.6505 29.1741 89.9799C29.1741 89.3093 27.724 88.7656 25.9353 88.7656C24.1466 88.7656 22.6965 89.3093 22.6965 89.9799C22.6965 90.6505 24.1466 91.1942 25.9353 91.1942Z" fill="#2F2E41"/>
+<path d="M21.0772 74.1959C23.492 74.1959 25.4495 72.2388 25.4495 69.8245C25.4495 67.4103 23.492 65.4531 21.0772 65.4531C18.6624 65.4531 16.7048 67.4103 16.7048 69.8245C16.7048 72.2388 18.6624 74.1959 21.0772 74.1959Z" fill="white"/>
+<path d="M21.0772 71.2815C21.8821 71.2815 22.5347 70.6291 22.5347 69.8243C22.5347 69.0196 21.8821 68.3672 21.0772 68.3672C20.2723 68.3672 19.6198 69.0196 19.6198 69.8243C19.6198 70.6291 20.2723 71.2815 21.0772 71.2815Z" fill="#3F3D56"/>
+<path d="M8.34355 61.1679C7.31057 56.5427 10.6126 51.8691 15.7189 50.7292C20.8252 49.5892 25.802 52.4146 26.835 57.0398C27.868 61.665 24.4839 63.3709 19.3776 64.5108C14.2713 65.6507 9.37653 65.7931 8.34355 61.1679Z" fill="#8F84FF"/>
+<path d="M12.1235 69.8663C12.5987 68.8645 10.3964 66.8254 7.20451 65.3118C4.01259 63.7983 1.03975 63.3834 0.5645 64.3853C0.0892476 65.3871 2.29155 67.4262 5.48347 68.9398C8.67539 70.4533 11.6482 70.8681 12.1235 69.8663Z" fill="#2F2E41"/>
+<path d="M14.4694 77.6771C14.4694 78.9289 17.6933 81.4009 21.2708 81.4009C24.8482 81.4009 28.2025 77.8765 28.2025 76.6247C28.2025 75.3729 24.8482 76.8676 21.2708 76.8676C17.6933 76.8676 14.4694 76.4252 14.4694 77.6771Z" fill="white"/>
+<path d="M33.3311 24.2266C33.0948 24.2268 32.8683 24.3208 32.7012 24.4878C32.5342 24.6548 32.4402 24.8813 32.4399 25.1175V61.9438C32.4402 62.18 32.5342 62.4065 32.7012 62.5735C32.8683 62.7405 33.0948 62.8345 33.3311 62.8347H118.584C118.821 62.8345 119.047 62.7405 119.214 62.5735C119.381 62.4065 119.475 62.18 119.476 61.9438V25.1175C119.475 24.8813 119.381 24.6548 119.214 24.4878C119.047 24.3208 118.821 24.2268 118.584 24.2266H33.3311Z" fill="#8F84FF"/>
+<path d="M56.3507 52.176C61.1282 52.176 65.0012 48.3039 65.0012 43.5275C65.0012 38.751 61.1282 34.8789 56.3507 34.8789C51.5732 34.8789 47.7003 38.751 47.7003 43.5275C47.7003 48.3039 51.5732 52.176 56.3507 52.176Z" fill="white"/>
+<path d="M75.8746 42.379C75.6092 42.3834 75.3562 42.4919 75.1701 42.681C74.9839 42.8702 74.8796 43.1249 74.8796 43.3902C74.8796 43.6556 74.9839 43.9103 75.1701 44.0994C75.3562 44.2886 75.6092 44.3971 75.8746 44.4014H103.187C103.32 44.4037 103.452 44.3798 103.576 44.331C103.699 44.2823 103.812 44.2096 103.908 44.1173C104.003 44.0249 104.08 43.9146 104.132 43.7927C104.185 43.6708 104.214 43.5397 104.216 43.4068C104.218 43.274 104.194 43.142 104.145 43.0184C104.096 42.8949 104.024 42.7821 103.931 42.6867C103.839 42.5912 103.728 42.5149 103.606 42.4621C103.484 42.4094 103.353 42.3811 103.22 42.379C103.209 42.3789 103.198 42.3789 103.187 42.379H75.8746Z" fill="white"/>
+<path d="M75.8746 36.5197C75.6092 36.524 75.3562 36.6325 75.1701 36.8217C74.9839 37.0108 74.8796 37.2655 74.8796 37.5309C74.8796 37.7962 74.9839 38.0509 75.1701 38.2401C75.3562 38.4292 75.6092 38.5377 75.8746 38.5421H89.5138C89.6467 38.5443 89.7787 38.5204 89.9023 38.4717C90.026 38.4229 90.1388 38.3503 90.2343 38.2579C90.3299 38.1656 90.4063 38.0553 90.4592 37.9334C90.5121 37.8115 90.5404 37.6803 90.5426 37.5475C90.5448 37.4146 90.5208 37.2826 90.4719 37.1591C90.423 37.0355 90.3503 36.9228 90.2578 36.8273C90.1654 36.7318 90.055 36.6555 89.933 36.6028C89.8111 36.55 89.6799 36.5217 89.547 36.5197C89.5359 36.5195 89.5248 36.5195 89.5138 36.5197H75.8746Z" fill="white"/>
+<path d="M75.8746 48.5158C75.6092 48.5201 75.3562 48.6286 75.1701 48.8177C74.9839 49.0069 74.8796 49.2616 74.8796 49.527C74.8796 49.7923 74.9839 50.047 75.1701 50.2362C75.3562 50.4253 75.6092 50.5338 75.8746 50.5382H103.187C103.32 50.5404 103.452 50.5165 103.576 50.4678C103.699 50.419 103.812 50.3464 103.908 50.254C104.003 50.1617 104.08 50.0514 104.132 49.9295C104.185 49.8076 104.214 49.6764 104.216 49.5436C104.218 49.4107 104.194 49.2787 104.145 49.1552C104.096 49.0316 104.024 48.9189 103.931 48.8234C103.839 48.728 103.728 48.6517 103.606 48.5989C103.484 48.5461 103.353 48.5178 103.22 48.5158C103.209 48.5156 103.198 48.5156 103.187 48.5158H75.8746Z" fill="white"/>
+<path d="M208.521 116.633C209.557 116.237 209.375 113.242 208.113 109.942C206.852 106.643 204.99 104.29 203.954 104.686C202.918 105.081 203.1 108.077 204.362 111.376C205.623 114.675 207.485 117.029 208.521 116.633Z" fill="#2F2E41"/>
+<path d="M217.438 135.616C224.412 134.484 229.149 127.914 228.017 120.942C226.885 113.969 220.314 109.234 213.34 110.365C206.365 111.497 201.629 118.067 202.761 125.039C203.893 132.012 210.464 136.747 217.438 135.616Z" fill="#2F2E41"/>
+<path d="M221.218 133.031H217.332L218.093 141.369L221.225 140.518L221.218 133.031Z" fill="#2F2E41"/>
+<path d="M212.746 133.051H208.859L209.62 141.388L212.611 140.516L212.746 133.051Z" fill="#2F2E41"/>
+<path d="M209.509 141.78C211.293 141.649 212.7 141.001 212.651 140.333C212.602 139.664 211.116 139.227 209.332 139.358C207.548 139.488 206.141 140.136 206.19 140.805C206.239 141.474 207.725 141.91 209.509 141.78Z" fill="#2F2E41"/>
+<path d="M215.065 124.126C217.48 124.126 219.437 122.168 219.437 119.754C219.437 117.34 217.48 115.383 215.065 115.383C212.65 115.383 210.693 117.34 210.693 119.754C210.693 122.168 212.65 124.126 215.065 124.126Z" fill="white"/>
+<path d="M215.065 121.211C215.87 121.211 216.522 120.559 216.522 119.754C216.522 118.949 215.87 118.297 215.065 118.297C214.26 118.297 213.607 118.949 213.607 119.754C213.607 120.559 214.26 121.211 215.065 121.211Z" fill="#3F3D56"/>
+<path d="M230.522 115.281C232.621 112.439 233.599 109.602 232.707 108.944C231.815 108.285 229.391 110.054 227.292 112.895C225.193 115.736 224.215 118.573 225.107 119.232C225.999 119.891 228.423 118.122 230.522 115.281Z" fill="#2F2E41"/>
+<path d="M209.147 129.585C209.147 128.553 211.804 126.516 214.753 126.516C217.701 126.516 220.466 129.42 220.466 130.452C220.466 131.484 217.701 130.252 214.753 130.252C211.804 130.252 209.147 130.616 209.147 129.585Z" fill="white"/>
+<path d="M251.263 112.42L181.234 102.714C180.688 102.638 180.195 102.348 179.863 101.908C179.53 101.469 179.385 100.915 179.46 100.369L187.333 43.5939C187.409 43.0481 187.699 42.5548 188.138 42.2222C188.578 41.8897 189.132 41.7451 189.678 41.8202L259.706 51.526C260.252 51.6023 260.745 51.892 261.078 52.3316C261.411 52.7711 261.555 53.3246 261.48 53.8707L253.608 110.646C253.531 111.192 253.242 111.685 252.802 112.018C252.362 112.35 251.809 112.495 251.263 112.42Z" fill="#8F84FF"/>
+<path d="M226.175 94.7045L190.424 89.7494C190.379 89.7438 190.335 89.734 190.292 89.7203L211.261 62.7818C211.389 62.6137 211.56 62.4828 211.756 62.4023C211.952 62.3219 212.165 62.2948 212.375 62.3238C212.584 62.3529 212.782 62.437 212.949 62.5677C213.115 62.6983 213.244 62.8708 213.322 63.0674L221.945 84.2907L222.358 85.3064L226.175 94.7045Z" fill="white"/>
+<path opacity="0.2" d="M226.175 94.7026L213.969 93.011L221.168 85.1396L221.686 84.5727L221.945 84.2891L222.358 85.3047L226.175 94.7026Z" fill="black"/>
+<path d="M246.081 97.4603L215.16 93.1745L222.358 85.3032L222.876 84.7361L232.257 74.4782C232.419 74.3241 232.612 74.2058 232.822 74.131C233.033 74.0561 233.257 74.0265 233.48 74.0439C233.703 74.0613 233.92 74.1255 234.117 74.2321C234.313 74.3388 234.485 74.4856 234.622 74.663C234.656 74.7129 234.687 74.765 234.715 74.8188L246.081 97.4603Z" fill="white"/>
+<path d="M226.61 71.9259C229.563 71.9259 231.957 69.5325 231.957 66.5801C231.957 63.6277 229.563 61.2344 226.61 61.2344C223.657 61.2344 221.263 63.6277 221.263 66.5801C221.263 69.5325 223.657 71.9259 226.61 71.9259Z" fill="white"/>
+<path d="M197.346 47.0847L190.872 46.1875L189.975 52.6593L196.448 53.5565L197.346 47.0847Z" fill="#3F3D56"/>
+<path d="M227.799 111.098C228.832 106.472 225.529 101.799 220.423 100.659C215.317 99.5189 210.34 102.344 209.307 106.969C208.274 111.595 211.658 113.301 216.764 114.44C221.871 115.58 226.766 115.723 227.799 111.098Z" fill="#F2F2F2"/>
+<path d="M218.032 141.76C219.816 141.63 221.223 140.982 221.174 140.313C221.125 139.644 219.639 139.208 217.855 139.338C216.071 139.469 214.665 140.116 214.714 140.785C214.762 141.454 216.248 141.891 218.032 141.76Z" fill="#2F2E41"/>
+</g>
+<defs>
+<clipPath id="clip0_814_56662">
+<rect width="261" height="164" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

@xen-orchestra/lite/src/components/AccountButton.vue

@@ -34,7 +34,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuItem from "@/components/menu/MenuItem.vue";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
 const router = useRouter();

@xen-orchestra/lite/src/components/AppHeader.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import AccountButton from "@/components/AccountButton.vue";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
 import { useUiStore } from "@/stores/ui.store";
 import { faBars } from "@fortawesome/free-solid-svg-icons";

@xen-orchestra/lite/src/components/AppNavigation.vue

@@ -1,15 +1,19 @@
 <template>
-  <nav
-    v-if="isDesktop || isOpen"
-    ref="navElement"
-    :class="{ collapsible: isMobile }"
-    class="app-navigation"
-  >
-    <InfraPoolList />
-  </nav>
+  <transition name="slide">
+    <nav
+      v-if="isDesktop || isOpen"
+      ref="navElement"
+      :class="{ collapsible: isMobile }"
+      class="app-navigation"
+    >
+      <StoryMenu v-if="$route.meta.hasStoryNav" />
+      <InfraPoolList v-else />
+    </nav>
+  </transition>
 </template>
 
 <script lang="ts" setup>
+import StoryMenu from "@/components/component-story/StoryMenu.vue";
 import InfraPoolList from "@/components/infra/InfraPoolList.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
 import { useUiStore } from "@/stores/ui.store";
@@ -44,7 +48,7 @@ whenever(isOpen, () => {
   overflow: auto;
   width: 37rem;
   max-width: 37rem;
-  height: calc(100vh - 9rem);
+  height: calc(100vh - 8rem);
   padding: 0.5rem;
   border-right: 1px solid var(--color-blue-scale-400);
   background-color: var(--background-color-primary);
@@ -54,4 +58,13 @@ whenever(isOpen, () => {
     z-index: 1;
   }
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(-37rem);
+}
 </style>

@xen-orchestra/lite/src/components/AppTooltip.vue

@@ -62,6 +62,7 @@ watchEffect(() => {
   color: var(--color-blue-scale-500);
   border-radius: 0.5em;
   background-color: var(--color-blue-scale-100);
+  z-index: 2;
 }
 
 .triangle {

@xen-orchestra/lite/src/components/CollectionFilterRow.vue

@@ -19,74 +19,59 @@
           </option>
         </select>
       </FormWidget>
-      <template v-if="hasComparisonSelect">
-        <FormWidget v-if="currentFilter?.type === 'string'">
-          <select v-model="newFilter.builder.negate">
-            <option :value="false">does</option>
-            <option :value="true">does not</option>
-          </select>
-        </FormWidget>
-        <FormWidget v-if="hasComparisonSelect">
-          <select v-model="newFilter.builder.comparison">
-            <option
-              v-for="(label, type) in comparisons"
-              :key="type"
-              :value="type"
-            >
-              {{ label }}
-            </option>
-          </select>
-        </FormWidget>
-      </template>
+      <FormWidget v-if="hasComparisonSelect">
+        <select v-model="newFilter.builder.comparison">
+          <option
+            v-for="(label, type) in comparisons"
+            :key="type"
+            :value="type"
+          >
+            {{ label }}
+          </option>
+        </select>
+      </FormWidget>
+      <FormWidget v-if="currentFilter?.type === 'enum'">
+        <select v-model="newFilter.builder.value">
+          <option v-if="!newFilter.builder.value" value="" />
+          <option v-for="choice in enumChoices" :key="choice" :value="choice">
+            {{ choice }}
+          </option>
+        </select>
+      </FormWidget>
       <FormWidget
-        v-if="hasValueInput"
+        v-else-if="hasValueInput"
         :after="valueInputAfter"
         :before="valueInputBefore"
       >
         <input v-model="newFilter.builder.value" />
       </FormWidget>
-      <template v-else-if="currentFilter?.type === 'enum'">
-        <FormWidget>
-          <select v-model="newFilter.builder.negate">
-            <option :value="false">is</option>
-            <option :value="true">is not</option>
-          </select>
-        </FormWidget>
-        <FormWidget>
-          <select v-model="newFilter.builder.value">
-            <option v-if="!newFilter.builder.value" value="" />
-            <option v-for="choice in enumChoices" :key="choice" :value="choice">
-              {{ choice }}
-            </option>
-          </select>
-        </FormWidget>
-      </template>
     </template>
     <UiActionButton
       v-if="!newFilter.isAdvanced"
-      @click="enableAdvancedMode"
       :icon="faPencil"
+      @click="enableAdvancedMode"
     />
-    <UiActionButton @click="emit('remove', newFilter.id)" :icon="faRemove" />
+    <UiActionButton :icon="faRemove" @click="emit('remove', newFilter.id)" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
-import type {
-  Filter,
-  FilterComparisonType,
-  FilterComparisons,
-  FilterType,
-  Filters,
-  NewFilter,
-} from "@/types/filter";
-import { faPencil, faRemove } from "@fortawesome/free-solid-svg-icons";
-import { useVModel } from "@vueuse/core";
 import FormWidget from "@/components/FormWidget.vue";
 import UiActionButton from "@/components/ui/UiActionButton.vue";
 import { buildComplexMatcherNode } from "@/libs/complex-matcher.utils";
 import { getFilterIcon } from "@/libs/utils";
+import type {
+  Filter,
+  FilterComparisons,
+  FilterComparisonType,
+  Filters,
+  FilterType,
+  NewFilter,
+} from "@/types/filter";
+import { faPencil, faRemove } from "@fortawesome/free-solid-svg-icons";
+import { useVModel } from "@vueuse/core";
+import { computed, type Ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps<{
   availableFilters: Filters;
@@ -98,14 +83,16 @@ const emit = defineEmits<{
   (event: "remove", filterId: number): void;
 }>();
 
-const newFilter = useVModel(props, "modelValue", emit);
+const { t } = useI18n();
+
+const newFilter: Ref<NewFilter> = useVModel(props, "modelValue", emit);
 
 const getDefaultComparisonType = () => {
   const defaultTypes: { [key in FilterType]: FilterComparisonType } = {
     string: "stringContains",
     boolean: "booleanTrue",
     number: "numberEquals",
-    enum: "stringEquals",
+    enum: "enumIs",
   };
 
   return defaultTypes[
@@ -118,7 +105,6 @@ watch(
   () => {
     newFilter.value.builder.comparison = getDefaultComparisonType();
     newFilter.value.builder.value = "";
-    newFilter.value.builder.negate = false;
   }
 );
 
@@ -133,7 +119,7 @@ const hasValueInput = computed(() =>
 );
 
 const hasComparisonSelect = computed(
-  () => newFilter.value.builder.property && currentFilter.value?.type !== "enum"
+  () => newFilter.value.builder.property !== ""
 );
 
 const enumChoices = computed(() => {
@@ -164,8 +150,7 @@ const generatedFilter = computed(() => {
     const node = buildComplexMatcherNode(
       newFilter.value.builder.comparison,
       newFilter.value.builder.property,
-      newFilter.value.builder.value,
-      newFilter.value.builder.negate
+      newFilter.value.builder.value
     );
 
     if (node) {
@@ -190,15 +175,20 @@ watch(generatedFilter, (value) => {
 const comparisons = computed<FilterComparisons>(() => {
   const comparisonsByType = {
     string: {
-      stringContains: "contain",
-      stringEquals: "equal",
-      stringStartsWith: "start with",
-      stringEndsWith: "end with",
-      stringMatchesRegex: "match regex",
+      stringContains: t("filter.comparison.contains"),
+      stringEquals: t("filter.comparison.equals"),
+      stringStartsWith: t("filter.comparison.starts-with"),
+      stringEndsWith: t("filter.comparison.ends-with"),
+      stringMatchesRegex: t("filter.comparison.matches-regex"),
+      stringDoesNotContain: t("filter.comparison.not-contain"),
+      stringDoesNotEqual: t("filter.comparison.not-equal"),
+      stringDoesNotStartWith: t("filter.comparison.not-start-with"),
+      stringDoesNotEndWith: t("filter.comparison.not-end-with"),
+      stringDoesNotMatchRegex: t("filter.comparison.not-match-regex"),
     },
     boolean: {
-      booleanTrue: "is true",
-      booleanFalse: "is false",
+      booleanTrue: t("filter.comparison.is-true"),
+      booleanFalse: t("filter.comparison.is-false"),
     },
     number: {
       numberLessThan: "<",
@@ -207,23 +197,22 @@ const comparisons = computed<FilterComparisons>(() => {
       numberGreaterThanOrEquals: ">=",
       numberGreaterThan: ">",
     },
-    enum: {},
+    enum: {
+      enumIs: t("filter.comparison.is"),
+      enumIsNot: t("filter.comparison.is-not"),
+    },
   };
 
   return comparisonsByType[currentFilter.value.type];
 });
 
-const valueInputBefore = computed(() => {
-  return newFilter.value.builder.comparison === "stringMatchesRegex"
-    ? "/"
-    : undefined;
-});
+const valueInputBefore = computed(() =>
+  newFilter.value.builder.comparison === "stringMatchesRegex" ? "/" : undefined
+);
 
-const valueInputAfter = computed(() => {
-  return newFilter.value.builder.comparison === "stringMatchesRegex"
-    ? "/i"
-    : undefined;
-});
+const valueInputAfter = computed(() =>
+  newFilter.value.builder.comparison === "stringMatchesRegex" ? "/i" : undefined
+);
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/CollectionSorter.vue

@@ -53,7 +53,7 @@ import UiActionButton from "@/components/ui/UiActionButton.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import UiFilter from "@/components/ui/UiFilter.vue";
 import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import UiModal from "@/components/ui/UiModal.vue";
 import useModal from "@/composables/modal.composable";
 import type { ActiveSorts, Sorts } from "@/types/sort";

@xen-orchestra/lite/src/components/ColumnHeader.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

@xen-orchestra/lite/src/components/FormWidget.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

@xen-orchestra/lite/src/components/NoDataError.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="no-data">
+    <img alt="No data" class="img" src="@/assets/undraw-bug-fixing.svg" />
+    <p class="text-error">{{ $t("error-no-data") }}</p>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.no-data {
+  text-align: center;
+}
+
+.img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1em;
+  width: 17em;
+  height: 13em;
+}
+.text-error {
+  margin: auto;
+  width: 8em;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.25em;
+  line-height: 150%;
+  color: var(--color-red-vates-base);
+}
+</style>

@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper-spinner" v-if="!store.isReady">
+  <div class="wrapper-spinner" v-if="store.isLoading">
     <UiSpinner class="spinner" />
   </div>
   <ObjectNotFoundView :id="id" v-else-if="isRecordNotFound" />

@xen-orchestra/lite/src/components/PageUnderConstruction.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="page-under-construction">
+    <img alt="Under construction" src="@/assets/under-construction.svg" />
+    <p class="title">{{ $t("xo-lite-under-construction") }}</p>
+    <p class="subtitle">{{ $t("new-features-are-coming") }}</p>
+    <p class="contact">
+      {{ $t("do-you-have-needs") }}
+      <a
+        href="https://xcp-ng.org/forum/topic/5018/xo-lite-building-an-embedded-ui-in-xcp-ng"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {{ $t("here") }} →
+      </a>
+    </p>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.page-under-construction {
+  width: 100%;
+  min-height: 76.5vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-extra-blue-base);
+}
+
+img {
+  margin-bottom: 40px;
+  width: 30%;
+}
+.title {
+  font-weight: 400;
+  font-size: 36px;
+  text-align: center;
+}
+
+.subtitle {
+  font-weight: 500;
+  font-size: 24px;
+  margin: 21px 0;
+  text-align: center;
+}
+.contact {
+  font-weight: 400;
+  font-size: 20px;
+  color: var(--color-blue-scale-100);
+
+  & a {
+    text-transform: lowercase;
+  }
+}
+</style>

@xen-orchestra/lite/src/components/PowerStateIcon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { PowerState } from "@/libs/xen-api";
 import {
   faMoon,

@xen-orchestra/lite/src/components/RemoteConsole.vue

@@ -9,21 +9,32 @@ import { useXenApiStore } from "@/stores/xen-api.store";
 
 const props = defineProps<{
   location: string;
+  isConsoleAvailable: boolean;
 }>();
 
 const vmConsoleContainer = ref<HTMLDivElement>();
 const xenApiStore = useXenApiStore();
 let vncClient: VncClient | undefined;
 
+const clearVncClient = () => {
+  if (vncClient !== undefined) {
+    if (vncClient._rfbConnectionState !== "disconnected") {
+      vncClient.disconnect();
+    }
+    vncClient = undefined;
+  }
+};
+
 watchEffect(() => {
-  if (!vmConsoleContainer.value || !xenApiStore.currentSessionId) {
+  if (
+    !vmConsoleContainer.value ||
+    !xenApiStore.currentSessionId ||
+    !props.isConsoleAvailable
+  ) {
     return;
   }
 
-  if (vncClient !== undefined) {
-    vncClient.disconnect();
-    vncClient = undefined;
-  }
+  clearVncClient();
 
   const url = new URL(props.location);
   url.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -37,8 +48,7 @@ watchEffect(() => {
 });
 
 onBeforeUnmount(() => {
-  vncClient?.disconnect();
-  vncClient = undefined;
+  clearVncClient();
 });
 </script>
 

@xen-orchestra/lite/src/components/RouterTab.vue

@@ -15,7 +15,7 @@ import { type ComputedRef, computed, inject } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 import UiTab from "@/components/ui/UiTab.vue";
 
-const props = defineProps<{
+defineProps<{
   to: RouteLocationRaw;
   disabled?: boolean;
 }>();

@xen-orchestra/lite/src/components/TitleBar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

@xen-orchestra/lite/src/components/UsageBar.vue

@@ -11,13 +11,10 @@
         }"
       >
         <UiProgressBar :value="item.value" color="custom" />
-        <div class="legend">
-          <span class="circle" />
-          {{ item.label }}
-          <UiBadge class="badge">{{
-            item.badgeLabel ?? `${item.value}%`
-          }}</UiBadge>
-        </div>
+        <UiProgressLegend
+          :label="item.label"
+          :value="item.badgeLabel ?? `${item.value}%`"
+        />
       </div>
       <slot :total-percent="computedData.totalPercentUsage" name="footer" />
     </template>
@@ -26,9 +23,9 @@
 </template>
 
 <script lang="ts" setup>
-import UiBadge from "@/components/ui/UiBadge.vue";
-import UiProgressBar from "@/components/ui/UiProgressBar.vue";
 import { computed } from "vue";
+import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
+import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
 
 interface Data {
@@ -78,19 +75,6 @@ const computedData = computed(() => {
   height: 40px;
 }
 
-.legend {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin: 1.6em 0;
-}
-
-.badge {
-  font-size: 0.9em;
-  font-weight: 700;
-}
-
 .progress-item:nth-child(1) {
   --progress-bar-color: var(--color-extra-blue-d60);
 }
@@ -114,12 +98,4 @@ const computedData = computed(() => {
     --progress-bar-color: var(--color-red-vates-base);
   }
 }
-
-.circle {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 0.5rem;
-  background-color: var(--progress-bar-color);
-}
 </style>

@xen-orchestra/lite/src/components/component-story/ComponentStory.vue

@@ -0,0 +1,346 @@
+<template>
+  <UiTabBar>
+    <UiTab v-bind="tab(TAB.PROPS, propParams)">Props</UiTab>
+    <UiTab class="event-tab" v-bind="tab(TAB.EVENTS, eventParams)">
+      Events
+      <UiCounter
+        v-if="unreadEventsCount > 0"
+        :value="unreadEventsCount"
+        color="success"
+      />
+    </UiTab>
+    <UiTab v-bind="tab(TAB.SLOTS, slotParams)">Slots</UiTab>
+    <UiTab v-bind="tab(TAB.SETTINGS, settingParams)">Settings</UiTab>
+    <AppMenu placement="bottom" shadow>
+      <template #trigger="{ open, isOpen }">
+        <UiTab
+          :active="isOpen"
+          :disabled="presets === undefined"
+          class="preset-tab"
+          @click="open"
+        >
+          Presets
+        </UiTab>
+      </template>
+      <MenuItem
+        v-for="(preset, label) in presets"
+        :key="label"
+        @click="applyPreset(preset)"
+      >
+        {{ label }}
+      </MenuItem>
+    </AppMenu>
+  </UiTabBar>
+
+  <div class="tabs">
+    <UiCard v-if="selectedTab === TAB.NONE" class="tab-content">
+      <i>No configuration defined</i>
+    </UiCard>
+    <UiCard v-else-if="selectedTab === TAB.PROPS" class="tab-content">
+      <StoryPropParams
+        v-model="propValues"
+        :params="propParams"
+        @reset="resetProps"
+      />
+    </UiCard>
+    <div
+      v-else-if="selectedTab === TAB.EVENTS"
+      class="tab-content event-tab-content"
+    >
+      <UiCard>
+        <StoryEventParams :params="eventParams" />
+      </UiCard>
+      <UiCard>
+        <UiCardTitle>
+          Logs
+          <template #right>
+            <UiButton
+              v-if="eventsLog.length > 0"
+              transparent
+              @click="eventsLog = []"
+            >
+              Clear
+            </UiButton>
+          </template>
+        </UiCardTitle>
+        <div class="events-log">
+          <CodeHighlight
+            v-for="event in eventLogRows"
+            :key="event.id"
+            :code="event.args"
+            class="event-log"
+          />
+        </div>
+      </UiCard>
+    </div>
+    <UiCard v-else-if="selectedTab === TAB.SLOTS" class="tab-content">
+      <StorySlotParams :params="slotParams" />
+    </UiCard>
+    <UiCard v-else-if="selectedTab === TAB.SETTINGS" class="tab-content">
+      <StorySettingParams
+        v-model="settingValues"
+        :params="settingParams"
+        @reset="resetSettings"
+      />
+    </UiCard>
+    <UiCard class="tab-content story-result">
+      <slot :properties="slotProperties" :settings="slotSettings" />
+    </UiCard>
+  </div>
+  <UiCard v-if="documentation !== undefined" class="documentation">
+    <AppMarkdown :content="documentation" />
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import AppMarkdown from "@/components/AppMarkdown.vue";
+import CodeHighlight from "@/components/CodeHighlight.vue";
+import StoryEventParams from "@/components/component-story/StoryEventParams.vue";
+import StoryPropParams from "@/components/component-story/StoryPropParams.vue";
+import StorySettingParams from "@/components/component-story/StorySettingParams.vue";
+import StorySlotParams from "@/components/component-story/StorySlotParams.vue";
+import AppMenu from "@/components/menu/AppMenu.vue";
+import MenuItem from "@/components/menu/MenuItem.vue";
+import UiButton from "@/components/ui/UiButton.vue";
+import UiCard from "@/components/ui/UiCard.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import UiCounter from "@/components/ui/UiCounter.vue";
+import UiTab from "@/components/ui/UiTab.vue";
+import UiTabBar from "@/components/ui/UiTabBar.vue";
+import {
+  isEventParam,
+  isModelParam,
+  isPropParam,
+  isSettingParam,
+  isSlotParam,
+  ModelParam,
+  type Param,
+} from "@/libs/story/story-param";
+import "highlight.js/styles/github-dark.css";
+import { uniqueId, upperFirst } from "lodash-es";
+import { computed, reactive, ref, watch, watchEffect } from "vue";
+import { useRoute } from "vue-router";
+
+const tab = (tab: TAB, params: Param[]) =>
+  reactive({
+    onClick: () => (selectedTab.value = tab),
+    active: computed(() => selectedTab.value === tab),
+    disabled: computed(() => params.length === 0),
+  });
+
+const props = defineProps<{
+  params: (Param | ModelParam)[];
+  presets?: Record<
+    string,
+    {
+      props?: Record<string, any>;
+      settings?: Record<string, any>;
+    }
+  >;
+}>();
+
+enum TAB {
+  NONE,
+  PROPS,
+  EVENTS,
+  SLOTS,
+  SETTINGS,
+}
+
+const modelParams = computed(() => props.params.filter(isModelParam));
+
+const propParams = computed(() => [
+  ...props.params.filter(isPropParam),
+  ...modelParams.value.map((modelParam) => modelParam.getPropParam()),
+]);
+
+const eventParams = computed(() => [
+  ...props.params.filter(isEventParam),
+  ...modelParams.value.map((modelParam) => modelParam.getEventParam()),
+]);
+
+const settingParams = computed(() => props.params.filter(isSettingParam));
+const slotParams = computed(() => props.params.filter(isSlotParam));
+
+const selectedTab = ref<TAB>(TAB.NONE);
+
+if (propParams.value.length !== 0) {
+  selectedTab.value = TAB.PROPS;
+} else if (eventParams.value.length !== 0) {
+  selectedTab.value = TAB.EVENTS;
+} else if (slotParams.value.length !== 0) {
+  selectedTab.value = TAB.SLOTS;
+} else if (settingParams.value.length !== 0) {
+  selectedTab.value = TAB.SETTINGS;
+}
+
+const propValues = reactive<Record<string, any>>({});
+const settingValues = reactive<Record<string, any>>({});
+const eventsLog = ref<
+  { id: string; name: string; args: { name: string; value: any }[] }[]
+>([]);
+const unreadEventsCount = ref(0);
+
+const resetProps = () => {
+  propParams.value.forEach((param) => {
+    propValues[param.name] = param.getPresetValue();
+  });
+};
+
+const resetSettings = () => {
+  settingParams.value.forEach((param) => {
+    settingValues[param.name] = param.getPresetValue();
+  });
+};
+
+watchEffect(() => {
+  resetProps();
+  resetSettings();
+});
+
+watch(selectedTab, (tab) => {
+  if (tab === TAB.EVENTS) {
+    unreadEventsCount.value = 0;
+  }
+});
+
+const logEvent = (name: string, args: { name: string; value: any }[]) => {
+  if (selectedTab.value !== TAB.EVENTS) {
+    unreadEventsCount.value += 1;
+  }
+
+  eventsLog.value.unshift({
+    id: uniqueId("event-log"),
+    name,
+    args,
+  });
+};
+
+const eventLogRows = computed(() => {
+  return eventsLog.value.map((eventLog) => {
+    const args = eventLog.args
+      .map((arg) => `${arg.name}: ${JSON.stringify(arg.value)}`)
+      .join(", ");
+
+    return {
+      id: eventLog.id,
+      name: eventLog.name,
+      args: `${eventLog.name}(${args})`,
+    };
+  });
+});
+
+const slotProperties = computed(() => {
+  const properties: Record<string, any> = {};
+
+  propParams.value.forEach(({ name }) => {
+    properties[name] = propValues[name];
+  });
+
+  eventParams.value.forEach((eventParam) => {
+    properties[`on${upperFirst(eventParam.name)}`] = (...args: any[]) => {
+      if (eventParam.isVModel()) {
+        propValues[eventParam.rawName] = args[0];
+      }
+      const logArgs = Object.keys(eventParam.getArguments()).map(
+        (argName, index) => ({
+          name: argName,
+          value: args[index],
+        })
+      );
+      eventParam.getPresetValue()?.(...args);
+      logEvent(eventParam.name, logArgs);
+    };
+  });
+
+  return properties;
+});
+
+const slotSettings = computed(() => {
+  const result: Record<string, any> = {};
+
+  settingParams.value.forEach(({ name }) => {
+    result[name] = settingValues[name];
+  });
+
+  return result;
+});
+
+const documentation = ref();
+
+const route = useRoute();
+
+const mdPaths = import.meta.glob("../../stories/*.md", { as: "raw" });
+
+if (route.meta.storyMdPath !== undefined && route.meta.storyMdPath in mdPaths) {
+  mdPaths[route.meta.storyMdPath]().then((md) => {
+    documentation.value = md;
+  });
+}
+
+const applyPreset = (preset: {
+  props?: Record<string, any>;
+  settings?: Record<string, any>;
+}) => {
+  if (preset.props !== undefined) {
+    Object.entries(preset.props).forEach(([name, value]) => {
+      propValues[name] = value;
+    });
+  }
+
+  if (preset.settings !== undefined) {
+    Object.entries(preset.settings).forEach(([name, value]) => {
+      settingValues[name] = value;
+    });
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+.event-tab {
+  gap: 0.5rem;
+}
+
+.preset-tab {
+  margin-left: auto;
+}
+
+.event-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.events-log {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.event-log {
+  opacity: 0.5;
+
+  &:first-child {
+    opacity: 1;
+  }
+}
+
+.tabs {
+  display: flex;
+  padding: 1rem;
+  gap: 1rem;
+
+  .tab-content {
+    flex: 1;
+    height: auto;
+  }
+}
+
+.documentation {
+  margin: 1rem;
+
+  .ui-title {
+    margin-bottom: 1rem;
+  }
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StoryEventParams.vue

@@ -0,0 +1,34 @@
+<template>
+  <StoryParamsTable>
+    <thead>
+      <tr>
+        <th>Event</th>
+        <th>Type</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="param in params" :key="param.name">
+        <th class="name">
+          {{ param.getFullName() }}
+        </th>
+        <td>
+          <CodeHighlight :code="param.getTypeLabel()" />
+        </td>
+        <td>
+          {{ param.getHelp() }}
+        </td>
+      </tr>
+    </tbody>
+  </StoryParamsTable>
+</template>
+
+<script lang="ts" setup>
+import CodeHighlight from "@/components/CodeHighlight.vue";
+import StoryParamsTable from "@/components/component-story/StoryParamsTable.vue";
+import type { EventParam } from "@/libs/story/story-param";
+
+defineProps<{
+  params: EventParam[];
+}>();
+</script>

@xen-orchestra/lite/src/components/component-story/StoryExampleComponent.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="story-example-component">
+    Default slot:
+    <div class="slot">
+      <slot />
+    </div>
+    Named slot:
+    <div class="slot">
+      <slot name="named-slot" />
+    </div>
+    Named scoped slot:
+    <div class="slot">
+      <slot :moon-distance="moonDistance" name="named-scoped-slot" />
+    </div>
+    Props:
+    <div>Required string prop: {{ imString }}</div>
+    <div>Required number prop: {{ imNumber }}</div>
+    <div>Optional string prop: {{ imOptional }}</div>
+    <div>Optional string prop with default: {{ imOptionalWithDefault }}</div>
+    Input for default v-model:
+    <input
+      :value="modelValue"
+      @input="
+        emit('update:modelValue', ($event.target as HTMLInputElement)?.value)
+      "
+    />
+    Input for v-model:customModel:
+    <input
+      :value="customModel"
+      @input="
+        emit('update:customModel', ($event.target as HTMLInputElement)?.value)
+      "
+    />
+    Event with no arguments:
+    <button type="button" @click="emit('click')">Click me</button>
+    Event with argument:
+    <button type="button" @click="emit('clickWithArg', 'my-id')">
+      Click me
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const moonDistance = 384400;
+
+withDefaults(
+  defineProps<{
+    imString: string;
+    imNumber: number;
+    imOptional?: string;
+    imOptionalWithDefault?: string;
+    modelValue?: string;
+    customModel?: string;
+  }>(),
+  {
+    imOptionalWithDefault: "My default value",
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: string): void;
+  (event: "update:customModel", value: string): void;
+  (event: "click"): void;
+  (event: "clickWithArg", id: string): void;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+.story-example-component {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.slot {
+  padding: 1rem;
+  border: 1px dashed black;
+  border-radius: 1rem;
+
+  &:empty {
+    display: none;
+  }
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StoryMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <RouterLink :to="{ name: 'story' }">
+    <UiTitle type="h4">Stories</UiTitle>
+  </RouterLink>
+  <ul class="links">
+    <li v-for="route in routes" :key="route.name">
+      <RouterLink class="link" :to="route">
+        {{ route.meta.storyTitle }}
+      </RouterLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
+import UiTitle from "@/components/ui/UiTitle.vue";
+
+const { getRoutes } = useRouter();
+
+const routes = getRoutes().filter((route) => route.meta.isStory);
+</script>
+
+<style lang="postcss" scoped>
+.links {
+  padding: 1rem;
+}
+.link {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  font-size: 1.6rem;
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue

@@ -0,0 +1,41 @@
+<template>
+  <table class="story-params-table">
+    <slot />
+  </table>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="postcss" scoped>
+.story-params-table {
+  font-size: 1.4rem;
+  border-spacing: 0;
+
+  & :slotted(thead th) {
+    text-align: left;
+    padding: 0.3rem 0.6rem;
+  }
+
+  :slotted(tbody th.name) {
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  & :slotted(tbody tr) {
+    th,
+    td {
+      padding: 0.3rem 0.6rem;
+      border-bottom: 0.1rem solid var(--color-blue-scale-400);
+      vertical-align: center;
+    }
+
+    &:nth-child(odd) {
+      background-color: var(--background-color-extra-blue);
+    }
+  }
+
+  & :slotted(.help) {
+    font-style: italic;
+  }
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue

@@ -0,0 +1,176 @@
+<template>
+  <UiModal v-if="isRawValueModalOpen" @close="closeRawValueModal">
+    <CodeHighlight :code="rawValueModalPayload" />
+  </UiModal>
+  <StoryParamsTable>
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Type</th>
+        <th><!-- Reset Default --></th>
+        <th><!-- Widget --></th>
+        <th>Default</th>
+        <th>Help</th>
+      </tr>
+    </thead>
+    <tfoot>
+      <tr>
+        <td class="reset-all" colspan="6">
+          <span class="link" @click="emit('reset')">Reset</span>
+        </td>
+      </tr>
+    </tfoot>
+    <tbody>
+      <tr
+        v-for="param in params"
+        :key="param.name"
+        :class="{ required: param.isRequired() }"
+        class="row"
+      >
+        <th class="name">
+          {{ param.getFullName() }}
+        </th>
+        <td>
+          <CodeHighlight :code="param.getTypeLabel()" />
+        </td>
+        <td class="reset-param">
+          <UiIcon
+            v-if="
+              param.hasWidget() &&
+              !param.isRequired() &&
+              model[param.name] !== undefined
+            "
+            :icon="faClose"
+            class="reset-icon"
+            @click="model[param.name] = undefined"
+          />
+        </td>
+        <td>
+          <StoryWidget
+            v-if="param.hasWidget() && param.name in model"
+            v-model="model[param.name]"
+            :required="param.isRequired()"
+            :widget="param.getWidget()!"
+          />
+          <span
+            v-else-if="model[param.name] !== undefined"
+            class="link raw-value"
+            @click.prevent="openRawValueModal(model[param.name])"
+          >
+            View current value
+          </span>
+        </td>
+        <td>
+          <code
+            v-if="!param.isRequired()"
+            :class="{ active: model[param.name] === undefined }"
+            class="default-value"
+          >
+            {{ JSON.stringify(param.getDefaultValue()) ?? "undefined" }}
+          </code>
+          <span v-else>-</span>
+        </td>
+        <td class="help">
+          {{ param.getHelp() }}
+        </td>
+      </tr>
+    </tbody>
+  </StoryParamsTable>
+</template>
+
+<script lang="ts" setup>
+import CodeHighlight from "@/components/CodeHighlight.vue";
+import StoryParamsTable from "@/components/component-story/StoryParamsTable.vue";
+import StoryWidget from "@/components/component-story/StoryWidget.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiModal from "@/components/ui/UiModal.vue";
+import useModal from "@/composables/modal.composable";
+import useSortedCollection from "@/composables/sorted-collection.composable";
+import type { PropParam } from "@/libs/story/story-param";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { useVModel } from "@vueuse/core";
+import { toRef } from "vue";
+
+const props = defineProps<{
+  params: PropParam[];
+  modelValue: Record<string, any>;
+}>();
+
+const params = useSortedCollection(toRef(props, "params"), (p1, p2) => {
+  if (p1.isRequired() === p2.isRequired()) {
+    return 0;
+  }
+
+  return p1.isRequired() ? -1 : 1;
+});
+
+const emit = defineEmits<{
+  (event: "reset"): void;
+  (event: "update:modelValue", value: any): void;
+}>();
+
+const model = useVModel(props, "modelValue", emit);
+
+const {
+  open: openRawValueModal,
+  close: closeRawValueModal,
+  isOpen: isRawValueModalOpen,
+  payload: rawValueModalPayload,
+} = useModal<string>();
+</script>
+
+<style lang="postcss" scoped>
+.reset-param {
+  text-align: center;
+  width: 3rem;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    padding: 0.4rem 0.6rem;
+    cursor: pointer;
+    color: var(--color-blue-scale-300);
+    border-radius: 0.4rem;
+    gap: 0.6rem;
+
+    &.active {
+      font-weight: 600;
+      cursor: default;
+      color: var(--color-green-infra-l20);
+    }
+  }
+}
+
+.reset-all {
+  text-align: right;
+  padding-top: 1.2rem;
+}
+
+.reset-icon {
+  cursor: pointer;
+}
+
+.row:not(.required) {
+  & > th {
+    font-weight: normal;
+    opacity: 0.7;
+  }
+}
+
+.help {
+  font-style: italic;
+  color: var(--color-blue-scale-200);
+}
+
+.default-value {
+  font-style: italic;
+  opacity: 0.2;
+
+  &.active {
+    font-weight: 600;
+    font-style: normal;
+    opacity: 1;
+    color: var(--color-green-infra-base);
+  }
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StorySettingParams.vue

@@ -0,0 +1,61 @@
+<template>
+  <StoryParamsTable>
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th><!--Widget--></th>
+        <th>Help</th>
+      </tr>
+    </thead>
+    <tfoot>
+      <tr>
+        <td colspan="6" class="reset-all">
+          <span class="link" @click="emit('reset')">Reset</span>
+        </td>
+      </tr>
+    </tfoot>
+    <tbody>
+      <tr v-for="param in params" :key="param.name">
+        <th class="name">
+          {{ param.getFullName() }}
+        </th>
+        <td>
+          <StoryWidget
+            v-if="param.hasWidget() && model !== undefined"
+            v-model="model[param.name]"
+            :widget="param.getWidget()!"
+          />
+        </td>
+        <td>
+          {{ param.getHelp() }}
+        </td>
+      </tr>
+    </tbody>
+  </StoryParamsTable>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from "@vueuse/core";
+import StoryParamsTable from "@/components/component-story/StoryParamsTable.vue";
+import StoryWidget from "@/components/component-story/StoryWidget.vue";
+import type { SettingParam } from "@/libs/story/story-param";
+
+const props = defineProps<{
+  params: SettingParam[];
+  modelValue?: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+  (event: "reset"): void;
+  (event: "update:modelValue", value: any): void;
+}>();
+
+const model = useVModel(props, "modelValue", emit);
+</script>
+
+<style lang="postcss">
+.reset-all {
+  text-align: right;
+  padding-top: 1.2rem;
+}
+</style>

@xen-orchestra/lite/src/components/component-story/StorySlotParams.vue

@@ -0,0 +1,35 @@
+<template>
+  <StoryParamsTable>
+    <thead>
+      <tr>
+        <th>Slot</th>
+        <th>Slots props</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="param in params" :key="param.name">
+        <th class="name">
+          {{ param.getFullName() }}
+        </th>
+        <td>
+          <CodeHighlight v-if="param.hasProps()" :code="param.getPropsType()" />
+          <span v-else>-</span>
+        </td>
+        <td class="help">
+          {{ param.getHelp() }}
+        </td>
+      </tr>
+    </tbody>
+  </StoryParamsTable>
+</template>
+
+<script lang="ts" setup>
+import CodeHighlight from "@/components/CodeHighlight.vue";
+import StoryParamsTable from "@/components/component-story/StoryParamsTable.vue";
+import type { SlotParam } from "@/libs/story/story-param";
+
+defineProps<{
+  params: SlotParam[];
+}>();
+</script>

@xen-orchestra/lite/src/components/component-story/StoryWidget.vue

@@ -0,0 +1,84 @@
+<template>
+  <FormSelect
+    v-if="isSelectWidget(widget)"
+    v-model="model"
+    :wrapper-attrs="{ class: 'full-width' }"
+  >
+    <option v-if="!required && model === undefined" :value="undefined" />
+    <option
+      v-for="choice in widget.choices"
+      :key="choice.label"
+      :value="choice.value"
+    >
+      {{ choice.label }}
+    </option>
+  </FormSelect>
+  <div v-else-if="isRadioWidget(widget)" class="radio">
+    <FormInputWrapper v-for="choice in widget.choices" :key="choice.label">
+      <FormRadio v-model="model" :value="choice.value" />
+      {{ choice.label }}
+    </FormInputWrapper>
+  </div>
+  <div v-else-if="isBooleanWidget(widget)">
+    <FormCheckbox v-model="model" />
+  </div>
+  <FormInput
+    v-else-if="isNumberWidget(widget)"
+    v-model.number="model"
+    type="number"
+  />
+  <FormInput v-else-if="isTextWidget(widget)" v-model="model" />
+  <FormJson v-else-if="isObjectWidget(widget)" v-model="model" />
+</template>
+
+<script lang="ts" setup>
+import {
+  isBooleanWidget,
+  isNumberWidget,
+  isObjectWidget,
+  isRadioWidget,
+  isSelectWidget,
+  isTextWidget,
+  type Widget,
+} from "@/libs/story/story-widget";
+import { useVModel } from "@vueuse/core";
+import { defineAsyncComponent } from "vue";
+
+const FormJson = defineAsyncComponent(
+  () => import("@/components/form/FormJson.vue")
+);
+const FormSelect = defineAsyncComponent(
+  () => import("@/components/form/FormSelect.vue")
+);
+const FormCheckbox = defineAsyncComponent(
+  () => import("@/components/form/FormCheckbox.vue")
+);
+const FormInput = defineAsyncComponent(
+  () => import("@/components/form/FormInput.vue")
+);
+const FormInputWrapper = defineAsyncComponent(
+  () => import("@/components/form/FormInputWrapper.vue")
+);
+const FormRadio = defineAsyncComponent(
+  () => import("@/components/form/FormRadio.vue")
+);
+
+const props = defineProps<{
+  widget: Widget;
+  modelValue: any;
+  required?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: any): void;
+}>();
+
+const model = useVModel(props, "modelValue", emit);
+</script>
+
+<style lang="postcss" scoped>
+.radio {
+  display: flex;
+  gap: 1rem;
+}
+</style>

@xen-orchestra/lite/src/components/form/FormCheckbox.vue

@@ -35,7 +35,7 @@ import {
 } from "vue";
 import { faCheck, faCircle, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { useVModel } from "@vueuse/core";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 // Temporary workaround for https://github.com/vuejs/core/issues/4294
 interface Props extends Omit<InputHTMLAttributes, ""> {

@xen-orchestra/lite/src/components/form/FormInput.vue

@@ -65,7 +65,7 @@ import type { Color } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { useTextareaAutosize, useVModel } from "@vueuse/core";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 // Temporary workaround for https://github.com/vuejs/core/issues/4294
 interface Props extends Omit<InputHTMLAttributes, ""> {

@xen-orchestra/lite/src/components/form/FormInputWrapper.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { computed, provide, useSlots } from "vue";
 import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 const slots = useSlots();
 

@xen-orchestra/lite/src/components/infra/InfraAction.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

@xen-orchestra/lite/src/components/infra/InfraHostItem.vue

@@ -14,6 +14,12 @@
     >
       {{ host.name_label || "(Host)" }}
       <template #actions>
+        <InfraAction
+          :icon="faStar"
+          class="master-icon"
+          v-if="isPoolMaster"
+          v-tooltip="'Master'"
+        />
         <InfraAction
           :icon="isExpanded ? faAngleDown : faAngleUp"
           @click="toggle()"
@@ -32,6 +38,7 @@ import {
   faAngleDown,
   faAngleUp,
   faServer,
+  faStar,
 } from "@fortawesome/free-solid-svg-icons";
 import { useToggle } from "@vueuse/core";
 import InfraAction from "@/components/infra/InfraAction.vue";
@@ -39,6 +46,7 @@ import InfraItemLabel from "@/components/infra/InfraItemLabel.vue";
 import InfraVmList from "@/components/infra/InfraVmList.vue";
 import { hasEllipsis } from "@/libs/utils";
 import { useHostStore } from "@/stores/host.store";
+import { usePoolStore } from "@/stores/pool.store";
 import { useUiStore } from "@/stores/ui.store";
 
 const props = defineProps<{
@@ -48,6 +56,11 @@ const props = defineProps<{
 const hostStore = useHostStore();
 const host = computed(() => hostStore.getRecord(props.hostOpaqueRef));
 
+const poolStore = usePoolStore();
+const isPoolMaster = computed(
+  () => poolStore.pool?.master === props.hostOpaqueRef
+);
+
 const uiStore = useUiStore();
 
 const isCurrentHost = computed(
@@ -67,4 +80,8 @@ const isTooltipDisabled = (target: HTMLElement) =>
 .infra-vm-list:deep(.link) {
   padding-left: 4.5rem;
 }
+
+.master-icon {
+  color: var(--color-orange-world-base);
+}
 </style>

@xen-orchestra/lite/src/components/infra/InfraHostList.vue

@@ -1,6 +1,9 @@
 <template>
   <ul class="infra-host-list">
-    <li v-if="!isReady">{{ $t("loading-hosts") }}</li>
+    <li v-if="isLoading">{{ $t("loading-hosts") }}</li>
+    <li v-else-if="hasError" class="text-error">
+      {{ $t("error-no-data") }}
+    </li>
     <template v-else>
       <InfraHostItem
         v-for="opaqueRef in opaqueRefs"
@@ -17,5 +20,15 @@ import InfraHostItem from "@/components/infra/InfraHostItem.vue";
 import { useHostStore } from "@/stores/host.store";
 
 const hostStore = useHostStore();
-const { opaqueRefs, isReady } = storeToRefs(hostStore);
+const { hasError, isLoading, opaqueRefs } = storeToRefs(hostStore);
 </script>
+
+<style lang="postcss" scoped>
+.text-error {
+  padding-left: 3rem;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: var(--color-red-vates-base);
+}
+</style>

@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import type { RouteLocationRaw } from "vue-router";
 

@xen-orchestra/lite/src/components/infra/InfraLoadingItem.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

@xen-orchestra/lite/src/components/infra/InfraPoolList.vue

@@ -1,9 +1,12 @@
 <template>
   <ul class="infra-pool-list">
     <InfraLoadingItem
-      v-if="!isReady || pool === undefined"
+      v-if="isLoading || pool === undefined"
       :icon="faBuilding"
     />
+    <li v-else-if="hasError" class="text-error">
+      {{ $t("error-no-data") }}
+    </li>
     <li v-else class="infra-pool-item">
       <InfraItemLabel
         :icon="faBuilding"
@@ -30,7 +33,7 @@ import InfraVmList from "@/components/infra/InfraVmList.vue";
 import { usePoolStore } from "@/stores/pool.store";
 
 const poolStore = usePoolStore();
-const { pool, isReady } = storeToRefs(poolStore);
+const { hasError, isLoading, pool } = storeToRefs(poolStore);
 </script>
 
 <style lang="postcss" scoped>
@@ -42,4 +45,12 @@ const { pool, isReady } = storeToRefs(poolStore);
 .infra-vm-list:deep(.link) {
   padding-left: 3rem;
 }
+
+.text-error {
+  padding-left: 3rem;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: var(--color-red-vates-base);
+}
 </style>

@xen-orchestra/lite/src/components/infra/InfraVmList.vue

@@ -1,9 +1,11 @@
 <template>
   <ul class="infra-vm-list">
-    <template v-if="!isReady">
+    <template v-if="isLoading">
       <InfraLoadingItem v-for="i in 3" :icon="faDisplay" :key="i" />
     </template>
+    <p class="text-error" v-else-if="hasError">{{ $t("error-no-data") }}</p>
     <InfraVmItem
+      v-else
       v-for="vmOpaqueRef in vmOpaqueRefs"
       :key="vmOpaqueRef"
       :vm-opaque-ref="vmOpaqueRef"
@@ -24,9 +26,18 @@ const props = defineProps<{
 }>();
 
 const vmStore = useVmStore();
-const { opaqueRefsByHostRef, isReady } = storeToRefs(vmStore);
-
+const { hasError, isLoading, opaqueRefsByHostRef } = storeToRefs(vmStore);
 const vmOpaqueRefs = computed(() =>
   opaqueRefsByHostRef.value.get(props.hostOpaqueRef ?? "OpaqueRef:NULL")
 );
 </script>
+
+<style scoped lang="postcss">
+.text-error {
+  padding-left: 3rem;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 150%;
+  color: var(--color-red-vates-base);
+}
+</style>

@xen-orchestra/lite/src/components/menu/MenuItem.vue

@@ -39,7 +39,7 @@ import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { noop } from "@vueuse/core";
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuTrigger from "@/components/menu/MenuTrigger.vue";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 const props = defineProps<{
   icon?: IconDefinition;

@xen-orchestra/lite/src/components/menu/MenuTrigger.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 defineProps<{
   active?: boolean;

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuProvisionning.vue

@@ -0,0 +1,100 @@
+<template>
+  <UiCard>
+    <UiCardTitle>
+      {{ $t("cpu-provisioning") }}
+      <template #right>
+        <!-- TODO: add a tooltip for the warning icon -->
+        <UiStatusIcon v-if="state !== 'success'" :state="state" />
+      </template>
+    </UiCardTitle>
+    <div v-if="isReady" class="progress-item" :class="state">
+      <UiProgressBar color="custom" :value="value" :max-value="maxValue" />
+      <UiProgressScale :max-value="maxValue" unit="%" :steps="1" />
+      <UiProgressLegend :label="$t('vcpus')" :value="`${value}%`" />
+      <UiCardFooter>
+        <template #left>
+          <p>{{ $t("vcpus-used") }}</p>
+          <p class="footer-value">{{ nVCpuInUse }}</p>
+        </template>
+        <template #right>
+          <p>{{ $t("total-cpus") }}</p>
+          <p class="footer-value">{{ nPCpu }}</p>
+        </template>
+      </UiCardFooter>
+    </div>
+    <UiSpinner v-else class="spinner" />
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import UiCard from "@/components/ui/UiCard.vue";
+import UiCardFooter from "@/components/ui/UiCardFooter.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
+import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
+import UiProgressScale from "@/components/ui/progress/UiProgressScale.vue";
+import UiSpinner from "@/components/ui/UiSpinner.vue";
+import UiStatusIcon from "@/components/ui/icon/UiStatusIcon.vue";
+import { isHostRunning, percent } from "@/libs/utils";
+import { useHostStore } from "@/stores/host.store";
+import { useVmMetricsStore } from "@/stores/vm-metrics.store";
+import { useVmStore } from "@/stores/vm.store";
+
+const ACTIVE_STATES = new Set(["Running", "Paused"]);
+
+const { allRecords: hosts, isReady: hostStoreIsReady } = storeToRefs(
+  useHostStore()
+);
+const { allRecords: vms, isReady: vmStoreIsReady } = storeToRefs(useVmStore());
+const vmMetricsStore = useVmMetricsStore();
+
+const nPCpu = computed(() =>
+  hosts.value.reduce(
+    (total, host) =>
+      isHostRunning(host) ? total + Number(host.cpu_info.cpu_count) : total,
+    0
+  )
+);
+const nVCpuInUse = computed(() =>
+  vms.value.reduce(
+    (total, vm) =>
+      ACTIVE_STATES.has(vm.power_state)
+        ? total + vmMetricsStore.getRecord(vm.metrics).VCPUs_number
+        : total,
+    0
+  )
+);
+const value = computed(() =>
+  Math.round(percent(nVCpuInUse.value, nPCpu.value))
+);
+const maxValue = computed(() => Math.ceil(value.value / 100) * 100);
+const state = computed(() => (value.value > 100 ? "warning" : "success"));
+const isReady = computed(
+  () => vmStoreIsReady.value && vmMetricsStore.isReady && hostStoreIsReady.value
+);
+</script>
+
+<style lang="postcss" scoped>
+.progress-item {
+  margin-top: 2.6rem;
+  --progress-bar-height: 1.2rem;
+  --progress-bar-color: var(--color-extra-blue-base);
+  --progress-bar-background-color: var(--color-blue-scale-400);
+  &.warning {
+    --progress-bar-color: var(--color-orange-world-base);
+    --footer-value-color: var(--color-orange-world-base);
+  }
+  & .footer-value {
+    color: var(--footer-value-color);
+  }
+}
+.spinner {
+  color: var(--color-extra-blue-base);
+  display: flex;
+  margin: 2.6rem auto auto auto;
+  width: 40px;
+  height: 40px;
+}
+</style>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardCpuUsage.vue

@@ -1,13 +1,20 @@
 <template>
-  <UiCard>
+  <UiCard :color="hasError ? 'error' : undefined">
     <UiCardTitle>{{ $t("cpu-usage") }}</UiCardTitle>
     <HostsCpuUsage />
     <VmsCpuUsage />
   </UiCard>
 </template>
 <script lang="ts" setup>
+import { computed } from "vue";
 import HostsCpuUsage from "@/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue";
 import VmsCpuUsage from "@/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue";
 import UiCard from "@/components/ui/UiCard.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import { useVmStore } from "@/stores/vm.store";
+import { useHostStore } from "@/stores/host.store";
+
+const hasError = computed(
+  () => useVmStore().hasError || useHostStore().hasError
+);
 </script>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardNetworkChart.vue

@@ -1,5 +1,6 @@
 <template>
   <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <!-- TODO: display the NoData component in case of a data recovery error -->
   <LinearChart
     :data="data"
     :max-value="customMaxValue"
@@ -30,7 +31,7 @@ const data = computed<LinearChartData>(() => {
   const stats = hostLastWeekStats?.stats?.value;
   const timestampStart = hostLastWeekStats?.timestampStart?.value;
 
-  if (timestampStart === undefined || stats === undefined) {
+  if (timestampStart === undefined || stats == null) {
     return [];
   }
 

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardRamUsage.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCard>
+  <UiCard :color="hasError ? 'error' : undefined">
     <UiCardTitle>{{ $t("ram-usage") }}</UiCardTitle>
     <HostsRamUsage />
     <VmsRamUsage />
@@ -7,8 +7,15 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import HostsRamUsage from "@/components/pool/dashboard/ramUsage/HostsRamUsage.vue";
 import VmsRamUsage from "@/components/pool/dashboard/ramUsage/VmsRamUsage.vue";
 import UiCard from "@/components/ui/UiCard.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import { useVmStore } from "@/stores/vm.store";
+import { useHostStore } from "@/stores/host.store";
+
+const hasError = computed(
+  () => useVmStore().hasError || useHostStore().hasError
+);
 </script>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatus.vue

@@ -1,7 +1,9 @@
 <template>
-  <UiCard>
+  <UiCard :color="hasError ? 'error' : undefined">
     <UiCardTitle>{{ $t("status") }}</UiCardTitle>
-    <template v-if="isReady">
+    <UiSpinner v-if="isLoading" class="spinner" />
+    <NoDataError v-else-if="hasError" />
+    <template v-else>
       <PoolDashboardStatusItem
         :active="activeHostsCount"
         :label="$t('hosts')"
@@ -14,7 +16,6 @@
         :total="totalVmsCount"
       />
     </template>
-    <UiSpinner v-else class="spinner" />
   </UiCard>
 </template>
 
@@ -27,11 +28,16 @@ import UiSpinner from "@/components/ui/UiSpinner.vue";
 import { useHostMetricsStore } from "@/stores/host-metrics.store";
 import { useVmStore } from "@/stores/vm.store";
 import { computed } from "vue";
+import NoDataError from "@/components/NoDataError.vue";
 
 const vmStore = useVmStore();
 const hostMetricsStore = useHostMetricsStore();
 
-const isReady = computed(() => vmStore.isReady && hostMetricsStore.isReady);
+const hasError = computed(() => vmStore.hasError || hostMetricsStore.hasError);
+
+const isLoading = computed(
+  () => vmStore.isLoading && hostMetricsStore.isLoading
+);
 
 const totalHostsCount = computed(() => hostMetricsStore.opaqueRefs.length);
 const activeHostsCount = computed(() => {

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStorageUsage.vue

@@ -1,11 +1,13 @@
 <template>
-  <UiCard>
+  <UiCard :color="hasError ? 'error' : undefined">
     <UiCardTitle
       :left="$t('storage-usage')"
       :right="$t('top-#', { n: N_ITEMS })"
     />
+    <NoDataError v-if="hasError" />
     <UsageBar
-      :data="srStore.isReady ? data.result : undefined"
+      v-else
+      :data="isReady ? data.result : undefined"
       :nItems="N_ITEMS"
     >
       <template #footer>
@@ -16,6 +18,7 @@
 </template>
 
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { computed } from "vue";
 import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue";
@@ -23,8 +26,10 @@ import UsageBar from "@/components/UsageBar.vue";
 import UiCard from "@/components/ui/UiCard.vue";
 import { useSrStore } from "@/stores/storage.store";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import NoDataError from "@/components/NoDataError.vue";
 
 const srStore = useSrStore();
+const { hasError, isReady } = storeToRefs(srStore);
 
 const data = computed<{
   result: { id: string; label: string; value: number }[];

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue

@@ -4,7 +4,8 @@
     :left="$t('hosts')"
     :right="$t('top-#', { n: N_ITEMS })"
   />
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <NoDataError v-if="hasError" />
+  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
@@ -13,8 +14,13 @@ import UsageBar from "@/components/UsageBar.vue";
 import type { Stat } from "@/composables/fetch-stats.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
 import type { HostStats } from "@/libs/xapi-stats";
+import { useHostStore } from "@/stores/host.store";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { storeToRefs } from "pinia";
 import { computed, type ComputedRef, inject } from "vue";
+import NoDataError from "@/components/NoDataError.vue";
+
+const { hasError } = storeToRefs(useHostStore());
 
 const stats = inject<ComputedRef<Stat<HostStats>[]>>(
   "hostStats",
@@ -25,7 +31,7 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
   const result: { id: string; label: string; value: number }[] = [];
 
   stats.value.forEach((stat) => {
-    if (stat.stats === undefined) {
+    if (stat.stats == null) {
       return;
     }
 

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/PoolCpuUsageChart.vue

@@ -1,5 +1,6 @@
 <template>
   <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <!-- TODO: Display the NoDataError component in case of a data recovery error -->
   <LinearChart
     :data="data"
     :max-value="customMaxValue"
@@ -37,7 +38,7 @@ const data = computed<LinearChartData>(() => {
   const timestampStart = hostLastWeekStats?.timestampStart?.value;
   const stats = hostLastWeekStats?.stats?.value;
 
-  if (timestampStart === undefined || stats === undefined) {
+  if (timestampStart === undefined || stats == null) {
     return [];
   }
 

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue

@@ -4,7 +4,8 @@
     :left="$t('vms')"
     :right="$t('top-#', { n: N_ITEMS })"
   />
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <NoDataError v-if="hasError" />
+  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +16,11 @@ import type { Stat } from "@/composables/fetch-stats.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
 import type { VmStats } from "@/libs/xapi-stats";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import NoDataError from "@/components/NoDataError.vue";
+import { useVmStore } from "@/stores/vm.store";
+import { storeToRefs } from "pinia";
+
+const { hasError } = storeToRefs(useVmStore());
 
 const stats = inject<ComputedRef<Stat<VmStats>[]>>(
   "vmStats",

@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/HostsRamUsage.vue

@@ -4,7 +4,8 @@
     :left="$t('hosts')"
     :right="$t('top-#', { n: N_ITEMS })"
   />
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <NoDataError v-if="hasError" />
+  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +16,11 @@ import type { Stat } from "@/composables/fetch-stats.composable";
 import { formatSize, parseRamUsage } from "@/libs/utils";
 import type { HostStats } from "@/libs/xapi-stats";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import NoDataError from "@/components/NoDataError.vue";
+import { useHostStore } from "@/stores/host.store";
+import { storeToRefs } from "pinia";
+
+const { hasError } = storeToRefs(useHostStore());
 
 const stats = inject<ComputedRef<Stat<HostStats>[]>>(
   "hostStats",
@@ -30,7 +36,7 @@ const data = computed(() => {
   }[] = [];
 
   stats.value.forEach((stat) => {
-    if (stat.stats === undefined) {
+    if (stat.stats == null) {
       return;
     }
 

@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/PoolRamUsage.vue

@@ -1,5 +1,6 @@
 <template>
   <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <!-- TODO: display the NoDataError component in case of a data recovery error -->
   <LinearChart
     :data="data"
     :max-value="customMaxValue"
@@ -54,7 +55,7 @@ const data = computed<LinearChartData>(() => {
   const timestampStart = hostLastWeekStats?.timestampStart?.value;
   const stats = hostLastWeekStats?.stats?.value;
 
-  if (timestampStart === undefined || stats === undefined) {
+  if (timestampStart === undefined || stats == null) {
     return [];
   }
 

@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/VmsRamUsage.vue

@@ -4,7 +4,8 @@
     :left="$t('vms')"
     :right="$t('top-#', { n: N_ITEMS })"
   />
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <NoDataError v-if="hasError" />
+  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +16,11 @@ import type { Stat } from "@/composables/fetch-stats.composable";
 import { formatSize, parseRamUsage } from "@/libs/utils";
 import type { VmStats } from "@/libs/xapi-stats";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import NoDataError from "@/components/NoDataError.vue";
+import { useVmStore } from "@/stores/vm.store";
+import { storeToRefs } from "pinia";
+
+const { hasError } = storeToRefs(useVmStore());
 
 const stats = inject<ComputedRef<Stat<VmStats>[]>>(
   "vmStats",
@@ -30,7 +36,7 @@ const data = computed(() => {
   }[] = [];
 
   stats.value.forEach((stat) => {
-    if (stat.stats === undefined) {
+    if (stat.stats == null) {
       return;
     }
 

@xen-orchestra/lite/src/components/tasks/TaskRow.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import RelativeTime from "@/components/RelativeTime.vue";
-import UiProgressBar from "@/components/ui/UiProgressBar.vue";
+import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
 import { parseDateTime } from "@/libs/utils";
 import type { XenApiTask } from "@/libs/xen-api";
 import { useHostStore } from "@/stores/host.store";

@xen-orchestra/lite/src/components/ui/UiActionButton.vue

@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { computed, inject, unref } from "vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 const props = withDefaults(
   defineProps<{

@xen-orchestra/lite/src/components/ui/UiBadge.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts" setup>
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 defineProps<{
   icon?: IconDefinition;

@xen-orchestra/lite/src/components/ui/UiButton.vue

@@ -18,7 +18,7 @@ import UiSpinner from "@/components/ui/UiSpinner.vue";
 import { computed, inject, unref } from "vue";
 import type { Color } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
 const props = withDefaults(
   defineProps<{

@xen-orchestra/lite/src/components/ui/UiCard.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="ui-card">
+  <div class="ui-card" :class="{ error: color === 'error' }">
     <slot />
   </div>
 </template>
 
+<script lang="ts" setup>
+defineProps<{
+  color?: "error";
+}>();
+</script>
+
 <style lang="postcss" scoped>
 .ui-card {
   height: fit-content;
@@ -12,4 +18,8 @@
   background-color: var(--background-color-primary);
   box-shadow: var(--shadow-200);
 }
+
+.error {
+  background-color: var(--background-color-red-vates);
+}
 </style>

@xen-orchestra/lite/src/components/ui/UiCardFooter.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="footer">
+    <div class="footer-card">
+      <slot name="left" />
+    </div>
+    <div class="footer-card">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="postcss" scoped>
+.footer {
+  color: var(--color-blue-scale-200);
+  display: flex;
+  font-size: 14px;
+  justify-content: space-between;
+}
+
+.footer-card {
+  display: flex;
+  text-transform: uppercase;
+  width: 45%;
+  justify-content: space-between;
+}
+
+:deep(.footer-card) p {
+  font-weight: 700;
+}
+</style>

@xen-orchestra/lite/src/components/ui/UiFilter.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { faRemove } from "@fortawesome/free-solid-svg-icons";
 
 const emit = defineEmits<{

@xen-orchestra/lite/src/components/ui/UiModal.vue

@@ -34,7 +34,7 @@
 
 <script lang="ts" setup>
 import UiButtonGroup from "@/components/ui/UiButtonGroup.vue";
-import UiIcon from "@/components/ui/UiIcon.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import UiTitle from "@/components/ui/UiTitle.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -146,7 +146,7 @@ const className = computed(() => {
 
 .content {
   overflow: auto;
-  min-height: 23rem;
+  font-size: 1.6rem;
   max-height: calc(100vh - 40rem);
   margin-top: 2rem;
 }

@xen-orchestra/lite/src/components/ui/icon/UiStatusIcon.vue

@@ -0,0 +1,49 @@
+<template>
+  <UiIcon :icon="icon" class="icon" :class="props.state" />
+</template>
+
+<script lang="ts" setup>
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import { computed } from "vue";
+import {
+  faCheckCircle,
+  faInfoCircle,
+  faWarning,
+} from "@fortawesome/free-solid-svg-icons";
+import type { Color } from "@/types";
+
+const props = defineProps<{
+  state: Color;
+}>();
+
+const icon = computed(() => {
+  switch (props.state) {
+    case "error":
+    case "warning":
+      return faWarning;
+    case "info":
+      return faInfoCircle;
+    default:
+      return faCheckCircle;
+  }
+});
+</script>
+
+<style scoped lang="postcss">
+.icon {
+  color: var(--icon-color);
+
+  &.error {
+    --icon-color: var(--color-red-vates-base);
+  }
+  &.warning {
+    --icon-color: var(--color-orange-world-base);
+  }
+  &.info {
+    --icon-color: var(--color-extra-blue-base);
+  }
+  &.success {
+    --icon-color: var(--color-green-infra-base);
+  }
+}
+</style>

@xen-orchestra/lite/src/components/ui/progress/UiProgressLegend.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="legend">
+    <span class="circle" />
+    <slot name="label">{{ label }}</slot>
+    <UiBadge class="badge">
+      <slot name="value">{{ value }}</slot>
+    </UiBadge>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiBadge from "@/components/ui/UiBadge.vue";
+
+defineProps<{
+  label?: string;
+  value?: string;
+}>();
+</script>
+
+<style scoped lang="postcss">
+.badge {
+  font-size: 0.9em;
+  font-weight: 700;
+}
+
+.circle {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--progress-bar-color);
+}
+
+.legend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin: 1.6em 0;
+}
+</style>

@xen-orchestra/lite/src/components/ui/progress/UiProgressScale.vue

@@ -0,0 +1,32 @@
+<template>
+  <p class="unit">
+    <span>0{{ unit }}</span>
+    <span v-for="step in steps" :key="step">
+      {{ Math.round((maxValue / (steps + 1)) * step) }}{{ unit }}
+    </span>
+    <span>{{ maxValue }}{{ unit }}</span>
+  </p>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    maxValue?: number;
+    steps?: number;
+    unit?: string;
+  }>(),
+  { maxValue: 100, steps: 1 }
+);
+</script>
+
+<style lang="postcss">
+.unit {
+  color: var(--color-blue-scale-300);
+  display: flex;
+  font-size: 12px;
+  font-weight: 400;
+  justify-content: space-between;
+  letter-spacing: 0.04em;
+  line-height: 16px;
+}
+</style>