WiP

Introduced by 25e270edb4

.eslintrc.js

@@ -15,9 +15,10 @@ module.exports = {
 
   overrides: [
     {
-      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js'],
+      files: ['cli.{,c,m}js', '*-cli.{,c,m}js', '**/*cli*/**/*.{,c,m}js', '**/scripts/**.{,c,m}js'],
       rules: {
         'n/no-process-exit': 'off',
+        'n/shebang': 'off',
         'no-console': 'off',
       },
     },
@@ -46,6 +47,57 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['@xen-orchestra/{web-core,lite,web}/**/*.{vue,ts}'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      plugins: ['import'],
+      extends: [
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+        'plugin:vue/vue3-recommended',
+        '@vue/eslint-config-typescript/recommended',
+        '@vue/eslint-config-prettier',
+      ],
+      settings: {
+        'import/resolver': {
+          typescript: true,
+          'eslint-import-resolver-custom-alias': {
+            alias: {
+              '@': './src',
+            },
+            extensions: ['.ts'],
+            packages: ['@xen-orchestra/lite'],
+          },
+        },
+      },
+      rules: {
+        'no-void': 'off',
+        'n/no-missing-import': 'off', // using 'import' plugin instead to support TS aliases
+        '@typescript-eslint/no-explicit-any': 'off',
+        'vue/require-default-prop': 'off', // https://github.com/vuejs/eslint-plugin-vue/issues/2051
+      },
+    },
+    {
+      files: ['@xen-orchestra/{web-core,lite,web}/src/pages/**/*.vue'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      rules: {
+        'vue/multi-word-component-names': 'off',
+      },
+    },
+    {
+      files: ['@xen-orchestra/{web-core,lite,web}/typed-router.d.ts'],
+      parserOptions: {
+        sourceType: 'module',
+      },
+      rules: {
+        'eslint-comments/disable-enable-pair': 'off',
+        'eslint-comments/no-unlimited-disable': 'off',
+      },
+    },
   ],
 
   parserOptions: {

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/workflows/ci.yml

@@ -24,8 +24,12 @@ jobs:
           cache: 'yarn'
       - name: Install project dependencies
         run: yarn
+      - name: Ensure yarn.lock is up-to-date
+        run: git diff --exit-code yarn.lock
       - name: Build the project
         run: yarn build
+      - name: Unit tests
+        run: yarn test-unit
       - name: Lint tests
         run: yarn test-lint
       - name: Integration tests

.gitignore

@@ -30,8 +30,12 @@ pnpm-debug.log.*
 yarn-error.log
 yarn-error.log.*
 .env
+*.tsbuildinfo
 
 # code coverage
 .nyc_output/
 coverage/
 .turbo/
+
+# https://node-tap.org/dot-tap-folder/
+.tap/

@vates/async-each/package.json

@@ -34,7 +34,6 @@
   },
   "devDependencies": {
     "sinon": "^17.0.1",
-    "tap": "^16.3.0",
     "test": "^3.2.1"
   }
 }

@vates/decorate-with/.USAGE.md

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

@vates/decorate-with/README.md

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

@vates/decorate-with/index.js

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

@vates/decorate-with/package.json

@@ -20,7 +20,7 @@
     "url": "https://vates.fr"
   },
   "license": "ISC",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "engines": {
     "node": ">=8.10"
   },

@vates/event-listeners-manager/index.spec.js

@@ -20,6 +20,9 @@ function assertListeners(t, event, listeners) {
 }
 
 t.beforeEach(function (t) {
+  // work around https://github.com/tapjs/tapjs/issues/998
+  t.context = {}
+
   t.context.ee = new EventEmitter()
   t.context.em = new EventListenersManager(t.context.ee)
 })

@vates/event-listeners-manager/package.json

@@ -38,9 +38,9 @@
   "version": "1.0.1",
   "scripts": {
     "postversion": "npm publish --access public",
-    "test": "tap --branches=72"
+    "test": "tap --allow-incomplete-coverage"
   },
   "devDependencies": {
-    "tap": "^16.2.0"
+    "tap": "^18.7.0"
   }
 }

@vates/fuse-vhd/.USAGE.md

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

@vates/fuse-vhd/README.md

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

@vates/fuse-vhd/cli.mjs

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

@vates/fuse-vhd/index.mjs

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

