feat(lite): Replace FontAwesomeIcon with UiIcon

.gitignore

@@ -34,4 +34,3 @@ yarn-error.log.*
 # code coverage
 .nyc_output/
 coverage/
-.turbo/

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged

@vates/async-each/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/async-each):
 
-```sh
-npm install --save @vates/async-each
+```
+> npm install --save @vates/async-each
 ```
 
 ## Usage

@vates/async-each/package.json

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

@vates/cached-dns.lookup/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/cached-dns.lookup):
 
-```sh
-npm install --save @vates/cached-dns.lookup
+```
+> npm install --save @vates/cached-dns.lookup
 ```
 
 ## Usage

@vates/coalesce-calls/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/coalesce-calls):
 
-```sh
-npm install --save @vates/coalesce-calls
+```
+> npm install --save @vates/coalesce-calls
 ```
 
 ## Usage

@vates/compose/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/compose):
 
-```sh
-npm install --save @vates/compose
+```
+> npm install --save @vates/compose
 ```
 
 ## Usage

@vates/decorate-with/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/decorate-with):
 
-```sh
-npm install --save @vates/decorate-with
+```
+> npm install --save @vates/decorate-with
 ```
 
 ## Usage

@vates/disposable/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/disposable):
 
-```sh
-npm install --save @vates/disposable
+```
+> npm install --save @vates/disposable
 ```
 
 ## Usage

@vates/disposable/package.json

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

@vates/event-listeners-manager/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/event-listeners-manager):
 
-```sh
-npm install --save @vates/event-listeners-manager
+```
+> npm install --save @vates/event-listeners-manager
 ```
 
 ## Usage

@vates/fuse-vhd/package.json

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

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

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/multi-key-map):
 
-```sh
-npm install --save @vates/multi-key-map
+```
+> npm install --save @vates/multi-key-map
 ```
 
 ## Usage

@vates/nbd-client/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/nbd-client):
 
-```sh
-npm install --save @vates/nbd-client
+```
+> npm install --save @vates/nbd-client
 ```
 
 ## Usage

@vates/nbd-client/index.js

@@ -16,7 +16,6 @@ const {
   NBD_REPLY_MAGIC,
   NBD_REQUEST_MAGIC,
   OPTS_MAGIC,
-  NBD_CMD_DISC,
 } = require('./constants.js')
 const { fromCallback } = require('promise-toolbox')
 const { readChunkStrict } = require('@vates/read-chunk')
@@ -90,11 +89,6 @@ module.exports = class NbdClient {
   }
 
   async disconnect() {
-    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()
   }
 

@vates/nbd-client/package.json

@@ -13,7 +13,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "1.0.1",
+  "version": "1.0.0",
   "engines": {
     "node": ">=14.0"
   },
@@ -22,7 +22,7 @@
     "@vates/read-chunk": "^1.0.1",
     "@xen-orchestra/async-map": "^0.1.2",
     "promise-toolbox": "^0.21.0",
-    "xen-api": "^1.2.5"
+    "xen-api": "^1.2.2"
   },
   "devDependencies": {
     "tap": "^16.3.0",

@vates/otp/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/otp):
 
-```sh
-npm install --save @vates/otp
+```
+> npm install --save @vates/otp
 ```
 
 ## Usage

@vates/parse-duration/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/parse-duration):
 
-```sh
-npm install --save @vates/parse-duration
+```
+> npm install --save @vates/parse-duration
 ```
 
 ## Usage

@vates/predicates/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/predicates):
 
-```sh
-npm install --save @vates/predicates
+```
+> npm install --save @vates/predicates
 ```
 
 ## Usage

@vates/read-chunk/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/read-chunk):
 
-```sh
-npm install --save @vates/read-chunk
+```
+> npm install --save @vates/read-chunk
 ```
 
 ## Usage

@vates/read-chunk/index.js

@@ -1,12 +1,5 @@
 'use strict'
 
-/**
- * Read a chunk of data from a stream.
- *
- * @param {Readable} stream - A readable stream to read from.
- * @param {number} size - The number of bytes to read.
- * @returns {Promise<Buffer|null>} - A Promise that resolves to a Buffer of up to size bytes if available, or null if end of stream is reached. The Promise is rejected if there is an error while reading from the stream.
- */
 const readChunk = (stream, size) =>
   stream.closed || stream.readableEnded
     ? Promise.resolve(null)
@@ -40,13 +33,6 @@ const readChunk = (stream, size) =>
       })
 exports.readChunk = readChunk
 
-/**
- * Read a chunk of data from a stream.
- *
- * @param {Readable} stream - A readable stream to read from.
- * @param {number} size - The number of bytes to read.
- * @returns {Promise<Buffer>} - A Promise that resolves to a Buffer of size bytes. The Promise is rejected if there is an error while reading from the stream.
- */
 exports.readChunkStrict = async function readChunkStrict(stream, size) {
   const chunk = await readChunk(stream, size)
   if (chunk === null) {

@vates/task/.USAGE.md

@@ -1,54 +0,0 @@
-```js
-import { Task } from '@vates/task'
-
-const task = new Task({
-  name: 'my task',
-
-  // if defined, a new detached task is created
-  //
-  // if not defined and created inside an existing task, the new task is considered a subtask
-  onProgress(event) {
-    // this function is called each time this task or one of it's subtasks change state
-    const { id, timestamp, type } = event
-    if (type === 'start') {
-      const { name, parentId } = event
-    } else if (type === 'end') {
-      const { result, status } = event
-    } else if (type === 'info' || type === 'warning') {
-      const { data, message } = event
-    } else if (type === 'property') {
-      const { name, value } = event
-    }
-  },
-})
-
-// this field is settable once before being observed
-task.id
-
-task.status
-await task.abort()
-
-// if fn rejects, the task will be marked as failed
-const result = await task.runInside(fn)
-
-// if fn rejects, the task will be marked as failed
-// if fn resolves, the task will be marked as succeeded
-const result = await task.run(fn)
-
-// the abort signal of the current task if any, otherwise is `undefined`
-Task.abortSignal
-
-// sends an info on the current task if any, otherwise does nothing
-Task.info(message, data)
-
-// sends an info on the current task if any, otherwise does nothing
-Task.warning(message, data)
-
-// attaches a property to the current task if any, otherwise does nothing
-//
-// the latest value takes precedence
-//
-// examples:
-// - progress
-Task.set(property, value)
-```

@vates/task/.npmignore

@@ -1 +0,0 @@
-../../scripts/npmignore

@vates/task/README.md

@@ -1,85 +0,0 @@
-<!-- DO NOT EDIT MANUALLY, THIS FILE HAS BEEN GENERATED -->
-
-# @vates/task
-
-[![Package Version](https://badgen.net/npm/v/@vates/task)](https://npmjs.org/package/@vates/task) ![License](https://badgen.net/npm/license/@vates/task) [![PackagePhobia](https://badgen.net/bundlephobia/minzip/@vates/task)](https://bundlephobia.com/result?p=@vates/task) [![Node compatibility](https://badgen.net/npm/node/@vates/task)](https://npmjs.org/package/@vates/task)
-
-## Install
-
-Installation of the [npm package](https://npmjs.org/package/@vates/task):
-
-```sh
-npm install --save @vates/task
-```
-
-## Usage
-
-```js
-import { Task } from '@vates/task'
-
-const task = new Task({
-  name: 'my task',
-
-  // if defined, a new detached task is created
-  //
-  // if not defined and created inside an existing task, the new task is considered a subtask
-  onProgress(event) {
-    // this function is called each time this task or one of it's subtasks change state
-    const { id, timestamp, type } = event
-    if (type === 'start') {
-      const { name, parentId } = event
-    } else if (type === 'end') {
-      const { result, status } = event
-    } else if (type === 'info' || type === 'warning') {
-      const { data, message } = event
-    } else if (type === 'property') {
-      const { name, value } = event
-    }
-  },
-})
-
-// this field is settable once before being observed
-task.id
-
-task.status
-await task.abort()
-
-// if fn rejects, the task will be marked as failed
-const result = await task.runInside(fn)
-
-// if fn rejects, the task will be marked as failed
-// if fn resolves, the task will be marked as succeeded
-const result = await task.run(fn)
-
-// the abort signal of the current task if any, otherwise is `undefined`
-Task.abortSignal
-
-// sends an info on the current task if any, otherwise does nothing
-Task.info(message, data)
-
-// sends an info on the current task if any, otherwise does nothing
-Task.warning(message, data)
-
-// attaches a property to the current task if any, otherwise does nothing
-//
-// the latest value takes precedence
-//
-// examples:
-// - progress
-Task.set(property, value)
-```
-
-## 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/task/index.js

@@ -1,184 +0,0 @@
-'use strict'
-
-const assert = require('node:assert').strict
-const { AsyncLocalStorage } = require('node:async_hooks')
-
-// define a read-only, non-enumerable, non-configurable property
-function define(object, property, value) {
-  Object.defineProperty(object, property, { value })
-}
-
-const noop = Function.prototype
-
-const ABORTED = 'aborted'
-const ABORTING = 'aborting'
-const FAILURE = 'failure'
-const PENDING = 'pending'
-const SUCCESS = 'success'
-exports.STATUS = { ABORTED, ABORTING, FAILURE, PENDING, SUCCESS }
-
-const asyncStorage = new AsyncLocalStorage()
-const getTask = () => asyncStorage.getStore()
-
-exports.Task = class Task {
-  static get abortSignal() {
-    const task = getTask()
-    if (task !== undefined) {
-      return task.#abortController.signal
-    }
-  }
-
-  static info(message, data) {
-    const task = getTask()
-    if (task !== undefined) {
-      task.#emit('info', { data, message })
-    }
-  }
-
-  static run(opts, fn) {
-    return new this(opts).run(fn)
-  }
-
-  static set(name, value) {
-    const task = getTask()
-    if (task !== undefined) {
-      task.#emit('property', { name, value })
-    }
-  }
-
-  static warning(message, data) {
-    const task = getTask()
-    if (task !== undefined) {
-      task.#emit('warning', { data, message })
-    }
-  }
-
-  static wrap(opts, fn) {
-    // compatibility with @decorateWith
-    if (typeof fn !== 'function') {
-      ;[fn, opts] = [opts, fn]
-    }
-
-    return function taskRun() {
-      return Task.run(typeof opts === 'function' ? opts.apply(this, arguments) : opts, () => fn.apply(this, arguments))
-    }
-  }
-
-  #abortController = new AbortController()
-  #onProgress
-  #parent
-
-  get id() {
-    return (this.id = Math.random().toString(36).slice(2))
-  }
-  set id(value) {
-    define(this, 'id', value)
-  }
-
-  #startData
-
-  #status = PENDING
-  get status() {
-    return this.#status
-  }
-
-  constructor({ name, onProgress }) {
-    this.#startData = { name }
-
-    if (onProgress !== undefined) {
-      this.#onProgress = onProgress
-    } else {
-      const parent = getTask()
-      if (parent !== undefined) {
-        this.#parent = parent
-
-        const { signal } = parent.#abortController
-        signal.addEventListener('abort', () => {
-          this.#abortController.abort(signal.reason)
-        })
-
-        this.#onProgress = parent.#onProgress
-        this.#startData.parentId = parent.id
-      } else {
-        this.#onProgress = noop
-      }
-    }
-
-    const { signal } = this.#abortController
-    signal.addEventListener('abort', () => {
-      if (this.status === PENDING) {
-        this.#status = this.#running ? ABORTING : ABORTED
-      }
-    })
-  }
-
-  abort(reason) {
-    this.#abortController.abort(reason)
-  }
-
-  #emit(type, data) {
-    data.id = this.id
-    data.timestamp = Date.now()
-    data.type = type
-    this.#onProgress(data)
-  }
-
-  #handleMaybeAbortion(result) {
-    if (this.status === ABORTING) {
-      this.#status = ABORTED
-      this.#emit('end', { status: ABORTED, result })
-      return true
-    }
-
-    return false;
-  }
-
-  async run(fn) {
-    const result = await this.runInside(fn)
-    if (this.status === PENDING) {
-      this.#status = SUCCESS
-      this.#emit('end', { status: SUCCESS, result })
-    }
-    return result
-  }
-
-  #running = false
-  async runInside(fn) {
-    assert.equal(this.status, PENDING)
-    assert.equal(this.#running, false)
-    this.#running = true
-
-    const startData = this.#startData
-    if (startData !== undefined) {
-      this.#startData = undefined
-      this.#emit('start', startData)
-    }
-
-    try {
-      const result = await asyncStorage.run(this, fn)
-      this.#handleMaybeAbortion(result)
-      this.#running = false
-      return result
-    } catch (result) {
-      if (!this.#handleMaybeAbortion(result)) {
-        this.#status = FAILURE
-        this.#emit('end', { status: FAILURE, result })
-      }
-      throw result
-    }
-  }
-
-  wrap(fn) {
-    const task = this
-    return function taskRun() {
-      return task.run(() => fn.apply(this, arguments))
-    }
-  }
-
-  wrapInside(fn) {
-    const task = this
-    return function taskRunInside() {
-      return task.runInside(() => fn.apply(this, arguments))
-    }
-  }
-}

@vates/task/package.json

@@ -1,23 +0,0 @@
-{
-  "private": false,
-  "name": "@vates/task",
-  "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@vates/task",
-  "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
-  "repository": {
-    "directory": "@vates/task",
-    "type": "git",
-    "url": "https://github.com/vatesfr/xen-orchestra.git"
-  },
-  "author": {
-    "name": "Vates SAS",
-    "url": "https://vates.fr"
-  },
-  "license": "ISC",
-  "version": "0.0.1",
-  "engines": {
-    "node": ">=14"
-  },
-  "scripts": {
-    "postversion": "npm publish --access public"
-  }
-}

@vates/toggle-scripts/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/toggle-scripts):
 
-```sh
-npm install --save @vates/toggle-scripts
+```
+> npm install --save @vates/toggle-scripts
 ```
 
 ## Usage

