feat(xen-api/putResource): can ignore connection premature close

This is opt-in via the `ignorePrematureClose` option.

.gitignore

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

@vates/async-each/README.md

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

@vates/async-each/package.json

@@ -33,7 +33,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^14.0.1",
+    "sinon": "^15.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):
 
-```
-> npm install --save @vates/cached-dns.lookup
+```sh
+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):
 
-```
-> npm install --save @vates/coalesce-calls
+```sh
+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):
 
-```
-> npm install --save @vates/compose
+```sh
+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):
 
-```
-> npm install --save @vates/decorate-with
+```sh
+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):
 
-```
-> npm install --save @vates/disposable
+```sh
+npm install --save @vates/disposable
 ```
 
 ## Usage

@vates/disposable/package.json

@@ -14,7 +14,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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.5.0",
+    "@xen-orchestra/log": "^0.6.0",
     "ensure-array": "^1.0.0"
   },
   "devDependencies": {
-    "sinon": "^14.0.1",
+    "sinon": "^15.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):
 
-```
-> npm install --save @vates/event-listeners-manager
+```sh
+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.0"
+    "vhd-lib": "^4.2.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):
 
-```
-> npm install --save @vates/multi-key-map
+```sh
+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):
 
-```
-> npm install --save @vates/nbd-client
+```sh
+npm install --save @vates/nbd-client
 ```
 
 ## Usage

@vates/nbd-client/index.js

@@ -16,6 +16,7 @@ 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')
@@ -89,6 +90,11 @@ 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.0",
+  "version": "1.0.1",
   "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.2"
+    "xen-api": "^1.2.3"
   },
   "devDependencies": {
     "tap": "^16.3.0",

@vates/otp/README.md

@@ -10,8 +10,8 @@
 
 Installation of the [npm package](https://npmjs.org/package/@vates/otp):
 
-```
-> npm install --save @vates/otp
+```sh
+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):
 
-```
-> npm install --save @vates/parse-duration
+```sh
+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):
 
-```
-> npm install --save @vates/predicates
+```sh
+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):
 
-```
-> npm install --save @vates/read-chunk
+```sh
+npm install --save @vates/read-chunk
 ```
 
 ## Usage

@vates/task/.USAGE.md

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

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

@vates/task/README.md

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

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

@@ -0,0 +1,23 @@
+{
+  "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):
 
-```
-> npm install --save @vates/toggle-scripts
+```sh
+npm install --save @vates/toggle-scripts
 ```
 
 ## Usage

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

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

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

@@ -35,7 +35,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^14.0.1",
+    "sinon": "^15.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):
 
-```
-> npm install --save @xen-orchestra/audit-core
+```sh
+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.2",
+  "version": "0.2.3",
   "engines": {
     "node": ">=14"
   },
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@vates/decorate-with": "^2.0.0",
-    "@xen-orchestra/log": "^0.5.0",
+    "@xen-orchestra/log": "^0.6.0",
     "golike-defer": "^0.5.1",
     "object-hash": "^2.0.1"
   },

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

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

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