@vates/fuse-vhd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vates/fuse-vhd",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "ISC",
   "private": false,
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@vates/fuse-vhd",
@@ -19,10 +19,14 @@
   },
   "main": "./index.mjs",
   "dependencies": {
+    "@xen-orchestra/fs": "^4.1.4",
     "fuse-native": "^2.2.6",
     "lru-cache": "^7.14.0",
     "promise-toolbox": "^0.21.0",
-    "vhd-lib": "^4.8.0"
+    "vhd-lib": "^4.9.0"
+  },
+  "bin": {
+    "xo-fuse-vhd": "./cli.mjs"
   },
   "scripts": {
     "postversion": "npm publish --access public"

@vates/nbd-client/multi.mjs

@@ -41,9 +41,7 @@ export default class MultiNbdClient {
     }
     if (connectedClients.length < this.#clients.length) {
       warn(
-        `incomplete connection by multi Nbd, only ${connectedClients.length} over ${
+        `incomplete connection by multi Nbd, only ${connectedClients.length} over ${this.#clients.length} expected clients`
-          this.#clients.length
-        } expected clients`
       )
       this.#clients = connectedClients
     }

@vates/nbd-client/package.json

@@ -24,14 +24,14 @@
     "@xen-orchestra/async-map": "^0.1.2",
     "@xen-orchestra/log": "^0.6.0",
     "promise-toolbox": "^0.21.0",
-    "xen-api": "^2.0.0"
+    "xen-api": "^2.0.1"
   },
   "devDependencies": {
-    "tap": "^16.3.0",
+    "tap": "^18.7.0",
     "tmp": "^0.2.1"
   },
   "scripts": {
     "postversion": "npm publish --access public",
-    "test-integration": "tap --lines 97 --functions 95 --branches 74 --statements 97 tests/*.integ.mjs"
+    "test-integration": "tap --allow-incomplete-coverage"
   }
 }

@vates/otp/index.test.mjs

@@ -1,5 +1,5 @@
 import { strict as assert } from 'node:assert'
-import { describe, it } from 'tap/mocha'
+import test from 'test'
 
 import {
   generateHotp,
@@ -11,6 +11,8 @@ import {
   verifyTotp,
 } from './index.mjs'
 
+const { describe, it } = test
+
 describe('generateSecret', function () {
   it('generates a string of 32 chars', async function () {
     const secret = generateSecret()

@vates/otp/package.json

@@ -31,9 +31,9 @@
   },
   "scripts": {
     "postversion": "npm publish --access public",
-    "test": "tap"
+    "test": "node--test"
   },
   "devDependencies": {
-    "tap": "^16.3.0"
+    "test": "^3.3.0"
   }
 }

@vates/predicates/index.test.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const assert = require('assert/strict')
-const { describe, it } = require('tap').mocha
+const { describe, it } = require('test')
 
 const { every, not, some } = require('./')
 

@vates/predicates/package.json

@@ -32,9 +32,9 @@
   },
   "scripts": {
     "postversion": "npm publish --access public",
-    "test": "tap"
+    "test": "node--test"
   },
   "devDependencies": {
-    "tap": "^16.0.1"
+    "test": "^3.3.0"
   }
 }

@xen-orchestra/audit-core/index.test.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const assert = require('assert/strict')
-const { afterEach, describe, it } = require('tap').mocha
+const { afterEach, describe, it } = require('test')
 
 const { AlteredRecordError, AuditCore, MissingRecordError, NULL_ID, Storage } = require('.')
 

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

@@ -13,10 +13,10 @@
   },
   "scripts": {
     "postversion": "npm publish --access public",
-    "test": "tap --lines 67 --functions 92 --branches 52 --statements 67"
+    "test": "node--test"
   },
   "dependencies": {
-    "@vates/decorate-with": "^2.0.0",
+    "@vates/decorate-with": "^2.1.0",
     "@xen-orchestra/log": "^0.6.0",
     "golike-defer": "^0.5.1",
     "object-hash": "^2.0.1"
@@ -28,6 +28,6 @@
     "url": "https://vates.fr"
   },
   "devDependencies": {
-    "tap": "^16.0.1"
+    "test": "^3.3.0"
   }
 }

@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.44.3",
+    "@xen-orchestra/backups": "^0.44.6",
-    "@xen-orchestra/fs": "^4.1.3",
+    "@xen-orchestra/fs": "^4.1.4",
     "filenamify": "^6.0.0",
     "getopts": "^2.2.5",
     "lodash": "^4.17.15",

@xen-orchestra/backups/ImportVmBackup.mjs

@@ -191,7 +191,7 @@ export class ImportVmBackup {
 
   async #decorateIncrementalVmMetadata() {
     const { additionnalVmTag, mapVdisSrs, useDifferentialRestore } = this._importIncrementalVmSettings
-    
+
     const ignoredVdis = new Set(
       Object.entries(mapVdisSrs)
         .filter(([_, srUuid]) => srUuid === null)

@xen-orchestra/backups/RemoteAdapter.mjs

@@ -35,6 +35,8 @@ export const DIR_XO_CONFIG_BACKUPS = 'xo-config-backups'
 
 export const DIR_XO_POOL_METADATA_BACKUPS = 'xo-pool-metadata-backups'
 
+const IMMUTABILTY_METADATA_FILENAME = '/immutability.json'
+
 const { debug, warn } = createLogger('xo:backups:RemoteAdapter')
 
 const compareTimestamp = (a, b) => a.timestamp - b.timestamp
@@ -749,10 +751,37 @@ export class RemoteAdapter {
   }
 
   async readVmBackupMetadata(path) {
+    let json
+    let isImmutable = false
+    let remoteIsImmutable = false
+    // if the remote is immutable, check if this metadatas are also immutables
+    try {
+      // this file is not encrypted
+      await this._handler._readFile(IMMUTABILTY_METADATA_FILENAME)
+      remoteIsImmutable = true
+    } catch (error) {
+      if (error.code !== 'ENOENT') {
+        throw error
+      }
+    }
+
+    try {
+      // this will trigger an EPERM error if the file is immutable
+      json = await this.handler.readFile(path, { flag: 'r+' })
+      // s3 handler don't respect flags
+    } catch (err) {
+      // retry without triggerring immutbaility check ,only on immutable remote
+      if (err.code === 'EPERM' && remoteIsImmutable) {
+        isImmutable = true
+        json = await this._handler.readFile(path, { flag: 'r' })
+      } else {
+        throw err
+      }
+    }
     // _filename is a private field used to compute the backup id
     //
     // it's enumerable to make it cacheable
-    const metadata = { ...JSON.parse(await this._handler.readFile(path)), _filename: path }
+    const metadata = { ...JSON.parse(json), _filename: path, isImmutable }
 
     // backups created on XenServer < 7.1 via JSON in XML-RPC transports have boolean values encoded as integers, which make them unusable with more recent XAPIs
     if (typeof metadata.vm.is_a_template === 'number') {

@xen-orchestra/backups/RestoreMetadataBackup.mjs

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

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

@@ -205,7 +205,7 @@ export class IncrementalRemoteWriter extends MixinRemoteWriter(AbstractIncrement
             // TODO remove when this has been done before the export
             await checkVhd(handler, parentPath)
           }
-          
+
           // don't write it as transferSize += await async function
           // since i += await asyncFun lead to race condition
           // as explained : https://eslint.org/docs/latest/rules/require-atomic-updates

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

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

@xen-orchestra/backups/formatVmBackups.mjs

@@ -2,8 +2,21 @@ import mapValues from 'lodash/mapValues.js'
 import { dirname } from 'node:path'
 
 function formatVmBackup(backup) {
-  const { isVhdDifferencing } = backup
+  const { isVhdDifferencing, vmSnapshot } = backup
 
+  let differencingVhds
+  let dynamicVhds
+  // some backups don't use snapshots, therefore cannot be with memory
+  const withMemory = vmSnapshot !== undefined && vmSnapshot.suspend_VDI !== 'OpaqueRef:NULL'
+  // isVhdDifferencing is either undefined or an object
+  if (isVhdDifferencing !== undefined) {
+    differencingVhds = Object.values(isVhdDifferencing).filter(t => t).length
+    dynamicVhds = Object.values(isVhdDifferencing).filter(t => !t).length
+    if (withMemory) {
+      // the suspend VDI (memory) is always a dynamic
+      dynamicVhds -= 1
+    }
+  }
   return {
     disks:
       backup.vhds === undefined
@@ -18,6 +31,7 @@ function formatVmBackup(backup) {
           }),
 
     id: backup.id,
+    isImmutable: backup.isImmutable,
     jobId: backup.jobId,
     mode: backup.mode,
     scheduleId: backup.scheduleId,
@@ -28,9 +42,9 @@ function formatVmBackup(backup) {
       name_label: backup.vm.name_label,
     },
 
-    // isVhdDifferencing is either undefined or an object
+    differencingVhds,
-    differencingVhds: isVhdDifferencing && Object.values(isVhdDifferencing).filter(t => t).length,
+    dynamicVhds,
-    dynamicVhds: isVhdDifferencing && Object.values(isVhdDifferencing).filter(t => !t).length,
+    withMemory,
   }
 }
 

@xen-orchestra/backups/package.json

@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/vatesfr/xen-orchestra.git"
   },
-  "version": "0.44.3",
+  "version": "0.44.6",
   "engines": {
     "node": ">=14.18"
   },
@@ -22,13 +22,13 @@
     "@vates/async-each": "^1.0.0",
     "@vates/cached-dns.lookup": "^1.0.0",
     "@vates/compose": "^2.1.0",
-    "@vates/decorate-with": "^2.0.0",
+    "@vates/decorate-with": "^2.1.0",
     "@vates/disposable": "^0.1.5",
-    "@vates/fuse-vhd": "^2.0.0",
+    "@vates/fuse-vhd": "^2.1.0",
     "@vates/nbd-client": "^3.0.0",
     "@vates/parse-duration": "^0.1.1",
     "@xen-orchestra/async-map": "^0.1.2",
-    "@xen-orchestra/fs": "^4.1.3",
+    "@xen-orchestra/fs": "^4.1.4",
     "@xen-orchestra/log": "^0.6.0",
     "@xen-orchestra/template": "^0.1.0",
     "app-conf": "^2.3.0",
@@ -44,8 +44,8 @@
     "proper-lockfile": "^4.1.2",
     "tar": "^6.1.15",
     "uuid": "^9.0.0",
-    "vhd-lib": "^4.8.0",
+    "vhd-lib": "^4.9.0",
-    "xen-api": "^2.0.0",
+    "xen-api": "^2.0.1",
     "yazl": "^2.5.1"
   },
   "devDependencies": {
@@ -56,7 +56,7 @@
     "tmp": "^0.2.1"
   },
   "peerDependencies": {
-    "@xen-orchestra/xapi": "^4.1.0"
+    "@xen-orchestra/xapi": "^4.2.0"
   },
   "license": "AGPL-3.0-or-later",
   "author": {

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

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

@xen-orchestra/fs/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@xen-orchestra/fs",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "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",
@@ -28,7 +28,7 @@
     "@sindresorhus/df": "^3.1.1",
     "@vates/async-each": "^1.0.0",
     "@vates/coalesce-calls": "^0.1.0",
-    "@vates/decorate-with": "^2.0.0",
+    "@vates/decorate-with": "^2.1.0",
     "@vates/read-chunk": "^1.2.0",
     "@xen-orchestra/log": "^0.6.0",
     "bind-property-descriptor": "^2.0.0",

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

@@ -364,7 +364,7 @@ export default class RemoteHandlerAbstract {
     let data
     try {
       // this file is not encrypted
-      data = await this._readFile(normalizePath(ENCRYPTION_DESC_FILENAME), 'utf-8')
+      data = await this._readFile(normalizePath(ENCRYPTION_DESC_FILENAME))
       const json = JSON.parse(data)
       encryptionAlgorithm = json.algorithm
     } catch (error) {
@@ -377,7 +377,7 @@ export default class RemoteHandlerAbstract {
     try {
       this.#rawEncryptor = _getEncryptor(encryptionAlgorithm, this._remote.encryptionKey)
       // this file is encrypted
-      const data = await this.__readFile(ENCRYPTION_METADATA_FILENAME, 'utf-8')
+      const data = await this.__readFile(ENCRYPTION_METADATA_FILENAME)
       JSON.parse(data)
     } catch (error) {
       // can be enoent, bad algorithm, or broeken json ( bad key or algorithm)

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

@@ -171,7 +171,12 @@ export default class LocalHandler extends RemoteHandlerAbstract {
     }
   }
 
-  async _readFile(file, options) {
+  async _readFile(file, { flags, ...options } = {}) {
+    // contrary to createReadStream, readFile expect singular `flag`
+    if (flags !== undefined) {
+      options.flag = flags
+    }
+
     const filePath = this.getFilePath(file)
     return await this.#addSyncStackTrace(retry, () => fs.readFile(filePath, options), this.#retriesOnEagain)
   }

@xen-orchestra/immutable-backups/.USAGE.md

@@ -0,0 +1,10 @@
+### make a remote immutable
+
+launch the `xo-immutable-remote` command. The configuration is stored in the config file.
+This script must be kept running to make file immutable reliably.
+
+### make file mutable
+
+launch the `xo-lift-remote-immutability` cli. The configuration is stored in the config file .
+
+If the config file have a `liftEvery`, this script will contiue to run and check regularly if there are files to update.

@xen-orchestra/immutable-backups/.npmignore

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

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

@@ -0,0 +1,41 @@
+<!-- DO NOT EDIT MANUALLY, THIS FILE HAS BEEN GENERATED -->
+
+# @xen-orchestra/immutable-backups
+
+[![Package Version](https://badgen.net/npm/v/@xen-orchestra/immutable-backups)](https://npmjs.org/package/@xen-orchestra/immutable-backups) ![License](https://badgen.net/npm/license/@xen-orchestra/immutable-backups) [![PackagePhobia](https://badgen.net/bundlephobia/minzip/@xen-orchestra/immutable-backups)](https://bundlephobia.com/result?p=@xen-orchestra/immutable-backups) [![Node compatibility](https://badgen.net/npm/node/@xen-orchestra/immutable-backups)](https://npmjs.org/package/@xen-orchestra/immutable-backups)
+
+## Install
+
+Installation of the [npm package](https://npmjs.org/package/@xen-orchestra/immutable-backups):
+
+```sh
+npm install --save @xen-orchestra/immutable-backups
+```
+
+## Usage
+
+### make a remote immutable
+
+launch the `xo-immutable-remote` command. The configuration is stored in the config file.
+This script must be kept running to make file immutable reliably.
+
+### make file mutable
+
+launch the `xo-lift-remote-immutability` cli. The configuration is stored in the config file .
+
+If the config file have a `liftEvery`, this script will contiue to run and check regularly if there are files to update.
+
+## 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
+
+[AGPL-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later) © [Vates SAS](https://vates.fr)

@xen-orchestra/immutable-backups/_cleanXoCache.mjs

@@ -0,0 +1,10 @@
+import fs from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import isBackupMetadata from './isBackupMetadata.mjs'
+
+export default async path => {
+  if (isBackupMetadata(path)) {
+    // snipe vm metadata cache to force XO to update it
+    await fs.unlink(join(dirname(path), 'cache.json.gz'))
+  }
+}

@xen-orchestra/immutable-backups/_isInVhdDirectory.mjs

@@ -0,0 +1,4 @@
+import { dirname } from 'node:path'
+
+// check if we are handling file directly under a vhd directory ( bat, headr, footer,..)
+export default path => dirname(path).endsWith('.vhd')

@xen-orchestra/immutable-backups/_loadConfig.mjs

@@ -0,0 +1,46 @@
+import { load } from 'app-conf'
+import { homedir } from 'os'
+import { join } from 'node:path'
+import ms from 'ms'
+
+const APP_NAME = 'xo-immutable-backups'
+const APP_DIR = new URL('.', import.meta.url).pathname
+
+export default async function loadConfig() {
+  const config = await load(APP_NAME, {
+    appDir: APP_DIR,
+    ignoreUnknownFormats: true,
+  })
+  if (config.remotes === undefined || config.remotes?.length < 1) {
+    throw new Error(
+      'No remotes are configured in the config file, please add at least one [remotes.<remoteid>]  with a root property pointing to the absolute path of the remote to watch'
+    )
+  }
+  if (config.liftEvery) {
+    config.liftEvery = ms(config.liftEvery)
+  }
+  for (const [remoteId, { indexPath, immutabilityDuration, root }] of Object.entries(config.remotes)) {
+    if (!root) {
+      throw new Error(
+        `Remote ${remoteId} don't have a root property,containing the absolute path to the root of a backup repository `
+      )
+    }
+    if (!immutabilityDuration) {
+      throw new Error(
+        `Remote ${remoteId} don't have a immutabilityDuration property to indicate the minimal duration the backups should be  protected by immutability `
+      )
+    }
+    if (ms(immutabilityDuration) < ms('1d')) {
+      throw new Error(
+        `Remote ${remoteId} immutability duration is smaller than the minimum allowed (1d), current : ${immutabilityDuration}`
+      )
+    }
+    if (!indexPath) {
+      const basePath = indexPath ?? process.env.XDG_DATA_HOME ?? join(homedir(), '.local', 'share')
+      const immutabilityIndexPath = join(basePath, APP_NAME, remoteId)
+      config.remotes[remoteId].indexPath = immutabilityIndexPath
+    }
+    config.remotes[remoteId].immutabilityDuration = ms(immutabilityDuration)
+  }
+  return config
+}

@xen-orchestra/immutable-backups/config.toml

@@ -0,0 +1,14 @@
+
+# how often does the lift immutability script will run to check if 
+# some files need to be made mutable 
+liftEvery =  1h
+
+# you can add as many remote as you want, if you change the id ( here : remote1)
+#[remotes.remote1]
+#root = "/mnt/ssd/vhdblock/" # the absolute path of the root of the backup repository
+#immutabilityDuration = 7d # mandatory
+# optional, default value is false will scan and update the index on start, can be expensive
+#rebuildIndexOnStart = true 
+
+# the index path is optional, default in XDG_DATA_HOME, or if this is not set, in ~/.local/share
+#indexPath = "/var/lib/" # will add automatically the application name immutable-backup 

@xen-orchestra/immutable-backups/directory.integ.mjs

@@ -0,0 +1,33 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { tmpdir } from 'node:os'
+import * as Directory from './directory.mjs'
+import { rimraf } from 'rimraf'
+
+describe('immutable-backups/file', async () => {
+  it('really lock a directory', async () => {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'immutable-backups-tests'))
+    const dataDir = path.join(dir, 'data')
+    await fs.mkdir(dataDir)
+    const immutDir = path.join(dir, '.immutable')
+    const filePath = path.join(dataDir, 'test')
+    await fs.writeFile(filePath, 'data')
+    await Directory.makeImmutable(dataDir, immutDir)
+    assert.strictEqual(await Directory.isImmutable(dataDir), true)
+    await assert.rejects(() => fs.writeFile(filePath, 'data'))
+    await assert.rejects(() => fs.appendFile(filePath, 'data'))
+    await assert.rejects(() => fs.unlink(filePath))
+    await assert.rejects(() => fs.rename(filePath, filePath + 'copy'))
+    await assert.rejects(() => fs.writeFile(path.join(dataDir, 'test2'), 'data'))
+    await assert.rejects(() => fs.rename(dataDir, dataDir + 'copy'))
+    await Directory.liftImmutability(dataDir, immutDir)
+    assert.strictEqual(await Directory.isImmutable(dataDir), false)
+    await fs.writeFile(filePath, 'data')
+    await fs.appendFile(filePath, 'data')
+    await fs.unlink(filePath)
+    await fs.rename(dataDir, dataDir + 'copy')
+    await rimraf(dir)
+  })
+})

@xen-orchestra/immutable-backups/directory.mjs

@@ -0,0 +1,21 @@
+import execa from 'execa'
+import { unindexFile, indexFile } from './fileIndex.mjs'
+
+export async function makeImmutable(dirPath, immutabilityCachePath) {
+  if (immutabilityCachePath) {
+    await indexFile(dirPath, immutabilityCachePath)
+  }
+  await execa('chattr', ['+i', '-R', dirPath])
+}
+
+export async function liftImmutability(dirPath, immutabilityCachePath) {
+  if (immutabilityCachePath) {
+    await unindexFile(dirPath, immutabilityCachePath)
+  }
+  await execa('chattr', ['-i', '-R', dirPath])
+}
+
+export async function isImmutable(path) {
+  const { stdout } = await execa('lsattr', ['-d', path])
+  return stdout[4] === 'i'
+}

