feat(xo): POC XO Core, XO 6, XO Lite

Introduced by #7235
See https://github.com/vatesfr/xen-orchestra/pull/7235#discussion_r1431612789

.eslintrc.js

@@ -68,6 +68,11 @@ module.exports = {
 
     'no-console': ['error', { allow: ['warn', 'error'] }],
 
+    // this rule can prevent race condition bugs like parallel `a += await foo()`
+    //
+    // as it has a lots of false positive, it is only enabled as a warning for now
+    'require-atomic-updates': 'warn',
+
     strict: 'error',
   },
 }

.prettierignore

@@ -0,0 +1,3 @@
+@xen-orchestra/web
+@xen-orchestra/web-core
+@xen-orchestra/web-lite

@vates/fuse-vhd/package.json

@@ -22,7 +22,7 @@
     "fuse-native": "^2.2.6",
     "lru-cache": "^7.14.0",
     "promise-toolbox": "^0.21.0",
-    "vhd-lib": "^4.7.0"
+    "vhd-lib": "^4.8.0"
   },
   "scripts": {
     "postversion": "npm publish --access public"

@vates/nbd-client/index.mjs

@@ -4,7 +4,6 @@ import { connect } from 'node:tls'
 import { fromCallback, pRetry, pDelay, pTimeout, pFromCallback } from 'promise-toolbox'
 import { readChunkStrict } from '@vates/read-chunk'
 import { createLogger } from '@xen-orchestra/log'
-
 import {
   INIT_PASSWD,
   NBD_CMD_READ,
@@ -21,8 +20,6 @@ import {
   OPTS_MAGIC,
   NBD_CMD_DISC,
 } from './constants.mjs'
-import { Readable } from 'node:stream'
-
 const { warn } = createLogger('vates:nbd-client')
 
 // documentation is here : https://github.com/NetworkBlockDevice/nbd/blob/master/doc/proto.md
@@ -125,6 +122,8 @@ export default class NbdClient {
     if (!this.#connected) {
       return
     }
+    this.#connected = false
+    const socket = this.#serverSocket
 
     const queryId = this.#nextCommandQueryId
     this.#nextCommandQueryId++
@@ -137,12 +136,12 @@ export default class NbdClient {
     buffer.writeBigUInt64BE(0n, 16)
     buffer.writeInt32BE(0, 24)
     const promise = pFromCallback(cb => {
-      this.#serverSocket.end(buffer, 'utf8', cb)
+      socket.end(buffer, 'utf8', cb)
     })
     try {
       await pTimeout.call(promise, this.#messageTimeout)
     } catch (error) {
-      this.#serverSocket.destroy()
+      socket.destroy()
     }
     this.#serverSocket = undefined
     this.#connected = false
@@ -290,7 +289,7 @@ export default class NbdClient {
     }
   }
 
-  async readBlock(index, size = NBD_DEFAULT_BLOCK_SIZE) {
+  async #readBlock(index, size) {
     // we don't want to add anything in backlog while reconnecting
     if (this.#reconnectingPromise) {
       await this.#reconnectingPromise
@@ -338,57 +337,13 @@ export default class NbdClient {
     })
   }
 
-  async *readBlocks(indexGenerator = 2 * 1024 * 1024) {
-    // default : read all blocks
-    if (typeof indexGenerator === 'number') {
-      const exportSize = Number(this.#exportSize)
-      const chunkSize = indexGenerator
-
-      indexGenerator = function* () {
-        const nbBlocks = Math.ceil(exportSize / chunkSize)
-        for (let index = 0; index < nbBlocks; index++) {
-          yield { index, size: chunkSize }
-        }
-      }
-    }
-    const readAhead = []
-    const readAheadMaxLength = this.#readAhead
-    const makeReadBlockPromise = (index, size) => {
-      const promise = pRetry(() => this.readBlock(index, size), {
-        tries: this.#readBlockRetries,
-        onRetry: async err => {
-          warn('will retry reading block ', index, err)
-          await this.reconnect()
-        },
-      })
-      // error is handled during unshift
-      promise.catch(() => {})
-      return promise
-    }
-
-    // read all blocks, but try to keep readAheadMaxLength promise waiting ahead
-    for (const { index, size } of indexGenerator()) {
-      // stack readAheadMaxLength promises before starting to handle the results
-      if (readAhead.length === readAheadMaxLength) {
-        // any error will stop reading blocks
-        yield readAhead.shift()
-      }
-
-      readAhead.push(makeReadBlockPromise(index, size))
-    }
-    while (readAhead.length > 0) {
-      yield readAhead.shift()
-    }
-  }
-
-  stream(chunkSize) {
-    async function* iterator() {
-      for await (const chunk of this.readBlocks(chunkSize)) {
-        yield chunk
-      }
-    }
-    // create a readable stream instead of returning the iterator
-    // since iterators don't like unshift and partial reading
-    return Readable.from(iterator())
+  async readBlock(index, size = NBD_DEFAULT_BLOCK_SIZE) {
+    return pRetry(() => this.#readBlock(index, size), {
+      tries: this.#readBlockRetries,
+      onRetry: async err => {
+        warn('will retry reading block ', index, err)
+        await this.reconnect()
+      },
+    })
   }
 }

@vates/nbd-client/multi.mjs

@@ -0,0 +1,87 @@
+import { asyncEach } from '@vates/async-each'
+import { NBD_DEFAULT_BLOCK_SIZE } from './constants.mjs'
+import NbdClient from './index.mjs'
+import { createLogger } from '@xen-orchestra/log'
+
+const { warn } = createLogger('vates:nbd-client:multi')
+export default class MultiNbdClient {
+  #clients = []
+  #readAhead
+
+  get exportSize() {
+    return this.#clients[0].exportSize
+  }
+
+  constructor(settings, { nbdConcurrency = 8, readAhead = 16, ...options } = {}) {
+    this.#readAhead = readAhead
+    if (!Array.isArray(settings)) {
+      settings = [settings]
+    }
+    for (let i = 0; i < nbdConcurrency; i++) {
+      this.#clients.push(
+        new NbdClient(settings[i % settings.length], { ...options, readAhead: Math.ceil(readAhead / nbdConcurrency) })
+      )
+    }
+  }
+
+  async connect() {
+    const connectedClients = []
+    for (const clientId in this.#clients) {
+      const client = this.#clients[clientId]
+      try {
+        await client.connect()
+        connectedClients.push(client)
+      } catch (err) {
+        client.disconnect().catch(() => {})
+        warn(`can't connect to one nbd client`, { err })
+      }
+    }
+    if (connectedClients.length === 0) {
+      throw new Error(`Fail to connect to any Nbd client`)
+    }
+    if (connectedClients.length < this.#clients.length) {
+      warn(
+        `incomplete connection by multi Nbd, only ${connectedClients.length} over ${
+          this.#clients.length
+        } expected clients`
+      )
+      this.#clients = connectedClients
+    }
+  }
+
+  async disconnect() {
+    await asyncEach(this.#clients, client => client.disconnect(), {
+      stopOnError: false,
+    })
+  }
+
+  async readBlock(index, size = NBD_DEFAULT_BLOCK_SIZE) {
+    const clientId = index % this.#clients.length
+    return this.#clients[clientId].readBlock(index, size)
+  }
+
+  async *readBlocks(indexGenerator) {
+    // default : read all blocks
+    const readAhead = []
+    const makeReadBlockPromise = (index, size) => {
+      const promise = this.readBlock(index, size)
+      // error is handled during unshift
+      promise.catch(() => {})
+      return promise
+    }
+
+    // read all blocks, but try to keep readAheadMaxLength promise waiting ahead
+    for (const { index, size } of indexGenerator()) {
+      // stack readAheadMaxLength promises before starting to handle the results
+      if (readAhead.length === this.#readAhead) {
+        // any error will stop reading blocks
+        yield readAhead.shift()
+      }
+
+      readAhead.push(makeReadBlockPromise(index, size))
+    }
+    while (readAhead.length > 0) {
+      yield readAhead.shift()
+    }
+  }
+}

@vates/nbd-client/package.json

@@ -13,7 +13,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "engines": {
     "node": ">=14.0"
   },

@vates/nbd-client/tests/nbdclient.integ.mjs

@@ -1,4 +1,3 @@
-import NbdClient from '../index.mjs'
 import { spawn, exec } from 'node:child_process'
 import fs from 'node:fs/promises'
 import { test } from 'tap'
@@ -7,8 +6,10 @@ import { pFromCallback } from 'promise-toolbox'
 import { Socket } from 'node:net'
 import { NBD_DEFAULT_PORT } from '../constants.mjs'
 import assert from 'node:assert'
+import MultiNbdClient from '../multi.mjs'
 
-const FILE_SIZE = 10 * 1024 * 1024
+const CHUNK_SIZE = 1024 * 1024 // non default size
+const FILE_SIZE = 1024 * 1024 * 9.5 // non aligned file size
 
 async function createTempFile(size) {
   const tmpPath = await pFromCallback(cb => tmp.file(cb))
@@ -81,7 +82,7 @@ test('it works with unsecured network', async tap => {
   const path = await createTempFile(FILE_SIZE)
 
   let nbdServer = await spawnNbdKit(path)
-  const client = new NbdClient(
+  const client = new MultiNbdClient(
     {
       address: '127.0.0.1',
       exportname: 'MY_SECRET_EXPORT',
@@ -109,13 +110,13 @@ CYu1Xn/FVPx1HoRgWc7E8wFhDcA/P3SJtfIQWHB9FzSaBflKGR4t8WCE2eE8+cTB
 `,
     },
     {
+      nbdConcurrency: 1,
       readAhead: 2,
     }
   )
 
   await client.connect()
   tap.equal(client.exportSize, BigInt(FILE_SIZE))
-  const CHUNK_SIZE = 1024 * 1024 // non default size
   const indexes = []
   for (let i = 0; i < FILE_SIZE / CHUNK_SIZE; i++) {
     indexes.push(i)
@@ -127,9 +128,9 @@ CYu1Xn/FVPx1HoRgWc7E8wFhDcA/P3SJtfIQWHB9FzSaBflKGR4t8WCE2eE8+cTB
   })
   let i = 0
   for await (const block of nbdIterator) {
-    let blockOk = true
+    let blockOk = block.length === Math.min(CHUNK_SIZE, FILE_SIZE - CHUNK_SIZE * i)
     let firstFail
-    for (let j = 0; j < CHUNK_SIZE; j += 4) {
+    for (let j = 0; j < block.length; j += 4) {
       const wanted = i * CHUNK_SIZE + j
       const found = block.readUInt32BE(j)
       blockOk = blockOk && found === wanted
@@ -137,7 +138,7 @@ CYu1Xn/FVPx1HoRgWc7E8wFhDcA/P3SJtfIQWHB9FzSaBflKGR4t8WCE2eE8+cTB
         firstFail = j
       }
     }
-    tap.ok(blockOk, `check block ${i} content`)
+    tap.ok(blockOk, `check block ${i} content ${block.length}`)
     i++
 
     // flaky server is flaky
@@ -147,17 +148,6 @@ CYu1Xn/FVPx1HoRgWc7E8wFhDcA/P3SJtfIQWHB9FzSaBflKGR4t8WCE2eE8+cTB
       nbdServer = await spawnNbdKit(path)
     }
   }
-
-  // we can reuse the conneciton to read other blocks
-  // default iterator
-  const nbdIteratorWithDefaultBlockIterator = client.readBlocks()
-  let nb = 0
-  for await (const block of nbdIteratorWithDefaultBlockIterator) {
-    nb++
-    tap.equal(block.length, 2 * 1024 * 1024)
-  }
-
-  tap.equal(nb, 5)
   assert.rejects(() => client.readBlock(100, CHUNK_SIZE))
 
   await client.disconnect()

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

@@ -7,7 +7,7 @@
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
   "dependencies": {
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/backups": "^0.44.2",
+    "@xen-orchestra/backups": "^0.44.3",
     "@xen-orchestra/fs": "^4.1.3",
     "filenamify": "^6.0.0",
     "getopts": "^2.2.5",

@xen-orchestra/backups/_cleanVm.integ.mjs

@@ -67,6 +67,11 @@ async function generateVhd(path, opts = {}) {
     await VhdAbstract.createAlias(handler, path + '.alias.vhd', dataPath)
   }
 
+  if (opts.blocks) {
+    for (const blockId of opts.blocks) {
+      await vhd.writeEntireBlock({ id: blockId, buffer: Buffer.alloc(2 * 1024 * 1024 + 512, blockId) })
+    }
+  }
   await vhd.writeBlockAllocationTable()
   await vhd.writeHeader()
   await vhd.writeFooter()
@@ -230,7 +235,7 @@ test('it merges delta of non destroyed chain', async () => {
 
   const metadata = JSON.parse(await handler.readFile(`${rootPath}/metadata.json`))
   // size should be the size of children + grand children after the merge
-  assert.equal(metadata.size, 209920)
+  assert.equal(metadata.size, 104960)
 
   // merging is already tested in vhd-lib, don't retest it here (and theses vhd are as empty as my stomach at 12h12)
   // only check deletion
@@ -320,6 +325,7 @@ describe('tests multiple combination ', () => {
         const ancestor = await generateVhd(`${basePath}/ancestor.vhd`, {
           useAlias,
           mode: vhdMode,
+          blocks: [1, 3],
         })
         const child = await generateVhd(`${basePath}/child.vhd`, {
           useAlias,
@@ -328,6 +334,7 @@ describe('tests multiple combination ', () => {
             parentUnicodeName: 'ancestor.vhd' + (useAlias ? '.alias.vhd' : ''),
             parentUuid: ancestor.footer.uuid,
           },
+          blocks: [1, 2],
         })
         // a grand child  vhd in metadata
         await generateVhd(`${basePath}/grandchild.vhd`, {
@@ -337,6 +344,7 @@ describe('tests multiple combination ', () => {
             parentUnicodeName: 'child.vhd' + (useAlias ? '.alias.vhd' : ''),
             parentUuid: child.footer.uuid,
           },
+          blocks: [2, 3],
         })
 
         // an older parent that was merging in clean
@@ -395,7 +403,7 @@ describe('tests multiple combination ', () => {
 
         const metadata = JSON.parse(await handler.readFile(`${rootPath}/metadata.json`))
         // size should be the size of children + grand children + clean after the merge
-        assert.deepEqual(metadata.size, vhdMode === 'file' ? 314880 : undefined)
+        assert.deepEqual(metadata.size, vhdMode === 'file' ? 6502400 : 6501888)
 
         // broken vhd, non referenced, abandonned should be deleted ( alias and data)
         // ancestor and child should be merged

@xen-orchestra/backups/_cleanVm.mjs

@@ -36,34 +36,32 @@ const computeVhdsSize = (handler, vhdPaths) =>
   )
 
 // chain is [ ancestor, child_1, ..., child_n ]
-async function _mergeVhdChain(handler, chain, { logInfo, remove, merge, mergeBlockConcurrency }) {
-  if (merge) {
-    logInfo(`merging VHD chain`, { chain })
+async function _mergeVhdChain(handler, chain, { logInfo, remove, mergeBlockConcurrency }) {
+  logInfo(`merging VHD chain`, { chain })
 
-    let done, total
-    const handle = setInterval(() => {
-      if (done !== undefined) {
-        logInfo('merge in progress', {
-          done,
-          parent: chain[0],
-          progress: Math.round((100 * done) / total),
-          total,
-        })
-      }
-    }, 10e3)
-    try {
-      return await mergeVhdChain(handler, chain, {
-        logInfo,
-        mergeBlockConcurrency,
-        onProgress({ done: d, total: t }) {
-          done = d
-          total = t
-        },
-        removeUnused: remove,
+  let done, total
+  const handle = setInterval(() => {
+    if (done !== undefined) {
+      logInfo('merge in progress', {
+        done,
+        parent: chain[0],
+        progress: Math.round((100 * done) / total),
+        total,
       })
-    } finally {
-      clearInterval(handle)
     }
+  }, 10e3)
+  try {
+    return await mergeVhdChain(handler, chain, {
+      logInfo,
+      mergeBlockConcurrency,
+      onProgress({ done: d, total: t }) {
+        done = d
+        total = t
+      },
+      removeUnused: remove,
+    })
+  } finally {
+    clearInterval(handle)
   }
 }
 
@@ -471,23 +469,20 @@ export async function cleanVm(
   const metadataWithMergedVhd = {}
   const doMerge = async () => {
     await asyncMap(toMerge, async chain => {
-      const merged = await limitedMergeVhdChain(handler, chain, {
+      const { finalVhdSize } = await limitedMergeVhdChain(handler, chain, {
         logInfo,
         logWarn,
         remove,
-        merge,
         mergeBlockConcurrency,
       })
-      if (merged !== undefined) {
-        const metadataPath = vhdsToJSons[chain[chain.length - 1]] // all the chain should have the same metada file
-        metadataWithMergedVhd[metadataPath] = true
-      }
+      const metadataPath = vhdsToJSons[chain[chain.length - 1]] // all the chain should have the same metada file
+      metadataWithMergedVhd[metadataPath] = (metadataWithMergedVhd[metadataPath] ?? 0) + finalVhdSize
     })
   }
 
   await Promise.all([
     ...unusedVhdsDeletion,
-    toMerge.length !== 0 && (merge ? Task.run({ name: 'merge' }, doMerge) : doMerge()),
+    toMerge.length !== 0 && (merge ? Task.run({ name: 'merge' }, doMerge) : () => Promise.resolve()),
     asyncMap(unusedXvas, path => {
       logWarn('unused XVA', { path })
       if (remove) {
@@ -509,12 +504,11 @@ export async function cleanVm(
 
   // update size for delta metadata with merged VHD
   // check for the other that the size is the same as the real file size
-
   await asyncMap(jsons, async metadataPath => {
     const metadata = backups.get(metadataPath)
 
     let fileSystemSize
-    const merged = metadataWithMergedVhd[metadataPath] !== undefined
+    const mergedSize = metadataWithMergedVhd[metadataPath]
 
     const { mode, size, vhds, xva } = metadata
 
@@ -524,26 +518,29 @@ export async function cleanVm(
         const linkedXva = resolve('/', vmDir, xva)
         try {
           fileSystemSize = await handler.getSize(linkedXva)
+          if (fileSystemSize !== size && fileSystemSize !== undefined) {
+            logWarn('cleanVm: incorrect backup size in metadata', {
+              path: metadataPath,
+              actual: size ?? 'none',
+              expected: fileSystemSize,
+            })
+          }
         } catch (error) {
           // can fail with encrypted remote
         }
       } else if (mode === 'delta') {
-        const linkedVhds = Object.keys(vhds).map(key => resolve('/', vmDir, vhds[key]))
-        fileSystemSize = await computeVhdsSize(handler, linkedVhds)
-
-        // the size is not computed in some cases (e.g. VhdDirectory)
-        if (fileSystemSize === undefined) {
-          return
-        }
-
         // don't warn if the size has changed after a merge
-        if (!merged && fileSystemSize !== size) {
-          // 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,
-          })
+        if (mergedSize === undefined) {
+          const linkedVhds = Object.keys(vhds).map(key => resolve('/', vmDir, vhds[key]))
+          fileSystemSize = await computeVhdsSize(handler, linkedVhds)
+          // the size is not computed in some cases (e.g. VhdDirectory)
+          if (fileSystemSize !== undefined && fileSystemSize !== size) {
+            logWarn('cleanVm: incorrect backup size in metadata', {
+              path: metadataPath,
+              actual: size ?? 'none',
+              expected: fileSystemSize,
+            })
+          }
         }
       }
     } catch (error) {
@@ -551,9 +548,19 @@ export async function cleanVm(
       return
     }
 
-    // systematically update size after a merge
-    if ((merged || fixMetadata) && size !== fileSystemSize) {
-      metadata.size = fileSystemSize
+    // systematically update size and differentials after a merge
+
+    // @todo : after 2024-04-01 remove the fixmetadata options since the size computation is fixed
+    if (mergedSize || (fixMetadata && fileSystemSize !== size)) {
+      metadata.size = mergedSize ?? fileSystemSize ?? size
+
+      if (mergedSize) {
+        // all disks are now key disk
+        metadata.isVhdDifferencing = {}
+        for (const id of Object.values(metadata.vdis ?? {})) {
+          metadata.isVhdDifferencing[`${id}.vhd`] = false
+        }
+      }
       mustRegenerateCache = true
       try {
         await handler.writeFile(metadataPath, JSON.stringify(metadata), { flags: 'w' })

@xen-orchestra/backups/_incrementalVm.mjs

@@ -34,6 +34,7 @@ export async function exportIncrementalVm(
     fullVdisRequired = new Set(),
 
     disableBaseTags = false,
+    nbdConcurrency = 1,
     preferNbd,
   } = {}
 ) {
@@ -82,6 +83,7 @@ export async function exportIncrementalVm(
       baseRef: baseVdi?.$ref,
       cancelToken,
       format: 'vhd',
+      nbdConcurrency,
       preferNbd,
     })
   })

@xen-orchestra/backups/_runners/_vmRunners/IncrementalRemote.mjs

@@ -32,10 +32,10 @@ class IncrementalRemoteVmBackupRunner extends AbstractRemote {
           useChain: false,
         })
 
-        const differentialVhds = {}
+        const isVhdDifferencing = {}
 
         await asyncEach(Object.entries(incrementalExport.streams), async ([key, stream]) => {
-          differentialVhds[key] = await isVhdDifferencingDisk(stream)
+          isVhdDifferencing[key] = await isVhdDifferencingDisk(stream)
         })
 
         incrementalExport.streams = mapValues(incrementalExport.streams, this._throttleStream)
@@ -43,7 +43,7 @@ class IncrementalRemoteVmBackupRunner extends AbstractRemote {
           writer =>
             writer.transfer({
               deltaExport: forkDeltaExport(incrementalExport),
-              differentialVhds,
+              isVhdDifferencing,
               timestamp: metadata.timestamp,
               vm: metadata.vm,
               vmSnapshot: metadata.vmSnapshot,

@xen-orchestra/backups/_runners/_vmRunners/IncrementalXapi.mjs

@@ -41,6 +41,7 @@ export const IncrementalXapi = class IncrementalXapiVmBackupRunner extends Abstr
 
     const deltaExport = await exportIncrementalVm(exportedVm, baseVm, {
       fullVdisRequired,
+      nbdConcurrency: this._settings.nbdConcurrency,
       preferNbd: this._settings.preferNbd,
     })
     // since NBD is network based, if one disk use nbd , all the disk use them
@@ -49,11 +50,11 @@ export const IncrementalXapi = class IncrementalXapiVmBackupRunner extends Abstr
       Task.info('Transfer data using NBD')
     }
 
-    const differentialVhds = {}
+    const isVhdDifferencing = {}
     // since isVhdDifferencingDisk is reading and unshifting data in stream
     // it should be done BEFORE any other stream transform
     await asyncEach(Object.entries(deltaExport.streams), async ([key, stream]) => {
-      differentialVhds[key] = await isVhdDifferencingDisk(stream)
+      isVhdDifferencing[key] = await isVhdDifferencingDisk(stream)
     })
     const sizeContainers = mapValues(deltaExport.streams, stream => watchStreamSize(stream))
 
@@ -68,7 +69,7 @@ export const IncrementalXapi = class IncrementalXapiVmBackupRunner extends Abstr
       writer =>
         writer.transfer({
           deltaExport: forkDeltaExport(deltaExport),
-          differentialVhds,
+          isVhdDifferencing,
           sizeContainers,
           timestamp,
           vm,

@xen-orchestra/backups/_runners/_writers/IncrementalRemoteWriter.mjs

@@ -133,7 +133,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
     }
   }
 
-  async _transfer($defer, { differentialVhds, timestamp, deltaExport, vm, vmSnapshot }) {
+  async _transfer($defer, { isVhdDifferencing, timestamp, deltaExport, vm, vmSnapshot }) {
     const adapter = this._adapter
     const job = this._job
     const scheduleId = this._scheduleId
@@ -161,6 +161,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
     )
 
     metadataContent = {
+      isVhdDifferencing,
       jobId,
       mode: job.mode,
       scheduleId,
@@ -180,9 +181,9 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
         async ([id, vdi]) => {
           const path = `${this._vmBackupDir}/${vhds[id]}`
 
-          const isDelta = differentialVhds[`${id}.vhd`]
+          const isDifferencing = isVhdDifferencing[`${id}.vhd`]
           let parentPath
-          if (isDelta) {
+          if (isDifferencing) {
             const vdiDir = dirname(path)
             parentPath = (
               await handler.list(vdiDir, {
@@ -204,16 +205,20 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
             // TODO remove when this has been done before the export
             await checkVhd(handler, parentPath)
           }
-
-          transferSize += await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
+          
+          // don't write it as transferSize += await async function
+          // since i += await asyncFun lead to race condition
+          // as explained : https://eslint.org/docs/latest/rules/require-atomic-updates
+          const transferSizeOneDisk = await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
             // no checksum for VHDs, because they will be invalidated by
             // merges and chainings
             checksum: false,
             validator: tmpPath => checkVhd(handler, tmpPath),
             writeBlockConcurrency: this._config.writeBlockConcurrency,
           })
+          transferSize += transferSizeOneDisk
 
-          if (isDelta) {
+          if (isDifferencing) {
             await chainVhd(handler, parentPath, handler, path)
           }
 

@xen-orchestra/backups/docs/VM backups/README.md

@@ -221,7 +221,7 @@ For multiple objects:
 
 ### Settings
 
-Settings are described in [`@xen-orchestra/backups/Backup.js](https://github.com/vatesfr/xen-orchestra/blob/master/%40xen-orchestra/backups/Backup.js).
+Settings are described in [`@xen-orchestra/backups/\_runners/VmsXapi.mjs``](https://github.com/vatesfr/xen-orchestra/blob/master/%40xen-orchestra/backups/_runners/VmsXapi.mjs).
 
 ## Writer API
 

@xen-orchestra/backups/formatVmBackups.mjs

@@ -2,6 +2,8 @@ import mapValues from 'lodash/mapValues.js'
 import { dirname } from 'node:path'
 
 function formatVmBackup(backup) {
+  const { isVhdDifferencing } = backup
+
   return {
     disks:
       backup.vhds === undefined
@@ -25,6 +27,10 @@ function formatVmBackup(backup) {
       name_description: backup.vm.name_description,
       name_label: backup.vm.name_label,
     },
+
+    // isVhdDifferencing is either undefined or an object
+    differencingVhds: isVhdDifferencing && Object.values(isVhdDifferencing).filter(t => t).length,
+    dynamicVhds: isVhdDifferencing && Object.values(isVhdDifferencing).filter(t => !t).length,
   }
 }
 

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.44.2",
+  "version": "0.44.3",
   "engines": {
     "node": ">=14.18"
   },
@@ -25,7 +25,7 @@
     "@vates/decorate-with": "^2.0.0",
     "@vates/disposable": "^0.1.5",
     "@vates/fuse-vhd": "^2.0.0",
-    "@vates/nbd-client": "^2.0.1",
+    "@vates/nbd-client": "^3.0.0",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
     "@xen-orchestra/fs": "^4.1.3",
@@ -44,7 +44,7 @@
     "proper-lockfile": "^4.1.2",
     "tar": "^6.1.15",
     "uuid": "^9.0.0",
-    "vhd-lib": "^4.7.0",
+    "vhd-lib": "^4.8.0",
     "xen-api": "^2.0.0",
     "yazl": "^2.5.1"
   },
@@ -56,7 +56,7 @@
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^4.0.0"
+    "@xen-orchestra/xapi": "^4.1.0"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

@xen-orchestra/lite/.eslintrc.cjs

@@ -17,6 +17,7 @@ module.exports = {
     "@vue/eslint-config-prettier",
   ],
   plugins: ["@limegrass/import-alias"],
+  ignorePatterns: ["scripts/*.mjs"],
   rules: {
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-explicit-any": "off",

@xen-orchestra/lite/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## **next**
 
+- [VM/Action] Ability to migrate a VM from its view (PR [#7164](https://github.com/vatesfr/xen-orchestra/pull/7164))
+- Ability to override host address with `master` URL query param (PR [#7187](https://github.com/vatesfr/xen-orchestra/pull/7187))
+- Added tooltip on CPU provisioning warning icon (PR [#7223](https://github.com/vatesfr/xen-orchestra/pull/7223))
+- Add indeterminate state on FormToggle component (PR [#7230](https://github.com/vatesfr/xen-orchestra/pull/7230))
+- Add new UiStatusPanel component (PR [#7227](https://github.com/vatesfr/xen-orchestra/pull/7227))
+- Fix infinite loader when no stats on pool dashboard (PR [#7236](https://github.com/vatesfr/xen-orchestra/pull/7236))
+
 ## **0.1.6** (2023-11-30)
 
 - Explicit error if users attempt to connect from a slave host (PR [#7110](https://github.com/vatesfr/xen-orchestra/pull/7110))

@xen-orchestra/lite/package.json

@@ -5,8 +5,10 @@
     "dev": "GIT_HEAD=$(git rev-parse HEAD) vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview --port 4173",
-    "build-only": "GIT_HEAD=$(git rev-parse HEAD) vite build",
-    "deploy": "./scripts/deploy.sh",
+    "release": "zx ./scripts/release.mjs",
+    "build-only": "yarn release --build",
+    "deploy": "yarn release --build --deploy",
+    "gh-release": "yarn release --build --tarball --gh-release",
     "test": "yarn run type-check",
     "type-check": "vue-tsc --noEmit"
   },
@@ -58,7 +60,8 @@
     "vue-echarts": "^6.6.1",
     "vue-i18n": "^9.6.5",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.22",
+    "zx": "^7.2.3"
   },
   "private": true,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/lite",

@xen-orchestra/lite/scripts/agpl-3.0.txt

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

@xen-orchestra/lite/scripts/deploy.sh

@@ -1,67 +0,0 @@
-#!/bin/bash
-set -euo pipefail
-
-if [ $# -ne 1 ]
-then
-  echo "Usage: ./deploy.sh <LDAP username>"
-  exit 1
-fi
-
-USERNAME=$1
-DIST="dist"
-BASE="https://lite.xen-orchestra.com/dist"
-SERVER="www-xo.gpn.vates.fr"
-
-echo "Building XO Lite"
-
-(cd ../.. && yarn)
-yarn build-only --base="$BASE"
-
-echo "Deploying XO Lite from $DIST"
-
-echo "\"use strict\";
-(function () {
-  const d = document;
-
-  function js(file) {
-    const s = d.createElement(\"script\");
-    s.defer = \"defer\";
-    s.type = \"module\";
-    s.crossOrigin = \"anonymous\";
-    s.src = file;
-    d.body.appendChild(s);
-  }
-$(
-  for filename in "$DIST"/assets/*.js; do
-    echo "  js(\"$BASE/assets/$(basename $filename)\");"
-  done
-)
-
-  function css(file) {
-    const s = d.createElement(\"link\");
-    s.rel = \"stylesheet\";
-    s.href = file;
-    d.head.appendChild(s);
-  }
-$(
-  for filename in "$DIST"/assets/*.css; do
-    echo "  css(\"$BASE/assets/$(basename $filename)\");"
-  done
-)
-})();" > "$DIST/index.js"
-
-rsync \
-  -r --delete --delete-excluded --exclude=index.html \
-  "$DIST"/ \
-  "$USERNAME@$SERVER:xo-lite"
-
-echo "XO Lite files sent to server"
-
-echo "→ Connect to the server using:"
-echo -e "\tssh $USERNAME@$SERVER"
-
-echo "→ Log in as xo-lite using"
-echo -e "\tsudo -su xo-lite"
-
-echo "→ Then run the following command to move the files to the \`latest\` folder:"
-echo -e "\trsync -r --delete --exclude=index.html /home/$USERNAME/xo-lite/ /home/xo-lite/public/latest"

@xen-orchestra/lite/scripts/release.mjs

@@ -0,0 +1,434 @@
+#!/usr/bin/env zx
+
+import argv from "minimist";
+import { tmpdir } from "os";
+
+$.verbose = false;
+
+const DEPLOY_SERVER = "www-xo.gpn.vates.fr";
+
+const { version: pkgVersion } = await fs.readJson("./package.json");
+
+const opts = argv(process.argv, {
+  boolean: ["help", "build", "deploy", "ghRelease", "tarball"],
+  string: [
+    "base",
+    "dist",
+    "ghToken",
+    "tarballDest",
+    "tarballName",
+    "username",
+    "version",
+  ],
+  alias: {
+    u: "username",
+    h: "help",
+    "gh-release": "ghRelease",
+    "gh-token": "ghToken",
+    "tarball-dest": "tarballDest",
+    "tarball-name": "tarballName",
+  },
+  default: {
+    dist: "dist",
+    version: pkgVersion,
+  },
+});
+
+let {
+  base,
+  build,
+  deploy,
+  dist,
+  ghRelease,
+  ghToken,
+  help,
+  tarball,
+  tarballDest,
+  tarballName,
+  username,
+  version,
+} = opts;
+
+const usage = () => {
+  console.log(
+    `Usage: ./release.mjs
+    [--help|-h - show this message]
+
+    [--version X.Y.Z - XO Lite version - default: package.json version (${version})]
+    [--dist /path/to/folder - build destination folder - default: dist]
+
+    [
+      --build - whether to build XO Lite or not
+      [--base url - base URL for assets - default: "/" or "lite.xen-orchestra.com/dist" if --deploy is passed]
+    ]
+
+    [
+      --tarball - whether to generate a tarball or not
+      [--tarball-dest /path/to/folder - tarball destination folder]
+      [--tarball-name file.tar.gz - tarball file name - default xo-lite-X.Y.Z.tar.gz]
+    ]
+
+    [
+      --gh-release - whether to release on GitHub or not
+      [--gh-token token - GitHub API token with "Contents" write permissions]
+    ]
+
+    [
+      --deploy - whether to deploy to xen-orchestra.com or not
+      --username|-u <LDAP username>
+    ]
+`
+  );
+};
+
+if (help) {
+  usage();
+  process.exit(0);
+}
+
+const yes = async (q) =>
+  ["y", "yes"].includes((await question(q + " [y/N] ")).toLowerCase());
+
+const no = async (q) => !(await yes(q));
+
+const step = (s) => console.log(chalk.green.bold(`\n${s}\n`));
+
+const stop = () => {
+  console.log(chalk.yellow("Stopping"));
+  process.exit(0);
+};
+
+const ghApiCall = async (path, method = "GET", data) => {
+  const opts = {
+    method,
+    headers: {
+      Accept: "application/vnd.github+json",
+      Authorization: `Bearer ${ghToken}`,
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  };
+
+  if (data !== undefined) {
+    opts.body = typeof data === "object" ? JSON.stringify(data) : data;
+  }
+
+  const res = await fetch(
+    "https://api.github.com/repos/vatesfr/xen-orchestra" + path,
+    opts
+  );
+
+  if (res.status === 404 || res.status === 422) {
+    return;
+  }
+
+  if (!res.ok) {
+    console.log(chalk.red(await res.text()));
+    throw new Error(`GitHub API error: ${res.statusText}`);
+  }
+
+  try {
+    // Return undefined if response is not JSON
+    return JSON.parse(await res.text());
+  } catch {}
+};
+
+const ghApiUploadReleaseAsset = async (releaseId, assetName, file) => {
+  const opts = {
+    method: "POST",
+    body: fs.createReadStream(file),
+    headers: {
+      Accept: "application/vnd.github+json",
+      Authorization: `Bearer ${ghToken}`,
+      "Content-Length": (await fs.stat(file)).size,
+      "Content-Type": "application/vnd.cncf.helm.chart.content.v1.tar+gzip",
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  };
+
+  const res = await fetch(
+    `https://uploads.github.com/repos/vatesfr/xen-orchestra/releases/${releaseId}/assets?name=${encodeURIComponent(
+      assetName
+    )}`,
+    opts
+  );
+
+  if (!res.ok) {
+    console.log(chalk.red(await res.text()));
+    throw new Error(`GitHub API error: ${res.statusText}`);
+  }
+
+  return JSON.parse(await res.text());
+};
+
+// Validate args and assign defaults -------------------------------------------
+
+const headSha = (await $`git rev-parse HEAD`).stdout.trim();
+
+if (!build && !deploy && !tarball && !ghRelease) {
+  console.log(
+    chalk.yellow(
+      "Nothing to do! Use --build, --deploy, --tarball and/or --gh-release"
+    )
+  );
+  process.exit(0);
+}
+
+if (deploy && ghRelease) {
+  throw new Error("--deploy and --gh-release cannot be used together");
+}
+
+if (deploy && username === undefined) {
+  throw new Error("--username is required when --deploy is used");
+}
+
+if (ghRelease && ghToken === undefined) {
+  throw new Error("--gh-token is required to upload a release to GitHub");
+}
+
+if (base === undefined) {
+  base = deploy ? "https://lite.xen-orchestra.com/dist/" : "/";
+}
+
+if (tarball) {
+  if (tarballDest === undefined) {
+    tarballDest = path.join(tmpdir(), `xo-lite-${new Date().toISOString()}`);
+  }
+
+  if (tarballName === undefined) {
+    tarballName = `xo-lite-${version}.tar.gz`;
+  }
+}
+
+if (tarballDest !== undefined) {
+  tarballDest = path.resolve(tarballDest);
+}
+
+if (ghRelease && (tarballDest === undefined || tarballName === undefined)) {
+  throw new Error(
+    "In order to release to GitHub, either use --tarball to generate the tarball or provide the tarball with --tarball-dest and --tarball-name"
+  );
+}
+
+let tarballPath;
+let tarballExists = false;
+if (tarballDest !== undefined && tarballName !== undefined) {
+  tarballPath = path.join(tarballDest, tarballName);
+
+  try {
+    if ((await fs.stat(tarballPath)).isFile()) {
+      tarballExists = true;
+    }
+  } catch (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  }
+}
+
+if (ghRelease && !tarball && !tarballExists) {
+  throw new Error(`No such file ${tarballPath}`);
+}
+
+if (tarball && tarballExists) {
+  if (await no(`Tarball ${tarballPath} already exists. Overwrite?`)) {
+    stop();
+  }
+}
+
+const tag = `xo-lite-v${version}`;
+if (ghRelease) {
+  const remoteTag = await ghApiCall(`/git/ref/tags/${encodeURIComponent(tag)}`);
+
+  if (remoteTag === undefined) {
+    if ((await ghApiCall(`/commits/${headSha}`)) === undefined) {
+      throw new Error(
+        `Tag ${tag} and commit ${headSha} not found on GitHub. At least one needs to exist to use it as a release target.`
+      );
+    }
+
+    if (
+      await no(
+        `Tag ${tag} not found on GitHub. The GitHub release will be attached to the current commit and the tag will be created automatically when the release is published. Continue?`
+      )
+    ) {
+      stop();
+    }
+  } else {
+    if (
+      remoteTag.object.sha !== headSha &&
+      (await no(
+        `Commit SHA of tag ${tag} on GitHub (${remoteTag.object.sha}) is different from current commit SHA (${headSha}). Continue?`
+      ))
+    ) {
+      stop();
+    }
+
+    if (
+      !(await $`git tag --points-at HEAD`).stdout
+        .trim()
+        .split("\n")
+        .includes(tag) &&
+      (await no(`Tag ${tag} not found on current commit. Continue?`))
+    ) {
+      stop();
+    }
+  }
+}
+
+// Build -----------------------------------------------------------------------
+
+if (build) {
+  step("Build");
+
+  console.log(`Building XO Lite ${version} into ${dist}`);
+
+  $.verbose = true;
+  await within(async () => {
+    cd("../..");
+    await $`yarn`;
+  });
+  await $`GIT_HEAD=${headSha} vite build --base=${base}`;
+  $.verbose = false;
+}
+
+// License and index.js --------------------------------------------------------
+
+if (ghRelease || deploy) {
+  step("Prepare dist");
+
+  if (ghRelease) {
+    console.log(`Adding LICENSE file to ${dist}`);
+
+    await fs.copy(
+      path.join(__dirname, "agpl-3.0.txt"),
+      path.join(dist, "LICENSE")
+    );
+  }
+
+  if (deploy) {
+    console.log(`Adding index.js file to ${dist}`);
+
+    // Concatenate a URL (absolute or relative) and paths
+    // e.g.: joinUrl('http://example.com/', 'foo/bar') => 'http://example.com/foo/bar
+    // `path.join` isn't made for URLs and deduplicates the slashes in URL
+    // schemes (http:// becomes http:/). `.replace()` reverts this.
+    const joinUrl = (...parts) =>
+      path.join(...parts).replace(/^(https?:\/)/, "$1/");
+
+    // Use of document.write is discouraged but seems to work consistently.
+    // https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()
+    await fs.writeFile(
+      path.join(dist, "index.js"),
+      `(async () => {
+  document.open();
+  document.write(
+    await (await fetch("${joinUrl(base, "index.html")}")).text()
+  );
+  document.close();
+})();
+`
+    );
+  }
+}
+
+// Tarball ---------------------------------------------------------------------
+
+if (tarball) {
+  step("Tarball");
+
+  console.log(`Generating tarball ${tarballPath}`);
+
+  await fs.mkdirp(tarballDest);
+
+  // The file is called xo-lite-X.Y.Z.tar.gz by default
+  // The archive contains the following tree:
+  // xo-lite-X.Y.Z/
+  // ├ LICENSE
+  // ├ index.js
+  // ├ index.html
+  // ├ assets/
+  // └ ...
+  await $`tar -c -z -f ${tarballPath} --transform='s|^${dist}|xo-lite-${version}|' ${dist}`;
+}
+
+// Create GitHub release -------------------------------------------------------
+
+if (ghRelease) {
+  step("GitHub release");
+
+  let release = (await ghApiCall("/releases")).find(
+    (release) => release.tag_name === tag
+  );
+
+  if (release !== undefined) {
+    if (
+      await no(
+        `Release with tag ${tag} already exists on GitHub (${chalk.blue(
+          release.html_url
+        )}). Skip and proceed with upload?`
+      )
+    ) {
+      stop();
+    }
+  } else {
+    release = await ghApiCall("/releases", "POST", {
+      tag_name: tag,
+      target_commitish: headSha,
+      name: tag,
+      draft: true,
+    });
+
+    console.log(
+      `Created GitHub release ${tag}: ${chalk.blue(release.html_url)}`
+    );
+  }
+
+  console.log(`Uploading tarball ${tarballPath} to GitHub`);
+
+  let asset = release.assets.find((asset) => asset.name === tarballName);
+  if (
+    asset !== undefined &&
+    (await yes(
+      `An asset called ${tarballName} already exists on that release. Replace it?`
+    ))
+  ) {
+    await ghApiCall(`/releases/assets/${asset.id}`, "DELETE");
+    asset = undefined;
+  }
+
+  if (asset === undefined) {
+    console.log("Uploading…");
+    asset = await ghApiUploadReleaseAsset(release.id, tarballName, tarballPath);
+  }
+
+  if (release.draft) {
+    console.log(
+      chalk.yellow(
+        'The release is in DRAFT. To make it public, visit the release URL above, edit the release and click on "Publish release".'
+      )
+    );
+  }
+}
+
+// Deploy ----------------------------------------------------------------------
+
+if (deploy) {
+  step("Deploy");
+
+  console.log(`Deploying XO Lite from ${dist} to ${DEPLOY_SERVER}`);
+
+  await $`rsync -r --delete ${dist}/ ${username}@${DEPLOY_SERVER}:xo-lite`;
+
+  console.log(`
+  XO Lite files sent to server
+
+  → Connect to the server using:
+  \tssh ${username}@${DEPLOY_SERVER}
+
+  → Log in as xo-lite using
+  \tsudo -su xo-lite
+
+  → Then run the following command to move the files to the \`latest\` folder:
+  \trsync -r --delete /home/${username}/xo-lite/ /home/xo-lite/public/latest
+  `);
+}

@xen-orchestra/lite/src/assets/no-result.svg

@@ -0,0 +1,51 @@
+<svg width="214" height="166" viewBox="0 0 214 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="undraw_location_search_re_ttoj 1" clip-path="url(#clip0_2650_135967)">
+<path id="Vector" d="M121.852 81.1686C126.667 81.1686 130.571 77.2695 130.571 72.4598C130.571 67.65 126.667 63.751 121.852 63.751C117.036 63.751 113.133 67.65 113.133 72.4598C113.133 77.2695 117.036 81.1686 121.852 81.1686Z" fill="#E6E6E6"/>
+<path id="Vector_2" d="M143.221 83.6511L134.11 74.5502C134.808 73.4652 135.282 72.2511 135.502 70.98C135.722 69.7089 135.684 68.4066 135.391 67.1503C135.098 65.894 134.556 64.7092 133.796 63.6661C133.036 62.623 132.074 61.7428 130.968 61.0778C128.884 59.8344 126.409 59.4181 124.032 59.9112C121.655 60.4042 119.551 61.7708 118.135 63.7402C116.833 65.5645 116.207 67.785 116.366 70.0201C116.525 72.2552 117.458 74.3651 119.006 75.9872C120.554 77.6093 122.619 78.6422 124.846 78.9083C127.074 79.1744 129.324 78.6571 131.211 77.4453L140.323 86.5462C140.707 86.9298 141.229 87.1451 141.772 87.145C142.315 87.1448 142.836 86.9292 143.221 86.5454C143.605 86.1616 143.821 85.6411 143.821 85.0984C143.821 84.5557 143.605 84.0351 143.221 83.6511ZM130.871 74.2105C129.742 75.3382 128.257 76.04 126.668 76.1963C125.079 76.3527 123.485 75.9539 122.157 75.0679C120.83 74.1819 119.851 72.8635 119.387 71.3374C118.924 69.8113 119.004 68.1719 119.615 66.6985C120.226 65.2252 121.33 64.009 122.738 63.2572C124.146 62.5054 125.772 62.2646 127.338 62.5757C128.904 62.8868 130.313 63.7306 131.326 64.9634C132.339 66.1962 132.892 67.7416 132.892 69.3364C132.894 70.2418 132.716 71.1385 132.369 71.9749C132.022 72.8114 131.513 73.5711 130.871 74.2105Z" fill="#3F3D56"/>
+<path id="Vector_3" d="M209.27 97.0758C232.572 122.815 165.024 159.908 110.444 159.908C55.8631 159.908 18.1019 131.167 11.6168 97.0758C-4.10723 14.4151 145.59 -38.1235 110.444 34.2431C59.2141 139.726 190.92 76.8058 209.27 97.0758Z" fill="#E6E6E6"/>
+<path id="Vector_4" d="M198.815 103.168C222.117 128.907 154.569 166 99.9884 166C45.408 166 7.64682 137.259 1.16175 103.168C-14.5623 20.5069 135.135 -32.0317 99.9884 40.3349C48.759 145.818 180.464 82.8976 198.815 103.168Z" fill="#3F3D56"/>
+<path id="Vector_5" d="M32.5842 42.8207C16.2334 42.1016 3.55577 38.5788 3.72233 34.8006C3.82218 32.5354 8.44961 30.7139 16.418 29.8033C16.4465 29.7999 16.4755 29.8021 16.5031 29.8099C16.5308 29.8176 16.5566 29.8308 16.5792 29.8485C16.6017 29.8663 16.6205 29.8884 16.6345 29.9134C16.6485 29.9385 16.6574 29.9661 16.6606 29.9946C16.6639 30.0231 16.6615 30.052 16.6535 30.0795C16.6456 30.1071 16.6322 30.1328 16.6143 30.1552C16.5964 30.1776 16.5741 30.1963 16.549 30.2101C16.5238 30.2239 16.4961 30.2326 16.4675 30.2356C8.96128 31.0935 4.24436 32.85 4.15753 34.8197C4.00691 38.2363 17.0335 41.7013 32.6034 42.386C48.1732 43.0707 61.4543 40.7628 61.6049 37.3462C61.6921 35.3682 57.1186 33.1983 49.6692 31.6835C49.6411 31.6778 49.6143 31.6667 49.5905 31.6508C49.5668 31.6348 49.5464 31.6143 49.5305 31.5904C49.5147 31.5666 49.5037 31.5399 49.4982 31.5118C49.4927 31.4837 49.4928 31.4548 49.4985 31.4267C49.5043 31.3987 49.5155 31.372 49.5315 31.3483C49.5476 31.3246 49.5681 31.3043 49.5921 31.2885C49.616 31.2727 49.6428 31.2618 49.6709 31.2565C49.6991 31.2511 49.728 31.2513 49.7561 31.2571C57.663 32.8649 62.1404 35.0913 62.0401 37.3653C61.8736 41.1435 48.935 43.5398 32.5842 42.8207Z" fill="#8F84FF"/>
+<path id="Vector_6" d="M18.0625 43.4541C19.4303 46.0495 21.4566 48.2406 23.9385 49.8081C26.4204 51.3757 29.2709 52.2648 32.2048 52.3864C35.1388 52.5081 38.0533 51.858 40.6567 50.5012C43.2601 49.1445 45.4612 47.1286 47.0396 44.6554C37.3658 44.7856 27.6922 44.3846 18.0625 43.4541Z" fill="#8F84FF"/>
+<path id="Vector_7" d="M48.8472 40.0787C49.6704 37.6124 49.9076 34.9886 49.5401 32.4149C49.1725 29.8413 48.2102 27.3884 46.7294 25.2504C45.2486 23.1124 43.29 21.348 41.0084 20.0968C38.7269 18.8457 36.1851 18.1421 33.5842 18.0418C30.9834 17.9415 28.3949 18.4472 26.0235 19.5188C23.6522 20.5905 21.5631 22.1988 19.9216 24.2164C18.2802 26.2339 17.1314 28.6054 16.5662 31.1431C16.001 33.6808 16.0349 36.3151 16.6653 38.8374C27.2937 40.6395 38.1113 41.0568 48.8472 40.0787Z" fill="#8F84FF"/>
+<path id="Vector_8" d="M36.7748 28.8487C37.8574 28.8487 38.7351 27.972 38.7351 26.8906C38.7351 25.8093 37.8574 24.9326 36.7748 24.9326C35.6921 24.9326 34.8145 25.8093 34.8145 26.8906C34.8145 27.972 35.6921 28.8487 36.7748 28.8487Z" fill="white"/>
+<path id="Vector_9" d="M26.6852 36.4613C28.4896 36.4613 29.9524 35.0003 29.9524 33.1979C29.9524 31.3956 28.4896 29.9346 26.6852 29.9346C24.8808 29.9346 23.418 31.3956 23.418 33.1979C23.418 35.0003 24.8808 36.4613 26.6852 36.4613Z" fill="white"/>
+<path id="Vector_10" d="M75.9965 33.2641C77.1994 33.2641 78.1745 32.2901 78.1745 31.0886C78.1745 29.8871 77.1994 28.9131 75.9965 28.9131C74.7935 28.9131 73.8184 29.8871 73.8184 31.0886C73.8184 32.2901 74.7935 33.2641 75.9965 33.2641Z" fill="#8F84FF"/>
+<path id="Vector_11" d="M26.7698 99.8373C27.4916 99.8373 28.0767 99.2529 28.0767 98.5319C28.0767 97.811 27.4916 97.2266 26.7698 97.2266C26.048 97.2266 25.4629 97.811 25.4629 98.5319C25.4629 99.2529 26.048 99.8373 26.7698 99.8373Z" fill="#E6E6E6"/>
+<path id="Vector_12" d="M118.252 144.654C118.974 144.654 119.559 144.069 119.559 143.348C119.559 142.627 118.974 142.043 118.252 142.043C117.53 142.043 116.945 142.627 116.945 143.348C116.945 144.069 117.53 144.654 118.252 144.654Z" fill="#E6E6E6"/>
+<path id="Vector_13" d="M33.087 74.6003C33.4479 74.6003 33.7405 74.3081 33.7405 73.9476C33.7405 73.5871 33.4479 73.2949 33.087 73.2949C32.7262 73.2949 32.4336 73.5871 32.4336 73.9476C32.4336 74.3081 32.7262 74.6003 33.087 74.6003Z" fill="#E6E6E6"/>
+<path id="Vector_14" d="M87.1046 123.334C87.4655 123.334 87.7581 123.041 87.7581 122.681C87.7581 122.321 87.4655 122.028 87.1046 122.028C86.7437 122.028 86.4512 122.321 86.4512 122.681C86.4512 123.041 86.7437 123.334 87.1046 123.334Z" fill="#E6E6E6"/>
+<path id="Vector_15" d="M185.339 117.024C185.7 117.024 185.992 116.732 185.992 116.371C185.992 116.011 185.7 115.719 185.339 115.719C184.978 115.719 184.686 116.011 184.686 116.371C184.686 116.732 184.978 117.024 185.339 117.024Z" fill="#E6E6E6"/>
+<path id="Vector_16" d="M154.628 136.386C154.989 136.386 155.282 136.094 155.282 135.734C155.282 135.373 154.989 135.081 154.628 135.081C154.267 135.081 153.975 135.373 153.975 135.734C153.975 136.094 154.267 136.386 154.628 136.386Z" fill="#E6E6E6"/>
+<path id="Vector_17" d="M122.609 112.89C122.969 112.89 123.262 112.598 123.262 112.238C123.262 111.877 122.969 111.585 122.609 111.585C122.248 111.585 121.955 111.877 121.955 112.238C121.955 112.598 122.248 112.89 122.609 112.89Z" fill="#E6E6E6"/>
+<path id="Vector_18" d="M81.2238 48.4929C81.5847 48.4929 81.8772 48.2007 81.8772 47.8402C81.8772 47.4797 81.5847 47.1875 81.2238 47.1875C80.8629 47.1875 80.5703 47.4797 80.5703 47.8402C80.5703 48.2007 80.8629 48.4929 81.2238 48.4929Z" fill="#E6E6E6"/>
+<path id="Vector_19" d="M86.4523 16.2946C86.8132 16.2946 87.1057 16.0024 87.1057 15.6419C87.1057 15.2815 86.8132 14.9893 86.4523 14.9893C86.0914 14.9893 85.7988 15.2815 85.7988 15.6419C85.7988 16.0024 86.0914 16.2946 86.4523 16.2946Z" fill="#E6E6E6"/>
+<path id="Vector_20" d="M83.4015 151.834C83.7624 151.834 84.055 151.541 84.055 151.181C84.055 150.821 83.7624 150.528 83.4015 150.528C83.0406 150.528 82.748 150.821 82.748 151.181C82.748 151.541 83.0406 151.834 83.4015 151.834Z" fill="#E6E6E6"/>
+<path id="Vector_21" d="M51.1652 138.128C51.5261 138.128 51.8186 137.835 51.8186 137.475C51.8186 137.114 51.5261 136.822 51.1652 136.822C50.8043 136.822 50.5117 137.114 50.5117 137.475C50.5117 137.835 50.8043 138.128 51.1652 138.128Z" fill="#E6E6E6"/>
+<path id="Vector_22" d="M153.321 114.631C153.682 114.631 153.975 114.338 153.975 113.978C153.975 113.617 153.682 113.325 153.321 113.325C152.961 113.325 152.668 113.617 152.668 113.978C152.668 114.338 152.961 114.631 153.321 114.631Z" fill="#E6E6E6"/>
+<path id="Vector_23" d="M32.3178 50.8653C33.4004 50.8653 34.2781 49.9886 34.2781 48.9072C34.2781 47.8259 33.4004 46.9492 32.3178 46.9492C31.2351 46.9492 30.3574 47.8259 30.3574 48.9072C30.3574 49.9886 31.2351 50.8653 32.3178 50.8653Z" fill="white"/>
+<path id="Vector_24" d="M76.6492 78.9516C76.6492 84.7996 67.597 98.4265 64.9516 102.284C64.8718 102.401 64.7647 102.496 64.6396 102.562C64.5145 102.628 64.3752 102.662 64.2338 102.662C64.0924 102.662 63.9531 102.628 63.828 102.562C63.7029 102.496 63.5958 102.401 63.516 102.284C60.8706 98.4265 51.8184 84.7996 51.8184 78.9516C51.8184 77.3231 52.1395 75.7105 52.7634 74.206C53.3874 72.7015 54.3019 71.3344 55.4548 70.1829C56.6076 69.0314 57.9763 68.1179 59.4826 67.4947C60.9889 66.8715 62.6034 66.5508 64.2338 66.5508C65.8642 66.5508 67.4787 66.8715 68.985 67.4947C70.4913 68.1179 71.86 69.0314 73.0128 70.1829C74.1657 71.3344 75.0802 72.7015 75.7042 74.206C76.3281 75.7105 76.6492 77.3231 76.6492 78.9516Z" fill="white"/>
+<path id="Vector_25" d="M64.2346 84.3908C67.7232 84.3908 70.5512 81.5661 70.5512 78.0816C70.5512 74.5972 67.7232 71.7725 64.2346 71.7725C60.746 71.7725 57.918 74.5972 57.918 78.0816C57.918 81.5661 60.746 84.3908 64.2346 84.3908Z" fill="#8F84FF"/>
+<path id="Vector_26" d="M64.1249 109.409C68.1548 109.409 71.4217 108.776 71.4217 107.995C71.4217 107.214 68.1548 106.581 64.1249 106.581C60.095 106.581 56.8281 107.214 56.8281 107.995C56.8281 108.776 60.095 109.409 64.1249 109.409Z" fill="white"/>
+<path id="Vector_27" d="M177.922 69.1662C177.867 69.2732 177.82 69.3844 177.783 69.4988L167.375 72.3872L165.499 70.554L162.359 73.0196L165.364 76.5873C165.607 76.8756 165.936 77.0774 166.304 77.1625C166.671 77.2475 167.056 77.2113 167.401 77.0592L178.644 72.1022C179.025 72.3666 179.478 72.5088 179.943 72.5098C180.407 72.5109 180.861 72.3707 181.243 72.1079C181.626 71.8451 181.919 71.4723 182.084 71.0389C182.25 70.6055 182.279 70.1321 182.168 69.6817C182.057 69.2313 181.812 68.8253 181.465 68.5175C181.117 68.2098 180.684 68.015 180.224 67.9591C179.763 67.9031 179.296 67.9886 178.885 68.2043C178.473 68.4199 178.138 68.7554 177.922 69.1662H177.922Z" fill="#FFB8B8"/>
+<path id="Vector_28" d="M167.009 72.5566L163.102 75.5936C162.991 75.68 162.863 75.7415 162.726 75.7738C162.589 75.8062 162.446 75.8086 162.308 75.781C162.17 75.7534 162.039 75.6964 161.925 75.6138C161.811 75.5313 161.716 75.4252 161.647 75.3027L159.219 71.0108C158.78 70.4403 158.584 69.719 158.677 69.005C158.769 68.291 159.141 67.6427 159.711 67.2022C160.281 66.7617 161.002 66.565 161.718 66.6552C162.433 66.7454 163.083 67.1152 163.525 67.6835L167.084 71.076C167.186 71.1732 167.265 71.2911 167.317 71.4218C167.37 71.5525 167.393 71.6929 167.386 71.8334C167.379 71.9739 167.341 72.1113 167.276 72.2361C167.211 72.3608 167.12 72.4702 167.009 72.5566V72.5566Z" fill="#8F84FF"/>
+<path id="Vector_29" d="M178.921 67.7293L182.883 69.5095C183.048 69.5841 183.178 69.7214 183.242 69.8913C183.307 70.0612 183.301 70.2497 183.227 70.4154L182.758 71.4567C182.813 71.4817 182.856 71.5275 182.877 71.5841C182.899 71.6406 182.897 71.7034 182.872 71.7587L182.685 72.1752C182.66 72.2303 182.614 72.2733 182.557 72.2947C182.501 72.3162 182.438 72.3144 182.382 72.2898L182.195 72.7063C182.25 72.7313 182.293 72.7771 182.314 72.8336C182.336 72.8902 182.334 72.953 182.309 73.0082L182.122 73.4248C182.097 73.4799 182.051 73.5229 181.994 73.5443C181.938 73.5658 181.875 73.564 181.82 73.5393L179.287 79.1624C179.212 79.3281 179.075 79.4574 178.905 79.5218C178.734 79.5863 178.546 79.5806 178.38 79.5061L174.418 77.7258C174.252 77.6512 174.123 77.5139 174.058 77.344C173.994 77.1742 173.999 76.9856 174.074 76.8199L178.014 68.073C178.089 67.9073 178.226 67.778 178.396 67.7135C178.566 67.649 178.755 67.6547 178.921 67.7293Z" fill="#3F3D56"/>
+<path id="Vector_30" d="M175.137 77.172L178.315 78.6016C178.474 78.6727 178.655 78.678 178.818 78.6164C178.981 78.5548 179.114 78.4313 179.186 78.2727L180.654 75.0116L181.164 73.8812L182.492 70.9307C182.563 70.7719 182.568 70.5916 182.507 70.429C182.445 70.2664 182.321 70.1348 182.163 70.0629L181.164 69.613L178.982 68.6333C178.823 68.5623 178.642 68.5573 178.479 68.6194C178.317 68.6814 178.185 68.8056 178.114 68.9644L176.829 71.8168L175.365 75.0642L174.808 76.3042C174.736 76.4629 174.731 76.6434 174.793 76.806C174.854 76.9687 174.978 77.1003 175.137 77.172Z" fill="#F2F2F2"/>
+<path id="Vector_31" d="M168.497 117.578L171.167 117.578L172.437 107.29L168.496 107.29L168.497 117.578Z" fill="#FFB8B8"/>
+<path id="Vector_32" d="M167.814 116.707L173.073 116.707H173.074C173.514 116.707 173.949 116.794 174.356 116.962C174.763 117.13 175.132 117.377 175.443 117.687C175.755 117.998 176.001 118.367 176.17 118.773C176.338 119.18 176.425 119.615 176.425 120.054V120.163L167.815 120.164L167.814 116.707Z" fill="#2F2E41"/>
+<path id="Vector_33" d="M175.467 116.925L178.138 116.925L179.408 106.637L175.467 106.637L175.467 116.925Z" fill="#FFB8B8"/>
+<path id="Vector_34" d="M174.785 116.054L180.044 116.054H180.044C180.484 116.054 180.92 116.14 181.327 116.308C181.733 116.477 182.103 116.723 182.414 117.034C182.725 117.345 182.972 117.714 183.141 118.12C183.309 118.526 183.396 118.962 183.396 119.401V119.51L174.785 119.51L174.785 116.054Z" fill="#2F2E41"/>
+<path id="Vector_35" d="M156.518 93.4361C157.087 95.1206 158.166 96.5868 159.606 97.6318C161.046 98.6768 162.776 99.2488 164.555 99.2688L164.69 99.271C166.069 99.3101 167.688 98.8663 169.275 98.2289C172.412 96.9692 175.424 94.9524 176.224 94.3977L174.869 107.405L174.32 112.679C174.306 112.816 174.321 112.953 174.364 113.084C174.406 113.214 174.476 113.334 174.568 113.436C174.66 113.538 174.772 113.619 174.897 113.675C175.023 113.731 175.159 113.76 175.296 113.76H178.678C178.895 113.76 179.106 113.689 179.278 113.557C179.45 113.424 179.573 113.239 179.628 113.029L185.213 91.7848C185.38 91.1489 185.394 90.4823 185.252 89.8402C185.111 89.1981 184.818 88.5989 184.398 88.0922C183.979 87.5856 183.444 87.186 182.839 86.9265C182.235 86.6671 181.576 86.5553 180.92 86.6004L169.319 87.3945L170.129 84.1572L159.774 83.4697L159.744 83.4915C159.496 83.6721 159.254 83.8613 159.023 84.0593C158.446 84.5469 157.934 85.1071 157.5 85.7258C156.725 86.8359 156.23 88.1173 156.059 89.4602C155.888 90.803 156.046 92.1673 156.518 93.4361Z" fill="#2F2E41"/>
+<path id="Vector_36" d="M156.518 93.4368C157.087 95.1213 158.166 96.5876 159.606 97.6325C161.046 98.6775 162.776 99.2496 164.555 99.2696C166.257 98.4092 167.9 97.436 169.471 96.3565L169.275 98.2296L167.568 114.638C167.554 114.774 167.569 114.912 167.611 115.042C167.654 115.173 167.724 115.293 167.816 115.395C167.908 115.496 168.02 115.578 168.145 115.634C168.271 115.69 168.406 115.719 168.544 115.719H171.926C172.143 115.719 172.354 115.648 172.526 115.515C172.698 115.383 172.821 115.198 172.876 114.988L174.869 107.406L178.461 93.7436C178.628 93.1077 178.642 92.4411 178.5 91.799C178.358 91.1569 178.066 90.5577 177.646 90.051C177.226 89.5443 176.692 89.1448 176.087 88.8853C175.482 88.6259 174.824 88.5141 174.167 88.5592L162.567 89.3533L163.377 86.116L157.5 85.7266C156.725 86.8367 156.23 88.1181 156.059 89.461C155.888 90.8038 156.046 92.1681 156.518 93.4368Z" fill="#2F2E41"/>
+<path id="Vector_37" d="M159.008 84.8101L158.93 84.8007L157.123 75.9276C157.108 75.8505 155.631 68.197 160.159 64.1959L160.238 63.6483C160.258 63.5081 160.308 63.374 160.385 63.2552C160.462 63.1364 160.564 63.0357 160.684 62.96C160.804 62.8844 160.939 62.8356 161.079 62.817C161.22 62.7985 161.363 62.8106 161.498 62.8525L165.764 64.1741C166.005 64.2484 166.209 64.4132 166.331 64.6339C166.454 64.8546 166.486 65.1141 166.422 65.358L166.007 66.9335C166.582 67.608 173.35 75.7473 170.993 82.018L169.937 86.1411L159.008 84.8101Z" fill="#8F84FF"/>
+<path id="Vector_38" d="M176.721 77.8854C176.619 77.9495 176.522 78.0216 176.431 78.1009L165.998 75.3035L165.316 72.7725L161.357 73.3013L162.129 77.8993C162.191 78.2707 162.373 78.612 162.646 78.8718C162.919 79.1316 163.269 79.2959 163.643 79.3401L175.848 80.7801C176.041 81.2015 176.359 81.5539 176.759 81.7906C177.158 82.0272 177.62 82.1368 178.083 82.1048C178.546 82.0728 178.989 81.9007 179.352 81.6114C179.714 81.3221 179.981 80.9292 180.114 80.4852C180.248 80.0411 180.244 79.5669 180.101 79.1255C179.959 78.6842 179.685 78.2966 179.317 78.0144C178.948 77.7321 178.502 77.5686 178.039 77.5456C177.575 77.5226 177.115 77.6411 176.721 77.8854H176.721Z" fill="#FFB8B8"/>
+<path id="Vector_39" d="M165.597 75.2624L160.687 75.8941C160.548 75.9121 160.406 75.8998 160.271 75.858C160.137 75.8163 160.013 75.746 159.908 75.6521C159.803 75.5582 159.72 75.4428 159.663 75.3138C159.607 75.1849 159.58 75.0453 159.582 74.9046L159.676 69.9759C159.588 69.2615 159.787 68.5413 160.23 67.9733C160.672 67.4054 161.323 67.036 162.038 66.9461C162.753 66.8562 163.474 67.0532 164.044 67.4939C164.614 67.9346 164.986 68.5831 165.077 69.297L166.415 74.0255C166.454 74.1609 166.462 74.3029 166.44 74.4419C166.419 74.5809 166.367 74.7137 166.29 74.831C166.212 74.9484 166.11 75.0477 165.991 75.1222C165.871 75.1966 165.737 75.2444 165.597 75.2624Z" fill="#8F84FF"/>
+<path id="Vector_40" d="M164.215 61.6478C167.17 61.6478 169.565 59.2555 169.565 56.3044C169.565 53.3533 167.17 50.9609 164.215 50.9609C161.26 50.9609 158.865 53.3533 158.865 56.3044C158.865 59.2555 161.26 61.6478 164.215 61.6478Z" fill="#FFB8B8"/>
+<path id="Vector_41" d="M163.934 56.7515L163.265 55.5332C161.996 60.6964 164.237 64.9694 164.237 64.9694L155.539 60.9226L155.622 59.4867L154.761 60.4623L153.525 59.7816L153.361 58.8503L152.428 59.0813L155.835 52.9054C159.142 47.0284 163.95 49.2722 163.95 49.2722C171.598 48.909 170.664 56.4463 170.664 56.4463L163.934 56.7515Z" fill="#2F2E41"/>
+<path id="Vector_42" d="M103.036 96.5712C104.269 95.7814 102.769 91.2461 99.6852 86.4413C96.6014 81.6365 93.1016 78.3817 91.8681 79.1715C90.6347 79.9613 92.1347 84.4966 95.2185 89.3014C98.3023 94.1062 101.802 97.361 103.036 96.5712Z" fill="#3F3D56"/>
+</g>
+<defs>
+<clipPath id="clip0_2650_135967">
+<rect width="214" height="166" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -12,6 +12,7 @@
     </RouterLink>
     <slot />
     <div class="right">
+      <PoolOverrideWarning as-tooltip />
       <AccountButton />
     </div>
   </header>
@@ -19,6 +20,7 @@
 
 <script lang="ts" setup>
 import AccountButton from "@/components/AccountButton.vue";
+import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
 import TextLogo from "@/components/TextLogo.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
@@ -51,6 +53,10 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
     margin-left: 1rem;
     vertical-align: middle;
   }
+
+  .warning-not-current-pool {
+    font-size: 2.4rem;
+  }
 }
 
 .right {

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

@@ -2,6 +2,7 @@
   <div class="app-login form-container">
     <form @submit.prevent="handleSubmit">
       <img alt="XO Lite" src="../assets/logo-title.svg" />
+      <PoolOverrideWarning />
       <p v-if="isHostIsSlaveErr(error)" class="error">
         <UiIcon :icon="faExclamationCircle" />
         {{ $t("login-only-on-master") }}
@@ -45,6 +46,7 @@ import FormCheckbox from "@/components/form/FormCheckbox.vue";
 import FormInput from "@/components/form/FormInput.vue";
 import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
 import LoginError from "@/components/LoginError.vue";
+import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { XenApiError } from "@/libs/xen-api/xen-api.types";

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

@@ -0,0 +1,32 @@
+<template>
+  <div class="no-result">
+    <img alt="" class="img" src="@/assets/no-result.svg" />
+    <p class="text-info">{{ $t("no-result") }}</p>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.no-result {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+.img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1em;
+  width: 17em;
+  height: 13em;
+}
+
+.text-info {
+  margin: auto;
+  width: 8em;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 150%;
+  color: var(--color-extra-blue-base);
+}
+</style>

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

@@ -1,49 +1,28 @@
 <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>
+  <UiStatusPanel
+    :image-source="underConstruction"
+    :subtitle="$t('new-features-are-coming')"
+    :title="$t('xo-lite-under-construction')"
+  >
     <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"
+        target="_blank"
       >
         {{ $t("here") }} →
       </a>
     </p>
-  </div>
+  </UiStatusPanel>
 </template>
 
+<script lang="ts" setup>
+import underConstruction from "@/assets/under-construction.svg";
+import UiStatusPanel from "@/components/ui/UiStatusPanel.vue";
+</script>
+
 <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;

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

@@ -0,0 +1,59 @@
+<template>
+  <div
+    v-if="xenApi.isPoolOverridden"
+    class="warning-not-current-pool"
+    @click="xenApi.resetPoolMasterIp"
+    v-tooltip="
+      asTooltip && {
+        placement: 'right',
+        content: `
+      ${$t('you-are-currently-on', [masterSessionStorage])}.
+      ${$t('click-to-return-default-pool')}
+      `,
+      }
+    "
+  >
+    <div class="wrapper">
+      <UiIcon :icon="faWarning" />
+      <p v-if="!asTooltip">
+        <i18n-t keypath="you-are-currently-on">
+          <strong>{{ masterSessionStorage }}</strong>
+        </i18n-t>
+        <br />
+        {{ $t("click-to-return-default-pool") }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { useSessionStorage } from "@vueuse/core";
+
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import { useXenApiStore } from "@/stores/xen-api.store";
+import { vTooltip } from "@/directives/tooltip.directive";
+
+defineProps<{
+  asTooltip?: boolean;
+}>();
+
+const xenApi = useXenApiStore();
+const masterSessionStorage = useSessionStorage("master", null);
+</script>
+
+<style lang="postcss" scoped>
+.warning-not-current-pool {
+  color: var(--color-orange-world-base);
+  cursor: pointer;
+
+  .wrapper {
+    display: flex;
+    justify-content: center;
+
+    svg {
+      margin: auto 1rem;
+    }
+  }
+}
+</style>

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

@@ -1,43 +1,32 @@
 <template>
   <div class="usage-bar">
-    <template v-if="data !== undefined">
-      <div
-        v-for="item in computedData.sortedArray"
-        :key="item.id"
-        :class="{
-          warning: item.value > MIN_WARNING_VALUE,
-          error: item.value > MIN_DANGEROUS_VALUE,
-        }"
-        class="progress-item"
-      >
-        <UiProgressBar :value="item.value" color="custom" />
-        <UiProgressLegend
-          :label="item.label"
-          :value="item.badgeLabel ?? `${item.value}%`"
-        />
-      </div>
-      <slot :total-percent="computedData.totalPercentUsage" name="footer" />
-    </template>
-    <UiCardSpinner v-else />
+    <div
+      v-for="item in computedData.sortedArray"
+      :key="item.id"
+      :class="{
+        warning: item.value > MIN_WARNING_VALUE,
+        error: item.value > MIN_DANGEROUS_VALUE,
+      }"
+      class="progress-item"
+    >
+      <UiProgressBar :value="item.value" color="custom" />
+      <UiProgressLegend
+        :label="item.label"
+        :value="item.badgeLabel ?? `${item.value}%`"
+      />
+    </div>
+    <slot :total-percent="computedData.totalPercentUsage" name="footer" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
 import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
-import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import type { StatData } from "@/types/stat";
 import { computed } from "vue";
 
-interface Data {
-  id: string;
-  value: number;
-  label?: string;
-  badgeLabel?: string;
-  maxValue?: number;
-}
-
 interface Props {
-  data?: Data[];
+  data: StatData[];
   nItems?: number;
 }
 

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

@@ -6,7 +6,7 @@
   >
     <input
       v-model="value"
-      :class="{ indeterminate: type === 'checkbox' && value === undefined }"
+      :class="{ indeterminate: isIndeterminate }"
       :disabled="isDisabled"
       :type="type === 'radio' ? 'radio' : 'checkbox'"
       class="input"
@@ -60,6 +60,10 @@ const icon = computed(() => {
 
   return faCheck;
 });
+
+const isIndeterminate = computed(
+  () => (type === "checkbox" || type === "toggle") && value.value === undefined
+);
 </script>
 
 <style lang="postcss" scoped>
@@ -127,6 +131,12 @@ const icon = computed(() => {
   .input:checked + .fake-checkbox > .icon {
     transform: translateX(0.7em);
   }
+
+  .input.indeterminate + .fake-checkbox > .icon {
+    opacity: 1;
+    color: var(--color-blue-scale-300);
+    transform: translateX(0);
+  }
 }
 
 .input {

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

@@ -3,8 +3,14 @@
     <UiCardTitle>
       {{ $t("cpu-provisioning") }}
       <template v-if="!hasError" #right>
-        <!-- TODO: add a tooltip for the warning icon -->
-        <UiStatusIcon v-if="state !== 'success'" :state="state" />
+        <UiStatusIcon
+          v-if="state !== 'success'"
+          v-tooltip="{
+            content: $t('cpu-provisioning-warning'),
+            placement: 'left',
+          }"
+          :state="state"
+        />
       </template>
     </UiCardTitle>
     <NoDataError v-if="hasError" />
@@ -37,11 +43,12 @@ import UiCard from "@/components/ui/UiCard.vue";
 import UiCardFooter from "@/components/ui/UiCardFooter.vue";
 import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
-import { useHostCollection } from "@/stores/xen-api/host.store";
-import { useVmCollection } from "@/stores/xen-api/vm.store";
-import { useVmMetricsCollection } from "@/stores/xen-api/vm-metrics.store";
+import { vTooltip } from "@/directives/tooltip.directive";
 import { percent } from "@/libs/utils";
 import { VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
+import { useHostCollection } from "@/stores/xen-api/host.store";
+import { useVmMetricsCollection } from "@/stores/xen-api/vm-metrics.store";
+import { useVmCollection } from "@/stores/xen-api/vm.store";
 import { logicAnd } from "@vueuse/math";
 import { computed } from "vue";
 

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

@@ -5,11 +5,8 @@
       :right="$t('top-#', { n: N_ITEMS })"
     />
     <NoDataError v-if="hasError" />
-    <UsageBar
-      v-else
-      :data="isReady ? data.result : undefined"
-      :nItems="N_ITEMS"
-    >
+    <UiCardSpinner v-else-if="!isReady" />
+    <UsageBar v-else :data="data.result" :nItems="N_ITEMS">
       <template #footer>
         <SizeStatsSummary :size="data.maxSize" :usage="data.usedSize" />
       </template>
@@ -21,6 +18,7 @@
 import NoDataError from "@/components/NoDataError.vue";
 import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue";
 import UiCard from "@/components/ui/UiCard.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import UsageBar from "@/components/UsageBar.vue";
 import { useSrCollection } from "@/stores/xen-api/sr.store";

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

@@ -1,33 +1,39 @@
 <template>
   <UiCardTitle
-    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :left="$t('hosts')"
+    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :right="$t('top-#', { n: N_ITEMS })"
   />
   <NoDataError v-if="hasError" />
-  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <UiCardSpinner v-else-if="isLoading" />
+  <NoResult v-else-if="isStatEmpty" />
+  <UsageBar v-else :data="data" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, type ComputedRef } from "vue";
-import { getAvgCpuUsage } from "@/libs/utils";
-import { IK_HOST_STATS } from "@/types/injection-keys";
-import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
 import NoDataError from "@/components/NoDataError.vue";
+import NoResult from "@/components/NoResult.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
-import { UiCardTitleLevel } from "@/types/enums";
 import UsageBar from "@/components/UsageBar.vue";
+import { useStatStatus } from "@/composables/stat-status.composable";
+import { getAvgCpuUsage } from "@/libs/utils";
 import { useHostCollection } from "@/stores/xen-api/host.store";
+import { UiCardTitleLevel } from "@/types/enums";
+import { IK_HOST_STATS } from "@/types/injection-keys";
+import type { StatData } from "@/types/stat";
+import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { computed, inject } from "vue";
 
-const { hasError } = useHostCollection();
+const { hasError, isFetching } = useHostCollection();
 
 const stats = inject(
   IK_HOST_STATS,
   computed(() => [])
 );
 
-const data = computed<{ id: string; label: string; value: number }[]>(() => {
-  const result: { id: string; label: string; value: number }[] = [];
+const data = computed<StatData[]>(() => {
+  const result: StatData[] = [];
 
   stats.value.forEach((stat) => {
     if (stat.stats == null) {
@@ -50,9 +56,5 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
   return result;
 });
 
-const statFetched: ComputedRef<boolean> = computed(() =>
-  statFetched.value
-    ? true
-    : stats.value.length > 0 && stats.value.length === data.value.length
-);
+const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
 </script>

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

@@ -1,33 +1,39 @@
 <template>
   <UiCardTitle
-    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :left="$t('vms')"
+    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :right="$t('top-#', { n: N_ITEMS })"
   />
   <NoDataError v-if="hasError" />
-  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <UiCardSpinner v-else-if="isLoading" />
+  <NoResult v-else-if="isStatEmpty" />
+  <UsageBar v-else :data="data" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
-import { type ComputedRef, computed, inject } from "vue";
 import NoDataError from "@/components/NoDataError.vue";
+import NoResult from "@/components/NoResult.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import UsageBar from "@/components/UsageBar.vue";
-import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { useStatStatus } from "@/composables/stat-status.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
-import { IK_VM_STATS } from "@/types/injection-keys";
-import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { useVmCollection } from "@/stores/xen-api/vm.store";
 import { UiCardTitleLevel } from "@/types/enums";
+import { IK_VM_STATS } from "@/types/injection-keys";
+import type { StatData } from "@/types/stat";
+import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { computed, inject } from "vue";
 
-const { hasError } = useVmCollection();
+const { hasError, isFetching } = useVmCollection();
 
 const stats = inject(
   IK_VM_STATS,
   computed(() => [])
 );
 
-const data = computed<{ id: string; label: string; value: number }[]>(() => {
-  const result: { id: string; label: string; value: number }[] = [];
+const data = computed<StatData[]>(() => {
+  const result: StatData[] = [];
 
   stats.value.forEach((stat) => {
     if (!stat.stats) {
@@ -50,9 +56,5 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
   return result;
 });
 
-const statFetched: ComputedRef<boolean> = computed(() =>
-  statFetched.value
-    ? true
-    : stats.value.length > 0 && stats.value.length === data.value.length
-);
+const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
 </script>

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

@@ -1,25 +1,31 @@
 <template>
   <UiCardTitle
-    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :left="$t('hosts')"
+    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :right="$t('top-#', { n: N_ITEMS })"
   />
   <NoDataError v-if="hasError" />
-  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <UiCardSpinner v-else-if="isLoading" />
+  <NoResult v-else-if="isStatEmpty" />
+  <UsageBar v-else :data="data" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
-import UiCardTitle from "@/components/ui/UiCardTitle.vue";
-import { useHostCollection } from "@/stores/xen-api/host.store";
-import { IK_HOST_STATS } from "@/types/injection-keys";
-import { type ComputedRef, computed, inject } from "vue";
-import { UiCardTitleLevel } from "@/types/enums";
-import UsageBar from "@/components/UsageBar.vue";
-import { formatSize, parseRamUsage } from "@/libs/utils";
-import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
 import NoDataError from "@/components/NoDataError.vue";
+import NoResult from "@/components/NoResult.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
+import UsageBar from "@/components/UsageBar.vue";
+import { useStatStatus } from "@/composables/stat-status.composable";
+import { formatSize, parseRamUsage } from "@/libs/utils";
+import { useHostCollection } from "@/stores/xen-api/host.store";
+import { UiCardTitleLevel } from "@/types/enums";
+import { IK_HOST_STATS } from "@/types/injection-keys";
+import type { StatData } from "@/types/stat";
+import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { computed, inject } from "vue";
 
-const { hasError } = useHostCollection();
+const { hasError, isFetching } = useHostCollection();
 
 const stats = inject(
   IK_HOST_STATS,
@@ -27,12 +33,7 @@ const stats = inject(
 );
 
 const data = computed(() => {
-  const result: {
-    id: string;
-    label: string;
-    value: number;
-    badgeLabel: string;
-  }[] = [];
+  const result: StatData[] = [];
 
   stats.value.forEach((stat) => {
     if (stat.stats == null) {
@@ -50,9 +51,5 @@ const data = computed(() => {
   return result;
 });
 
-const statFetched: ComputedRef<boolean> = computed(
-  () =>
-    statFetched.value ||
-    (stats.value.length > 0 && stats.value.length === data.value.length)
-);
+const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
 </script>

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

@@ -1,25 +1,31 @@
 <template>
   <UiCardTitle
-    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :left="$t('vms')"
+    :level="UiCardTitleLevel.SubtitleWithUnderline"
     :right="$t('top-#', { n: N_ITEMS })"
   />
   <NoDataError v-if="hasError" />
-  <UsageBar v-else :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
+  <UiCardSpinner v-else-if="isLoading" />
+  <NoResult v-else-if="isStatEmpty" />
+  <UsageBar v-else :data="data" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, type ComputedRef } from "vue";
-import { formatSize, parseRamUsage } from "@/libs/utils";
-import { IK_VM_STATS } from "@/types/injection-keys";
-import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
 import NoDataError from "@/components/NoDataError.vue";
+import NoResult from "@/components/NoResult.vue";
+import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
 import UiCardTitle from "@/components/ui/UiCardTitle.vue";
-import { UiCardTitleLevel } from "@/types/enums";
 import UsageBar from "@/components/UsageBar.vue";
+import { useStatStatus } from "@/composables/stat-status.composable";
+import { formatSize, parseRamUsage } from "@/libs/utils";
 import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { UiCardTitleLevel } from "@/types/enums";
+import { IK_VM_STATS } from "@/types/injection-keys";
+import type { StatData } from "@/types/stat";
+import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { computed, inject } from "vue";
 
-const { hasError } = useVmCollection();
+const { hasError, isFetching } = useVmCollection();
 
 const stats = inject(
   IK_VM_STATS,
@@ -27,12 +33,7 @@ const stats = inject(
 );
 
 const data = computed(() => {
-  const result: {
-    id: string;
-    label: string;
-    value: number;
-    badgeLabel: string;
-  }[] = [];
+  const result: StatData[] = [];
 
   stats.value.forEach((stat) => {
     if (stat.stats == null) {
@@ -50,9 +51,5 @@ const data = computed(() => {
   return result;
 });
 
-const statFetched: ComputedRef<boolean> = computed(
-  () =>
-    statFetched.value ||
-    (stats.value.length > 0 && stats.value.length === data.value.length)
-);
+const { isLoading, isStatEmpty } = useStatStatus(stats, data, isFetching);
 </script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div class="ui-status-panel">
+    <img :src="imageSource" alt="" class="image" />
+    <p v-if="title !== undefined" class="title">{{ title }}</p>
+    <p v-if="subtitle !== undefined" class="subtitle">{{ subtitle }}</p>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  imageSource: string;
+  title?: string;
+  subtitle?: string;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+.ui-status-panel {
+  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);
+}
+
+.title {
+  font-weight: 400;
+  font-size: 36px;
+  text-align: center;
+}
+
+.subtitle {
+  font-weight: 500;
+  font-size: 24px;
+  margin: 21px 0;
+  text-align: center;
+}
+
+.image {
+  margin-bottom: 40px;
+  width: 30%;
+}
+</style>

@xen-orchestra/lite/src/components/vm/VmActionItems/VmActionMigrateItem.vue

@@ -3,7 +3,11 @@
     v-tooltip="
       selectedRefs.length > 0 &&
       !isMigratable &&
-      $t('no-selected-vm-can-be-migrated')
+      $t(
+        isSingleAction
+          ? 'this-vm-cant-be-migrated'
+          : 'no-selected-vm-can-be-migrated'
+      )
     "
     :busy="isMigrating"
     :disabled="isParentDisabled || !isMigratable"
@@ -28,6 +32,7 @@ import { computed } from "vue";
 
 const props = defineProps<{
   selectedRefs: XenApiVm["$ref"][];
+  isSingleAction?: boolean;
 }>();
 
 const { getByOpaqueRefs, isOperationPending, areSomeOperationAllowed } =

@xen-orchestra/lite/src/components/vm/VmHeader.vue

@@ -28,6 +28,7 @@
         <VmActionCopyItem :selected-refs="[vm.$ref]" is-single-action />
         <VmActionExportItem :vm-refs="[vm.$ref]" is-single-action />
         <VmActionSnapshotItem :vm-refs="[vm.$ref]" />
+        <VmActionMigrateItem :selected-refs="[vm.$ref]" is-single-action />
       </AppMenu>
     </template>
   </TitleBar>
@@ -38,6 +39,7 @@ import AppMenu from "@/components/menu/AppMenu.vue";
 import TitleBar from "@/components/TitleBar.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import UiButton from "@/components/ui/UiButton.vue";
+import VmActionMigrateItem from "@/components/vm/VmActionItems/VmActionMigrateItem.vue";
 import VmActionPowerStateItems from "@/components/vm/VmActionItems/VmActionPowerStateItems.vue";
 import VmActionSnapshotItem from "@/components/vm/VmActionItems/VmActionSnapshotItem.vue";
 import VmActionCopyItem from "@/components/vm/VmActionItems/VmActionCopyItem.vue";

@xen-orchestra/lite/src/composables/stat-status.composable.ts

@@ -0,0 +1,32 @@
+import type { Stat } from "@/composables/fetch-stats.composable";
+import type { StatData } from "@/types/stat";
+import type { MaybeRef } from "@vueuse/core";
+import { computed, type ComputedRef, toRef } from "vue";
+
+export const useStatStatus = (
+  _stats: MaybeRef<Stat<any>[]>,
+  _data: MaybeRef<StatData[]>,
+  _isFetching: MaybeRef<boolean>
+) => {
+  const stats = toRef(_stats);
+  const data = toRef(_data);
+  const isFetching = toRef(_isFetching);
+
+  const _isStatFetched: ComputedRef<boolean> = computed(
+    () => stats.value.length === data.value.length
+  );
+
+  const isStatEmpty: ComputedRef<boolean> = computed(
+    () =>
+      !isFetching.value && stats.value.length === 0 && data.value.length === 0
+  );
+
+  const isLoading: ComputedRef<boolean> = computed(
+    () => isFetching.value || !_isStatFetched.value
+  );
+
+  return {
+    isStatEmpty,
+    isLoading,
+  };
+};

@xen-orchestra/lite/src/locales/en.json

@@ -27,6 +27,7 @@
   "cancel": "Cancel",
   "change-state": "Change state",
   "click-to-display-alarms": "Click to display alarms:",
+  "click-to-return-default-pool": "Click here to return to the default pool",
   "close": "Close",
   "coming-soon": "Coming soon!",
   "community": "Community",
@@ -37,6 +38,7 @@
   "console-unavailable": "Console unavailable",
   "copy": "Copy",
   "cpu-provisioning": "CPU provisioning",
+  "cpu-provisioning-warning": "The number of vCPUs allocated exceeds the number of physical CPUs available. System performance could be affected",
   "cpu-usage": "CPU usage",
   "dashboard": "Dashboard",
   "delete": "Delete",
@@ -110,6 +112,7 @@
   "news": "News",
   "news-name": "{name} news",
   "no-alarm-triggered": "No alarm triggered",
+  "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
   "no-selected-vm-can-be-migrated": "No selected VM can be migrated",
   "no-tasks": "No tasks",
@@ -177,6 +180,7 @@
   "theme-auto": "Auto",
   "theme-dark": "Dark",
   "theme-light": "Light",
+  "this-vm-cant-be-migrated": "This VM can't be migrated",
   "top-#": "Top {n}",
   "total-cpus": "Total CPUs",
   "total-free": "Total free",
@@ -189,5 +193,6 @@
   "vm-is-running": "The VM is running",
   "vms": "VMs",
   "xo-lite-under-construction": "XOLite is under construction",
+  "you-are-currently-on": "You are currently on: {0}",
   "zstd": "zstd"
 }

@xen-orchestra/lite/src/locales/fr.json

@@ -27,6 +27,7 @@
   "cancel": "Annuler",
   "change-state": "Changer l'état",
   "click-to-display-alarms": "Cliquer pour afficher les alarmes :",
+  "click-to-return-default-pool": "Cliquer ici pour revenir au pool par défaut",
   "close": "Fermer",
   "coming-soon": "Bientôt disponible !",
   "community": "Communauté",
@@ -37,6 +38,7 @@
   "console-unavailable": "Console indisponible",
   "copy": "Copier",
   "cpu-provisioning": "Provisionnement CPU",
+  "cpu-provisioning-warning": "Le nombre de vCPU alloués dépasse le nombre de CPU physique disponible. Les performances du système pourraient être affectées",
   "cpu-usage": "Utilisation CPU",
   "dashboard": "Tableau de bord",
   "delete": "Supprimer",
@@ -110,6 +112,7 @@
   "news": "Actualités",
   "news-name": "Actualités {name}",
   "no-alarm-triggered": "Aucune alarme déclenchée",
+  "no-result": "Aucun résultat",
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
   "no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
   "no-tasks": "Aucune tâche",
@@ -177,6 +180,7 @@
   "theme-auto": "Auto",
   "theme-dark": "Sombre",
   "theme-light": "Clair",
+  "this-vm-cant-be-migrated": "Cette VM ne peut pas être migrée",
   "top-#": "Top {n}",
   "total-cpus": "Total CPUs",
   "total-free": "Total libre",
@@ -189,5 +193,6 @@
   "vm-is-running": "La VM est en cours d'exécution",
   "vms": "VMs",
   "xo-lite-under-construction": "XOLite est en construction",
+  "you-are-currently-on": "Vous êtes actuellement sur : {0}",
   "zstd": "zstd"
 }

@xen-orchestra/lite/src/stores/xen-api.store.ts

@@ -1,8 +1,10 @@
 import XapiStats from "@/libs/xapi-stats";
 import XenApi from "@/libs/xen-api/xen-api";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, useSessionStorage, whenever } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { computed, ref, watchEffect } from "vue";
+import { useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 
 const HOST_URL = import.meta.env.PROD
   ? window.origin
@@ -15,7 +17,27 @@ enum STATUS {
 }
 
 export const useXenApiStore = defineStore("xen-api", () => {
-  const xenApi = new XenApi(HOST_URL);
+  // undefined not correctly handled. See https://github.com/vueuse/vueuse/issues/3595
+  const masterSessionStorage = useSessionStorage<null | string>("master", null);
+  const router = useRouter();
+  const route = useRoute();
+
+  whenever(
+    () => route.query.master,
+    async (newMaster) => {
+      masterSessionStorage.value = newMaster as string;
+      await router.replace({ query: { ...route.query, master: undefined } });
+      window.location.reload();
+    }
+  );
+
+  const hostUrl = new URL(HOST_URL);
+  if (masterSessionStorage.value !== null) {
+    hostUrl.hostname = masterSessionStorage.value;
+  }
+
+  const isPoolOverridden = hostUrl.origin !== new URL(HOST_URL).origin;
+  const xenApi = new XenApi(hostUrl.origin);
   const xapiStats = new XapiStats(xenApi);
   const storedSessionId = useLocalStorage<string | undefined>(
     "sessionId",
@@ -75,14 +97,21 @@ export const useXenApiStore = defineStore("xen-api", () => {
     status.value = STATUS.DISCONNECTED;
   }
 
+  function resetPoolMasterIp() {
+    masterSessionStorage.value = null;
+    window.location.reload();
+  }
+
   return {
     isConnected,
     isConnecting,
+    isPoolOverridden,
     connect,
     reconnect,
     disconnect,
     getXapi,
     getXapiStats,
     currentSessionId,
+    resetPoolMasterIp,
   };
 });

@xen-orchestra/lite/src/types/stat.ts

@@ -0,0 +1,7 @@
+export interface StatData {
+  id: string;
+  value: number;
+  label?: string;
+  badgeLabel?: string;
+  maxValue?: number;
+}

@xen-orchestra/lite/src/views/vm/VmConsoleView.vue

@@ -2,16 +2,17 @@
   <div :class="{ 'no-ui': !uiStore.hasUi }" class="vm-console-view">
     <div v-if="hasError">{{ $t("error-occurred") }}</div>
     <UiSpinner v-else-if="!isReady" class="spinner" />
-    <div v-else-if="!isVmRunning" class="not-running">
-      <div><img alt="" src="@/assets/monitor.svg" /></div>
-      {{ $t("power-on-for-console") }}
-    </div>
+    <UiStatusPanel
+      v-else-if="!isVmRunning"
+      :image-source="monitor"
+      :title="$t('power-on-for-console')"
+    />
     <template v-else-if="vm && vmConsole">
       <AppMenu horizontal>
         <MenuItem
+          v-if="uiStore.hasUi"
           :icon="faArrowUpRightFromSquare"
           @click="openInNewTab"
-          v-if="uiStore.hasUi"
         >
           {{ $t("open-console-in-new-tab") }}
         </MenuItem>
@@ -44,10 +45,12 @@
 </template>
 
 <script lang="ts" setup>
+import monitor from "@/assets/monitor.svg";
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuItem from "@/components/menu/MenuItem.vue";
 import RemoteConsole from "@/components/RemoteConsole.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
+import UiStatusPanel from "@/components/ui/UiStatusPanel.vue";
 import { VM_OPERATION, VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
 import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 import { usePageTitleStore } from "@/stores/page-title.store";
@@ -158,7 +161,6 @@ const openInNewTab = () => {
   height: 100%;
 }
 
-.not-running,
 .not-available {
   display: flex;
   align-items: center;

@xen-orchestra/proxy/index.mjs

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 
-import forOwn from 'lodash/forOwn.js'
 import fse from 'fs-extra'
 import getopts from 'getopts'
 import pRetry from 'promise-toolbox/retry'
@@ -56,7 +55,7 @@ ${APP_NAME} v${APP_VERSION}
     createSecureServer: opts => createSecureServer({ ...opts, allowHTTP1: true }),
   })
 
-  forOwn(config.http.listen, async ({ autoCert, cert, key, ...opts }, configKey) => {
+  for (const [configKey, { autoCert, cert, key, ...opts }] of Object.entries(config.http.listen)) {
     const useAcme = autoCert && opts.acmeDomain !== undefined
 
     // don't pass these entries to httpServer.listen(opts)
@@ -130,7 +129,7 @@ ${APP_NAME} v${APP_VERSION}
         warn('web server could not listen', { error })
       }
     }
-  })
+  }
 
   const { group, user } = config
   group != null && process.setgid(group)

@xen-orchestra/proxy/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@xen-orchestra/proxy",
-  "version": "0.26.41",
+  "version": "0.26.42",
   "license": "AGPL-3.0-or-later",
   "description": "XO Proxy used to remotely execute backup jobs",
   "keywords": [
@@ -32,13 +32,13 @@
     "@vates/decorate-with": "^2.0.0",
     "@vates/disposable": "^0.1.5",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/backups": "^0.44.2",
+    "@xen-orchestra/backups": "^0.44.3",
     "@xen-orchestra/fs": "^4.1.3",
     "@xen-orchestra/log": "^0.6.0",
     "@xen-orchestra/mixin": "^0.1.0",
     "@xen-orchestra/mixins": "^0.14.0",
     "@xen-orchestra/self-signed": "^0.1.3",
-    "@xen-orchestra/xapi": "^4.0.0",
+    "@xen-orchestra/xapi": "^4.1.0",
     "ajv": "^8.0.3",
     "app-conf": "^2.3.0",
     "async-iterator-to-stream": "^1.1.0",

@xen-orchestra/vmware-explorer/package.json

@@ -10,7 +10,7 @@
     "@xen-orchestra/log": "^0.6.0",
     "lodash": "^4.17.21",
     "node-fetch": "^3.3.0",
-    "vhd-lib": "^4.7.0"
+    "vhd-lib": "^4.8.0"
   },
   "engines": {
     "node": ">=14"

@xen-orchestra/web-core/eslint.config.js

@@ -0,0 +1,14 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  rules: {
+    'import/order': ['error', { alphabetize: { order: 'asc', orderImportKind: 'asc' } }],
+  },
+  overrides: {
+    vue: {
+      'vue/component-api-style': 'error',
+      'vue/no-empty-component-block': 'error',
+      'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
+    },
+  },
+})

@xen-orchestra/web-core/lib/assets/css/_colors.pcss

@@ -0,0 +1,121 @@
+:root {
+  --color-grey-000: #000000;
+  --color-grey-100: #1a1b38;
+  --color-grey-200: #595a6f;
+  --color-grey-300: #9899a5;
+  --color-grey-400: #bfbfc6;
+  --color-grey-500: #e5e5e7;
+  --color-grey-600: #ffffff;
+
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f6f6f7;
+
+  --color-purple-base: #8f84ff;
+  --color-purple-d20: color(#8f84ff blend(black 20%));
+  --color-purple-d40: color(#8f84ff blend(black 40%));
+  --color-purple-d60: color(#8f84ff blend(black 60%));
+  --color-purple-l20: color(#8f84ff blend(white 20%));
+  --color-purple-l40: color(#8f84ff blend(white 40%));
+  --color-purple-l60: color(#8f84ff blend(white 60%));
+  --color-background-purple-10: color(white blend(#8f84ff 10%));
+  --color-background-purple-20: color(white blend(#8f84ff 20%));
+  --color-background-purple-30: color(white blend(#8f84ff 30%));
+  --color-background-purple-60: color(white blend(#8f84ff 60%));
+
+  --color-green-base: #2ca878;
+  --color-green-d20: color(#2ca878 blend(black 20%));
+  --color-green-d40: color(#2ca878 blend(black 40%));
+  --color-green-d60: color(#2ca878 blend(black 60%));
+  --color-green-l20: color(#2ca878 blend(white 20%));
+  --color-green-l40: color(#2ca878 blend(white 40%));
+  --color-green-l60: color(#2ca878 blend(white 60%));
+  --color-background-green-10: color(white blend(#2ca878 10%));
+  --color-background-green-20: color(white blend(#2ca878 20%));
+  --color-background-green-30: color(white blend(#2ca878 30%));
+  --color-background-green-60: color(white blend(#2ca878 60%));
+
+  --color-orange-base: #ef7f18;
+  --color-orange-d20: color(#ef7f18 blend(black 20%));
+  --color-orange-d40: color(#ef7f18 blend(black 40%));
+  --color-orange-d60: color(#ef7f18 blend(black 60%));
+  --color-orange-l20: color(#ef7f18 blend(white 20%));
+  --color-orange-l40: color(#ef7f18 blend(white 40%));
+  --color-orange-l60: color(#ef7f18 blend(white 60%));
+  --color-background-orange-10: color(white blend(#ef7f18 10%));
+  --color-background-orange-20: color(white blend(#ef7f18 20%));
+  --color-background-orange-30: color(white blend(#ef7f18 30%));
+  --color-background-orange-60: color(white blend(#ef7f18 60%));
+
+  --color-red-base: #be1621;
+  --color-red-d20: color(#be1621 blend(black 20%));
+  --color-red-d40: color(#be1621 blend(black 40%));
+  --color-red-d60: color(#be1621 blend(black 60%));
+  --color-red-l20: color(#be1621 blend(white 20%));
+  --color-red-l40: color(#be1621 blend(white 40%));
+  --color-red-l60: color(#be1621 blend(white 60%));
+  --color-background-red-10: color(white blend(#be1621 10%));
+  --color-background-red-20: color(white blend(#be1621 20%));
+  --color-background-red-30: color(white blend(#be1621 30%));
+  --color-background-red-60: color(white blend(#be1621 60%));
+}
+
+:root.dark {
+  --color-grey-000: #ffffff;
+  --color-grey-100: #e5e5e7;
+  --color-grey-400: #595a6f;
+  --color-grey-200: #bfbfc6;
+  --color-grey-300: #9899a5;
+  --color-grey-500: #1a1b38;
+  --color-grey-600: #000000;
+
+  --color-background-primary: #14141e;
+  --color-background-secondary: #17182b;
+
+  --color-purple-base: #8f84ff;
+  --color-purple-d20: color(#8f84ff blend(white 20%));
+  --color-purple-d40: color(#8f84ff blend(white 40%));
+  --color-purple-d60: color(#8f84ff blend(white 60%));
+  --color-purple-l20: color(#8f84ff blend(black 20%));
+  --color-purple-l40: color(#8f84ff blend(black 40%));
+  --color-purple-l60: color(#8f84ff blend(black 60%));
+  --color-background-purple-10: color(#17182b blend(#8f84ff 25%));
+  --color-background-purple-20: color(#17182b blend(#8f84ff 35%));
+  --color-background-purple-30: color(#17182b blend(#8f84ff 45%));
+  --color-background-purple-60: color(#17182b blend(#8f84ff 85%));
+
+  --color-green-base: #2ca878;
+  --color-green-d20: color(#2ca878 blend(white 20%));
+  --color-green-d40: color(#2ca878 blend(white 40%));
+  --color-green-d60: color(#2ca878 blend(white 60%));
+  --color-green-l20: color(#2ca878 blend(black 20%));
+  --color-green-l40: color(#2ca878 blend(black 40%));
+  --color-green-l60: color(#2ca878 blend(black 60%));
+  --color-background-green-10: color(#17182b blend(#2ca878 25%));
+  --color-background-green-20: color(#17182b blend(#2ca878 35%));
+  --color-background-green-30: color(#17182b blend(#2ca878 45%));
+  --color-background-green-60: color(#17182b blend(#2ca878 85%));
+
+  --color-orange-base: #ef7f18;
+  --color-orange-d20: color(#ef7f18 blend(white 20%));
+  --color-orange-d40: color(#ef7f18 blend(white 40%));
+  --color-orange-d60: color(#ef7f18 blend(white 60%));
+  --color-orange-l20: color(#ef7f18 blend(black 20%));
+  --color-orange-l40: color(#ef7f18 blend(black 40%));
+  --color-orange-l60: color(#ef7f18 blend(black 60%));
+  --color-background-orange-10: color(#17182b blend(#ef7f18 25%));
+  --color-background-orange-20: color(#17182b blend(#ef7f18 35%));
+  --color-background-orange-30: color(#17182b blend(#ef7f18 45%));
+  --color-background-orange-60: color(#17182b blend(#ef7f18 85%));
+
+  --color-red-base: #be1621;
+  --color-red-d20: color(#be1621 blend(white 20%));
+  --color-red-d40: color(#be1621 blend(white 40%));
+  --color-red-d60: color(#be1621 blend(white 60%));
+  --color-red-l20: color(#be1621 blend(black 20%));
+  --color-red-l40: color(#be1621 blend(black 40%));
+  --color-red-l60: color(#be1621 blend(black 60%));
+  --color-background-red-10: color(#17182b blend(#be1621 25%));
+  --color-background-red-20: color(#17182b blend(#be1621 35%));
+  --color-background-red-30: color(#17182b blend(#be1621 45%));
+  --color-background-red-60: color(#17182b blend(#be1621 85%));
+}

@xen-orchestra/web-core/lib/assets/css/_context.pcss

@@ -0,0 +1,47 @@
+.context-color-success {
+  color: var(--color-green-base);
+}
+
+.context-color-error {
+  color: var(--color-red-base);
+}
+
+.context-color-warning {
+  color: var(--color-orange-base);
+}
+
+.context-color-info {
+  color: var(--color-purple-base);
+}
+
+.context-background-color-success {
+  background-color: var(--color-background-green-10);
+}
+
+.context-background-color-error {
+  background-color: var(--color-background-red-10);
+}
+
+.context-background-color-warning {
+  background-color: var(--color-background-orange-10);
+}
+
+.context-background-color-info {
+  background-color: var(--color-background-purple-10);
+}
+
+.context-border-color-success {
+  border-color: var(--color-green-base);
+}
+
+.context-border-color-error {
+  border-color: var(--color-red-base);
+}
+
+.context-border-color-warning {
+  border-color: var(--color-orange-base);
+}
+
+.context-border-color-info {
+  border-color: var(--color-purple-base);
+}

@xen-orchestra/web-core/lib/assets/css/_fonts.pcss

@@ -0,0 +1,6 @@
+@import '@fontsource/poppins/400.css';
+@import '@fontsource/poppins/500.css';
+@import '@fontsource/poppins/600.css';
+@import '@fontsource/poppins/700.css';
+@import '@fontsource/poppins/900.css';
+@import '@fontsource/poppins/400-italic.css';

@xen-orchestra/web-core/lib/assets/css/_reset.pcss

@@ -0,0 +1,42 @@
+html {
+  box-sizing: border-box;
+  font-size: 10px;
+}
+
+body {
+  font-size: 1.6rem;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  margin: 0;
+  position: relative;
+  font-family: Poppins, sans-serif;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

@xen-orchestra/web-core/lib/assets/css/_shadows.pcss

@@ -0,0 +1,25 @@
+:root {
+  --shadow-100: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.06);
+
+  --shadow-200: 0 0.1rem 0.1rem 0 rgba(26, 27, 56, 0.08), 0 0.2rem 0.1rem 0 rgba(26, 27, 56, 0.06),
+    0 0.1rem 0.3rem 0 rgba(26, 27, 56, 0.1);
+
+  --shadow-300: 0 0.6rem 1rem 0 rgba(26, 27, 56, 0.08), 0 0.1rem 1.8rem 0 rgba(26, 27, 56, 0.06),
+    0 0.3rem 0.5rem 0 rgba(26, 27, 56, 0.1);
+
+  --shadow-400: 0 2.4rem 3.8rem 0 rgba(26, 27, 56, 0.04), 0 0.9rem 4.6rem 0 rgba(26, 27, 56, 0.06),
+    0 1.1rem 1.5rem 0 rgba(26, 27, 56, 0.1);
+}
+
+:root.dark {
+  --shadow-100: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.12);
+
+  --shadow-200: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.16), 0 0.2rem 0.1rem 0 rgba(0, 0, 0, 0.12),
+    0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
+
+  --shadow-300: 0 0.6rem 1rem 0 rgba(0, 0, 0, 0.16), 0 0.1rem 1.8rem 0 rgba(0, 0, 0, 0.12),
+    0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.2);
+
+  --shadow-400: 0 2.4rem 3.8rem 0 rgba(0, 0, 0, 0.08), 0 0.9rem 4.6rem 0 rgba(0, 0, 0, 0.12),
+    0 1.1rem 1.5rem 0 rgba(0, 0, 0, 0.2);
+}

@xen-orchestra/web-core/lib/assets/css/_typography.pcss

@@ -0,0 +1,112 @@
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+.h7,
+.p1,
+.p2,
+.p3,
+.p4,
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  font-weight: 400;
+
+  &.black {
+    font-weight: 900;
+  }
+
+  &.semi-bold {
+    font-weight: 600;
+  }
+
+  &.medium {
+    font-weight: 500;
+  }
+
+  &.underline {
+    text-decoration: underline;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+}
+
+.h4,
+.h5,
+.h6,
+.h7,
+.p1,
+.p2,
+.p3,
+.p4,
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  line-height: 1.5em;
+  letter-spacing: 0.04em;
+}
+
+.h1 {
+  font-size: 4.8rem;
+  line-height: 6rem;
+}
+
+.h2 {
+  font-size: 3.6rem;
+  line-height: 6rem;
+}
+
+.h3 {
+  font-size: 2.4rem;
+  line-height: 3.2rem;
+}
+
+.h4 {
+  font-size: 2rem;
+}
+
+.h5 {
+  font-size: 1.8rem;
+}
+
+.h6,
+.p1,
+.c1 {
+  font-size: 1.6rem;
+}
+
+.h7,
+.p2,
+.c2 {
+  font-size: 1.4rem;
+}
+
+.p3,
+.c3 {
+  font-size: 1.2rem;
+}
+
+.p4,
+.c4 {
+  font-size: 1rem;
+}
+
+.c5 {
+  font-size: 0.8rem;
+}
+
+.c1,
+.c2,
+.c3,
+.c4,
+.c5 {
+  text-transform: uppercase;
+}

@xen-orchestra/web-core/lib/assets/css/base.pcss

@@ -0,0 +1,15 @@
+@import '_colors.pcss';
+@import '_reset.pcss';
+@import '_fonts.pcss';
+@import '_context.pcss';
+@import '_shadows.pcss';
+@import '_typography.pcss';
+
+:root {
+  color: var(--color-grey-100);
+  background-color: var(--color-background-primary);
+
+  &.dark {
+    color-scheme: dark;
+  }
+}

@xen-orchestra/web-core/lib/components/ui/UiCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="classProp" class="ui-card">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useContext } from '../../composables/context.composable'
+import type { Color } from '../../types/color'
+import { ColorContext } from '../../utils/context'
+
+const props = defineProps<{
+  color?: Color
+}>()
+
+const { name: contextColor, backgroundClass } = useContext(ColorContext, () => props.color)
+
+// We don't want to inherit "info" color
+const classProp = computed(() => {
+  if (props.color === undefined && contextColor.value === 'info')
+    return 'bg-primary'
+
+  return backgroundClass.value
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-card {
+  padding: 2.1rem;
+  border-radius: 0.8rem;
+  box-shadow: var(--shadow-200);
+}
+
+.bg-primary {
+  background-color: var(--background-color-primary);
+}
+</style>

@xen-orchestra/web-core/lib/components/ui/UiIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <UiSpinner v-if="busy" class="ui-icon" />
+  <FontAwesomeIcon v-else-if="icon !== undefined" :icon="icon" class="ui-icon" :fixed-width="fixedWidth" />
+</template>
+
+<script lang="ts" setup>
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import UiSpinner from './UiSpinner.vue'
+
+withDefaults(
+  defineProps<{
+    busy?: boolean
+    icon?: IconDefinition
+    fixedWidth?: boolean
+  }>(),
+  { fixedWidth: true },
+)
+</script>

@xen-orchestra/web-core/lib/components/ui/UiSpinner.vue

@@ -0,0 +1,47 @@
+<!-- Adapted from https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ -->
+
+<template>
+  <svg class="ui-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" fill="none">
+    <defs>
+      <linearGradient :id="secondHalfId">
+        <stop offset="0%" stop-opacity="0" stop-color="currentColor" />
+        <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+      </linearGradient>
+      <linearGradient :id="firstHalfId">
+        <stop offset="0%" stop-opacity="1" stop-color="currentColor" />
+        <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+      </linearGradient>
+    </defs>
+
+    <g stroke-width="40">
+      <path d="M 30 200 A 170 170 180 0 1 370 200" :stroke="`url(#${secondHalfId})`" />
+      <path d="M 370 200 A 170 170 0 0 1 30 200" :stroke="`url(#${firstHalfId})`" />
+      <path stroke="currentColor" stroke-linecap="round" d="M 30 200 A 170 170 180 0 1 30 200" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { uniqueId } from 'lodash-es'
+
+const firstHalfId = uniqueId('spinner-first-half-')
+const secondHalfId = uniqueId('spinner-second-half-')
+</script>
+
+<style lang="postcss" scoped>
+.ui-spinner {
+  width: 1.2em;
+  height: 1.2em;
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

@xen-orchestra/web-core/lib/composables/context.composable.ts

@@ -0,0 +1,36 @@
+import type { ComputedRef, InjectionKey, MaybeRefOrGetter } from 'vue'
+import { computed, inject, provide, toValue } from 'vue'
+
+type Context<T = any, Output = any> = ReturnType<typeof createContext<T, Output>>
+
+type ContextOutput<Ctx extends Context> = Ctx extends Context<any, infer Output> ? Output : never
+
+type ContextValue<Ctx extends Context> = Ctx extends Context<infer T> ? T : never
+
+export function createContext<T, Output = ComputedRef<T>>(
+  initialValue: MaybeRefOrGetter<T>,
+  customBuilder?: (value: ComputedRef<T>) => Output,
+) {
+  return {
+    id: Symbol('context') as InjectionKey<MaybeRefOrGetter<T>>,
+    initialValue,
+    builder: customBuilder ?? (value => value as Output),
+  }
+}
+
+export function useContext<Ctx extends Context, T extends ContextValue<Ctx>>(
+  context: Ctx,
+  newValue?: MaybeRefOrGetter<T | undefined>,
+): ContextOutput<Ctx> {
+  const currentValue = inject(context.id, context.initialValue)
+
+  const build = (value: MaybeRefOrGetter<T>) => context.builder(computed(() => toValue(value)))
+
+  if (newValue !== undefined) {
+    const updatedValue = () => toValue(newValue) ?? toValue(currentValue)
+    provide(context.id, updatedValue)
+    return build(updatedValue)
+  }
+
+  return build(currentValue)
+}

@xen-orchestra/web-core/lib/types/color.ts

@@ -0,0 +1 @@
+export type Color = 'info' | 'error' | 'warning' | 'success'

@xen-orchestra/web-core/lib/utils/context.ts

@@ -0,0 +1,12 @@
+import { computed } from 'vue'
+import { createContext } from '../composables/context.composable'
+import type { Color } from '../types/color'
+
+export const DisabledContext = createContext(false)
+
+export const ColorContext = createContext('info' as Color, color => ({
+  name: color,
+  textClass: computed(() => `context-color-${color.value}`),
+  backgroundClass: computed(() => `context-background-color-${color.value}`),
+  borderClass: computed(() => `context-border-color-${color.value}`),
+}))

@xen-orchestra/web-core/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@xen-orchestra/web-core",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "exports": {
+    "./*": {
+      "types": "./lib/*",
+      "import": "./lib/*"
+    },
+    "./eslint": {
+      "import": "./eslint.config.js"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.4.6",
+    "@fontsource/poppins": "^5.0.8",
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^5.0.0-beta.1",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.0",
+    "eslint": "^8.56.0",
+    "glob": "^10.3.10",
+    "lodash-es": "^4.17.21",
+    "npm-run-all2": "^6.1.1",
+    "pinia": "^2.1.7",
+    "typescript": "~5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.6.4",
+    "vite-plugin-lib-inject-css": "^1.3.0",
+    "vue": "^3.4.0-beta.4",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.25"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

@xen-orchestra/web-core/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["@vue/tsconfig/tsconfig.dom.json"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "noEmit": true
+  },
+  "include": ["env.d.ts", "eslint.config.js", "lib/**/*", "lib/**/*.vue"],
+  "exclude": ["lib/**/__tests__/*"]
+}

@xen-orchestra/web-lite/.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+typed-router.d.ts

@xen-orchestra/web-lite/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

@xen-orchestra/web-lite/README.md

@@ -0,0 +1,40 @@
+# web-lite
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

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

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

@xen-orchestra/web-lite/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@xen-orchestra/web-core/eslint'

@xen-orchestra/web-lite/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

@xen-orchestra/web-lite/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@xen-orchestra/web-lite",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.4.6",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^5.0.0-beta.1",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.0",
+    "@xen-orchestra/web-core": "^0.0.1",
+    "eslint": "^8.56.0",
+    "npm-run-all2": "^6.1.1",
+    "pinia": "^2.1.7",
+    "postcss-apply": "^0.12.0",
+    "postcss-color-function": "^4.1.0",
+    "postcss-nested": "^6.0.1",
+    "typescript": "~5.3.3",
+    "unplugin-vue-router": "^0.7.0",
+    "vite": "^5.0.10",
+    "vue": "^3.4.0-beta.4",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.25"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

@xen-orchestra/web-lite/postcss.config.cjs

@@ -0,0 +1,9 @@
+'use strict'
+
+module.exports = {
+  plugins: {
+    'postcss-apply': {},
+    'postcss-nested': {},
+    'postcss-color-function': {},
+  },
+}

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

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

@xen-orchestra/web-lite/src/layouts/MainLayout.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="main-layout">
+    <div>XO Lite Main Layout</div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.main-layout {
+  font-size: 2rem;
+  padding: 4rem;
+}
+
+.content {
+  padding: 1rem 2rem;
+}
+</style>

@xen-orchestra/web-lite/src/main.ts

@@ -0,0 +1,18 @@
+import '@xen-orchestra/web-core/assets/css/base.pcss'
+import { createPinia } from 'pinia'
+
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router/auto'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  history: createWebHashHistory(),
+})
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

@xen-orchestra/web-lite/src/pages/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <MainLayout>
+    <UiCard color="info">
+      <div>Welcome on XO Lite main page</div>
+      <div>
+        Demo icon from web-core:
+        <UiIcon :icon="faShip" />
+      </div>
+      <div>
+        <button
+          type="button"
+          @click="toggleDark()"
+        >
+          Toggle Dark Mode {{ isDark ? 'OFF' : 'ON' }}
+        </button>
+      </div>
+    </UiCard>
+  </MainLayout>
+</template>
+
+<script lang="ts" setup>
+import { faShip } from '@fortawesome/free-solid-svg-icons/faShip'
+import { useDark, useToggle } from '@vueuse/core'
+import UiCard from '@xen-orchestra/web-core/components/ui/UiCard.vue'
+import UiIcon from '@xen-orchestra/web-core/components/ui/UiIcon.vue'
+import MainLayout from '@/layouts/MainLayout.vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>

@xen-orchestra/web-lite/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "rootDir": "..",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@xen-orchestra/web-core/*": ["../web-core/lib/*"]
+    },
+    "noEmit": true
+  },
+  "include": [
+    "env.d.ts",
+    "typed-router.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "../web-core/lib/**/*",
+    "../web-core/lib/**/*.vue"
+  ],
+  "exclude": ["src/**/__tests__/*"]
+}

@xen-orchestra/web-lite/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

@xen-orchestra/web-lite/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"]
+}

@xen-orchestra/web-lite/vite.config.ts

@@ -0,0 +1,15 @@
+import { URL, fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import vueRouter from 'unplugin-vue-router/vite'
+
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vueRouter(), vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})

@xen-orchestra/web/.gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+typed-router.d.ts

@xen-orchestra/web/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

@xen-orchestra/web/README.md

@@ -0,0 +1,40 @@
+# web
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

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

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

@xen-orchestra/web/eslint.config.js

@@ -0,0 +1 @@
+export { default } from '@xen-orchestra/web-core/eslint'

@xen-orchestra/web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

@xen-orchestra/web/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@xen-orchestra/web",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.4.6",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^5.0.0-beta.1",
+    "@vue/tsconfig": "^0.5.1",
+    "@xen-orchestra/web-core": "^0.0.1",
+    "eslint": "^8.56.0",
+    "npm-run-all2": "^6.1.1",
+    "pinia": "^2.1.7",
+    "postcss-apply": "^0.12.0",
+    "postcss-color-function": "^4.1.0",
+    "postcss-nested": "^6.0.1",
+    "typescript": "~5.3.3",
+    "unplugin-vue-router": "^0.7.0",
+    "vite": "^5.0.10",
+    "vue": "^3.4.0-beta.4",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.25"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

@xen-orchestra/web/postcss.config.js

@@ -0,0 +1,9 @@
+'use strict'
+
+module.exports = {
+  plugins: {
+    'postcss-apply': {},
+    'postcss-nested': {},
+    'postcss-color-function': {},
+  },
+}

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

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

@xen-orchestra/web/src/layouts/MainLayout.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="main-layout">
+    <div>XO 6 Main Layout</div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.main-layout {
+  padding: 8rem;
+  font-size: 3rem;
+}
+
+.content {
+  padding: 2rem 4rem;
+  border-bottom: 2px solid black;
+}
+</style>

@xen-orchestra/web/src/main.ts

@@ -0,0 +1,18 @@
+import '@xen-orchestra/web-core/assets/css/base.pcss'
+import { createPinia } from 'pinia'
+
+import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router/auto'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  history: createWebHashHistory(),
+})
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

@xen-orchestra/web/src/pages/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <MainLayout>
+    <UiCard color="info">
+      <div>Welcome on XO 6 main page</div>
+      <div>
+        Demo icon from web-core:
+        <UiIcon :icon="faRocket" />
+      </div>
+      <div>
+        <button type="button" @click="toggleDark()">
+          Toggle Dark Mode {{ isDark ? 'OFF' : 'ON' }}
+        </button>
+      </div>
+    </UiCard>
+  </MainLayout>
+</template>
+
+<script lang="ts" setup>
+import { faRocket } from '@fortawesome/free-solid-svg-icons/faRocket'
+import { useDark, useToggle } from '@vueuse/core'
+import UiCard from '@xen-orchestra/web-core/components/ui/UiCard.vue'
+import UiIcon from '@xen-orchestra/web-core/components/ui/UiIcon.vue'
+import MainLayout from '@/layouts/MainLayout.vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>

@xen-orchestra/web/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "rootDir": "..",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@xen-orchestra/web-core/*": ["../web-core/lib/*"]
+    },
+    "noEmit": true
+  },
+  "include": [
+    "env.d.ts",
+    "typed-router.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "../web-core/lib/**/*",
+    "../web-core/lib/**/*.vue"
+  ],
+  "exclude": ["src/**/__tests__/*"]
+}

@xen-orchestra/web/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "files": []
+}

@xen-orchestra/web/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"]
+}

@xen-orchestra/web/vite.config.ts

@@ -0,0 +1,15 @@
+import { URL, fileURLToPath } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import vueRouter from 'unplugin-vue-router/vite'
+
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vueRouter(), vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})

@xen-orchestra/xapi/host.mjs

@@ -3,6 +3,7 @@ import { asyncMap } from '@xen-orchestra/async-map'
 import { decorateClass } from '@vates/decorate-with'
 import { defer } from 'golike-defer'
 import { incorrectState, operationFailed } from 'xo-common/api-errors.js'
+import pRetry from 'promise-toolbox/retry'
 
 import { getCurrentVmUuid } from './_XenStore.mjs'
 
@@ -69,7 +70,12 @@ class Host {
     if (await this.getField('host', ref, 'enabled')) {
       await this.callAsync('host.disable', ref)
       $defer(async () => {
-        await this.callAsync('host.enable', ref)
+        await pRetry(() => this.callAsync('host.enable', ref), {
+          delay: 10e3,
+          retries: 6,
+          when: { code: 'HOST_STILL_BOOTING' },
+        })
+
         // Resuming VMs should occur after host enabling to avoid triggering a 'NO_HOSTS_AVAILABLE' error
         return asyncEach(suspendedVms, vmRef => this.callAsync('VM.resume', vmRef, false, false))
       })