Add files via upload

Screenshots that will be used in an article about NBD-enabled backups.

.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',
   },
 }

@vates/async-each/package.json

@@ -33,7 +33,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "tap": "^16.3.0",
     "test": "^3.2.1"
   }

@vates/disposable/package.json

@@ -14,7 +14,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "engines": {
     "node": ">=8.10"
   },
@@ -23,13 +23,13 @@
     "test": "node--test"
   },
   "dependencies": {
-    "@vates/multi-key-map": "^0.1.0",
+    "@vates/multi-key-map": "^0.2.0",
     "@xen-orchestra/async-map": "^0.1.2",
     "@xen-orchestra/log": "^0.6.0",
     "ensure-array": "^1.0.0"
   },
   "devDependencies": {
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "test": "^3.2.1"
   }
 }

@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.6.1"
+    "vhd-lib": "^4.7.0"
   },
   "scripts": {
     "postversion": "npm publish --access public"

@vates/multi-key-map/.USAGE.md

@@ -17,4 +17,14 @@ map.get(['foo', 'bar']) // 2
 map.get(['bar', 'foo']) // 3
 map.get([OBJ]) // 4
 map.get([{}]) // undefined
+
+map.delete([])
+
+for (const [key, value] of map.entries() {
+  console.log(key, value)
+}
+
+for (const  value of map.values()) {
+  console.log(value)
+}
 ```

@vates/multi-key-map/README.md

@@ -35,6 +35,16 @@ map.get(['foo', 'bar']) // 2
 map.get(['bar', 'foo']) // 3
 map.get([OBJ]) // 4
 map.get([{}]) // undefined
+
+map.delete([])
+
+for (const [key, value] of map.entries() {
+  console.log(key, value)
+}
+
+for (const  value of map.values()) {
+  console.log(value)
+}
 ```
 
 ## Contributions

@vates/multi-key-map/index.js

@@ -36,14 +36,31 @@ function del(node, i, keys) {
   return node
 }
 
+function* entries(node, key) {
+  if (node !== undefined) {
+    if (node instanceof Node) {
+      const { value } = node
+      if (value !== undefined) {
+        yield [key, node.value]
+      }
+
+      for (const [childKey, child] of node.children.entries()) {
+        yield* entries(child, key.concat(childKey))
+      }
+    } else {
+      yield [key, node]
+    }
+  }
+}
+
 function get(node, i, keys) {
   return i === keys.length
     ? node instanceof Node
       ? node.value
       : node
     : node instanceof Node
-    ? get(node.children.get(keys[i]), i + 1, keys)
-    : undefined
+      ? get(node.children.get(keys[i]), i + 1, keys)
+      : undefined
 }
 
 function set(node, i, keys, value) {
@@ -69,6 +86,22 @@ function set(node, i, keys, value) {
   return node
 }
 
+function* values(node) {
+  if (node !== undefined) {
+    if (node instanceof Node) {
+      const { value } = node
+      if (value !== undefined) {
+        yield node.value
+      }
+      for (const child of node.children.values()) {
+        yield* values(child)
+      }
+    } else {
+      yield node
+    }
+  }
+}
+
 exports.MultiKeyMap = class MultiKeyMap {
   constructor() {
     // each node is either a value or a Node if it contains children
@@ -79,6 +112,10 @@ exports.MultiKeyMap = class MultiKeyMap {
     this._root = del(this._root, 0, keys)
   }
 
+  entries() {
+    return entries(this._root, [])
+  }
+
   get(keys) {
     return get(this._root, 0, keys)
   }
@@ -86,4 +123,8 @@ exports.MultiKeyMap = class MultiKeyMap {
   set(keys, value) {
     this._root = set(this._root, 0, keys, value)
   }
+
+  values() {
+    return values(this._root)
+  }
 }

@vates/multi-key-map/index.test.js

@@ -19,7 +19,7 @@ describe('MultiKeyMap', () => {
       // reverse composite key
       ['bar', 'foo'],
     ]
-    const values = keys.map(() => ({}))
+    const values = keys.map(() => Math.random())
 
     // set all values first to make sure they are all stored and not only the
     // last one
@@ -27,6 +27,12 @@ describe('MultiKeyMap', () => {
       map.set(key, values[i])
     })
 
+    assert.deepEqual(
+      Array.from(map.entries()),
+      keys.map((key, i) => [key, values[i]])
+    )
+    assert.deepEqual(Array.from(map.values()), values)
+
     keys.forEach((key, i) => {
       // copy the key to make sure the array itself is not the key
       assert.strictEqual(map.get(key.slice()), values[i])

@vates/multi-key-map/package.json

@@ -18,7 +18,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "engines": {
     "node": ">=8.10"
   },

@vates/nbd-client/index.mjs

@@ -1,7 +1,7 @@
 import assert from 'node:assert'
 import { Socket } from 'node:net'
 import { connect } from 'node:tls'
-import { fromCallback, pRetry, pDelay, pTimeout } from 'promise-toolbox'
+import { fromCallback, pRetry, pDelay, pTimeout, pFromCallback } from 'promise-toolbox'
 import { readChunkStrict } from '@vates/read-chunk'
 import { createLogger } from '@xen-orchestra/log'
 
@@ -21,6 +21,7 @@ import {
   OPTS_MAGIC,
   NBD_CMD_DISC,
 } from './constants.mjs'
+import { Readable } from 'node:stream'
 
 const { warn } = createLogger('vates:nbd-client')
 
@@ -40,6 +41,7 @@ export default class NbdClient {
   #readBlockRetries
   #reconnectRetry
   #connectTimeout
+  #messageTimeout
 
   // AFAIK, there is no guaranty the server answers in the same order as the queries
   // so we handle a backlog of command waiting for response and handle concurrency manually
@@ -52,7 +54,14 @@ export default class NbdClient {
   #reconnectingPromise
   constructor(
     { address, port = NBD_DEFAULT_PORT, exportname, cert },
-    { connectTimeout = 6e4, waitBeforeReconnect = 1e3, readAhead = 10, readBlockRetries = 5, reconnectRetry = 5 } = {}
+    {
+      connectTimeout = 6e4,
+      messageTimeout = 6e4,
+      waitBeforeReconnect = 1e3,
+      readAhead = 10,
+      readBlockRetries = 5,
+      reconnectRetry = 5,
+    } = {}
   ) {
     this.#serverAddress = address
     this.#serverPort = port
@@ -63,6 +72,7 @@ export default class NbdClient {
     this.#readBlockRetries = readBlockRetries
     this.#reconnectRetry = reconnectRetry
     this.#connectTimeout = connectTimeout
+    this.#messageTimeout = messageTimeout
   }
 
   get exportSize() {
@@ -116,12 +126,24 @@ export default class NbdClient {
       return
     }
 
+    const queryId = this.#nextCommandQueryId
+    this.#nextCommandQueryId++
+
     const buffer = Buffer.alloc(28)
     buffer.writeInt32BE(NBD_REQUEST_MAGIC, 0) // it is a nbd request
     buffer.writeInt16BE(0, 4) // no command flags for a disconnect
     buffer.writeInt16BE(NBD_CMD_DISC, 6) // we want to disconnect from nbd server
-    await this.#write(buffer)
-    await this.#serverSocket.destroy()
+    buffer.writeBigUInt64BE(queryId, 8)
+    buffer.writeBigUInt64BE(0n, 16)
+    buffer.writeInt32BE(0, 24)
+    const promise = pFromCallback(cb => {
+      this.#serverSocket.end(buffer, 'utf8', cb)
+    })
+    try {
+      await pTimeout.call(promise, this.#messageTimeout)
+    } catch (error) {
+      this.#serverSocket.destroy()
+    }
     this.#serverSocket = undefined
     this.#connected = false
   }
@@ -195,11 +217,13 @@ export default class NbdClient {
   }
 
   #read(length) {
-    return readChunkStrict(this.#serverSocket, length)
+    const promise = readChunkStrict(this.#serverSocket, length)
+    return pTimeout.call(promise, this.#messageTimeout)
   }
 
   #write(buffer) {
-    return fromCallback.call(this.#serverSocket, 'write', buffer)
+    const promise = fromCallback.call(this.#serverSocket, 'write', buffer)
+    return pTimeout.call(promise, this.#messageTimeout)
   }
 
   async #readInt32() {
@@ -232,19 +256,20 @@ export default class NbdClient {
     }
     try {
       this.#waitingForResponse = true
-      const magic = await this.#readInt32()
+      const buffer = await this.#read(16)
+      const magic = buffer.readInt32BE(0)
 
       if (magic !== NBD_REPLY_MAGIC) {
         throw new Error(`magic number for block answer is wrong : ${magic} ${NBD_REPLY_MAGIC}`)
       }
 
-      const error = await this.#readInt32()
+      const error = buffer.readInt32BE(4)
       if (error !== 0) {
         // @todo use error code from constants.mjs
         throw new Error(`GOT ERROR CODE  : ${error}`)
       }
 
-      const blockQueryId = await this.#readInt64()
+      const blockQueryId = buffer.readBigUInt64BE(8)
       const query = this.#commandQueryBacklog.get(blockQueryId)
       if (!query) {
         throw new Error(` no query associated with id ${blockQueryId}`)
@@ -281,7 +306,13 @@ export default class NbdClient {
     buffer.writeInt16BE(NBD_CMD_READ, 6) // we want to read a data block
     buffer.writeBigUInt64BE(queryId, 8)
     // byte offset in the raw disk
-    buffer.writeBigUInt64BE(BigInt(index) * BigInt(size), 16)
+    const offset = BigInt(index) * BigInt(size)
+    const remaining = this.#exportSize - offset
+    if (remaining < BigInt(size)) {
+      size = Number(remaining)
+    }
+
+    buffer.writeBigUInt64BE(offset, 16)
     buffer.writeInt32BE(size, 24)
 
     return new Promise((resolve, reject) => {
@@ -307,14 +338,15 @@ export default class NbdClient {
     })
   }
 
-  async *readBlocks(indexGenerator) {
+  async *readBlocks(indexGenerator = 2 * 1024 * 1024) {
     // default : read all blocks
-    if (indexGenerator === undefined) {
-      const exportSize = this.#exportSize
-      const chunkSize = 2 * 1024 * 1024
+    if (typeof indexGenerator === 'number') {
+      const exportSize = Number(this.#exportSize)
+      const chunkSize = indexGenerator
+
       indexGenerator = function* () {
-        const nbBlocks = Math.ceil(Number(exportSize / BigInt(chunkSize)))
-        for (let index = 0; BigInt(index) < nbBlocks; index++) {
+        const nbBlocks = Math.ceil(exportSize / chunkSize)
+        for (let index = 0; index < nbBlocks; index++) {
           yield { index, size: chunkSize }
         }
       }
@@ -348,4 +380,15 @@ export default class NbdClient {
       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())
+  }
 }

@vates/nbd-client/package.json

@@ -13,7 +13,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "engines": {
     "node": ">=14.0"
   },
@@ -24,7 +24,7 @@
     "@xen-orchestra/async-map": "^0.1.2",
     "@xen-orchestra/log": "^0.6.0",
     "promise-toolbox": "^0.21.0",
-    "xen-api": "^1.3.6"
+    "xen-api": "^2.0.0"
   },
   "devDependencies": {
     "tap": "^16.3.0",

@vates/read-chunk/index.js

@@ -22,41 +22,41 @@ const readChunk = (stream, size) =>
   stream.errored != null
     ? Promise.reject(stream.errored)
     : stream.closed || stream.readableEnded
-    ? Promise.resolve(null)
-    : new Promise((resolve, reject) => {
-        if (size !== undefined) {
-          assert(size > 0)
+      ? Promise.resolve(null)
+      : new Promise((resolve, reject) => {
+          if (size !== undefined) {
+            assert(size > 0)
 
-          // per Node documentation:
-          // > The size argument must be less than or equal to 1 GiB.
-          assert(size < 1073741824)
-        }
+            // per Node documentation:
+            // > The size argument must be less than or equal to 1 GiB.
+            assert(size < 1073741824)
+          }
 
-        function onEnd() {
-          resolve(null)
-          removeListeners()
-        }
-        function onError(error) {
-          reject(error)
-          removeListeners()
-        }
-        function onReadable() {
-          const data = stream.read(size)
-          if (data !== null) {
-            resolve(data)
+          function onEnd() {
+            resolve(null)
             removeListeners()
           }
-        }
-        function removeListeners() {
-          stream.removeListener('end', onEnd)
-          stream.removeListener('error', onError)
-          stream.removeListener('readable', onReadable)
-        }
-        stream.on('end', onEnd)
-        stream.on('error', onError)
-        stream.on('readable', onReadable)
-        onReadable()
-      })
+          function onError(error) {
+            reject(error)
+            removeListeners()
+          }
+          function onReadable() {
+            const data = stream.read(size)
+            if (data !== null) {
+              resolve(data)
+              removeListeners()
+            }
+          }
+          function removeListeners() {
+            stream.removeListener('end', onEnd)
+            stream.removeListener('error', onError)
+            stream.removeListener('readable', onReadable)
+          }
+          stream.on('end', onEnd)
+          stream.on('error', onError)
+          stream.on('readable', onReadable)
+          onReadable()
+        })
 exports.readChunk = readChunk
 
 /**
@@ -111,42 +111,42 @@ async function skip(stream, size) {
   return stream.errored != null
     ? Promise.reject(stream.errored)
     : size === 0 || stream.closed || stream.readableEnded
-    ? Promise.resolve(0)
-    : new Promise((resolve, reject) => {
-        let left = size
-        function onEnd() {
-          resolve(size - left)
-          removeListeners()
-        }
-        function onError(error) {
-          reject(error)
-          removeListeners()
-        }
-        function onReadable() {
-          const data = stream.read()
-          left -= data === null ? 0 : data.length
-          if (left > 0) {
-            // continue to read
-          } else {
-            // if more than wanted has been read, push back the rest
-            if (left < 0) {
-              stream.unshift(data.slice(left))
-            }
-
-            resolve(size)
+      ? Promise.resolve(0)
+      : new Promise((resolve, reject) => {
+          let left = size
+          function onEnd() {
+            resolve(size - left)
             removeListeners()
           }
-        }
-        function removeListeners() {
-          stream.removeListener('end', onEnd)
-          stream.removeListener('error', onError)
-          stream.removeListener('readable', onReadable)
-        }
-        stream.on('end', onEnd)
-        stream.on('error', onError)
-        stream.on('readable', onReadable)
-        onReadable()
-      })
+          function onError(error) {
+            reject(error)
+            removeListeners()
+          }
+          function onReadable() {
+            const data = stream.read()
+            left -= data === null ? 0 : data.length
+            if (left > 0) {
+              // continue to read
+            } else {
+              // if more than wanted has been read, push back the rest
+              if (left < 0) {
+                stream.unshift(data.slice(left))
+              }
+
+              resolve(size)
+              removeListeners()
+            }
+          }
+          function removeListeners() {
+            stream.removeListener('end', onEnd)
+            stream.removeListener('error', onError)
+            stream.removeListener('readable', onReadable)
+          }
+          stream.on('end', onEnd)
+          stream.on('error', onError)
+          stream.on('readable', onReadable)
+          onReadable()
+        })
 }
 exports.skip = skip
 

@vates/task/README.md

@@ -111,7 +111,7 @@ const onProgress = makeOnProgress({
     // current status of the task as described in the previous section
     taskLog.status
 
-    // undefined or a dictionnary of properties attached to the task
+    // undefined or a dictionary of properties attached to the task
     taskLog.properties
 
     // timestamp at which the abortion was requested, undefined otherwise

@xen-orchestra/async-map/package.json

@@ -35,7 +35,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "test": "^3.2.1"
   }
 }

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

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

@xen-orchestra/backups/ImportVmBackup.mjs

@@ -4,23 +4,229 @@ import { formatFilenameDate } from './_filenameDate.mjs'
 import { importIncrementalVm } from './_incrementalVm.mjs'
 import { Task } from './Task.mjs'
 import { watchStreamSize } from './_watchStreamSize.mjs'
+import { VhdNegative, VhdSynthetic } from 'vhd-lib'
+import { decorateClass } from '@vates/decorate-with'
+import { createLogger } from '@xen-orchestra/log'
+import { dirname, join } from 'node:path'
+import pickBy from 'lodash/pickBy.js'
+import { defer } from 'golike-defer'
 
+const { debug, info, warn } = createLogger('xo:backups:importVmBackup')
+async function resolveUuid(xapi, cache, uuid, type) {
+  if (uuid == null) {
+    return uuid
+  }
+  const ref = cache.get(uuid)
+  if (ref === undefined) {
+    cache.set(uuid, xapi.call(`${type}.get_by_uuid`, uuid))
+  }
+  return cache.get(uuid)
+}
 export class ImportVmBackup {
-  constructor({ adapter, metadata, srUuid, xapi, settings: { newMacAddresses, mapVdisSrs = {} } = {} }) {
+  constructor({
+    adapter,
+    metadata,
+    srUuid,
+    xapi,
+    settings: { additionnalVmTag, newMacAddresses, mapVdisSrs = {}, useDifferentialRestore = false } = {},
+  }) {
     this._adapter = adapter
-    this._importIncrementalVmSettings = { newMacAddresses, mapVdisSrs }
+    this._importIncrementalVmSettings = { additionnalVmTag, newMacAddresses, mapVdisSrs, useDifferentialRestore }
     this._metadata = metadata
     this._srUuid = srUuid
     this._xapi = xapi
   }
 
+  async #getPathOfVdiSnapshot(snapshotUuid) {
+    const metadata = this._metadata
+    if (this._pathToVdis === undefined) {
+      const backups = await this._adapter.listVmBackups(
+        this._metadata.vm.uuid,
+        ({ mode, timestamp }) => mode === 'delta' && timestamp >= metadata.timestamp
+      )
+      const map = new Map()
+      for (const backup of backups) {
+        for (const [vdiRef, vdi] of Object.entries(backup.vdis)) {
+          map.set(vdi.uuid, backup.vhds[vdiRef])
+        }
+      }
+      this._pathToVdis = map
+    }
+    return this._pathToVdis.get(snapshotUuid)
+  }
+
+  async _reuseNearestSnapshot($defer, ignoredVdis) {
+    const metadata = this._metadata
+    const { mapVdisSrs } = this._importIncrementalVmSettings
+    const { vbds, vhds, vifs, vm, vmSnapshot } = metadata
+    const streams = {}
+    const metdataDir = dirname(metadata._filename)
+    const vdis = ignoredVdis === undefined ? metadata.vdis : pickBy(metadata.vdis, vdi => !ignoredVdis.has(vdi.uuid))
+
+    for (const [vdiRef, vdi] of Object.entries(vdis)) {
+      const vhdPath = join(metdataDir, vhds[vdiRef])
+
+      let xapiDisk
+      try {
+        xapiDisk = await this._xapi.getRecordByUuid('VDI', vdi.$snapshot_of$uuid)
+      } catch (err) {
+        // if this disk is not present anymore, fall back to default restore
+        warn(err)
+      }
+
+      let snapshotCandidate, backupCandidate
+      if (xapiDisk !== undefined) {
+        debug('found disks, wlll search its snapshots', { snapshots: xapiDisk.snapshots })
+        for (const snapshotRef of xapiDisk.snapshots) {
+          const snapshot = await this._xapi.getRecord('VDI', snapshotRef)
+          debug('handling snapshot', { snapshot })
+
+          // take only the first snapshot
+          if (snapshotCandidate && snapshotCandidate.snapshot_time < snapshot.snapshot_time) {
+            debug('already got a better candidate')
+            continue
+          }
+
+          // have a corresponding backup more recent than metadata ?
+          const pathToSnapshotData = await this.#getPathOfVdiSnapshot(snapshot.uuid)
+          if (pathToSnapshotData === undefined) {
+            debug('no backup linked to this snaphot')
+            continue
+          }
+          if (snapshot.$SR.uuid !== (mapVdisSrs[vdi.$snapshot_of$uuid] ?? this._srUuid)) {
+            debug('not restored on the same SR', { snapshotSr: snapshot.$SR.uuid, mapVdisSrs, srUuid: this._srUuid })
+            continue
+          }
+
+          debug('got a candidate', pathToSnapshotData)
+
+          snapshotCandidate = snapshot
+          backupCandidate = pathToSnapshotData
+        }
+      }
+
+      let stream
+      const backupWithSnapshotPath = join(metdataDir, backupCandidate ?? '')
+      if (vhdPath === backupWithSnapshotPath) {
+        // all the data are already on the host
+        debug('direct reuse of a snapshot')
+        stream = null
+        vdis[vdiRef].baseVdi = snapshotCandidate
+        // go next disk , we won't use this stream
+        continue
+      }
+
+      let disposableDescendants
+
+      const disposableSynthetic = await VhdSynthetic.fromVhdChain(this._adapter._handler, vhdPath)
+
+      // this will also clean if another disk of this VM backup fails
+      // if user really only need to restore non failing disks he can retry with ignoredVdis
+      let disposed = false
+      const disposeOnce = async () => {
+        if (!disposed) {
+          disposed = true
+          try {
+            await disposableDescendants?.dispose()
+            await disposableSynthetic?.dispose()
+          } catch (error) {
+            warn('openVhd: failed to dispose VHDs', { error })
+          }
+        }
+      }
+      $defer.onFailure(() => disposeOnce())
+
+      const parentVhd = disposableSynthetic.value
+      await parentVhd.readBlockAllocationTable()
+      debug('got vhd synthetic of parents', parentVhd.length)
+
+      if (snapshotCandidate !== undefined) {
+        try {
+          debug('will try to use differential restore', {
+            backupWithSnapshotPath,
+            vhdPath,
+            vdiRef,
+          })
+
+          disposableDescendants = await VhdSynthetic.fromVhdChain(this._adapter._handler, backupWithSnapshotPath, {
+            until: vhdPath,
+          })
+          const descendantsVhd = disposableDescendants.value
+          await descendantsVhd.readBlockAllocationTable()
+          debug('got vhd synthetic of descendants')
+          const negativeVhd = new VhdNegative(parentVhd, descendantsVhd)
+          debug('got vhd negative')
+
+          // update the stream with the negative vhd stream
+          stream = await negativeVhd.stream()
+          vdis[vdiRef].baseVdi = snapshotCandidate
+        } catch (err) {
+          // can be a broken VHD chain, a vhd chain with a key backup, ....
+          // not an irrecuperable error, don't dispose parentVhd, and fallback to full restore
+          warn(`can't use differential restore`, err)
+          disposableDescendants?.dispose()
+        }
+      }
+      // didn't make a negative stream : fallback to classic stream
+      if (stream === undefined) {
+        debug('use legacy restore')
+        stream = await parentVhd.stream()
+      }
+
+      stream.on('end', disposeOnce)
+      stream.on('close', disposeOnce)
+      stream.on('error', disposeOnce)
+      info('everything is ready, will transfer', stream.length)
+      streams[`${vdiRef}.vhd`] = stream
+    }
+    return {
+      streams,
+      vbds,
+      vdis,
+      version: '1.0.0',
+      vifs,
+      vm: { ...vm, suspend_VDI: vmSnapshot.suspend_VDI },
+    }
+  }
+
+  async #decorateIncrementalVmMetadata() {
+    const { additionnalVmTag, mapVdisSrs, useDifferentialRestore } = this._importIncrementalVmSettings
+    
+    const ignoredVdis = new Set(
+      Object.entries(mapVdisSrs)
+        .filter(([_, srUuid]) => srUuid === null)
+        .map(([vdiUuid]) => vdiUuid)
+    )
+    let backup
+    if (useDifferentialRestore) {
+      backup = await this._reuseNearestSnapshot(ignoredVdis)
+    } else {
+      backup = await this._adapter.readIncrementalVmBackup(this._metadata, ignoredVdis)
+    }
+    const xapi = this._xapi
+
+    const cache = new Map()
+    const mapVdisSrRefs = {}
+    if (additionnalVmTag !== undefined) {
+      backup.vm.tags.push(additionnalVmTag)
+    }
+    for (const [vdiUuid, srUuid] of Object.entries(mapVdisSrs)) {
+      mapVdisSrRefs[vdiUuid] = await resolveUuid(xapi, cache, srUuid, 'SR')
+    }
+    const srRef = await resolveUuid(xapi, cache, this._srUuid, 'SR')
+    Object.values(backup.vdis).forEach(vdi => {
+      vdi.SR = mapVdisSrRefs[vdi.uuid] ?? srRef
+    })
+    return backup
+  }
+
   async run() {
     const adapter = this._adapter
     const metadata = this._metadata
     const isFull = metadata.mode === 'full'
 
     const sizeContainer = { size: 0 }
-
+    const { newMacAddresses } = this._importIncrementalVmSettings
     let backup
     if (isFull) {
       backup = await adapter.readFullVmBackup(metadata)
@@ -28,12 +234,7 @@ export class ImportVmBackup {
     } else {
       assert.strictEqual(metadata.mode, 'delta')
 
-      const ignoredVdis = new Set(
-        Object.entries(this._importIncrementalVmSettings.mapVdisSrs)
-          .filter(([_, srUuid]) => srUuid === null)
-          .map(([vdiUuid]) => vdiUuid)
-      )
-      backup = await adapter.readIncrementalVmBackup(metadata, ignoredVdis)
+      backup = await this.#decorateIncrementalVmMetadata()
       Object.values(backup.streams).forEach(stream => watchStreamSize(stream, sizeContainer))
     }
 
@@ -48,8 +249,7 @@ export class ImportVmBackup {
         const vmRef = isFull
           ? await xapi.VM_import(backup, srRef)
           : await importIncrementalVm(backup, await xapi.getRecord('SR', srRef), {
-              ...this._importIncrementalVmSettings,
-              detectBase: false,
+              newMacAddresses,
             })
 
         await Promise.all([
@@ -59,6 +259,13 @@ export class ImportVmBackup {
             vmRef,
             `${metadata.vm.name_label} (${formatFilenameDate(metadata.timestamp)})`
           ),
+          xapi.call(
+            'VM.set_name_description',
+            vmRef,
+            `Restored on ${formatFilenameDate(+new Date())} from ${adapter._handler._remote.name} -
+             ${metadata.vm.name_description}
+            `
+          ),
         ])
 
         return {
@@ -69,3 +276,5 @@ export class ImportVmBackup {
     )
   }
 }
+
+decorateClass(ImportVmBackup, { _reuseNearestSnapshot: defer })

@xen-orchestra/backups/RemoteAdapter.mjs

@@ -681,11 +681,13 @@ export class RemoteAdapter {
     }
   }
 
-  async outputStream(path, input, { checksum = true, validator = noop } = {}) {
+  async outputStream(path, input, { checksum = true, maxStreamLength, streamLength, validator = noop } = {}) {
     const container = watchStreamSize(input)
     await this._handler.outputStream(path, input, {
       checksum,
       dirMode: this._dirMode,
+      maxStreamLength,
+      streamLength,
       async validator() {
         await input.task
         return validator.apply(this, arguments)

@xen-orchestra/backups/_incrementalVm.mjs

@@ -1,4 +1,3 @@
-import find from 'lodash/find.js'
 import groupBy from 'lodash/groupBy.js'
 import ignoreErrors from 'promise-toolbox/ignoreErrors'
 import omit from 'lodash/omit.js'
@@ -12,24 +11,18 @@ import { cancelableMap } from './_cancelableMap.mjs'
 import { Task } from './Task.mjs'
 import pick from 'lodash/pick.js'
 
+// in `other_config` of an incrementally replicated VM, contains the UUID of the source VM
 export const TAG_BASE_DELTA = 'xo:base_delta'
 
+// in `other_config` of an incrementally replicated VM, contains the UUID of the target SR used for replication
+//
+// added after the complete replication
+export const TAG_BACKUP_SR = 'xo:backup:sr'
+
+// in other_config of VDIs of an incrementally replicated VM, contains the UUID of the source VDI
 export const TAG_COPY_SRC = 'xo:copy_of'
 
-const TAG_BACKUP_SR = 'xo:backup:sr'
-
 const ensureArray = value => (value === undefined ? [] : Array.isArray(value) ? value : [value])
-const resolveUuid = async (xapi, cache, uuid, type) => {
-  if (uuid == null) {
-    return uuid
-  }
-  let ref = cache.get(uuid)
-  if (ref === undefined) {
-    ref = await xapi.call(`${type}.get_by_uuid`, uuid)
-    cache.set(uuid, ref)
-  }
-  return ref
-}
 
 export async function exportIncrementalVm(
   vm,
@@ -147,7 +140,7 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
   $defer,
   incrementalVm,
   sr,
-  { cancelToken = CancelToken.none, detectBase = true, mapVdisSrs = {}, newMacAddresses = false } = {}
+  { cancelToken = CancelToken.none, newMacAddresses = false } = {}
 ) {
   const { version } = incrementalVm
   if (compareVersions(version, '1.0.0') < 0) {
@@ -157,35 +150,6 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
   const vmRecord = incrementalVm.vm
   const xapi = sr.$xapi
 
-  let baseVm
-  if (detectBase) {
-    const remoteBaseVmUuid = vmRecord.other_config[TAG_BASE_DELTA]
-    if (remoteBaseVmUuid) {
-      baseVm = find(
-        xapi.objects.all,
-        obj => (obj = obj.other_config) && obj[TAG_COPY_SRC] === remoteBaseVmUuid && obj[TAG_BACKUP_SR] === sr.$id
-      )
-
-      if (!baseVm) {
-        throw new Error(`could not find the base VM (copy of ${remoteBaseVmUuid})`)
-      }
-    }
-  }
-
-  const cache = new Map()
-  const mapVdisSrRefs = {}
-  for (const [vdiUuid, srUuid] of Object.entries(mapVdisSrs)) {
-    mapVdisSrRefs[vdiUuid] = await resolveUuid(xapi, cache, srUuid, 'SR')
-  }
-
-  const baseVdis = {}
-  baseVm &&
-    baseVm.$VBDs.forEach(vbd => {
-      const vdi = vbd.$VDI
-      if (vdi !== undefined) {
-        baseVdis[vbd.VDI] = vbd.$VDI
-      }
-    })
   const vdiRecords = incrementalVm.vdis
 
   // 0. Create suspend_VDI
@@ -197,18 +161,7 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
         vm: pick(vmRecord, 'uuid', 'name_label', 'suspend_VDI'),
       })
     } else {
-      suspendVdi = await xapi.getRecord(
-        'VDI',
-        await xapi.VDI_create({
-          ...vdi,
-          other_config: {
-            ...vdi.other_config,
-            [TAG_BASE_DELTA]: undefined,
-            [TAG_COPY_SRC]: vdi.uuid,
-          },
-          sr: mapVdisSrRefs[vdi.uuid] ?? sr.$ref,
-        })
-      )
+      suspendVdi = await xapi.getRecord('VDI', await xapi.VDI_create(vdi))
       $defer.onFailure(() => suspendVdi.$destroy())
     }
   }
@@ -226,10 +179,6 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
       ha_always_run: false,
       is_a_template: false,
       name_label: '[Importing…] ' + vmRecord.name_label,
-      other_config: {
-        ...vmRecord.other_config,
-        [TAG_COPY_SRC]: vmRecord.uuid,
-      },
     },
     {
       bios_strings: vmRecord.bios_strings,
@@ -250,14 +199,8 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
     const vdi = vdiRecords[vdiRef]
     let newVdi
 
-    const remoteBaseVdiUuid = detectBase && vdi.other_config[TAG_BASE_DELTA]
-    if (remoteBaseVdiUuid) {
-      const baseVdi = find(baseVdis, vdi => vdi.other_config[TAG_COPY_SRC] === remoteBaseVdiUuid)
-      if (!baseVdi) {
-        throw new Error(`missing base VDI (copy of ${remoteBaseVdiUuid})`)
-      }
-
-      newVdi = await xapi.getRecord('VDI', await baseVdi.$clone())
+    if (vdi.baseVdi !== undefined) {
+      newVdi = await xapi.getRecord('VDI', await vdi.baseVdi.$clone())
       $defer.onFailure(() => newVdi.$destroy())
 
       await newVdi.update_other_config(TAG_COPY_SRC, vdi.uuid)
@@ -268,18 +211,7 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
       // suspendVDI has already created
       newVdi = suspendVdi
     } else {
-      newVdi = await xapi.getRecord(
-        'VDI',
-        await xapi.VDI_create({
-          ...vdi,
-          other_config: {
-            ...vdi.other_config,
-            [TAG_BASE_DELTA]: undefined,
-            [TAG_COPY_SRC]: vdi.uuid,
-          },
-          SR: mapVdisSrRefs[vdi.uuid] ?? sr.$ref,
-        })
-      )
+      newVdi = await xapi.getRecord('VDI', await xapi.VDI_create(vdi))
       $defer.onFailure(() => newVdi.$destroy())
     }
 
@@ -318,13 +250,19 @@ export const importIncrementalVm = defer(async function importIncrementalVm(
     // Import VDI contents.
     cancelableMap(cancelToken, Object.entries(newVdis), async (cancelToken, [id, vdi]) => {
       for (let stream of ensureArray(streams[`${id}.vhd`])) {
+        if (stream === null) {
+          // we restore a backup and reuse completly a local snapshot
+          continue
+        }
         if (typeof stream === 'function') {
           stream = await stream()
         }
         if (stream.length === undefined) {
           stream = await createVhdStreamWithLength(stream)
         }
+        await xapi.setField('VDI', vdi.$ref, 'name_label', `[Importing] ${vdiRecords[id].name_label}`)
         await vdi.$importContent(stream, { cancelToken, format: 'vhd' })
+        await xapi.setField('VDI', vdi.$ref, 'name_label', vdiRecords[id].name_label)
       }
     }),
 

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

@@ -29,6 +29,8 @@ export const FullRemote = class FullRemoteVmBackupRunner extends AbstractRemote
           writer =>
             writer.run({
               stream: forkStreamUnpipe(stream),
+              // stream will be forked and transformed, it's not safe to attach additionnal properties to it
+              streamLength: stream.length,
               timestamp: metadata.timestamp,
               vm: metadata.vm,
               vmSnapshot: metadata.vmSnapshot,

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

@@ -35,13 +35,25 @@ export const FullXapi = class FullXapiVmBackupRunner extends AbstractXapi {
         useSnapshot: false,
       })
     )
+
+    const vdis = await exportedVm.$getDisks()
+    let maxStreamLength = 1024 * 1024 // Ovf file and tar headers are a few KB, let's stay safe
+    for (const vdiRef of vdis) {
+      const vdi = await this._xapi.getRecord('VDI', vdiRef)
+
+      // the size a of fully allocated vdi will be virtual_size  exaclty, it's a gross over evaluation
+      // of the real stream size in general, since a disk is never completly full
+      // vdi.physical_size seems to underevaluate a lot the real disk usage of a VDI, as of 2023-10-30
+      maxStreamLength += vdi.virtual_size
+    }
+
     const sizeContainer = watchStreamSize(stream)
 
     const timestamp = Date.now()
-
     await this._callWriters(
       writer =>
         writer.run({
+          maxStreamLength,
           sizeContainer,
           stream: forkStreamUnpipe(stream),
           timestamp,

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

@@ -1,11 +1,11 @@
+import cloneDeep from 'lodash/cloneDeep.js'
 import mapValues from 'lodash/mapValues.js'
 
 import { forkStreamUnpipe } from '../_forkStreamUnpipe.mjs'
 
 export function forkDeltaExport(deltaExport) {
-  return Object.create(deltaExport, {
-    streams: {
-      value: mapValues(deltaExport.streams, forkStreamUnpipe),
-    },
-  })
+  const { streams, ...rest } = deltaExport
+  const newMetadata = cloneDeep(rest)
+  newMetadata.streams = mapValues(streams, forkStreamUnpipe)
+  return newMetadata
 }

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

@@ -24,7 +24,7 @@ export class FullRemoteWriter extends MixinRemoteWriter(AbstractFullWriter) {
     )
   }
 
-  async _run({ timestamp, sizeContainer, stream, vm, vmSnapshot }) {
+  async _run({ maxStreamLength, timestamp, sizeContainer, stream, streamLength, vm, vmSnapshot }) {
     const settings = this._settings
     const job = this._job
     const scheduleId = this._scheduleId
@@ -65,6 +65,8 @@ export class FullRemoteWriter extends MixinRemoteWriter(AbstractFullWriter) {
 
     await Task.run({ name: 'transfer' }, async () => {
       await adapter.outputStream(dataFilename, stream, {
+        maxStreamLength,
+        streamLength,
         validator: tmpPath => adapter.isValidXva(tmpPath),
       })
       return { size: sizeContainer.size }

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

@@ -11,6 +11,7 @@ import { dirname } from 'node:path'
 
 import { formatFilenameDate } from '../../_filenameDate.mjs'
 import { getOldEntries } from '../../_getOldEntries.mjs'
+import { TAG_BASE_DELTA } from '../../_incrementalVm.mjs'
 import { Task } from '../../Task.mjs'
 
 import { MixinRemoteWriter } from './_MixinRemoteWriter.mjs'
@@ -195,7 +196,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
             assert.notStrictEqual(
               parentPath,
               undefined,
-              `missing parent of ${id} in ${dirname(path)}, looking for ${vdi.other_config['xo:base_delta']}`
+              `missing parent of ${id} in ${dirname(path)}, looking for ${vdi.other_config[TAG_BASE_DELTA]}`
             )
 
             parentPath = parentPath.slice(1) // remove leading slash

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

@@ -4,12 +4,13 @@ import { formatDateTime } from '@xen-orchestra/xapi'
 
 import { formatFilenameDate } from '../../_filenameDate.mjs'
 import { getOldEntries } from '../../_getOldEntries.mjs'
-import { importIncrementalVm, TAG_COPY_SRC } from '../../_incrementalVm.mjs'
+import { importIncrementalVm, TAG_BACKUP_SR, TAG_BASE_DELTA, TAG_COPY_SRC } from '../../_incrementalVm.mjs'
 import { Task } from '../../Task.mjs'
 
 import { AbstractIncrementalWriter } from './_AbstractIncrementalWriter.mjs'
 import { MixinXapiWriter } from './_MixinXapiWriter.mjs'
 import { listReplicatedVms } from './_listReplicatedVms.mjs'
+import find from 'lodash/find.js'
 
 export class IncrementalXapiWriter extends MixinXapiWriter(AbstractIncrementalWriter) {
   async checkBaseVdis(baseUuidToSrcVdi, baseVm) {
@@ -81,6 +82,54 @@ export class IncrementalXapiWriter extends MixinXapiWriter(AbstractIncrementalWr
     return asyncMapSettled(this._oldEntries, vm => vm.$destroy())
   }
 
+  #decorateVmMetadata(backup) {
+    const { _warmMigration } = this._settings
+    const sr = this._sr
+    const xapi = sr.$xapi
+    const vm = backup.vm
+    vm.other_config[TAG_COPY_SRC] = vm.uuid
+    const remoteBaseVmUuid = vm.other_config[TAG_BASE_DELTA]
+    let baseVm
+    if (remoteBaseVmUuid) {
+      baseVm = find(
+        xapi.objects.all,
+        obj => (obj = obj.other_config) && obj[TAG_COPY_SRC] === remoteBaseVmUuid && obj[TAG_BACKUP_SR] === sr.$id
+      )
+
+      if (!baseVm) {
+        throw new Error(`could not find the base VM (copy of ${remoteBaseVmUuid})`)
+      }
+    }
+    const baseVdis = {}
+    baseVm?.$VBDs.forEach(vbd => {
+      const vdi = vbd.$VDI
+      if (vdi !== undefined) {
+        baseVdis[vbd.VDI] = vbd.$VDI
+      }
+    })
+
+    vm.other_config[TAG_COPY_SRC] = vm.uuid
+    if (!_warmMigration) {
+      vm.tags.push('Continuous Replication')
+    }
+
+    Object.values(backup.vdis).forEach(vdi => {
+      vdi.other_config[TAG_COPY_SRC] = vdi.uuid
+      vdi.SR = sr.$ref
+      // vdi.other_config[TAG_BASE_DELTA] is never defined on a suspend vdi
+      if (vdi.other_config[TAG_BASE_DELTA]) {
+        const remoteBaseVdiUuid = vdi.other_config[TAG_BASE_DELTA]
+        const baseVdi = find(baseVdis, vdi => vdi.other_config[TAG_COPY_SRC] === remoteBaseVdiUuid)
+        if (!baseVdi) {
+          throw new Error(`missing base VDI (copy of ${remoteBaseVdiUuid})`)
+        }
+        vdi.baseVdi = baseVdi
+      }
+    })
+
+    return backup
+  }
+
   async _transfer({ timestamp, deltaExport, sizeContainers, vm }) {
     const { _warmMigration } = this._settings
     const sr = this._sr
@@ -91,16 +140,7 @@ export class IncrementalXapiWriter extends MixinXapiWriter(AbstractIncrementalWr
 
     let targetVmRef
     await Task.run({ name: 'transfer' }, async () => {
-      targetVmRef = await importIncrementalVm(
-        {
-          __proto__: deltaExport,
-          vm: {
-            ...deltaExport.vm,
-            tags: _warmMigration ? deltaExport.vm.tags : [...deltaExport.vm.tags, 'Continuous Replication'],
-          },
-        },
-        sr
-      )
+      targetVmRef = await importIncrementalVm(this.#decorateVmMetadata(deltaExport), sr)
       return {
         size: Object.values(sizeContainers).reduce((sum, { size }) => sum + size, 0),
       }
@@ -121,13 +161,13 @@ export class IncrementalXapiWriter extends MixinXapiWriter(AbstractIncrementalWr
         )
       ),
       targetVm.update_other_config({
-        'xo:backup:sr': srUuid,
+        [TAG_BACKUP_SR]: srUuid,
 
         // these entries need to be added in case of offline backup
         'xo:backup:datetime': formatDateTime(timestamp),
         'xo:backup:job': job.id,
         'xo:backup:schedule': scheduleId,
-        'xo:backup:vm': vm.uuid,
+        [TAG_BASE_DELTA]: vm.uuid,
       }),
     ])
   }

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

@@ -1,9 +1,9 @@
 import { AbstractWriter } from './_AbstractWriter.mjs'
 
 export class AbstractFullWriter extends AbstractWriter {
-  async run({ timestamp, sizeContainer, stream, vm, vmSnapshot }) {
+  async run({ maxStreamLength, timestamp, sizeContainer, stream, streamLength, vm, vmSnapshot }) {
     try {
-      return await this._run({ timestamp, sizeContainer, stream, vm, vmSnapshot })
+      return await this._run({ maxStreamLength, timestamp, sizeContainer, stream, streamLength, vm, vmSnapshot })
     } finally {
       // ensure stream is properly closed
       stream.destroy()

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

@@ -96,6 +96,9 @@ export const MixinRemoteWriter = (BaseClass = Object) =>
             metadata,
             srUuid,
             xapi,
+            settings: {
+              additionnalVmTag: 'xo:no-bak=Health Check',
+            },
           }).run()
           const restoredVm = xapi.getObject(restoredId)
           try {

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

@@ -58,7 +58,7 @@ export const MixinXapiWriter = (BaseClass = Object) =>
               )
             }
             const healthCheckVm = xapi.getObject(healthCheckVmRef) ?? (await xapi.waitObject(healthCheckVmRef))
-
+            await healthCheckVm.add_tag('xo:no-bak=Health Check')
             await new HealthCheckVmBackup({
               restoredVm: healthCheckVm,
               xapi,

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.43.0",
+  "version": "0.44.2",
   "engines": {
     "node": ">=14.18"
   },
@@ -23,12 +23,12 @@
     "@vates/cached-dns.lookup": "^1.0.0",
     "@vates/compose": "^2.1.0",
     "@vates/decorate-with": "^2.0.0",
-    "@vates/disposable": "^0.1.4",
+    "@vates/disposable": "^0.1.5",
     "@vates/fuse-vhd": "^2.0.0",
-    "@vates/nbd-client": "^2.0.0",
+    "@vates/nbd-client": "^2.0.1",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/fs": "^4.1.0",
+    "@xen-orchestra/fs": "^4.1.3",
     "@xen-orchestra/log": "^0.6.0",
     "@xen-orchestra/template": "^0.1.0",
     "app-conf": "^2.3.0",
@@ -44,19 +44,19 @@
     "proper-lockfile": "^4.1.2",
     "tar": "^6.1.15",
     "uuid": "^9.0.0",
-    "vhd-lib": "^4.6.1",
-    "xen-api": "^1.3.6",
+    "vhd-lib": "^4.7.0",
+    "xen-api": "^2.0.0",
     "yazl": "^2.5.1"
   },
   "devDependencies": {
     "fs-extra": "^11.1.0",
     "rimraf": "^5.0.1",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "test": "^3.2.1",
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^3.2.0"
+    "@xen-orchestra/xapi": "^4.0.0"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

@xen-orchestra/cr-seed-cli/index.mjs

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
 
-'use strict'
+import { defer } from 'golike-defer'
+import { readFileSync } from 'fs'
+import { Ref, Xapi } from 'xen-api'
 
-const { Ref, Xapi } = require('xen-api')
-const { defer } = require('golike-defer')
-
-const pkg = require('./package.json')
+const pkg = JSON.parse(readFileSync(new URL('./package.json', import.meta.url)))
 
 Xapi.prototype.getVmDisks = async function (vm) {
   const disks = { __proto__: null }

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

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@xen-orchestra/cr-seed-cli",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/cr-seed-cli",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
   "repository": {
@@ -10,15 +10,15 @@
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
   "engines": {
-    "node": ">=8"
+    "node": ">=10"
   },
   "bin": {
-    "xo-cr-seed": "./index.js"
+    "xo-cr-seed": "./index.mjs"
   },
   "preferGlobal": true,
   "dependencies": {
     "golike-defer": "^0.5.1",
-    "xen-api": "^1.3.6"
+    "xen-api": "^2.0.0"
   },
   "scripts": {
     "postversion": "npm publish"

@xen-orchestra/cron/package.json

@@ -42,7 +42,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "test": "^3.2.1"
   }
 }

@xen-orchestra/fs/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@xen-orchestra/fs",
-  "version": "4.1.0",
+  "version": "4.1.3",
   "license": "AGPL-3.0-or-later",
   "description": "The File System for Xen Orchestra backups.",
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/fs",
@@ -53,7 +53,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "^16.0.0",
     "rimraf": "^5.0.1",
-    "sinon": "^16.0.0",
+    "sinon": "^17.0.1",
     "test": "^3.3.0",
     "tmp": "^0.2.1"
   },

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

@@ -189,7 +189,7 @@ export default class RemoteHandlerAbstract {
    * @param {number} [options.dirMode]
    * @param {(this: RemoteHandlerAbstract, path: string) => Promise<undefined>} [options.validator] Function that will be called before the data is commited to the remote, if it fails, file should not exist
    */
-  async outputStream(path, input, { checksum = true, dirMode, validator } = {}) {
+  async outputStream(path, input, { checksum = true, dirMode, maxStreamLength, streamLength, validator } = {}) {
     path = normalizePath(path)
     let checksumStream
 
@@ -201,6 +201,8 @@ export default class RemoteHandlerAbstract {
     }
     await this._outputStream(path, input, {
       dirMode,
+      maxStreamLength,
+      streamLength,
       validator,
     })
     if (checksum) {
@@ -624,14 +626,18 @@ export default class RemoteHandlerAbstract {
 
     const files = await this._list(dir)
     await asyncEach(files, file =>
-      this._unlink(`${dir}/${file}`).catch(error => {
-        // Unlink dir behavior is not consistent across platforms
-        // https://github.com/nodejs/node-v0.x-archive/issues/5791
-        if (error.code === 'EISDIR' || error.code === 'EPERM') {
-          return this._rmtree(`${dir}/${file}`)
-        }
-        throw error
-      })
+      this._unlink(`${dir}/${file}`).catch(
+        error => {
+          // Unlink dir behavior is not consistent across platforms
+          // https://github.com/nodejs/node-v0.x-archive/issues/5791
+          if (error.code === 'EISDIR' || error.code === 'EPERM') {
+            return this._rmtree(`${dir}/${file}`)
+          }
+          throw error
+        },
+        // real unlink concurrency will be 2**max directory depth
+        { concurrency: 2 }
+      )
     )
     return this._rmtree(dir)
   }

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

@@ -5,6 +5,7 @@ import {
   CreateMultipartUploadCommand,
   DeleteObjectCommand,
   GetObjectCommand,
+  GetObjectLockConfigurationCommand,
   HeadObjectCommand,
   ListObjectsV2Command,
   PutObjectCommand,
@@ -17,7 +18,7 @@ import { getApplyMd5BodyChecksumPlugin } from '@aws-sdk/middleware-apply-body-ch
 import { Agent as HttpAgent } from 'http'
 import { Agent as HttpsAgent } from 'https'
 import { createLogger } from '@xen-orchestra/log'
-import { PassThrough, pipeline } from 'stream'
+import { PassThrough, Transform, pipeline } from 'stream'
 import { parse } from 'xo-remote-parser'
 import copyStreamToBuffer from './_copyStreamToBuffer.js'
 import guessAwsRegion from './_guessAwsRegion.js'
@@ -30,7 +31,9 @@ import { pRetry } from 'promise-toolbox'
 
 // limits: https://docs.aws.amazon.com/AmazonS3/latest/dev/qfacts.html
 const MAX_PART_SIZE = 1024 * 1024 * 1024 * 5 // 5GB
-const { warn } = createLogger('xo:fs:s3')
+const MAX_PART_NUMBER = 10000
+const MIN_PART_SIZE = 5 * 1024 * 1024
+const { debug, info, warn } = createLogger('xo:fs:s3')
 
 export default class S3Handler extends RemoteHandlerAbstract {
   #bucket
@@ -71,9 +74,6 @@ export default class S3Handler extends RemoteHandlerAbstract {
       }),
     })
 
-    // Workaround for https://github.com/aws/aws-sdk-js-v3/issues/2673
-    this.#s3.middlewareStack.use(getApplyMd5BodyChecksumPlugin(this.#s3.config))
-
     const parts = split(path)
     this.#bucket = parts.shift()
     this.#dir = join(...parts)
@@ -223,11 +223,35 @@ export default class S3Handler extends RemoteHandlerAbstract {
     }
   }
 
-  async _outputStream(path, input, { validator }) {
+  async _outputStream(path, input, { streamLength, maxStreamLength = streamLength, validator }) {
+    // S3 storage is limited to 10K part, each part is limited to 5GB. And the total upload must be smaller than 5TB
+    // a bigger partSize increase the memory consumption of aws/lib-storage exponentially
+    let partSize
+    if (maxStreamLength === undefined) {
+      warn(`Writing ${path} to a S3 remote without a max size set will cut it to 50GB`, { path })
+      partSize = MIN_PART_SIZE // min size for S3
+    } else {
+      partSize = Math.min(Math.max(Math.ceil(maxStreamLength / MAX_PART_NUMBER), MIN_PART_SIZE), MAX_PART_SIZE)
+    }
+
+    // ensure we don't try to upload a stream to big for this partSize
+    let readCounter = 0
+    const MAX_SIZE = MAX_PART_NUMBER * partSize
+    const streamCutter = new Transform({
+      transform(chunk, encoding, callback) {
+        readCounter += chunk.length
+        if (readCounter > MAX_SIZE) {
+          callback(new Error(`read ${readCounter} bytes, maximum size allowed  is ${MAX_SIZE} `))
+        } else {
+          callback(null, chunk)
+        }
+      },
+    })
+
     // Workaround for "ReferenceError: ReadableStream is not defined"
     // https://github.com/aws/aws-sdk-js-v3/issues/2522
     const Body = new PassThrough()
-    pipeline(input, Body, () => {})
+    pipeline(input, streamCutter, Body, () => {})
 
     const upload = new Upload({
       client: this.#s3,
@@ -235,6 +259,8 @@ export default class S3Handler extends RemoteHandlerAbstract {
         ...this.#createParams(path),
         Body,
       },
+      partSize,
+      leavePartsOnError: false,
     })
 
     await upload.done()
@@ -418,6 +444,32 @@ export default class S3Handler extends RemoteHandlerAbstract {
 
   async _closeFile(fd) {}
 
+  async _sync() {
+    await super._sync()
+    try {
+      // if Object Lock is enabled, each upload must come with a contentMD5 header
+      // the computation of this md5 is memory-intensive, especially when uploading a stream
+      const res = await this.#s3.send(new GetObjectLockConfigurationCommand({ Bucket: this.#bucket }))
+      if (res.ObjectLockConfiguration?.ObjectLockEnabled === 'Enabled') {
+        // Workaround for https://github.com/aws/aws-sdk-js-v3/issues/2673
+        // will automatically add the contentMD5 header to any upload to S3
+        debug(`Object Lock is enable, enable content md5 header`)
+        this.#s3.middlewareStack.use(getApplyMd5BodyChecksumPlugin(this.#s3.config))
+      }
+    } catch (error) {
+      // maybe the account doesn't have enought privilege to query the object lock configuration
+      // be defensive and apply the md5  just in case
+      if (error.$metadata.httpStatusCode === 403) {
+        info(`s3 user doesnt have enough privilege to check for Object Lock, enable content MD5 header`)
+        this.#s3.middlewareStack.use(getApplyMd5BodyChecksumPlugin(this.#s3.config))
+      } else if (error.Code === 'ObjectLockConfigurationNotFoundError' || error.$metadata.httpStatusCode === 501) {
+        info(`Object lock is not available or not configured, don't add the content MD5 header`)
+      } else {
+        throw error
+      }
+    }
+  }
+
   useVhdDirectory() {
     return true
   }

@xen-orchestra/lite/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## **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))
+
+## **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))
+- More compact UI (PR [#7159](https://github.com/vatesfr/xen-orchestra/pull/7159))
+- Fix dashboard host patches list (PR [#7169](https://github.com/vatesfr/xen-orchestra/pull/7169))
+- Ability to export selected VMs (PR [#7174](https://github.com/vatesfr/xen-orchestra/pull/7174))
+- [VM/Action] Ability to export a VM from its view (PR [#7190](https://github.com/vatesfr/xen-orchestra/pull/7190))
+
+## **0.1.5** (2023-11-07)
+
+- Ability to snapshot/copy a VM from its view (PR [#7087](https://github.com/vatesfr/xen-orchestra/pull/7087))
+- [Header] Replace logo with "XO LITE" (PR [#7118](https://github.com/vatesfr/xen-orchestra/pull/7118))
+- New VM console toolbar + Ability to send Ctrl+Alt+Del (PR [#7088](https://github.com/vatesfr/xen-orchestra/pull/7088))
+- Total overhaul of the modal system (PR [#7134](https://github.com/vatesfr/xen-orchestra/pull/7134))
+
 ## **0.1.4** (2023-10-03)
 
 - Ability to migrate selected VMs to another host (PR [#7040](https://github.com/vatesfr/xen-orchestra/pull/7040))

@xen-orchestra/lite/docs/modals.md

@@ -0,0 +1,111 @@
+# Modal System Documentation
+
+## Opening a modal
+
+To open a modal, call `useModal(loader, props?)`.
+
+- `loader`: The modal component loader (e.g. `() => import("path/to/MyModal.vue")`)
+- `props`: The optional props to pass to the modal component
+
+This will return an object with the following methods:
+
+- `onApprove(cb)`:
+  - A function to register a callback to be called when the modal is approved.
+  - The callback will receive the modal payload as first argument, if any.
+  - The callback can return a Promise, in which case the modal will wait for it to resolve before closing.
+- `onDecline(cb)`:
+  - A function to register a callback to be called when the modal is declined.
+  - The callback can return a Promise, in which case the modal will wait for it to resolve before closing.
+
+### Static modal
+
+```ts
+useModal(MyModal);
+```
+
+### Modal with props
+
+```ts
+useModal(MyModal, { message: "Hello world!" });
+```
+
+### Handle modal approval
+
+```ts
+const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+
+onApprove(() => console.log("Modal approved"));
+```
+
+### Handle modal approval with payload
+
+```ts
+const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+
+onApprove((payload) => console.log("Modal approved with payload", payload));
+```
+
+### Handle modal decline
+
+```ts
+const { onDecline } = useModal(MyModal, { message: "Hello world!" });
+
+onDecline(() => console.log("Modal declined"));
+```
+
+### Handle modal close
+
+```ts
+const { onClose } = useModal(MyModal, { message: "Hello world!" });
+
+onClose(() => console.log("Modal closed"));
+```
+
+## Modal controller
+
+Inside the modal component, you can inject the modal controller with `inject(IK_MODAL)!`.
+
+```ts
+const modal = inject(IK_MODAL)!;
+```
+
+You can then use the following properties and methods on the `modal` object:
+
+- `isBusy`: Whether the modal is currently doing something (e.g. waiting for a promise to resolve).
+- `approve(payload?: any | Promise<any>)`: Approve the modal with an optional payload.
+  - Set `isBusy` to `true`.
+  - Wait for the `payload` to resolve (if any).
+  - Wait for all callbacks registered with `onApprove` to resolve (if any).
+  - Close the modal in case of success.
+- `decline()`: Decline the modal.
+  - Set `isBusy` to `true`.
+  - Wait for all callbacks registered with `onDecline` to resolve (if any).
+  - Close the modal in case of success.
+
+## Components
+
+Some components are available for quick modal creation.
+
+### `UiModal`
+
+The root component of the modal which will display the backdrop.
+
+A click on the backdrop will execute `modal.decline()`.
+
+It accepts `color` and `disabled` props which will update the `ColorContext` and `DisabledContext`.
+
+`DisabledContext` will also be set to `true` when `modal.isBusy` is `true`.
+
+The component itself is a `form` and is meant to be used with `<UiModal @submit.prevent="modal.approve()">`.
+
+### `ModalApproveButton`
+
+A wrapper around `UiButton` with `type="submit"` and with the `busy` prop set to `modal.isBusy`.
+
+### `ModalDeclineButton`
+
+A wrapper around `UiButton` with an `outline` prop and with the `busy` prop set to `modal.isBusy`.
+
+This button will call `modal.decline()` on click.
+
+Default text is `$t("cancel")`.

@xen-orchestra/lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xen-orchestra/lite",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "scripts": {
     "dev": "GIT_HEAD=$(git rev-parse HEAD) vite",
     "build": "run-p type-check build-only",
@@ -10,56 +10,55 @@
     "test": "yarn run type-check",
     "type-check": "vue-tsc --noEmit"
   },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "@novnc/novnc": "^1.3.0",
-    "@types/d3-time-format": "^4.0.0",
-    "@types/file-saver": "^2.0.5",
-    "@types/lodash-es": "^4.17.6",
-    "@types/marked": "^4.0.8",
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/math": "^10.1.2",
+  "devDependencies": {
+    "@fontsource/poppins": "^5.0.8",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@limegrass/eslint-plugin-import-alias": "^1.1.0",
+    "@novnc/novnc": "^1.4.0",
+    "@rushstack/eslint-patch": "^1.5.1",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/d3-time-format": "^4.0.3",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.11",
+    "@types/node": "^18.18.9",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.5.0",
+    "@vueuse/math": "^10.5.0",
     "complex-matcher": "^0.7.1",
     "d3-time-format": "^4.1.0",
     "decorator-synchronized": "^0.6.0",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.3",
+    "eslint-plugin-vue": "^9.18.1",
     "file-saver": "^2.0.5",
-    "highlight.js": "^11.6.0",
-    "human-format": "^1.1.0",
+    "highlight.js": "^11.9.0",
+    "human-format": "^1.2.0",
     "iterable-backoff": "^0.1.0",
-    "json-rpc-2.0": "^1.3.0",
-    "json5": "^2.2.1",
+    "json-rpc-2.0": "^1.7.0",
+    "json5": "^2.2.3",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash-es": "^4.17.21",
     "make-error": "^1.3.6",
-    "marked": "^4.2.12",
-    "pinia": "^2.1.2",
-    "placement.js": "^1.0.0-beta.5",
-    "vue": "^3.3.4",
-    "vue-echarts": "^6.2.3",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.2.1"
-  },
-  "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@limegrass/eslint-plugin-import-alias": "^1.0.5",
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/node": "^16.11.41",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "eslint-plugin-vue": "^9.0.0",
+    "marked": "^9.1.5",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.19",
-    "postcss-custom-media": "^9.0.1",
-    "postcss-nested": "^6.0.0",
-    "typescript": "^4.9.3",
-    "vite": "^4.3.8",
-    "vue-tsc": "^1.6.5"
+    "pinia": "^2.1.7",
+    "placement.js": "^1.0.0-beta.5",
+    "postcss": "^8.4.31",
+    "postcss-custom-media": "^10.0.2",
+    "postcss-nested": "^6.0.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vue": "^3.3.8",
+    "vue-echarts": "^6.6.1",
+    "vue-i18n": "^9.6.5",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.22"
   },
   "private": true,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/lite",
@@ -75,6 +74,6 @@
   },
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=18"
   }
 }

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

@@ -1,5 +1,4 @@
 <template>
-  <UnreachableHostsModal />
   <div v-if="!$route.meta.hasStoryNav && !xenApiStore.isConnected">
     <AppLogin />
   </div>
@@ -13,6 +12,7 @@
     </div>
     <AppTooltips />
   </div>
+  <ModalList />
 </template>
 
 <script lang="ts" setup>
@@ -21,8 +21,9 @@ import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
 import AppNavigation from "@/components/AppNavigation.vue";
 import AppTooltips from "@/components/AppTooltips.vue";
-import UnreachableHostsModal from "@/components/UnreachableHostsModal.vue";
+import ModalList from "@/components/ui/modals/ModalList.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
+import { useUnreachableHosts } from "@/composables/unreachable-hosts.composable";
 import { useUiStore } from "@/stores/ui.store";
 import { usePoolCollection } from "@/stores/xen-api/pool.store";
 import { useXenApiStore } from "@/stores/xen-api.store";
@@ -78,6 +79,8 @@ whenever(
     xenApiStore.getXapi().startWatching(poolRef);
   }
 );
+
+useUnreachableHosts();
 </script>
 
 <style lang="postcss">
@@ -88,7 +91,7 @@ whenever(
 .main {
   overflow: auto;
   flex: 1;
-  height: calc(100vh - 8rem);
+  height: calc(100vh - 5.5rem);
   background-color: var(--background-color-secondary);
 
   &.no-ui {

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

@@ -1,7 +1,11 @@
 @import "reset.css";
 @import "theme.css";
-/* TODO Serve fonts locally */
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500;1,600;1,700;1,900&display=swap");
+@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";
 
 body {
   min-height: 100vh;

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

@@ -1,4 +1,6 @@
 :root {
+  --color-logo: #282467;
+
   --color-blue-scale-000: #000000;
   --color-blue-scale-100: #1a1b38;
   --color-blue-scale-200: #595a6f;
@@ -59,6 +61,10 @@
 }
 
 :root.dark {
+  color-scheme: dark;
+
+  --color-logo: #e5e5e7;
+
   --color-blue-scale-000: #ffffff;
   --color-blue-scale-100: #e5e5e7;
   --color-blue-scale-200: #9899a5;

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

@@ -7,10 +7,12 @@
       class="toggle-navigation"
     />
     <RouterLink :to="{ name: 'home' }">
-      <img alt="XO Lite" src="../assets/logo.svg" />
+      <img v-if="isMobile" alt="XO Lite" src="../assets/logo.svg" />
+      <TextLogo v-else />
     </RouterLink>
     <slot />
     <div class="right">
+      <PoolOverrideWarning as-tooltip />
       <AccountButton />
     </div>
   </header>
@@ -18,6 +20,8 @@
 
 <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";
 import { useUiStore } from "@/stores/ui.store";
@@ -36,7 +40,7 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 8rem;
+  height: 5.5rem;
   padding: 1rem;
   border-bottom: 0.1rem solid var(--color-blue-scale-400);
   background-color: var(--background-color-secondary);
@@ -44,6 +48,15 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
   img {
     width: 4rem;
   }
+
+  .text-logo {
+    margin-left: 1rem;
+    vertical-align: middle;
+  }
+
+  .warning-not-current-pool {
+    font-size: 2.4rem;
+  }
 }
 
 .right {

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

@@ -2,27 +2,35 @@
   <div class="app-login form-container">
     <form @submit.prevent="handleSubmit">
       <img alt="XO Lite" src="../assets/logo-title.svg" />
-      <FormInputWrapper>
-        <FormInput v-model="login" name="login" readonly type="text" />
-      </FormInputWrapper>
-      <FormInputWrapper :error="error">
+      <PoolOverrideWarning />
+      <p v-if="isHostIsSlaveErr(error)" class="error">
+        <UiIcon :icon="faExclamationCircle" />
+        {{ $t("login-only-on-master") }}
+        <a :href="masterUrl.href">{{ masterUrl.hostname }}</a>
+      </p>
+      <template v-else>
+        <FormInputWrapper>
+          <FormInput v-model="login" name="login" readonly type="text" />
+        </FormInputWrapper>
         <FormInput
           name="password"
           ref="passwordRef"
           type="password"
           v-model="password"
+          :class="{ error: isInvalidPassword }"
           :placeholder="$t('password')"
           :readonly="isConnecting"
           required
         />
-      </FormInputWrapper>
-      <label class="remember-me-label">
-        <FormCheckbox v-model="rememberMe" />
-        <p>{{ $t("keep-me-logged") }}</p>
-      </label>
-      <UiButton type="submit" :busy="isConnecting">
-        {{ $t("login") }}
-      </UiButton>
+        <LoginError :error="error" />
+        <label class="remember-me-label">
+          <FormCheckbox v-model="rememberMe" />
+          {{ $t("keep-me-logged") }}
+        </label>
+        <UiButton type="submit" :busy="isConnecting">
+          {{ $t("login") }}
+        </UiButton>
+      </template>
     </form>
   </div>
 </template>
@@ -32,12 +40,17 @@ import { usePageTitleStore } from "@/stores/page-title.store";
 import { storeToRefs } from "pinia";
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { useLocalStorage } from "@vueuse/core";
+import { useLocalStorage, whenever } from "@vueuse/core";
 
 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";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
 const { t } = useI18n();
@@ -46,12 +59,15 @@ const xenApiStore = useXenApiStore();
 const { isConnecting } = storeToRefs(xenApiStore);
 const login = ref("root");
 const password = ref("");
-const error = ref<string>();
+const error = ref<XenApiError>();
 const passwordRef = ref<InstanceType<typeof FormInput>>();
 const isInvalidPassword = ref(false);
+const masterUrl = ref(new URL(window.origin));
 const rememberMe = useLocalStorage("rememberMe", false);
 
 const focusPasswordInput = () => passwordRef.value?.focus();
+const isHostIsSlaveErr = (err: XenApiError | undefined) =>
+  err?.message === "HOST_IS_SLAVE";
 
 onMounted(() => {
   if (rememberMe.value) {
@@ -66,18 +82,23 @@ watch(password, () => {
   error.value = undefined;
 });
 
+whenever(
+  () => isHostIsSlaveErr(error.value),
+  () => (masterUrl.value.hostname = error.value!.data)
+);
+
 async function handleSubmit() {
   try {
     await xenApiStore.connect(login.value, password.value);
-  } catch (err) {
-    if ((err as Error).message === "SESSION_AUTHENTICATION_FAILED") {
+  } catch (err: any) {
+    if (err.message === "SESSION_AUTHENTICATION_FAILED") {
       focusPasswordInput();
       isInvalidPassword.value = true;
-      error.value = t("password-invalid");
     } else {
-      error.value = t("error-occurred");
-      console.error(err);
+      console.error(error);
     }
+
+    error.value = err;
   }
 }
 </script>
@@ -85,14 +106,11 @@ async function handleSubmit() {
 <style lang="postcss" scoped>
 .remember-me-label {
   cursor: pointer;
+  display: flex;
+  margin: 1rem;
   width: fit-content;
   & .form-checkbox {
-    margin: 1rem 1rem 1rem 0;
-    vertical-align: middle;
-  }
-  & p {
-    display: inline;
-    vertical-align: middle;
+    margin: auto 1rem auto auto;
   }
 }
 
@@ -116,6 +134,10 @@ form {
   margin: 0 auto;
   padding: 8.5rem;
   background-color: var(--background-color-secondary);
+
+  .error {
+    color: var(--color-red-vates-base);
+  }
 }
 
 h1 {

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

@@ -48,7 +48,7 @@ whenever(isOpen, () => {
   overflow: auto;
   width: 37rem;
   max-width: 37rem;
-  height: calc(100vh - 8rem);
+  height: calc(100vh - 5.5rem);
   padding: 0.5rem;
   border-right: 1px solid var(--color-blue-scale-400);
   background-color: var(--background-color-primary);

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

@@ -3,79 +3,27 @@
     <UiFilter
       v-for="filter in activeFilters"
       :key="filter"
-      @edit="editFilter(filter)"
+      @edit="openModal(filter)"
       @remove="emit('removeFilter', filter)"
     >
       {{ filter }}
     </UiFilter>
 
-    <UiActionButton :icon="faPlus" class="add-filter" @click="open">
+    <UiActionButton :icon="faPlus" class="add-filter" @click="openModal()">
       {{ $t("add-filter") }}
     </UiActionButton>
   </UiFilterGroup>
-
-  <UiModal v-model="isOpen">
-    <ConfirmModalLayout @submit.prevent="handleSubmit">
-      <template #default>
-        <div class="rows">
-          <CollectionFilterRow
-            v-for="(newFilter, index) in newFilters"
-            :key="newFilter.id"
-            v-model="newFilters[index]"
-            :available-filters="availableFilters"
-            @remove="removeNewFilter"
-          />
-        </div>
-
-        <div
-          v-if="newFilters.some((filter) => filter.isAdvanced)"
-          class="available-properties"
-        >
-          {{ $t("available-properties-for-advanced-filter") }}
-          <div class="properties">
-            <UiBadge
-              v-for="(filter, property) in availableFilters"
-              :key="property"
-              :icon="getFilterIcon(filter)"
-            >
-              {{ property }}
-            </UiBadge>
-          </div>
-        </div>
-      </template>
-
-      <template #buttons>
-        <UiButton transparent @click="addNewFilter">
-          {{ $t("add-or") }}
-        </UiButton>
-        <UiButton :disabled="!isFilterValid" type="submit">
-          {{ $t(editedFilter ? "update" : "add") }}
-        </UiButton>
-        <UiButton outlined @click="close">
-          {{ $t("cancel") }}
-        </UiButton>
-      </template>
-    </ConfirmModalLayout>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import CollectionFilterRow from "@/components/CollectionFilterRow.vue";
-import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
 import UiActionButton from "@/components/ui/UiActionButton.vue";
-import UiBadge from "@/components/ui/UiBadge.vue";
-import UiButton from "@/components/ui/UiButton.vue";
 import UiFilter from "@/components/ui/UiFilter.vue";
 import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
-import useModal from "@/composables/modal.composable";
-import { getFilterIcon } from "@/libs/utils";
-import type { Filters, NewFilter } from "@/types/filter";
+import { useModal } from "@/composables/modal.composable";
+import type { Filters } from "@/types/filter";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { Or, parse } from "complex-matcher";
-import { computed, ref } from "vue";
 
-defineProps<{
+const props = defineProps<{
   activeFilters: string[];
   availableFilters: Filters;
 }>();
@@ -85,110 +33,19 @@ const emit = defineEmits<{
   (event: "removeFilter", filter: string): void;
 }>();
 
-const { isOpen, open, close } = useModal({ onClose: () => reset() });
-const newFilters = ref<NewFilter[]>([]);
-let newFilterId = 0;
-
-const addNewFilter = () =>
-  newFilters.value.push({
-    id: newFilterId++,
-    content: "",
-    isAdvanced: false,
-    builder: { property: "", comparison: "", value: "", negate: false },
-  });
-
-const removeNewFilter = (id: number) => {
-  const index = newFilters.value.findIndex((newFilter) => newFilter.id === id);
-  if (index >= 0) {
-    newFilters.value.splice(index, 1);
-  }
-};
-
-addNewFilter();
-
-const generatedFilter = computed(() => {
-  const filters = newFilters.value.filter(
-    (newFilter) => newFilter.content !== ""
+const openModal = (editedFilter?: string) => {
+  const { onApprove } = useModal<string>(
+    () => import("@/components/modals/CollectionFilterModal.vue"),
+    {
+      availableFilters: props.availableFilters,
+      editedFilter,
+    }
   );
 
-  if (filters.length === 0) {
-    return "";
+  if (editedFilter !== undefined) {
+    onApprove(() => emit("removeFilter", editedFilter));
   }
 
-  if (filters.length === 1) {
-    return filters[0].content;
-  }
-
-  return `|(${filters.map((filter) => filter.content).join(" ")})`;
-});
-
-const isFilterValid = computed(() => generatedFilter.value !== "");
-
-const editedFilter = ref();
-
-const editFilter = (filter: string) => {
-  const parsedFilter = parse(filter);
-
-  const nodes =
-    parsedFilter instanceof Or ? parsedFilter.children : [parsedFilter];
-
-  newFilters.value = nodes.map((node) => ({
-    id: newFilterId++,
-    content: node.toString(),
-    isAdvanced: true,
-    builder: { property: "", comparison: "", value: "", negate: false },
-  }));
-  editedFilter.value = filter;
-  open();
-};
-
-const reset = () => {
-  editedFilter.value = "";
-  newFilters.value = [];
-  addNewFilter();
-};
-
-const handleSubmit = () => {
-  if (editedFilter.value) {
-    emit("removeFilter", editedFilter.value);
-  }
-  emit("addFilter", generatedFilter.value);
-  reset();
-  close();
+  onApprove((newFilter) => emit("addFilter", newFilter));
 };
 </script>
-
-<style lang="postcss" scoped>
-.properties {
-  font-size: 1.6rem;
-  margin-top: 1rem;
-
-  ul {
-    margin-left: 1rem;
-  }
-
-  li {
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-}
-
-.available-properties {
-  margin-top: 1rem;
-}
-
-.properties {
-  display: flex;
-  margin-top: 0.6rem;
-  gap: 0.5rem;
-}
-
-.rows {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-</style>

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

@@ -12,65 +12,27 @@
       </span>
     </UiFilter>
 
-    <UiActionButton :icon="faPlus" class="add-sort" @click="open">
+    <UiActionButton :icon="faPlus" class="add-sort" @click="openModal()">
       {{ $t("add-sort") }}
     </UiActionButton>
   </UiFilterGroup>
-
-  <UiModal v-model="isOpen">
-    <ConfirmModalLayout @submit.prevent="handleSubmit">
-      <template #default>
-        <div class="form-widgets">
-          <FormWidget :label="$t('sort-by')">
-            <select v-model="newSortProperty">
-              <option v-if="!newSortProperty"></option>
-              <option
-                v-for="(sort, property) in availableSorts"
-                :key="property"
-                :value="property"
-              >
-                {{ sort.label ?? property }}
-              </option>
-            </select>
-          </FormWidget>
-          <FormWidget>
-            <select v-model="newSortIsAscending">
-              <option :value="true">{{ $t("ascending") }}</option>
-              <option :value="false">{{ $t("descending") }}</option>
-            </select>
-          </FormWidget>
-        </div>
-      </template>
-
-      <template #buttons>
-        <UiButton type="submit">{{ $t("add") }}</UiButton>
-        <UiButton outlined @click="close">
-          {{ $t("cancel") }}
-        </UiButton>
-      </template>
-    </ConfirmModalLayout>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import FormWidget from "@/components/FormWidget.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
 import UiActionButton from "@/components/ui/UiActionButton.vue";
-import UiButton from "@/components/ui/UiButton.vue";
 import UiFilter from "@/components/ui/UiFilter.vue";
 import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
-import useModal from "@/composables/modal.composable";
-import type { ActiveSorts, Sorts } from "@/types/sort";
+import { useModal } from "@/composables/modal.composable";
+import type { ActiveSorts, NewSort, Sorts } from "@/types/sort";
 import {
   faCaretDown,
   faCaretUp,
   faPlus,
 } from "@fortawesome/free-solid-svg-icons";
-import { ref } from "vue";
+import { computed } from "vue";
 
-defineProps<{
+const props = defineProps<{
   availableSorts: Sorts;
   activeSorts: ActiveSorts<Record<string, any>>;
 }>();
@@ -81,29 +43,19 @@ const emit = defineEmits<{
   (event: "removeSort", property: string): void;
 }>();
 
-const { isOpen, open, close } = useModal({ onClose: () => reset() });
+const openModal = () => {
+  const { onApprove } = useModal<NewSort>(
+    () => import("@/components/modals/CollectionSorterModal.vue"),
+    { availableSorts: computed(() => props.availableSorts) }
+  );
 
-const newSortProperty = ref();
-const newSortIsAscending = ref<boolean>(true);
-
-const reset = () => {
-  newSortProperty.value = undefined;
-  newSortIsAscending.value = true;
-};
-
-const handleSubmit = () => {
-  emit("addSort", newSortProperty.value, newSortIsAscending.value);
-  reset();
-  close();
+  onApprove(({ property, isAscending }) =>
+    emit("addSort", property, isAscending)
+  );
 };
 </script>
 
 <style lang="postcss" scoped>
-.form-widgets {
-  display: flex;
-  gap: 1rem;
-}
-
 .property {
   display: inline-flex;
   align-items: center;

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

@@ -2,26 +2,25 @@
   <UiCardSpinner v-if="!areSomeLoaded" />
   <UiTable v-else class="hosts-patches-table" :class="{ desktop: isDesktop }">
     <tr v-for="patch in sortedPatches" :key="patch.$id">
-      <th>{{ patch.name }}</th>
-      <td>
-        <div class="version">
-          {{ patch.version }}
-          <template v-if="hasMultipleHosts">
-            <UiSpinner v-if="!areAllLoaded" />
-            <UiCounter
-              v-else
-              v-tooltip="{
-                placement: 'left',
-                content: $t('n-hosts-awaiting-patch', {
-                  n: patch.$hostRefs.size,
-                }),
-              }"
-              :value="patch.$hostRefs.size"
-              class="counter"
-              color="error"
-            />
-          </template>
-        </div>
+      <th>
+        <span v-tooltip="{ placement: 'left', content: patch.version }">
+          {{ patch.name }}
+        </span>
+      </th>
+      <td v-if="hasMultipleHosts">
+        <UiSpinner v-if="!areAllLoaded" />
+        <UiCounter
+          v-else
+          v-tooltip="{
+            placement: 'left',
+            content: $t('n-hosts-awaiting-patch', {
+              n: patch.$hostRefs.size,
+            }),
+          }"
+          :value="patch.$hostRefs.size"
+          class="counter"
+          color="error"
+        />
       </td>
     </tr>
   </UiTable>
@@ -45,9 +44,15 @@ const props = defineProps<{
 }>();
 
 const sortedPatches = computed(() =>
-  [...props.patches].sort(
-    (patch1, patch2) => patch1.changelog.date - patch2.changelog.date
-  )
+  [...props.patches].sort((patch1, patch2) => {
+    if (patch1.changelog == null) {
+      return 1;
+    } else if (patch2.changelog == null) {
+      return -1;
+    }
+
+    return patch1.changelog.date - patch2.changelog.date;
+  })
 );
 
 const { isDesktop } = useUiStore();
@@ -58,13 +63,6 @@ const { isDesktop } = useUiStore();
   max-width: 45rem;
 }
 
-.version {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  align-items: center;
-}
-
 .counter {
   font-size: 1rem;
 }

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="error" v-if="error !== undefined">
+    <UiIcon :icon="faExclamationCircle" />
+    <span v-if="error.message === 'SESSION_AUTHENTICATION_FAILED'">
+      {{ $t("password-invalid") }}
+    </span>
+    <span v-else>
+      {{ $t("error-occurred") }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { XenApiError } from "@/libs/xen-api/xen-api.types";
+import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+
+defineProps<{
+  error: XenApiError | undefined;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+.error {
+  font-size: 1.3rem;
+  line-height: 150%;
+  margin: 0.5rem 0;
+  color: var(--color-red-vates-base);
+
+  & svg {
+    margin-right: 0.5rem;
+  }
+}
+</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/RemoteConsole.vue

@@ -105,6 +105,10 @@ watchEffect(() => {
 onBeforeUnmount(() => {
   clearVncClient();
 });
+
+defineExpose({
+  sendCtrlAltDel: () => vncClient?.sendCtrlAltDel(),
+});
 </script>
 
 <style lang="postcss" scoped>

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

@@ -0,0 +1,37 @@
+<template>
+  <svg
+    class="text-logo"
+    viewBox="300.85 622.73 318.32 63.27"
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="22"
+  >
+    <g>
+      <polygon
+        points="355.94 684.92 341.54 684.92 327.84 664.14 315.68 684.92 301.81 684.92 317.59 659.25 338.96 659.25 355.94 684.92"
+      />
+      <path
+        d="M406.2,627.17c4.62,2.64,8.27,6.33,10.94,11.07,2.67,4.74,4.01,10.1,4.01,16.07s-1.34,11.35-4.01,16.12c-2.67,4.77-6.32,8.48-10.94,11.12-4.63,2.64-9.78,3.97-15.47,3.97s-10.85-1.32-15.47-3.97c-4.63-2.64-8.27-6.35-10.95-11.12-2.67-4.77-4.01-10.14-4.01-16.12s1.34-11.33,4.01-16.07c2.67-4.74,6.32-8.43,10.95-11.07,4.62-2.64,9.78-3.97,15.47-3.97s10.84,1.32,15.47,3.97Zm-24.86,9.65c-2.7,1.61-4.81,3.92-6.33,6.94-1.52,3.02-2.28,6.54-2.28,10.56s.76,7.54,2.28,10.56c1.52,3.02,3.63,5.33,6.33,6.94,2.7,1.61,5.83,2.41,9.39,2.41s6.69-.8,9.39-2.41c2.7-1.61,4.81-3.92,6.33-6.94,1.52-3.02,2.28-6.53,2.28-10.56s-.76-7.54-2.28-10.56-3.63-5.33-6.33-6.94c-2.7-1.61-5.83-2.41-9.39-2.41s-6.69,.8-9.39,2.41Z"
+      />
+      <polygon
+        points="354.99 624.06 339.53 649.22 317.49 649.22 300.86 624.06 315.26 624.06 328.96 644.84 341.12 624.06 354.99 624.06"
+      />
+      <g>
+        <path d="M476.32,675.94h20.81v10.04h-33.47v-63.14h12.66v53.1Z" />
+        <path d="M517.84,622.84v63.14h-12.66v-63.14h12.66Z" />
+        <path
+          d="M573.29,622.84v10.22h-16.82v52.92h-12.66v-52.92h-16.83v-10.22h46.31Z"
+        />
+        <path
+          d="M595.18,633.06v15.83h21.26v10.04h-21.26v16.73h23.97v10.31h-36.64v-63.23h36.64v10.31h-23.97Z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style lang="postcss" scoped>
+.text-logo {
+  fill: var(--color-logo);
+}
+</style>

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

@@ -27,20 +27,20 @@ defineProps<{
 .title-bar {
   display: flex;
   align-items: center;
-  height: 8rem;
-  padding: 0 2rem;
+  height: 6rem;
+  padding: 0 1.5rem;
   border-bottom: 1px solid var(--color-blue-scale-400);
   background-color: var(--background-color-primary);
-  gap: 1.5rem;
+  gap: 0.8rem;
 }
 
 .icon {
-  font-size: 3.8rem;
+  font-size: 2.5rem;
   color: var(--color-extra-blue-base);
 }
 
 .title {
-  font-size: 3rem;
+  font-size: 2.5rem;
   color: var(--color-blue-scale-100);
 }
 </style>

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

@@ -1,76 +0,0 @@
-<template>
-  <UiModal v-model="isSslModalOpen" color="error">
-    <ConfirmModalLayout :icon="faServer">
-      <template #title>{{ $t("unreachable-hosts") }}</template>
-
-      <template #default>
-        <div class="description">
-          <p>{{ $t("following-hosts-unreachable") }}</p>
-          <p>{{ $t("allow-self-signed-ssl") }}</p>
-          <ul>
-            <li v-for="url in unreachableHostsUrls" :key="url">
-              <a :href="url" class="link" rel="noopener" target="_blank">{{
-                url
-              }}</a>
-            </li>
-          </ul>
-        </div>
-      </template>
-
-      <template #buttons>
-        <UiButton color="success" @click="reload">
-          {{ $t("unreachable-hosts-reload-page") }}
-        </UiButton>
-        <UiButton @click="closeSslModal">{{ $t("cancel") }}</UiButton>
-      </template>
-    </ConfirmModalLayout>
-  </UiModal>
-</template>
-
-<script lang="ts" setup>
-import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
-import UiButton from "@/components/ui/UiButton.vue";
-import useModal from "@/composables/modal.composable";
-import { useHostCollection } from "@/stores/xen-api/host.store";
-import { faServer } from "@fortawesome/free-solid-svg-icons";
-import { difference } from "lodash-es";
-import { ref, watch } from "vue";
-
-const { records: hosts } = useHostCollection();
-const unreachableHostsUrls = ref<Set<string>>(new Set());
-const reload = () => window.location.reload();
-
-const { isOpen: isSslModalOpen, close: closeSslModal } = useModal({
-  onClose: () => unreachableHostsUrls.value.clear(),
-});
-
-watch(
-  () => unreachableHostsUrls.value.size,
-  (size) => {
-    isSslModalOpen.value = size > 0;
-  },
-  { immediate: true }
-);
-
-watch(hosts, (nextHosts, previousHosts) => {
-  difference(nextHosts, previousHosts).forEach((host) => {
-    const url = new URL("http://localhost");
-    url.protocol = window.location.protocol;
-    url.hostname = host.address;
-    fetch(url, { mode: "no-cors" }).catch(() =>
-      unreachableHostsUrls.value.add(url.toString())
-    );
-  });
-});
-</script>
-
-<style lang="postcss" scoped>
-.description {
-  text-align: center;
-
-  p {
-    margin: 1rem 0;
-  }
-}
-</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="usage-bar">
     <template v-if="data !== undefined">
       <div
         v-for="item in computedData.sortedArray"
@@ -67,6 +67,12 @@ const computedData = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
+.usage-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 .progress-item:nth-child(1) {
   --progress-bar-color: var(--color-extra-blue-d60);
 }

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

@@ -1,9 +1,4 @@
 <template>
-  <UiModal v-model="isRawValueModalOpen">
-    <BasicModalLayout>
-      <CodeHighlight :code="rawValueModalPayload" />
-    </BasicModalLayout>
-  </UiModal>
   <StoryParamsTable>
     <thead>
       <tr>
@@ -101,9 +96,7 @@ import CodeHighlight from "@/components/CodeHighlight.vue";
 import StoryParamsTable from "@/components/component-story/StoryParamsTable.vue";
 import StoryWidget from "@/components/component-story/StoryWidget.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import BasicModalLayout from "@/components/ui/modals/layouts/BasicModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
-import useModal from "@/composables/modal.composable";
+import { useModal } from "@/composables/modal.composable";
 import useSortedCollection from "@/composables/sorted-collection.composable";
 import { vTooltip } from "@/directives/tooltip.directive";
 import type { PropParam } from "@/libs/story/story-param";
@@ -131,11 +124,10 @@ const emit = defineEmits<{
 
 const model = useVModel(props, "modelValue", emit);
 
-const {
-  open: openRawValueModal,
-  isOpen: isRawValueModalOpen,
-  payload: rawValueModalPayload,
-} = useModal<string>();
+const openRawValueModal = (code: string) =>
+  useModal(() => import("@/components/modals/CodeHighlightModal.vue"), {
+    code,
+  });
 </script>
 
 <style lang="postcss" scoped>

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

@@ -0,0 +1,80 @@
+<template>
+  <FormInputGroup>
+    <FormNumber v-model="sizeInput" :max-decimals="3" />
+    <FormSelect v-model="prefixInput">
+      <option
+        v-for="currentPrefix in availablePrefixes"
+        :key="currentPrefix"
+        :value="currentPrefix"
+      >
+        {{ currentPrefix }}B
+      </option>
+    </FormSelect>
+  </FormInputGroup>
+</template>
+
+<script lang="ts" setup>
+import FormInputGroup from "@/components/form/FormInputGroup.vue";
+import FormNumber from "@/components/form/FormNumber.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+import { useVModel } from "@vueuse/core";
+import humanFormat, { type Prefix } from "human-format";
+import { ref, watch } from "vue";
+
+const props = defineProps<{
+  modelValue: number | undefined;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): number;
+}>();
+
+const availablePrefixes: Prefix<"binary">[] = ["Ki", "Mi", "Gi"];
+
+const model = useVModel(props, "modelValue", emit, {
+  shouldEmit: (value) => value !== props.modelValue,
+});
+
+const sizeInput = ref();
+const prefixInput = ref();
+
+const scale = humanFormat.Scale.create(availablePrefixes, 1024, 1);
+
+watch([sizeInput, prefixInput], ([newSize, newPrefix]) => {
+  if (newSize === "" || newSize === undefined) {
+    return;
+  }
+
+  model.value = humanFormat.parse(`${newSize || 0} ${newPrefix || "Ki"}`, {
+    scale,
+  });
+});
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === undefined) {
+      sizeInput.value = undefined;
+
+      if (prefixInput.value === undefined) {
+        prefixInput.value = availablePrefixes[0];
+      }
+
+      return;
+    }
+
+    const { value, prefix } = humanFormat.raw(newValue, {
+      scale,
+      prefix: prefixInput.value,
+    });
+    console.log(value);
+
+    sizeInput.value = value;
+
+    if (value !== 0) {
+      prefixInput.value = prefix;
+    }
+  },
+  { immediate: true }
+);
+</script>

@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/form/FormInput.vue

@@ -273,6 +273,7 @@ defineExpose({
 .textarea {
   height: auto;
   min-height: 2em;
+  overflow: hidden;
 }
 
 .input {

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

@@ -1,46 +1,18 @@
 <template>
-  <UiModal
-    v-model="isCodeModalOpen"
-    :color="isJsonValid ? 'success' : 'error'"
-    closable
-  >
-    <FormModalLayout @submit.prevent="saveJson" :icon="faCode">
-      <template #default>
-        <FormTextarea class="modal-textarea" v-model="editedJson" />
-      </template>
-
-      <template #buttons>
-        <UiButton transparent @click="formatJson">
-          {{ $t("reformat") }}
-        </UiButton>
-        <UiButton outlined @click="closeCodeModal">
-          {{ $t("cancel") }}
-        </UiButton>
-        <UiButton :disabled="!isJsonValid" type="submit">
-          {{ $t("save") }}
-        </UiButton>
-      </template>
-    </FormModalLayout>
-  </UiModal>
-
   <FormInput
-    @click="openCodeModal"
-    :model-value="jsonValue"
     :before="faCode"
+    :model-value="jsonValue"
     readonly
+    @click="openModal()"
   />
 </template>
 
 <script lang="ts" setup>
 import FormInput from "@/components/form/FormInput.vue";
-import FormTextarea from "@/components/form/FormTextarea.vue";
-import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
-import UiButton from "@/components/ui/UiButton.vue";
-import useModal from "@/composables/modal.composable";
+import { useModal } from "@/composables/modal.composable";
 import { faCode } from "@fortawesome/free-solid-svg-icons";
-import { useVModel, whenever } from "@vueuse/core";
-import { computed, ref } from "vue";
+import { useVModel } from "@vueuse/core";
+import { computed } from "vue";
 
 const props = defineProps<{
   modelValue: any;
@@ -52,51 +24,14 @@ const emit = defineEmits<{
 
 const model = useVModel(props, "modelValue", emit);
 
-const {
-  open: openCodeModal,
-  close: closeCodeModal,
-  isOpen: isCodeModalOpen,
-} = useModal();
-
 const jsonValue = computed(() => JSON.stringify(model.value, undefined, 2));
 
-const isJsonValid = computed(() => {
-  try {
-    JSON.parse(editedJson.value);
-    return true;
-  } catch {
-    return false;
-  }
-});
+const openModal = () => {
+  const { onApprove } = useModal<string>(
+    () => import("@/components/modals/JsonEditorModal.vue"),
+    { initialValue: jsonValue.value }
+  );
 
-const formatJson = () => {
-  if (!isJsonValid.value) {
-    return;
-  }
-
-  editedJson.value = JSON.stringify(JSON.parse(editedJson.value), undefined, 2);
+  onApprove((newValue) => (model.value = JSON.parse(newValue)));
 };
-
-const saveJson = () => {
-  if (!isJsonValid.value) {
-    return;
-  }
-
-  formatJson();
-
-  model.value = JSON.parse(editedJson.value);
-
-  closeCodeModal();
-};
-
-whenever(isCodeModalOpen, () => (editedJson.value = jsonValue.value));
-
-const editedJson = ref();
 </script>
-
-<style lang="postcss" scoped>
-:deep(.modal-textarea) {
-  min-width: 50rem;
-  min-height: 20rem;
-}
-</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <FormInput v-model="localValue" inputmode="decimal" />
+</template>
+
+<script lang="ts" setup>
+import FormInput from "@/components/form/FormInput.vue";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  modelValue: number | undefined;
+  maxDecimals?: number;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number | undefined): void;
+}>();
+
+const localValue = ref("");
+
+const hasTrailingDot = ref(false);
+
+const cleaningRegex = computed(() => {
+  if (props.maxDecimals === undefined) {
+    // Any number with optional decimal part
+    return /(\d*\.?\d*)/;
+  }
+
+  if (props.maxDecimals > 0) {
+    // Numbers with up to `props.maxDecimals` decimal places
+    return new RegExp(`(\\d*\\.?\\d{0,${props.maxDecimals}})`);
+  }
+
+  // Integer numbers only
+  return /(\d*)/;
+});
+
+watch(
+  localValue,
+  (newLocalValue) => {
+    const cleanValue =
+      localValue.value
+        .replace(",", ".")
+        .replace(/[^0-9.]/g, "")
+        .match(cleaningRegex.value)?.[0] ?? "";
+
+    hasTrailingDot.value = cleanValue.endsWith(".");
+
+    if (cleanValue !== newLocalValue) {
+      localValue.value = cleanValue;
+      return;
+    }
+
+    if (newLocalValue === "") {
+      emit("update:modelValue", undefined);
+      return;
+    }
+
+    const parsedValue = parseFloat(cleanValue);
+
+    emit(
+      "update:modelValue",
+      Number.isNaN(parsedValue) ? undefined : parsedValue
+    );
+  },
+  { flush: "post" }
+);
+
+watch(
+  () => props.modelValue,
+  (newModelValue) => {
+    localValue.value = `${newModelValue?.toString() ?? ""}${
+      hasTrailingDot.value ? "." : ""
+    }`;
+  },
+  { immediate: true }
+);
+</script>

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

@@ -63,12 +63,12 @@ const [isExpanded, toggle] = useToggle(true);
 <style lang="postcss" scoped>
 .infra-host-item:deep(.link),
 .infra-host-item:deep(.link-placeholder) {
-  padding-left: 3rem;
+  padding-left: 2rem;
 }
 
 .infra-vm-list:deep(.link),
 .infra-vm-list:deep(.link-placeholder) {
-  padding-left: 4.5rem;
+  padding-left: 3rem;
 }
 
 .master-icon {

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

@@ -72,7 +72,7 @@ const hasTooltip = computed(() => hasEllipsis(textElement.value));
   align-items: center;
   flex: 1;
   min-width: 0;
-  padding: 1.5rem;
+  padding: 1rem;
   text-decoration: none;
   color: inherit;
   gap: 1rem;

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

@@ -42,7 +42,7 @@ const { isReady, hasError, pool } = usePoolCollection();
 
 .infra-vm-list:deep(.link),
 .infra-vm-list:deep(.link-placeholder) {
-  padding-left: 3rem;
+  padding-left: 2rem;
 }
 
 .text-error {

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

@@ -43,10 +43,6 @@ const { stop } = useIntersectionObserver(rootElement, ([entry]) => {
 </script>
 
 <style lang="postcss" scoped>
-.infra-vm-item {
-  height: 6rem;
-}
-
 .infra-action {
   color: var(--color-extra-blue-d60);
 

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

@@ -25,10 +25,11 @@ defineProps<{
   align-items: center;
   height: 4.4rem;
   padding-right: 1.5rem;
-  padding-left: 1rem;
+  padding-left: 1.5rem;
   white-space: nowrap;
   border-radius: 0.8rem;
   gap: 1rem;
+  background-color: var(--color-blue-scale-500);
 
   &.disabled {
     color: var(--color-blue-scale-400);

@xen-orchestra/lite/src/components/modals/CodeHighlightModal.vue

@@ -0,0 +1,17 @@
+<template>
+  <UiModal>
+    <BasicModalLayout>
+      <CodeHighlight :code="code" />
+    </BasicModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import CodeHighlight from "@/components/CodeHighlight.vue";
+import BasicModalLayout from "@/components/ui/modals/layouts/BasicModalLayout.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+
+defineProps<{
+  code: any;
+}>();
+</script>

@xen-orchestra/lite/src/components/modals/CollectionFilterModal.vue

@@ -0,0 +1,154 @@
+<template>
+  <UiModal @submit.prevent="modal.approve(generatedFilter)">
+    <ConfirmModalLayout>
+      <template #default>
+        <div class="rows">
+          <CollectionFilterRow
+            v-for="(newFilter, index) in newFilters"
+            :key="newFilter.id"
+            v-model="newFilters[index]"
+            :available-filters="availableFilters"
+            @remove="removeNewFilter($event)"
+          />
+        </div>
+
+        <div
+          v-if="newFilters.some((filter) => filter.isAdvanced)"
+          class="available-properties"
+        >
+          {{ $t("available-properties-for-advanced-filter") }}
+          <div class="properties">
+            <UiBadge
+              v-for="(filter, property) in availableFilters"
+              :key="property"
+              :icon="getFilterIcon(filter)"
+            >
+              {{ property }}
+            </UiBadge>
+          </div>
+        </div>
+      </template>
+
+      <template #buttons>
+        <UiButton transparent @click="addNewFilter()">
+          {{ $t("add-or") }}
+        </UiButton>
+        <ModalDeclineButton />
+        <ModalApproveButton :disabled="!isFilterValid">
+          {{ $t(editedFilter ? "update" : "add") }}
+        </ModalApproveButton>
+      </template>
+    </ConfirmModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import CollectionFilterRow from "@/components/CollectionFilterRow.vue";
+import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import UiBadge from "@/components/ui/UiBadge.vue";
+import UiButton from "@/components/ui/UiButton.vue";
+import { getFilterIcon } from "@/libs/utils";
+import type { Filters, NewFilter } from "@/types/filter";
+import { IK_MODAL } from "@/types/injection-keys";
+import { Or, parse } from "complex-matcher";
+import { computed, inject, onMounted, ref } from "vue";
+
+const props = defineProps<{
+  availableFilters: Filters;
+  editedFilter?: string;
+}>();
+
+const modal = inject(IK_MODAL)!;
+const newFilters = ref<NewFilter[]>([]);
+let newFilterId = 0;
+
+const addNewFilter = () =>
+  newFilters.value.push({
+    id: newFilterId++,
+    content: "",
+    isAdvanced: false,
+    builder: { property: "", comparison: "", value: "", negate: false },
+  });
+
+const removeNewFilter = (id: number) => {
+  const index = newFilters.value.findIndex((newFilter) => newFilter.id === id);
+  if (index >= 0) {
+    newFilters.value.splice(index, 1);
+  }
+};
+
+const generatedFilter = computed(() => {
+  const filters = newFilters.value.filter(
+    (newFilter) => newFilter.content !== ""
+  );
+
+  if (filters.length === 0) {
+    return "";
+  }
+
+  if (filters.length === 1) {
+    return filters[0].content;
+  }
+
+  return `|(${filters.map((filter) => filter.content).join(" ")})`;
+});
+
+const isFilterValid = computed(() => generatedFilter.value !== "");
+
+onMounted(() => {
+  if (props.editedFilter === undefined) {
+    addNewFilter();
+    return;
+  }
+
+  const parsedFilter = parse(props.editedFilter);
+
+  const nodes =
+    parsedFilter instanceof Or ? parsedFilter.children : [parsedFilter];
+
+  newFilters.value = nodes.map((node) => ({
+    id: newFilterId++,
+    content: node.toString(),
+    isAdvanced: true,
+    builder: { property: "", comparison: "", value: "", negate: false },
+  }));
+});
+</script>
+
+<style lang="postcss" scoped>
+.properties {
+  font-size: 1.6rem;
+  margin-top: 1rem;
+
+  ul {
+    margin-left: 1rem;
+  }
+
+  li {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.available-properties {
+  margin-top: 1rem;
+}
+
+.properties {
+  display: flex;
+  margin-top: 0.6rem;
+  gap: 0.5rem;
+}
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

@xen-orchestra/lite/src/components/modals/CollectionSorterModal.vue

@@ -0,0 +1,67 @@
+<template>
+  <UiModal @submit.prevent="handleSubmit">
+    <ConfirmModalLayout>
+      <template #default>
+        <div class="form-widgets">
+          <FormWidget :label="$t('sort-by')">
+            <select v-model="newSortProperty">
+              <option v-if="!newSortProperty"></option>
+              <option
+                v-for="(sort, property) in availableSorts"
+                :key="property"
+                :value="property"
+              >
+                {{ sort.label ?? property }}
+              </option>
+            </select>
+          </FormWidget>
+          <FormWidget>
+            <select v-model="newSortIsAscending">
+              <option :value="true">{{ $t("ascending") }}</option>
+              <option :value="false">{{ $t("descending") }}</option>
+            </select>
+          </FormWidget>
+        </div>
+      </template>
+
+      <template #buttons>
+        <ModalDeclineButton />
+        <ModalApproveButton>{{ $t("add") }}</ModalApproveButton>
+      </template>
+    </ConfirmModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import FormWidget from "@/components/FormWidget.vue";
+import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import type { NewSort, Sorts } from "@/types/sort";
+import { inject, ref } from "vue";
+
+defineProps<{
+  availableSorts: Sorts;
+}>();
+
+const newSortProperty = ref();
+const newSortIsAscending = ref<boolean>(true);
+
+const modal = inject(IK_MODAL)!;
+
+const handleSubmit = () => {
+  modal.approve<NewSort>({
+    property: newSortProperty.value,
+    isAscending: newSortIsAscending.value,
+  });
+};
+</script>
+
+<style lang="postcss" scoped>
+.form-widgets {
+  display: flex;
+  gap: 1rem;
+}
+</style>

@xen-orchestra/lite/src/components/modals/JsonEditorModal.vue

@@ -0,0 +1,75 @@
+<template>
+  <UiModal
+    :color="isJsonValid ? 'success' : 'error'"
+    @submit.prevent="handleSubmit()"
+  >
+    <FormModalLayout :icon="faCode" class="layout">
+      <template #default>
+        <FormTextarea v-model="editedJson" class="modal-textarea" />
+      </template>
+
+      <template #buttons>
+        <UiButton transparent @click="formatJson()">
+          {{ $t("reformat") }}
+        </UiButton>
+        <ModalDeclineButton />
+        <ModalApproveButton :disabled="!isJsonValid">
+          {{ $t("save") }}
+        </ModalApproveButton>
+      </template>
+    </FormModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import FormTextarea from "@/components/form/FormTextarea.vue";
+import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import UiButton from "@/components/ui/UiButton.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { computed, inject, ref } from "vue";
+
+const props = defineProps<{
+  initialValue?: string;
+}>();
+
+const editedJson = ref<string>(props.initialValue ?? "");
+const modal = inject(IK_MODAL)!;
+
+const isJsonValid = computed(() => {
+  try {
+    JSON.parse(editedJson.value);
+    return true;
+  } catch {
+    return false;
+  }
+});
+
+const formatJson = () => {
+  if (!isJsonValid.value) {
+    return;
+  }
+
+  editedJson.value = JSON.stringify(JSON.parse(editedJson.value), undefined, 2);
+};
+
+const handleSubmit = () => {
+  if (!isJsonValid.value) {
+    return;
+  }
+
+  formatJson();
+
+  modal.approve(editedJson.value);
+};
+</script>
+
+<style lang="postcss" scoped>
+.layout:deep(.modal-textarea) {
+  min-width: 50rem;
+  min-height: 20rem;
+}
+</style>

@xen-orchestra/lite/src/components/modals/UnreachableHostsModal.vue

@@ -0,0 +1,54 @@
+<template>
+  <UiModal color="error" @submit="modal.approve()">
+    <ConfirmModalLayout :icon="faServer">
+      <template #title>{{ $t("unreachable-hosts") }}</template>
+
+      <template #default>
+        <div class="description">
+          <p>{{ $t("following-hosts-unreachable") }}</p>
+          <p>{{ $t("allow-self-signed-ssl") }}</p>
+          <ul>
+            <li v-for="url in urls" :key="url">
+              <a :href="url" class="link" rel="noopener" target="_blank">
+                {{ url }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </template>
+
+      <template #buttons>
+        <ModalDeclineButton />
+        <ModalApproveButton>
+          {{ $t("unreachable-hosts-reload-page") }}
+        </ModalApproveButton>
+      </template>
+    </ConfirmModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+import { inject } from "vue";
+
+defineProps<{
+  urls: string[];
+}>();
+
+const modal = inject(IK_MODAL)!;
+</script>
+
+<style lang="postcss" scoped>
+.description {
+  text-align: center;
+
+  p {
+    margin: 1rem 0;
+  }
+}
+</style>

@xen-orchestra/lite/src/components/modals/VmDeleteModal.vue

@@ -0,0 +1,53 @@
+<template>
+  <UiModal @submit.prevent="handleSubmit()">
+    <ConfirmModalLayout :icon="faSatellite">
+      <template #title>
+        <i18n-t keypath="confirm-delete" scope="global" tag="div">
+          <span :class="textClass">
+            {{ $t("n-vms", { n: vmRefs.length }) }}
+          </span>
+        </i18n-t>
+      </template>
+
+      <template #subtitle>
+        {{ $t("please-confirm") }}
+      </template>
+
+      <template #buttons>
+        <ModalDeclineButton>
+          {{ $t("go-back") }}
+        </ModalDeclineButton>
+        <ModalApproveButton>
+          {{ $t("delete-vms", { n: vmRefs.length }) }}
+        </ModalApproveButton>
+      </template>
+    </ConfirmModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import { useContext } from "@/composables/context.composable";
+import { ColorContext } from "@/context";
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+import { useXenApiStore } from "@/stores/xen-api.store";
+import { IK_MODAL } from "@/types/injection-keys";
+import { faSatellite } from "@fortawesome/free-solid-svg-icons";
+import { inject } from "vue";
+
+const props = defineProps<{
+  vmRefs: XenApiVm["$ref"][];
+}>();
+
+const modal = inject(IK_MODAL)!;
+
+const { textClass } = useContext(ColorContext);
+
+const handleSubmit = () => {
+  const xenApi = useXenApiStore().getXapi();
+  modal.approve(xenApi.vm.delete(props.vmRefs));
+};
+</script>

@xen-orchestra/lite/src/components/modals/VmExportBlockedUrlsModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <UiModal>
+    <FormModalLayout :icon="faDisplay">
+      <template #title>
+        {{ $t("export-n-vms-manually", { n: labelWithUrl.length }) }}
+      </template>
+
+      <p>
+        {{ $t("export-vms-manually-information") }}
+      </p>
+      <ul class="list">
+        <li v-for="({ url, label }, index) in labelWithUrl" :key="index">
+          <a :href="url.href" target="_blank">
+            {{ label }}
+          </a>
+        </li>
+      </ul>
+
+      <template #buttons>
+        <ModalDeclineButton />
+      </template>
+    </FormModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { faDisplay } from "@fortawesome/free-solid-svg-icons";
+import { computed } from "vue";
+
+const props = defineProps<{
+  blockedUrls: URL[];
+}>();
+
+const { getByOpaqueRef } = useVmCollection();
+
+const labelWithUrl = computed(() =>
+  props.blockedUrls.map((url) => {
+    const ref = url.searchParams.get("ref") as XenApiVm["$ref"];
+    return {
+      url: url,
+      label: getByOpaqueRef(ref)?.name_label ?? ref,
+    };
+  })
+);
+</script>
+
+<style lang="postcss" scoped>
+.list {
+  margin-top: 2rem;
+}
+</style>

@xen-orchestra/lite/src/components/modals/VmExportModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <UiModal @submit.prevent="handleSubmit">
+    <FormModalLayout :icon="faDisplay">
+      <template #title>
+        {{ $t("export-n-vms", { n: vmRefs.length }) }}
+      </template>
+
+      <FormInputWrapper
+        light
+        learn-more-url="https://xcp-ng.org/blog/2018/12/19/zstd-compression-for-xcp-ng/"
+        :label="$t('select-compression')"
+      >
+        <FormSelect v-model="compressionType">
+          <option
+            v-for="key in Object.keys(VM_COMPRESSION_TYPE)"
+            :key="key"
+            :value="
+              VM_COMPRESSION_TYPE[key as keyof typeof VM_COMPRESSION_TYPE]
+            "
+          >
+            {{ $t(key.toLowerCase()) }}
+          </option>
+        </FormSelect>
+      </FormInputWrapper>
+
+      <template #buttons>
+        <ModalDeclineButton />
+        <ModalApproveButton>
+          {{ $t("export-n-vms", { n: vmRefs.length }) }}
+        </ModalApproveButton>
+      </template>
+    </FormModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import { faDisplay } from "@fortawesome/free-solid-svg-icons";
+import { inject, ref } from "vue";
+
+import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { useXenApiStore } from "@/stores/xen-api.store";
+import { VM_COMPRESSION_TYPE } from "@/libs/xen-api/xen-api.enums";
+
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+
+const props = defineProps<{
+  vmRefs: XenApiVm["$ref"][];
+}>();
+
+const modal = inject(IK_MODAL)!;
+
+const compressionType = ref(VM_COMPRESSION_TYPE.DISABLED);
+
+const handleSubmit = () => {
+  const xenApi = useXenApiStore().getXapi();
+  xenApi.vm.export(props.vmRefs, compressionType.value);
+  modal.approve();
+};
+</script>

@xen-orchestra/lite/src/components/modals/VmMigrateModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <UiModal @submit.prevent="handleSubmit()">
+    <FormModalLayout>
+      <template #title>
+        {{ $t("migrate-n-vms", { n: vmRefs.length }) }}
+      </template>
+
+      <div>
+        <FormInputWrapper :label="$t('select-destination-host')" light>
+          <FormSelect v-model="selectedHost">
+            <option :value="undefined">
+              {{ $t("select-destination-host") }}
+            </option>
+            <option
+              v-for="host in availableHosts"
+              :key="host.$ref"
+              :value="host"
+            >
+              {{ host.name_label }}
+            </option>
+          </FormSelect>
+        </FormInputWrapper>
+      </div>
+
+      <template #buttons>
+        <ModalDeclineButton />
+        <ModalApproveButton>
+          {{ $t("migrate-n-vms", { n: vmRefs.length }) }}
+        </ModalApproveButton>
+      </template>
+    </FormModalLayout>
+  </UiModal>
+</template>
+
+<script lang="ts" setup>
+import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
+import FormSelect from "@/components/form/FormSelect.vue";
+import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
+import ModalApproveButton from "@/components/ui/modals/ModalApproveButton.vue";
+import ModalDeclineButton from "@/components/ui/modals/ModalDeclineButton.vue";
+import UiModal from "@/components/ui/modals/UiModal.vue";
+import { useVmMigration } from "@/composables/vm-migration.composable";
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+import { IK_MODAL } from "@/types/injection-keys";
+import { inject } from "vue";
+
+const props = defineProps<{
+  vmRefs: XenApiVm["$ref"][];
+}>();
+
+const modal = inject(IK_MODAL)!;
+
+const { selectedHost, availableHosts, isValid, migrate } = useVmMigration(
+  () => props.vmRefs
+);
+
+const handleSubmit = () => {
+  if (!isValid.value) {
+    return;
+  }
+
+  modal.approve(migrate());
+};
+</script>

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

@@ -82,7 +82,7 @@ const {
   }
 }
 .table-container {
-  max-height: 24rem;
+  max-height: 25rem;
   overflow: auto;
 }
 </style>

@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" />
@@ -12,7 +18,7 @@
       <UiProgressBar :max-value="maxValue" :value="value" color="custom" />
       <UiProgressScale :max-value="maxValue" :steps="1" unit="%" />
       <UiProgressLegend :label="$t('vcpus')" :value="`${value}%`" />
-      <UiCardFooter>
+      <UiCardFooter class="ui-card-footer">
         <template #left>
           <p>{{ $t("vcpus-used") }}</p>
           <p class="footer-value">{{ nVCpuInUse }}</p>
@@ -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";
 
@@ -113,4 +120,8 @@ const hasError = computed(
     color: var(--footer-value-color);
   }
 }
+
+.ui-card-footer {
+  margin-top: 2rem;
+}
 </style>

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

@@ -2,7 +2,7 @@
   <UiCard>
     <UiCardTitle class="patches-title">
       {{ $t("patches") }}
-      <template v-if="areAllLoaded" #right>
+      <template v-if="areAllLoaded && count > 0" #right>
         {{ $t("n-missing", { n: count }) }}
       </template>
     </UiCardTitle>
@@ -35,7 +35,7 @@ const { count, patches, areSomeLoaded, areAllLoaded } = useHostPatches(hosts);
 }
 
 .table-container {
-  max-height: 40rem;
+  max-height: 25rem;
   overflow: auto;
 }
 </style>

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

@@ -43,6 +43,7 @@ const isDisplayed = computed(
   font-weight: 700;
   font-size: 14px;
   color: var(--color-blue-scale-300);
+  margin-top: 2rem;
 }
 
 .summary-card {

@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/ui/UiTab.vue

@@ -26,11 +26,11 @@ const isTabBarDisabled = useContext(DisabledContext, () => props.disabled);
 
 <style lang="postcss" scoped>
 .ui-tab {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   font-weight: 600;
   display: flex;
   align-items: center;
-  padding: 0 1.2em;
+  padding: 0 1.5rem;
   text-decoration: none;
   text-transform: uppercase;
   color: var(--color-blue-scale-100);

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

@@ -22,7 +22,7 @@ useContext(DisabledContext, () => props.disabled);
 .ui-tab-bar {
   display: flex;
   align-items: stretch;
-  height: 6.5rem;
+  height: 5rem;
   border-bottom: 1px solid var(--color-blue-scale-400);
   background-color: var(--background-color-primary);
   max-width: 100%;

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

@@ -20,7 +20,7 @@ defineProps<{
   border-spacing: 0;
   background-color: var(--background-color-primary);
   font-weight: 400;
-  font-size: 1.6rem;
+  font-size: 1.4rem;
   line-height: 2.4rem;
   color: var(--color-blue-scale-200);
 

@xen-orchestra/lite/src/components/ui/modals/ModalApproveButton.vue

@@ -0,0 +1,13 @@
+<template>
+  <UiButton :busy="modal.isBusy" type="submit">
+    <slot />
+  </UiButton>
+</template>
+
+<script lang="ts" setup>
+import UiButton from "@/components/ui/UiButton.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { inject } from "vue";
+
+const modal = inject(IK_MODAL)!;
+</script>

@xen-orchestra/lite/src/components/ui/modals/ModalCloseIcon.vue

@@ -3,7 +3,7 @@
     :class="textClass"
     :icon="faXmark"
     class="modal-close-icon"
-    @click="close"
+    @click="modal?.decline()"
   />
 </template>
 
@@ -11,13 +11,13 @@
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useContext } from "@/composables/context.composable";
 import { ColorContext } from "@/context";
-import { IK_MODAL_CLOSE } from "@/types/injection-keys";
+import { IK_MODAL } from "@/types/injection-keys";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { inject } from "vue";
 
 const { textClass } = useContext(ColorContext);
 
-const close = inject(IK_MODAL_CLOSE, undefined);
+const modal = inject(IK_MODAL, undefined);
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/ui/modals/ModalContainer.vue

@@ -1,9 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    :class="[backgroundClass, { nested: isNested }]"
-    class="modal-container"
-  >
+  <div :class="[backgroundClass, { nested: isNested }]" class="modal-container">
     <header v-if="$slots.header" class="modal-header">
       <slot name="header" />
     </header>
@@ -13,7 +9,7 @@
     <footer v-if="$slots.footer" class="modal-footer">
       <slot name="footer" />
     </footer>
-  </component>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -23,13 +19,9 @@ import type { Color } from "@/types";
 import { IK_MODAL_NESTED } from "@/types/injection-keys";
 import { inject, provide } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    tag?: string;
-    color?: Color;
-  }>(),
-  { tag: "div" }
-);
+const props = defineProps<{
+  color?: Color;
+}>();
 
 defineSlots<{
   header: () => any;

@xen-orchestra/lite/src/components/ui/modals/ModalDeclineButton.vue

@@ -0,0 +1,13 @@
+<template>
+  <UiButton outlined :busy="modal.isBusy" @click="modal.decline()">
+    <slot>{{ $t("cancel") }}</slot>
+  </UiButton>
+</template>
+
+<script lang="ts" setup>
+import UiButton from "@/components/ui/UiButton.vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { inject } from "vue";
+
+const modal = inject(IK_MODAL)!;
+</script>

@xen-orchestra/lite/src/components/ui/modals/ModalList.vue

@@ -0,0 +1,14 @@
+<template>
+  <ModalListItem
+    v-for="modal in modalStore.modals"
+    :key="modal.id"
+    :modal="modal"
+  />
+</template>
+
+<script lang="ts" setup>
+import ModalListItem from "@/components/ui/modals/ModalListItem.vue";
+import { useModalStore } from "@/stores/modal.store";
+
+const modalStore = useModalStore();
+</script>

@xen-orchestra/lite/src/components/ui/modals/ModalListItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="modal.component" v-bind="modal.props" />
+</template>
+
+<script lang="ts" setup>
+import type { ModalController } from "@/types";
+import { IK_MODAL } from "@/types/injection-keys";
+import { provide } from "vue";
+
+const props = defineProps<{
+  modal: ModalController;
+}>();
+
+provide(IK_MODAL, props.modal);
+</script>

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

@@ -1,39 +1,36 @@
 <template>
   <Teleport to="body">
-    <div v-if="isOpen" class="ui-modal" @click.self="close">
+    <form class="ui-modal" v-bind="$attrs" @click.self="modal.decline()">
       <slot />
-    </div>
+    </form>
   </Teleport>
 </template>
 
 <script lang="ts" setup>
 import { useContext } from "@/composables/context.composable";
-import { ColorContext } from "@/context";
+import { ColorContext, DisabledContext } from "@/context";
 import type { Color } from "@/types";
-import { IK_MODAL_CLOSE } from "@/types/injection-keys";
-import { useMagicKeys, useVModel, whenever } from "@vueuse/core/index";
-import { provide } from "vue";
+import { IK_MODAL } from "@/types/injection-keys";
+import { useMagicKeys, whenever } from "@vueuse/core";
+import { inject } from "vue";
 
 const props = defineProps<{
-  modelValue: boolean;
   color?: Color;
+  disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  (event: "update:modelValue", value: boolean): void;
-}>();
+defineOptions({
+  inheritAttrs: false,
+});
 
-const isOpen = useVModel(props, "modelValue", emit);
-
-const close = () => (isOpen.value = false);
-
-provide(IK_MODAL_CLOSE, close);
+const modal = inject(IK_MODAL)!;
 
 useContext(ColorContext, () => props.color);
+useContext(DisabledContext, () => props.disabled || modal.isBusy);
 
 const { escape } = useMagicKeys();
 
-whenever(escape, () => close());
+whenever(escape, () => modal.decline());
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/ui/modals/layouts/ConfirmModalLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <ModalContainer tag="form">
+  <ModalContainer>
     <template #header>
       <div class="close-bar">
         <ModalCloseIcon />

@xen-orchestra/lite/src/components/ui/modals/layouts/FormModalLayout.vue

@@ -26,16 +26,12 @@ import ModalCloseIcon from "@/components/ui/modals/ModalCloseIcon.vue";
 import ModalContainer from "@/components/ui/modals/ModalContainer.vue";
 import UiButtonGroup from "@/components/ui/UiButtonGroup.vue";
 import { useContext } from "@/composables/context.composable";
-import { ColorContext, DisabledContext } from "@/context";
+import { ColorContext } from "@/context";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
-const props = withDefaults(
-  defineProps<{
-    icon?: IconDefinition;
-    disabled?: boolean;
-  }>(),
-  { disabled: undefined }
-);
+defineProps<{
+  icon?: IconDefinition;
+}>();
 
 defineSlots<{
   title: () => void;
@@ -44,8 +40,6 @@ defineSlots<{
 }>();
 
 const { textClass, borderClass } = useContext(ColorContext);
-
-useContext(DisabledContext, () => props.disabled);
 </script>
 
 <style lang="postcss" scoped>

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

@@ -51,7 +51,6 @@ const isTooltipEnabled = computed(() =>
   align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;
-  margin: 1.6em 0;
 }
 
 .label-container {

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

@@ -1,6 +1,9 @@
 <template>
   <MenuItem
-    v-tooltip="!areAllSelectedVmsHalted && $t('selected-vms-in-execution')"
+    v-tooltip="
+      !areAllSelectedVmsHalted &&
+      $t(isSingleAction ? 'vm-is-running' : 'selected-vms-in-execution')
+    "
     :busy="areSomeSelectedVmsCloning"
     :disabled="isDisabled"
     :icon="faCopy"
@@ -22,6 +25,7 @@ import { computed } from "vue";
 
 const props = defineProps<{
   selectedRefs: XenApiVm["$ref"][];
+  isSingleAction?: boolean;
 }>();
 
 const { getByOpaqueRef, isOperationPending } = useVmCollection();

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

@@ -7,59 +7,23 @@
   >
     {{ $t("delete") }}
   </MenuItem>
-  <UiModal v-model="isDeleteModalOpen">
-    <ConfirmModalLayout :icon="faSatellite">
-      <template #title>
-        <i18n-t keypath="confirm-delete" scope="global" tag="div">
-          <span :class="textClass">
-            {{ $t("n-vms", { n: vmRefs.length }) }}
-          </span>
-        </i18n-t>
-      </template>
-
-      <template #subtitle>
-        {{ $t("please-confirm") }}
-      </template>
-
-      <template #buttons>
-        <UiButton outlined @click="closeDeleteModal">
-          {{ $t("go-back") }}
-        </UiButton>
-        <UiButton @click="deleteVms">
-          {{ $t("delete-vms", { n: vmRefs.length }) }}
-        </UiButton>
-      </template>
-    </ConfirmModalLayout>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
 import MenuItem from "@/components/menu/MenuItem.vue";
-import ConfirmModalLayout from "@/components/ui/modals/layouts/ConfirmModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
-import UiButton from "@/components/ui/UiButton.vue";
-import { useContext } from "@/composables/context.composable";
-import useModal from "@/composables/modal.composable";
-import { ColorContext } from "@/context";
+import { useModal } from "@/composables/modal.composable";
 import { vTooltip } from "@/directives/tooltip.directive";
-import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 import { VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
-import { useXenApiStore } from "@/stores/xen-api.store";
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 import { useVmCollection } from "@/stores/xen-api/vm.store";
-import { faSatellite, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { computed } from "vue";
 
 const props = defineProps<{
   vmRefs: XenApiVm["$ref"][];
 }>();
 
-const xenApi = useXenApiStore().getXapi();
 const { getByOpaqueRef: getVm } = useVmCollection();
-const {
-  open: openDeleteModal,
-  close: closeDeleteModal,
-  isOpen: isDeleteModalOpen,
-} = useModal();
 
 const vms = computed<XenApiVm[]>(() =>
   props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined)
@@ -73,10 +37,8 @@ const isDisabled = computed(
   () => vms.value.length === 0 || areSomeVmsInExecution.value
 );
 
-const deleteVms = async () => {
-  await xenApi.vm.delete(props.vmRefs);
-  closeDeleteModal();
-};
-
-const { textClass } = useContext(ColorContext);
+const openDeleteModal = () =>
+  useModal(() => import("@/components/modals/VmDeleteModal.vue"), {
+    vmRefs: props.vmRefs,
+  });
 </script>

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

@@ -1,51 +1,53 @@
 <template>
-  <MenuItem :icon="faFileExport">
-    {{ $t("export") }}
-    <template #submenu>
-      <MenuItem
-        v-tooltip="{ content: $t('coming-soon'), placement: 'left' }"
-        :icon="faDisplay"
-      >
-        {{ $t("export-vms") }}
-      </MenuItem>
-      <MenuItem
-        :icon="faCode"
-        @click="
-          exportVmsAsJsonFile(vms, `vms_${new Date().toISOString()}.json`)
-        "
-      >
-        {{ $t("export-table-to", { type: ".json" }) }}
-      </MenuItem>
-      <MenuItem
-        :icon="faFileCsv"
-        @click="exportVmsAsCsvFile(vms, `vms_${new Date().toISOString()}.csv`)"
-      >
-        {{ $t("export-table-to", { type: ".csv" }) }}
-      </MenuItem>
-    </template>
+  <MenuItem
+    v-tooltip="
+      vmRefs.length > 0 &&
+      !isSomeExportable &&
+      $t(isSingleAction ? 'vm-is-running' : 'no-selected-vm-can-be-exported')
+    "
+    :icon="faDisplay"
+    :disabled="isDisabled"
+    @click="openModal"
+  >
+    {{ $t(isSingleAction ? "export-vm" : "export-vms") }}
   </MenuItem>
 </template>
-
 <script lang="ts" setup>
-import { useVmCollection } from "@/stores/xen-api/vm.store";
 import { computed } from "vue";
-import { exportVmsAsCsvFile, exportVmsAsJsonFile } from "@/libs/vm";
+import { faDisplay } from "@fortawesome/free-solid-svg-icons";
+
 import MenuItem from "@/components/menu/MenuItem.vue";
-import {
-  faCode,
-  faDisplay,
-  faFileCsv,
-  faFileExport,
-} from "@fortawesome/free-solid-svg-icons";
+import { DisabledContext } from "@/context";
+import { useContext } from "@/composables/context.composable";
+import { useModal } from "@/composables/modal.composable";
+import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { VM_OPERATION } from "@/libs/xen-api/xen-api.enums";
 import { vTooltip } from "@/directives/tooltip.directive";
+
 import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 
 const props = defineProps<{
   vmRefs: XenApiVm["$ref"][];
+  isSingleAction?: boolean;
 }>();
 
-const { getByOpaqueRef: getVm } = useVmCollection();
-const vms = computed(() =>
-  props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined)
+const { getByOpaqueRefs, areSomeOperationAllowed } = useVmCollection();
+
+const isParentDisabled = useContext(DisabledContext);
+
+const isSomeExportable = computed(() =>
+  getByOpaqueRefs(props.vmRefs).some((vm) =>
+    areSomeOperationAllowed(vm, VM_OPERATION.EXPORT)
+  )
 );
+
+const isDisabled = computed(
+  () => isParentDisabled.value || !isSomeExportable.value
+);
+
+const openModal = () => {
+  useModal(() => import("@/components/modals/VmExportModal.vue"), {
+    vmRefs: props.vmRefs,
+  });
+};
 </script>

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

@@ -0,0 +1,45 @@
+<template>
+  <MenuItem :icon="faFileExport">
+    {{ $t("export") }}
+    <template #submenu>
+      <VmActionExportItem :vmRefs="vmRefs" />
+      <MenuItem
+        :icon="faCode"
+        @click="
+          exportVmsAsJsonFile(vms, `vms_${new Date().toISOString()}.json`)
+        "
+      >
+        {{ $t("export-table-to", { type: ".json" }) }}
+      </MenuItem>
+      <MenuItem
+        :icon="faFileCsv"
+        @click="exportVmsAsCsvFile(vms, `vms_${new Date().toISOString()}.csv`)"
+      >
+        {{ $t("export-table-to", { type: ".csv" }) }}
+      </MenuItem>
+    </template>
+  </MenuItem>
+</template>
+
+<script lang="ts" setup>
+import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { computed } from "vue";
+import { exportVmsAsCsvFile, exportVmsAsJsonFile } from "@/libs/vm";
+import MenuItem from "@/components/menu/MenuItem.vue";
+import VmActionExportItem from "@/components/vm/VmActionItems/VmActionExportItem.vue";
+import {
+  faCode,
+  faFileCsv,
+  faFileExport,
+} from "@fortawesome/free-solid-svg-icons";
+import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+
+const props = defineProps<{
+  vmRefs: XenApiVm["$ref"][];
+}>();
+
+const { getByOpaqueRef: getVm } = useVmCollection();
+const vms = computed(() =>
+  props.vmRefs.map(getVm).filter((vm): vm is XenApiVm => vm !== undefined)
+);
+</script>

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

@@ -1,95 +1,65 @@
 <template>
   <MenuItem
     v-tooltip="
-      !areAllVmsMigratable && $t('some-selected-vms-can-not-be-migrated')
+      selectedRefs.length > 0 &&
+      !isMigratable &&
+      $t(
+        isSingleAction
+          ? 'this-vm-cant-be-migrated'
+          : 'no-selected-vm-can-be-migrated'
+      )
     "
     :busy="isMigrating"
-    :disabled="isParentDisabled || !areAllVmsMigratable"
+    :disabled="isParentDisabled || !isMigratable"
     :icon="faRoute"
-    @click="openModal"
+    @click="openModal()"
   >
     {{ $t("migrate") }}
   </MenuItem>
-
-  <UiModal v-model="isModalOpen">
-    <FormModalLayout :disabled="isMigrating" @submit.prevent="handleMigrate">
-      <template #title>
-        {{ $t("migrate-n-vms", { n: selectedRefs.length }) }}
-      </template>
-
-      <div>
-        <FormInputWrapper :label="$t('select-destination-host')" light>
-          <FormSelect v-model="selectedHost">
-            <option :value="undefined">
-              {{ $t("select-destination-host") }}
-            </option>
-            <option
-              v-for="host in availableHosts"
-              :key="host.$ref"
-              :value="host"
-            >
-              {{ host.name_label }}
-            </option>
-          </FormSelect>
-        </FormInputWrapper>
-      </div>
-
-      <template #buttons>
-        <UiButton outlined @click="closeModal">
-          {{ isMigrating ? $t("close") : $t("cancel") }}
-        </UiButton>
-        <UiButton :busy="isMigrating" :disabled="!isValid" type="submit">
-          {{ $t("migrate-n-vms", { n: selectedRefs.length }) }}
-        </UiButton>
-      </template>
-    </FormModalLayout>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
-import FormSelect from "@/components/form/FormSelect.vue";
 import MenuItem from "@/components/menu/MenuItem.vue";
-import FormModalLayout from "@/components/ui/modals/layouts/FormModalLayout.vue";
-import UiModal from "@/components/ui/modals/UiModal.vue";
-import UiButton from "@/components/ui/UiButton.vue";
 import { useContext } from "@/composables/context.composable";
-import useModal from "@/composables/modal.composable";
-import { useVmMigration } from "@/composables/vm-migration.composable";
+import { useModal } from "@/composables/modal.composable";
 import { DisabledContext } from "@/context";
 import { vTooltip } from "@/directives/tooltip.directive";
+import { VM_OPERATION } from "@/libs/xen-api/xen-api.enums";
 import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
+import { useVmCollection } from "@/stores/xen-api/vm.store";
 import { faRoute } from "@fortawesome/free-solid-svg-icons";
+import { computed } from "vue";
 
 const props = defineProps<{
   selectedRefs: XenApiVm["$ref"][];
+  isSingleAction?: boolean;
 }>();
 
+const { getByOpaqueRefs, isOperationPending, areSomeOperationAllowed } =
+  useVmCollection();
+
 const isParentDisabled = useContext(DisabledContext);
 
-const {
-  open: openModal,
-  isOpen: isModalOpen,
-  close: closeModal,
-} = useModal({
-  onClose: () => (selectedHost.value = undefined),
-});
+const isMigratable = computed(() =>
+  getByOpaqueRefs(props.selectedRefs).some((vm) =>
+    areSomeOperationAllowed(vm, [
+      VM_OPERATION.POOL_MIGRATE,
+      VM_OPERATION.MIGRATE_SEND,
+    ])
+  )
+);
 
-const {
-  selectedHost,
-  availableHosts,
-  isValid,
-  migrate,
-  isMigrating,
-  areAllVmsMigratable,
-} = useVmMigration(() => props.selectedRefs);
+const isMigrating = computed(() =>
+  getByOpaqueRefs(props.selectedRefs).some((vm) =>
+    isOperationPending(vm, [
+      VM_OPERATION.POOL_MIGRATE,
+      VM_OPERATION.MIGRATE_SEND,
+    ])
+  )
+);
 
-const handleMigrate = async () => {
-  try {
-    await migrate();
-    closeModal();
-  } catch (e) {
-    console.error("Error while migrating", e);
-  }
-};
+const openModal = () =>
+  useModal(() => import("@/components/modals/VmMigrateModal.vue"), {
+    vmRefs: props.selectedRefs,
+  });
 </script>

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

@@ -11,6 +11,25 @@
         </template>
         <VmActionPowerStateItems :vm-refs="[vm.$ref]" />
       </AppMenu>
+      <AppMenu v-if="vm !== undefined" placement="bottom-end" shadow>
+        <template #trigger="{ open, isOpen }">
+          <UiButton
+            :active="isOpen"
+            :icon="faEllipsisVertical"
+            @click="open"
+            transparent
+            class="more-actions-button"
+            v-tooltip="{
+              placement: 'left',
+              content: $t('more-actions'),
+            }"
+          />
+        </template>
+        <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>
 </template>
@@ -20,12 +39,18 @@ 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";
+import VmActionExportItem from "@/components/vm/VmActionItems/VmActionExportItem.vue";
 import { useVmCollection } from "@/stores/xen-api/vm.store";
+import { vTooltip } from "@/directives/tooltip.directive";
 import type { XenApiVm } from "@/libs/xen-api/xen-api.types";
 import {
   faAngleDown,
   faDisplay,
+  faEllipsisVertical,
   faPowerOff,
 } from "@fortawesome/free-solid-svg-icons";
 import { computed } from "vue";
@@ -40,3 +65,9 @@ const vm = computed(() =>
 
 const name = computed(() => vm.value?.name_label);
 </script>
+
+<style lang="postcss">
+.more-actions-button {
+  font-size: 1.2em;
+}
+</style>