@xen-orchestra/immutable-backups/doc.md

@@ -0,0 +1,114 @@
+# Imutability
+
+the goal is to make a remote that XO can write, but not modify during the immutability duration set on the remote. That way, it's not possible for XO to delete or encrypt any backup during this period. It protects your backup agains ransomware, at least as long as the attacker does not have a root access to the remote server.
+
+We target `governance` type of immutability, **the local root account of the remote server will be able to lift immutability**.
+
+We use the file system capabilities, they are tested on the protection process start.
+
+It is compatible with encryption at rest made by XO.
+
+## Prerequisites
+
+The commands must be run as root on the remote, or by a user with the `CAP_LINUX_IMMUTABLE` capability . On start, the protect process writes into the remote `imutability.json` file its status and the immutability duration.
+
+the `chattr` and `lsattr` should be installed on the system
+
+## Configuring
+
+this package uses app-conf to store its config. The application name is `xo-immutable-backup`. A sample config file is provided in this package.
+
+## Making a file immutable
+
+when marking a file or a folder immutable, it create an alias file in the `<indexPath>/<DayOfFileCreation>/<sha256(fullpath)>`.
+
+`indexPath` can be defined in the config file, otherwise `XDG_HOME` is used. If not available it goes to `~/.local/share`
+
+This index is used when lifting the immutability of the remote, it will only look at the old enough `<indexPath>/<DayOfFileCreation>/` folders.
+
+## Real time protecting
+
+On start, the watcher will create the index if it does not exists.
+It will also do a checkup to ensure immutability could work on this remote and handle the easiest issues.
+
+The watching process depends on the backup type, since we don't want to make temporary files and cache immutable.
+
+It won't protect files during upload, only when the files have been completly written on disk. Real time, in this case, means "protecting critical files as soon as possible after they are uploaded"
+
+This can be alleviated by :
+
+- Coupling immutability with encryption to ensure the file is not modified
+- Making health check to ensure the data are exactly as the snapshot data
+
+List of protected files :
+
+```js
+const PATHS = [
+  // xo configuration backupq
+  'xo-config-backups/*/*/data',
+  'xo-config-backups/*/*/data.json',
+  'xo-config-backups/*/*/metadata.json',
+  // pool backupq
+  'xo-pool-metadata-backups/*/metadata.json',
+  'xo-pool-metadata-backups/*/data',
+  // vm backups , xo-vm-backups/<vmuuid>/
+  'xo-vm-backups/*/*.json',
+  'xo-vm-backups/*/*.xva',
+  'xo-vm-backups/*/*.xva.checksum',
+  // xo-vm-backups/<vmuuid>/vdis/<jobid>/<vdiUuid>
+  'xo-vm-backups/*/vdis/*/*/*.vhd', // can be an alias or a vhd file
+  // for vhd directory :
+  'xo-vm-backups/*/vdis/*/*/data/*.vhd/bat',
+  'xo-vm-backups/*/vdis/*/*/data/*.vhd/header',
+  'xo-vm-backups/*/vdis/*/*/data/*.vhd/footer',
+]
+```
+
+## Releasing protection on old enough files on a remote
+
+the watcher will periodically check if some file must by unlocked
+
+## Troubleshooting
+
+### some files are still locked
+
+add the `rebuildIndexOnStart` option to the config file
+
+### make remote fully mutable again
+
+- Update the immutability setting with a 0 duration
+- launch the `liftProtection` cli.
+- remove the `protectRemotes` service
+
+### increasing the immutability duration
+
+this will prolong immutable file, but won't protect files that are already out of immutability
+
+### reducing the immutability duration
+
+change the setting, and launch the `liftProtection` cli , or wait for next planed execution
+
+### why are my incremental backups not marked as protected in XO ?
+
+are not marked as protected in XO ?
+
+For incremental backups to be marked as protected in XO, the entire chain must be under protection. To ensure at least 7 days of backups are protected, you need to set the immutability duration and retention at 14 days, the full backup interval at 7 days
+
+That means that if the last backup chain is complete ( 7 backup ) it is completely under protection, and if not, the precedent chain is also under protection. K are key backups, and are delta
+
+```
+Kd Kdddddd Kdddddd K #  8 backups protected, 2 chains
+K Kdddddd Kdddddd Kd #  9 backups protected, 2 chains
+ Kdddddd Kdddddd Kdd # 10 backups protected, 2 chains
+ Kddddd Kdddddd Kddd # 11 backups protected, 2 chains
+ Kdddd Kdddddd Kdddd # 12 backups protected, 2 chains
+ Kddd Kdddddd Kddddd # 13 backups protected, 2 chains
+ Kdd Kdddddd Kdddddd #  7 backups protected, 1 chain since precedent full is now mutable
+Kd Kdddddd Kdddddd K #  8 backups protected, 2 chains
+```
+
+### Why doesn't the protect process start ?
+
+- it should be run as root or by a user with the `CAP_LINUX_IMMUTABLE` capability
+- the underlying file system should support immutability, especially the `chattr` and `lsattr` command
+- logs are in journalctl

@xen-orchestra/immutable-backups/file.integ.mjs

@@ -0,0 +1,29 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import * as File from './file.mjs'
+import { tmpdir } from 'node:os'
+import { rimraf } from 'rimraf'
+
+describe('immutable-backups/file', async () => {
+  it('really lock a file', async () => {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'immutable-backups-tests'))
+    const immutDir = path.join(dir, '.immutable')
+    const filePath = path.join(dir, 'test.ext')
+    await fs.writeFile(filePath, 'data')
+    assert.strictEqual(await File.isImmutable(filePath), false)
+    await File.makeImmutable(filePath, immutDir)
+    assert.strictEqual(await File.isImmutable(filePath), true)
+    await assert.rejects(() => fs.writeFile(filePath, 'data'))
+    await assert.rejects(() => fs.appendFile(filePath, 'data'))
+    await assert.rejects(() => fs.unlink(filePath))
+    await assert.rejects(() => fs.rename(filePath, filePath + 'copy'))
+    await File.liftImmutability(filePath, immutDir)
+    assert.strictEqual(await File.isImmutable(filePath), false)
+    await fs.writeFile(filePath, 'data')
+    await fs.appendFile(filePath, 'data')
+    await fs.unlink(filePath)
+    await rimraf(dir)
+  })
+})

@xen-orchestra/immutable-backups/file.mjs

@@ -0,0 +1,24 @@
+import execa from 'execa'
+import { unindexFile, indexFile } from './fileIndex.mjs'
+
+// this work only on linux like systems
+// this could work on windows : https://4sysops.com/archives/set-and-remove-the-read-only-file-attribute-with-powershell/
+
+export async function makeImmutable(path, immutabilityCachePath) {
+  if (immutabilityCachePath) {
+    await indexFile(path, immutabilityCachePath)
+  }
+  await execa('chattr', ['+i', path])
+}
+
+export async function liftImmutability(filePath, immutabilityCachePath) {
+  if (immutabilityCachePath) {
+    await unindexFile(filePath, immutabilityCachePath)
+  }
+  await execa('chattr', ['-i', filePath])
+}
+
+export async function isImmutable(path) {
+  const { stdout } = await execa('lsattr', ['-d', path])
+  return stdout[4] === 'i'
+}

@xen-orchestra/immutable-backups/fileIndex.integ.mjs

@@ -0,0 +1,81 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import * as FileIndex from './fileIndex.mjs'
+import * as Directory from './directory.mjs'
+import { tmpdir } from 'node:os'
+import { rimraf } from 'rimraf'
+
+describe('immutable-backups/fileIndex', async () => {
+  it('index File changes', async () => {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'immutable-backups-tests'))
+    const immutDir = path.join(dir, '.immutable')
+    const filePath = path.join(dir, 'test.ext')
+
+    await fs.writeFile(filePath, 'data')
+    await FileIndex.indexFile(filePath, immutDir)
+    await fs.mkdir(path.join(immutDir, 'NOTADATE'))
+    await fs.writeFile(path.join(immutDir, 'NOTADATE.file'), 'content')
+    let nb = 0
+    let index, target
+    for await ({ index, target } of FileIndex.listOlderTargets(immutDir, 0)) {
+      assert.strictEqual(true, false, 'Nothing should be eligible for deletion')
+    }
+    nb = 0
+    for await ({ index, target } of FileIndex.listOlderTargets(immutDir, -24 * 60 * 60 * 1000)) {
+      assert.strictEqual(target, filePath)
+      await fs.unlink(index)
+      nb++
+    }
+    assert.strictEqual(nb, 1)
+    await fs.rmdir(path.join(immutDir, 'NOTADATE'))
+    await fs.rm(path.join(immutDir, 'NOTADATE.file'))
+    for await ({ index, target } of FileIndex.listOlderTargets(immutDir, -24 * 60 * 60 * 1000)) {
+      // should remove the empty dir
+      assert.strictEqual(true, false, 'Nothing should have stayed here')
+    }
+    assert.strictEqual((await fs.readdir(immutDir)).length, 0)
+    await rimraf(dir)
+  })
+
+  it('fails correctly', async () => {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'immutable-backups-tests'))
+    const immutDir = path.join(dir, '.immutable')
+    await fs.mkdir(immutDir)
+    const placeholderFile = path.join(dir, 'test.ext')
+    await fs.writeFile(placeholderFile, 'data')
+    await FileIndex.indexFile(placeholderFile, immutDir)
+
+    const filePath = path.join(dir, 'test2.ext')
+    await fs.writeFile(filePath, 'data')
+    await FileIndex.indexFile(filePath, immutDir)
+    await assert.rejects(() => FileIndex.indexFile(filePath, immutDir), { code: 'EEXIST' })
+
+    await Directory.makeImmutable(immutDir)
+    await assert.rejects(() => FileIndex.unindexFile(filePath, immutDir), { code: 'EPERM' })
+    await Directory.liftImmutability(immutDir)
+    await rimraf(dir)
+  })
+
+  it('handles bomb index files', async () => {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'immutable-backups-tests'))
+    const immutDir = path.join(dir, '.immutable')
+    await fs.mkdir(immutDir)
+    const placeholderFile = path.join(dir, 'test.ext')
+    await fs.writeFile(placeholderFile, 'data')
+    await FileIndex.indexFile(placeholderFile, immutDir)
+
+    const indexDayDir = path.join(immutDir, '1980,11-28')
+    await fs.mkdir(indexDayDir)
+    await fs.writeFile(path.join(indexDayDir, 'big'), Buffer.alloc(2 * 1024 * 1024))
+    assert.rejects(async () => {
+      let index, target
+      for await ({ index, target } of FileIndex.listOlderTargets(immutDir, 0)) {
+        // should remove the empty dir
+        assert.strictEqual(true, false, `Nothing should have stayed here, got ${index} ${target}`)
+      }
+    })
+    await rimraf(dir)
+  })
+})

@xen-orchestra/immutable-backups/fileIndex.mjs

@@ -0,0 +1,88 @@
+import { join } from 'node:path'
+import { createHash } from 'node:crypto'
+import fs from 'node:fs/promises'
+import { dirname } from 'path'
+const MAX_INDEX_FILE_SIZE = 1024 * 1024
+function sha256(content) {
+  return createHash('sha256').update(content).digest('hex')
+}
+
+function formatDate(date) {
+  return date.toISOString().split('T')[0]
+}
+
+async function computeIndexFilePath(path, immutabilityIndexPath) {
+  const stat = await fs.stat(path)
+  const date = new Date(stat.birthtimeMs)
+  const day = formatDate(date)
+  const hash = sha256(path)
+  return join(immutabilityIndexPath, day, hash)
+}
+
+export async function indexFile(path, immutabilityIndexPath) {
+  const indexFilePath = await computeIndexFilePath(path, immutabilityIndexPath)
+  try {
+    await fs.writeFile(indexFilePath, path, { flag: 'wx' })
+  } catch (err) {
+    // missing dir: make it
+    if (err.code === 'ENOENT') {
+      await fs.mkdir(dirname(indexFilePath), { recursive: true })
+      await fs.writeFile(indexFilePath, path)
+    } else {
+      throw err
+    }
+  }
+  return indexFilePath
+}
+
+export async function unindexFile(path, immutabilityIndexPath) {
+  try {
+    const cacheFileName = await computeIndexFilePath(path, immutabilityIndexPath)
+    await fs.unlink(cacheFileName)
+  } catch (err) {
+    if (err.code !== 'ENOENT') {
+      throw err
+    }
+  }
+}
+
+export async function* listOlderTargets(immutabilityCachePath, immutabilityDuration) {
+  // walk all dir by day until  the limit day
+  const limitDate = new Date(Date.now() - immutabilityDuration)
+
+  const limitDay = formatDate(limitDate)
+  const dir = await fs.opendir(immutabilityCachePath)
+  for await (const dirent of dir) {
+    if (dirent.isFile()) {
+      continue
+    }
+    // ensure we have a valid date
+    if (isNaN(new Date(dirent.name))) {
+      continue
+    }
+    // recent enough to be kept
+    if (dirent.name >= limitDay) {
+      continue
+    }
+    const subDirPath = join(immutabilityCachePath, dirent.name)
+    const subdir = await fs.opendir(subDirPath)
+    let nb = 0
+    for await (const hashFileEntry of subdir) {
+      const entryFullPath = join(subDirPath, hashFileEntry.name)
+      const { size } = await fs.stat(entryFullPath)
+      if (size > MAX_INDEX_FILE_SIZE) {
+        throw new Error(`Index file at ${entryFullPath} is too big, ${size} bytes `)
+      }
+      const targetPath = await fs.readFile(entryFullPath, { encoding: 'utf8' })
+      yield {
+        index: entryFullPath,
+        target: targetPath,
+      }
+      nb++
+    }
+    // cleanup older folder
+    if (nb === 0) {
+      await fs.rmdir(subDirPath)
+    }
+  }
+}

