adding default message for unexisting VMs in backups

In Settings/Logs modals : transform objects UUIDs into clickable links, leading
to the corresponding object page.
For objects that are not found, UUID can be copied to clipboard.

.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/{web-core,lite,web}/**/*.{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,8 +30,12 @@ pnpm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 .env
+*.tsbuildinfo
 
 # code coverage
 .nyc_output/
 coverage/
 .turbo/
+
+# https://node-tap.org/dot-tap-folder/
+.tap/

@vates/async-each/package.json

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

@vates/decorate-with/.USAGE.md

@@ -62,6 +62,42 @@ decorateClass(Foo, {
 })
 ```
 
+### `decorateObject(object, map)`
+
+Decorates an object the same way `decorateClass()` decorates a class:
+
+```js
+import { decorateObject } from '@vates/decorate-with'
+
+const object = {
+  get bar() {
+    // body
+  },
+
+  set bar(value) {
+    // body
+  },
+
+  baz() {
+    // body
+  },
+}
+
+decorateObject(object, {
+  // getter and/or setter
+  bar: {
+    // without arguments
+    get: lodash.memoize,
+
+    // with arguments
+    set: [lodash.debounce, 150],
+  },
+
+  // method (with or without arguments)
+  baz: lodash.curry,
+})
+```
+
 ### `perInstance(fn, ...args)`
 
 Helper to decorate the method by instance instead of for the whole class.

@vates/decorate-with/README.md

@@ -80,6 +80,42 @@ decorateClass(Foo, {
 })
 ```
 
+### `decorateObject(object, map)`
+
+Decorates an object the same way `decorateClass()` decorates a class:
+
+```js
+import { decorateObject } from '@vates/decorate-with'
+
+const object = {
+  get bar() {
+    // body
+  },
+
+  set bar(value) {
+    // body
+  },
+
+  baz() {
+    // body
+  },
+}
+
+decorateObject(object, {
+  // getter and/or setter
+  bar: {
+    // without arguments
+    get: lodash.memoize,
+
+    // with arguments
+    set: [lodash.debounce, 150],
+  },
+
+  // method (with or without arguments)
+  baz: lodash.curry,
+})
+```
+
 ### `perInstance(fn, ...args)`
 
 Helper to decorate the method by instance instead of for the whole class.

@vates/decorate-with/index.js

@@ -14,10 +14,13 @@ function applyDecorator(decorator, value) {
 }
 
 exports.decorateClass = exports.decorateMethodsWith = function decorateClass(klass, map) {
-  const { prototype } = klass
+  return decorateObject(klass.prototype, map)
+}
+
+function decorateObject(object, map) {
   for (const name of Object.keys(map)) {
     const decorator = map[name]
-    const descriptor = getOwnPropertyDescriptor(prototype, name)
+    const descriptor = getOwnPropertyDescriptor(object, name)
     if (typeof decorator === 'function' || Array.isArray(decorator)) {
       descriptor.value = applyDecorator(decorator, descriptor.value)
     } else {
@@ -30,10 +33,11 @@ exports.decorateClass = exports.decorateMethodsWith = function decorateClass(kla
       }
     }
 
-    defineProperty(prototype, name, descriptor)
+    defineProperty(object, name, descriptor)
   }
-  return klass
+  return object
 }
+exports.decorateObject = decorateObject
 
 exports.perInstance = function perInstance(fn, decorator, ...args) {
   const map = new WeakMap()

@vates/decorate-with/index.test.js

@@ -13,12 +13,15 @@ describe('decorateWith', () => {
     const expectedFn = Function.prototype
     const newFn = () => {}
 
-    const decorator = decorateWith(function wrapper(fn, ...args) {
-      assert.deepStrictEqual(fn, expectedFn)
-      assert.deepStrictEqual(args, expectedArgs)
+    const decorator = decorateWith(
+      function wrapper(fn, ...args) {
+        assert.deepStrictEqual(fn, expectedFn)
+        assert.deepStrictEqual(args, expectedArgs)
 
-      return newFn
-    }, ...expectedArgs)
+        return newFn
+      },
+      ...expectedArgs
+    )
 
     const descriptor = {
       configurable: true,

@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": "^15.0.1",
+    "sinon": "^17.0.1",
     "test": "^3.2.1"
   }
 }

@vates/fuse-vhd/.USAGE.md

@@ -0,0 +1,28 @@
+Mount a vhd generated by xen-orchestra to filesystem
+
+### Library
+
+```js
+import { mount } from 'fuse-vhd'
+
+// return a disposable, see promise-toolbox/Disposable
+// unmount automatically when disposable is disposed
+// in case of differencing VHD, it mounts the full chain
+await mount(handler, diskId, mountPoint)
+```
+
+### cli
+
+From the install folder :
+
+```
+cli.mjs <remoteUrl> <vhdPathInRemote> <mountPoint>
+```
+
+After installing the package
+
+```
+xo-fuse-vhd <remoteUrl> <vhdPathInRemote> <mountPoint>
+```
+
+remoteUrl can be found by using cli in `@xen-orchestra/fs` , for example a local remote will have a url like `file:///path/to/remote/root`

@vates/fuse-vhd/README.md

@@ -0,0 +1,59 @@
+<!-- DO NOT EDIT MANUALLY, THIS FILE HAS BEEN GENERATED -->
+
+# @vates/fuse-vhd
+
+[![Package Version](https://badgen.net/npm/v/@vates/fuse-vhd)](https://npmjs.org/package/@vates/fuse-vhd) ![License](https://badgen.net/npm/license/@vates/fuse-vhd) [![PackagePhobia](https://badgen.net/bundlephobia/minzip/@vates/fuse-vhd)](https://bundlephobia.com/result?p=@vates/fuse-vhd) [![Node compatibility](https://badgen.net/npm/node/@vates/fuse-vhd)](https://npmjs.org/package/@vates/fuse-vhd)
+
+## Install
+
+Installation of the [npm package](https://npmjs.org/package/@vates/fuse-vhd):
+
+```sh
+npm install --save @vates/fuse-vhd
+```
+
+## Usage
+
+Mount a vhd generated by xen-orchestra to filesystem
+
+### Library
+
+```js
+import { mount } from 'fuse-vhd'
+
+// return a disposable, see promise-toolbox/Disposable
+// unmount automatically when disposable is disposed
+// in case of differencing VHD, it mounts the full chain
+await mount(handler, diskId, mountPoint)
+```
+
+### cli
+
+From the install folder :
+
+```
+cli.mjs <remoteUrl> <vhdPathInRemote> <mountPoint>
+```
+
+After installing the package
+
+```
+xo-fuse-vhd <remoteUrl> <vhdPathInRemote> <mountPoint>
+```
+
+remoteUrl can be found by using cli in `@xen-orchestra/fs` , for example a local remote will have a url like `file:///path/to/remote/root`
+
+## Contributions
+
+Contributions are _very_ welcomed, either on the documentation or on
+the code.
+
+You may:
+
+- report any [issue](https://github.com/vatesfr/xen-orchestra/issues)
+  you've encountered;
+- fork and create a pull request.
+
+## License
+
+[ISC](https://spdx.org/licenses/ISC) © [Vates SAS](https://vates.fr)

@vates/fuse-vhd/cli.mjs

@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+
+import Disposable from 'promise-toolbox/Disposable'
+import { getSyncedHandler } from '@xen-orchestra/fs'
+
+import { mount } from './index.mjs'
+
+async function* main([remoteUrl, vhdPathInRemote, mountPoint]) {
+  if (mountPoint === undefined) {
+    throw new TypeError('missing arg: cli <remoteUrl> <vhdPathInRemote> <mountPoint>')
+  }
+  const handler = yield getSyncedHandler({ url: remoteUrl })
+  const mounted = await mount(handler, vhdPathInRemote, mountPoint)
+
+  let disposePromise
+  process.on('SIGINT', async () => {
+    // ensure single dispose
+    if (!disposePromise) {
+      disposePromise = mounted.dispose()
+    }
+    await disposePromise
+    process.exit()
+  })
+}
+
+Disposable.wrap(main)(process.argv.slice(2))

@vates/fuse-vhd/index.mjs

@@ -58,7 +58,7 @@ export const mount = Disposable.factory(async function* mount(handler, diskPath,
     },
   })
   return new Disposable(
-    () => fromCallback(() => fuse.unmount()),
-    fromCallback(() => fuse.mount())
+    () => fromCallback(cb => fuse.unmount(cb)),
+    fromCallback(cb => fuse.mount(cb))
   )
 })

@vates/fuse-vhd/package.json

@@ -19,10 +19,14 @@
   },
   "main": "./index.mjs",
   "dependencies": {
+    "@xen-orchestra/fs": "^4.1.3",
     "fuse-native": "^2.2.6",
     "lru-cache": "^7.14.0",
     "promise-toolbox": "^0.21.0",
-    "vhd-lib": "^4.5.0"
+    "vhd-lib": "^4.9.0"
+  },
+  "bin": {
+    "xo-fuse-vhd": "./cli.mjs"
   },
   "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/stream-reader/package.json

@@ -27,7 +27,7 @@
   "license": "ISC",
   "version": "0.1.0",
   "engines": {
-    "node": ">=10"
+    "node": ">=12.3"
   },
   "scripts": {
     "postversion": "npm publish --access public",

@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": "^15.0.1",
+    "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.42.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.12",
+  "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/VmsRemote.mjs

@@ -86,7 +86,12 @@ export const VmsRemote = class RemoteVmsBackupRunner extends Abstract {
             throw new Error(`Job mode ${job.mode} not implemented for mirror backup`)
           }
 
-          return runTask(taskStart, () => vmBackup.run())
+          return sourceRemoteAdapter
+            .listVmBackups(vmUuid, ({ mode }) => mode === job.mode)
+            .then(vmBackups => {
+              // avoiding to create tasks for empty directories
+              if (vmBackups.length > 0) return runTask(taskStart, () => vmBackup.run())
+            })
         }
         const { concurrency } = settings
         await asyncMapSettled(vmsUuids, !concurrency ? handleVm : limitConcurrency(concurrency)(handleVm))

@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/_AbstractRemote.mjs

@@ -4,6 +4,7 @@ import { Disposable } from 'promise-toolbox'
 import { getVmBackupDir } from '../../_getVmBackupDir.mjs'
 
 import { Abstract } from './_Abstract.mjs'
+import { extractIdsFromSimplePattern } from '../../extractIdsFromSimplePattern.mjs'
 
 export const AbstractRemote = class AbstractRemoteVmBackupRunner extends Abstract {
   constructor({
@@ -34,7 +35,8 @@ export const AbstractRemote = class AbstractRemoteVmBackupRunner extends Abstrac
     this._writers = writers
 
     const RemoteWriter = this._getRemoteWriter()
-    Object.entries(remoteAdapters).forEach(([remoteId, adapter]) => {
+    extractIdsFromSimplePattern(job.remotes).forEach(remoteId => {
+      const adapter = remoteAdapters[remoteId]
       const targetSettings = {
         ...settings,
         ...allSettings[remoteId],

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

@@ -31,6 +31,11 @@ export const AbstractXapi = class AbstractXapiVmBackupRunner extends Abstract {
       throw new Error('cannot backup a VM created by this very job')
     }
 
+    const currentOperations = Object.values(vm.current_operations)
+    if (currentOperations.some(_ => _ === 'migrate_send' || _ === 'pool_migrate')) {
+      throw new Error('cannot backup a VM currently being migrated')
+    }
+
     this.config = config
     this.job = job
     this.remoteAdapters = remoteAdapters
@@ -256,7 +261,15 @@ export const AbstractXapi = class AbstractXapiVmBackupRunner extends Abstract {
       }
 
       if (this._writers.size !== 0) {
-        await this._copy()
+        const { pool_migrate = null, migrate_send = null } = this._exportedVm.blocked_operations
+
+        const reason = 'VM migration is blocked during backup'
+        await this._exportedVm.update_blocked_operations({ pool_migrate: reason, migrate_send: reason })
+        try {
+          await this._copy()
+        } finally {
+          await this._exportedVm.update_blocked_operations({ pool_migrate, migrate_send })
+        }
       }
     } finally {
       if (startAfter) {

@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,20 @@ import mapValues from 'lodash/mapValues.js'
 import { dirname } from 'node:path'
 
 function formatVmBackup(backup) {
+  const { isVhdDifferencing, vmSnapshot } = backup
+
+  let differencingVhds
+  let dynamicVhds
+  const withMemory = vmSnapshot.suspend_VDI !== 'OpaqueRef:NULL'
+  // isVhdDifferencing is either undefined or an object
+  if (isVhdDifferencing !== undefined) {
+    differencingVhds = Object.values(isVhdDifferencing).filter(t => t).length
+    dynamicVhds = Object.values(isVhdDifferencing).filter(t => !t).length
+    if (withMemory) {
+      // the suspend VDI (memory) is always a dynamic
+      dynamicVhds -= 1
+    }
+  }
   return {
     disks:
       backup.vhds === undefined
@@ -25,6 +39,10 @@ function formatVmBackup(backup) {
       name_description: backup.vm.name_description,
       name_label: backup.vm.name_label,
     },
+
+    differencingVhds,
+    dynamicVhds,
+    withMemory,
   }
 }
 

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.42.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.5.0",
-    "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": "^15.0.1",
+    "sinon": "^17.0.1",
     "test": "^3.2.1",
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^3.1.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": "^15.0.1",
+    "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": "^15.0.4",
+    "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,28 +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"],
-  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,42 @@
 
 ## **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))
+- Ability to snapshot selected VMs (PR [#7021](https://github.com/vatesfr/xen-orchestra/pull/7021))
+- Add Patches to Pool Dashboard (PR [#6709](https://github.com/vatesfr/xen-orchestra/pull/6709))
+- Add remember me checkbox on the login page (PR [#7030](https://github.com/vatesfr/xen-orchestra/pull/7030))
+
 ## **0.1.3** (2023-09-01)
 
 - Add Alarms to Pool Dashboard (PR [#6976](https://github.com/vatesfr/xen-orchestra/pull/6976))

@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

@@ -1,8 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <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,65 +1,68 @@
 {
   "name": "@xen-orchestra/lite",
-  "version": "0.1.3",
+  "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",
-    "build-only": "GIT_HEAD=$(git rev-parse HEAD) vite build",
-    "deploy": "./scripts/deploy.sh",
+    "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": {
+    "@csstools/postcss-global-data": "^2.1.1",
+    "@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",
+    "@types/d3-time-format": "^4.0.3",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.7",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/math": "^10.7.1",
+    "@vueuse/shared": "^10.7.1",
+    "@xen-orchestra/web-core": "*",
     "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-color-function": "^4.1.0",
+    "postcss-custom-media": "^10.0.2",
+    "postcss-nested": "^6.0.1",
+    "typescript": "~5.3.3",
+    "vite": "^5.0.11",
+    "vue": "^3.4.13",
+    "vue-echarts": "^6.6.8",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5",
+    "vue-tsc": "^1.8.27",
+    "zx": "^7.2.3"
   },
   "private": true,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/lite",
@@ -75,6 +78,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,10 @@
+export default {
+  plugins: {
+    '@csstools/postcss-global-data': {
+      files: ['../web-core/lib/assets/css/.globals.pcss'],
+    },
+    'postcss-nested': {},
+    'postcss-custom-media': {},
+    'postcss-color-function': {},
+  },
+}

@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/agpl-3.0.txt

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 <template>
-  <UnreachableHostsModal />
   <div v-if="!$route.meta.hasStoryNav && !xenApiStore.isConnected">
     <AppLogin />
   </div>
@@ -13,82 +12,65 @@
     </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 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;
-if (link == null) {
-  link = document.createElement("link");
-  link.rel = "icon";
-  document.getElementsByTagName("head")[0].appendChild(link);
-}
-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)
   }
-);
-</script>
+)
 
-<style lang="postcss">
-@import "@/assets/base.css";
-</style>
+useUnreachableHosts()
+</script>
 
 <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/_responsive.pcss

@@ -1,2 +0,0 @@
-@custom-media --mobile (max-width: 1023px);
-@custom-media --desktop (min-width: 1024px);

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

@@ -1,96 +0,0 @@
-@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");
-
-body {
-  min-height: 100vh;
-  font-size: 1.3rem;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--color-blue-scale-100);
-}
-
-a {
-  color: var(--color-extra-blue-base);
-}
-
-code,
-code * {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-}
-
-.card-view {
-  padding: 1.2rem;
-  display: flex;
-  gap: 2rem;
-}
-
-.link {
-  text-decoration: underline;
-  color: var(--color-extra-blue-base);
-  cursor: pointer;
-}
-
-.link:hover {
-  color: var(--color-extra-blue-d20);
-}
-
-.link:active,
-.link.router-link-active {
-  color: var(--color-extra-blue-d40);
-}
-
-.link.router-link-active {
-  text-decoration: underline;
-}
-
-.context-color-success {
-  color: var(--color-green-infra-base);
-}
-
-.context-color-error {
-  color: var(--color-red-vates-base);
-}
-
-.context-color-warning {
-  color: var(--color-orange-world-base);
-}
-
-.context-color-info {
-  color: var(--color-extra-blue-base);
-}
-
-.context-background-color-success {
-  background-color: var(--background-color-green-infra);
-}
-
-.context-background-color-error {
-  background-color: var(--background-color-red-vates);
-}
-
-.context-background-color-warning {
-  background-color: var(--background-color-orange-world);
-}
-
-.context-background-color-info {
-  background-color: var(--background-color-extra-blue);
-}
-
-.context-border-color-success {
-  border-color: var(--color-green-infra-base);
-}
-
-.context-border-color-error {
-  border-color: var(--color-red-vates-base);
-}
-
-.context-border-color-warning {
-  border-color: var(--color-orange-world-base);
-}
-
-.context-border-color-info {
-  border-color: var(--color-extra-blue-base);
-}

@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,85 +0,0 @@
-:root {
-  --color-blue-scale-000: #000000;
-  --color-blue-scale-100: #1a1b38;
-  --color-blue-scale-200: #595a6f;
-  --color-blue-scale-300: #9899a5;
-  --color-blue-scale-400: #e5e5e7;
-  --color-blue-scale-500: #ffffff;
-
-  --color-extra-blue-l60: #d1cefb;
-  --color-extra-blue-l40: #bbb5f9;
-  --color-extra-blue-l20: #a39df8;
-  --color-extra-blue-base: #8f84ff;
-  --color-extra-blue-d20: #716ac6;
-  --color-extra-blue-d40: #554f94;
-  --color-extra-blue-d60: #383563;
-
-  --color-green-infra-l60: #b5dbca;
-  --color-green-infra-l40: #91c9b0;
-  --color-green-infra-l20: #70b795;
-  --color-green-infra-base: #55a57b;
-  --color-green-infra-d20: #438463;
-  --color-green-infra-d40: #32634a;
-  --color-green-infra-d60: #214231;
-
-  --color-orange-world-l60: #f2cda8;
-  --color-orange-world-l40: #ebb57d;
-  --color-orange-world-l20: #e59d56;
-  --color-orange-world-base: #ef7f18;
-  --color-orange-world-d20: #bf6612;
-  --color-orange-world-d40: #864f1f;
-  --color-orange-world-d60: #5a3514;
-
-  --color-red-vates-l60: #dda5a7;
-  --color-red-vates-l40: #ce787c;
-  --color-red-vates-l20: #bf4f51;
-  --color-red-vates-base: #be1621;
-  --color-red-vates-d20: #8e2221;
-  --color-red-vates-d40: #6a1919;
-  --color-red-vates-d60: #471010;
-
-  --color-grayscale-200: #585757;
-
-  --background-color-primary: #ffffff;
-  --background-color-secondary: #f6f6f7;
-  --background-color-extra-blue: #f4f3fe;
-  --background-color-green-infra: #ecf5f2;
-  --background-color-orange-world: #fbf2e9;
-  --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),
-    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),
-    0 2.4rem 3.8rem rgba(20, 20, 30, 0.04);
-}
-
-:root.dark {
-  --color-blue-scale-000: #ffffff;
-  --color-blue-scale-100: #e5e5e7;
-  --color-blue-scale-200: #9899a5;
-  --color-blue-scale-300: #595a6f;
-  --color-blue-scale-400: #1a1b38;
-  --color-blue-scale-500: #000000;
-
-  --background-color-primary: #14141d;
-  --background-color-secondary: #17182a;
-  --background-color-extra-blue: #35335d;
-  --background-color-green-infra: #243b3d;
-  --background-color-orange-world: #493328;
-  --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),
-    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),
-    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>
@@ -61,14 +51,14 @@ const openSettings = () => router.push({ name: "settings" });
   display: flex;
   align-items: center;
   padding: 1rem;
-  color: var(--color-blue-scale-100);
+  color: var(--color-grey-100);
   border: none;
   border-radius: 0.8rem;
   background-color: var(--background-color-secondary);
   gap: 0.8rem;
 
   &:disabled {
-    color: var(--color-blue-scale-400);
+    color: var(--color-grey-500);
   }
 
   &:not(:disabled) {
@@ -82,7 +72,7 @@ const openSettings = () => router.push({ name: "settings" });
 
     &:active,
     &.active {
-      color: var(--color-extra-blue-base);
+      color: var(--color-purple-base);
     }
   }
 }
@@ -96,6 +86,6 @@ const openSettings = () => router.push({ name: "settings" });
 }
 
 .menu-item-logout {
-  color: var(--color-red-vates-base);
+  color: var(--color-red-base);
 }
 </style>

@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,18 +44,28 @@ 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);
+  border-bottom: 0.1rem solid var(--color-grey-500);
   background-color: var(--background-color-secondary);
 
   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,76 +2,117 @@
   <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>
-      <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 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 { 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'
 
-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);
+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 focusPasswordInput = () => passwordRef.value?.focus();
+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 isHostIsSlaveErr = (err: XenApiError | undefined) => err?.message === 'HOST_IS_SLAVE'
 
 onMounted(() => {
-  xenApiStore.reconnect();
-  focusPasswordInput();
-});
+  if (rememberMe.value) {
+    xenApiStore.reconnect()
+  } else {
+    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>
 
 <style lang="postcss" scoped>
+.remember-me-label {
+  cursor: pointer;
+  display: flex;
+  margin: 1rem;
+  width: fit-content;
+  & .form-checkbox {
+    margin: auto 1rem auto auto;
+  }
+}
+
 .form-container {
   display: flex;
   align-items: center;
@@ -87,12 +128,15 @@ form {
   font-size: 2rem;
   min-width: 30em;
   max-width: 100%;
-  align-items: center;
   flex-direction: column;
   justify-content: center;
   margin: 0 auto;
   padding: 8.5rem;
   background-color: var(--background-color-secondary);
+
+  .error {
+    color: var(--color-red-base);
+  }
 }
 
 h1 {
@@ -104,7 +148,7 @@ h1 {
 
 img {
   width: 40rem;
-  margin-bottom: 5rem;
+  margin: auto auto 5rem auto;
 }
 
 input {
@@ -112,12 +156,12 @@ input {
   max-width: 100%;
   margin-bottom: 1rem;
   padding: 1rem 1.5rem;
-  border: 1px solid var(--color-blue-scale-400);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.8rem;
   background-color: white;
 }
 
 button {
-  margin-top: 2rem;
+  margin: 2rem auto;
 }
 </style>

@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>
@@ -59,7 +60,7 @@ useEventListener(
     }
 
     code:not(.hljs-code) {
-      background-color: var(--background-color-extra-blue);
+      background-color: var(--background-color-purple-10);
       padding: 0.3rem 0.6rem;
       border-radius: 0.6rem;
     }
@@ -80,12 +81,12 @@ useEventListener(
       }
 
       thead th {
-        border-bottom: 2px solid var(--color-blue-scale-400);
+        border-bottom: 2px solid var(--color-grey-500);
         background-color: var(--background-color-secondary);
       }
 
       tbody td {
-        border-bottom: 1px solid var(--color-blue-scale-400);
+        border-bottom: 1px solid var(--color-grey-500);
       }
     }
 
@@ -102,11 +103,11 @@ useEventListener(
       background-color: transparent;
 
       &:hover {
-        color: var(--color-extra-blue-base);
+        color: var(--color-purple-base);
       }
 
       &:active {
-        color: var(--color-extra-blue-d20);
+        color: var(--color-purple-d20);
       }
     }
   }

@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,9 +43,9 @@ 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);
+  border-right: 1px solid var(--color-grey-500);
   background-color: var(--background-color-primary);
 
   &.collapsible {

@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>
@@ -43,9 +41,9 @@ watchEffect(() => {
   display: inline-flex;
   padding: 0.3125em 0.5em;
   pointer-events: none;
-  color: var(--color-blue-scale-500);
+  color: var(--color-grey-600);
   border-radius: 0.5em;
-  background-color: var(--color-blue-scale-100);
+  background-color: var(--color-grey-100);
   z-index: 2;
 }
 
@@ -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,9 +142,9 @@ 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);
+  background-color: var(--color-grey-100);
 }
 </style>

@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,191 +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-if="isOpen"
-    :icon="faFilter"
-    @submit.prevent="handleSubmit"
-    @close="handleCancel"
-  >
-    <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 #buttons>
-      <UiButton transparent @click="addNewFilter">
-        {{ $t("add-or") }}
-      </UiButton>
-      <UiButton :disabled="!isFilterValid" type="submit">
-        {{ $t(editedFilter ? "update" : "add") }}
-      </UiButton>
-      <UiButton outlined @click="handleCancel">
-        {{ $t("cancel") }}
-      </UiButton>
-    </template>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import { Or, parse } from "complex-matcher";
-import { computed, ref } from "vue";
-import type { Filters, NewFilter } from "@/types/filter";
-import { faFilter, faPlus } from "@fortawesome/free-solid-svg-icons";
-import CollectionFilterRow from "@/components/CollectionFilterRow.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 UiModal from "@/components/ui/UiModal.vue";
-import useModal from "@/composables/modal.composable";
-import { getFilterIcon } from "@/libs/utils";
+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();
-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();
-};
-
-const handleCancel = () => {
-  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;
-}
-</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,75 +117,70 @@ 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>
 .collection-filter-row {
   display: flex;
   align-items: center;
-  padding: 1rem 0;
   border-bottom: 1px solid var(--background-color-secondary);
   gap: 1rem;
 
@@ -242,4 +203,8 @@ const valueInputAfter = computed(() =>
 .form-widget-advanced {
   flex: 1;
 }
+
+.ui-action-button:first-of-type {
+  margin-left: auto;
+}
 </style>

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

@@ -12,103 +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-if="isOpen"
-    :icon="faSort"
-    @submit.prevent="handleSubmit"
-    @close="handleCancel"
-  >
-    <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 #buttons>
-      <UiButton type="submit">{{ $t("add") }}</UiButton>
-      <UiButton outlined @click="handleCancel">
-        {{ $t("cancel") }}
-      </UiButton>
-    </template>
-  </UiModal>
 </template>
 
 <script lang="ts" setup>
-import FormWidget from "@/components/FormWidget.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 UiIcon from "@/components/ui/icon/UiIcon.vue";
-import UiModal from "@/components/ui/UiModal.vue";
-import useModal from "@/composables/modal.composable";
-import type { ActiveSorts, Sorts } from "@/types/sort";
-import {
-  faCaretDown,
-  faCaretUp,
-  faPlus,
-  faSort,
-} 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();
+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();
-};
-
-const handleCancel = () => {
-  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

@@ -28,13 +28,9 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="item in filteredAndSortedCollection" :key="item[idProperty]">
+      <tr v-for="item in filteredAndSortedCollection" :key="item.$ref">
         <td v-if="isSelectable">
-          <input
-            v-model="selected"
-            :value="item[props.idProperty]"
-            type="checkbox"
-          />
+          <input v-model="selected" :value="item.$ref" type="checkbox" />
         </td>
         <slot :item="item" name="body-row" />
       </tr>
@@ -42,62 +38,53 @@
   </UiTable>
 </template>
 
-<script lang="ts" setup>
-import { computed, toRef, watch } from "vue";
-import type { Filters } from "@/types/filter";
-import type { Sorts } from "@/types/sort";
-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";
+<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'
 
 const props = defineProps<{
-  modelValue?: string[];
-  availableFilters?: Filters;
-  availableSorts?: Sorts;
-  collection: Record<string, any>[];
-  idProperty: string;
-}>();
+  modelValue?: T['$ref'][]
+  availableFilters?: Filters
+  availableSorts?: Sorts
+  collection: T[]
+}>()
 
 const emit = defineEmits<{
-  (event: "update:modelValue", selectedRefs: string[]): 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[props.idProperty])
-);
+const usableRefs = computed(() => props.collection.map(item => item.$ref))
 
-const selectableRefs = computed(() =>
-  filteredAndSortedCollection.value.map((item) => item[props.idProperty])
-);
+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>
@@ -55,14 +54,14 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   align-items: stretch;
   overflow: hidden;
   padding: 0 0.7rem;
-  border: 1px solid var(--color-blue-scale-400);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.8rem;
-  background-color: var(--color-blue-scale-500);
+  background-color: var(--color-grey-600);
   box-shadow: var(--shadow-100);
   gap: 0.1rem;
 
   &:focus-within {
-    outline: 1px solid var(--color-extra-blue-l40);
+    outline: 1px solid var(--color-purple-l40);
   }
 }
 
@@ -72,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
 }
 
 .form-widget:hover .widget {
-  border-color: var(--color-extra-blue-l60);
+  border-color: var(--color-purple-l60);
 }
 
 .element {
@@ -94,8 +93,8 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   font-size: inherit;
   border: none;
   outline: none;
-  color: var(--color-blue-scale-100);
-  background-color: var(--color-blue-scale-500);
+  color: var(--color-grey-100);
+  background-color: var(--color-grey-600);
   flex: 1;
 
   &:disabled {
@@ -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;
@@ -135,7 +134,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
 
   &:disabled {
     cursor: not-allowed;
-    color: var(--color-blue-scale-200);
+    color: var(--color-grey-200);
   }
 }
 </style>

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

@@ -0,0 +1,69 @@
+<template>
+  <UiCardSpinner v-if="!areSomeLoaded" />
+  <UiTable v-else class="hosts-patches-table" :class="{ desktop: isDesktop }">
+    <tr v-for="patch in sortedPatches" :key="patch.$id">
+      <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'
+
+const props = defineProps<{
+  patches: XenApiPatchWithHostRefs[]
+  hasMultipleHosts: boolean
+  areAllLoaded: boolean
+  areSomeLoaded: boolean
+}>()
+
+const sortedPatches = computed(() =>
+  [...props.patches].sort((patch1, patch2) => {
+    if (patch1.changelog == null) {
+      return 1
+    } else if (patch2.changelog == null) {
+      return -1
+    }
+
+    return patch1.changelog.date - patch2.changelog.date
+  })
+)
+
+const { isDesktop } = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.hosts-patches-table.desktop {
+  max-width: 45rem;
+}
+
+.counter {
+  font-size: 1rem;
+}
+</style>