feat(@xen-orchestra/web): backup-log and backup-archive collection use SSE (#10604)

@xen-orchestra/web/src/modules/backup/remote-resources/use-xo-backup-log-collection.ts

@@ -1,3 +1,4 @@
+import { useWatchCollection } from '@/shared/composables/watch-collection.composable.ts'
 import { useXoCollectionState } from '@/shared/composables/xo-collection-state/use-xo-collection-state.ts'
 import { BASE_URL } from '@/shared/utils/fetch.util.ts'
 import { safePushInMap } from '@/shared/utils/map.util.ts'
@@ -18,7 +19,9 @@ const backupLogFields = [
 ] as const satisfies readonly (keyof XoBackupLog)[]
 
 export const useXoBackupLogCollection = defineRemoteResource({
-  url: `${BASE_URL}/backup-logs?fields=${backupLogFields.join(',')}`,
+  url: `${BASE_URL}/backup-logs?fields=${backupLogFields.join(',')}&ndjson=true`,
+  stream: true,
+  initWatchCollection: () => useWatchCollection({ resource: 'backup-log', fields: backupLogFields }),
   initialData: () => [] as FrontXoBackupLog[],
   state: (rawBackupLogs, context) => {
     const sortedBackupLogs = useSorted(rawBackupLogs, (log1, log2) => log2.start - log1.start)

@xen-orchestra/web/src/modules/vm/remote-resources/use-xo-vm-backup-archive-collection.ts

@@ -1,11 +1,19 @@
+import { useWatchCollection } from '@/shared/composables/watch-collection.composable.ts'
 import { useXoCollectionState } from '@/shared/composables/xo-collection-state/use-xo-collection-state.ts'
 import { BASE_URL } from '@/shared/utils/fetch.util.ts'
 import { defineRemoteResource } from '@core/packages/remote-resource/define-remote-resource.ts'
 import type { XoBackupRepository, XoVmBackupArchive } from '@vates/types'
+import { toValue } from 'vue'
 
 export type FrontXoVmBackupArchive = Pick<XoVmBackupArchive, (typeof vmBackupArchiveFields)[number]>
 
-const vmBackupArchiveFields = ['id', 'size', 'vm', 'type'] as const satisfies readonly (keyof XoVmBackupArchive)[]
+const vmBackupArchiveFields = [
+  'id',
+  'size',
+  'vm',
+  'type',
+  'backupRepository', // `backupRepository` is needed by the predicate
+] as const satisfies readonly (keyof XoVmBackupArchive)[]
 
 export const useXoVmBackupArchiveCollection = defineRemoteResource({
   url: (backupRepositoriesIds: XoBackupRepository['id'][]) => {
@@ -13,9 +21,25 @@ export const useXoVmBackupArchiveCollection = defineRemoteResource({
       .map(backupRepositoryId => `backup-repository=${backupRepositoryId}`)
       .join('&')
 
-    return `${BASE_URL}/backup-archives?fields=${vmBackupArchiveFields.join(',')}&${queryParamBackupRepositoriesIds}`
+    return `${BASE_URL}/backup-archives?fields=${vmBackupArchiveFields.join(',')}&ndjson=true&${queryParamBackupRepositoriesIds}`
   },
-  initialData: () => [] as Pick<XoVmBackupArchive, (typeof vmBackupArchiveFields)[number]>[],
+  stream: true,
+  initWatchCollection: () =>
+    useWatchCollection<FrontXoVmBackupArchive>({
+      resource: 'backup-archive',
+      fields: vmBackupArchiveFields,
+      predicate(obj, context) {
+        if (context === undefined || context.args === undefined || Array.isArray(obj)) {
+          return true
+        }
+
+        const [ids] = context.args
+        const backupRepositoriesIds = toValue(ids)
+
+        return backupRepositoriesIds.includes(obj.backupRepository)
+      },
+    }),
+  initialData: () => [] as FrontXoVmBackupArchive[],
   state: (rawBackupArchives, context) =>
     useXoCollectionState(rawBackupArchives, {
       context,

CHANGELOG.unreleased.md

@@ -23,7 +23,7 @@
 - [Plugins/load balancer] Improved migration decision making (PR [#10207](https://github.com/vatesfr/xen-orchestra/pull/10207))
 - [New VM] Allow removing existing (template) disks (PR [#10292](https://github.com/vatesfr/xen-orchestra/pull/10292))
 - [Pool] Add validation to the pool connection form (PR [#10484](https://github.com/vatesfr/xen-orchestra/pull/10484))
-- [XO6] All objects displayed in the UI are now updated in real time, except backup logs and backup archives which are still refreshed every 30 seconds (PR [#10450](https://github.com/vatesfr/xen-orchestra/pull/10450))
+- [XO6] All objects displayed in the UI are now updated in real time (PRs [#10450](https://github.com/vatesfr/xen-orchestra/pull/10450), [#10604](https://github.com/vatesfr/xen-orchestra/pull/10604))
 - [REST API] Event subscriptions (`/rest/v0/events`) now support `authentication_token`: each user only receives events about their own tokens and `backup-logs` (PRs [#10450](https://github.com/vatesfr/xen-orchestra/pull/10450), [#10563](https://github.com/vatesfr/xen-orchestra/pull/10563))
 - [Side panels] Harmonize card titles across side panels (PR [#10289](https://github.com/vatesfr/xen-orchestra/pull/10289))
 - [Host] Add a condition to disable the detached action when the host is not running (PR [#10543](https://github.com/vatesfr/xen-orchestra/pull/10543))