@@ -7,8 +7,8 @@
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
   "dependencies": {
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/backups": "^0.29.2",
-    "@xen-orchestra/fs": "^3.3.0",
+    "@xen-orchestra/backups": "^0.29.6",
+    "@xen-orchestra/fs": "^3.3.1",
     "filenamify": "^4.1.0",
     "getopts": "^2.2.5",
     "lodash": "^4.17.15",

@xen-orchestra/backups/Backup.js

@@ -38,7 +38,7 @@ const DEFAULT_VM_SETTINGS = {
   fullInterval: 0,
   healthCheckSr: undefined,
   healthCheckVmsWithTags: [],
-  maxMergedDeltasPerRun: 2,
+  maxMergedDeltasPerRun: Infinity,
   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):
 
-```
-> npm install --save @xen-orchestra/backups
+```sh
+npm install --save @xen-orchestra/backups
 ```
 
 ## Contributions

@xen-orchestra/backups/RemoteAdapter.js

@@ -28,6 +28,7 @@ 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')
@@ -232,21 +233,23 @@ class RemoteAdapter {
     return promise
   }
 
-  #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 #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]
+          }
+        })
+    )
   }
 
   async deleteDeltaVmBackups(backups) {
@@ -255,7 +258,7 @@ class RemoteAdapter {
     // this will delete the json, unused VHDs will be detected by `cleanVm`
     await asyncMapSettled(backups, ({ _filename }) => handler.unlink(_filename))
 
-    this.#removeVmBackupsFromCache(backups)
+    await this.#removeVmBackupsFromCache(backups)
   }
 
   async deleteMetadataBackup(backupId) {
@@ -284,7 +287,7 @@ class RemoteAdapter {
       Promise.all([handler.unlink(_filename), handler.unlink(resolveRelativeFromFile(_filename, xva))])
     )
 
-    this.#removeVmBackupsFromCache(backups)
+    await this.#removeVmBackupsFromCache(backups)
   }
 
   deleteVmBackup(file) {
@@ -641,7 +644,7 @@ class RemoteAdapter {
     })
 
     // will not throw
-    this._updateCache(this.#getVmBackupsCache(vmUuid), backups => {
+    await this._updateCache(this.#getVmBackupsCache(vmUuid), backups => {
       debug('adding cache entry', { entry: path })
       backups[path] = {
         ...metadata,
@@ -659,7 +662,7 @@ class RemoteAdapter {
     const handler = this._handler
     if (this.#useVhdDirectory()) {
       const dataPath = `${dirname(path)}/data/${uuidv4()}.vhd`
-      await createVhdDirectoryFromStream(handler, dataPath, input, {
+      const size = await createVhdDirectoryFromStream(handler, dataPath, input, {
         concurrency: writeBlockConcurrency,
         compression: this.#getCompressionType(),
         async validator() {
@@ -669,12 +672,14 @@ class RemoteAdapter {
         nbdClient,
       })
       await VhdAbstract.createAlias(handler, path, dataPath)
+      return size
     } else {
-      await this.outputStream(path, input, { checksum, validator })
+      return 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,
@@ -683,6 +688,7 @@ 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.js').catchGlobalErrors(
+require('@xen-orchestra/log/configure').catchGlobalErrors(
   require('@xen-orchestra/log').createLogger('xo:backups:worker')
 )
 

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

@@ -31,7 +31,7 @@ beforeEach(async () => {
 })
 
 afterEach(async () => {
-  await pFromCallback(cb => rimraf(tempDir, cb))
+  await rimraf(tempDir)
   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], `incorrect backup size in metadata`)
+  assert.equal(loggued[0], `unexpected number of entries in backup cache`)
 
   loggued = []
   await adapter.cleanVm(rootPath, { remove: true, merge: true, logInfo, logWarn: () => {}, lock: false })
@@ -378,7 +378,19 @@ 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,6 +258,9 @@ 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,7 +1,6 @@
 'use strict'
 
-const eos = require('end-of-stream')
-const { PassThrough } = require('stream')
+const { finished, PassThrough } = require('node:stream')
 
 const { debug } = require('@xen-orchestra/log').createLogger('xo:backups:forkStreamUnpipe')
 
@@ -9,29 +8,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(stream) {
-  const { forks = 0 } = stream
-  stream.forks = forks + 1
+exports.forkStreamUnpipe = function forkStreamUnpipe(source) {
+  const { forks = 0 } = source
+  source.forks = forks + 1
 
-  debug('forking', { forks: stream.forks })
+  debug('forking', { forks: source.forks })
 
-  const proxy = new PassThrough()
-  stream.pipe(proxy)
-  eos(stream, error => {
+  const fork = new PassThrough()
+  source.pipe(fork)
+  finished(source, { writable: false }, error => {
     if (error !== undefined) {
       debug('error on original stream, destroying fork', { error })
-      proxy.destroy(error)
+      fork.destroy(error)
     }
   })
-  eos(proxy, error => {
-    debug('end of stream, unpiping', { error, forks: --stream.forks })
+  finished(fork, { readable: false }, error => {
+    debug('end of stream, unpiping', { error, forks: --source.forks })
 
-    stream.unpipe(proxy)
+    source.unpipe(fork)
 
-    if (stream.forks === 0) {
+    if (source.forks === 0) {
       debug('no more forks, destroying original stream')
-      stream.destroy(new Error('no more consumers for this stream'))
+      source.destroy(new Error('no more consumers for this stream'))
     }
   })
-  return proxy
+  return fork
 }

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

@@ -4,7 +4,7 @@
 
 'use strict'
 
-const { catchGlobalErrors } = require('@xen-orchestra/log/configure.js')
+const { catchGlobalErrors } = require('@xen-orchestra/log/configure')
 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.2",
+  "version": "0.29.6",
   "engines": {
     "node": ">=14.6"
   },
@@ -21,38 +21,37 @@
     "@vates/cached-dns.lookup": "^1.0.0",
     "@vates/compose": "^2.1.0",
     "@vates/decorate-with": "^2.0.0",
-    "@vates/disposable": "^0.1.3",
+    "@vates/disposable": "^0.1.4",
     "@vates/fuse-vhd": "^1.0.0",
-    "@vates/nbd-client": "*",
+    "@vates/nbd-client": "^1.0.1",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/fs": "^3.3.0",
-    "@xen-orchestra/log": "^0.5.0",
+    "@xen-orchestra/fs": "^3.3.1",
+    "@xen-orchestra/log": "^0.6.0",
     "@xen-orchestra/template": "^0.1.0",
     "compare-versions": "^5.0.1",
     "d3-time-format": "^3.0.0",
     "decorator-synchronized": "^0.6.0",
-    "end-of-stream": "^1.4.4",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.1.0",
     "golike-defer": "^0.5.1",
     "limit-concurrency-decorator": "^0.5.0",
     "lodash": "^4.17.20",
     "node-zone": "^0.4.0",
-    "parse-pairs": "^1.1.0",
+    "parse-pairs": "^2.0.0",
     "promise-toolbox": "^0.21.0",
     "proper-lockfile": "^4.1.2",
     "uuid": "^9.0.0",
-    "vhd-lib": "^4.2.0",
+    "vhd-lib": "^4.2.1",
     "yazl": "^2.5.1"
   },
   "devDependencies": {
-    "rimraf": "^3.0.2",
-    "sinon": "^14.0.1",
+    "rimraf": "^4.1.1",
+    "sinon": "^15.0.1",
     "test": "^3.2.1",
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^1.5.3"
+    "@xen-orchestra/xapi": "^1.6.1"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

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

@@ -7,11 +7,12 @@ 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')
@@ -21,16 +22,15 @@ const { packUuid } = require('./_packUuid.js')
 const { Disposable } = require('promise-toolbox')
 const NbdClient = require('@vates/nbd-client')
 
-const { debug, warn } = createLogger('xo:backups:DeltaBackupWriter')
+const { debug, warn, info } = createLogger('xo:backups:DeltaBackupWriter')
 
-exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
+class DeltaBackupWriter extends MixinBackupWriter(AbstractDeltaWriter) {
   async checkBaseVdis(baseUuidToSrcVdi) {
     const { handler } = this._adapter
     const backup = this._backup
     const adapter = this._adapter
 
-    const backupDir = getVmBackupDir(backup.vm.uuid)
-    const vdisDir = `${backupDir}/vdis/${backup.job.id}`
+    const vdisDir = `${this._vmBackupDir}/vdis/${backup.job.id}`
 
     await asyncMap(baseUuidToSrcVdi, async ([baseUuid, srcVdi]) => {
       let found = false
@@ -135,7 +135,7 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
     }
   }
 
-  async _transfer({ timestamp, deltaExport, sizeContainers }) {
+  async _transfer($defer, { timestamp, deltaExport }) {
     const adapter = this._adapter
     const backup = this._backup
 
@@ -143,7 +143,6 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
 
     const jobId = job.id
     const handler = adapter.handler
-    const backupDir = getVmBackupDir(vm.uuid)
 
     // TODO: clean VM backup directory
 
@@ -175,9 +174,10 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
     }
 
     const { size } = await Task.run({ name: 'transfer' }, async () => {
+      let transferSize = 0
       await Promise.all(
         map(deltaExport.vdis, async (vdi, id) => {
-          const path = `${backupDir}/${vhds[id]}`
+          const path = `${this._vmBackupDir}/${vhds[id]}`
 
           const isDelta = vdi.other_config['xo:base_delta'] !== undefined
           let parentPath
@@ -203,21 +203,30 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
           const vdiRef = vm.$xapi.getObject(vdi.uuid).$ref
 
           let nbdClient
-          if (!this._backup.config.useNbd) {
+          if (this._backup.config.useNbd) {
+            debug('useNbd is enabled', { vdi: id, path })
             // 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()
-              debug(`got nbd connection `, { vdi: vdi.uuid })
+
+              // 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 })
             } catch (error) {
               nbdClient = undefined
-              debug(`can't connect to nbd server or no server available`, { error })
+              warn('error connecting to NBD server', { error, vdi: id, path })
             }
+          } else {
+            debug('useNbd is disabled', { vdi: id, path })
           }
 
-          await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
+          transferSize += await adapter.writeVhd(path, deltaExport.streams[`${id}.vhd`], {
             // no checksum for VHDs, because they will be invalidated by
             // merges and chainings
             checksum: false,
@@ -238,9 +247,7 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
           })
         })
       )
-      return {
-        size: Object.values(sizeContainers).reduce((sum, { size }) => sum + size, 0),
-      }
+      return { size: transferSize }
     })
     metadataContent.size = size
     this._metadataFileName = await adapter.writeVmBackupMetadata(vm.uuid, metadataContent)
@@ -248,3 +255,6 @@ exports.DeltaBackupWriter = class DeltaBackupWriter extends MixinBackupWriter(Ab
     // TODO: run cleanup?
   }
 }
+exports.DeltaBackupWriter = decorateClass(DeltaBackupWriter, {
+  _transfer: defer,
+})

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

@@ -2,7 +2,6 @@
 
 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')
@@ -34,7 +33,6 @@ 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
 