@xen-orchestra/immutable-backups/isBackupMetadata.mjs

@@ -0,0 +1 @@
+export default path => path.match(/xo-vm-backups\/[^/]+\/[^/]+\.json$/)

@xen-orchestra/immutable-backups/liftProtection.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs/promises'
+import * as Directory from './directory.mjs'
+import { createLogger } from '@xen-orchestra/log'
+import { listOlderTargets } from './fileIndex.mjs'
+import cleanXoCache from './_cleanXoCache.mjs'
+import loadConfig from './_loadConfig.mjs'
+
+const { info, warn } = createLogger('xen-orchestra:immutable-backups:liftProtection')
+
+async function liftRemoteImmutability(immutabilityCachePath, immutabilityDuration) {
+  for await (const { index, target } of listOlderTargets(immutabilityCachePath, immutabilityDuration)) {
+    await Directory.liftImmutability(target, immutabilityCachePath)
+    await fs.unlink(index)
+    await cleanXoCache(target)
+  }
+}
+
+async function liftImmutability(remotes) {
+  for (const [remoteId, { indexPath, immutabilityDuration }] of Object.entries(remotes)) {
+    liftRemoteImmutability(indexPath, immutabilityDuration).catch(err =>
+      warn('error during watchRemote', { err, remoteId, indexPath, immutabilityDuration })
+    )
+  }
+}
+
+const { liftEvery, remotes } = await loadConfig()
+
+if (liftEvery > 0) {
+  info('setup watcher for immutability lifting')
+  setInterval(async () => {
+    liftImmutability(remotes)
+  }, liftEvery)
+} else {
+  liftImmutability(remotes)
+}

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

@@ -0,0 +1,42 @@
+{
+  "private": false,
+  "name": "@xen-orchestra/immutable-backups",
+  "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/immutable-backups",
+  "bugs": "https://github.com/vatesfr/xen-orchestra/issues",
+  "repository": {
+    "directory": "@xen-orchestra/immutable-backups",
+    "type": "git",
+    "url": "https://github.com/vatesfr/xen-orchestra.git"
+  },
+  "author": {
+    "name": "Vates SAS",
+    "url": "https://vates.fr"
+  },
+  "bin": {
+    "xo-immutable-remote": "./protectRemotes.mjs",
+    "xo-lift-remote-immutability": "./liftProtection.mjs"
+  },
+  "license": "AGPL-3.0-or-later",
+  "version": "1.0.1",
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "@vates/async-each": "^1.0.0",
+    "@xen-orchestra/backups": "^0.44.6",
+    "@xen-orchestra/log": "^0.6.0",
+    "app-conf": "^2.3.0",
+    "chokidar": "^3.5.3",
+    "execa": "^5.0.0",
+    "ms": "^2.1.3",
+    "vhd-lib": "^4.7.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5",
+    "tap": "^18.6.1"
+  },
+  "scripts": {
+    "postversion": "npm publish --access public",
+    "test-integration": "tap  *.integ.mjs"
+  }
+}

@xen-orchestra/immutable-backups/protectRemotes.mjs

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+
+import fs from 'node:fs/promises'
+import * as File from './file.mjs'
+import * as Directory from './directory.mjs'
+import assert from 'node:assert'
+import { dirname, join, sep } from 'node:path'
+import { createLogger } from '@xen-orchestra/log'
+import chokidar from 'chokidar'
+import { indexFile } from './fileIndex.mjs'
+import cleanXoCache from './_cleanXoCache.mjs'
+import loadConfig from './_loadConfig.mjs'
+import isInVhdDirectory from './_isInVhdDirectory.mjs'
+const { debug, info, warn } = createLogger('xen-orchestra:immutable-backups:remote')
+
+async function test(remotePath, indexPath) {
+  await fs.readdir(remotePath)
+
+  const testPath = join(remotePath, '.test-immut')
+  // cleanup
+  try {
+    await File.liftImmutability(testPath, indexPath)
+    await fs.unlink(testPath)
+  } catch (err) {}
+  // can create , modify and delete a file
+  await fs.writeFile(testPath, `test immut ${new Date()}`)
+  await fs.writeFile(testPath, `test immut change 1 ${new Date()}`)
+  await fs.unlink(testPath)
+
+  // cannot modify or delete an immutable file
+  await fs.writeFile(testPath, `test immut ${new Date()}`)
+  await File.makeImmutable(testPath, indexPath)
+  await assert.rejects(fs.writeFile(testPath, `test immut change 2  ${new Date()}`), { code: 'EPERM' })
+  await assert.rejects(fs.unlink(testPath), { code: 'EPERM' })
+  // can modify and delete a file after lifting immutability
+  await File.liftImmutability(testPath, indexPath)
+
+  await fs.writeFile(testPath, `test immut change 3 ${new Date()}`)
+  await fs.unlink(testPath)
+}
+async function handleExistingFile(root, indexPath, path) {
+  try {
+    // a vhd block directory is completly immutable
+    if (isInVhdDirectory(path)) {
+      // this will trigger 3 times per vhd blocks
+      const dir = join(root, dirname(path))
+      if (Directory.isImmutable(dir)) {
+        await indexFile(dir, indexPath)
+      }
+    } else {
+      // other files are immutable a file basis
+      const fullPath = join(root, path)
+      if (File.isImmutable(fullPath)) {
+        await indexFile(fullPath, indexPath)
+      }
+    }
+  } catch (err) {
+    if (err.code !== 'EEXIST') {
+      // there can be a symbolic link in the tree
+      warn('handleExistingFile', err)
+    }
+  }
+}
+
+async function handleNewFile(root, indexPath, pendingVhds, path) {
+  // with awaitWriteFinish we have complete files here
+  // we can make them immutable
+
+  if (isInVhdDirectory(path)) {
+    // watching a vhd block
+    // wait for header/footer and BAT before making this immutable recursively
+    const splitted = path.split(sep)
+    const vmUuid = splitted[1]
+    const vdiUuid = splitted[4]
+    const uniqPath = `${vmUuid}/${vdiUuid}`
+    const { existing } = pendingVhds.get(uniqPath) ?? {}
+    if (existing === undefined) {
+      pendingVhds.set(uniqPath, { existing: 1, lastModified: Date.now() })
+    } else {
+      // already two of the key files,and we got the last one
+      if (existing === 2) {
+        await Directory.makeImmutable(join(root, dirname(path)), indexPath)
+        pendingVhds.delete(uniqPath)
+      } else {
+        // wait for the other
+        pendingVhds.set(uniqPath, { existing: existing + 1, lastModified: Date.now() })
+      }
+    }
+  } else {
+    const fullFilePath = join(root, path)
+    await File.makeImmutable(fullFilePath, indexPath)
+    await cleanXoCache(fullFilePath)
+  }
+}
+export async function watchRemote(remoteId, { root, immutabilityDuration, rebuildIndexOnStart = false, indexPath }) {
+  // create index directory
+  await fs.mkdir(indexPath, { recursive: true })
+
+  // test if fs and index directories are well configured
+  await test(root, indexPath)
+
+  // add duration and watch status in the metadata.json of the remote
+  const settingPath = join(root, 'immutability.json')
+  try {
+    // this file won't be made mutable by liftimmutability
+    await File.liftImmutability(settingPath)
+  } catch (error) {
+    // file may not exists, and it's not really a problem
+    info('lifting immutability on current settings', error)
+  }
+  await fs.writeFile(
+    settingPath,
+    JSON.stringify({
+      since: Date.now(),
+      immutable: true,
+      duration: immutabilityDuration,
+    })
+  )
+  // no index path in makeImmutable(): the immutability won't be lifted
+  File.makeImmutable(settingPath)
+
+  // we wait for footer/header AND BAT to be written before locking a vhd directory
+  // this map allow us to track the vhd with partial metadata
+  const pendingVhds = new Map()
+  // cleanup pending vhd map periodically
+  setInterval(
+    () => {
+      pendingVhds.forEach(({ lastModified, existing }, path) => {
+        if (Date.now() - lastModified > 60 * 60 * 1000) {
+          pendingVhds.delete(path)
+          warn(`vhd at ${path} is incomplete since ${lastModified}`, { existing, lastModified, path })
+        }
+      })
+    },
+    60 * 60 * 1000
+  )
+
+  // watch the remote for any new VM metadata json file
+  const PATHS = [
+    'xo-config-backups/*/*/data',
+    'xo-config-backups/*/*/data.json',
+    'xo-config-backups/*/*/metadata.json',
+    'xo-pool-metadata-backups/*/metadata.json',
+    'xo-pool-metadata-backups/*/data',
+    // xo-vm-backups/<vmuuid>/
+    'xo-vm-backups/*/*.json',
+    'xo-vm-backups/*/*.xva',
+    'xo-vm-backups/*/*.xva.checksum',
+    // xo-vm-backups/<vmuuid>/vdis/<jobid>/<vdiUuid>
+    'xo-vm-backups/*/vdis/*/*/*.vhd', // can be an alias or a vhd file
+    // for vhd directory :
+    'xo-vm-backups/*/vdis/*/*/data/*.vhd/bat',
+    'xo-vm-backups/*/vdis/*/*/data/*.vhd/header',
+    'xo-vm-backups/*/vdis/*/*/data/*.vhd/footer',
+  ]
+
+  let ready = false
+  const watcher = chokidar.watch(PATHS, {
+    ignored: [
+      /(^|[/\\])\../, // ignore dotfiles
+      /\.lock$/,
+    ],
+    cwd: root,
+    recursive: false, // vhd directory can generate a lot of folder, don't let chokidar choke on this
+    ignoreInitial: !rebuildIndexOnStart,
+    depth: 7,
+    awaitWriteFinish: true,
+  })
+
+  // Add event listeners.
+  watcher
+    .on('add', async path => {
+      debug(`File ${path} has been added ${path.split('/').length}`)
+      if (ready) {
+        await handleNewFile(root, indexPath, pendingVhds, path)
+      } else {
+        await handleExistingFile(root, indexPath, path)
+      }
+    })
+    .on('error', error => warn(`Watcher error: ${error}`))
+    .on('ready', () => {
+      ready = true
+      info('Ready for changes')
+    })
+}
+
+const { remotes } = await loadConfig()
+
+for (const [remoteId, remote] of Object.entries(remotes)) {
+  watchRemote(remoteId, remote).catch(err => warn('error during watchRemote', { err, remoteId, remote }))
+}

@xen-orchestra/lite/.eslintrc.cjs

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

@xen-orchestra/lite/.prettierrc.cjs

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

@xen-orchestra/lite/CHANGELOG.md

@@ -2,12 +2,19 @@
 
 ## **next**
 
