@xen-orchestra/web-core 0.34.0 → 0.35.0

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,
@@ -46,6 +52,28 @@ export function defineRemoteResource<TData, TState extends object, TArgs extends
   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
+  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,
@@ -83,22 +121,56 @@ export function defineRemoteResource<
 
   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)
 
@@ -184,7 +256,23 @@ export function defineRemoteResource<
     let pause: VoidFunction = noop
     let resume: VoidFunction = execute
 
-    if (pollingInterval !== false) {
+    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/package.json

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