Improve polling management and state handling across device-related components

- Refactor `RemoteInstanceEditorWrapper.vue`: Replace conditional logic with a `switch` statement for clarity in `computedStatus`.
- Enhance `DeviceHelper.js`: Add detailed polling control functions (`startPolling`, `stopPolling`, `pausePolling`, `resumePolling`) and refine polling state logic.
- Update `Editor/index.vue`: Dynamically manage polling based on route and device state, ensuring polling consistency and better resource optimization.

Author: cstns

frontend/src/components/immersive-editor/RemoteInstanceEditorWrapper.vue

@@ -47,12 +47,15 @@ export default {
                 this.device.editor.connected
         },
         computedStatus () {
-            if (!this.device || !this.isEditorAvailable) {
-                // forces the loading animation while loading
+            switch (true) {
+            case !this.device:
+            case !this.isEditorAvailable:
+            case this.device?.status === 'stopped':
+                // forces the loading animation
                 return 'loading'
+            default:
+                return this.device.status
             }
-
-            return this.device.status
         }
     }
 }

frontend/src/composables/DeviceHelper.js

@@ -1,6 +1,6 @@
 import semver from 'semver'
 import { computed, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 
 import deviceApi from '../api/devices.js'
@@ -23,12 +23,16 @@ const deviceTransitionStates = [
 
 export function useDeviceHelper () {
     const $store = useStore()
-    const $route = useRoute()
     const $router = useRouter()
 
     let deviceStateMutator = null
     const device = ref(null)
-    const pollTimer = createPollTimer(pollDevice, POLL_TIME, false)
+    const pollTimer = createPollTimer(onPoll, POLL_TIME, false)
+
+    // duplicated functionality because the pollTimer is not reactive
+    const isPolling = ref(false)
+
+    const isInTransitionState = computed(() => deviceTransitionStates.includes(device.value.status))
 
     const agentSupportsDeviceAccess = computed(() =>
         device.value?.agentVersion && semver.gte(device.value?.agentVersion, '0.8.0')
@@ -37,6 +41,37 @@ export function useDeviceHelper () {
         device.value?.agentVersion && semver.gte(device.value?.agentVersion, '2.3.0')
     )
 
+    function startPolling () {
+        isPolling.value = true
+        pollTimer.start()
+    }
+
+    function stopPolling () {
+        isPolling.value = false
+        pollTimer.stop()
+    }
+
+    function resumePolling () {
+        isPolling.value = true
+        pollTimer.resume()
+    }
+
+    function pausePolling () {
+        isPolling.value = false
+        pollTimer.pause()
+    }
+
+    async function onPoll () {
+        try {
+            return await fetchDevice()
+        } catch (err) {
+            if (err.response?.status === 404) {
+                stopPolling()
+            }
+            throw err
+        }
+    }
+
     function preActionChecks (message) {
         if (device.value.agentVersion && !agentSupportsActions.value) {
             // if agent version is present but is less than required version, show warning and halt
@@ -77,53 +112,24 @@ export function useDeviceHelper () {
         }
     }
 
-    function bindDevice (binding) {
+    function bindDevice (binding, shouldStartPolling = false) {
         device.value = binding
         deviceStateMutator = new DeviceStateMutator(binding)
+        if (shouldStartPolling) { startPolling() }
     }
 
     async function fetchDevice (deviceId = null) {
         try {
             device.value = await deviceApi.getDevice(deviceId || device.value?.id)
         } catch (err) {
             if (err.status === 403) {
-                stopPoling()
+                stopPolling()
 
                 return $router.push({ name: 'device-overview' })
             }
         }
     }
 
-    async function pollDevice () {
-        // Only refresh device via the timer if we are on the overview page, developer mode page
-        // the device status is empty or the device is in a transition state
-        // This is to prevent settings pages from refreshing the device state while modifying settings
-        // See `watch: { device: { handler () ...  in pages/device/Settings/General.vue for why that happens
-        const settingsPages = ['device-overview', 'device-developer-mode']
-        try {
-            switch (true) {
-            case settingsPages.includes($route.name):
-            case typeof device.value?.status === 'undefined':
-            case deviceTransitionStates.includes(device.value?.status):
-                await fetchDevice()
-                break
-            default:
-            }
-        } catch (err) {
-            if (err.response.status === 404) {
-                stopPoling()
-            }
-        }
-    }
-
-    function startPoling () {
-        pollTimer.start()
-    }
-
-    function stopPoling () {
-        pollTimer.stop()
-    }
-
     function showDeleteDialog () {
         Dialog.show({
             header: 'Delete Device',
@@ -147,11 +153,15 @@ export function useDeviceHelper () {
         agentSupportsDeviceAccess,
         agentSupportsActions,
         device,
-        restartDevice,
+        isPolling,
+        isInTransitionState,
         bindDevice,
+        startPolling,
+        stopPolling,
+        pausePolling,
+        resumePolling,
+        restartDevice,
         fetchDevice,
-        showDeleteDialog,
-        startPoling,
-        stopPoling
+        showDeleteDialog
     }
 }

frontend/src/pages/device/Editor/index.vue

@@ -123,9 +123,13 @@ export default {
             bindDevice,
             fetchDevice,
             restartDevice,
-            startPoling: startDevicePolling,
             showDeleteDialog: showDeleteDeviceDialog,
-            stopPoling
+            isPolling,
+            isInTransitionState: isDeviceInTransitionState,
+            startPolling,
+            stopPolling,
+            resumePolling,
+            pausePolling
         } = useDeviceHelper()
 
         return {
@@ -147,16 +151,15 @@ export default {
             restartDevice,
             bindDevice,
             fetchDevice,
-            startDevicePolling,
-            stopPoling,
+            isPolling,
+            isDeviceInTransitionState,
+            startPolling,
+            stopPolling,
+            resumePolling,
+            pausePolling,
             showDeleteDeviceDialog
         }
     },
-    data () {
-        return {
-            mounted: false
-        }
-    },
     computed: {
         ...mapState('account', ['features']),
         ...mapGetters('account', ['featuresCheck']),
@@ -263,18 +266,19 @@ export default {
 
     },
     watch: {
-        device (device) {
-            if (device && this.isEditorAvailable) {
-                this.setContextDevice(device)
-                this.bindDevice(device)
-
-                if (!this.mounted) {
-                    this.runInitialTease()
+        '$route.name': 'handlePolling',
+        device: {
+            deep: true,
+            handler (device) {
+                if (device && this.isEditorAvailable) {
+                    this.setContextDevice(device)
+                    this.bindDevice(device, true)
+                    this.handlePolling()
+                } else {
+                    this.$router.push({ name: 'device-overview' })
+                        .then(() => Alerts.emit('Unable to connect to the Remote Instance', 'warning'))
+                        .catch(e => e)
                 }
-            } else {
-                this.$router.push({ name: 'device-overview' })
-                    .then(() => Alerts.emit('Unable to connect to the Remote Instance', 'warning'))
-                    .catch(e => e)
             }
         }
     },
@@ -297,22 +301,39 @@ export default {
                     maxWidthRatio: DRAWER_MAX_WIDTH_RATIO
                 })
             })
+            .then(() => {
+                this.runInitialTease()
+            })
             .catch(err => err)
     },
+    unmounted () {
+        this.stopPolling()
+    },
     methods: {
         ...mapActions('context', { setContextDevice: 'setDevice' }),
         loadDevice: async function () {
             await this.fetchDevice(this.$route.params.id)
-
-            this.startDevicePolling()
-
-            this.mounted = true
-
-            // todo we first need to get the device and set the team afterwards
             await this.$store.dispatch('account/setTeam', this.device.team.slug)
         },
         showConfirmDeleteDialog () {
             this.showDeleteDeviceDialog()
+        },
+        handlePolling () {
+            const pollingRoutes = [
+                'device-editor-overview',
+                'device-editor-developer-mode'
+            ]
+
+            switch (true) {
+            case typeof this.device?.status === 'undefined':
+            case this.device?.status === 'stopped':
+            case this.isDeviceInTransitionState:
+            case pollingRoutes.includes(this.$route.name):
+                this.resumePolling()
+                break
+            default:
+                this.pausePolling()
+            }
         }
     }
 }