+- Fix Typescript typings errors when running `yarn type-check` command (PR [#7278](https://github.com/vatesfr/xen-orchestra/pull/7278))
+- Introduce PWA Json Manifest (PR [#7291](https://github.com/vatesfr/xen-orchestra/pull/7291))
+
+## **0.1.7** (2023-12-28)
+
 - [VM/Action] Ability to migrate a VM from its view (PR [#7164](https://github.com/vatesfr/xen-orchestra/pull/7164))
 - Ability to override host address with `master` URL query param (PR [#7187](https://github.com/vatesfr/xen-orchestra/pull/7187))
 - Added tooltip on CPU provisioning warning icon (PR [#7223](https://github.com/vatesfr/xen-orchestra/pull/7223))
 - Add indeterminate state on FormToggle component (PR [#7230](https://github.com/vatesfr/xen-orchestra/pull/7230))
 - Add new UiStatusPanel component (PR [#7227](https://github.com/vatesfr/xen-orchestra/pull/7227))
+- XOA quick deploy (PR [#7245](https://github.com/vatesfr/xen-orchestra/pull/7245))
 - Fix infinite loader when no stats on pool dashboard (PR [#7236](https://github.com/vatesfr/xen-orchestra/pull/7236))
+- [Tree view] Display VMs count (PR [#7185](https://github.com/vatesfr/xen-orchestra/pull/7185))
 
 ## **0.1.6** (2023-11-30)
 

@xen-orchestra/lite/README.md

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

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

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

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

@@ -20,45 +20,45 @@ This will return an object with the following methods:
 ### Static modal
 
 ```ts
-useModal(MyModal);
+useModal(MyModal)
 ```
 
 ### Modal with props
 
 ```ts
-useModal(MyModal, { message: "Hello world!" });
+useModal(MyModal, { message: 'Hello world!' })
 ```
 
 ### Handle modal approval
 
 ```ts
-const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+const { onApprove } = useModal(MyModal, { message: 'Hello world!' })
 
-onApprove(() => console.log("Modal approved"));
+onApprove(() => console.log('Modal approved'))
 ```
 
 ### Handle modal approval with payload
 
 ```ts
-const { onApprove } = useModal(MyModal, { message: "Hello world!" });
+const { onApprove } = useModal(MyModal, { message: 'Hello world!' })
 
-onApprove((payload) => console.log("Modal approved with payload", payload));
+onApprove(payload => console.log('Modal approved with payload', payload))
 ```
 
 ### Handle modal decline
 
 ```ts
-const { onDecline } = useModal(MyModal, { message: "Hello world!" });
+const { onDecline } = useModal(MyModal, { message: 'Hello world!' })
 
-onDecline(() => console.log("Modal declined"));
+onDecline(() => console.log('Modal declined'))
 ```
 
 ### Handle modal close
 
 ```ts
-const { onClose } = useModal(MyModal, { message: "Hello world!" });
+const { onClose } = useModal(MyModal, { message: 'Hello world!' })
 
-onClose(() => console.log("Modal closed"));
+onClose(() => console.log('Modal closed'))
 ```
 
 ## Modal controller
@@ -66,7 +66,7 @@ onClose(() => console.log("Modal closed"));
 Inside the modal component, you can inject the modal controller with `inject(IK_MODAL)!`.
 
 ```ts
-const modal = inject(IK_MODAL)!;
+const modal = inject(IK_MODAL)!
 ```
 
 You can then use the following properties and methods on the `modal` object:

@xen-orchestra/lite/docs/xen-api-collections.md

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

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

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

@xen-orchestra/lite/index.html

@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>XO Lite</title>
   </head>

@xen-orchestra/lite/package.json

@@ -1,43 +1,42 @@
 {
   "name": "@xen-orchestra/lite",
-  "version": "0.1.6",
+  "version": "0.1.7",
+  "type": "module",
   "scripts": {
     "dev": "GIT_HEAD=$(git rev-parse HEAD) vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview --port 4173",
-    "release": "zx ./scripts/release.mjs",
+    "release": "./scripts/release.mjs",
     "build-only": "yarn release --build",
     "deploy": "yarn release --build --deploy",
     "gh-release": "yarn release --build --tarball --gh-release",
     "test": "yarn run type-check",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --build --force tsconfig.type-check.json"
   },
   "devDependencies": {
+    "@csstools/postcss-global-data": "^2.1.1",
     "@fontsource/poppins": "^5.0.8",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
-    "@limegrass/eslint-plugin-import-alias": "^1.1.0",
     "@novnc/novnc": "^1.4.0",
-    "@rushstack/eslint-patch": "^1.5.1",
     "@tsconfig/node18": "^18.2.2",
     "@types/d3-time-format": "^4.0.3",
     "@types/file-saver": "^2.0.7",
-    "@types/lodash-es": "^4.17.11",
+    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.18.9",
+    "@types/node": "^18.19.7",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/tsconfig": "^0.5.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vueuse/core": "^10.7.1",
-    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/math": "^10.7.1",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/shared": "^10.7.1",
-    "@vueuse/math": "^10.5.0",
+    "@xen-orchestra/web-core": "*",
     "complex-matcher": "^0.7.1",
     "d3-time-format": "^4.1.0",
     "decorator-synchronized": "^0.6.0",
     "echarts": "^5.4.3",
-    "eslint-plugin-vue": "^9.18.1",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.9.0",
     "human-format": "^1.2.0",
@@ -48,19 +47,21 @@
     "lodash-es": "^4.17.21",
     "make-error": "^1.3.6",
     "marked": "^9.1.5",
+    "minimist": "^1.2.8",
     "npm-run-all": "^4.1.5",
     "pinia": "^2.1.7",
     "placement.js": "^1.0.0-beta.5",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
+    "postcss-color-function": "^4.1.0",
     "postcss-custom-media": "^10.0.2",
     "postcss-nested": "^6.0.1",
-    "typescript": "^5.2.2",
+    "typescript": "~5.3.3",
-    "vite": "^4.5.0",
+    "vite": "^5.0.11",
-    "vue": "^3.3.8",
+    "vue": "^3.4.13",
-    "vue-echarts": "^6.6.1",
+    "vue-echarts": "^6.6.8",
-    "vue-i18n": "^9.6.5",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.22",
+    "vue-tsc": "^1.8.27",
     "zx": "^7.2.3"
   },
   "private": true,

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

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

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

@@ -0,0 +1,10 @@
+export default {
+  plugins: {
+    '@csstools/postcss-global-data': {
+      files: ['../web-core/lib/assets/css/.globals.pcss'],
+    },
+    'postcss-nested': {},
+    'postcss-custom-media': {},
+    'postcss-color-function': {},
+  },
+}

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

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

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

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

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

@@ -16,77 +16,56 @@
 </template>
 
 <script lang="ts" setup>
-import favicon from "@/assets/favicon.svg";
+import AppHeader from '@/components/AppHeader.vue'
-import AppHeader from "@/components/AppHeader.vue";
+import AppLogin from '@/components/AppLogin.vue'
-import AppLogin from "@/components/AppLogin.vue";
+import AppNavigation from '@/components/AppNavigation.vue'
-import AppNavigation from "@/components/AppNavigation.vue";
+import AppTooltips from '@/components/AppTooltips.vue'
-import AppTooltips from "@/components/AppTooltips.vue";
+import ModalList from '@/components/ui/modals/ModalList.vue'
-import ModalList from "@/components/ui/modals/ModalList.vue";
+import { useChartTheme } from '@/composables/chart-theme.composable'
-import { useChartTheme } from "@/composables/chart-theme.composable";
+import { useUnreachableHosts } from '@/composables/unreachable-hosts.composable'
-import { useUnreachableHosts } from "@/composables/unreachable-hosts.composable";
+import { useUiStore } from '@/stores/ui.store'
-import { useUiStore } from "@/stores/ui.store";
+import { usePoolCollection } from '@/stores/xen-api/pool.store'
-import { usePoolCollection } from "@/stores/xen-api/pool.store";
+import { useXenApiStore } from '@/stores/xen-api.store'
-import { useXenApiStore } from "@/stores/xen-api.store";
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
-import { useActiveElement, useMagicKeys, whenever } from "@vueuse/core";
+import { logicAnd } from '@vueuse/math'
-import { logicAnd } from "@vueuse/math";
+import { computed } from 'vue'
-import { computed } from "vue";
+import { useI18n } from 'vue-i18n'
-import { useI18n } from "vue-i18n";
 
-let link = document.querySelector(
+const xenApiStore = useXenApiStore()
-  "link[rel~='icon']"
-) as HTMLLinkElement | null;
-if (link == null) {
-  link = document.createElement("link");
-  link.rel = "icon";
-  document.getElementsByTagName("head")[0].appendChild(link);
-}
-link.href = favicon;
 
-const xenApiStore = useXenApiStore();
+const { pool } = usePoolCollection()
 
-const { pool } = usePoolCollection();
+useChartTheme()
-
+const uiStore = useUiStore()
-useChartTheme();
-const uiStore = useUiStore();
 
 if (import.meta.env.DEV) {
-  const { locale } = useI18n();
+  const { locale } = useI18n()
-  const activeElement = useActiveElement();
+  const activeElement = useActiveElement()
-  const { D, L } = useMagicKeys();
+  const { D, L } = useMagicKeys()
 
   const canToggle = computed(() => {
     if (activeElement.value == null) {
-      return true;
+      return true
     }
 
-    return !["INPUT", "TEXTAREA"].includes(activeElement.value.tagName);
+    return !['INPUT', 'TEXTAREA'].includes(activeElement.value.tagName)
-  });
+  })
 
-  whenever(
+  whenever(logicAnd(D, canToggle), () => (uiStore.colorMode = uiStore.colorMode === 'dark' ? 'light' : 'dark'))
-    logicAnd(D, canToggle),
-    () => (uiStore.colorMode = uiStore.colorMode === "dark" ? "light" : "dark")
-  );
 
-  whenever(
+  whenever(logicAnd(L, canToggle), () => (locale.value = locale.value === 'en' ? 'fr' : 'en'))
-    logicAnd(L, canToggle),
-    () => (locale.value = locale.value === "en" ? "fr" : "en")
-  );
 }
 
 whenever(
   () => pool.value?.$ref,
-  (poolRef) => {
+  poolRef => {
-    xenApiStore.getXapi().startWatching(poolRef);
+    xenApiStore.getXapi().startWatching(poolRef)
   }
-);
+)
 
-useUnreachableHosts();
+useUnreachableHosts()
 </script>
 
-<style lang="postcss">
-@import "@/assets/base.css";
-</style>
-
 <style lang="postcss" scoped>
 .main {
   overflow: auto;

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

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

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

@@ -1,100 +0,0 @@
-@import "reset.css";
-@import "theme.css";
-@import "@fontsource/poppins/400.css";
-@import "@fontsource/poppins/500.css";
-@import "@fontsource/poppins/600.css";
-@import "@fontsource/poppins/700.css";
-@import "@fontsource/poppins/900.css";
-@import "@fontsource/poppins/400-italic.css";
-
-body {
-  min-height: 100vh;
-  font-size: 1.3rem;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--color-blue-scale-100);
-}
-
-a {
-  color: var(--color-extra-blue-base);
-}
-
-code,
-code * {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-}
-
-.card-view {
-  padding: 1.2rem;
-  display: flex;
-  gap: 2rem;
-}
-
-.link {
-  text-decoration: underline;
-  color: var(--color-extra-blue-base);
-  cursor: pointer;
-}
-
-.link:hover {
-  color: var(--color-extra-blue-d20);
-}
-
-.link:active,
-.link.router-link-active {
-  color: var(--color-extra-blue-d40);
-}
-
-.link.router-link-active {
-  text-decoration: underline;
-}
-
-.context-color-success {
-  color: var(--color-green-infra-base);
-}
-
-.context-color-error {
-  color: var(--color-red-vates-base);
-}
-
-.context-color-warning {
-  color: var(--color-orange-world-base);
-}
-
-.context-color-info {
-  color: var(--color-extra-blue-base);
-}
-
-.context-background-color-success {
-  background-color: var(--background-color-green-infra);
-}
-
-.context-background-color-error {
-  background-color: var(--background-color-red-vates);
-}
-
-.context-background-color-warning {
-  background-color: var(--background-color-orange-world);
-}
-
-.context-background-color-info {
-  background-color: var(--background-color-extra-blue);
-}
-
-.context-border-color-success {
-  border-color: var(--color-green-infra-base);
-}
-
-.context-border-color-error {
-  border-color: var(--color-red-vates-base);
-}
-
-.context-border-color-warning {
-  border-color: var(--color-orange-world-base);
-}
-
-.context-border-color-info {
-  border-color: var(--color-extra-blue-base);
-}

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

@@ -1,91 +0,0 @@
-:root {
-  --color-logo: #282467;
-
-  --color-blue-scale-000: #000000;
-  --color-blue-scale-100: #1a1b38;
-  --color-blue-scale-200: #595a6f;
-  --color-blue-scale-300: #9899a5;
-  --color-blue-scale-400: #e5e5e7;
-  --color-blue-scale-500: #ffffff;
-
-  --color-extra-blue-l60: #d1cefb;
-  --color-extra-blue-l40: #bbb5f9;
-  --color-extra-blue-l20: #a39df8;
-  --color-extra-blue-base: #8f84ff;
-  --color-extra-blue-d20: #716ac6;
-  --color-extra-blue-d40: #554f94;
-  --color-extra-blue-d60: #383563;
-
-  --color-green-infra-l60: #b5dbca;
-  --color-green-infra-l40: #91c9b0;
-  --color-green-infra-l20: #70b795;
-  --color-green-infra-base: #55a57b;
-  --color-green-infra-d20: #438463;
-  --color-green-infra-d40: #32634a;
-  --color-green-infra-d60: #214231;
-
-  --color-orange-world-l60: #f2cda8;
-  --color-orange-world-l40: #ebb57d;
-  --color-orange-world-l20: #e59d56;
-  --color-orange-world-base: #ef7f18;
-  --color-orange-world-d20: #bf6612;
-  --color-orange-world-d40: #864f1f;
-  --color-orange-world-d60: #5a3514;
-
-  --color-red-vates-l60: #dda5a7;
-  --color-red-vates-l40: #ce787c;
-  --color-red-vates-l20: #bf4f51;
-  --color-red-vates-base: #be1621;
-  --color-red-vates-d20: #8e2221;
-  --color-red-vates-d40: #6a1919;
-  --color-red-vates-d60: #471010;
-
-  --color-grayscale-200: #585757;
-
-  --background-color-primary: #ffffff;
-  --background-color-secondary: #f6f6f7;
-  --background-color-extra-blue: #f4f3fe;
-  --background-color-green-infra: #ecf5f2;
-  --background-color-orange-world: #fbf2e9;
-  --background-color-red-vates: #f5e8e9;
-
-  --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.06);
-  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.1),
-    0 0.2rem 0.1rem rgba(20, 20, 30, 0.06),
-    0 0.1rem 0.1rem rgba(20, 20, 30, 0.08);
-  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.1),
-    0 0.1rem 1.8rem rgba(20, 20, 30, 0.06), 0 0.6rem 1rem rgba(20, 20, 30, 0.08);
-  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.1),
-    0 0.9rem 4.6rem rgba(20, 20, 30, 0.06),
-    0 2.4rem 3.8rem rgba(20, 20, 30, 0.04);
-}
-
-:root.dark {
-  color-scheme: dark;
-
-  --color-logo: #e5e5e7;
-
-  --color-blue-scale-000: #ffffff;
-  --color-blue-scale-100: #e5e5e7;
-  --color-blue-scale-200: #9899a5;
-  --color-blue-scale-300: #595a6f;
-  --color-blue-scale-400: #1a1b38;
-  --color-blue-scale-500: #000000;
-
-  --background-color-primary: #14141d;
-  --background-color-secondary: #17182a;
-  --background-color-extra-blue: #35335d;
-  --background-color-green-infra: #243b3d;
-  --background-color-orange-world: #493328;
-  --background-color-red-vates: #3c1a28;
-
-  --shadow-100: 0 0.1rem 0.1rem rgba(20, 20, 30, 0.12);
-  --shadow-200: 0 0.1rem 0.3rem rgba(20, 20, 30, 0.2),
-    0 0.2rem 0.1rem rgba(20, 20, 30, 0.12),
-    0 0.1rem 0.1rem rgba(20, 20, 30, 0.16);
-  --shadow-300: 0 0.3rem 0.5rem rgba(20, 20, 30, 0.2),
-    0 0.1rem 1.8rem rgba(20, 20, 30, 0.12), 0 0.6rem 1rem rgba(20, 20, 30, 0.16);
-  --shadow-400: 0 1.1rem 1.5rem rgba(20, 20, 30, 0.2),
-    0 0.9rem 4.6rem rgba(20, 20, 30, 0.12),
-    0 2.4rem 3.8rem rgba(20, 20, 30, 0.08);
-}

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

@@ -6,54 +6,44 @@
         <UiIcon :icon="faAngleDown" class="dropdown-icon" />
       </button>
     </template>
-    <MenuItem :icon="faGear" @click="openSettings">{{
+    <MenuItem :icon="faGear" @click="openSettings">{{ $t('settings') }}</MenuItem>
-      $t("settings")
-    }}</MenuItem>
     <MenuItem :icon="faMessage" @click="openFeedbackUrl">
-      {{ $t("send-us-feedback") }}
+      {{ $t('send-us-feedback') }}
     </MenuItem>
-    <MenuItem
+    <MenuItem :icon="faArrowRightFromBracket" class="menu-item-logout" @click="logout">
-      :icon="faArrowRightFromBracket"
+      {{ $t('log-out') }}
-      class="menu-item-logout"
-      @click="logout"
-    >
-      {{ $t("log-out") }}
     </MenuItem>
   </AppMenu>
 </template>
 
 <script lang="ts" setup>
-import { nextTick } from "vue";
+import { nextTick } from 'vue'
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
 import {
   faAngleDown,
   faArrowRightFromBracket,
   faCircleUser,
   faGear,
   faMessage,
-} from "@fortawesome/free-solid-svg-icons";
+} from '@fortawesome/free-solid-svg-icons'
-import AppMenu from "@/components/menu/AppMenu.vue";
+import AppMenu from '@/components/menu/AppMenu.vue'
-import MenuItem from "@/components/menu/MenuItem.vue";
+import MenuItem from '@/components/menu/MenuItem.vue'
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useXenApiStore } from "@/stores/xen-api.store";
+import { useXenApiStore } from '@/stores/xen-api.store'
 
-const router = useRouter();
+const router = useRouter()
 
 const logout = () => {
-  const xenApiStore = useXenApiStore();
+  const xenApiStore = useXenApiStore()
-  xenApiStore.disconnect();
+  xenApiStore.disconnect()
-  nextTick(() => router.push({ name: "home" }));
+  nextTick(() => router.push({ name: 'home' }))
-};
+}
 
 const openFeedbackUrl = () => {
-  window.open(
+  window.open('https://xcp-ng.org/forum/topic/4731/xen-orchestra-lite', '_blank', 'noopener')
-    "https://xcp-ng.org/forum/topic/4731/xen-orchestra-lite",
+}
-    "_blank",
-    "noopener"
-  );
-};
 
-const openSettings = () => router.push({ name: "settings" });
+const openSettings = () => router.push({ name: 'settings' })
 </script>
 
 <style scoped>
@@ -61,14 +51,14 @@ const openSettings = () => router.push({ name: "settings" });
   display: flex;
   align-items: center;
   padding: 1rem;
-  color: var(--color-blue-scale-100);
+  color: var(--color-grey-100);
   border: none;
   border-radius: 0.8rem;
   background-color: var(--background-color-secondary);
   gap: 0.8rem;
 
   &:disabled {
-    color: var(--color-blue-scale-400);
+    color: var(--color-grey-500);
   }
 
   &:not(:disabled) {
@@ -82,7 +72,7 @@ const openSettings = () => router.push({ name: "settings" });
 
     &:active,
     &.active {
-      color: var(--color-extra-blue-base);
+      color: var(--color-purple-base);
     }
   }
 }
@@ -96,6 +86,6 @@ const openSettings = () => router.push({ name: "settings" });
 }
 
 .menu-item-logout {
-  color: var(--color-red-vates-base);
+  color: var(--color-red-base);
 }
 </style>

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

@@ -1,11 +1,6 @@
 <template>
   <header class="app-header">
-    <UiIcon
+    <UiIcon v-if="isMobile" ref="navigationTrigger" :icon="faBars" class="toggle-navigation" />
-      v-if="isMobile"
-      ref="navigationTrigger"
-      :icon="faBars"
-      class="toggle-navigation"
-    />
     <RouterLink :to="{ name: 'home' }">
       <img v-if="isMobile" alt="XO Lite" src="../assets/logo.svg" />
       <TextLogo v-else />
@@ -13,26 +8,35 @@
     <slot />
     <div class="right">
       <PoolOverrideWarning as-tooltip />
+      <UiButton v-if="isDesktop" :icon="faDownload" @click="openXoaDeploy">
+        {{ $t('deploy-xoa') }}
+      </UiButton>
       <AccountButton />
     </div>
   </header>
 </template>
 
 <script lang="ts" setup>
-import AccountButton from "@/components/AccountButton.vue";
+import AccountButton from '@/components/AccountButton.vue'
-import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
+import PoolOverrideWarning from '@/components/PoolOverrideWarning.vue'
-import TextLogo from "@/components/TextLogo.vue";
+import TextLogo from '@/components/TextLogo.vue'
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiButton from '@/components/ui/UiButton.vue'
-import { useNavigationStore } from "@/stores/navigation.store";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useUiStore } from "@/stores/ui.store";
+import { useNavigationStore } from '@/stores/navigation.store'
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from 'vue-router'
-import { storeToRefs } from "pinia";
+import { useUiStore } from '@/stores/ui.store'
+import { faBars, faDownload } from '@fortawesome/free-solid-svg-icons'
+import { storeToRefs } from 'pinia'
 
-const uiStore = useUiStore();
+const router = useRouter()
-const { isMobile } = storeToRefs(uiStore);
 
-const navigationStore = useNavigationStore();
+const openXoaDeploy = () => router.push({ name: 'xoa.deploy' })
-const { trigger: navigationTrigger } = storeToRefs(navigationStore);
+
+const uiStore = useUiStore()
+const { isMobile, isDesktop } = storeToRefs(uiStore)
+
+const navigationStore = useNavigationStore()
+const { trigger: navigationTrigger } = storeToRefs(navigationStore)
 </script>
 
 <style lang="postcss" scoped>
@@ -42,7 +46,7 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
   justify-content: space-between;
   height: 5.5rem;
   padding: 1rem;
-  border-bottom: 0.1rem solid var(--color-blue-scale-400);
+  border-bottom: 0.1rem solid var(--color-grey-500);
   background-color: var(--background-color-secondary);
 
   img {
@@ -62,5 +66,6 @@ const { trigger: navigationTrigger } = storeToRefs(navigationStore);
 .right {
   display: flex;
   align-items: center;
+  gap: 2rem;
 }
 </style>

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

@@ -5,7 +5,7 @@
       <PoolOverrideWarning />
       <p v-if="isHostIsSlaveErr(error)" class="error">
         <UiIcon :icon="faExclamationCircle" />
-        {{ $t("login-only-on-master") }}
+        {{ $t('login-only-on-master') }}
         <a :href="masterUrl.href">{{ masterUrl.hostname }}</a>
       </p>
       <template v-else>
@@ -13,10 +13,10 @@
           <FormInput v-model="login" name="login" readonly type="text" />
         </FormInputWrapper>
         <FormInput
-          name="password"
           ref="passwordRef"
-          type="password"
           v-model="password"
+          name="password"
+          type="password"
           :class="{ error: isInvalidPassword }"
           :placeholder="$t('password')"
           :readonly="isConnecting"
@@ -25,10 +25,10 @@
         <LoginError :error="error" />
         <label class="remember-me-label">
           <FormCheckbox v-model="rememberMe" />
-          {{ $t("keep-me-logged") }}
+          {{ $t('keep-me-logged') }}
         </label>
         <UiButton type="submit" :busy="isConnecting">
-          {{ $t("login") }}
+          {{ $t('login') }}
         </UiButton>
       </template>
     </form>
@@ -36,69 +36,68 @@
 </template>
 
 <script lang="ts" setup>
-import { usePageTitleStore } from "@/stores/page-title.store";
+import { usePageTitleStore } from '@/stores/page-title.store'
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from 'vue'
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n'
-import { useLocalStorage, whenever } from "@vueuse/core";
+import { useLocalStorage, whenever } from '@vueuse/core'
 
-import FormCheckbox from "@/components/form/FormCheckbox.vue";
+import FormCheckbox from '@/components/form/FormCheckbox.vue'
-import FormInput from "@/components/form/FormInput.vue";
+import FormInput from '@/components/form/FormInput.vue'
-import FormInputWrapper from "@/components/form/FormInputWrapper.vue";
+import FormInputWrapper from '@/components/form/FormInputWrapper.vue'
-import LoginError from "@/components/LoginError.vue";
+import LoginError from '@/components/LoginError.vue'
-import PoolOverrideWarning from "@/components/PoolOverrideWarning.vue";
+import PoolOverrideWarning from '@/components/PoolOverrideWarning.vue'
-import UiButton from "@/components/ui/UiButton.vue";
+import UiButton from '@/components/ui/UiButton.vue'
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import type { XenApiError } from "@/libs/xen-api/xen-api.types";
+import type { XenApiError } from '@/libs/xen-api/xen-api.types'
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
-import { useXenApiStore } from "@/stores/xen-api.store";
+import { useXenApiStore } from '@/stores/xen-api.store'
 
-const { t } = useI18n();
+const { t } = useI18n()
-usePageTitleStore().setTitle(t("login"));
+usePageTitleStore().setTitle(t('login'))
-const xenApiStore = useXenApiStore();
+const xenApiStore = useXenApiStore()
-const { isConnecting } = storeToRefs(xenApiStore);
+const { isConnecting } = storeToRefs(xenApiStore)
-const login = ref("root");
+const login = ref('root')
-const password = ref("");
+const password = ref('')
-const error = ref<XenApiError>();
+const error = ref<XenApiError>()
-const passwordRef = ref<InstanceType<typeof FormInput>>();
+const passwordRef = ref<InstanceType<typeof FormInput>>()
-const isInvalidPassword = ref(false);
+const isInvalidPassword = ref(false)
-const masterUrl = ref(new URL(window.origin));
+const masterUrl = ref(new URL(window.origin))
-const rememberMe = useLocalStorage("rememberMe", false);
+const rememberMe = useLocalStorage('rememberMe', false)
 
-const focusPasswordInput = () => passwordRef.value?.focus();
+const focusPasswordInput = () => passwordRef.value?.focus()
-const isHostIsSlaveErr = (err: XenApiError | undefined) =>
+const isHostIsSlaveErr = (err: XenApiError | undefined) => err?.message === 'HOST_IS_SLAVE'
-  err?.message === "HOST_IS_SLAVE";
 
 onMounted(() => {
   if (rememberMe.value) {
-    xenApiStore.reconnect();
+    xenApiStore.reconnect()
   } else {
-    focusPasswordInput();
+    focusPasswordInput()
   }
-});
+})
 
 watch(password, () => {
-  isInvalidPassword.value = false;
+  isInvalidPassword.value = false
-  error.value = undefined;
+  error.value = undefined
-});
+})
 
 whenever(
   () => isHostIsSlaveErr(error.value),
   () => (masterUrl.value.hostname = error.value!.data)
-);
+)
 
 async function handleSubmit() {
   try {
-    await xenApiStore.connect(login.value, password.value);
+    await xenApiStore.connect(login.value, password.value)
   } catch (err: any) {
-    if (err.message === "SESSION_AUTHENTICATION_FAILED") {
+    if (err.message === 'SESSION_AUTHENTICATION_FAILED') {
-      focusPasswordInput();
+      focusPasswordInput()
-      isInvalidPassword.value = true;
+      isInvalidPassword.value = true
     } else {
-      console.error(error);
+      console.error(error)
     }
 
-    error.value = err;
+    error.value = err
   }
 }
 </script>
@@ -136,7 +135,7 @@ form {
   background-color: var(--background-color-secondary);
 
   .error {
-    color: var(--color-red-vates-base);
+    color: var(--color-red-base);
   }
 }
 
@@ -157,7 +156,7 @@ input {
   max-width: 100%;
   margin-bottom: 1rem;
   padding: 1rem 1.5rem;
-  border: 1px solid var(--color-blue-scale-400);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.8rem;
   background-color: white;
 }

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

@@ -1,39 +1,40 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div ref="rootElement" class="app-markdown" v-html="html" />
+  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script lang="ts" setup>
-import markdown from "@/libs/markdown";
+import markdown from '@/libs/markdown'
-import { useEventListener } from "@vueuse/core";
+import { useEventListener } from '@vueuse/core'
-import { computed, type Ref, ref } from "vue";
+import { computed, type Ref, ref } from 'vue'
 
-const rootElement = ref() as Ref<HTMLElement>;
+const rootElement = ref() as Ref<HTMLElement>
 
 const props = defineProps<{
-  content: string;
+  content: string
-}>();
+}>()
 
-const html = computed(() => markdown.parse(props.content ?? ""));
+const html = computed(() => markdown.parse(props.content ?? ''))
 
 useEventListener(
   rootElement,
-  "click",
+  'click',
   (event: MouseEvent) => {
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement
 
-    if (!target.classList.contains("copy-button")) {
+    if (!target.classList.contains('copy-button')) {
-      return;
+      return
     }
 
-    const copyable =
+    const copyable = target.parentElement!.querySelector<HTMLElement>('.copyable')
-      target.parentElement!.querySelector<HTMLElement>(".copyable");
 
     if (copyable !== null) {
-      navigator.clipboard.writeText(copyable.innerText);
+      navigator.clipboard.writeText(copyable.innerText)
     }
   },
   { capture: true }
-);
+)
 </script>
 
 <style lang="postcss" scoped>
@@ -59,7 +60,7 @@ useEventListener(
     }
 
     code:not(.hljs-code) {
-      background-color: var(--background-color-extra-blue);
+      background-color: var(--background-color-purple-10);
       padding: 0.3rem 0.6rem;
       border-radius: 0.6rem;
     }
@@ -80,12 +81,12 @@ useEventListener(
       }
 
       thead th {
-        border-bottom: 2px solid var(--color-blue-scale-400);
+        border-bottom: 2px solid var(--color-grey-500);
         background-color: var(--background-color-secondary);
       }
 
       tbody td {
-        border-bottom: 1px solid var(--color-blue-scale-400);
+        border-bottom: 1px solid var(--color-grey-500);
       }
     }
 
@@ -102,11 +103,11 @@ useEventListener(
       background-color: transparent;
 
       &:hover {
-        color: var(--color-extra-blue-base);
+        color: var(--color-purple-base);
       }
 
       &:active {
-        color: var(--color-extra-blue-d20);
+        color: var(--color-purple-d20);
       }
     }
   }

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

@@ -1,11 +1,6 @@
 <template>
   <transition name="slide">
-    <nav
+    <nav v-if="isDesktop || isOpen" ref="navElement" :class="{ collapsible: isMobile }" class="app-navigation">
-      v-if="isDesktop || isOpen"
-      ref="navElement"
-      :class="{ collapsible: isMobile }"
-      class="app-navigation"
-    >
       <StoryMenu v-if="$route.meta.hasStoryNav" />
       <InfraPoolList v-else />
     </nav>
@@ -13,34 +8,34 @@
 </template>
 
 <script lang="ts" setup>
-import StoryMenu from "@/components/component-story/StoryMenu.vue";
+import StoryMenu from '@/components/component-story/StoryMenu.vue'
-import InfraPoolList from "@/components/infra/InfraPoolList.vue";
+import InfraPoolList from '@/components/infra/InfraPoolList.vue'
-import { useNavigationStore } from "@/stores/navigation.store";
+import { useNavigationStore } from '@/stores/navigation.store'
-import { useUiStore } from "@/stores/ui.store";
+import { useUiStore } from '@/stores/ui.store'
-import { onClickOutside, whenever } from "@vueuse/core";
+import { onClickOutside, whenever } from '@vueuse/core'
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia'
-import { ref } from "vue";
+import { ref } from 'vue'
 
-const uiStore = useUiStore();
+const uiStore = useUiStore()
-const { isMobile, isDesktop } = storeToRefs(uiStore);
+const { isMobile, isDesktop } = storeToRefs(uiStore)
 
-const navigationStore = useNavigationStore();
+const navigationStore = useNavigationStore()
-const { isOpen, trigger } = storeToRefs(navigationStore);
+const { isOpen, trigger } = storeToRefs(navigationStore)
 
-const navElement = ref();
+const navElement = ref()
 
 whenever(isOpen, () => {
   const unregisterEvent = onClickOutside(
     navElement,
     () => {
-      isOpen.value = false;
+      isOpen.value = false
-      unregisterEvent?.();
+      unregisterEvent?.()
     },
     {
       ignore: [trigger],
     }
-  );
+  )
-});
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -50,7 +45,7 @@ whenever(isOpen, () => {
   max-width: 37rem;
   height: calc(100vh - 5.5rem);
   padding: 0.5rem;
-  border-right: 1px solid var(--color-blue-scale-400);
+  border-right: 1px solid var(--color-grey-500);
   background-color: var(--background-color-primary);
 
   &.collapsible {

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

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

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

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

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

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

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

@@ -10,42 +10,39 @@
     </UiFilter>
 
     <UiActionButton :icon="faPlus" class="add-filter" @click="openModal()">
-      {{ $t("add-filter") }}
+      {{ $t('add-filter') }}
     </UiActionButton>
   </UiFilterGroup>
 </template>
 
 <script lang="ts" setup>
-import UiActionButton from "@/components/ui/UiActionButton.vue";
+import UiActionButton from '@/components/ui/UiActionButton.vue'
-import UiFilter from "@/components/ui/UiFilter.vue";
+import UiFilter from '@/components/ui/UiFilter.vue'
-import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
+import UiFilterGroup from '@/components/ui/UiFilterGroup.vue'
-import { useModal } from "@/composables/modal.composable";
+import { useModal } from '@/composables/modal.composable'
-import type { Filters } from "@/types/filter";
+import type { Filters } from '@/types/filter'
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 const props = defineProps<{
-  activeFilters: string[];
+  activeFilters: string[]
-  availableFilters: Filters;
+  availableFilters: Filters
-}>();
+}>()
 
 const emit = defineEmits<{
-  (event: "addFilter", filter: string): void;
+  (event: 'addFilter', filter: string): void
-  (event: "removeFilter", filter: string): void;
+  (event: 'removeFilter', filter: string): void
-}>();
+}>()
 
 const openModal = (editedFilter?: string) => {
-  const { onApprove } = useModal<string>(
+  const { onApprove } = useModal<string>(() => import('@/components/modals/CollectionFilterModal.vue'), {
-    () => import("@/components/modals/CollectionFilterModal.vue"),
+    availableFilters: props.availableFilters,
-    {
+    editedFilter,
-      availableFilters: props.availableFilters,
+  })
-      editedFilter,
-    }
-  );
 
   if (editedFilter !== undefined) {
-    onApprove(() => emit("removeFilter", editedFilter));
+    onApprove(() => emit('removeFilter', editedFilter))
   }
 
-  onApprove((newFilter) => emit("addFilter", newFilter));
+  onApprove(newFilter => emit('addFilter', newFilter))
-};
+}
 </script>

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

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

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

@@ -13,46 +13,39 @@
     </UiFilter>
 
     <UiActionButton :icon="faPlus" class="add-sort" @click="openModal()">
-      {{ $t("add-sort") }}
+      {{ $t('add-sort') }}
     </UiActionButton>
   </UiFilterGroup>
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import UiActionButton from "@/components/ui/UiActionButton.vue";
+import UiActionButton from '@/components/ui/UiActionButton.vue'
-import UiFilter from "@/components/ui/UiFilter.vue";
+import UiFilter from '@/components/ui/UiFilter.vue'
-import UiFilterGroup from "@/components/ui/UiFilterGroup.vue";
+import UiFilterGroup from '@/components/ui/UiFilterGroup.vue'
-import { useModal } from "@/composables/modal.composable";
+import { useModal } from '@/composables/modal.composable'
-import type { ActiveSorts, NewSort, Sorts } from "@/types/sort";
+import type { ActiveSorts, NewSort, Sorts } from '@/types/sort'
-import {
+import { faCaretDown, faCaretUp, faPlus } from '@fortawesome/free-solid-svg-icons'
-  faCaretDown,
+import { computed } from 'vue'
-  faCaretUp,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { computed } from "vue";
 
 const props = defineProps<{
-  availableSorts: Sorts;
+  availableSorts: Sorts
-  activeSorts: ActiveSorts<Record<string, any>>;
+  activeSorts: ActiveSorts<Record<string, any>>
-}>();
+}>()
 
 const emit = defineEmits<{
-  (event: "toggleSortDirection", property: string): void;
+  (event: 'toggleSortDirection', property: string): void
-  (event: "addSort", property: string, isAscending: boolean): void;
+  (event: 'addSort', property: string, isAscending: boolean): void
-  (event: "removeSort", property: string): void;
+  (event: 'removeSort', property: string): void
-}>();
+}>()
 
 const openModal = () => {
-  const { onApprove } = useModal<NewSort>(
+  const { onApprove } = useModal<NewSort>(() => import('@/components/modals/CollectionSorterModal.vue'), {
-    () => import("@/components/modals/CollectionSorterModal.vue"),
+    availableSorts: computed(() => props.availableSorts),
-    { availableSorts: computed(() => props.availableSorts) }
+  })
-  );
 
-  onApprove(({ property, isAscending }) =>
+  onApprove(({ property, isAscending }) => emit('addSort', property, isAscending))
-    emit("addSort", property, isAscending)
+}
-  );
-};
 </script>
 
 <style lang="postcss" scoped>

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

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

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

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

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

