@xen-orchestra/web-core 0.33.0 → 0.35.0

package/lib/locales/sv.json

@@ -47,12 +47,8 @@
   "backup-repositories": "Säkerhetskopieringsförvaring",
   "backup-repository": "Säkerhetskopieringsförvaring (lokalt, NFS, SMB)",
   "backup-targets": "Säkerhetskopieringsmål",
-  "backup.continuous-replication": "Kontinuerlig replikering",
-  "backup.disaster-recovery": "Katastrofåterställning",
   "backup.full": "Fullständig säkerhetskopiering",
   "backup.incremental": "Inkrementell säkerhetskopiering",
-  "backup.metadata": "Säkerhetskopiering av metadata",
-  "backup.mirror": "Speglad säkerhetskopiering",
   "backup.pool-metadata": "Pool-metadata",
   "backup.rolling-snapshot": "Rullande ögonblicksbild",
   "backup.xo-config": "XO-konfig",
@@ -75,7 +71,6 @@
   "bond-devices": "Bindningsenheter",
   "bond-status": "Bindnings-status",
   "boot-firmware": "Boot-programvara",
-  "boot-firmware-bios": "Den här mallen innehåller redan BIOS-strängar",
   "boot-firmware-uefi": "Boot-programvaran är UEFI",
   "boot-vm": "Starta VM",
   "build-number": "Versionsnummer",
@@ -557,6 +552,7 @@
   "tasks.quick-view.failed": "Misslyckades",
   "tasks.quick-view.in-progress": "Pågår",
   "template": "Mall",
+  "template-has-bios-strings": "Den här mallen innehåller redan BIOS-strängar",
   "theme-auto": "Auto",
   "theme-dark": "Mörkt",
   "theme-light": "Ljust",

package/lib/locales/uk.json

@@ -44,12 +44,8 @@
   "backup-network": "Резервна мережа",
   "backup-repository": "Сховище резервних копій (local, NFS, SMB)",
   "backup-targets": "Призначення для резервної копії",
-  "backup.continuous-replication": "Постійна реплікація",
-  "backup.disaster-recovery": "Відновлення після критичних помилок",
   "backup.full": "Повна резервна копія",
   "backup.incremental": "Інкрементальна резервна копія",
-  "backup.metadata": "Резервна копія метаданих",
-  "backup.mirror": "Дзеркальна резервна копія",
   "backup.pool-metadata": "Метадані пулу",
   "backup.rolling-snapshot": "Ковзний знімок",
   "backup.xo-config": "Конфігурація XO",
@@ -72,7 +68,6 @@
   "bond-devices": "Пристрої Bond",
   "bond-status": "Статус Bond",
   "boot-firmware": "Завантажувальна прошивка",
-  "boot-firmware-bios": "Шаблон вже містить налаштування BIOS",
   "boot-firmware-uefi": "Завантажувальна прошивка - UEFI",
   "boot-vm": "Завантажувальна ВМ",
   "build-number": "Номер збірки",
@@ -311,8 +306,9 @@
   "ssh-password": "пароль SSH",
   "ssh-password-confirm": "Підтвердіть пароль SSH",
   "static-ip": "Статична IP-адреса",
+  "template-has-bios-strings": "Шаблон вже містить налаштування BIOS",
   "uuid": "UUID",
-  "vcpus": "vCPU |  vCPU |  vCPUs",
+  "vcpus": "vCPU | vCPU | vCPUs",
   "vdi-throughput": "Пропускна здатність VDI",
   "vdis": "VDI | VDI | VDIs",
   "vif": "VIF",

package/lib/packages/remote-resource/README.md

