feat(plugins): auto all plugins in source use

This implements the initial PWA manifest for XO Lite. I requested this several
months to a year ago, so decided to do it myself in the end.

.eslintrc.js

@@ -15,9 +15,10 @@ module.exports = {
 
   overrides: [
     {
-      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js'],
+      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js', '**/scripts/**.{,c,m}js'],
       rules: {
         'n/no-process-exit': 'off',
+        'n/shebang': 'off',
         'no-console': 'off',
       },
     },
@@ -46,6 +47,38 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['@xen-orchestra/lite/**/*.{vue,ts}'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      plugins: ['import'],
+      extends: [
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:vue/vue3-recommended',
+        '@vue/eslint-config-typescript/recommended',
+        '@vue/eslint-config-prettier',
+      ],
+      settings: {
+        'import/resolver': {
+          typescript: true,
+          'eslint-import-resolver-custom-alias': {
+            alias: {
+              '@': './src',
+            },
+            extensions: ['.ts'],
+            packages: ['@xen-orchestra/lite'],
+          },
+        },
+      },
+      rules: {
+        'no-void': 'off',
+        'n/no-missing-import': 'off', // using 'import' plugin instead to support TS aliases
+        '@typescript-eslint/no-explicit-any': 'off',
+        'vue/require-default-prop': 'off', // https://github.com/vuejs/eslint-plugin-vue/issues/2051
+      },
+    },
   ],
 
   parserOptions: {
@@ -68,6 +101,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',
   },
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,48 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: 'status: triaging :triangular_flag_on_post:, type: bug :bug:'
-assignees: ''
----
-
-1. ⚠️ **If you don't follow this template, the issue will be closed**.
-2. ⚠️ **If your issue can't be easily reproduced, please report it [on the forum first](https://xcp-ng.org/forum/category/12/xen-orchestra)**.
-
-Are you using XOA or XO from the sources?
-
-If XOA:
-
-- which release channel? (`stable` vs `latest`)
-- please consider creating a support ticket in [your dedicated support area](https://xen-orchestra.com/#!/member/support)
-
-If XO from the sources:
-
-- Provide **your commit number**. If it's older than a week, we won't investigate
-- Don't forget to [read this first](https://xen-orchestra.com/docs/community.html)
-- As well as follow [this guide](https://xen-orchestra.com/docs/community.html#report-a-bug)
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Environment (please provide the following information):**
-
-- Node: [e.g. 16.12.1]
-- hypervisor: [e.g. XCP-ng 8.2.0]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,119 @@
+name: Bug Report
+description: Create a report to help us improve
+labels: ['type: bug :bug:', 'status: triaging :triangular_flag_on_post:']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        1. ⚠️ **If you don't follow this template, the issue will be closed**.
+        2. ⚠️ **If your issue can't be easily reproduced, please report it [on the forum first](https://xcp-ng.org/forum/category/12/xen-orchestra)**.
+  - type: markdown
+    attributes:
+      value: '## Are you using XOA or XO from the sources?'
+  - type: dropdown
+    id: xo-origin
+    attributes:
+      label: Are you using XOA or XO from the sources?
+      options:
+        - XOA
+        - XO from the sources
+        - both
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: '### If XOA:'
+  - type: dropdown
+    id: xoa-channel
+    attributes:
+      label: Which release channel?
+      description: please consider creating a support ticket in [your dedicated support area](https://xen-orchestra.com/#!/member/support)
+      options:
+        - stable
+        - latest
+        - both
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: '### If XO from the sources:'
+  - type: markdown
+    attributes:
+      value: |
+        - Don't forget to [read this first](https://xen-orchestra.com/docs/community.html)
+        - As well as follow [this guide](https://xen-orchestra.com/docs/community.html#report-a-bug)
+  - type: input
+    id: xo-sources-commit-number
+    attributes:
+      label: Provide your commit number
+      description: If it's older than a week, we won't investigate
+      placeholder: e.g. 579f0
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: '## Bug description:'
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is
+    validations:
+      required: true
+  - type: textarea
+    id: error-message
+    attributes:
+      label: Error message
+      render: Markdown
+    validations:
+      required: false
+  - type: textarea
+    id: steps
+    attributes:
+      label: To reproduce
+      description: 'Steps to reproduce the behavior:'
+      value: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: false
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen
+    validations:
+      required: false
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: '## Environment (please provide the following information):'
+  - type: input
+    id: node-version
+    attributes:
+      label: Node
+      placeholder: e.g. 16.12.1
+    validations:
+      required: true
+  - type: input
+    id: hypervisor-version
+    attributes:
+      label: Hypervisor
+      placeholder: e.g. XCP-ng 8.2.0
+    validations:
+      required: true
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here
+    validations:
+      required: false

.gitignore

@@ -30,6 +30,7 @@ pnpm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 .env
+*.tsbuildinfo
 
 # code coverage
 .nyc_output/

@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.9.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,10 +1,9 @@
 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'
-
 import {
   INIT_PASSWD,
   NBD_CMD_READ,
@@ -21,7 +20,6 @@ import {
   OPTS_MAGIC,
   NBD_CMD_DISC,
 } from './constants.mjs'
-
 const { warn } = createLogger('vates:nbd-client')
 
 // documentation is here : https://github.com/NetworkBlockDevice/nbd/blob/master/doc/proto.md
@@ -40,6 +38,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 +51,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 +69,7 @@ export default class NbdClient {
     this.#readBlockRetries = readBlockRetries
     this.#reconnectRetry = reconnectRetry
     this.#connectTimeout = connectTimeout
+    this.#messageTimeout = messageTimeout
   }
 
   get exportSize() {
@@ -115,13 +122,27 @@ export default class NbdClient {
     if (!this.#connected) {
       return
     }
+    this.#connected = false
+    const socket = this.#serverSocket
+
+    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 => {
+      socket.end(buffer, 'utf8', cb)
+    })
+    try {
+      await pTimeout.call(promise, this.#messageTimeout)
+    } catch (error) {
+      socket.destroy()
+    }
     this.#serverSocket = undefined
     this.#connected = false
   }
@@ -195,11 +216,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 +255,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}`)
@@ -265,7 +289,7 @@ export default class NbdClient {
     }
   }
 
-  async readBlock(index, size = NBD_DEFAULT_BLOCK_SIZE) {
+  async #readBlock(index, size) {
     // we don't want to add anything in backlog while reconnecting
     if (this.#reconnectingPromise) {
       await this.#reconnectingPromise
@@ -281,7 +305,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,45 +337,13 @@ export default class NbdClient {
     })
   }
 
-  async *readBlocks(indexGenerator) {
-    // default : read all blocks
-    if (indexGenerator === undefined) {
-      const exportSize = this.#exportSize
-      const chunkSize = 2 * 1024 * 1024
-      indexGenerator = function* () {
-        const nbBlocks = Math.ceil(Number(exportSize / BigInt(chunkSize)))
-        for (let index = 0; BigInt(index) < nbBlocks; index++) {
-          yield { index, size: chunkSize }
-        }
-      }
-    }
-    const readAhead = []
-    const readAheadMaxLength = this.#readAhead
-    const makeReadBlockPromise = (index, size) => {
-      const promise = pRetry(() => this.readBlock(index, size), {
-        tries: this.#readBlockRetries,
-        onRetry: async err => {
-          warn('will retry reading block ', index, err)
-          await this.reconnect()
-        },
-      })
-      // error is handled during unshift
-      promise.catch(() => {})
-      return promise
-    }
-
-    // read all blocks, but try to keep readAheadMaxLength promise waiting ahead
-    for (const { index, size } of indexGenerator()) {
-      // stack readAheadMaxLength promises before starting to handle the results
-      if (readAhead.length === readAheadMaxLength) {
-        // any error will stop reading blocks
-        yield readAhead.shift()
-      }
-
-      readAhead.push(makeReadBlockPromise(index, size))
-    }
-    while (readAhead.length > 0) {
-      yield readAhead.shift()
-    }
+  async readBlock(index, size = NBD_DEFAULT_BLOCK_SIZE) {
+    return pRetry(() => this.#readBlock(index, size), {
+      tries: this.#readBlockRetries,
+      onRetry: async err => {
+        warn('will retry reading block ', index, err)
+        await this.reconnect()
+      },
+    })
   }
 }

@vates/nbd-client/multi.mjs

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

@vates/nbd-client/package.json

@@ -13,7 +13,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "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/nbd-client/tests/nbdclient.integ.mjs

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

@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/.USAGE.md

@@ -123,7 +123,7 @@ const onProgress = makeOnProgress({
   onTaskUpdate(taskLog) {},
 })
 
-Task.run({ data: { name: 'my task' }, onProgress }, asyncFn)
+Task.run({ properties: { name: 'my task' }, onProgress }, asyncFn)
 ```
 
 It can also be fed event logs directly:

@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
@@ -139,7 +139,7 @@ const onProgress = makeOnProgress({
   onTaskUpdate(taskLog) {},
 })
 
-Task.run({ data: { name: 'my task' }, onProgress }, asyncFn)
+Task.run({ properties: { name: 'my task' }, onProgress }, asyncFn)
 ```
 
 It can also be fed event logs directly:

@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.3",
+    "@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/RestoreMetadataBackup.mjs

@@ -21,7 +21,7 @@ export class RestoreMetadataBackup {
       })
     } else {
       const metadata = JSON.parse(await handler.readFile(join(backupId, 'metadata.json')))
-      const dataFileName = resolve(backupId, metadata.data ?? 'data.json')
+      const dataFileName = resolve('/', backupId, metadata.data ?? 'data.json').slice(1)
       const data = await handler.readFile(dataFileName)
 
       // if data is JSON, sent it as a plain string, otherwise, consider the data as binary and encode it

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

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

@xen-orchestra/backups/_cleanVm.mjs

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

@xen-orchestra/backups/_incrementalVm.mjs

@@ -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,
@@ -41,6 +34,7 @@ export async function exportIncrementalVm(
     fullVdisRequired = new Set(),
 
     disableBaseTags = false,
+    nbdConcurrency = 1,
     preferNbd,
   } = {}
 ) {
@@ -89,6 +83,7 @@ export async function exportIncrementalVm(
       baseRef: baseVdi?.$ref,
       cancelToken,
       format: 'vhd',
+      nbdConcurrency,
       preferNbd,
     })
   })
@@ -147,7 +142,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 +152,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 +163,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 +181,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 +201,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 +213,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 +252,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/IncrementalRemote.mjs

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

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

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

@xen-orchestra/backups/_runners/_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'
@@ -132,7 +133,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
     }
   }
 
-  async _transfer($defer, { differentialVhds, timestamp, deltaExport, vm, vmSnapshot }) {
+  async _transfer($defer, { isVhdDifferencing, timestamp, deltaExport, vm, vmSnapshot }) {
     const adapter = this._adapter
     const job = this._job
     const scheduleId = this._scheduleId
@@ -160,6 +161,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
     )
 
     metadataContent = {
+      isVhdDifferencing,
       jobId,
       mode: job.mode,
       scheduleId,
@@ -179,9 +181,9 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
         async ([id, vdi]) => {
           const path = `${this._vmBackupDir}/${vhds[id]}`
 
-          const isDelta = differentialVhds[`${id}.vhd`]
+          const isDifferencing = isVhdDifferencing[`${id}.vhd`]
           let parentPath
-          if (isDelta) {
+          if (isDifferencing) {
             const vdiDir = dirname(path)
             parentPath = (
               await handler.list(vdiDir, {
@@ -195,7 +197,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
@@ -204,15 +206,19 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
             await checkVhd(handler, parentPath)
           }
 
-          transferSize += await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
+          // don't write it as transferSize += await async function
+          // since i += await asyncFun lead to race condition
+          // as explained : https://eslint.org/docs/latest/rules/require-atomic-updates
+          const transferSizeOneDisk = await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
             // no checksum for VHDs, because they will be invalidated by
             // merges and chainings
             checksum: false,
             validator: tmpPath => checkVhd(handler, tmpPath),
             writeBlockConcurrency: this._config.writeBlockConcurrency,
           })
+          transferSize += transferSizeOneDisk
 
-          if (isDelta) {
+          if (isDifferencing) {
             await chainVhd(handler, parentPath, handler, path)
           }
 

@xen-orchestra/backups/_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_tags('xo:no-bak=Health Check')
             await new HealthCheckVmBackup({
               restoredVm: healthCheckVm,
               xapi,

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

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

@xen-orchestra/backups/formatVmBackups.mjs

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

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.43.0",
+  "version": "0.44.3",
   "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": "^3.0.0",
     "@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.9.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.1.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/.eslintrc.cjs

@@ -1,29 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
-module.exports = {
-  globals: {
-    XO_LITE_GIT_HEAD: true,
-    XO_LITE_VERSION: true,
-  },
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/eslint-config-typescript/recommended",
-    "@vue/eslint-config-prettier",
-  ],
-  plugins: ["@limegrass/import-alias"],
-  ignorePatterns: ["scripts/*.mjs"],
-  rules: {
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@limegrass/import-alias/import-alias": [
-      "error",
-      { aliasConfigPath: require("path").join(__dirname, "tsconfig.json") },
-    ],
-  },
-};

@xen-orchestra/lite/.prettierrc.cjs

@@ -1,4 +0,0 @@
-// Keeping this file to prevent applying the global monorepo config for now
-module.exports = {
-  trailingComma: "es5",
-};

@xen-orchestra/lite/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 ## **next**
 
+- Fix Typescript typings errors when running `yarn type-check` command (PR [#7278](https://github.com/vatesfr/xen-orchestra/pull/7278))
+- Introduce PWA Json Manifest (PR [#7291](https://github.com/vatesfr/xen-orchestra/pull/7291))
+
+## **0.1.7** (2023-12-28)
+
+- [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))
+- XOA quick deploy (PR [#7245](https://github.com/vatesfr/xen-orchestra/pull/7245))
+- Fix infinite loader when no stats on pool dashboard (PR [#7236](https://github.com/vatesfr/xen-orchestra/pull/7236))
+- [Tree view] Display VMs count (PR [#7185](https://github.com/vatesfr/xen-orchestra/pull/7185))
+
+## **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/README.md

@@ -48,18 +48,16 @@ Note: When reading Vue official doc, don't forget to set "API Preference" toggle
 
 ```vue
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
-  greetings: string;
-}>();
+  greetings: string
+}>()
 
-const firstName = ref("");
-const lastName = ref("");
+const firstName = ref('')
+const lastName = ref('')
 
-const fullName = computed(
-  () => `${props.greetings} ${firstName.value} ${lastName.value}`
-);
+const fullName = computed(() => `${props.greetings} ${firstName.value} ${lastName.value}`)
 </script>
 ```
 
@@ -73,9 +71,9 @@ Vue variables can be interpolated with `v-bind`.
 
 ```vue
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 
-const fontSize = ref("2rem");
+const fontSize = ref('2rem')
 </script>
 
 <style scoped>
@@ -105,8 +103,8 @@ Use the `busy` prop to display a loader icon.
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import { faDisplay } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 </script>
 ```
 
@@ -140,21 +138,21 @@ For a `foobar` store, create a `store/foobar.store.ts` then use `defineStore('fo
 #### Example
 
 ```typescript
-import { computed, ref } from "vue";
+import { computed, ref } from 'vue'
 
-export const useFoobarStore = defineStore("foobar", () => {
-  const aStateVar = ref(0);
-  const otherStateVar = ref(0);
-  const aGetter = computed(() => aStateVar.value * 2);
-  const anAction = () => (otherStateVar.value += 10);
+export const useFoobarStore = defineStore('foobar', () => {
+  const aStateVar = ref(0)
+  const otherStateVar = ref(0)
+  const aGetter = computed(() => aStateVar.value * 2)
+  const anAction = () => (otherStateVar.value += 10)
 
   return {
     aStateVar,
     otherStateVar,
     aGetter,
     anAction,
-  };
-});
+  }
+})
 ```
 
 ### I18n

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

@@ -85,9 +85,9 @@ In your `.story.vue` file, import and use the `ComponentStory` component.
 </template>
 
 <script lang="ts" setup>
-import MyComponent from "@/components/MyComponent.vue";
-import ComponentStory from "@/components/component-story/ComponentStory.vue";
-import { prop, event, model, slot, setting } from "@/libs/story/story-param";
+import MyComponent from '@/components/MyComponent.vue'
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, event, model, slot, setting } from '@/libs/story/story-param'
 </script>
 ```
 
@@ -119,27 +119,27 @@ Let's take this Vue component:
 <script lang="ts" setup>
 withDefaults(
   defineProps<{
-    imString: string;
-    imNumber: number;
-    imOptional?: string;
-    imOptionalWithDefault?: string;
-    modelValue?: string;
-    customModel?: number;
+    imString: string
+    imNumber: number
+    imOptional?: string
+    imOptionalWithDefault?: string
+    modelValue?: string
+    customModel?: number
   }>(),
-  { imOptionalWithDefault: "Hi World" }
-);
+  { imOptionalWithDefault: 'Hi World' }
+)
 
 const emit = defineEmits<{
-  (event: "click"): void;
-  (event: "clickWithArg", id: string): void;
-  (event: "update:modelValue", value: string): void;
-  (event: "update:customModel", value: number): void;
-}>();
+  (event: 'click'): void
+  (event: 'clickWithArg', id: string): void
+  (event: 'update:modelValue', value: string): void
+  (event: 'update:customModel', value: number): void
+}>()
 
-const moonDistance = 384400;
+const moonDistance = 384400
 
-const handleClick = () => emit("click");
-const handleClickWithArg = (id: string) => emit("clickWithArg", id);
+const handleClick = () => emit('click')
+const handleClickWithArg = (id: string) => emit('clickWithArg', id)
 </script>
 ```
 
@@ -150,53 +150,33 @@ Here is how to document it with a Component Story:
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      prop('imString')
-        .str()
-        .required()
-        .preset('Example')
-        .widget()
-        .help('This is a required string prop'),
-      prop('imNumber')
-        .num()
-        .required()
-        .preset(42)
-        .widget()
-        .help('This is a required number prop'),
+      prop('imString').str().required().preset('Example').widget().help('This is a required string prop'),
+      prop('imNumber').num().required().preset(42).widget().help('This is a required number prop'),
       prop('imOptional').str().widget().help('This is an optional string prop'),
-      prop('imOptionalWithDefault')
-        .str()
-        .default('Hi World')
-        .widget()
-        .default('My default value'),
-      model().prop((p) => p.str()),
-      model('customModel').prop((p) => p.num()),
+      prop('imOptionalWithDefault').str().default('Hi World').widget().default('My default value'),
+      model().prop(p => p.str()),
+      model('customModel').prop(p => p.num()),
       event('click').help('Emitted when the user clicks the first button'),
-      event('clickWithArg')
-        .args({ id: 'string' })
-        .help('Emitted when the user clicks the second button'),
+      event('clickWithArg').args({ id: 'string' }).help('Emitted when the user clicks the second button'),
       slot().help('This is the default slot'),
       slot('namedSlot').help('This is a named slot'),
-      slot('namedScopedSlot')
-        .prop('moon-distance', 'number')
-        .help('This is a named slot'),
+      slot('namedScopedSlot').prop('moon-distance', 'number').help('This is a named slot'),
       setting('contentExample').widget(text()).preset('Some content'),
     ]"
   >
     <MyComponent v-bind="properties">
       {{ settings.contentExample }}
       <template #named-slot>Named slot content</template>
-      <template #named-scoped-slot="{ moonDistance }">
-        Moon distance is {{ moonDistance }} meters.
-      </template>
+      <template #named-scoped-slot="{ moonDistance }"> Moon distance is {{ moonDistance }} meters. </template>
     </MyComponent>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
-import ComponentStory from "@/components/component-story/ComponentStory.vue";
-import MyComponent from "@/components/MyComponent.vue";
-import { event, model, prop, setting, slot } from "@/libs/story/story-param";
-import { text } from "@/libs/story/story-widget";
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import MyComponent from '@/components/MyComponent.vue'
+import { event, model, prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
 </script>
 ```
 

@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/docs/xen-api-collections.md

@@ -36,7 +36,7 @@ They are stored in `src/composables/xen-api-collection/*-collection.composable.t
 ```typescript
 // src/composables/xen-api-collection/console-collection.composable.ts
 
-export const useConsoleCollection = () => useXenApiCollection("console");
+export const useConsoleCollection = () => useXenApiCollection('console')
 ```
 
 If you want to allow the user to defer the subscription, you can propagate the options to `useXenApiCollection`.
@@ -44,19 +44,16 @@ If you want to allow the user to defer the subscription, you can propagate the o
 ```typescript
 // console-collection.composable.ts
 
-export const useConsoleCollection = <
-  Immediate extends boolean = true,
->(options?: {
-  immediate?: Immediate;
-}) => useXenApiCollection("console", options);
+export const useConsoleCollection = <Immediate extends boolean = true>(options?: { immediate?: Immediate }) =>
+  useXenApiCollection('console', options)
 ```
 
 ```typescript
 // MyComponent.vue
 
-const collection = useConsoleCollection({ immediate: false });
+const collection = useConsoleCollection({ immediate: false })
 
-setTimeout(() => collection.start(), 10000);
+setTimeout(() => collection.start(), 10000)
 ```
 
 ## Alter the collection
@@ -68,10 +65,10 @@ You can alter the collection by overriding parts of it.
 ```typescript
 // xen-api.ts
 
-export interface XenApiConsole extends XenApiRecord<"console"> {
+export interface XenApiConsole extends XenApiRecord<'console'> {
   // ... existing props
-  someProp: string;
-  someOtherProp: number;
+  someProp: string
+  someOtherProp: number
 }
 ```
 
@@ -79,27 +76,27 @@ export interface XenApiConsole extends XenApiRecord<"console"> {
 // console-collection.composable.ts
 
 export const useConsoleCollection = () => {
-  const collection = useXenApiCollection("console");
+  const collection = useXenApiCollection('console')
 
   const records = computed(() => {
-    return collection.records.value.map((console) => ({
+    return collection.records.value.map(console => ({
       ...console,
-      someProp: "Some value",
+      someProp: 'Some value',
       someOtherProp: 42,
-    }));
-  });
+    }))
+  })
 
   return {
     ...collection,
     records,
-  };
-};
+  }
+}
 ```
 
 ```typescript
-const consoleCollection = useConsoleCollection();
+const consoleCollection = useConsoleCollection()
 
-consoleCollection.getByUuid("...").someProp; // "Some value"
+consoleCollection.getByUuid('...').someProp // "Some value"
 ```
 
 ### Example 2: Adding props to the collection
@@ -108,17 +105,13 @@ consoleCollection.getByUuid("...").someProp; // "Some value"
 // vm-collection.composable.ts
 
 export const useVmCollection = () => {
-  const collection = useXenApiCollection("VM");
+  const collection = useXenApiCollection('VM')
 
   return {
     ...collection,
-    runningVms: computed(() =>
-      collection.records.value.filter(
-        (vm) => vm.power_state === POWER_STATE.RUNNING
-      )
-    ),
-  };
-};
+    runningVms: computed(() => collection.records.value.filter(vm => vm.power_state === POWER_STATE.RUNNING)),
+  }
+}
 ```
 
 ### Example 3, filtering and sorting the collection
@@ -127,18 +120,15 @@ export const useVmCollection = () => {
 // vm-collection.composable.ts
 
 export const useVmCollection = () => {
-  const collection = useXenApiCollection("VM");
+  const collection = useXenApiCollection('VM')
 
   return {
     ...collection,
     records: computed(() =>
       collection.records.value
-        .filter(
-          (vm) =>
-            !vm.is_a_snapshot && !vm.is_a_template && !vm.is_control_domain
-        )
+        .filter(vm => !vm.is_a_snapshot && !vm.is_a_template && !vm.is_control_domain)
         .sort((vm1, vm2) => vm1.name_label.localeCompare(vm2.name_label))
     ),
-  };
-};
+  }
+}
 ```

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

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

@xen-orchestra/lite/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="manifest" href="/manifest.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>XO Lite</title>
   </head>

@xen-orchestra/lite/package.json

@@ -1,67 +1,65 @@
 {
   "name": "@xen-orchestra/lite",
-  "version": "0.1.4",
+  "version": "0.1.7",
+  "type": "module",
   "scripts": {
     "dev": "GIT_HEAD=$(git rev-parse HEAD) vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview --port 4173",
-    "release": "zx ./scripts/release.mjs",
+    "release": "./scripts/release.mjs",
     "build-only": "yarn release --build",
     "deploy": "yarn release --build --deploy",
     "gh-release": "yarn release --build --tarball --gh-release",
     "test": "yarn run type-check",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --build --force tsconfig.type-check.json"
   },
-  "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.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@novnc/novnc": "^1.4.0",
+    "@tsconfig/node18": "^18.2.2",
+    "strip-json-comments": "^5.0.1",
+    "@types/d3-time-format": "^4.0.3",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.5",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/math": "^10.7.1",
+    "@vueuse/shared": "^10.7.1",
     "complex-matcher": "^0.7.1",
     "d3-time-format": "^4.1.0",
     "decorator-synchronized": "^0.6.0",
-    "echarts": "^5.3.3",
+    "echarts": "^5.4.3",
     "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",
+    "minimist": "^1.2.8",
     "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.33",
+    "postcss-custom-media": "^10.0.2",
+    "postcss-nested": "^6.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vue": "^3.4.7",
+    "vue-echarts": "^6.6.8",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.22",
     "zx": "^7.2.3"
   },
   "private": true,
@@ -78,6 +76,6 @@
   },
   "license": "AGPL-3.0-or-later",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=18"
   }
 }

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

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-nested": {},
-    "postcss-custom-media": {},
-  },
-};

@xen-orchestra/lite/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    'postcss-nested': {},
+    'postcss-custom-media': {},
+  },
+}

@xen-orchestra/lite/public/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+  "name": "XO Lite",
+  "short_name": "XOLite",
+  "start_url": "/",
+  "display": "standalone",
+  "description": "Integrated local and lightweight solution to manage a local XCP-ng pool.",
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ]
+}

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

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

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

@@ -1,5 +1,4 @@
 <template>
-  <UnreachableHostsModal />
   <div v-if="!$route.meta.hasStoryNav && !xenApiStore.isConnected">
     <AppLogin />
   </div>
@@ -13,82 +12,78 @@
     </div>
     <AppTooltips />
   </div>
+  <ModalList />
 </template>
 
 <script lang="ts" setup>
-import favicon from "@/assets/favicon.svg";
-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 { useChartTheme } from "@/composables/chart-theme.composable";
-import { useUiStore } from "@/stores/ui.store";
-import { usePoolCollection } from "@/stores/xen-api/pool.store";
-import { useXenApiStore } from "@/stores/xen-api.store";
-import { useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
-import { logicAnd } from "@vueuse/math";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
+import favicon from '@/assets/favicon.svg'
+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 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'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-let link = document.querySelector(
-  "link[rel~='icon']"
-) as HTMLLinkElement | null;
+let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement | null
 if (link == null) {
-  link = document.createElement("link");
-  link.rel = "icon";
-  document.getElementsByTagName("head")[0].appendChild(link);
+  link = document.createElement('link')
+  link.rel = 'icon'
+  document.getElementsByTagName('head')[0].appendChild(link)
 }
-link.href = favicon;
+link.href = favicon
 
-const xenApiStore = useXenApiStore();
+const xenApiStore = useXenApiStore()
 
-const { pool } = usePoolCollection();
+const { pool } = usePoolCollection()
 
-useChartTheme();
-const uiStore = useUiStore();
+useChartTheme()
+const uiStore = useUiStore()
 
 if (import.meta.env.DEV) {
-  const { locale } = useI18n();
-  const activeElement = useActiveElement();
-  const { D, L } = useMagicKeys();
+  const { locale } = useI18n()
+  const activeElement = useActiveElement()
+  const { D, L } = useMagicKeys()
 
   const canToggle = computed(() => {
     if (activeElement.value == null) {
-      return true;
+      return true
     }
 
-    return !["INPUT", "TEXTAREA"].includes(activeElement.value.tagName);
-  });
+    return !['INPUT', 'TEXTAREA'].includes(activeElement.value.tagName)
+  })
 
-  whenever(
-    logicAnd(D, canToggle),
-    () => (uiStore.colorMode = uiStore.colorMode === "dark" ? "light" : "dark")
-  );
+  whenever(logicAnd(D, canToggle), () => (uiStore.colorMode = uiStore.colorMode === 'dark' ? 'light' : 'dark'))
 
-  whenever(
-    logicAnd(L, canToggle),
-    () => (locale.value = locale.value === "en" ? "fr" : "en")
-  );
+  whenever(logicAnd(L, canToggle), () => (locale.value = locale.value === 'en' ? 'fr' : 'en'))
 }
 
 whenever(
   () => pool.value?.$ref,
-  (poolRef) => {
-    xenApiStore.getXapi().startWatching(poolRef);
+  poolRef => {
+    xenApiStore.getXapi().startWatching(poolRef)
   }
-);
+)
+
+useUnreachableHosts()
 </script>
 
 <style lang="postcss">
-@import "@/assets/base.css";
+@import '@/assets/base.css';
 </style>
 
 <style lang="postcss" scoped>
 .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 'reset.css';
+@import 'theme.css';
+@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;
@@ -17,9 +21,9 @@ a {
 }
 
 code,
-code * {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+code *,
+pre {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 }
 
 .card-view {

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

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

@xen-orchestra/lite/src/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;
@@ -48,17 +50,19 @@
   --background-color-red-vates: #f5e8e9;
 
   --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.06);
-  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.1),
-    0 0.2rem 0.1rem rgba(20, 20, 30, 0.06),
+  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.1), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.06),
     0 0.1rem 0.1rem rgba(20, 20, 30, 0.08);
-  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.1),
-    0 0.1rem 1.8rem rgba(20, 20, 30, 0.06), 0 0.6rem 1rem rgba(20, 20, 30, 0.08);
-  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.1),
-    0 0.9rem 4.6rem rgba(20, 20, 30, 0.06),
+  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.1), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.06),
+    0 0.6rem 1rem rgba(20, 20, 30, 0.08);
+  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.1), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.06),
     0 2.4rem 3.8rem rgba(20, 20, 30, 0.04);
 }
 
 :root.dark {
+  color-scheme: dark;
+
+  --color-logo: #e5e5e7;
+
   --color-blue-scale-000: #ffffff;
   --color-blue-scale-100: #e5e5e7;
   --color-blue-scale-200: #9899a5;
@@ -74,12 +78,10 @@
   --background-color-red-vates: #3c1a28;
 
   --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.12);
-  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.2),
-    0 0.2rem 0.1rem rgba(20, 20, 30, 0.12),
+  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.2), 0 0.2rem 0.1rem rgba(20, 20, 30, 0.12),
     0 0.1rem 0.1rem rgba(20, 20, 30, 0.16);
-  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.2),
-    0 0.1rem 1.8rem rgba(20, 20, 30, 0.12), 0 0.6rem 1rem rgba(20, 20, 30, 0.16);
-  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.2),
-    0 0.9rem 4.6rem rgba(20, 20, 30, 0.12),
+  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.2), 0 0.1rem 1.8rem rgba(20, 20, 30, 0.12),
+    0 0.6rem 1rem rgba(20, 20, 30, 0.16);
+  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.2), 0 0.9rem 4.6rem rgba(20, 20, 30, 0.12),
     0 2.4rem 3.8rem rgba(20, 20, 30, 0.08);
 }

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

@@ -6,54 +6,44 @@
         <UiIcon :icon="faAngleDown" class="dropdown-icon" />
       </button>
     </template>
-    <MenuItem :icon="faGear" @click="openSettings">{{
-      $t("settings")
-    }}</MenuItem>
+    <MenuItem :icon="faGear" @click="openSettings">{{ $t('settings') }}</MenuItem>
     <MenuItem :icon="faMessage" @click="openFeedbackUrl">
-      {{ $t("send-us-feedback") }}
+      {{ $t('send-us-feedback') }}
     </MenuItem>
-    <MenuItem
-      :icon="faArrowRightFromBracket"
-      class="menu-item-logout"
-      @click="logout"
-    >
-      {{ $t("log-out") }}
+    <MenuItem :icon="faArrowRightFromBracket" class="menu-item-logout" @click="logout">
+      {{ $t('log-out') }}
     </MenuItem>
   </AppMenu>
 </template>
 
 <script lang="ts" setup>
-import { nextTick } from "vue";
-import { useRouter } from "vue-router";
+import { nextTick } from 'vue'
+import { useRouter } from 'vue-router'
 import {
   faAngleDown,
   faArrowRightFromBracket,
   faCircleUser,
   faGear,
   faMessage,
-} from "@fortawesome/free-solid-svg-icons";
-import AppMenu from "@/components/menu/AppMenu.vue";
-import MenuItem from "@/components/menu/MenuItem.vue";
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import { useXenApiStore } from "@/stores/xen-api.store";
+} from '@fortawesome/free-solid-svg-icons'
+import AppMenu from '@/components/menu/AppMenu.vue'
+import MenuItem from '@/components/menu/MenuItem.vue'
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import { useXenApiStore } from '@/stores/xen-api.store'
 
-const router = useRouter();
+const router = useRouter()
 
 const logout = () => {
-  const xenApiStore = useXenApiStore();
-  xenApiStore.disconnect();
-  nextTick(() => router.push({ name: "home" }));
-};
+  const xenApiStore = useXenApiStore()
+  xenApiStore.disconnect()
+  nextTick(() => router.push({ name: 'home' }))
+}
 
 const openFeedbackUrl = () => {
-  window.open(
-    "https://xcp-ng.org/forum/topic/4731/xen-orchestra-lite",
-    "_blank",
-    "noopener"
-  );
-};
+  window.open('https://xcp-ng.org/forum/topic/4731/xen-orchestra-lite', '_blank', 'noopener')
+}
 
-const openSettings = () => router.push({ name: "settings" });
+const openSettings = () => router.push({ name: 'settings' })
 </script>
 
 <style scoped>

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

@@ -1,34 +1,42 @@
 <template>
   <header class="app-header">
-    <UiIcon
-      v-if="isMobile"
-      ref="navigationTrigger"
-      :icon="faBars"
-      class="toggle-navigation"
-    />
+    <UiIcon v-if="isMobile" ref="navigationTrigger" :icon="faBars" 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 />
+      <UiButton v-if="isDesktop" :icon="faDownload" @click="openXoaDeploy">
+        {{ $t('deploy-xoa') }}
+      </UiButton>
       <AccountButton />
     </div>
   </header>
 </template>
 
 <script lang="ts" setup>
-import AccountButton from "@/components/AccountButton.vue";
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import { useNavigationStore } from "@/stores/navigation.store";
-import { useUiStore } from "@/stores/ui.store";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
-import { storeToRefs } from "pinia";
+import AccountButton from '@/components/AccountButton.vue'
+import PoolOverrideWarning from '@/components/PoolOverrideWarning.vue'
+import TextLogo from '@/components/TextLogo.vue'
+import UiButton from '@/components/ui/UiButton.vue'
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import { useNavigationStore } from '@/stores/navigation.store'
+import { useRouter } from 'vue-router'
+import { useUiStore } from '@/stores/ui.store'
+import { faBars, faDownload } from '@fortawesome/free-solid-svg-icons'
+import { storeToRefs } from 'pinia'
 
-const uiStore = useUiStore();
-const { isMobile } = storeToRefs(uiStore);
+const router = useRouter()
 
-const navigationStore = useNavigationStore();
-const { trigger: navigationTrigger } = storeToRefs(navigationStore);
+const openXoaDeploy = () => router.push({ name: 'xoa.deploy' })
+
+const uiStore = useUiStore()
+const { isMobile, isDesktop } = storeToRefs(uiStore)
+
+const navigationStore = useNavigationStore()
+const { trigger: navigationTrigger } = storeToRefs(navigationStore)
 </script>
 
 <style lang="postcss" scoped>
@@ -36,7 +44,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,10 +52,20 @@ 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 {
   display: flex;
   align-items: center;
+  gap: 2rem;
 }
 </style>

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

@@ -2,82 +2,102 @@
   <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"
+          name="password"
+          type="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>
 
 <script lang="ts" setup>
-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 { usePageTitleStore } from '@/stores/page-title.store'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+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 UiButton from "@/components/ui/UiButton.vue";
-import { useXenApiStore } from "@/stores/xen-api.store";
+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();
-usePageTitleStore().setTitle(t("login"));
-const xenApiStore = useXenApiStore();
-const { isConnecting } = storeToRefs(xenApiStore);
-const login = ref("root");
-const password = ref("");
-const error = ref<string>();
-const passwordRef = ref<InstanceType<typeof FormInput>>();
-const isInvalidPassword = ref(false);
-const rememberMe = useLocalStorage("rememberMe", false);
+const { t } = useI18n()
+usePageTitleStore().setTitle(t('login'))
+const xenApiStore = useXenApiStore()
+const { isConnecting } = storeToRefs(xenApiStore)
+const login = ref('root')
+const password = ref('')
+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 focusPasswordInput = () => passwordRef.value?.focus()
+const isHostIsSlaveErr = (err: XenApiError | undefined) => err?.message === 'HOST_IS_SLAVE'
 
 onMounted(() => {
   if (rememberMe.value) {
-    xenApiStore.reconnect();
+    xenApiStore.reconnect()
   } else {
-    focusPasswordInput();
+    focusPasswordInput()
   }
-});
+})
 
 watch(password, () => {
-  isInvalidPassword.value = false;
-  error.value = undefined;
-});
+  isInvalidPassword.value = false
+  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") {
-      focusPasswordInput();
-      isInvalidPassword.value = true;
-      error.value = t("password-invalid");
+    await xenApiStore.connect(login.value, password.value)
+  } catch (err: any) {
+    if (err.message === 'SESSION_AUTHENTICATION_FAILED') {
+      focusPasswordInput()
+      isInvalidPassword.value = true
     } else {
-      error.value = t("error-occurred");
-      console.error(err);
+      console.error(error)
     }
+
+    error.value = err
   }
 }
 </script>
@@ -85,14 +105,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 +133,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/AppMarkdown.vue

@@ -1,39 +1,40 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div ref="rootElement" class="app-markdown" v-html="html" />
+  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script lang="ts" setup>
-import markdown from "@/libs/markdown";
-import { useEventListener } from "@vueuse/core";
-import { computed, type Ref, ref } from "vue";
+import markdown from '@/libs/markdown'
+import { useEventListener } from '@vueuse/core'
+import { computed, type Ref, ref } from 'vue'
 
-const rootElement = ref() as Ref<HTMLElement>;
+const rootElement = ref() as Ref<HTMLElement>
 
 const props = defineProps<{
-  content: string;
-}>();
+  content: string
+}>()
 
-const html = computed(() => markdown.parse(props.content ?? ""));
+const html = computed(() => markdown.parse(props.content ?? ''))
 
 useEventListener(
   rootElement,
-  "click",
+  'click',
   (event: MouseEvent) => {
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement
 
-    if (!target.classList.contains("copy-button")) {
-      return;
+    if (!target.classList.contains('copy-button')) {
+      return
     }
 
-    const copyable =
-      target.parentElement!.querySelector<HTMLElement>(".copyable");
+    const copyable = target.parentElement!.querySelector<HTMLElement>('.copyable')
 
     if (copyable !== null) {
-      navigator.clipboard.writeText(copyable.innerText);
+      navigator.clipboard.writeText(copyable.innerText)
     }
   },
   { capture: true }
-);
+)
 </script>
 
 <style lang="postcss" scoped>

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

@@ -1,11 +1,6 @@
 <template>
   <transition name="slide">
-    <nav
-      v-if="isDesktop || isOpen"
-      ref="navElement"
-      :class="{ collapsible: isMobile }"
-      class="app-navigation"
-    >
+    <nav v-if="isDesktop || isOpen" ref="navElement" :class="{ collapsible: isMobile }" class="app-navigation">
       <StoryMenu v-if="$route.meta.hasStoryNav" />
       <InfraPoolList v-else />
     </nav>
@@ -13,34 +8,34 @@
 </template>
 
 <script lang="ts" setup>
-import StoryMenu from "@/components/component-story/StoryMenu.vue";
-import InfraPoolList from "@/components/infra/InfraPoolList.vue";
-import { useNavigationStore } from "@/stores/navigation.store";
-import { useUiStore } from "@/stores/ui.store";
-import { onClickOutside, whenever } from "@vueuse/core";
-import { storeToRefs } from "pinia";
-import { ref } from "vue";
+import StoryMenu from '@/components/component-story/StoryMenu.vue'
+import InfraPoolList from '@/components/infra/InfraPoolList.vue'
+import { useNavigationStore } from '@/stores/navigation.store'
+import { useUiStore } from '@/stores/ui.store'
+import { onClickOutside, whenever } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 
-const uiStore = useUiStore();
-const { isMobile, isDesktop } = storeToRefs(uiStore);
+const uiStore = useUiStore()
+const { isMobile, isDesktop } = storeToRefs(uiStore)
 
-const navigationStore = useNavigationStore();
-const { isOpen, trigger } = storeToRefs(navigationStore);
+const navigationStore = useNavigationStore()
+const { isOpen, trigger } = storeToRefs(navigationStore)
 
-const navElement = ref();
+const navElement = ref()
 
 whenever(isOpen, () => {
   const unregisterEvent = onClickOutside(
     navElement,
     () => {
-      isOpen.value = false;
-      unregisterEvent?.();
+      isOpen.value = false
+      unregisterEvent?.()
     },
     {
       ignore: [trigger],
     }
-  );
-});
+  )
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -48,7 +43,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/AppTooltip.vue

@@ -6,33 +6,31 @@
 </template>
 
 <script lang="ts" setup>
-import type { TooltipOptions } from "@/stores/tooltip.store";
-import { isString } from "lodash-es";
-import place from "placement.js";
-import { computed, ref, watchEffect } from "vue";
+import type { TooltipOptions } from '@/stores/tooltip.store'
+import { isString } from 'lodash-es'
+import place from 'placement.js'
+import { computed, ref, watchEffect } from 'vue'
 
 const props = defineProps<{
-  target: HTMLElement;
-  options: TooltipOptions;
-}>();
+  target: HTMLElement
+  options: TooltipOptions
+}>()
 
-const tooltipElement = ref<HTMLElement>();
+const tooltipElement = ref<HTMLElement>()
 
 const isDisabled = computed(() =>
-  isString(props.options.content)
-    ? props.options.content.trim() === ""
-    : props.options.content === false
-);
+  isString(props.options.content) ? props.options.content.trim() === '' : props.options.content === false
+)
 
-const placement = computed(() => props.options.placement ?? "top");
+const placement = computed(() => props.options.placement ?? 'top')
 
 watchEffect(() => {
   if (tooltipElement.value) {
     place(props.target, tooltipElement.value, {
       placement: placement.value,
-    });
+    })
   }
-});
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -56,7 +54,7 @@ watchEffect(() => {
   height: 1.875em;
 }
 
-[data-placement^="top"] {
+[data-placement^='top'] {
   margin-bottom: 0.625em;
 
   .triangle {
@@ -65,7 +63,7 @@ watchEffect(() => {
   }
 }
 
-[data-placement^="right"] {
+[data-placement^='right'] {
   margin-left: 0.625em;
 
   .triangle {
@@ -74,7 +72,7 @@ watchEffect(() => {
   }
 }
 
-[data-placement^="bottom"] {
+[data-placement^='bottom'] {
   margin-top: 0.625em;
 
   .triangle {
@@ -82,7 +80,7 @@ watchEffect(() => {
   }
 }
 
-[data-placement^="left"] {
+[data-placement^='left'] {
   margin-right: 0.625em;
 
   .triangle {
@@ -91,51 +89,51 @@ watchEffect(() => {
   }
 }
 
-[data-placement="top-start"] .triangle {
+[data-placement='top-start'] .triangle {
   left: 0;
 }
 
-[data-placement="top-center"] .triangle {
+[data-placement='top-center'] .triangle {
   left: 50%;
   margin-left: -0.9375em;
 }
 
-[data-placement="top-end"] .triangle {
+[data-placement='top-end'] .triangle {
   right: 0;
 }
 
-[data-placement="left-start"] .triangle {
+[data-placement='left-start'] .triangle {
   top: -0.25em;
 }
 
-[data-placement="left-center"] .triangle {
+[data-placement='left-center'] .triangle {
   top: 50%;
   margin-top: -0.9375em;
 }
 
-[data-placement="left-end"] .triangle {
+[data-placement='left-end'] .triangle {
   bottom: -0.25em;
 }
 
-[data-placement="right-start"] .triangle {
+[data-placement='right-start'] .triangle {
   top: -0.25em;
 }
 
-[data-placement="right-center"] .triangle {
+[data-placement='right-center'] .triangle {
   top: 50%;
   margin-top: -0.9375em;
 }
 
-[data-placement="right-end"] .triangle {
+[data-placement='right-end'] .triangle {
   bottom: -0.25em;
 }
 
-[data-placement="bottom-center"] .triangle {
+[data-placement='bottom-center'] .triangle {
   left: 50%;
   margin-left: -0.9375em;
 }
 
-[data-placement="bottom-end"] .triangle {
+[data-placement='bottom-end'] .triangle {
   right: 0;
 }
 
@@ -144,7 +142,7 @@ watchEffect(() => {
   width: 100%;
   height: 100%;
   margin-top: 1.875em;
-  content: "";
+  content: '';
   transform: rotate(45deg) skew(20deg, 20deg);
   border-radius: 0.3125em;
   background-color: var(--color-blue-scale-100);

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

@@ -1,19 +1,14 @@
 <template>
-  <AppTooltip
-    v-for="tooltip in tooltips"
-    :key="tooltip.key"
-    :options="tooltip.options"
-    :target="tooltip.target"
-  />
+  <AppTooltip v-for="tooltip in tooltips" :key="tooltip.key" :options="tooltip.options" :target="tooltip.target" />
 </template>
 
 <script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import AppTooltip from "@/components/AppTooltip.vue";
-import { useTooltipStore } from "@/stores/tooltip.store";
+import { storeToRefs } from 'pinia'
+import AppTooltip from '@/components/AppTooltip.vue'
+import { useTooltipStore } from '@/stores/tooltip.store'
 
-const tooltipStore = useTooltipStore();
-const { tooltips } = storeToRefs(tooltipStore);
+const tooltipStore = useTooltipStore()
+const { tooltips } = storeToRefs(tooltipStore)
 </script>
 
 <style scoped></style>

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

@@ -1,33 +1,33 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <pre class="code-highlight hljs"><code v-html="codeAsHtml"></code></pre>
+  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script lang="ts" setup>
-import { type AcceptedLanguage, highlight } from "@/libs/highlight";
-import { computed } from "vue";
+import { type AcceptedLanguage, highlight } from '@/libs/highlight'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    code?: any;
-    lang?: AcceptedLanguage;
+    code?: any
+    lang?: AcceptedLanguage
   }>(),
-  { lang: "typescript" }
-);
+  { lang: 'typescript' }
+)
 
 const codeAsText = computed(() => {
   switch (typeof props.code) {
-    case "string":
-      return props.code;
-    case "function":
-      return String(props.code);
+    case 'string':
+      return props.code
+    case 'function':
+      return String(props.code)
     default:
-      return JSON.stringify(props.code, undefined, 2);
+      return JSON.stringify(props.code, undefined, 2)
   }
-});
+})
 
-const codeAsHtml = computed(
-  () => highlight(codeAsText.value, { language: props.lang }).value
-);
+const codeAsHtml = computed(() => highlight(codeAsText.value, { language: props.lang }).value)
 </script>
 
 <style lang="postcss" scoped>

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

@@ -3,192 +3,46 @@
     <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">
-      {{ $t("add-filter") }}
+    <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 { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { Or, parse } from "complex-matcher";
-import { computed, ref } from "vue";
+import UiActionButton from '@/components/ui/UiActionButton.vue'
+import UiFilter from '@/components/ui/UiFilter.vue'
+import UiFilterGroup from '@/components/ui/UiFilterGroup.vue'
+import { useModal } from '@/composables/modal.composable'
+import type { Filters } from '@/types/filter'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
-defineProps<{
-  activeFilters: string[];
-  availableFilters: Filters;
-}>();
+const props = defineProps<{
+  activeFilters: string[]
+  availableFilters: Filters
+}>()
 
 const emit = defineEmits<{
-  (event: "addFilter", filter: string): void;
-  (event: "removeFilter", filter: string): void;
-}>();
+  (event: 'addFilter', filter: string): void
+  (event: 'removeFilter', filter: string): void
+}>()
 
-const { isOpen, open, close } = useModal({ onClose: () => reset() });
-const newFilters = ref<NewFilter[]>([]);
-let newFilterId = 0;
+const openModal = (editedFilter?: string) => {
+  const { onApprove } = useModal<string>(() => import('@/components/modals/CollectionFilterModal.vue'), {
+    availableFilters: props.availableFilters,
+    editedFilter,
+  })
 
-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 !== ""
-  );
-
-  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/CollectionFilterRow.vue

@@ -1,31 +1,21 @@
 <template>
   <div class="collection-filter-row">
-    <span class="or">{{ $t("or") }}</span>
+    <span class="or">{{ $t('or') }}</span>
     <FormWidget v-if="newFilter.isAdvanced" class="form-widget-advanced">
       <input v-model="newFilter.content" />
     </FormWidget>
     <template v-else>
       <FormWidget :before="currentFilterIcon">
         <select v-model="newFilter.builder.property">
-          <option v-if="!newFilter.builder.property" value="">
-            - {{ $t("property") }} -
-          </option>
-          <option
-            v-for="(filter, property) in availableFilters"
-            :key="property"
-            :value="property"
-          >
+          <option v-if="!newFilter.builder.property" value="">- {{ $t('property') }} -</option>
+          <option v-for="(filter, property) in availableFilters" :key="property" :value="property">
             {{ filter.label ?? property }}
           </option>
         </select>
       </FormWidget>
       <FormWidget v-if="hasComparisonSelect">
         <select v-model="newFilter.builder.comparison">
-          <option
-            v-for="(label, type) in comparisons"
-            :key="type"
-            :value="type"
-          >
+          <option v-for="(label, type) in comparisons" :key="type" :value="type">
             {{ label }}
           </option>
         </select>
@@ -38,112 +28,88 @@
           </option>
         </select>
       </FormWidget>
-      <FormWidget
-        v-else-if="hasValueInput"
-        :after="valueInputAfter"
-        :before="valueInputBefore"
-      >
+      <FormWidget v-else-if="hasValueInput" :after="valueInputAfter" :before="valueInputBefore">
         <input v-model="newFilter.builder.value" />
       </FormWidget>
     </template>
-    <UiActionButton
-      v-if="!newFilter.isAdvanced"
-      :icon="faPencil"
-      @click="enableAdvancedMode"
-    />
+    <UiActionButton v-if="!newFilter.isAdvanced" :icon="faPencil" @click="enableAdvancedMode" />
     <UiActionButton :icon="faRemove" @click="emit('remove', newFilter.id)" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import FormWidget from "@/components/FormWidget.vue";
-import UiActionButton from "@/components/ui/UiActionButton.vue";
-import { buildComplexMatcherNode } from "@/libs/complex-matcher.utils";
-import { getFilterIcon } from "@/libs/utils";
-import type {
-  Filter,
-  FilterComparisons,
-  FilterComparisonType,
-  Filters,
-  FilterType,
-  NewFilter,
-} from "@/types/filter";
-import { faPencil, faRemove } from "@fortawesome/free-solid-svg-icons";
-import { useVModel } from "@vueuse/core";
-import { computed, type Ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
+import FormWidget from '@/components/FormWidget.vue'
+import UiActionButton from '@/components/ui/UiActionButton.vue'
+import { buildComplexMatcherNode } from '@/libs/complex-matcher.utils'
+import { getFilterIcon } from '@/libs/utils'
+import type { Filter, FilterComparisons, FilterComparisonType, Filters, FilterType, NewFilter } from '@/types/filter'
+import { faPencil, faRemove } from '@fortawesome/free-solid-svg-icons'
+import { useVModel } from '@vueuse/core'
+import { computed, type Ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
-  availableFilters: Filters;
-  modelValue: NewFilter;
-}>();
+  availableFilters: Filters
+  modelValue: NewFilter
+}>()
 
 const emit = defineEmits<{
-  (event: "update:modelValue", value: NewFilter): void;
-  (event: "remove", filterId: number): void;
-}>();
+  (event: 'update:modelValue', value: NewFilter): void
+  (event: 'remove', filterId: number): void
+}>()
 
-const { t } = useI18n();
+const { t } = useI18n()
 
-const newFilter: Ref<NewFilter> = useVModel(props, "modelValue", emit);
+const newFilter: Ref<NewFilter> = useVModel(props, 'modelValue', emit)
 
 const getDefaultComparisonType = () => {
   const defaultTypes: { [key in FilterType]: FilterComparisonType } = {
-    string: "stringContains",
-    boolean: "booleanTrue",
-    number: "numberEquals",
-    enum: "enumIs",
-  };
+    string: 'stringContains',
+    boolean: 'booleanTrue',
+    number: 'numberEquals',
+    enum: 'enumIs',
+  }
 
-  return defaultTypes[
-    props.availableFilters[newFilter.value.builder.property].type
-  ];
-};
+  return defaultTypes[props.availableFilters[newFilter.value.builder.property].type]
+}
 
 watch(
   () => newFilter.value.builder.property,
   () => {
-    newFilter.value.builder.comparison = getDefaultComparisonType();
-    newFilter.value.builder.value = "";
+    newFilter.value.builder.comparison = getDefaultComparisonType()
+    newFilter.value.builder.value = ''
   }
-);
+)
 
-const currentFilter = computed<Filter>(
-  () => props.availableFilters[newFilter.value.builder.property]
-);
+const currentFilter = computed<Filter>(() => props.availableFilters[newFilter.value.builder.property])
 
-const currentFilterIcon = computed(() => getFilterIcon(currentFilter.value));
+const currentFilterIcon = computed(() => getFilterIcon(currentFilter.value))
 
-const hasValueInput = computed(() =>
-  ["string", "number"].includes(currentFilter.value?.type)
-);
+const hasValueInput = computed(() => ['string', 'number'].includes(currentFilter.value?.type))
 
-const hasComparisonSelect = computed(
-  () => newFilter.value.builder.property !== ""
-);
+const hasComparisonSelect = computed(() => newFilter.value.builder.property !== '')
 
 const enumChoices = computed(() => {
   if (!newFilter.value.builder.property) {
-    return [];
+    return []
   }
 
-  const availableFilter =
-    props.availableFilters[newFilter.value.builder.property];
+  const availableFilter = props.availableFilters[newFilter.value.builder.property]
 
-  if (availableFilter.type !== "enum") {
-    return [];
+  if (availableFilter.type !== 'enum') {
+    return []
   }
 
-  return availableFilter.choices;
-});
+  return availableFilter.choices
+})
 
 const generatedFilter = computed(() => {
   if (newFilter.value.isAdvanced) {
-    return newFilter.value.content;
+    return newFilter.value.content
   }
 
   if (!newFilter.value.builder.comparison) {
-    return "";
+    return ''
   }
 
   try {
@@ -151,68 +117,64 @@ const generatedFilter = computed(() => {
       newFilter.value.builder.comparison,
       newFilter.value.builder.property,
       newFilter.value.builder.value
-    );
+    )
 
     if (node) {
-      return node.toString();
+      return node.toString()
     }
 
-    return "";
+    return ''
   } catch (e) {
-    return "";
+    return ''
   }
-});
+})
 
 const enableAdvancedMode = () => {
-  newFilter.value.content = generatedFilter.value;
-  newFilter.value.isAdvanced = true;
-};
+  newFilter.value.content = generatedFilter.value
+  newFilter.value.isAdvanced = true
+}
 
-watch(generatedFilter, (value) => {
-  newFilter.value.content = value;
-});
+watch(generatedFilter, value => {
+  newFilter.value.content = value
+})
 
 const comparisons = computed<FilterComparisons>(() => {
   const comparisonsByType = {
     string: {
-      stringContains: t("filter.comparison.contains"),
-      stringEquals: t("filter.comparison.equals"),
-      stringStartsWith: t("filter.comparison.starts-with"),
-      stringEndsWith: t("filter.comparison.ends-with"),
-      stringMatchesRegex: t("filter.comparison.matches-regex"),
-      stringDoesNotContain: t("filter.comparison.not-contain"),
-      stringDoesNotEqual: t("filter.comparison.not-equal"),
-      stringDoesNotStartWith: t("filter.comparison.not-start-with"),
-      stringDoesNotEndWith: t("filter.comparison.not-end-with"),
-      stringDoesNotMatchRegex: t("filter.comparison.not-match-regex"),
+      stringContains: t('filter.comparison.contains'),
+      stringEquals: t('filter.comparison.equals'),
+      stringStartsWith: t('filter.comparison.starts-with'),
+      stringEndsWith: t('filter.comparison.ends-with'),
+      stringMatchesRegex: t('filter.comparison.matches-regex'),
+      stringDoesNotContain: t('filter.comparison.not-contain'),
+      stringDoesNotEqual: t('filter.comparison.not-equal'),
+      stringDoesNotStartWith: t('filter.comparison.not-start-with'),
+      stringDoesNotEndWith: t('filter.comparison.not-end-with'),
+      stringDoesNotMatchRegex: t('filter.comparison.not-match-regex'),
     },
     boolean: {
-      booleanTrue: t("filter.comparison.is-true"),
-      booleanFalse: t("filter.comparison.is-false"),
+      booleanTrue: t('filter.comparison.is-true'),
+      booleanFalse: t('filter.comparison.is-false'),
     },
     number: {
-      numberLessThan: "<",
-      numberLessThanOrEquals: "<=",
-      numberEquals: "=",
-      numberGreaterThanOrEquals: ">=",
-      numberGreaterThan: ">",
+      numberLessThan: '<',
+      numberLessThanOrEquals: '<=',
+      numberEquals: '=',
+      numberGreaterThanOrEquals: '>=',
+      numberGreaterThan: '>',
     },
     enum: {
-      enumIs: t("filter.comparison.is"),
-      enumIsNot: t("filter.comparison.is-not"),
+      enumIs: t('filter.comparison.is'),
+      enumIsNot: t('filter.comparison.is-not'),
     },
-  };
+  }
 
-  return comparisonsByType[currentFilter.value.type];
-});
+  return comparisonsByType[currentFilter.value.type]
+})
 
-const valueInputBefore = computed(() =>
-  newFilter.value.builder.comparison === "stringMatchesRegex" ? "/" : undefined
-);
+const valueInputBefore = computed(() => (newFilter.value.builder.comparison === 'stringMatchesRegex' ? '/' : undefined))
 
-const valueInputAfter = computed(() =>
-  newFilter.value.builder.comparison === "stringMatchesRegex" ? "/i" : undefined
-);
+const valueInputAfter = computed(() => (newFilter.value.builder.comparison === 'stringMatchesRegex' ? '/i' : undefined))
 </script>
 
 <style lang="postcss" scoped>

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

@@ -12,98 +12,43 @@
       </span>
     </UiFilter>
 
-    <UiActionButton :icon="faPlus" class="add-sort" @click="open">
-      {{ $t("add-sort") }}
+    <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 {
-  faCaretDown,
-  faCaretUp,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { ref } from "vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import UiActionButton from '@/components/ui/UiActionButton.vue'
+import UiFilter from '@/components/ui/UiFilter.vue'
+import UiFilterGroup from '@/components/ui/UiFilterGroup.vue'
+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 { computed } from 'vue'
 
-defineProps<{
-  availableSorts: Sorts;
-  activeSorts: ActiveSorts<Record<string, any>>;
-}>();
+const props = defineProps<{
+  availableSorts: Sorts
+  activeSorts: ActiveSorts<Record<string, any>>
+}>()
 
 const emit = defineEmits<{
-  (event: "toggleSortDirection", property: string): void;
-  (event: "addSort", property: string, isAscending: boolean): void;
-  (event: "removeSort", property: string): void;
-}>();
+  (event: 'toggleSortDirection', property: string): void
+  (event: 'addSort', property: string, isAscending: boolean): void
+  (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/CollectionTable.vue

@@ -39,59 +39,52 @@
 </template>
 
 <script generic="T extends XenApiRecord<any>" lang="ts" setup>
-import CollectionFilter from "@/components/CollectionFilter.vue";
-import CollectionSorter from "@/components/CollectionSorter.vue";
-import UiTable from "@/components/ui/UiTable.vue";
-import useCollectionFilter from "@/composables/collection-filter.composable";
-import useCollectionSorter from "@/composables/collection-sorter.composable";
-import useFilteredCollection from "@/composables/filtered-collection.composable";
-import useMultiSelect from "@/composables/multi-select.composable";
-import useSortedCollection from "@/composables/sorted-collection.composable";
-import type { XenApiRecord } from "@/libs/xen-api/xen-api.types";
-import type { Filters } from "@/types/filter";
-import type { Sorts } from "@/types/sort";
-import { computed, toRef, watch } from "vue";
+import CollectionFilter from '@/components/CollectionFilter.vue'
+import CollectionSorter from '@/components/CollectionSorter.vue'
+import UiTable from '@/components/ui/UiTable.vue'
+import useCollectionFilter from '@/composables/collection-filter.composable'
+import useCollectionSorter from '@/composables/collection-sorter.composable'
+import useFilteredCollection from '@/composables/filtered-collection.composable'
+import useMultiSelect from '@/composables/multi-select.composable'
+import useSortedCollection from '@/composables/sorted-collection.composable'
+import type { XenApiRecord } from '@/libs/xen-api/xen-api.types'
+import type { Filters } from '@/types/filter'
+import type { Sorts } from '@/types/sort'
+import { computed, toRef, watch } from 'vue'
 
 const props = defineProps<{
-  modelValue?: T["$ref"][];
-  availableFilters?: Filters;
-  availableSorts?: Sorts;
-  collection: T[];
-}>();
+  modelValue?: T['$ref'][]
+  availableFilters?: Filters
+  availableSorts?: Sorts
+  collection: T[]
+}>()
 
 const emit = defineEmits<{
-  (event: "update:modelValue", selectedRefs: T["$ref"][]): void;
-}>();
+  (event: 'update:modelValue', selectedRefs: T['$ref'][]): void
+}>()
 
-const isSelectable = computed(() => props.modelValue !== undefined);
+const isSelectable = computed(() => props.modelValue !== undefined)
 
 const { filters, addFilter, removeFilter, predicate } = useCollectionFilter({
-  queryStringParam: "filter",
-});
-const { sorts, addSort, removeSort, toggleSortDirection, compareFn } =
-  useCollectionSorter<Record<string, any>>({ queryStringParam: "sort" });
+  queryStringParam: 'filter',
+})
+const { sorts, addSort, removeSort, toggleSortDirection, compareFn } = useCollectionSorter<Record<string, any>>({
+  queryStringParam: 'sort',
+})
 
-const filteredCollection = useFilteredCollection(
-  toRef(props, "collection"),
-  predicate
-);
+const filteredCollection = useFilteredCollection(toRef(props, 'collection'), predicate)
 
-const filteredAndSortedCollection = useSortedCollection(
-  filteredCollection,
-  compareFn
-);
+const filteredAndSortedCollection = useSortedCollection(filteredCollection, compareFn)
 
-const usableRefs = computed(() => props.collection.map((item) => item["$ref"]));
+const usableRefs = computed(() => props.collection.map(item => item.$ref))
 
-const selectableRefs = computed(() =>
-  filteredAndSortedCollection.value.map((item) => item["$ref"])
-);
+const selectableRefs = computed(() => filteredAndSortedCollection.value.map(item => item.$ref))
 
-const { selected, areAllSelected } = useMultiSelect(usableRefs, selectableRefs);
+const { selected, areAllSelected } = useMultiSelect(usableRefs, selectableRefs)
 
-watch(selected, (selected) => emit("update:modelValue", selected), {
+watch(selected, selected => emit('update:modelValue', selected), {
   immediate: true,
-});
+})
 </script>
 
 <style lang="postcss" scoped>

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

@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
-  icon?: IconDefinition;
-}>();
+  icon?: IconDefinition
+}>()
 </script>
 
 <style lang="postcss" scoped>

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

@@ -26,18 +26,17 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
-  before?: IconDefinition | string | object; // "object" added as workaround
-  after?: IconDefinition | string | object; // See https://github.com/vuejs/core/issues/4294
-  label?: string;
-  inline?: boolean;
-}>();
+  before?: IconDefinition | string | object // "object" added as workaround
+  after?: IconDefinition | string | object // See https://github.com/vuejs/core/issues/4294
+  label?: string
+  inline?: boolean
+}>()
 
-const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
-  typeof maybeIcon === "object";
+const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon === 'object'
 </script>
 
 <style lang="postcss" scoped>
@@ -103,7 +102,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   }
 }
 
-:slotted(input[type="checkbox"]) {
+:slotted(input[type='checkbox']) {
   font: inherit;
   display: grid;
   flex: 1.5rem 0 0;
@@ -121,7 +120,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   &::before {
     width: 0.65em;
     height: 0.65em;
-    content: "";
+    content: '';
     transition: 120ms transform ease-in-out;
     transform: scale(0);
     transform-origin: center;

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

@@ -2,55 +2,60 @@
   <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>
 </template>
 
 <script lang="ts" setup>
-import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
-import UiCounter from "@/components/ui/UiCounter.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
-import UiTable from "@/components/ui/UiTable.vue";
-import type { XenApiPatchWithHostRefs } from "@/composables/host-patches.composable";
-import { vTooltip } from "@/directives/tooltip.directive";
-import { useUiStore } from "@/stores/ui.store";
-import { computed } from "vue";
+import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
+import UiCounter from '@/components/ui/UiCounter.vue'
+import UiSpinner from '@/components/ui/UiSpinner.vue'
+import UiTable from '@/components/ui/UiTable.vue'
+import type { XenApiPatchWithHostRefs } from '@/composables/host-patches.composable'
+import { vTooltip } from '@/directives/tooltip.directive'
+import { useUiStore } from '@/stores/ui.store'
+import { computed } from 'vue'
 
 const props = defineProps<{
-  patches: XenApiPatchWithHostRefs[];
-  hasMultipleHosts: boolean;
-  areAllLoaded: boolean;
-  areSomeLoaded: boolean;
-}>();
+  patches: XenApiPatchWithHostRefs[]
+  hasMultipleHosts: boolean
+  areAllLoaded: boolean
+  areSomeLoaded: boolean
+}>()
 
 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
+    }
 
-const { isDesktop } = useUiStore();
+    return patch1.changelog.date - patch2.changelog.date
+  })
+)
+
+const { isDesktop } = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
@@ -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 v-if="error !== undefined" class="error">
+    <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/NoDataError.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="no-data">
     <img alt="No data" class="img" src="@/assets/undraw-bug-fixing.svg" />
-    <p class="text-error">{{ $t("error-no-data") }}</p>
+    <p class="text-error">{{ $t('error-no-data') }}</p>
   </div>
 </template>
 

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

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

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

@@ -12,80 +12,75 @@
 </template>
 
 <script generic="T extends ObjectType" lang="ts" setup>
-import UiSpinner from "@/components/ui/UiSpinner.vue";
-import type {
-  ObjectType,
-  ObjectTypeToRecord,
-} from "@/libs/xen-api/xen-api.types";
-import { useHostStore } from "@/stores/xen-api/host.store";
-import { usePoolStore } from "@/stores/xen-api/pool.store";
-import { useSrStore } from "@/stores/xen-api/sr.store";
-import { useVmStore } from "@/stores/xen-api/vm.store";
-import type { StoreDefinition } from "pinia";
-import { computed, onUnmounted, watch } from "vue";
-import type { RouteRecordName } from "vue-router";
+import UiSpinner from '@/components/ui/UiSpinner.vue'
+import type { ObjectType, ObjectTypeToRecord } from '@/libs/xen-api/xen-api.types'
+import { useHostStore } from '@/stores/xen-api/host.store'
+import { usePoolStore } from '@/stores/xen-api/pool.store'
+import { useSrStore } from '@/stores/xen-api/sr.store'
+import { useVmStore } from '@/stores/xen-api/vm.store'
+import type { StoreDefinition } from 'pinia'
+import { computed, onUnmounted, watch } from 'vue'
+import type { RouteRecordName } from 'vue-router'
 
-type HandledTypes = "host" | "vm" | "sr" | "pool";
-type XRecord = ObjectTypeToRecord<T>;
+type HandledTypes = 'host' | 'vm' | 'sr' | 'pool'
+type XRecord = ObjectTypeToRecord<T>
 type Config = Partial<
   Record<
     ObjectType,
     {
-      useStore: StoreDefinition<any, any, any, any>;
-      routeName: RouteRecordName | undefined;
+      useStore: StoreDefinition<any, any, any, any>
+      routeName: RouteRecordName | undefined
     }
   >
->;
+>
 
 const props = defineProps<{
-  type: T;
-  uuid: XRecord["uuid"];
-}>();
+  type: T
+  uuid: XRecord['uuid']
+}>()
 
 const config: Config = {
-  host: { useStore: useHostStore, routeName: "host.dashboard" },
-  vm: { useStore: useVmStore, routeName: "vm.console" },
+  host: { useStore: useHostStore, routeName: 'host.dashboard' },
+  vm: { useStore: useVmStore, routeName: 'vm.console' },
   sr: { useStore: useSrStore, routeName: undefined },
-  pool: { useStore: usePoolStore, routeName: "pool.dashboard" },
-} satisfies Record<HandledTypes, any>;
+  pool: { useStore: usePoolStore, routeName: 'pool.dashboard' },
+} satisfies Record<HandledTypes, any>
 
-const store = computed(() => config[props.type]?.useStore());
+const store = computed(() => config[props.type]?.useStore())
 
-const subscriptionId = Symbol();
+const subscriptionId = Symbol('OBJECT_LINK_SUBSCRIPTION_ID')
 
 watch(
   store,
   (nextStore, previousStore) => {
-    previousStore?.unsubscribe(subscriptionId);
-    nextStore?.subscribe(subscriptionId);
+    previousStore?.unsubscribe(subscriptionId)
+    nextStore?.subscribe(subscriptionId)
   },
   { immediate: true }
-);
+)
 
 onUnmounted(() => {
-  store.value?.unsubscribe(subscriptionId);
-});
+  store.value?.unsubscribe(subscriptionId)
+})
 
-const record = computed<ObjectTypeToRecord<HandledTypes> | undefined>(
-  () => store.value?.getByUuid(props.uuid as any)
-);
+const record = computed<ObjectTypeToRecord<HandledTypes> | undefined>(() => store.value?.getByUuid(props.uuid as any))
 
 const isReady = computed(() => {
-  return store.value?.isReady ?? true;
-});
+  return store.value?.isReady ?? true
+})
 
 const objectRoute = computed(() => {
-  const { routeName } = config[props.type] ?? {};
+  const { routeName } = config[props.type] ?? {}
 
   if (routeName === undefined) {
-    return;
+    return
   }
 
   return {
     name: routeName,
     params: { uuid: props.uuid },
-  };
-});
+  }
+})
 </script>
 
 <style lang="postcss" scoped>

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

@@ -6,30 +6,24 @@
   <slot v-else />
 </template>
 
-<script
-  generic="T extends XenApiRecord<ObjectType>, I extends T['uuid']"
-  lang="ts"
-  setup
->
-import UiSpinner from "@/components/ui/UiSpinner.vue";
-import type { ObjectType, XenApiRecord } from "@/libs/xen-api/xen-api.types";
-import ObjectNotFoundView from "@/views/ObjectNotFoundView.vue";
-import { computed } from "vue";
-import { useRouter } from "vue-router";
+<script generic="T extends XenApiRecord<ObjectType>, I extends T['uuid']" lang="ts" setup>
+import UiSpinner from '@/components/ui/UiSpinner.vue'
+import type { ObjectType, XenApiRecord } from '@/libs/xen-api/xen-api.types'
+import ObjectNotFoundView from '@/views/ObjectNotFoundView.vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 const props = defineProps<{
-  isReady: boolean;
-  uuidChecker: (uuid: I) => boolean;
-  id?: I;
-}>();
+  isReady: boolean
+  uuidChecker: (uuid: I) => boolean
+  id?: I
+}>()
 
-const { currentRoute } = useRouter();
+const { currentRoute } = useRouter()
 
-const id = computed(() => props.id ?? (currentRoute.value.params.uuid as I));
+const id = computed(() => props.id ?? (currentRoute.value.params.uuid as I))
 
-const isRecordNotFound = computed(
-  () => props.isReady && !props.uuidChecker(id.value)
-);
+const isRecordNotFound = computed(() => props.isReady && !props.uuidChecker(id.value))
 </script>
 
 <style scoped>

@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") }}
+      {{ $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") }} →
+        {{ $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"
+    v-tooltip="
+      asTooltip && {
+        placement: 'right',
+        content: `
+      ${$t('you-are-currently-on', [masterSessionStorage])}.
+      ${$t('click-to-return-default-pool')}
+      `,
+      }
+    "
+    class="warning-not-current-pool"
+    @click="xenApi.resetPoolMasterIp"
+  >
+    <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/PowerStateIcon.vue

@@ -3,31 +3,25 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import { VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
-import {
-  faMoon,
-  faPause,
-  faPlay,
-  faQuestion,
-  faStop,
-} from "@fortawesome/free-solid-svg-icons";
-import { computed } from "vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
+import { faMoon, faPause, faPlay, faQuestion, faStop } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
 
 const props = defineProps<{
-  state: VM_POWER_STATE;
-}>();
+  state: VM_POWER_STATE
+}>()
 
 const icons = {
   [VM_POWER_STATE.RUNNING]: faPlay,
   [VM_POWER_STATE.PAUSED]: faPause,
   [VM_POWER_STATE.SUSPENDED]: faMoon,
   [VM_POWER_STATE.HALTED]: faStop,
-};
+}
 
-const icon = computed(() => icons[props.state] ?? faQuestion);
+const icon = computed(() => icons[props.state] ?? faQuestion)
 
-const className = computed(() => `state-${props.state.toLocaleLowerCase()}`);
+const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
 </script>
 
 <style lang="postcss" scoped>

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

@@ -1,9 +1,5 @@
 <template>
-  <svg
-    class="progress-circle"
-    viewBox="0 0 36 36"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg class="progress-circle" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
     <path
       class="progress-circle-background"
       d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
@@ -12,31 +8,29 @@
       class="progress-circle-fill"
       d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
     />
-    <text class="progress-circle-text" text-anchor="middle" x="50%" y="50%">
-      {{ progress }}%
-    </text>
+    <text class="progress-circle-text" text-anchor="middle" x="50%" y="50%">{{ progress }}%</text>
   </svg>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 
 interface Props {
-  value: number;
-  maxValue?: number;
+  value: number
+  maxValue?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   maxValue: 100,
-});
+})
 
 const progress = computed(() => {
   if (props.maxValue === 0) {
-    return 0;
+    return 0
   }
 
-  return Math.round((props.value / props.maxValue) * 100);
-});
+  return Math.round((props.value / props.maxValue) * 100)
+})
 </script>
 
 <style lang="postcss" scoped>

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

@@ -3,18 +3,18 @@
 </template>
 
 <script lang="ts" setup>
-import useRelativeTime from "@/composables/relative-time.composable";
-import { parseDateTime } from "@/libs/utils";
-import { useNow } from "@vueuse/core";
-import { computed } from "vue";
+import useRelativeTime from '@/composables/relative-time.composable'
+import { parseDateTime } from '@/libs/utils'
+import { useNow } from '@vueuse/core'
+import { computed } from 'vue'
 
 const props = defineProps<{
-  date: Date | number | string;
-}>();
+  date: Date | number | string
+}>()
 
-const date = computed(() => new Date(parseDateTime(props.date)));
-const now = useNow({ interval: 1000 });
-const relativeTime = useRelativeTime(date, now);
+const date = computed(() => new Date(parseDateTime(props.date)))
+const now = useNow({ interval: 1000 })
+const relativeTime = useRelativeTime(date, now)
 </script>
 
 <style lang="postcss" scoped></style>

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

@@ -3,108 +3,103 @@
 </template>
 
 <script lang="ts" setup>
-import { useXenApiStore } from "@/stores/xen-api.store";
-import VncClient from "@novnc/novnc/core/rfb";
-import { promiseTimeout } from "@vueuse/shared";
-import { fibonacci } from "iterable-backoff";
-import { computed, onBeforeUnmount, ref, watchEffect } from "vue";
+import { useXenApiStore } from '@/stores/xen-api.store'
+import VncClient from '@novnc/novnc/core/rfb'
+import { promiseTimeout } from '@vueuse/shared'
+import { fibonacci } from 'iterable-backoff'
+import { computed, onBeforeUnmount, ref, watchEffect } from 'vue'
 
-const N_TOTAL_TRIES = 8;
-const FIBONACCI_MS_ARRAY: number[] = Array.from(
-  fibonacci().toMs().take(N_TOTAL_TRIES)
-);
+const N_TOTAL_TRIES = 8
+const FIBONACCI_MS_ARRAY: number[] = Array.from(fibonacci().toMs().take(N_TOTAL_TRIES))
 
 const props = defineProps<{
-  location: string;
-  isConsoleAvailable: boolean;
-}>();
+  location: string
+  isConsoleAvailable: boolean
+}>()
 
-const vmConsoleContainer = ref<HTMLDivElement>();
-const xenApiStore = useXenApiStore();
+const vmConsoleContainer = ref<HTMLDivElement>()
+const xenApiStore = useXenApiStore()
 const url = computed(() => {
   if (xenApiStore.currentSessionId == null) {
-    return;
+    return
   }
-  const _url = new URL(props.location);
-  _url.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  _url.searchParams.set("session_id", xenApiStore.currentSessionId);
-  return _url;
-});
+  const _url = new URL(props.location)
+  _url.protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  _url.searchParams.set('session_id', xenApiStore.currentSessionId)
+  return _url
+})
 
-let vncClient: VncClient | undefined;
-let nConnectionAttempts = 0;
+let vncClient: VncClient | undefined
+let nConnectionAttempts = 0
 
 const handleDisconnectionEvent = () => {
-  clearVncClient();
+  clearVncClient()
 
   if (props.isConsoleAvailable) {
-    nConnectionAttempts++;
+    nConnectionAttempts++
 
     if (nConnectionAttempts > N_TOTAL_TRIES) {
-      console.error(
-        "The number of reconnection attempts has been exceeded for:",
-        props.location
-      );
-      return;
+      console.error('The number of reconnection attempts has been exceeded for:', props.location)
+      return
     }
 
     console.error(
-      `Connection lost for the remote console: ${
-        props.location
-      }. New attempt in ${FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]}ms`
-    );
-    createVncConnection();
+      `Connection lost for the remote console: ${props.location}. New attempt in ${
+        FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
+      }ms`
+    )
+    createVncConnection()
   }
-};
-const handleConnectionEvent = () => (nConnectionAttempts = 0);
+}
+const handleConnectionEvent = () => (nConnectionAttempts = 0)
 
 const clearVncClient = () => {
   if (vncClient === undefined) {
-    return;
+    return
   }
 
-  vncClient.removeEventListener("disconnect", handleDisconnectionEvent);
-  vncClient.removeEventListener("connect", handleConnectionEvent);
+  vncClient.removeEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.removeEventListener('connect', handleConnectionEvent)
 
-  if (vncClient._rfbConnectionState !== "disconnected") {
-    vncClient.disconnect();
+  if (vncClient._rfbConnectionState !== 'disconnected') {
+    vncClient.disconnect()
   }
 
-  vncClient = undefined;
-};
+  vncClient = undefined
+}
 
 const createVncConnection = async () => {
   if (nConnectionAttempts !== 0) {
-    await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]);
+    await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1])
   }
 
   vncClient = new VncClient(vmConsoleContainer.value!, url.value!.toString(), {
-    wsProtocols: ["binary"],
-  });
-  vncClient.scaleViewport = true;
+    wsProtocols: ['binary'],
+  })
+  vncClient.scaleViewport = true
 
-  vncClient.addEventListener("disconnect", handleDisconnectionEvent);
-  vncClient.addEventListener("connect", handleConnectionEvent);
-};
+  vncClient.addEventListener('disconnect', handleDisconnectionEvent)
+  vncClient.addEventListener('connect', handleConnectionEvent)
+}
 
 watchEffect(() => {
-  if (
-    url.value === undefined ||
-    vmConsoleContainer.value === undefined ||
-    !props.isConsoleAvailable
-  ) {
-    return;
+  if (url.value === undefined || vmConsoleContainer.value === undefined || !props.isConsoleAvailable) {
+    return
   }
 
-  nConnectionAttempts = 0;
+  nConnectionAttempts = 0
 
-  clearVncClient();
-  createVncConnection();
-});
+  clearVncClient()
+  createVncConnection()
+})
 
 onBeforeUnmount(() => {
-  clearVncClient();
-});
+  clearVncClient()
+})
+
+defineExpose({
+  sendCtrlAltDel: () => vncClient?.sendCtrlAltDel(),
+})
 </script>
 
 <style lang="postcss" scoped>

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

@@ -7,20 +7,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useContext } from "@/composables/context.composable";
-import { DisabledContext } from "@/context";
-import type { RouteLocationRaw } from "vue-router";
-import UiTab from "@/components/ui/UiTab.vue";
+import { useContext } from '@/composables/context.composable'
+import { DisabledContext } from '@/context'
+import type { RouteLocationRaw } from 'vue-router'
+import UiTab from '@/components/ui/UiTab.vue'
 
 const props = withDefaults(
   defineProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean;
+    to: RouteLocationRaw
+    disabled?: boolean
   }>(),
   { disabled: undefined }
-);
+)
 
-const isDisabled = useContext(DisabledContext, () => props.disabled);
+const isDisabled = useContext(DisabledContext, () => props.disabled)
 </script>
 
 <style lang="postcss" scoped></style>

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

@@ -0,0 +1,33 @@
+<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

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
-  icon: IconDefinition;
-}>();
+  icon: IconDefinition
+}>()
 </script>
 
 <style lang="postcss" scoped>
@@ -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,72 +1,64 @@
 <template>
-  <div>
-    <template v-if="data !== undefined">
-      <div
-        v-for="item in computedData.sortedArray"
-        :key="item.id"
-        :class="{
-          warning: item.value > MIN_WARNING_VALUE,
-          error: item.value > MIN_DANGEROUS_VALUE,
-        }"
-        class="progress-item"
-      >
-        <UiProgressBar :value="item.value" color="custom" />
-        <UiProgressLegend
-          :label="item.label"
-          :value="item.badgeLabel ?? `${item.value}%`"
-        />
-      </div>
-      <slot :total-percent="computedData.totalPercentUsage" name="footer" />
-    </template>
-    <UiCardSpinner v-else />
+  <div class="usage-bar">
+    <div
+      v-for="item in computedData.sortedArray"
+      :key="item.id"
+      :class="{
+        warning: item.value > MIN_WARNING_VALUE,
+        error: item.value > MIN_DANGEROUS_VALUE,
+      }"
+      class="progress-item"
+    >
+      <UiProgressBar :value="item.value" color="custom" />
+      <UiProgressLegend :label="item.label" :value="item.badgeLabel ?? `${item.value}%`" />
+    </div>
+    <slot :total-percent="computedData.totalPercentUsage" name="footer" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
-import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
-import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
-import { computed } from "vue";
-
-interface Data {
-  id: string;
-  value: number;
-  label?: string;
-  badgeLabel?: string;
-  maxValue?: number;
-}
+import UiProgressBar from '@/components/ui/progress/UiProgressBar.vue'
+import UiProgressLegend from '@/components/ui/progress/UiProgressLegend.vue'
+import type { StatData } from '@/types/stat'
+import { computed } from 'vue'
 
 interface Props {
-  data?: Data[];
-  nItems?: number;
+  data: StatData[]
+  nItems?: number
 }
 
-const MIN_WARNING_VALUE = 80;
-const MIN_DANGEROUS_VALUE = 90;
+const MIN_WARNING_VALUE = 80
+const MIN_DANGEROUS_VALUE = 90
 
-const props = defineProps<Props>();
+const props = defineProps<Props>()
 
 const computedData = computed(() => {
-  const _data = props.data;
-  let totalPercentUsage = 0;
+  const _data = props.data
+  let totalPercentUsage = 0
   return {
     sortedArray: _data
-      ?.map((item) => {
-        const value = Math.round((item.value / (item.maxValue ?? 100)) * 100);
-        totalPercentUsage += value;
+      ?.map(item => {
+        const value = Math.round((item.value / (item.maxValue ?? 100)) * 100)
+        totalPercentUsage += value
         return {
           ...item,
           value,
-        };
+        }
       })
       .sort((item, nextItem) => nextItem.value - item.value)
       .slice(0, props.nItems ?? _data.length),
     totalPercentUsage,
-  };
-});
+  }
+})
 </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);
 }