@@ -26,18 +26,17 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 defineProps<{
-  before?: IconDefinition | string | object; // "object" added as workaround
+  before?: IconDefinition | string | object // "object" added as workaround
-  after?: IconDefinition | string | object; // See https://github.com/vuejs/core/issues/4294
+  after?: IconDefinition | string | object // See https://github.com/vuejs/core/issues/4294
-  label?: string;
+  label?: string
-  inline?: boolean;
+  inline?: boolean
-}>();
+}>()
 
-const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
+const isIcon = (maybeIcon: any): maybeIcon is IconDefinition => typeof maybeIcon === 'object'
-  typeof maybeIcon === "object";
 </script>
 
 <style lang="postcss" scoped>
@@ -55,14 +54,14 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   align-items: stretch;
   overflow: hidden;
   padding: 0 0.7rem;
-  border: 1px solid var(--color-blue-scale-400);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.8rem;
-  background-color: var(--color-blue-scale-500);
+  background-color: var(--color-grey-600);
   box-shadow: var(--shadow-100);
   gap: 0.1rem;
 
   &:focus-within {
-    outline: 1px solid var(--color-extra-blue-l40);
+    outline: 1px solid var(--color-purple-l40);
   }
 }
 
@@ -72,7 +71,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
 }
 
 .form-widget:hover .widget {
-  border-color: var(--color-extra-blue-l60);
+  border-color: var(--color-purple-l60);
 }
 
 .element {
@@ -94,8 +93,8 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   font-size: inherit;
   border: none;
   outline: none;
-  color: var(--color-blue-scale-100);
+  color: var(--color-grey-100);
-  background-color: var(--color-blue-scale-500);
+  background-color: var(--color-grey-600);
   flex: 1;
 
   &:disabled {
@@ -103,7 +102,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   }
 }
 
