allow start stop

frontend/__tests__/stores/shoot.spec.js

@@ -235,7 +235,7 @@ describe('stores', () => {
           },
         }
       })
-      mockSynchronize = vi.spyOn(socketStore, 'synchronize').mockImplementation(uids => Promise.resolve(getShoots(uids)))
+      mockSynchronize = vi.spyOn(socketStore, 'synchronize').mockImplementation((key, uids) => Promise.resolve(getShoots(uids)))
       shootStore.initializeShootListFilters()
     })
 

frontend/src/composables/useEventHandler.js → frontend/src/composables/useSocketEventHandler.js

@@ -4,13 +4,21 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
+import { useDocumentVisibility } from '@vueuse/core'
+
 import { useLogger } from '@/composables/useLogger'
 
 import { isTooManyRequestsError } from '@/utils/errors'
 
 import throttle from 'lodash/throttle'
 import findIndex from 'lodash/findIndex'
 
+export function createDefaultOperator (state) {
+  if (Array.isArray(state.list)) {
+    return createListOperator(state.list)
+  }
+}
+
 export function createListOperator (list) {
   return {
     delete (uid) {
@@ -30,10 +38,11 @@ export function createListOperator (list) {
   }
 }
 
-export function useEventHandler (options = {}) {
+export function useSocketEventHandler (options = {}) {
   const {
     logger = useLogger(),
-    wait = 500,
+    visibility = useDocumentVisibility(),
+    createOperator = createDefaultOperator,
   } = options
 
   const eventMap = new Map([])
@@ -52,7 +61,7 @@ export function useEventHandler (options = {}) {
           uids.push(uid)
         }
       }
-      const items = await store.synchronize(uids)
+      const items = await store.fetchObjects(uids)
       for (const item of items) {
         if (item.kind === 'Status') {
           logger.info('Failed to synchronize a single project: %s', item.message)
@@ -68,15 +77,17 @@ export function useEventHandler (options = {}) {
         }
       }
       store.$patch(state => {
-        const listOperator = createListOperator(state.list)
+        const operator = createOperator(state)
+        // Delete items first
         for (const [uid, item] of uidMap) {
           if (typeof item === 'boolean' && !item) {
-            listOperator.delete(uid)
+            operator.delete(uid)
           }
         }
+        // Update items
         for (const [uid, item] of uidMap) {
           if (typeof item === 'object' && item) {
-            listOperator.set(uid, item)
+            operator.set(uid, item)
           }
         }
       })
@@ -86,7 +97,7 @@ export function useEventHandler (options = {}) {
       } else {
         logger.error('Failed to synchronize modified projects: %s', err.message)
       }
-      // Synchronization failed. Rollback events
+      // Synchronization failed -> Rollback events
       for (const event of events) {
         const { uid } = event
         if (!eventMap.has(uid)) {
@@ -96,17 +107,47 @@ export function useEventHandler (options = {}) {
     }
   }
 
-  const throttledHandleEvents = throttle(handleEvents, wait)
+  let throttledHandleEvents
+
+  function cancelTrailingInvocation () {
+    if (typeof throttledHandleEvents?.cancel === 'function') {
+      throttledHandleEvents.cancel()
+    }
+  }
+
+  function startSocketEventHandler (wait = 500) {
+    cancelTrailingInvocation()
+    eventMap.clear()
+    throttledHandleEvents = wait > 0
+      ? throttle(handleEvents, wait)
+      : store => handleEvents(store)
+  }
 
-  function handleEvent (event) {
+  function stopSocketEventHandler () {
+    cancelTrailingInvocation()
+    eventMap.clear()
+    throttledHandleEvents = undefined
+  }
+
+  function onSocketEvent (event) {
+    if (typeof throttledHandleEvents !== 'function') {
+      return
+    }
     const { type, uid } = event
     if (!['ADDED', 'MODIFIED', 'DELETED'].includes(type)) {
-      logger.error('undhandled event type', type)
+      logger.error('Invalid event type', type)
       return
     }
     eventMap.set(uid, event)
+    if (visibility.value !== 'visible') {
+      return
+    }
     throttledHandleEvents(this)
   }
 
-  return handleEvent
+  return {
+    startSocketEventHandler,
+    stopSocketEventHandler,
+    onSocketEvent,
+  }
 }

frontend/src/store/project.js

@@ -16,7 +16,7 @@ import {
 
 import { useApi } from '@/composables/useApi'
 import { useLogger } from '@/composables/useLogger'
-import { useEventHandler } from '@/composables/useEventHandler'
+import { useSocketEventHandler } from '@/composables/useSocketEventHandler'
 
 import { useAuthzStore } from './authz'
 import { useAppStore } from './app'
@@ -39,8 +39,6 @@ export const useProjectStore = defineStore('project', () => {
 
   const list = ref(null)
 
-  const onEvent = useEventHandler({ logger })
-
   const isInitial = computed(() => {
     return list.value === null
   })
@@ -161,11 +159,18 @@ export const useProjectStore = defineStore('project', () => {
     // do not remove project from store as it will stay in terminating phase for a while
   }
 
+  const {
+    startSocketEventHandler,
+    onSocketEvent,
+  } = useSocketEventHandler({ logger })
+
+  startSocketEventHandler(500)
+
   function handleEvent (event) {
-    onEvent.call(this, event)
+    onSocketEvent.call(this, event)
   }
 
-  function synchronize (uids) {
+  function fetchObjects (uids) {
     return socketStore.synchronize('projects', uids)
   }
 
@@ -193,7 +198,7 @@ export const useProjectStore = defineStore('project', () => {
     deleteProject,
     projectNameByNamespace,
     handleEvent,
-    synchronize,
+    fetchObjects,
     $reset,
   }
 })

frontend/src/store/shoot/shoot.js

@@ -626,7 +626,7 @@ const useShootStore = defineStore('shoot', () => {
       }
     }
     try {
-      const items = await socketStore.synchronize('shoots', uids)
+      const items = await fetchObjects(uids)
       const notOnlyShootsWithIssues = !onlyAllShootsWithIssues(state, context)
       shootStore.$patch(({ state }) => {
         for (const uid of deletedUids) {
@@ -670,6 +670,10 @@ const useShootStore = defineStore('shoot', () => {
     }
   }
 
+  function fetchObjects (uids) {
+    return socketStore.synchronize('shoots', uids)
+  }
+
   function handleEvent (event) {
     const shootStore = this
     const { type, uid } = event