@@ -113,3 +113,35 @@ const useMyResource = defineRemoteResource({
   cacheDurationMs: 5 * 60_000, // Cache for 5 minutes
 })
 ```
+
+## Watching a collection
+
+You can enable real-time synchronization with a remote collection by using the `watchCollection` option.
+When this option is set, the resource will first fetch the complete dataset once, then listen for any changes on the collection (such as additions, updates, or removals) and automatically update the shared store accordingly.
+
+```typescript
+const useMyResource = defineRemoteResource({
+  url: '/api/path/to/resource?fields=id,name,status',
+  watchCollection: {
+    type: 'resource',
+    fields: ['id', 'name', 'status'],
+  },
+  // Optional
+  onDataReceived: (currentData, receivedData) => {
+    // Called when new or updated data is received
+    mergeCollection(currentData.value, receivedData)
+  },
+  // Optional
+  onDataRemoved: (currentData, removedData) => {
+    // Called when data is removed from the collection
+    removeFromCollection(currentData.value, removedData)
+  },
+})
+```
+
+When a collection is being watched:
+
+- The initial fetch retrieves the entire dataset.
+- Any subsequent changes (additions, updates, deletions) are automatically reflected in the resource’s data.
+- You can customize how incoming or removed data is handled using the onDataReceived and onDataRemoved callbacks.
+- The subscription to collection changes automatically stops when there are no more active component subscribers.

package/lib/packages/remote-resource/define-remote-resource.ts

@@ -1,8 +1,14 @@
+import {
+  useSseStore,
+  type THandleDelete,
+  type THandlePost,
+  type THandleWatching,
+} from '@core/packages/remote-resource/sse.store'
 import type { ResourceContext, UseRemoteResource } from '@core/packages/remote-resource/types.ts'
 import type { VoidFunction } from '@core/types/utility.type.ts'
 import { ifElse } from '@core/utils/if-else.utils.ts'
 import { type MaybeRef, noop, useTimeoutPoll } from '@vueuse/core'
-import { merge } from 'lodash-es'
+import { merge, remove } from 'lodash-es'
 import readNDJSONStream from 'ndjson-readablestream'
 import {
   computed,
@@ -19,7 +25,7 @@ import {
   watch,
 } from 'vue'
 
-const DEFAULT_CACHE_DURATION_MS = 10_000
+const DEFAULT_CACHE_EXPIRATION_MS = 10_000
 
 const DEFAULT_POLLING_INTERVAL_MS = 30_000
 
@@ -32,8 +38,8 @@ export function defineRemoteResource<
   initialData: () => TData
   state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
   onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
-  cacheDurationMs?: number
-  pollingIntervalMs?: number
+  cacheExpirationMs?: number | false
+  pollingIntervalMs?: number | false
   stream?: boolean
 }): UseRemoteResource<TState, TArgs>
 
@@ -41,11 +47,33 @@ export function defineRemoteResource<TData, TState extends object, TArgs extends
   url: string | ((...args: TArgs) => string)
   state?: (data: Ref<TData | undefined>, context: ResourceContext<TArgs>) => TState
   onDataReceived?: (data: Ref<TData | undefined>, receivedData: any) => void
-  cacheDurationMs?: number
-  pollingIntervalMs?: number
+  cacheExpirationMs?: number | false
+  pollingIntervalMs?: number | false
   stream?: boolean
 }): UseRemoteResource<TState, TArgs>
 
+export function defineRemoteResource<
+  TData,
+  TState extends object = { data: Ref<TData> },
+  TArgs extends any[] = [],
+>(config: {
+  url: string | ((...args: TArgs) => string)
+  initialData: () => TData
+  state?: (data: Ref<NoInfer<TData>>, context: ResourceContext<TArgs>) => TState
+  onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  stream?: boolean
+  watchCollection: {
+    collectionId: string
+    resource: string // reactivity only on XAPI XO record for now
+    getIdentifier: (obj: unknown) => string
+    handleDelete: THandleDelete
+    handlePost: THandlePost
+    handleWatching: THandleWatching
+    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => boolean
+  }
+}): UseRemoteResource<TState, TArgs>
+
 export function defineRemoteResource<
   TData,
   TState extends object = { data: Ref<TData> },
@@ -55,9 +83,19 @@ export function defineRemoteResource<
   initialData?: () => TData
   state?: (data: Ref<TData>, context: ResourceContext<TArgs>) => TState
   onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
-  cacheDurationMs?: number
-  pollingIntervalMs?: number
+  onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
+  cacheExpirationMs?: number | false
+  pollingIntervalMs?: number | false
   stream?: boolean
+  watchCollection?: {
+    collectionId: string
+    resource: string // reactivity only on XAPI XO record for now
+    getIdentifier: (obj: unknown) => string
+    handleDelete: THandleDelete
+    handlePost: THandlePost
+    handleWatching: THandleWatching
+    predicate?: (receivedData: TData, context: ResourceContext<TArgs> | undefined) => boolean
+  }
 }) {
   const cache = new Map<
     string,
@@ -79,26 +117,60 @@ export function defineRemoteResource<
 
   const buildState = config.state ?? ((data: Ref<TData>) => ({ data }))
 
-  const cacheDuration = config.cacheDurationMs ?? DEFAULT_CACHE_DURATION_MS
+  const cacheExpiration = config.cacheExpirationMs ?? DEFAULT_CACHE_EXPIRATION_MS
 
   const pollingInterval = config.pollingIntervalMs ?? DEFAULT_POLLING_INTERVAL_MS
 
+  const removeData = (data: TData[], dataToRemove: any) => {
+    const getIdentifier = config.watchCollection?.getIdentifier ?? JSON.stringify
+
+    remove(data, item => {
+      if (typeof item === 'object') {
+        return getIdentifier(item) === getIdentifier(dataToRemove)
+      }
+
+      return item === dataToRemove
+    })
+  }
+
   const onDataReceived =
     config.onDataReceived ??
-    ((data: Ref<TData>, receivedData: any) => {
-      if (!config.stream || data.value === undefined) {
+    ((data: Ref<TData>, receivedData: any, args?: ResourceContext<TArgs>) => {
+      // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
+      if (config.watchCollection?.predicate?.(receivedData, args) === false) {
+        return
+      }
+      if (data.value === undefined || (Array.isArray(data.value) && Array.isArray(receivedData))) {
         data.value = receivedData
         return
       }
 
-      if (Array.isArray(data.value) && Array.isArray(receivedData)) {
-        data.value.push(...receivedData)
+      if (Array.isArray(data.value)) {
+        removeData(data.value, receivedData)
+        data.value.push(receivedData)
         return
       }
 
       merge(data.value, receivedData)
     })
 
+  const onDataRemoved =
+    config.onDataRemoved ??
+    ((data: Ref<TData>, receivedData: any, args?: ResourceContext<TArgs>) => {
+      // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
+      if (!config.watchCollection?.predicate?.(receivedData, args)) {
+        return
+      }
+
+      // for now only support `onDataRemoved` when watching XapiXoRecord collection
+      if (Array.isArray(data.value) && !Array.isArray(receivedData)) {
+        removeData(data.value, receivedData)
+        return
+      }
+
+      console.warn('onDataRemoved received but unhandled for:', receivedData)
+    })
+
   function subscribeToUrl(url: string) {
     const entry = cache.get(url)
 
@@ -128,9 +200,11 @@ export function defineRemoteResource<
 
     entry.pause()
 
-    setTimeout(() => {
-      cache.delete(url)
-    }, cacheDuration)
+    if (cacheExpiration !== false) {
+      setTimeout(() => {
+        cache.delete(url)
+      }, cacheExpiration)
+    }
   }
 
   function registerUrl(url: string, context: ResourceContext<TArgs>) {
@@ -182,7 +256,23 @@ export function defineRemoteResource<
     let pause: VoidFunction = noop
     let resume: VoidFunction = execute
 
-    if (pollingInterval > 0) {
+    if (config.watchCollection !== undefined) {
+      const { collectionId, resource, handleDelete, handlePost, handleWatching } = config.watchCollection
+      const { watch, unwatch } = useSseStore()
+
+      pause = () => unwatch({ collectionId, resource, handleDelete })
+      resume = async function () {
+        await execute()
+        await watch({
+          collectionId,
+          handleWatching,
+          handlePost,
+          resource,
+          onDataReceived: receivedData => onDataReceived(data, receivedData, context),
+          onDataRemoved: receivedData => onDataRemoved(data, receivedData, context),
+        })
+      }
+    } else if (pollingInterval !== false) {
       const timeoutPoll = useTimeoutPoll(execute, pollingInterval, {
         immediateCallback: true,
         immediate: false,

package/lib/packages/remote-resource/sse.store.ts

@@ -0,0 +1,140 @@
+import { defineStore } from 'pinia'
+import { ref, watch as watchVue } from 'vue'
+
+type EventFn = (object: unknown) => void
+export type THandlePost = (sseId: string) => Promise<string>
+export type THandleDelete = (sseId: string, subscriptionId: string) => Promise<void>
+export type THandleWatching = (
+  updateSseId: (id: string) => void,
+  getConfigByResource: (resource: string) =>
+    | {
+        subscriptionId: string
+        configs: Record<
+          string,
+          {
+            add: (object: unknown) => void
+            update: (object: unknown) => void
+            remove: (object: unknown) => void
+          }
+        >
+      }
+    | undefined
+) => void
+
+export const useSseStore = defineStore('sse', () => {
+  const sse = ref<{ id?: string; isWatching: boolean }>({ isWatching: false })
+  const configsByResource: Map<
+    string,
+    {
+      subscriptionId: string
+      configs: Record<
+        string,
+        {
+          add: EventFn
+          update: EventFn
+          remove: EventFn
+        }
+      >
+    }
+  > = new Map()
+
+  function updateSseId(id: string) {
+    sse.value.id = id
+  }
+
+  function getConfigsByResource(resource: string) {
+    return configsByResource.get(resource)
+  }
+
+  function initializeWatcher(handleWatching: THandleWatching) {
+    return new Promise((resolve, reject) => {
+      if (sse.value.id !== undefined) {
+        return reject(new Error('SSE already initialized'))
+      }
+
+      watchVue(
+        sse,
+        value => {
+          if (value.id !== undefined) {
+            resolve(undefined)
+          }
+        },
+        { deep: true }
+      )
+
+      if (!sse.value.isWatching) {
+        sse.value.isWatching = true
+        handleWatching(updateSseId, getConfigsByResource)
+      }
+    })
+  }
+
+  async function watch({
+    collectionId,
+    resource,
+    onDataReceived,
+    onDataRemoved,
+    handlePost,
+    handleWatching,
+  }: {
+    collectionId: string
+    resource: string
+    onDataReceived: EventFn
+    onDataRemoved: EventFn
+    handlePost: THandlePost
+    handleWatching: THandleWatching
+  }) {
+    if (sse.value.id === undefined) {
+      await initializeWatcher(handleWatching)
+    }
+
+    const id = await handlePost(sse.value.id!)
+
+    const { subscriptionId, configs } = configsByResource.get(resource) ?? {}
+
+    if (subscriptionId !== undefined && id !== subscriptionId) {
+      throw new Error(`Previous subscription ID: ${subscriptionId} and new one: ${id} are not the same`)
+    }
+
+    configsByResource.set(resource, {
+      subscriptionId: id,
+      configs: {
+        ...configs,
+        [collectionId]: {
+          add: onDataReceived,
+          update: onDataReceived,
+          remove: onDataRemoved,
+        },
+      },
+    })
+  }
+
+  async function unwatch({
+    collectionId,
+    resource,
+    handleDelete,
+  }: {
+    collectionId: string
+    resource: string
+    handleDelete: THandleDelete
+  }) {
+    if (sse.value.id === undefined || !configsByResource.has(resource)) {
+      return
+    }
+
+    const { configs, subscriptionId } = configsByResource.get(resource)!
+    delete configs[collectionId]
+
+    if (Object.keys(configs).length === 0) {
+      await handleDelete(sse.value.id, subscriptionId)
+      configsByResource.delete(resource)
+    } else {
+      configsByResource.set(resource, {
+        subscriptionId,
+        configs,
+      })
+    }
+  }
+
+  return { watch, unwatch }
+})

package/lib/types/utility.type.ts

@@ -1,3 +1,5 @@
+import type { XapiXoRecord, XoAlarm } from '@vates/types/'
+
 export type MaybeArray<T> = T | T[]
 
 export type VoidFunction = () => void
@@ -18,3 +20,7 @@ export type KeyOfByValue<T, TValue> =
     : never
 
 export type ArrayFilterPredicate<T> = (value: T, index: number, array: T[]) => boolean
+
+export type GetRecordByType<TType extends XapiXoRecord['type'] | 'alarm'> = TType extends 'alarm'
+  ? XoAlarm
+  : Extract<XapiXoRecord, { type: TType }>

package/lib/utils/progress.util.ts

@@ -28,24 +28,26 @@ export function cpuProgressThresholds(tooltip?: string): ThresholdConfig<Progres
 
 export function useProgressToLegend(
   rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>
-): (label: string, progress: Progress | Reactive<Progress>) => ProgressBarLegend | undefined
+): (label: string | undefined, progress: Progress | Reactive<Progress>) => ProgressBarLegend | undefined
 
 export function useProgressToLegend(
   rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>,
-  label: string,
+  rawLabel: MaybeRefOrGetter<string | undefined>,
   progress: Progress | Reactive<Progress>
 ): ComputedRef<ProgressBarLegend | undefined>
 
 export function useProgressToLegend(
   rawType: MaybeRefOrGetter<ProgressBarLegendType | undefined>,
-  label?: string,
+  rawLabel?: MaybeRefOrGetter<string | undefined>,
   progress?: Progress | Reactive<Progress>
 ) {
   const { n } = useI18n()
 
   const type = toComputed(rawType)
 
-  function toLegend(label: string, progress: Progress | Reactive<Progress>): ProgressBarLegend | undefined {
+  const label = toComputed(rawLabel)
+
+  function toLegend(label: string = '', progress: Progress | Reactive<Progress>): ProgressBarLegend | undefined {
     switch (type.value) {
       case 'percent':
         return { label, value: n(toValue(progress.percentage) / 100, { maximumFractionDigits: 1, style: 'percent' }) }
@@ -66,7 +68,7 @@ export function useProgressToLegend(
   }
 
   if (label && progress) {
-    return computed(() => toLegend(label, progress))
+    return computed(() => toLegend(label.value, progress))
   }
 
   return toLegend

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "private": false,
   "exports": {
     "./*": {