@@ -47,7 +45,7 @@ exports.FullBackupWriter = class FullBackupWriter extends MixinBackupWriter(Abst
     const basename = formatFilenameDate(timestamp)
 
     const dataBasename = basename + '.xva'
-    const dataFilename = backupDir + '/' + dataBasename
+    const dataFilename = this._vmBackupDir + '/' + dataBasename
 
     const metadata = {
       jobId: job.id,

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

@@ -16,7 +16,6 @@ const { info, warn } = createLogger('xo:backups:MixinBackupWriter')
 exports.MixinBackupWriter = (BaseClass = Object) =>
   class MixinBackupWriter extends BaseClass {
     #lock
-    #vmBackupDir
 
     constructor({ remoteId, ...rest }) {
       super(rest)
@@ -24,13 +23,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,
@@ -50,7 +49,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):
 
-```
-> npm install --global @xen-orchestra/cr-seed-cli
+```sh
+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.2"
+    "xen-api": "^1.2.3"
   },
   "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):
 
-```
-> npm install --save @xen-orchestra/cron
+```sh
+npm install --save @xen-orchestra/cron
 ```
 
 ## Usage

@xen-orchestra/cron/package.json

@@ -42,7 +42,7 @@
     "test": "node--test"
   },
   "devDependencies": {
-    "sinon": "^14.0.1",
+    "sinon": "^15.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):
 
-```
-> npm install --save @xen-orchestra/defined
+```sh
+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):
 
-```
-> npm install --save @xen-orchestra/emit-async
+```sh
+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):
 
-```
-> npm install --global @xen-orchestra/fs
+```sh
+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.0",
+  "version": "3.3.1",
   "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.5.0",
+    "@xen-orchestra/log": "^0.6.0",
     "bind-property-descriptor": "^2.0.0",
     "decorator-synchronized": "^0.6.0",
     "execa": "^5.0.0",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^11.1.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": "^3.0.0",
+    "rimraf": "^4.1.1",
     "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('@xen-orchestra:fs')
+const { info, warn } = createLogger('xo:fs:abstract')
 
 const checksumFile = file => file + '.checksum'
 const computeRate = (hrtime, size) => {

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

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

@xen-orchestra/lite/CHANGELOG.md

@@ -6,6 +6,11 @@
 - 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/package.json

@@ -49,6 +49,7 @@
     "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",

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

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

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

@@ -13,6 +13,12 @@
         <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 />
@@ -20,9 +26,9 @@
   <div v-else>
     <AppHeader />
     <div style="display: flex">
-      <nav class="nav">
-        <InfraPoolList />
-      </nav>
+      <transition name="slide">
+        <AppNavigation />
+      </transition>
       <main class="main">
         <RouterView />
       </main>
@@ -32,6 +38,7 @@
 </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";
@@ -42,7 +49,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 InfraPoolList from "@/components/infra/InfraPoolList.vue";
+import UiButton from "@/components/ui/UiButton.vue";
 import UiModal from "@/components/ui/UiModal.vue";
 import { useChartTheme } from "@/composables/chart-theme.composable";
 import { useHostStore } from "@/stores/host.store";
@@ -105,19 +112,20 @@ watch(
 );
 
 const isSslModalOpen = computed(() => unreachableHostsUrls.value.length > 0);
+const reload = () => window.location.reload();
 </script>
 
 <style lang="postcss">
 @import "@/assets/base.css";
 
-.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);
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(-37rem);
 }
 
 .main {

@xen-orchestra/lite/src/assets/_responsive.pcss

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

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

@@ -1,5 +1,11 @@
 <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>
@@ -12,6 +18,17 @@
 
 <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);
 </script>
 
 <style lang="postcss" scoped>

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

@@ -2,15 +2,24 @@
   <div class="app-login form-container">
     <form @submit.prevent="handleSubmit">
       <img alt="XO Lite" src="../assets/logo-title.svg" />
-      <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">
+      <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"
+      >
         {{ $t("login") }}
       </UiButton>
     </form>
@@ -19,21 +28,47 @@
 
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import FormInput from "@/components/form/FormInput.vue";
+import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
 import UiButton from "@/components/ui/UiButton.vue";
 import { useXenApiStore } from "@/stores/xen-api.store";
 
+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() {
-  await xenApiStore.connect(login.value, password.value);
+  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);
+    }
+  }
 }
 </script>
 
@@ -50,6 +85,7 @@ async function handleSubmit() {
 
 form {
   display: flex;
+  font-size: 2rem;
   min-width: 30em;
   max-width: 100%;
   align-items: center;
@@ -72,12 +108,6 @@ img {
   margin-bottom: 5rem;
 }
 
-label {
-  font-size: 120%;
-  font-weight: bold;
-  margin: 1.5rem 0 0.5rem 0;
-}
-
 input {
   width: 45rem;
   max-width: 100%;
@@ -89,6 +119,6 @@ input {
 }
 
 button {
-  margin-top: 3rem;
+  margin-top: 2rem;
 }
 </style>

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

@@ -0,0 +1,57 @@
+<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/CollectionSorter.vue

@@ -7,7 +7,7 @@
       @remove="emit('removeSort', property)"
     >
       <span class="property">
-        <FontAwesomeIcon :icon="isAscending ? faCaretUp : faCaretDown" />
+        <UiIcon :icon="isAscending ? faCaretUp : faCaretDown" />
         {{ property }}
       </span>
     </UiFilter>
@@ -17,7 +17,7 @@
     </UiActionButton>
   </UiFilterGroup>
 
-  <UiModal v-if="isOpen" @submit.prevent="handleSubmit" :icon="faSort">
+  <UiModal v-if="isOpen" :icon="faSort" @submit.prevent="handleSubmit">
     <div class="form-widgets">
       <FormWidget :label="$t('sort-by')">
         <select v-model="newSortProperty">
@@ -48,7 +48,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import FormWidget from "@/components/FormWidget.vue";
+import UiActionButton from "@/components/ui/UiActionButton.vue";
+import UiButton from "@/components/ui/UiButton.vue";
+import UiFilter from "@/components/ui/UiFilter.vue";
+import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
+import UiIcon from "@/components/ui/UiIcon.vue";
+import UiModal from "@/components/ui/UiModal.vue";
+import useModal from "@/composables/modal.composable";
 import type { ActiveSorts, Sorts } from "@/types/sort";
 import {
   faCaretDown,
@@ -56,17 +63,11 @@ import {
   faPlus,
   faSort,
 } from "@fortawesome/free-solid-svg-icons";
-import FormWidget from "@/components/FormWidget.vue";
-import UiButton from "@/components/ui/UiButton.vue";
-import UiActionButton from "@/components/ui/UiActionButton.vue";
-import UiFilter from "@/components/ui/UiFilter.vue";
-import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
-import UiModal from "@/components/ui/UiModal.vue";
-import useModal from "@/composables/modal.composable";
+import { ref } from "vue";
 
 defineProps<{
   availableSorts: Sorts;
-  activeSorts: ActiveSorts;
+  activeSorts: ActiveSorts<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

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

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

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

@@ -2,7 +2,7 @@
   <th>
     <div class="content">
       <span class="label">
-        <FontAwesomeIcon v-if="icon" :icon="icon" />
+        <UiIcon :icon="icon" />
         <slot />
       </span>
     </div>
@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

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

@@ -8,7 +8,7 @@
     <span class="widget">
       <span v-if="before || $slots.before" class="before">
         <slot name="before">
-          <FontAwesomeIcon v-if="isIcon(before)" :icon="before" fixed-width />
+          <UiIcon v-if="isIcon(before)" :icon="before" fixed-width />
           <template v-else>{{ before }}</template>
         </slot>
       </span>
@@ -17,7 +17,7 @@
       </span>
       <span v-if="after || $slots.after" class="after">
         <slot name="after">
-          <FontAwesomeIcon v-if="isIcon(after)" :icon="after" fixed-width />
+          <UiIcon v-if="isIcon(after)" :icon="after" fixed-width />
           <template v-else>{{ after }}</template>
         </slot>
       </span>
@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

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

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

@@ -1,9 +1,10 @@
 <template>
-  <FontAwesomeIcon class="power-state-icon" :class="className" :icon="icon" />
+  <UiIcon :class="className" :icon="icon" class="power-state-icon" />
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import UiIcon from "@/components/ui/UiIcon.vue";
+import type { PowerState } from "@/libs/xen-api";
 import {
   faMoon,
   faPause,
@@ -11,7 +12,7 @@ import {
   faQuestion,
   faStop,
 } from "@fortawesome/free-solid-svg-icons";
-import type { PowerState } from "@/libs/xen-api";
+import { computed } from "vue";
 
 const props = defineProps<{
   state: PowerState;
@@ -29,7 +30,7 @@ const icon = computed(() => icons[props.state] ?? faQuestion);
 const className = computed(() => `state-${props.state.toLocaleLowerCase()}`);
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .power-state-icon {
   color: var(--color-extra-blue-d60);
 

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

@@ -0,0 +1,23 @@
+<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/TabBar.vue

@@ -11,5 +11,7 @@
   height: 6.5rem;
   background-color: var(--background-color-primary);
   border-bottom: 1px solid var(--color-blue-scale-400);
+  max-width: 100%;
+  overflow: auto;
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="title-bar">
-    <FontAwesomeIcon :icon="icon" class="icon" />
+    <UiIcon :icon="icon" class="icon" />
     <div class="title">
       <slot />
     </div>
@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{
@@ -19,6 +20,10 @@ 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,13 +1,14 @@
 <template>
   <div>
-    <div class="header">
-      <slot name="header" />
-    </div>
-    <div v-if="data !== undefined">
+    <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">
@@ -18,10 +19,8 @@
           }}</UiBadge>
         </div>
       </div>
-      <div class="footer">
-        <slot :total-percent="computedData.totalPercentUsage" name="footer" />
-      </div>
-    </div>
+      <slot :total-percent="computedData.totalPercentUsage" name="footer" />
+    </template>
     <UiSpinner v-else class="spinner" />
   </div>
 </template>
@@ -45,6 +44,9 @@ interface Props {
   nItems?: number;
 }
 
+const MIN_WARNING_VALUE = 80;
+const MIN_DANGEROUS_VALUE = 90;
+
 const props = defineProps<Props>();
 
 const computedData = computed(() => {
@@ -67,24 +69,7 @@ const computedData = computed(() => {
 });
 </script>
 
-<style scoped>
-.header {
-  color: var(--color-extra-blue-base);
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--color-extra-blue-base);
-  margin-bottom: 2rem;
-  font-size: 16px;
-  font-weight: 700;
-}
-.footer {
-  display: flex;
-  justify-content: space-between;
-  font-weight: 700;
-  font-size: 14px;
-  color: var(--color-blue-scale-300);
-}
-
+<style lang="postcss" scoped>
 .spinner {
   color: var(--color-extra-blue-base);
   display: flex;
@@ -106,12 +91,6 @@ const computedData = computed(() => {
   font-weight: 700;
 }
 
-.progress-item {
-  --progress-bar-height: 1.2rem;
-  --progress-bar-color: var(--color-extra-blue-l20);
-  --progress-bar-background-color: var(--color-blue-scale-400);
-}
-
 .progress-item:nth-child(1) {
   --progress-bar-color: var(--color-extra-blue-d60);
 }
@@ -124,6 +103,18 @@ const computedData = computed(() => {
   --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;

@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,7 +34,9 @@ const freePercent = computed(() =>
   percent(props.total - props.used, props.total)
 );
 
-const valueFormatter = inject("valueFormatter") as (value: number) => string;
+const valueFormatter = inject("valueFormatter") as ComputedRef<
+  (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: [
-      { date: "...", value: 1234 },
-      { date: "...", value: 1234 },
+      { timestamp: 1670478371123, value: 1234 },
+      { timestamp: 1670478519751, value: 1234 },
     ],
   },
   {
     label: "Second series",
     data: [
-      { date: "...", value: 1234 },
-      { date: "...", value: 1234 },
+      { timestamp: 1670478519751, value: 1234 },
+      { timestamp: 167047555000, value: 1234 },
     ],
   },
 ];

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

@@ -6,6 +6,7 @@
 </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";
@@ -22,20 +23,27 @@ 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 = (value: OptionDataValue | OptionDataValue[]) => {
-  if (props.valueFormatter) {
-    return props.valueFormatter(value as number);
-  }
+const valueFormatter = computed(() => {
+  const formatter = props.valueFormatter;
 
-  return value.toString();
-};
+  return (value: OptionDataValue | OptionDataValue[]) => {
+    if (formatter) {
+      return formatter(value as number);
+    }
+
+    return value.toString();
+  };
+});
 
 provide("valueFormatter", valueFormatter);
 
@@ -57,33 +65,36 @@ const option = computed<EChartsOption>(() => ({
     data: props.data.map((series) => series.label),
   },
   tooltip: {
-    valueFormatter,
+    valueFormatter: valueFormatter.value,
   },
   xAxis: {
     type: "time",
     axisLabel: {
-      showMinLabel: true,
-      showMaxLabel: true,
+      formatter: (timestamp: number) =>
+        utcFormat("%a\n%I:%M\n%p")(new Date(timestamp)),
+      showMaxLabel: false,
+      showMinLabel: false,
     },
   },
   yAxis: {
     type: "value",
     axisLabel: {
-      formatter: valueFormatter,
+      formatter: valueFormatter.value,
     },
+    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.date, item.value]),
+    data: series.data.map((item) => [item.timestamp, item.value]),
   })),
 }));
 </script>
 
 <style lang="postcss" scoped>
 .chart {
-  width: 50rem;
+  width: 100%;
   height: 30rem;
 }
 </style>

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

@@ -6,6 +6,7 @@
       :class="inputClass"
       :disabled="disabled || isLabelDisabled"
       class="input"
+      ref="inputElement"
       v-bind="$attrs"
     />
     <template v-else>
@@ -14,6 +15,7 @@
         :class="inputClass"
         :disabled="disabled || isLabelDisabled"
         class="select"
+        ref="inputElement"
         v-bind="$attrs"
       >
         <slot />
@@ -70,6 +72,8 @@ interface Props extends Omit<InputHTMLAttributes, ""> {
 
 const props = withDefaults(defineProps<Props>(), { color: "info" });
 
+const inputElement = ref();
+
 const emit = defineEmits<{
   (event: "update:modelValue", value: any): void;
 }>();
@@ -78,6 +82,10 @@ const value = useVModel(props, "modelValue", emit);
 const empty = computed(() => isEmpty(props.modelValue));
 const isSelect = inject("isSelect", false);
 const isLabelDisabled = inject("isLabelDisabled", ref(false));
+const color = inject(
+  "color",
+  computed(() => undefined)
+);
 
 const wrapperClass = computed(() => [
   isSelect ? "form-select" : "form-input",
@@ -88,13 +96,19 @@ const wrapperClass = computed(() => [
 ]);
 
 const inputClass = computed(() => [
-  props.color,
+  color.value ?? props.color,
   {
     right: props.right,
     "has-before": props.before !== undefined,
     "has-after": props.after !== undefined,
   },
 ]);
+
+const focus = () => inputElement.value.focus();
+
+defineExpose({
+  focus,
+});
 </script>
 
 <style lang="postcss" scoped>

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="wrapper">
+    <label
+      v-if="$slots.label"
+      class="form-label"
+      :class="{ disabled, ...formInputWrapperClass }"
+    >
+      <slot />
+    </label>
+    <slot />
+    <p v-if="hasError || hasWarning" :class="formInputWrapperClass">
+      <UiIcon :icon="faCircleExclamation" v-if="hasError" />{{
+        error ?? warning
+      }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, useSlots } from "vue";
+import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
+import UiIcon from "@/components/ui/UiIcon.vue";
+
+const slots = useSlots();
+
+const props = defineProps<{
+  disabled?: boolean;
+  error?: string;
+  warning?: string;
+}>();
+
+provide("hasLabel", slots.label !== undefined);
+provide(
+  "isLabelDisabled",
+  computed(() => props.disabled)
+);
+
+const hasError = computed(
+  () => props.error !== undefined && props.error.trim() !== ""
+);
+const hasWarning = computed(
+  () => props.warning !== undefined && props.warning.trim() !== ""
+);
+
+provide(
+  "color",
+  computed(() =>
+    hasError.value ? "error" : hasWarning.value ? "warning" : undefined
+  )
+);
+
+const formInputWrapperClass = computed(() => ({
+  error: hasError.value,
+  warning: !hasError.value && hasWarning.value,
+}));
+</script>
+
+<style lang="postcss" scoped>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper :deep(.input) {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  font-size: 1.6rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625em;
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--color-blue-scale-300);
+  }
+}
+p.error,
+p.warning {
+  font-size: 0.65em;
+  margin-bottom: 1rem;
+}
+
+.error {
+  color: var(--color-red-vates-base);
+}
+
+.warning {
+  color: var(--color-orange-world-base);
+}
+
+p svg {
+  margin-right: 0.4em;
+}
+</style>

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

@@ -1,33 +0,0 @@
-<template>
-  <label :class="{ disabled }" class="form-label">
-    <slot />
-  </label>
-</template>
-
-<script lang="ts" setup>
-import { computed, provide } from "vue";
-
-const props = defineProps<{
-  disabled?: boolean;
-}>();
-
-provide("hasLabel", true);
-provide(
-  "isLabelDisabled",
-  computed(() => props.disabled)
-);
-</script>
-
-<style lang="postcss" scoped>
-.form-label {
-  font-size: 1.6rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.625em;
-
-  &.disabled {
-    cursor: not-allowed;
-    color: var(--color-blue-scale-300);
-  }
-}
-</style>

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

@@ -1,12 +1,13 @@
 <template>
   <div class="infra-action">
     <slot>
-      <FontAwesomeIcon :icon="icon" fixed-width />
+      <UiIcon :icon="icon" fixed-width />
     </slot>
   </div>
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

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

@@ -8,7 +8,7 @@
       v-bind="$attrs"
     >
       <a :href="href" class="link" @click="navigate">
-        <FontAwesomeIcon :icon="icon" class="icon" />
+        <UiIcon :icon="icon" class="icon" />
         <div class="text">
           <slot />
         </div>
@@ -21,8 +21,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { RouteLocationRaw } from "vue-router";
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import type { RouteLocationRaw } from "vue-router";
 
 defineProps<{
   icon: IconDefinition;

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

@@ -2,7 +2,7 @@
   <li class="infra-loading-item">
     <div class="infra-item-label-placeholder">
       <div class="link-placeholder">
-        <FontAwesomeIcon :icon="icon" class="icon" />
+        <UiIcon :icon="icon" class="icon" />
         <div class="loader">&nbsp;</div>
       </div>
     </div>
@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/UiIcon.vue";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
 defineProps<{

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

@@ -12,7 +12,13 @@
     </MenuTrigger>
     <AppMenu v-else shadow :disabled="isDisabled">
       <template #trigger="{ open, isOpen }">
-        <MenuTrigger :active="isOpen" :icon="icon" @click="open">
+        <MenuTrigger
+          :active="isOpen"
+          :busy="isBusy"
+          :disabled="isDisabled"
+          :icon="icon"
+          @click="open"
+        >
           <slot />
           <UiIcon
             :fixed-width="false"

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

@@ -1,6 +1,6 @@
 <template>
   <UiCard>
-    <UiTitle type="h4">{{ $t("cpu-usage") }}</UiTitle>
+    <UiCardTitle>{{ $t("cpu-usage") }}</UiCardTitle>
     <HostsCpuUsage />
     <VmsCpuUsage />
   </UiCard>
@@ -9,5 +9,5 @@
 import HostsCpuUsage from "@/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue";
 import VmsCpuUsage from "@/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue";
 import UiCard from "@/components/ui/UiCard.vue";
-import UiTitle from "@/components/ui/UiTitle.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 </script>

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

@@ -0,0 +1,93 @@
+<template>
+  <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <LinearChart
+    :data="data"
+    :max-value="customMaxValue"
+    :subtitle="$t('last-week')"
+    :title="$t('network-throughput')"
+    :value-formatter="customValueFormatter"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { map } from "lodash-es";
+import { useI18n } from "vue-i18n";
+import LinearChart from "@/components/charts/LinearChart.vue";
+import type { FetchedStats } from "@/composables/fetch-stats.composable";
+import { formatSize } from "@/libs/utils";
+import type { HostStats } from "@/libs/xapi-stats";
+import type { LinearChartData } from "@/types/chart";
+import { RRD_STEP_FROM_STRING } from "@/libs/xapi-stats";
+import type { XenApiHost } from "@/libs/xen-api";
+
+const { t } = useI18n();
+
+const hostLastWeekStats =
+  inject<FetchedStats<XenApiHost, HostStats>>("hostLastWeekStats");
+
+const data = computed<LinearChartData>(() => {
+  const stats = hostLastWeekStats?.stats?.value;
+  const timestampStart = hostLastWeekStats?.timestampStart?.value;
+
+  if (timestampStart === undefined || stats === undefined) {
+    return [];
+  }
+
+  const results = {
+    tx: new Map<number, { timestamp: number; value: number }>(),
+    rx: new Map<number, { timestamp: number; value: number }>(),
+  };
+
+  const addResult = (stats: HostStats, type: "tx" | "rx") => {
+    const networkStats = Object.values(stats.pifs[type]);
+
+    for (let hourIndex = 0; hourIndex < networkStats[0].length; hourIndex++) {
+      const timestamp =
+        (timestampStart + hourIndex * RRD_STEP_FROM_STRING.hours) * 1000;
+
+      const networkThroughput = networkStats.reduce(
+        (total, throughput) => total + throughput[hourIndex],
+        0
+      );
+
+      results[type].set(timestamp, {
+        timestamp,
+        value: (results[type].get(timestamp)?.value ?? 0) + networkThroughput,
+      });
+    }
+  };
+
+  stats.forEach((host) => {
+    if (!host.stats) {
+      return;
+    }
+
+    addResult(host.stats, "rx");
+    addResult(host.stats, "tx");
+  });
+
+  return [
+    {
+      label: t("network-upload"),
+      data: Array.from(results["tx"].values()),
+    },
+    {
+      label: t("network-download"),
+      data: Array.from(results["rx"].values()),
+    },
+  ];
+});
+
+// TODO: improve the way to get the max value of graph
+// See: https://github.com/vatesfr/xen-orchestra/pull/6610/files#r1072237279
+const customMaxValue = computed(
+  () =>
+    Math.max(
+      ...map(data.value[0].data, "value"),
+      ...map(data.value[1].data, "value")
+    ) * 1.5
+);
+
+const customValueFormatter = (value: number) => String(formatSize(value));
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <UiCard>
-    <UiTitle type="h4">{{ $t("ram-usage") }}</UiTitle>
+    <UiCardTitle>{{ $t("ram-usage") }}</UiCardTitle>
     <HostsRamUsage />
     <VmsRamUsage />
   </UiCard>
@@ -10,5 +10,5 @@
 import HostsRamUsage from "@/components/pool/dashboard/ramUsage/HostsRamUsage.vue";
 import VmsRamUsage from "@/components/pool/dashboard/ramUsage/VmsRamUsage.vue";
 import UiCard from "@/components/ui/UiCard.vue";
-import UiTitle from "@/components/ui/UiTitle.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 </script>

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

@@ -1,17 +1,17 @@
 <template>
   <UiCard>
-    <UiTitle type="h4">{{ $t("status") }}</UiTitle>
+    <UiCardTitle>{{ $t("status") }}</UiCardTitle>
     <template v-if="isReady">
       <PoolDashboardStatusItem
         :active="activeHostsCount"
-        :total="totalHostsCount"
         :label="$t('hosts')"
+        :total="totalHostsCount"
       />
       <UiSeparator />
       <PoolDashboardStatusItem
         :active="activeVmsCount"
-        :total="totalVmsCount"
         :label="$t('vms')"
+        :total="totalVmsCount"
       />
     </template>
     <UiSpinner v-else class="spinner" />
@@ -19,14 +19,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
 import PoolDashboardStatusItem from "@/components/pool/dashboard/PoolDashboardStatusItem.vue";
 import UiCard from "@/components/ui/UiCard.vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import UiSeparator from "@/components/ui/UiSeparator.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
-import UiTitle from "@/components/ui/UiTitle.vue";
 import { useHostMetricsStore } from "@/stores/host-metrics.store";
 import { useVmStore } from "@/stores/vm.store";
+import { computed } from "vue";
 
 const vmStore = useVmStore();
 const hostMetricsStore = useHostMetricsStore();

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

@@ -1,56 +1,31 @@
 <template>
   <UiCard>
-    <UiTitle type="h4">{{ $t("storage-usage") }}</UiTitle>
-    <UsageBar :data="srStore.isReady ? data.result : undefined" :nItems="N_ITEMS">
-      <template #header>
-        <span>{{ $t("storage") }}</span>
-        <span>{{ $t("top-#", { n: N_ITEMS }) }}</span>
-      </template>
-      <template #footer v-if="showFooter">
-        <div class="footer-card">
-          <p>{{ $t("total-used") }}:</p>
-          <div class="footer-value">
-            <p>{{ percentUsed }}%</p>
-            <p>
-              {{ formatSize(data.usedSize) }}
-            </p>
-          </div>
-        </div>
-        <div class="footer-card">
-          <p>{{ $t("total-free") }}:</p>
-          <div class="footer-value">
-            <p>{{ percentFree }}%</p>
-            <p>
-              {{ formatSize(data.maxSize) }}
-            </p>
-          </div>
-        </div>
+    <UiCardTitle
+      :left="$t('storage-usage')"
+      :right="$t('top-#', { n: N_ITEMS })"
+    />
+    <UsageBar
+      :data="srStore.isReady ? data.result : undefined"
+      :nItems="N_ITEMS"
+    >
+      <template #footer>
+        <SizeStatsSummary :size="data.maxSize" :usage="data.usedSize" />
       </template>
     </UsageBar>
   </UiCard>
 </template>
 
 <script lang="ts" setup>
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { computed } from "vue";
+import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue";
 import UsageBar from "@/components/UsageBar.vue";
 import UiCard from "@/components/ui/UiCard.vue";
-import UiTitle from "@/components/ui/UiTitle.vue";
-import { formatSize, percent } from "@/libs/utils";
 import { useSrStore } from "@/stores/storage.store";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
 
 const srStore = useSrStore();
 
-const percentUsed = computed(() =>
-  percent(data.value.usedSize, data.value.maxSize, 1)
-);
-
-const percentFree = computed(() =>
-  percent(data.value.maxSize - data.value.usedSize, data.value.maxSize, 1)
-);
-
-const showFooter = computed(() => !isNaN(percentUsed.value));
-
 const data = computed<{
   result: { id: string; label: string; value: number }[];
   maxSize: number;
@@ -85,21 +60,3 @@ const data = computed<{
   return { result, maxSize, usedSize };
 });
 </script>
-
-<style lang="postcss" scoped>
-.footer-card {
-  color: var(--color-blue-scale-200);
-  display: flex;
-  text-transform: uppercase;
-}
-
-.footer-card p {
-  font-weight: 700;
-}
-
-.footer-value {
-  display: flex;
-  flex-direction: column;
-  text-align: right;
-}
-</style>

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

@@ -1,19 +1,20 @@
 <template>
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS">
-    <template #header>
-      <span>{{ $t("hosts") }}</span>
-      <span>{{ $t("top-#", { n: N_ITEMS }) }}</span>
-    </template>
-  </UsageBar>
+  <UiCardTitle
+    subtitle
+    :left="$t('hosts')"
+    :right="$t('top-#', { n: N_ITEMS })"
+  />
+  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
-import { type ComputedRef, computed, inject } from "vue";
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import UsageBar from "@/components/UsageBar.vue";
 import type { Stat } from "@/composables/fetch-stats.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
 import type { HostStats } from "@/libs/xapi-stats";
 import { N_ITEMS } from "@/views/pool/PoolDashboardView.vue";
+import { computed, type ComputedRef, inject } from "vue";
 
 const stats = inject<ComputedRef<Stat<HostStats>[]>>(
   "hostStats",

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

@@ -0,0 +1,82 @@
+<template>
+  <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <LinearChart
+    :data="data"
+    :max-value="customMaxValue"
+    :subtitle="$t('last-week')"
+    :title="$t('pool-cpu-usage')"
+    :value-formatter="customValueFormatter"
+  />
+</template>
+
+<script lang="ts" setup>
+import LinearChart from "@/components/charts/LinearChart.vue";
+import type { HostStats } from "@/libs/xapi-stats";
+import type { FetchedStats } from "@/composables/fetch-stats.composable";
+import { RRD_STEP_FROM_STRING } from "@/libs/xapi-stats";
+import type { XenApiHost } from "@/libs/xen-api";
+import { useHostStore } from "@/stores/host.store";
+import type { LinearChartData } from "@/types/chart";
+import { sumBy } from "lodash-es";
+import { storeToRefs } from "pinia";
+import { computed, inject } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const hostLastWeekStats =
+  inject<FetchedStats<XenApiHost, HostStats>>("hostLastWeekStats");
+
+const { allRecords: hosts } = storeToRefs(useHostStore());
+
+const customMaxValue = computed(
+  () => 100 * sumBy(hosts.value, (host) => +host.cpu_info.cpu_count)
+);
+
+const data = computed<LinearChartData>(() => {
+  const timestampStart = hostLastWeekStats?.timestampStart?.value;
+  const stats = hostLastWeekStats?.stats?.value;
+
+  if (timestampStart === undefined || stats === undefined) {
+    return [];
+  }
+
+  const result = new Map<number, { timestamp: number; value: number }>();
+
+  const addResult = (stats: HostStats) => {
+    const cpus = Object.values(stats.cpus);
+
+    for (let hourIndex = 0; hourIndex < cpus[0].length; hourIndex++) {
+      const timestamp =
+        (timestampStart + hourIndex * RRD_STEP_FROM_STRING.hours) * 1000;
+
+      const cpuUsageSum = cpus.reduce(
+        (total, cpu) => total + cpu[hourIndex],
+        0
+      );
+
+      result.set(timestamp, {
+        timestamp: timestamp,
+        value: Math.round((result.get(timestamp)?.value ?? 0) + cpuUsageSum),
+      });
+    }
+  };
+
+  stats.forEach((host) => {
+    if (!host.stats) {
+      return;
+    }
+
+    addResult(host.stats);
+  });
+
+  return [
+    {
+      label: t("stacked-cpu-usage"),
+      data: Array.from(result.values()),
+    },
+  ];
+});
+
+const customValueFormatter = (value: number) => `${value}%`;
+</script>

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

@@ -1,13 +1,14 @@
 <template>
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS">
-    <template #header>
-      <span>{{ $t("vms") }}</span>
-      <span>{{ $t("top-#", { n: N_ITEMS }) }}</span>
-    </template>
-  </UsageBar>
+  <UiCardTitle
+    subtitle
+    :left="$t('vms')"
+    :right="$t('top-#', { n: N_ITEMS })"
+  />
+  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { type ComputedRef, computed, inject } from "vue";
 import UsageBar from "@/components/UsageBar.vue";
 import type { Stat } from "@/composables/fetch-stats.composable";

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

@@ -1,13 +1,14 @@
 <template>
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS">
-    <template #header>
-      <span>{{ $t("hosts") }}</span>
-      <span>{{ $t("top-#", { n: N_ITEMS }) }}</span>
-    </template>
-  </UsageBar>
+  <UiCardTitle
+    subtitle
+    :left="$t('hosts')"
+    :right="$t('top-#', { n: N_ITEMS })"
+  />
+  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { type ComputedRef, computed, inject } from "vue";
 import UsageBar from "@/components/UsageBar.vue";
 import type { Stat } from "@/composables/fetch-stats.composable";

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

@@ -0,0 +1,93 @@
+<template>
+  <!-- TODO: add a loader when data is not fully loaded or undefined -->
+  <LinearChart
+    :data="data"
+    :max-value="customMaxValue"
+    :subtitle="$t('last-week')"
+    :title="$t('pool-ram-usage')"
+    :value-formatter="customValueFormatter"
+  >
+    <template #summary>
+      <SizeStatsSummary :size="currentData.size" :usage="currentData.usage" />
+    </template>
+  </LinearChart>
+</template>
+
+<script lang="ts" setup>
+import LinearChart from "@/components/charts/LinearChart.vue";
+import SizeStatsSummary from "@/components/ui/SizeStatsSummary.vue";
+import type { FetchedStats } from "@/composables/fetch-stats.composable";
+import type { HostStats } from "@/libs/xapi-stats";
+import { RRD_STEP_FROM_STRING } from "@/libs/xapi-stats";
+import { useHostStore } from "@/stores/host.store";
+import type { LinearChartData } from "@/types/chart";
+import { sumBy } from "lodash-es";
+import { storeToRefs } from "pinia";
+import { computed, inject } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatSize, getHostMemory, isHostRunning } from "@/libs/utils";
+import type { XenApiHost } from "@/libs/xen-api";
+
+const { allRecords: hosts } = storeToRefs(useHostStore());
+const { t } = useI18n();
+
+const hostLastWeekStats =
+  inject<FetchedStats<XenApiHost, HostStats>>("hostLastWeekStats");
+
+const runningHosts = computed(() => hosts.value.filter(isHostRunning));
+const customMaxValue = computed(() =>
+  sumBy(runningHosts.value, (host) => getHostMemory(host)?.size ?? 0)
+);
+
+const currentData = computed(() => {
+  let size = 0,
+    usage = 0;
+  runningHosts.value.forEach((host) => {
+    const hostMemory = getHostMemory(host);
+    size += hostMemory?.size ?? 0;
+    usage += hostMemory?.usage ?? 0;
+  });
+  return { size, usage };
+});
+
+const data = computed<LinearChartData>(() => {
+  const timestampStart = hostLastWeekStats?.timestampStart?.value;
+  const stats = hostLastWeekStats?.stats?.value;
+
+  if (timestampStart === undefined || stats === undefined) {
+    return [];
+  }
+
+  const result = new Map<number, { timestamp: number; value: number }>();
+
+  stats.forEach(({ stats }) => {
+    if (stats?.memory === undefined) {
+      return;
+    }
+
+    const memoryFree = stats.memoryFree;
+    const memoryUsage = stats.memory.map(
+      (memory, index) => memory - memoryFree[index]
+    );
+
+    memoryUsage.forEach((value, hourIndex) => {
+      const timestamp =
+        (timestampStart + hourIndex * RRD_STEP_FROM_STRING.hours) * 1000;
+
+      result.set(timestamp, {
+        timestamp,
+        value: (result.get(timestamp)?.value ?? 0) + memoryUsage[hourIndex],
+      });
+    });
+  });
+
+  return [
+    {
+      label: t("stacked-ram-usage"),
+      data: Array.from(result.values()),
+    },
+  ];
+});
+
+const customValueFormatter = (value: number) => String(formatSize(value));
+</script>

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

@@ -1,13 +1,14 @@
 <template>
-  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS">
-    <template #header>
-      <span>{{ $t("vms") }}</span>
-      <span>{{ $t("top-#", { n: N_ITEMS }) }}</span>
-    </template>
-  </UsageBar>
+  <UiCardTitle
+    subtitle
+    :left="$t('vms')"
+    :right="$t('top-#', { n: N_ITEMS })"
+  />
+  <UsageBar :data="statFetched ? data : undefined" :n-items="N_ITEMS" />
 </template>
 
 <script lang="ts" setup>
+import UiCardTitle from "@/components/ui/UiCardTitle.vue";
 import { type ComputedRef, computed, inject } from "vue";
 import UsageBar from "@/components/UsageBar.vue";
 import type { Stat } from "@/composables/fetch-stats.composable";

@xen-orchestra/lite/src/components/tasks/TaskRow.vue

@@ -0,0 +1,67 @@
+<template>
+  <tr class="finished-task-row" :class="{ finished: !isPending }">
+    <td>{{ task.name_label }}</td>
+    <td>
+      <RouterLink
+        :to="{
+          name: 'host.dashboard',
+          params: { uuid: host.uuid },
+        }"
+      >
+        {{ host.name_label }}
+      </RouterLink>
+    </td>
+    <td>
+      <UiProgressBar v-if="isPending" :max-value="1" :value="task.progress" />
+    </td>
+    <td>
+      <RelativeTime v-if="isPending" :date="createdAt" />
+      <template v-else>{{ $d(createdAt, "datetime_short") }}</template>
+    </td>
+    <td>
+      <template v-if="finishedAt !== undefined">
+        {{ $d(finishedAt, "datetime_short") }}
+      </template>
+      <RelativeTime
+        v-else-if="isPending && estimatedEndAt !== Infinity"
+        :date="estimatedEndAt"
+      />
+    </td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+import RelativeTime from "@/components/RelativeTime.vue";
+import UiProgressBar from "@/components/ui/UiProgressBar.vue";
+import { parseDateTime } from "@/libs/utils";
+import type { XenApiTask } from "@/libs/xen-api";
+import { useHostStore } from "@/stores/host.store";
+import { computed } from "vue";
+
+const props = defineProps<{
+  isPending?: boolean;
+  task: XenApiTask;
+}>();
+
+const { getRecord: getHost } = useHostStore();
+
+const createdAt = computed(() => parseDateTime(props.task.created));
+
+const host = computed(() => getHost(props.task.resident_on));
+
+const estimatedEndAt = computed(
+  () =>
+    createdAt.value +
+    (new Date().getTime() - createdAt.value) / props.task.progress
+);
+
+const finishedAt = computed(() =>
+  props.isPending ? undefined : parseDateTime(props.task.finished)
+);
+</script>
+
+<style lang="postcss" scoped>
+.finished {
+  opacity: 0.5;
+}
+</style>

@xen-orchestra/lite/src/components/tasks/TasksTable.vue

@@ -0,0 +1,32 @@
+<template>
+  <UiTable class="tasks-table">
+    <template #header>
+      <th>{{ $t("name") }}</th>
+      <th>{{ $t("object") }}</th>
+      <th>{{ $t("task.progress") }}</th>
+      <th>{{ $t("task.started") }}</th>
+      <th>{{ $t("task.estimated-end") }}</th>
+    </template>
+
+    <TaskRow
+      v-for="task in pendingTasks"
+      :key="task.uuid"
+      :task="task"
+      is-pending
+    />
+    <TaskRow v-for="task in finishedTasks" :key="task.uuid" :task="task" />
+  </UiTable>
+</template>
+
+<script lang="ts" setup>
+import TaskRow from "@/components/tasks/TaskRow.vue";
+import UiTable from "@/components/ui/UiTable.vue";
+import type { XenApiTask } from "@/libs/xen-api";
+
+defineProps<{
+  pendingTasks: XenApiTask[];
+  finishedTasks: XenApiTask[];
+}>();
+</script>
+
+<style lang="postcss" scoped></style>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="summary" v-if="isDisplayed">
+    <div class="summary-card">
+      <p>{{ $t("total-used") }}:</p>
+      <div class="summary-value">
+        <p>{{ percentUsed }}%</p>
+        <p>
+          {{ formatSize(usage) }}
+        </p>
+      </div>
+    </div>
+    <div class="summary-card">
+      <p>{{ $t("total-free") }}:</p>
+      <div class="summary-value">
+        <p>{{ percentFree }}%</p>
+        <p>
+          {{ formatSize(free) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { formatSize, percent } from "@/libs/utils";
+import { computed } from "vue";
+const props = defineProps<{
+  size: number;
+  usage: number;
+}>();
+
+const free = computed(() => props.size - props.usage);
+const percentFree = computed(() => percent(free.value, props.size));
+const percentUsed = computed(() => percent(props.usage, props.size));
+
+const isDisplayed = computed(
+  () => !isNaN(percentUsed.value) && !isNaN(percentFree.value)
+);
+</script>
+<style lang="postcss" scoped>
+.summary {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--color-blue-scale-300);
+}
+
+.summary-card {
+  color: var(--color-blue-scale-200);
+  display: flex;
+  text-transform: uppercase;
+}
+
+.summary-card p {
+  font-weight: 700;
+}
+
+.summary-value {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+}
+</style>

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

@@ -5,7 +5,7 @@
     :type="type || 'button'"
     class="ui-button"
   >
-    <span v-if="isBusy" class="loader" />
+    <UiSpinner v-if="isBusy" />
     <template v-else>
       <UiIcon :icon="icon" class="icon" />
       <slot />
@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts" setup>
+import UiSpinner from "@/components/ui/UiSpinner.vue";
 import { computed, inject, unref } from "vue";
 import type { Color } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";

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

@@ -0,0 +1,65 @@
+<template>
+  <div :class="{ subtitle }" class="ui-section-title">
+    <component
+      :is="subtitle ? 'h5' : 'h4'"
+      v-if="$slots.default || left"
+      class="left"
+    >
+      <slot>{{ left }}</slot>
+    </component>
+    <component
+      :is="subtitle ? 'h6' : 'h5'"
+      v-if="$slots.right || right"
+      class="right"
+    >
+      <slot name="right">{{ right }}</slot>
+    </component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  subtitle?: boolean;
+  left?: string;
+  right?: string;
+}>();
+</script>
+
+<style lang="postcss" scoped>
+.ui-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+
+  --section-title-left-size: 2rem;
+  --section-title-left-color: var(--color-blue-scale-100);
+  --section-title-left-weight: 500;
+  --section-title-right-size: 1.6rem;
+  --section-title-right-color: var(--color-extra-blue-base);
+  --section-title-right-weight: 700;
+
+  &.subtitle {
+    border-bottom: 1px solid var(--color-extra-blue-base);
+
+    --section-title-left-size: 1.6rem;
+    --section-title-left-color: var(--color-extra-blue-base);
+    --section-title-left-weight: 700;
+    --section-title-right-size: 1.4rem;
+    --section-title-right-color: var(--color-extra-blue-base);
+    --section-title-right-weight: 400;
+  }
+}
+
+.left {
+  font-size: var(--section-title-left-size);
+  font-weight: var(--section-title-left-weight);
+  color: var(--section-title-left-color);
+}
+
+.right {
+  font-size: var(--section-title-right-size);
+  font-weight: var(--section-title-right-weight);
+  color: var(--section-title-right-color);
+}
+</style>