-:slotted(input[type="checkbox"]) {
+:slotted(input[type='checkbox']) {
   font: inherit;
   display: grid;
   flex: 1.5rem 0 0;
@@ -121,7 +120,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
   &::before {
     width: 0.65em;
     height: 0.65em;
-    content: "";
+    content: '';
     transition: 120ms transform ease-in-out;
     transform: scale(0);
     transform-origin: center;
@@ -135,7 +134,7 @@ const isIcon = (maybeIcon: any): maybeIcon is IconDefinition =>
 
   &:disabled {
     cursor: not-allowed;
-    color: var(--color-blue-scale-200);
+    color: var(--color-grey-200);
   }
 }
 </style>

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

@@ -27,35 +27,35 @@
 </template>
 
 <script lang="ts" setup>
-import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
-import UiCounter from "@/components/ui/UiCounter.vue";
+import UiCounter from '@/components/ui/UiCounter.vue'
-import UiSpinner from "@/components/ui/UiSpinner.vue";
+import UiSpinner from '@/components/ui/UiSpinner.vue'
-import UiTable from "@/components/ui/UiTable.vue";
+import UiTable from '@/components/ui/UiTable.vue'
-import type { XenApiPatchWithHostRefs } from "@/composables/host-patches.composable";
+import type { XenApiPatchWithHostRefs } from '@/composables/host-patches.composable'
-import { vTooltip } from "@/directives/tooltip.directive";
+import { vTooltip } from '@/directives/tooltip.directive'
-import { useUiStore } from "@/stores/ui.store";
+import { useUiStore } from '@/stores/ui.store'
-import { computed } from "vue";
+import { computed } from 'vue'
 
 const props = defineProps<{
-  patches: XenApiPatchWithHostRefs[];
+  patches: XenApiPatchWithHostRefs[]
-  hasMultipleHosts: boolean;
+  hasMultipleHosts: boolean
-  areAllLoaded: boolean;
+  areAllLoaded: boolean
-  areSomeLoaded: boolean;
+  areSomeLoaded: boolean
-}>();
+}>()
 
 const sortedPatches = computed(() =>
   [...props.patches].sort((patch1, patch2) => {
     if (patch1.changelog == null) {
-      return 1;
+      return 1
     } else if (patch2.changelog == null) {
-      return -1;
+      return -1
     }
 
-    return patch1.changelog.date - patch2.changelog.date;
+    return patch1.changelog.date - patch2.changelog.date
   })
-);
+)
 