@vates/toggle-scripts/index.js

@@ -30,7 +30,6 @@ if (args.length === 0) {
 
 ${name} v${version}
 `)
-  // eslint-disable-next-line n/no-process-exit
   process.exit()
 }
 

@xen-orchestra/async-map/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/async-map):
 
-```sh
-npm install --save @xen-orchestra/async-map
+```
+> npm install --save @xen-orchestra/async-map
 ```
 
 ## Usage

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

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

@xen-orchestra/audit-core/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/audit-core):
 
-```sh
-npm install --save @xen-orchestra/audit-core
+```
+> npm install --save @xen-orchestra/audit-core
 ```
 
 ## Contributions

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

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.2.3",
+  "version": "0.2.1",
   "engines": {
     "node": ">=14"
   },
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@vates/decorate-with": "^2.0.0",
-    "@xen-orchestra/log": "^0.6.0",
+    "@xen-orchestra/log": "^0.4.0",
     "golike-defer": "^0.5.1",
     "object-hash": "^2.0.1"
   },

@xen-orchestra/babel-config/index.js

@@ -5,6 +5,7 @@ const PRESETS_RE = /^@babel\/preset-.+$/
 
 const NODE_ENV = process.env.NODE_ENV || 'development'
 const __PROD__ = NODE_ENV === 'production'
+const __TEST__ = NODE_ENV === 'test'
 
 const configs = {
   '@babel/plugin-proposal-decorators': {
@@ -14,7 +15,7 @@ const configs = {
     proposal: 'minimal',
   },
   '@babel/preset-env': {
-    debug: __PROD__,
+    debug: !__TEST__,
 
     // disabled until https://github.com/babel/babel/issues/8323 is resolved
     // loose: true,

@xen-orchestra/backups-cli/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/backups-cli):
 
-```sh
-npm install --global @xen-orchestra/backups-cli
+```
+> npm install --global @xen-orchestra/backups-cli
 ```
 
 ## Usage

@xen-orchestra/backups-cli/_composeCommands.js

@@ -1,10 +1,11 @@
-import { readFileSync } from 'fs'
-import getopts from 'getopts'
+'use strict'
 
-const { version } = JSON.parse(readFileSync(new URL('package.json', import.meta.url)))
+const getopts = require('getopts')
 