-const { isDesktop } = useUiStore();
+const { isDesktop } = useUiStore()
 </script>
 
 <style lang="postcss" scoped>

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

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

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

@@ -1,7 +1,7 @@
 <template>
   <div class="no-data">
     <img alt="No data" class="img" src="@/assets/undraw-bug-fixing.svg" />
-    <p class="text-error">{{ $t("error-no-data") }}</p>
+    <p class="text-error">{{ $t('error-no-data') }}</p>
   </div>
 </template>
 
@@ -25,6 +25,6 @@
   font-weight: 500;
   font-size: 1.25em;
   line-height: 150%;
-  color: var(--color-red-vates-base);
+  color: var(--color-red-base);
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="no-result">
     <img alt="" class="img" src="@/assets/no-result.svg" />
-    <p class="text-info">{{ $t("no-result") }}</p>
+    <p class="text-info">{{ $t('no-result') }}</p>
   </div>
 </template>
 
@@ -27,6 +27,6 @@
   font-weight: 500;
   font-size: 2rem;
   line-height: 150%;
-  color: var(--color-extra-blue-base);
+  color: var(--color-purple-base);
 }
 </style>

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

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

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

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

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

@@ -5,28 +5,28 @@
     :title="$t('xo-lite-under-construction')"
   >
     <p class="contact">
-      {{ $t("do-you-have-needs") }}
+      {{ $t('do-you-have-needs') }}
       <a
         href="https://xcp-ng.org/forum/topic/5018/xo-lite-building-an-embedded-ui-in-xcp-ng"
         rel="noopener noreferrer"
         target="_blank"
       >
-        {{ $t("here") }} →
+        {{ $t('here') }} →
       </a>
     </p>
   </UiStatusPanel>
 </template>
 
 <script lang="ts" setup>
-import underConstruction from "@/assets/under-construction.svg";
+import underConstruction from '@/assets/under-construction.svg'
-import UiStatusPanel from "@/components/ui/UiStatusPanel.vue";
+import UiStatusPanel from '@/components/ui/UiStatusPanel.vue'
 </script>
 
 <style lang="postcss" scoped>
 .contact {
   font-weight: 400;
   font-size: 20px;
-  color: var(--color-blue-scale-100);
+  color: var(--color-grey-100);
 
   & a {
     text-transform: lowercase;

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

@@ -1,8 +1,6 @@
 <template>
   <div
     v-if="xenApi.isPoolOverridden"
-    class="warning-not-current-pool"
-    @click="xenApi.resetPoolMasterIp"
     v-tooltip="
       asTooltip && {
         placement: 'right',
@@ -12,6 +10,8 @@
       `,
       }
     "
+    class="warning-not-current-pool"
+    @click="xenApi.resetPoolMasterIp"
   >
     <div class="wrapper">
       <UiIcon :icon="faWarning" />
@@ -20,31 +20,31 @@
           <strong>{{ masterSessionStorage }}</strong>
         </i18n-t>
         <br />
-        {{ $t("click-to-return-default-pool") }}
+        {{ $t('click-to-return-default-pool') }}
       </p>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { faWarning } from '@fortawesome/free-solid-svg-icons'
-import { useSessionStorage } from "@vueuse/core";
+import { useSessionStorage } from '@vueuse/core'
 
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { useXenApiStore } from "@/stores/xen-api.store";
+import { useXenApiStore } from '@/stores/xen-api.store'
-import { vTooltip } from "@/directives/tooltip.directive";
+import { vTooltip } from '@/directives/tooltip.directive'
 
 defineProps<{
-  asTooltip?: boolean;
+  asTooltip?: boolean
-}>();
+}>()
 
-const xenApi = useXenApiStore();
+const xenApi = useXenApiStore()
-const masterSessionStorage = useSessionStorage("master", null);
+const masterSessionStorage = useSessionStorage('master', null)
 </script>
 
 <style lang="postcss" scoped>
 .warning-not-current-pool {
-  color: var(--color-orange-world-base);
+  color: var(--color-orange-base);
   cursor: pointer;
 
   .wrapper {

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

@@ -3,47 +3,41 @@
 </template>
 
 <script lang="ts" setup>
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import UiIcon from '@/components/ui/icon/UiIcon.vue'
-import { VM_POWER_STATE } from "@/libs/xen-api/xen-api.enums";
+import { VM_POWER_STATE } from '@/libs/xen-api/xen-api.enums'
-import {
+import { faMoon, faPause, faPlay, faQuestion, faStop } from '@fortawesome/free-solid-svg-icons'
-  faMoon,
+import { computed } from 'vue'
-  faPause,
-  faPlay,
-  faQuestion,
-  faStop,
-} from "@fortawesome/free-solid-svg-icons";
-import { computed } from "vue";
 
 const props = defineProps<{
-  state: VM_POWER_STATE;
+  state: VM_POWER_STATE
-}>();
+}>()
 
 const icons = {
   [VM_POWER_STATE.RUNNING]: faPlay,
   [VM_POWER_STATE.PAUSED]: faPause,
   [VM_POWER_STATE.SUSPENDED]: faMoon,
   [VM_POWER_STATE.HALTED]: faStop,
-};
+}
 
-const icon = computed(() => icons[props.state] ?? faQuestion);
+const icon = computed(() => icons[props.state] ?? faQuestion)
 
-const className = computed(() => `state-${props.state.toLocaleLowerCase()}`);
+const className = computed(() => `state-${props.state.toLocaleLowerCase()}`)
 </script>
 
 <style lang="postcss" scoped>
 .power-state-icon {
-  color: var(--color-extra-blue-d60);
+  color: var(--color-purple-d60);
 
   &.state-running {
-    color: var(--color-green-infra-base);
+    color: var(--color-green-base);
   }
 
   &.state-paused {
-    color: var(--color-blue-scale-300);
+    color: var(--color-grey-300);
   }
 
   &.state-suspended {
-    color: var(--color-extra-blue-d20);
+    color: var(--color-purple-d20);
   }
 }
 </style>

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

@@ -1,9 +1,5 @@
 <template>
-  <svg
+  <svg class="progress-circle" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-    class="progress-circle"
-    viewBox="0 0 36 36"
-    xmlns="http://www.w3.org/2000/svg"
-  >
     <path
       class="progress-circle-background"
       d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
@@ -12,38 +8,36 @@
       class="progress-circle-fill"
       d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
     />
-    <text class="progress-circle-text" text-anchor="middle" x="50%" y="50%">
+    <text class="progress-circle-text" text-anchor="middle" x="50%" y="50%">{{ progress }}%</text>
-      {{ progress }}%
-    </text>
   </svg>
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 
 interface Props {
-  value: number;
+  value: number
-  maxValue?: number;
+  maxValue?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
   maxValue: 100,
-});
+})
 
 const progress = computed(() => {
   if (props.maxValue === 0) {
-    return 0;
+    return 0
   }
 
-  return Math.round((props.value / props.maxValue) * 100);
+  return Math.round((props.value / props.maxValue) * 100)
-});
+})
 </script>
 
 <style lang="postcss" scoped>
 .progress-circle-fill {
   animation: progress 1s ease-out forwards;
   fill: none;
-  stroke: var(--color-green-infra-base);
+  stroke: var(--color-green-base);
   stroke-width: 1.2;
   stroke-linecap: round;
   stroke-dasharray: v-bind(progress), 100;
@@ -52,13 +46,13 @@ const progress = computed(() => {
 .progress-circle-background {
   fill: none;
   stroke-width: 1.2;
-  stroke: var(--color-blue-scale-400);
+  stroke: var(--color-grey-500);
 }
 
 .progress-circle-text {
   font-size: 0.7rem;
   font-weight: bold;
-  fill: var(--color-green-infra-base);
+  fill: var(--color-green-base);
   text-anchor: middle;
   alignment-baseline: middle;
 }