-export function composeCommands(commands) {
-  return async function (args, prefix) {
+const { version } = require('./package.json')
+
+module.exports = commands =>
+  async function (args, prefix) {
     const opts = getopts(args, {
       alias: {
         help: 'h',
@@ -29,6 +30,5 @@ xo-backups v${version}
       return
     }
 
-    return (await command.default)(args.slice(1), prefix + ' ' + commandName)
+    return command.main(args.slice(1), prefix + ' ' + commandName)
   }
-}

@xen-orchestra/backups-cli/_fs.js

@@ -1,9 +1,11 @@
-import fs from 'fs/promises'
-import { dirname } from 'path'
+'use strict'
 
-export * from 'fs/promises'
+const { dirname } = require('path')
 
-export const getSize = path =>
+const fs = require('promise-toolbox/promisifyAll')(require('fs'))
+module.exports = fs
+
+fs.getSize = path =>
   fs.stat(path).then(
     _ => _.size,
     error => {
@@ -14,7 +16,7 @@ export const getSize = path =>
     }
   )
 
-export async function mktree(path) {
+fs.mktree = async function mkdirp(path) {
   try {
     await fs.mkdir(path)
   } catch (error) {
@@ -24,8 +26,8 @@ export async function mktree(path) {
       return
     }
     if (code === 'ENOENT') {
-      await mktree(dirname(path))
-      return mktree(path)
+      await mkdirp(dirname(path))
+      return mkdirp(path)
     }
     throw error
   }
@@ -35,7 +37,7 @@ export async function mktree(path) {
 //   - single param for direct use in `Array#map`
 //   - files are prefixed with directory path
 // - safer: returns empty array if path is missing or not a directory
-export const readdir2 = path =>
+fs.readdir2 = path =>
   fs.readdir(path).then(
     entries => {
       entries.forEach((entry, i) => {
@@ -57,7 +59,7 @@ export const readdir2 = path =>
     }
   )
 
-export async function symlink2(target, path) {
+fs.symlink2 = async (target, path) => {
   try {
     await fs.symlink(target, path)
   } catch (error) {

@xen-orchestra/backups-cli/commands/clean-vms.js

@@ -0,0 +1,40 @@
+'use strict'
+
+// -----------------------------------------------------------------------------
+
+const asyncMap = require('lodash/curryRight')(require('@xen-orchestra/async-map').asyncMap)
+const getopts = require('getopts')
+const { RemoteAdapter } = require('@xen-orchestra/backups/RemoteAdapter')
+const { resolve } = require('path')
+
+const adapter = new RemoteAdapter(require('@xen-orchestra/fs').getHandler({ url: 'file://' }))
+
+module.exports = async function main(args) {
+  const { _, fix, remove, merge } = getopts(args, {
+    alias: {
+      fix: 'f',
+      remove: 'r',
+      merge: 'm',
+    },
+    boolean: ['fix', 'merge', 'remove'],
+    default: {
+      merge: false,
+      remove: false,
+    },
+  })
+
+  await asyncMap(_, async vmDir => {
+    vmDir = resolve(vmDir)
+    try {
+      await adapter.cleanVm(vmDir, {
+        fixMetadata: fix,
+        remove,
+        merge,
+        logInfo: (...args) => console.log(...args),
+        logWarn: (...args) => console.warn(...args),
+      })
+    } catch (error) {
+      console.error('adapter.cleanVm', vmDir, error)
+    }
+  })
+}

@xen-orchestra/backups-cli/commands/clean-vms.mjs

@@ -1,38 +0,0 @@
-import { asyncMap } from '@xen-orchestra/async-map'
-import { RemoteAdapter } from '@xen-orchestra/backups/RemoteAdapter.js'
-import { getSyncedHandler } from '@xen-orchestra/fs'
-import getopts from 'getopts'
-import { basename, dirname } from 'path'
-import Disposable from 'promise-toolbox/Disposable'
-import { pathToFileURL } from 'url'
-
-export default async function cleanVms(args) {
-  const { _, fix, remove, merge } = getopts(args, {
-    alias: {
-      fix: 'f',
-      remove: 'r',
-      merge: 'm',
-    },
-    boolean: ['fix', 'merge', 'remove'],
-    default: {
-      merge: false,
-      remove: false,
-    },
-  })
-
-  await asyncMap(_, vmDir =>
-    Disposable.use(getSyncedHandler({ url: pathToFileURL(dirname(vmDir)).href }), async handler => {
-      try {
-        await new RemoteAdapter(handler).cleanVm(basename(vmDir), {
-          fixMetadata: fix,
-          remove,
-          merge,
-          logInfo: (...args) => console.log(...args),
-          logWarn: (...args) => console.warn(...args),
-        })
-      } catch (error) {
-        console.error('adapter.cleanVm', vmDir, error)
-      }
-    })
-  )
-}

@xen-orchestra/backups-cli/commands/create-symlink-index.js

@@ -1,10 +1,13 @@
-import { mktree, readdir2, readFile, symlink2 } from '../_fs.mjs'
-import { asyncMap } from '@xen-orchestra/async-map'
-import filenamify from 'filenamify'
-import get from 'lodash/get.js'
-import { dirname, join, relative } from 'path'
+'use strict'
 
-export default async function createSymlinkIndex([backupDir, fieldPath]) {
+const filenamify = require('filenamify')
+const get = require('lodash/get')
+const { asyncMap } = require('@xen-orchestra/async-map')
+const { dirname, join, relative } = require('path')
+
+const { mktree, readdir2, readFile, symlink2 } = require('../_fs')
+
+module.exports = async function createSymlinkIndex([backupDir, fieldPath]) {
   const indexDir = join(backupDir, 'indexes', filenamify(fieldPath))
   await mktree(indexDir)
 

@xen-orchestra/backups-cli/commands/info.js

@@ -1,13 +1,16 @@
-import { readdir2, readFile, getSize } from '../_fs.mjs'
-import { asyncMap } from '@xen-orchestra/async-map'
-import { createHash } from 'crypto'
-import groupBy from 'lodash/groupBy.js'
-import { dirname, resolve } from 'path'
+'use strict'
+
+const groupBy = require('lodash/groupBy')
+const { asyncMap } = require('@xen-orchestra/async-map')
+const { createHash } = require('crypto')
+const { dirname, resolve } = require('path')
+
+const { readdir2, readFile, getSize } = require('../_fs')
 
 const sha512 = str => createHash('sha512').update(str).digest('hex')
 const sum = values => values.reduce((a, b) => a + b)
 
-export default async function info(vmDirs) {
+module.exports = async function info(vmDirs) {
   const jsonFiles = (
     await asyncMap(vmDirs, async vmDir => (await readdir2(vmDir)).filter(_ => _.endsWith('.json')))
   ).flat()

@xen-orchestra/backups-cli/index.js

@@ -1,12 +1,11 @@
 #!/usr/bin/env node
-import { composeCommands } from './_composeCommands.mjs'
 
-const importDefault = async path => (await import(path)).default
+'use strict'
 
-composeCommands({
+require('./_composeCommands')({
   'clean-vms': {
-    get default() {
-      return importDefault('./commands/clean-vms.mjs')
+    get main() {
+      return require('./commands/clean-vms')
     },
     usage: `[--fix] [--merge] [--remove] xo-vm-backups/*
 
@@ -19,14 +18,14 @@ composeCommands({
 `,
   },
   'create-symlink-index': {
-    get default() {
-      return importDefault('./commands/create-symlink-index.mjs')
+    get main() {
+      return require('./commands/create-symlink-index')
     },
     usage: 'xo-vm-backups <field path>',
   },
   info: {
-    get default() {
-      return importDefault('./commands/info.mjs')
+    get main() {
+      return require('./commands/info')
     },
     usage: 'xo-vm-backups/*',
   },

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

@@ -1,21 +1,21 @@
 {
   "private": false,
   "bin": {
-    "xo-backups": "index.mjs"
+    "xo-backups": "index.js"
   },
   "preferGlobal": true,
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
   "dependencies": {
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/backups": "^0.29.6",
-    "@xen-orchestra/fs": "^3.3.1",
+    "@xen-orchestra/backups": "^0.29.0",
+    "@xen-orchestra/fs": "^3.2.0",
     "filenamify": "^4.1.0",
     "getopts": "^2.2.5",
     "lodash": "^4.17.15",
     "promise-toolbox": "^0.21.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=7.10.1"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/backups-cli",
   "name": "@xen-orchestra/backups-cli",
@@ -27,7 +27,7 @@
   "scripts": {
     "postversion": "npm publish --access public"
   },
-  "version": "1.0.0",
+  "version": "0.7.8",
   "license": "AGPL-3.0-or-later",
   "author": {
     "name": "Vates SAS",

@xen-orchestra/backups/Backup.js

@@ -38,7 +38,7 @@ const DEFAULT_VM_SETTINGS = {
   fullInterval: 0,
   healthCheckSr: undefined,
   healthCheckVmsWithTags: [],
-  maxMergedDeltasPerRun: Infinity,
+  maxMergedDeltasPerRun: 2,
   offlineBackup: false,
   offlineSnapshot: false,
   snapshotRetention: 0,

@xen-orchestra/backups/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/backups):
 
-```sh
-npm install --save @xen-orchestra/backups
+```
+> npm install --save @xen-orchestra/backups
 ```
 
 ## Contributions

@xen-orchestra/backups/RemoteAdapter.js

@@ -28,7 +28,6 @@ const { isMetadataFile } = require('./_backupType.js')
 const { isValidXva } = require('./_isValidXva.js')
 const { listPartitions, LVM_PARTITION_TYPE } = require('./_listPartitions.js')
 const { lvs, pvs } = require('./_lvm.js')
-const { watchStreamSize } = require('./_watchStreamSize')
 // @todo : this import is marked extraneous , sould be fixed when lib is published
 const { mount } = require('@vates/fuse-vhd')
 const { asyncEach } = require('@vates/async-each')
@@ -233,23 +232,21 @@ class RemoteAdapter {
     return promise
   }
 
-  async #removeVmBackupsFromCache(backups) {
-    await asyncEach(
-      Object.entries(
-        groupBy(
-          backups.map(_ => _._filename),
-          dirname
-        )
-      ),
-      ([dir, filenames]) =>
-        // will not reject
-        this._updateCache(dir + '/cache.json.gz', backups => {
-          for (const filename of filenames) {
-            debug('removing cache entry', { entry: filename })
-            delete backups[filename]
-          }
-        })
-    )
+  #removeVmBackupsFromCache(backups) {
+    for (const [dir, filenames] of Object.entries(
+      groupBy(
+        backups.map(_ => _._filename),
+        dirname
+      )
+    )) {
+      // detached async action, will not reject
+      this._updateCache(dir + '/cache.json.gz', backups => {
+        for (const filename of filenames) {
+          debug('removing cache entry', { entry: filename })
+          delete backups[filename]
+        }
+      })
+    }
   }
 
   async deleteDeltaVmBackups(backups) {
@@ -258,7 +255,7 @@ class RemoteAdapter {
     // this will delete the json, unused VHDs will be detected by `cleanVm`
     await asyncMapSettled(backups, ({ _filename }) => handler.unlink(_filename))
 
-    await this.#removeVmBackupsFromCache(backups)
+    this.#removeVmBackupsFromCache(backups)
   }
 
   async deleteMetadataBackup(backupId) {
@@ -287,7 +284,7 @@ class RemoteAdapter {
       Promise.all([handler.unlink(_filename), handler.unlink(resolveRelativeFromFile(_filename, xva))])
     )
 
-    await this.#removeVmBackupsFromCache(backups)
+    this.#removeVmBackupsFromCache(backups)
   }
 
   deleteVmBackup(file) {
@@ -511,7 +508,7 @@ class RemoteAdapter {
     return `${BACKUP_DIR}/${vmUuid}/cache.json.gz`
   }
 
-  async _readCache(path) {
+  async #readCache(path) {
     try {
       return JSON.parse(await fromCallback(zlib.gunzip, await this.handler.readFile(path)))
     } catch (error) {
@@ -524,15 +521,15 @@ class RemoteAdapter {
   _updateCache = synchronized.withKey()(this._updateCache)
   // eslint-disable-next-line no-dupe-class-members
   async _updateCache(path, fn) {
-    const cache = await this._readCache(path)
+    const cache = await this.#readCache(path)
     if (cache !== undefined) {
       fn(cache)
 
-      await this._writeCache(path, cache)
+      await this.#writeCache(path, cache)
     }
   }
 
-  async _writeCache(path, data) {
+  async #writeCache(path, data) {
     try {
       await this.handler.writeFile(path, await fromCallback(zlib.gzip, JSON.stringify(data)), { flags: 'w' })
     } catch (error) {
@@ -540,6 +537,10 @@ class RemoteAdapter {
     }
   }
 
+  async invalidateVmBackupListCache(vmUuid) {
+    await this.handler.unlink(this.#getVmBackupsCache(vmUuid))
+  }
+
   async #getCachabledDataListVmBackups(dir) {
     debug('generating cache', { path: dir })
 
@@ -580,7 +581,7 @@ class RemoteAdapter {
   async _readCacheListVmBackups(vmUuid) {
     const path = this.#getVmBackupsCache(vmUuid)
 
-    const cache = await this._readCache(path)
+    const cache = await this.#readCache(path)
     if (cache !== undefined) {
       debug('found VM backups cache, using it', { path })
       return cache
@@ -593,7 +594,7 @@ class RemoteAdapter {
     }
 
     // detached async action, will not reject
-    this._writeCache(path, backups)
+    this.#writeCache(path, backups)
 
     return backups
   }
@@ -644,7 +645,7 @@ class RemoteAdapter {
     })
 
     // will not throw
-    await this._updateCache(this.#getVmBackupsCache(vmUuid), backups => {
+    this._updateCache(this.#getVmBackupsCache(vmUuid), backups => {
       debug('adding cache entry', { entry: path })
       backups[path] = {
         ...metadata,
@@ -662,7 +663,7 @@ class RemoteAdapter {
     const handler = this._handler
     if (this.#useVhdDirectory()) {
       const dataPath = `${dirname(path)}/data/${uuidv4()}.vhd`
-      const size = await createVhdDirectoryFromStream(handler, dataPath, input, {
+      await createVhdDirectoryFromStream(handler, dataPath, input, {
         concurrency: writeBlockConcurrency,
         compression: this.#getCompressionType(),
         async validator() {
@@ -672,14 +673,12 @@ class RemoteAdapter {
         nbdClient,
       })
       await VhdAbstract.createAlias(handler, path, dataPath)
-      return size
     } else {
-      return this.outputStream(path, input, { checksum, validator })
+      await this.outputStream(path, input, { checksum, validator })
     }
   }
 
   async outputStream(path, input, { checksum = true, validator = noop } = {}) {
-    const container = watchStreamSize(input)
     await this._handler.outputStream(path, input, {
       checksum,
       dirMode: this._dirMode,
@@ -688,7 +687,6 @@ class RemoteAdapter {
         return validator.apply(this, arguments)
       },
     })
-    return container.size
   }
 
   // open the  hierarchy of ancestors until we find a full one

@xen-orchestra/backups/Task.js

@@ -100,7 +100,7 @@ class Task {
    * In case of error, the task will be failed.
    *
    * @typedef Result
-   * @param {() => Result} fn
+   * @param {() => Result)} fn
    * @param {boolean} last - Whether the task should succeed if there is no error
    * @returns Result
    */

@xen-orchestra/backups/_backupWorker.js

@@ -1,6 +1,6 @@
 'use strict'
 
-require('@xen-orchestra/log/configure').catchGlobalErrors(
+require('@xen-orchestra/log/configure.js').catchGlobalErrors(
   require('@xen-orchestra/log').createLogger('xo:backups:worker')
 )
 

@xen-orchestra/backups/_cleanVm.js

@@ -311,6 +311,7 @@ exports.cleanVm = async function cleanVm(
   }
 
   const jsons = new Set()
+  let mustInvalidateCache = false
   const xvas = new Set()
   const xvaSums = []
   const entries = await handler.list(vmDir, {
@@ -326,20 +327,6 @@ exports.cleanVm = async function cleanVm(
     }
   })
 
-  const cachePath = vmDir + '/cache.json.gz'
-
-  let mustRegenerateCache
-  {
-    const cache = await this._readCache(cachePath)
-    const actual = cache === undefined ? 0 : Object.keys(cache).length
-    const expected = jsons.size
-
-    mustRegenerateCache = actual !== expected
-    if (mustRegenerateCache) {
-      logWarn('unexpected number of entries in backup cache', { path: cachePath, actual, expected })
-    }
-  }
-
   await asyncMap(xvas, async path => {
     // check is not good enough to delete the file, the best we can do is report
     // it
@@ -351,8 +338,6 @@ exports.cleanVm = async function cleanVm(
   const unusedVhds = new Set(vhds)
   const unusedXvas = new Set(xvas)
 
-  const backups = new Map()
-
   // compile the list of unused XVAs and VHDs, and remove backup metadata which
   // reference a missing XVA/VHD
   await asyncMap(jsons, async json => {
@@ -365,16 +350,19 @@ exports.cleanVm = async function cleanVm(
       return
     }
 
-    let isBackupComplete
-
     const { mode } = metadata
     if (mode === 'full') {
       const linkedXva = resolve('/', vmDir, metadata.xva)
-      isBackupComplete = xvas.has(linkedXva)
-      if (isBackupComplete) {
+      if (xvas.has(linkedXva)) {
         unusedXvas.delete(linkedXva)
       } else {
         logWarn('the XVA linked to the backup is missing', { backup: json, xva: linkedXva })
+        if (remove) {
+          logInfo('deleting incomplete backup', { path: json })
+          jsons.delete(json)
+          mustInvalidateCache = true
+          await handler.unlink(json)
+        }
       }
     } else if (mode === 'delta') {
       const linkedVhds = (() => {
@@ -383,28 +371,22 @@ exports.cleanVm = async function cleanVm(
       })()
 
       const missingVhds = linkedVhds.filter(_ => !vhds.has(_))
-      isBackupComplete = missingVhds.length === 0
 
       // FIXME: find better approach by keeping as much of the backup as
       // possible (existing disks) even if one disk is missing
-      if (isBackupComplete) {
+      if (missingVhds.length === 0) {
         linkedVhds.forEach(_ => unusedVhds.delete(_))
         linkedVhds.forEach(path => {
           vhdsToJSons[path] = json
         })
       } else {
         logWarn('some VHDs linked to the backup are missing', { backup: json, missingVhds })
-      }
-    }
-
-    if (isBackupComplete) {
-      backups.set(json, metadata)
-    } else {
-      jsons.delete(json)
-      if (remove) {
-        logInfo('deleting incomplete backup', { backup: json })
-        mustRegenerateCache = true
-        await handler.unlink(json)
+        if (remove) {
+          logInfo('deleting incomplete backup', { path: json })
+          mustInvalidateCache = true
+          jsons.delete(json)
+          await handler.unlink(json)
+        }
       }
     }
   })
@@ -514,7 +496,7 @@ exports.cleanVm = async function cleanVm(
   // 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)
+    const metadata = JSON.parse(await handler.readFile(metadataPath))
 
     let fileSystemSize
     const merged = metadataWithMergedVhd[metadataPath] !== undefined
@@ -556,7 +538,6 @@ exports.cleanVm = async function cleanVm(
     // systematically update size after a merge
     if ((merged || fixMetadata) && size !== fileSystemSize) {
       metadata.size = fileSystemSize
-      mustRegenerateCache = true
       try {
         await handler.writeFile(metadataPath, JSON.stringify(metadata), { flags: 'w' })
       } catch (error) {
@@ -565,16 +546,9 @@ exports.cleanVm = async function cleanVm(
     }
   })
 
-  if (mustRegenerateCache) {
-    const cache = {}
-    for (const [path, content] of backups.entries()) {
-      cache[path] = {
-        _filename: path,
-        id: path,
-        ...content,
-      }
-    }
-    await this._writeCache(cachePath, cache)
+  // purge cache if a metadata file has been deleted
+  if (mustInvalidateCache) {
+    await handler.unlink(vmDir + '/cache.json.gz')
   }
 
   return {

@xen-orchestra/backups/_cleanVm.test.js

@@ -31,7 +31,7 @@ beforeEach(async () => {
 })
 
 afterEach(async () => {
-  await rimraf(tempDir)
+  await pFromCallback(cb => rimraf(tempDir, cb))
   await handler.forget()
 })
 
@@ -221,7 +221,7 @@ test('it merges delta of non destroyed chain', async () => {
     loggued.push(message)
   }
   await adapter.cleanVm(rootPath, { remove: true, logInfo, logWarn: logInfo, lock: false })
-  assert.equal(loggued[0], `unexpected number of entries in backup cache`)
+  assert.equal(loggued[0], `incorrect backup size in metadata`)
 
   loggued = []
   await adapter.cleanVm(rootPath, { remove: true, merge: true, logInfo, logWarn: () => {}, lock: false })
@@ -378,19 +378,7 @@ describe('tests multiple combination ', () => {
             ],
           })
         )
-        if (!useAlias && vhdMode === 'directory') {
-          try {
-            await adapter.cleanVm(rootPath, { remove: true, merge: true, logWarn: () => {}, lock: false })
-          } catch (err) {
-            assert.strictEqual(
-              err.code,
-              'NOT_SUPPORTED',
-              'Merging directory without alias should raise a not supported error'
-            )
-            return
-          }
-          assert.strictEqual(true, false, 'Merging directory without alias should raise an error')
-        }
+
         await adapter.cleanVm(rootPath, { remove: true, merge: true, logWarn: () => {}, lock: false })
 
         const metadata = JSON.parse(await handler.readFile(`${rootPath}/metadata.json`))

@xen-orchestra/backups/_deltaVm.js

@@ -258,9 +258,6 @@ exports.importDeltaVm = defer(async function importDeltaVm(
       $defer.onFailure(() => newVdi.$destroy())
 
       await newVdi.update_other_config(TAG_COPY_SRC, vdi.uuid)
-      if (vdi.virtual_size > newVdi.virtual_size) {
-        await newVdi.$callAsync('resize', vdi.virtual_size)
-      }
     } else if (vdiRef === vmRecord.suspend_VDI) {
       // suspendVDI has already created
       newVdi = suspendVdi

@xen-orchestra/backups/_forkStreamUnpipe.js

@@ -1,6 +1,7 @@
 'use strict'
 
-const { finished, PassThrough } = require('node:stream')
+const eos = require('end-of-stream')
+const { PassThrough } = require('stream')
 
 const { debug } = require('@xen-orchestra/log').createLogger('xo:backups:forkStreamUnpipe')
 
@@ -8,29 +9,29 @@ const { debug } = require('@xen-orchestra/log').createLogger('xo:backups:forkStr
 //
 // in case of error in the new readable stream, it will simply be unpiped
 // from the original one
-exports.forkStreamUnpipe = function forkStreamUnpipe(source) {
-  const { forks = 0 } = source
-  source.forks = forks + 1
+exports.forkStreamUnpipe = function forkStreamUnpipe(stream) {
+  const { forks = 0 } = stream
+  stream.forks = forks + 1
 
-  debug('forking', { forks: source.forks })
+  debug('forking', { forks: stream.forks })
 
-  const fork = new PassThrough()
-  source.pipe(fork)
-  finished(source, { writable: false }, error => {
+  const proxy = new PassThrough()
+  stream.pipe(proxy)
+  eos(stream, error => {
     if (error !== undefined) {
       debug('error on original stream, destroying fork', { error })
-      fork.destroy(error)
+      proxy.destroy(error)
     }
   })
-  finished(fork, { readable: false }, error => {
-    debug('end of stream, unpiping', { error, forks: --source.forks })
+  eos(proxy, error => {
+    debug('end of stream, unpiping', { error, forks: --stream.forks })
 
-    source.unpipe(fork)
+    stream.unpipe(proxy)
 
-    if (source.forks === 0) {
+    if (stream.forks === 0) {
       debug('no more forks, destroying original stream')
-      source.destroy(new Error('no more consumers for this stream'))
+      stream.destroy(new Error('no more consumers for this stream'))
     }
   })
-  return fork
+  return proxy
 }

@xen-orchestra/backups/merge-worker/cli.js

@@ -4,7 +4,7 @@
 
 'use strict'
 
-const { catchGlobalErrors } = require('@xen-orchestra/log/configure')
+const { catchGlobalErrors } = require('@xen-orchestra/log/configure.js')
 const { createLogger } = require('@xen-orchestra/log')
 const { getSyncedHandler } = require('@xen-orchestra/fs')
 const { join } = require('path')

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.29.6",
+  "version": "0.29.0",
   "engines": {
     "node": ">=14.6"
   },
@@ -21,37 +21,38 @@
     "@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.2",
     "@vates/fuse-vhd": "^1.0.0",
-    "@vates/nbd-client": "^1.0.1",
+    "@vates/nbd-client": "*",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/fs": "^3.3.1",
-    "@xen-orchestra/log": "^0.6.0",
+    "@xen-orchestra/fs": "^3.2.0",
+    "@xen-orchestra/log": "^0.4.0",
     "@xen-orchestra/template": "^0.1.0",
     "compare-versions": "^5.0.1",
     "d3-time-format": "^3.0.0",
     "decorator-synchronized": "^0.6.0",
-    "fs-extra": "^11.1.0",
+    "end-of-stream": "^1.4.4",
+    "fs-extra": "^10.0.0",
     "golike-defer": "^0.5.1",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash": "^4.17.20",
     "node-zone": "^0.4.0",
-    "parse-pairs": "^2.0.0",
+    "parse-pairs": "^1.1.0",
     "promise-toolbox": "^0.21.0",
     "proper-lockfile": "^4.1.2",
     "uuid": "^9.0.0",
-    "vhd-lib": "^4.2.1",
+    "vhd-lib": "^4.1.1",
     "yazl": "^2.5.1"
   },
   "devDependencies": {
-    "rimraf": "^4.1.1",
-    "sinon": "^15.0.1",
+    "rimraf": "^3.0.2",
+    "sinon": "^14.0.1",
     "test": "^3.2.1",
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^1.6.1"
+    "@xen-orchestra/xapi": "^1.5.2"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

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

@@ -7,12 +7,11 @@ const ignoreErrors = require('promise-toolbox/ignoreErrors')
 const { asyncMap } = require('@xen-orchestra/async-map')
 const { chainVhd, checkVhdChain, openVhd, VhdAbstract } = require('vhd-lib')
 const { createLogger } = require('@xen-orchestra/log')
-const { decorateClass } = require('@vates/decorate-with')
-const { defer } = require('golike-defer')
 const { dirname } = require('path')
 
 const { formatFilenameDate } = require('../_filenameDate.js')
 const { getOldEntries } = require('../_getOldEntries.js')
+const { getVmBackupDir } = require('../_getVmBackupDir.js')
 const { Task } = require('../Task.js')
 
 const { MixinBackupWriter } = require('./_MixinBackupWriter.js')
@@ -22,15 +21,16 @@ const { packUuid } = require('./_packUuid.js')
 const { Disposable } = require('promise-toolbox')
 const NbdClient = require('@vates/nbd-client')
 
-const { debug, warn, info } = createLogger('xo:backups:DeltaBackupWriter')
+const { debug, warn } = createLogger('xo:backups:DeltaBackupWriter')
 
-class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
+exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
   async checkBaseVdis(baseUuidToSrcVdi) {
     const { handler } = this._adapter
     const backup = this._backup
     const adapter = this._adapter
 
-    const vdisDir = `${this._vmBackupDir}/vdis/${backup.job.id}`
+    const backupDir = getVmBackupDir(backup.vm.uuid)
+    const vdisDir = `${backupDir}/vdis/${backup.job.id}`
 
     await asyncMap(baseUuidToSrcVdi, async ([baseUuid, srcVdi]) => {
       let found = false
@@ -135,7 +135,7 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
     }
   }
 
-  async _transfer($defer, { timestamp, deltaExport }) {
+  async _transfer({ timestamp, deltaExport, sizeContainers }) {
     const adapter = this._adapter
     const backup = this._backup
 
@@ -143,6 +143,7 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
 
     const jobId = job.id
     const handler = adapter.handler
+    const backupDir = getVmBackupDir(vm.uuid)
 
     // TODO: clean VM backup directory
 
@@ -174,10 +175,9 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
     }
 
     const { size } = await Task.run({ name: 'transfer' }, async () => {
-      let transferSize = 0
       await Promise.all(
         map(deltaExport.vdis, async (vdi, id) => {
-          const path = `${this._vmBackupDir}/${vhds[id]}`
+          const path = `${backupDir}/${vhds[id]}`
 
           const isDelta = vdi.other_config['xo:base_delta'] !== undefined
           let parentPath
@@ -203,30 +203,21 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
           const vdiRef = vm.$xapi.getObject(vdi.uuid).$ref
 
           let nbdClient
-          if (this._backup.config.useNbd) {
-            debug('useNbd is enabled', { vdi: id, path })
+          if (!this._backup.config.useNbd) {
             // get nbd if possible
             try {
               // this will always take the first host in the list
               const [nbdInfo] = await vm.$xapi.call('VDI.get_nbd_info', vdiRef)
-              debug('got NBD info', { nbdInfo, vdi: id, path })
               nbdClient = new NbdClient(nbdInfo)
               await nbdClient.connect()
-
-              // this will inform the xapi that we don't need this anymore
-              // and will detach the vdi from dom0
-              $defer(() => nbdClient.disconnect())
-
-              info('NBD client ready', { vdi: id, path })
+              debug(`got nbd connection `, { vdi: vdi.uuid })
             } catch (error) {
               nbdClient = undefined
-              warn('error connecting to NBD server', { error, vdi: id, path })
+              debug(`can't connect to nbd server or no server available`, { error })
             }
-          } else {
-            debug('useNbd is disabled', { vdi: id, path })
           }
 
-          transferSize += await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
+          await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
             // no checksum for VHDs, because they will be invalidated by
             // merges and chainings
             checksum: false,
@@ -247,7 +238,9 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
           })
         })
       )
-      return { size: transferSize }
+      return {
+        size: Object.values(sizeContainers).reduce((sum, { size }) => sum + size, 0),
+      }
     })
     metadataContent.size = size
     this._metadataFileName = await adapter.writeVmBackupMetadata(vm.uuid, metadataContent)
@@ -255,6 +248,3 @@ class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
     // TODO: run cleanup?
   }
 }
-exports.DeltaBackupWriter = decorateClass(DeltaBackupWriter, {
-  _transfer: defer,
-})

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

@@ -2,6 +2,7 @@
 
 const { formatFilenameDate } = require('../_filenameDate.js')
 const { getOldEntries } = require('../_getOldEntries.js')
+const { getVmBackupDir } = require('../_getVmBackupDir.js')
 const { Task } = require('../Task.js')
 
 const { MixinBackupWriter } = require('./_MixinBackupWriter.js')
@@ -33,6 +34,7 @@ exports.FullBackupWriter = class FullBackupWriter extends MixinBackupWriter(Abst
     const { job, scheduleId, vm } = backup
 
     const adapter = this._adapter
+    const backupDir = getVmBackupDir(vm.uuid)
 
     // TODO: clean VM backup directory
 
@@ -45,8 +47,9 @@ exports.FullBackupWriter = class FullBackupWriter extends MixinBackupWriter(Abst
     const basename = formatFilenameDate(timestamp)
 
     const dataBasename = basename + '.xva'
-    const dataFilename = this._vmBackupDir + '/' + dataBasename
+    const dataFilename = backupDir + '/' + dataBasename
 
+    const metadataFilename = `${backupDir}/${basename}.json`
     const metadata = {
       jobId: job.id,
       mode: job.mode,

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

@@ -16,6 +16,7 @@ const { info, warn } = createLogger('xo:backups:MixinBackupWriter')
 exports.MixinBackupWriter = (BaseClass = Object) =>
   class MixinBackupWriter extends BaseClass {
     #lock
+    #vmBackupDir
 
     constructor({ remoteId, ...rest }) {
       super(rest)
@@ -23,13 +24,13 @@ exports.MixinBackupWriter = (BaseClass = Object) =>
       this._adapter = rest.backup.remoteAdapters[remoteId]
       this._remoteId = remoteId
 
-      this._vmBackupDir = getVmBackupDir(this._backup.vm.uuid)
+      this.#vmBackupDir = getVmBackupDir(this._backup.vm.uuid)
     }
 
     async _cleanVm(options) {
       try {
         return await Task.run({ name: 'clean-vm' }, () => {
-          return this._adapter.cleanVm(this._vmBackupDir, {
+          return this._adapter.cleanVm(this.#vmBackupDir, {
             ...options,
             fixMetadata: true,
             logInfo: info,
@@ -49,7 +50,7 @@ exports.MixinBackupWriter = (BaseClass = Object) =>
 
     async beforeBackup() {
       const { handler } = this._adapter
-      const vmBackupDir = this._vmBackupDir
+      const vmBackupDir = this.#vmBackupDir
       await handler.mktree(vmBackupDir)
       this.#lock = await handler.lock(vmBackupDir)
     }

@xen-orchestra/cr-seed-cli/README.md

@@ -8,8 +8,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/cr-seed-cli):
 
-```sh
-npm install --global @xen-orchestra/cr-seed-cli
+```
+> npm install --global @xen-orchestra/cr-seed-cli
 ```
 
 ## Contributions

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

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

@xen-orchestra/cron/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/cron):
 
-```sh
-npm install --save @xen-orchestra/cron
+```
+> npm install --save @xen-orchestra/cron
 ```
 
 ## Usage

@xen-orchestra/cron/package.json

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

@xen-orchestra/defined/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/defined):
 
-```sh
-npm install --save @xen-orchestra/defined
+```
+> npm install --save @xen-orchestra/defined
 ```
 
 ## Contributions

@xen-orchestra/emit-async/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/emit-async):
 
-```sh
-npm install --save @xen-orchestra/emit-async
+```
+> npm install --save @xen-orchestra/emit-async
 ```
 
 ## Usage

@xen-orchestra/fs/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/fs):
 
-```sh
-npm install --global @xen-orchestra/fs
+```
+> npm install --global @xen-orchestra/fs
 ```
 
 ## Contributions

@xen-orchestra/fs/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@xen-orchestra/fs",
-  "version": "3.3.1",
+  "version": "3.2.0",
   "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",
@@ -30,11 +30,11 @@
     "@vates/decorate-with": "^2.0.0",
     "@vates/read-chunk": "^1.0.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/log": "^0.6.0",
+    "@xen-orchestra/log": "^0.4.0",
     "bind-property-descriptor": "^2.0.0",
     "decorator-synchronized": "^0.6.0",
     "execa": "^5.0.0",
-    "fs-extra": "^11.1.0",
+    "fs-extra": "^10.0.0",
     "get-stream": "^6.0.0",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash": "^4.17.4",
@@ -53,7 +53,7 @@
     "babel-plugin-lodash": "^3.3.2",
     "cross-env": "^7.0.2",
     "dotenv": "^16.0.0",
-    "rimraf": "^4.1.1",
+    "rimraf": "^3.0.0",
     "tmp": "^0.2.1"
   },
   "scripts": {

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

@@ -14,7 +14,7 @@ import { basename, dirname, normalize as normalizePath } from './path'
 import { createChecksumStream, validChecksumOfReadStream } from './checksum'
 import { DEFAULT_ENCRYPTION_ALGORITHM, _getEncryptor } from './_encryptor'
 
-const { info, warn } = createLogger('xo:fs:abstract')
+const { info, warn } = createLogger('@xen-orchestra:fs')
 
 const checksumFile = file => file + '.checksum'
 const computeRate = (hrtime, size) => {
@@ -284,25 +284,15 @@ export default class RemoteHandlerAbstract {
     return this._encryptor.decryptData(data)
   }
 
-  async #rename(oldPath, newPath, { checksum }, createTree = true) {
-    try {
-      let p = timeout.call(this._rename(oldPath, newPath), this._timeout)
-      if (checksum) {
-        p = Promise.all([p, this._rename(checksumFile(oldPath), checksumFile(newPath))])
-      }
-      await p
-    } catch (error) {
-      // ENOENT can be a missing target directory OR a missing source
-      if (error.code === 'ENOENT' && createTree) {
-        await this._mktree(dirname(newPath))
-        return this.#rename(oldPath, newPath, { checksum }, false)
-      }
-      throw error
-    }
-  }
+  async rename(oldPath, newPath, { checksum = false } = {}) {
+    oldPath = normalizePath(oldPath)
+    newPath = normalizePath(newPath)
 
-  rename(oldPath, newPath, { checksum = false } = {}) {
-    return this.#rename(normalizePath(oldPath), normalizePath(newPath), { checksum })
+    let p = timeout.call(this._rename(oldPath, newPath), this._timeout)
+    if (checksum) {
+      p = Promise.all([p, this._rename(checksumFile(oldPath), checksumFile(newPath))])
+    }
+    return p
   }
 
   async copy(oldPath, newPath, { checksum = false } = {}) {

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

@@ -116,7 +116,7 @@ describe('encryption', () => {
     dir = await pFromCallback(cb => tmp.dir(cb))
   })
   afterAll(async () => {
-    await rimraf(dir)
+    await pFromCallback(cb => rimraf(dir, cb))
   })
 
   it('sync should NOT create metadata if missing (not encrypted)', async () => {

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

@@ -228,17 +228,6 @@ handlers.forEach(url => {
         expect(await handler.list('.')).toEqual(['file2'])
         expect(await handler.readFile(`file2`)).toEqual(TEST_DATA)
       })
-      it(`should rename the file and create dest directory`, async () => {
-        await handler.outputFile('file', TEST_DATA)
-        await handler.rename('file', `sub/file2`)
-
-        expect(await handler.list('sub')).toEqual(['file2'])
-        expect(await handler.readFile(`sub/file2`)).toEqual(TEST_DATA)
-      })
-      it(`should fail with enoent if source file is missing`, async () => {
-        const error = await rejectionOf(handler.rename('file', `sub/file2`))
-        expect(error.code).toBe('ENOENT')
-      })
     })
 
     describe('#rmdir()', () => {

@xen-orchestra/lite/.prettierrc.cjs

@@ -1,2 +1,15 @@
-// Keeping this file to prevent applying the global monorepo config for now
-module.exports = {};
+module.exports = {
+  importOrder: [
+    "^[^/]+$",
+    "<THIRD_PARTY_MODULES>",
+    "^@/components/(.*)$",
+    "^@/composables/(.*)$",
+    "^@/libs/(.*)$",
+    "^@/router/(.*)$",
+    "^@/stores/(.*)$",
+    "^@/views/(.*)$",
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderParserPlugins: ["typescript", "decorators-legacy"],
+};

@xen-orchestra/lite/CHANGELOG.md

@@ -5,12 +5,6 @@
 - Invalidate sessionId token after logout (PR [#6480](https://github.com/vatesfr/xen-orchestra/pull/6480))
 - Settings page (PR [#6418](https://github.com/vatesfr/xen-orchestra/pull/6418))
 - Uncollapse hosts in the tree by default (PR [#6428](https://github.com/vatesfr/xen-orchestra/pull/6428))
-- Display RAM usage in pool dashboard (PR [#6419](https://github.com/vatesfr/xen-orchestra/pull/6419))
-- Implement not found page (PR [#6410](https://github.com/vatesfr/xen-orchestra/pull/6410))
-- Display CPU usage chart in pool dashboard (PR [#6577](https://github.com/vatesfr/xen-orchestra/pull/6577))
-- Display network throughput chart in pool dashboard (PR [#6610](https://github.com/vatesfr/xen-orchestra/pull/6610))
-- Display RAM usage chart in pool dashboard (PR [#6604](https://github.com/vatesfr/xen-orchestra/pull/6604))
-- Ability to change the state of a VM (PRs [#6571](https://github.com/vatesfr/xen-orchestra/pull/6571) [#6608](https://github.com/vatesfr/xen-orchestra/pull/6608))
 
 ## **0.1.0**
 

@xen-orchestra/lite/README.md

@@ -91,21 +91,18 @@ const fontSize = ref("2rem");
 
 This project is using Font Awesome 6 Free.
 
-Icons can be displayed with the `UiIcon` component.
+Here is how to use an icon in your template.
 
-Passing `undefined` as `icon` prop will disable the component (no need to use an additional `v-if` condition).
-
-Use the `busy` prop to display a loader icon.
+Note: `FontAwesomeIcon` is a global component that does not need to be imported.
 
 ```vue
 <template>
   <div>
-    <UiIcon :icon="faDisplay" />
+    <FontAwesomeIcon :icon="faDisplay" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
 import { faDisplay } from "@fortawesome/free-solid-svg-icons";
 </script>
 ```
@@ -118,6 +115,8 @@ Here is the equivalent between font weight and style name.
 | ---------- | ----------- |
 | Solid      | 900         |
 | Regular    | 400         |
+| Light      | 300         |
+| Thin       | 100         |
 
 ### CSS
 

@xen-orchestra/lite/package.json

@@ -7,8 +7,8 @@
     "preview": "vite preview --port 4173",
     "build-only": "GIT_HEAD=$(git rev-parse HEAD) vite build",
     "deploy": "./scripts/deploy.sh",
-    "test": "yarn run type-check",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -18,20 +18,17 @@
     "@novnc/novnc": "^1.3.0",
     "@types/d3-time-format": "^4.0.0",
     "@types/lodash-es": "^4.17.6",
-    "@vueuse/core": "^9.5.0",
-    "@vueuse/math": "^9.5.0",
+    "@vueuse/core": "^8.7.5",
     "complex-matcher": "^0.7.0",
     "d3-time-format": "^4.1.0",
     "decorator-synchronized": "^0.6.0",
     "echarts": "^5.3.3",
-    "highlight.js": "^11.6.0",
     "human-format": "^1.0.0",
     "json-rpc-2.0": "^1.3.0",
     "json5": "^2.2.1",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash-es": "^4.17.21",
     "make-error": "^1.3.6",
-    "markdown-it": "^13.0.1",
     "pinia": "^2.0.14",
     "placement.js": "^1.0.0-beta.5",
     "vue": "^3.2.37",
@@ -43,19 +40,18 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@limegrass/eslint-plugin-import-alias": "^1.0.5",
     "@rushstack/eslint-patch": "^1.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/node": "^16.11.41",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/tsconfig": "^0.1.3",
     "eslint-plugin-vue": "^9.0.0",
     "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": "^3.2.4",
-    "vue-tsc": "^1.0.9"
+    "postcss-nested": "^5.0.6",
+    "typescript": "~4.7.4",
+    "vite": "^2.9.12",
+    "vue-tsc": "^0.38.1"
   },
   "private": true,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/lite",

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

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

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

@@ -13,12 +13,6 @@
         <a :href="url.href" target="_blank" rel="noopener">{{ url.href }}</a>
       </li>
     </ul>
-    <template #buttons>
-      <UiButton color="success" @click="reload">{{
-        $t("unreachable-hosts-reload-page")
-      }}</UiButton>
-      <UiButton @click="clearUnreachableHostsUrls">{{ $t("cancel") }}</UiButton>
-    </template>
   </UiModal>
   <div v-if="!xenApiStore.isConnected">
     <AppLogin />
@@ -26,9 +20,9 @@
   <div v-else>
     <AppHeader />
     <div style="display: flex">
-      <transition name="slide">
-        <AppNavigation />
-      </transition>
+      <nav class="nav">
+        <InfraPoolList />
+      </nav>
       <main class="main">
         <RouterView />
       </main>
@@ -38,10 +32,6 @@
 </template>
 
 <script lang="ts" setup>
-import AppNavigation from "@/components/AppNavigation.vue";
-import { useUiStore } from "@/stores/ui.store";
-import { useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
-import { logicAnd } from "@vueuse/math";
 import { difference } from "lodash";
 import { computed, ref, watch, watchEffect } from "vue";
 import favicon from "@/assets/favicon.svg";
@@ -49,7 +39,7 @@ import { faServer } from "@fortawesome/free-solid-svg-icons";
 import AppHeader from "@/components/AppHeader.vue";
 import AppLogin from "@/components/AppLogin.vue";
 import AppTooltips from "@/components/AppTooltips.vue";
-import UiButton from "@/components/ui/UiButton.vue";
+import InfraPoolList from "@/components/infra/InfraPoolList.vue";
 import UiModal from "@/components/ui/UiModal.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
 import { useHostStore } from "@/stores/host.store";
@@ -68,28 +58,13 @@ link.href = favicon;
 
 document.title = "XO Lite";
 
+if (window.localStorage?.getItem("colorMode") !== "light") {
+  document.documentElement.classList.add("dark");
+}
+
 const xenApiStore = useXenApiStore();
 const hostStore = useHostStore();
 useChartTheme();
-const uiStore = useUiStore();
-
-if (import.meta.env.DEV) {
-  const activeElement = useActiveElement();
-  const { D } = useMagicKeys();
-
-  const canToggleDarkMode = computed(() => {
-    if (activeElement.value == null) {
-      return true;
-    }
-
-    return !["INPUT", "TEXTAREA"].includes(activeElement.value.tagName);
-  });
-
-  whenever(
-    logicAnd(D, canToggleDarkMode),
-    () => (uiStore.colorMode = uiStore.colorMode === "dark" ? "light" : "dark")
-  );
-}
 
 watchEffect(() => {
   if (xenApiStore.isConnected) {
@@ -112,20 +87,19 @@ watch(
 );
 
 const isSslModalOpen = computed(() => unreachableHostsUrls.value.length > 0);
-const reload = () => window.location.reload();
 </script>
 
 <style lang="postcss">
 @import "@/assets/base.css";
 
-.slide-enter-active,
-.slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from,
-.slide-leave-to {
-  transform: translateX(-37rem);
+.nav {
+  overflow: auto;
+  width: 37rem;
+  max-width: 37rem;
+  height: calc(100vh - 9rem);
+  padding: 0.5rem;
+  border-right: 1px solid var(--color-blue-scale-400);
+  background-color: var(--background-color-primary);
 }
 
 .main {

@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

@@ -16,8 +16,8 @@ a {
   color: var(--color-extra-blue-base);
 }
 
-code, code * {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+code {
+  font-family: monospace;
 }
 
 .card-view {

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

@@ -1,11 +1,5 @@
 <template>
   <header class="app-header">
-    <UiIcon
-      v-if="isMobile"
-      ref="navigationTrigger"
-      :icon="faBars"
-      class="toggle-navigation"
-    />
     <RouterLink :to="{ name: 'home' }">
       <img alt="XO Lite" src="../assets/logo.svg" />
     </RouterLink>
@@ -17,18 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import AccountButton from "@/components/AccountButton.vue";
-import UiIcon from "@/components/ui/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";
-
-const uiStore = useUiStore();
-const { isMobile } = storeToRefs(uiStore);
-
-const navigationStore = useNavigationStore();
-const { trigger: navigationTrigger } = storeToRefs(navigationStore);
+import AccountButton from '@/components/AccountButton.vue'
 </script>
 
 <style lang="postcss" scoped>

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

@@ -2,24 +2,15 @@
   <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">
-        <FormInput
-          name="password"
-          ref="passwordRef"
-          type="password"
-          v-model="password"
-          :placeholder="$t('password')"
-          :readonly="isConnecting"
-        />
-      </FormInputWrapper>
-      <UiButton
-        type="submit"
-        :busy="isConnecting"
-        :disabled="password.trim().length < 1"
-      >
+      <input v-model="login" name="login" readonly type="text" />
+      <input
+        v-model="password"
+        :readonly="isConnecting"
+        name="password"
+        :placeholder="$t('password')"
+        type="password"
+      />
+      <UiButton :busy="isConnecting" type="submit">
         {{ $t("login") }}
       </UiButton>
     </form>
@@ -28,47 +19,21 @@
 
 <script lang="ts" setup>
 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 { onMounted, ref } from "vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
-const { t } = useI18n();
 const xenApiStore = useXenApiStore();
 const { isConnecting } = storeToRefs(xenApiStore);
 const login = ref("root");
 const password = ref("");
-const error = ref<string>();
-const passwordRef = ref<InstanceType<typeof FormInput>>();
-const isInvalidPassword = ref(false);
-
-const focusPasswordInput = () => passwordRef.value?.focus();
 
 onMounted(() => {
   xenApiStore.reconnect();
-  focusPasswordInput();
-});
-
-watch(password, () => {
-  isInvalidPassword.value = false;
-  error.value = undefined;
 });
 
 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");
-    } else {
-      error.value = t("error-occured");
-      console.error(err);
-    }
-  }
+  await xenApiStore.connect(login.value, password.value);
 }
 </script>
 
@@ -85,7 +50,6 @@ async function handleSubmit() {
 
 form {
   display: flex;
-  font-size: 2rem;
   min-width: 30em;
   max-width: 100%;
   align-items: center;
@@ -108,6 +72,12 @@ img {
   margin-bottom: 5rem;
 }
 
+label {
+  font-size: 120%;
+  font-weight: bold;
+  margin: 1.5rem 0 0.5rem 0;
+}
+
 input {
   width: 45rem;
   max-width: 100%;
@@ -119,6 +89,6 @@ input {
 }
 
 button {
-  margin-top: 2rem;
+  margin-top: 3rem;
 }
 </style>

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

@@ -1,114 +0,0 @@
-<template>
-  <div ref="rootElement" class="app-markdown" v-html="html" />
-</template>
-
-<script lang="ts" setup>
-import { type Ref, computed, ref } from "vue";
-import { useEventListener } from "@vueuse/core";
-import "highlight.js/styles/github-dark.css";
-import { markdown } from "@/libs/markdown";
-
-const rootElement = ref() as Ref<HTMLElement>;
-
-const props = defineProps<{
-  content: string;
-}>();
-
-const html = computed(() => markdown.render(props.content ?? ""));
-
-useEventListener(
-  rootElement,
-  "click",
-  (event: MouseEvent) => {
-    const target = event.target as HTMLElement;
-
-    if (!target.classList.contains("copy-button")) {
-      return;
-    }
-
-    const copyable =
-      target.parentElement!.querySelector<HTMLElement>(".copyable");
-
-    if (copyable !== null) {
-      navigator.clipboard.writeText(copyable.innerText);
-    }
-  },
-  { capture: true }
-);
-</script>
-
-<style lang="postcss" scoped>
-.app-markdown {
-  font-size: 1.6rem;
-
-  :deep() {
-    p,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    pre {
-      margin: 1rem 0;
-    }
-
-    pre {
-      width: 100%;
-      padding: 0.8rem 1.4rem;
-      border-radius: 1rem;
-    }
-
-    code:not(.hljs-code) {
-      background-color: var(--background-color-extra-blue);
-      padding: 0.3rem 0.6rem;
-      border-radius: 0.6rem;
-    }
-
-    ul,
-    ol {
-      margin: revert;
-      padding-left: 2rem;
-      list-style-type: revert;
-    }
-
-    table {
-      border-spacing: 0;
-
-      th,
-      td {
-        padding: 0.5rem 1rem;
-      }
-
-      thead th {
-        border-bottom: 2px solid var(--color-blue-scale-400);
-        background-color: var(--background-color-secondary);
-      }
-
-      tbody td {
-        border-bottom: 1px solid var(--color-blue-scale-400);
-      }
-    }
-
-    .copy-button {
-      font-size: 1.6rem;
-      font-weight: 400;
-      position: absolute;
-      z-index: 1;
-      right: 1rem;
-      cursor: pointer;
-      color: white;
-      border: none;
-      background-color: transparent;
-
-      &:hover {
-        color: var(--color-extra-blue-base);
-      }
-
-      &:active {
-        color: var(--color-extra-blue-d20);
-      }
-    }
-  }
-}
-</style>

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

@@ -1,57 +0,0 @@
-<template>
-  <nav
-    v-if="isDesktop || isOpen"
-    ref="navElement"
-    :class="{ collapsible: isMobile }"
-    class="app-navigation"
-  >
-    <InfraPoolList />
-  </nav>
-</template>
-
-<script lang="ts" setup>
-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 navigationStore = useNavigationStore();
-const { isOpen, trigger } = storeToRefs(navigationStore);
-
-const navElement = ref();
-
-whenever(isOpen, () => {
-  const unregisterEvent = onClickOutside(
-    navElement,
-    () => {
-      isOpen.value = false;
-      unregisterEvent?.();
-    },
-    {
-      ignore: [trigger],
-    }
-  );
-});
-</script>
-
-<style lang="postcss" scoped>
-.app-navigation {
-  overflow: auto;
-  width: 37rem;
-  max-width: 37rem;
-  height: calc(100vh - 9rem);
-  padding: 0.5rem;
-  border-right: 1px solid var(--color-blue-scale-400);
-  background-color: var(--background-color-primary);
-
-  &.collapsible {
-    position: fixed;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -1,41 +0,0 @@
-<template>
-  <pre class="code-highlight hljs"><code v-html="codeAsHtml"></code></pre>
-</template>
-
-<script lang="ts" setup>
-import HLJS from "highlight.js";
-import { computed } from "vue";
-import "highlight.js/styles/github-dark.css";
-
-const props = withDefaults(
-  defineProps<{
-    code?: any;
-    lang?: string;
-  }>(),
-  { lang: "typescript" }
-);
-
-const codeAsText = computed(() => {
-  switch (typeof props.code) {
-    case "string":
-      return props.code;
-    case "function":
-      return String(props.code);
-    default:
-      return JSON.stringify(props.code, undefined, 2);
-  }
-});
-
-const codeAsHtml = computed(
-  () => HLJS.highlight(codeAsText.value, { language: props.lang }).value
-);
-</script>
-
-<style lang="postcss" scoped>
-.code-highlight {
-  display: inline-block;
-  padding: 0.3rem 0.6rem;
-  text-align: left;
-  border-radius: 0.6rem;
-}
-</style>

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

@@ -43,14 +43,14 @@
 
     <template #buttons>
       <UiButton transparent @click="addNewFilter">
-        {{ $t("add-or") }}
-      </UiButton>
+          {{ $t("add-or") }}
+        </UiButton>
       <UiButton :disabled="!isFilterValid" type="submit">
         {{ $t(editedFilter ? "update" : "add") }}
       </UiButton>
       <UiButton outlined @click="handleCancel">
-        {{ $t("cancel") }}
-      </UiButton>
+          {{ $t("cancel") }}
+        </UiButton>
     </template>
   </UiModal>
 </template>

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

@@ -17,7 +17,7 @@
     </UiActionButton>
   </UiFilterGroup>
 
-  <UiModal v-if="isOpen" :icon="faSort" @submit.prevent="handleSubmit">
+  <UiModal v-if="isOpen" @submit.prevent="handleSubmit" :icon="faSort">
     <div class="form-widgets">
       <FormWidget :label="$t('sort-by')">
         <select v-model="newSortProperty">
@@ -41,13 +41,21 @@
     <template #buttons>
       <UiButton type="submit">{{ $t("add") }}</UiButton>
       <UiButton outlined @click="handleCancel">
-        {{ $t("cancel") }}
-      </UiButton>
+          {{ $t("cancel") }}
+        </UiButton>
     </template>
   </UiModal>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+import type { ActiveSorts, Sorts } from "@/types/sort";
+import {
+  faCaretDown,
+  faCaretUp,
+  faPlus,
+  faSort,
+} from "@fortawesome/free-solid-svg-icons";
 import FormWidget from "@/components/FormWidget.vue";
 import UiActionButton from "@/components/ui/UiActionButton.vue";
 import UiButton from "@/components/ui/UiButton.vue";
@@ -56,18 +64,10 @@ import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
 import UiIcon from "@/components/ui/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";
 
 defineProps<{
   availableSorts: Sorts;
-  activeSorts: ActiveSorts<Record<string, any>>;
+  activeSorts: ActiveSorts;
 }>();
 
 const emit = defineEmits<{

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

@@ -66,11 +66,9 @@ const emit = defineEmits<{
 
 const isSelectable = computed(() => props.modelValue !== undefined);
 
-const { filters, addFilter, removeFilter, predicate } = useCollectionFilter({
-  queryStringParam: "filter",
-});
+const { filters, addFilter, removeFilter, predicate } = useCollectionFilter();
 const { sorts, addSort, removeSort, toggleSortDirection, compareFn } =
-  useCollectionSorter<Record<string, any>>({ queryStringParam: "sort" });
+  useCollectionSorter();
 
 const filteredCollection = useFilteredCollection(
   toRef(props, "collection"),

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

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

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

@@ -26,8 +26,8 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   before?: IconDefinition | string | object; // "object" added as workaround

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

@@ -1,47 +0,0 @@
-<template>
-  <div class="wrapper-spinner" v-if="!store.isReady">
-    <UiSpinner class="spinner" />
-  </div>
-  <ObjectNotFoundView :id="id" v-else-if="isRecordNotFound" />
-  <slot v-else />
-</template>
-<script lang="ts" setup>
-import ObjectNotFoundView from "@/views/ObjectNotFoundView.vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
-import { useHostStore } from "@/stores/host.store";
-import { useVmStore } from "@/stores/vm.store";
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-
-const storeByType = {
-  vm: useVmStore,
-  host: useHostStore,
-};
-
-const props = defineProps<{ objectType: "vm" | "host"; id?: string }>();
-
-const store = storeByType[props.objectType]();
-const { currentRoute } = useRouter();
-
-const id = computed(
-  () => props.id ?? (currentRoute.value.params.uuid as string)
-);
-const isRecordNotFound = computed(
-  () => store.isReady && !store.hasRecordByUuid(id.value)
-);
-</script>
-
-<style scoped>
-.wrapper-spinner {
-  display: flex;
-  height: 100%;
-}
-
-.spinner {
-  color: var(--color-extra-blue-base);
-  display: flex;
-  margin: auto;
-  width: 10rem;
-  height: 10rem;
-}
-</style>

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

@@ -3,8 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
-import type { PowerState } from "@/libs/xen-api";
+import { computed } from "vue";
 import {
   faMoon,
   faPause,
@@ -12,7 +11,8 @@ import {
   faQuestion,
   faStop,
 } from "@fortawesome/free-solid-svg-icons";
-import { computed } from "vue";
+import UiIcon from "@/components/ui/UiIcon.vue";
+import type { PowerState } from "@/libs/xen-api";
 
 const props = defineProps<{
   state: PowerState;

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="progress-bar-component">
+    <div class="progress-bar">
+      <div class="progress-bar-fill" />
+    </div>
+    <div class="badge" v-if="label !== undefined">
+      <span class="circle" />
+      {{ label }}
+      <UiBadge>{{ badgeLabel ?? progressWithUnit }}</UiBadge>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import UiBadge from "@/components/ui/UiBadge.vue";
+
+interface Props {
+  value: number;
+  badgeLabel?: string | number;
+  label?: string;
+  maxValue?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxValue: 100,
+});
+
+const progressWithUnit = computed(() => {
+  const progress = Math.round((props.value / props.maxValue) * 100);
+  return `${progress}%`;
+});
+</script>
+
+<style lang="postcss" scoped>
+.badge {
+  text-align: right;
+  margin: 1rem 0;
+}
+
+.circle {
+  display: inline-block;
+  height: 10px;
+  width: 10px;
+  background-color: #716ac6;
+  border-radius: 1rem;
+}
+
+.progress-bar {
+  overflow: hidden;
+  height: 1.2rem;
+  border-radius: 0.4rem;
+  background-color: var(--color-blue-scale-400);
+  margin: 1rem 0;
+}
+
+.progress-bar-fill {
+  transition: width 1s ease-in-out;
+  width: v-bind(progressWithUnit);
+  height: 1.2rem;
+  background-color: var(--color-extra-blue-d20);
+}
+</style>

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

@@ -1,23 +0,0 @@
-<template>
-  <span :title="date.toLocaleString()">{{ relativeTime }}</span>
-</template>
-
-<script lang="ts" setup>
-import useRelativeTime from "@/composables/relative-time.composable";
-import { useNow } from "@vueuse/core";
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    date: Date | number | string;
-    interval?: number;
-  }>(),
-  { interval: 1000 }
-);
-
-const date = computed(() => new Date(props.date));
-const now = useNow({ interval: props.interval });
-const relativeTime = useRelativeTime(date, now);
-</script>
-
-<style lang="postcss" scoped></style>

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

@@ -1,29 +0,0 @@
-<template>
-  <RouterLink
-    v-slot="{ isActive, href }"
-    :to="disabled || isTabBarDisabled ? '' : to"
-    custom
-  >
-    <UiTab :active="isActive" :disabled="disabled" :href="href" tag="a">
-      <slot />
-    </UiTab>
-  </RouterLink>
-</template>
-
-<script lang="ts" setup>
-import { type ComputedRef, computed, inject } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-import UiTab from "@/components/ui/UiTab.vue";
-
-const props = defineProps<{
-  to: RouteLocationRaw;
-  disabled?: boolean;
-}>();
-
-const isTabBarDisabled = inject<ComputedRef<boolean>>(
-  "isTabBarDisabled",
-  computed(() => false)
-);
-</script>
-
-<style lang="postcss" scoped></style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="tab-bar">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.tab-bar {
+  display: flex;
+  align-items: stretch;
+  height: 6.5rem;
+  background-color: var(--background-color-primary);
+  border-bottom: 1px solid var(--color-blue-scale-400);
+}
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <span v-if="disabled" class="tab-bar-item disabled">
+    <slot />
+  </span>
+  <RouterLink v-else class="tab-bar-item" v-bind="$props">
+    <slot />
+  </RouterLink>
+</template>
+
+<script lang="ts" setup>
+import type { RouterLinkProps } from "vue-router";
+
+// https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations
+interface Props extends RouterLinkProps {
+  disabled?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="postcss" scoped>
+.tab-bar-item {
+  font-size: 1.8rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  padding: 0 1.2em;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: var(--color-blue-scale-100);
+  border-bottom: 2px solid transparent;
+
+  &:hover:not(.disabled) {
+    border-bottom-color: var(--color-extra-blue-base);
+    background-color: var(--background-color-secondary);
+  }
+
+  &:active:not(.disabled) {
+    color: var(--color-extra-blue-base);
+    border-bottom-color: var(--color-extra-blue-base);
+    background-color: var(--background-color-secondary);
+  }
+
+  &.router-link-active {
+    color: var(--color-extra-blue-base);
+    border-bottom-color: var(--color-extra-blue-base);
+    background-color: var(--background-color-primary);
+  }
+
+  &.disabled {
+    color: var(--color-blue-scale-400);
+  }
+}
+</style>

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

@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import UiIcon from "@/components/ui/UiIcon.vue";
 
 defineProps<{
   icon: IconDefinition;
@@ -20,10 +20,6 @@ defineProps<{
 </script>
 
 <style lang="postcss" scoped>
-.actions {
-  margin-left: auto;
-}
-
 .title-bar {
   display: flex;
   align-items: center;

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

@@ -1,35 +1,24 @@
 <template>
-  <div>
-    <template v-if="data !== undefined">
-      <div
-        v-for="item in computedData.sortedArray"
-        :key="item.id"
-        class="progress-item"
-        :class="{
-          warning: item.value > MIN_WARNING_VALUE,
-          error: item.value > MIN_DANGEROUS_VALUE,
-        }"
-      >
-        <UiProgressBar :value="item.value" color="custom" />
-        <div class="legend">
-          <span class="circle" />
-          {{ item.label }}
-          <UiBadge class="badge">{{
-            item.badgeLabel ?? `${item.value}%`
-          }}</UiBadge>
-        </div>
-      </div>
-      <slot :total-percent="computedData.totalPercentUsage" name="footer" />
-    </template>
-    <UiSpinner v-else class="spinner" />
+  <div v-if="data.length !== 0">
+    <div class="header">
+      <slot name="header" />
+    </div>
+    <ProgressBar
+      v-for="item in computedData.sortedArray"
+      :key="item.id"
+      :value="item.value"
+      :label="item.label"
+      :badge-label="item.badgeLabel"
+    />
+    <div class="footer">
+      <slot name="footer" :total-percent="computedData.totalPercentUsage" />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import UiBadge from "@/components/ui/UiBadge.vue";
-import UiProgressBar from "@/components/ui/UiProgressBar.vue";
 import { computed } from "vue";
-import UiSpinner from "@/components/ui/UiSpinner.vue";
+import ProgressBar from "@/components/ProgressBar.vue";
 
 interface Data {
   id: string;
@@ -40,13 +29,10 @@ interface Data {
 }
 
 interface Props {
-  data?: Data[];
+  data: Array<Data>;
   nItems?: number;
 }
 
-const MIN_WARNING_VALUE = 80;
-const MIN_DANGEROUS_VALUE = 90;
-
 const props = defineProps<Props>();
 
 const computedData = computed(() => {
@@ -54,7 +40,7 @@ const computedData = computed(() => {
   let totalPercentUsage = 0;
   return {
     sortedArray: _data
-      ?.map((item) => {
+      .map((item) => {
         const value = Math.round((item.value / (item.maxValue ?? 100)) * 100);
         totalPercentUsage += value;
         return {
@@ -69,57 +55,40 @@ const computedData = computed(() => {
 });
 </script>
 
-<style lang="postcss" scoped>
-.spinner {
+<style scoped>
+.header {
   color: var(--color-extra-blue-base);
   display: flex;
-  margin: auto;
-  width: 40px;
-  height: 40px;
-}
-
-.legend {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin: 1.6em 0;
-}
-
-.badge {
-  font-size: 0.9em;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-extra-blue-base);
+  margin-bottom: 2rem;
+  font-size: 16px;
   font-weight: 700;
 }
-
-.progress-item:nth-child(1) {
-  --progress-bar-color: var(--color-extra-blue-d60);
-}
-
-.progress-item:nth-child(2) {
-  --progress-bar-color: var(--color-extra-blue-d40);
-}
-
-.progress-item:nth-child(3) {
-  --progress-bar-color: var(--color-extra-blue-d20);
-}
-
-.progress-item {
-  --progress-bar-height: 1.2rem;
-  --progress-bar-color: var(--color-extra-blue-l20);
-  --progress-bar-background-color: var(--color-blue-scale-400);
-  &.warning {
-    --progress-bar-color: var(--color-orange-world-base);
-  }
-  &.error {
-    --progress-bar-color: var(--color-red-vates-base);
-  }
-}
-
-.circle {
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 0.5rem;
-  background-color: var(--progress-bar-color);
+.footer {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--color-blue-scale-300);
+}
+</style>
+
+<style>
+.progress-bar-component:nth-of-type(2) .progress-bar-fill,
+.progress-bar-component:nth-of-type(2) .circle {
+  background-color: var(--color-extra-blue-d60);
+}
+.progress-bar-component:nth-of-type(3) .progress-bar-fill,
+.progress-bar-component:nth-of-type(3) .circle {
+  background-color: var(--color-extra-blue-d40);
+}
+.progress-bar-component:nth-of-type(4) .progress-bar-fill,
+.progress-bar-component:nth-of-type(4) .circle {
+  background-color: var(--color-extra-blue-d20);
+}
+.progress-bar-component .progress-bar-fill,
+.progress-bar-component .circle {
+  background-color: var(--color-extra-blue-l20);
 }
 </style>

@xen-orchestra/lite/src/components/charts/ChartSummary.vue

@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, inject } from "vue";
 import { percent } from "@/libs/utils";
-import { computed, type ComputedRef, inject } from "vue";
 
 const props = defineProps<{
   total: number;
@@ -34,9 +34,7 @@ const freePercent = computed(() =>
   percent(props.total - props.used, props.total)
 );
 
-const valueFormatter = inject("valueFormatter") as ComputedRef<
-  (value: number) => string
->;
+const valueFormatter = inject("valueFormatter") as (value: number) => string;
 </script>
 
 <style lang="postcss" scoped>

@xen-orchestra/lite/src/components/charts/LinearChart.md

@@ -18,15 +18,15 @@ const data: LinearChartData = [
   {
     label: "First series",
     data: [
-      { timestamp: 1670478371123, value: 1234 },
-      { timestamp: 1670478519751, value: 1234 },
+      { date: "...", value: 1234 },
+      { date: "...", value: 1234 },
     ],
   },
   {
     label: "Second series",
     data: [
-      { timestamp: 1670478519751, value: 1234 },
-      { timestamp: 167047555000, value: 1234 },
+      { date: "...", value: 1234 },
+      { date: "...", value: 1234 },
     ],
   },
 ];

@xen-orchestra/lite/src/components/charts/LinearChart.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script lang="ts" setup>
-import { utcFormat } from "d3-time-format";
 import type { EChartsOption } from "echarts";
 import { computed, provide } from "vue";
 import VueCharts from "vue-echarts";
@@ -23,27 +22,20 @@ import { CanvasRenderer } from "echarts/renderers";
 import type { OptionDataValue } from "echarts/types/src/util/types";
 import UiCard from "@/components/ui/UiCard.vue";
 
-const Y_AXIS_MAX_VALUE = 200;
-
 const props = defineProps<{
   title?: string;
   subtitle?: string;
   data: LinearChartData;
   valueFormatter?: (value: number) => string;
-  maxValue?: number;
 }>();
 
-const valueFormatter = computed(() => {
-  const formatter = props.valueFormatter;
+const valueFormatter = (value: OptionDataValue | OptionDataValue[]) => {
+  if (props.valueFormatter) {
+    return props.valueFormatter(value as number);
+  }
 
-  return (value: OptionDataValue | OptionDataValue[]) => {
-    if (formatter) {
-      return formatter(value as number);
-    }
-
-    return value.toString();
-  };
-});
+  return value.toString();
+};
 
 provide("valueFormatter", valueFormatter);
 
@@ -65,36 +57,33 @@ const option = computed<EChartsOption>(() => ({
     data: props.data.map((series) => series.label),
   },
   tooltip: {
-    valueFormatter: valueFormatter.value,
+    valueFormatter,
   },
   xAxis: {
     type: "time",
     axisLabel: {
-      formatter: (timestamp: number) =>
-        utcFormat("%a\n%I:%M\n%p")(new Date(timestamp)),
-      showMaxLabel: false,
-      showMinLabel: false,
+      showMinLabel: true,
+      showMaxLabel: true,
     },
   },
   yAxis: {
     type: "value",
     axisLabel: {
-      formatter: valueFormatter.value,
+      formatter: valueFormatter,
     },
-    max: props.maxValue ?? Y_AXIS_MAX_VALUE,
   },
   series: props.data.map((series, index) => ({
     type: "line",
     name: series.label,
     zlevel: index + 1,
-    data: series.data.map((item) => [item.timestamp, item.value]),
+    data: series.data.map((item) => [item.date, item.value]),
   })),
 }));
 </script>
 
 <style lang="postcss" scoped>
 .chart {
-  width: 100%;
+  width: 50rem;
   height: 30rem;
 }
 </style>

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

@@ -6,7 +6,6 @@
   >
     <input
       v-model="value"
-      :class="{ indeterminate: type === 'checkbox' && value === undefined }"
       :disabled="isLabelDisabled || disabled"
       :type="type === 'radio' ? 'radio' : 'checkbox'"
       class="input"
@@ -33,7 +32,7 @@ import {
   inject,
   ref,
 } from "vue";
-import { faCheck, faCircle, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCircle } from "@fortawesome/free-solid-svg-icons";
 import { useVModel } from "@vueuse/core";
 import UiIcon from "@/components/ui/UiIcon.vue";
 
@@ -54,17 +53,7 @@ const value = useVModel(props, "modelValue", emit);
 const type = inject<"checkbox" | "radio" | "toggle">("inputType", "checkbox");
 const hasLabel = inject("hasLabel", false);
 const isLabelDisabled = inject("isLabelDisabled", ref(false));
-const icon = computed(() => {
-  if (type !== "checkbox") {
-    return faCircle;
-  }
-
-  if (value.value === undefined) {
-    return faMinus;
-  }
-
-  return faCheck;
-});
+const icon = computed(() => (type === "checkbox" ? faCheck : faCircle));
 </script>
 
 <style lang="postcss" scoped>
@@ -85,11 +74,6 @@ const icon = computed(() => {
 .form-checkbox {
   --checkbox-border-radius: 0.25em;
   --checkbox-icon-size: 1em;
-
-  .input.indeterminate + .fake-checkbox > .icon {
-    opacity: 1;
-    color: var(--color-blue-scale-300);
-  }
 }
 
 .form-checkbox,
@@ -125,8 +109,8 @@ const icon = computed(() => {
   }
 
   .icon {
-    transition: transform 0.125s ease-in-out;
     transform: translateX(-0.7em);
+    transition: transform 0.125s ease-in-out;
   }
 
   .input:checked + .fake-checkbox > .icon {
@@ -156,12 +140,12 @@ const icon = computed(() => {
   align-items: center;
   justify-content: center;
   height: 1.25em;
-  transition: background-color 0.125s ease-in-out,
-    border-color 0.125s ease-in-out;
   border: var(--checkbox-border-width) solid var(--border-color);
   border-radius: var(--checkbox-border-radius);
   background-color: var(--background-color);
   box-shadow: var(--shadow-100);
+  transition: background-color 0.125s ease-in-out,
+    border-color 0.125s ease-in-out;
 
   --border-color: var(--color-blue-scale-400);
 }