[#88170] frontend: src: views: Update device connection status

Signed-off-by: Anna Roszkiewicz <[email protected]>

Author: anroszkiewicz

frontend/src/components/devices/Device.vue

@@ -15,9 +15,13 @@ Component wraps functionality for displaying and working with a single rdfm devi
             :title="'Device ' + device.mac_address"
             :subtitle="device.metadata['rdfm.software.version'] as string"
             :device="device.mac_address"
-            :connected="device.connected"
             smallButtonName="Open action log"
             :buttonCallback="fetchActionLog"
+            :connected="
+                deviceConnections.has(device.mac_address)
+                    ? deviceConnections.get(device.mac_address)
+                    : device.connected
+            "
         />
         <TitleBar
             v-if="!device"
@@ -780,8 +784,7 @@ import {
     downloadDeviceFile,
     execAction,
     type Action,
-    deviceUpdates,
-    deviceVersions,
+    deviceConnections,
 } from './devices';
 import { useRoute, useRouter } from 'vue-router';
 import { ActiveTab } from '@/views/HomeView.vue';
@@ -1119,8 +1122,7 @@ export default {
             isFullscreen,
             disconnect,
             allowedTo,
-            deviceUpdates,
-            deviceVersions,
+            deviceConnections,
         };
     },
 };

frontend/src/components/devices/devices.ts

@@ -44,6 +44,7 @@ export const filteredDevicesResources = (tag: string) =>
 
 export const deviceUpdates = reactive(new Map<string, number>());
 export const deviceVersions = reactive(new Map<string, string>());
+export const deviceConnections = reactive(new Map<string, boolean>());
 
 export type Action = {
     action_id: string;

frontend/src/views/HomeView.vue

@@ -211,7 +211,12 @@ import GroupsList from '../components/groups/GroupsList.vue';
 import Logo from '../images/Logo.vue';
 import LogoutIcon from '@/images/LogoutIcon.vue';
 import Device from '@/components/devices/Device.vue';
-import { deviceUpdates, deviceVersions } from '../components/devices/devices';
+import {
+    deviceUpdates,
+    deviceVersions,
+    deviceConnections,
+    registeredDevicesResources,
+} from '../components/devices/devices';
 
 export enum ActiveTab {
     Device = 'device',
@@ -361,6 +366,16 @@ export default {
             }
         });
 
+        sse.addEventListener('connect', async (event: MessageEvent) => {
+            const message = JSON.parse(event.data);
+            deviceConnections.set(message.device, true);
+        });
+
+        sse.addEventListener('disconnect', async (event: MessageEvent) => {
+            const message = JSON.parse(event.data);
+            deviceConnections.set(message.device, false);
+        });
+
         sse.addEventListener('error', (error: Event) => {
             console.error(
                 'Connection to event stream failed. Will not be able to show device update progress.',

server/src/api/v1/ws/device.py

@@ -1,3 +1,4 @@
+import json
 from rdfm.ws import WebSocketException
 from flask import Blueprint
 import simple_websocket
@@ -12,6 +13,7 @@
 from rdfm.permissions import (
     SHELL_PERMISSION,
 )
+import server
 
 
 device_ws_blueprint: Blueprint = Blueprint("rdfm-server-device-ws", __name__)
@@ -31,6 +33,13 @@ def device_management_ws(
     try:
         device_mgmt.loop.start_device_event_loop(ws, device_token)
     except WebSocketException as e:
+        message = {"device": device_token.device_id}
+
+        try:
+            server.instance.sse.publish(json.dumps(message), type='disconnect')
+        except KeyError:
+            print("Redis is not configured. Unable to send device updates.")
+
         print("Terminating device WS connection:", e.message, flush=True)
         raise
 

server/src/device_mgmt/models/remote_device.py

@@ -164,7 +164,10 @@ def __handle_device_message(self, request: Request):
                 "progress": request.progress,
                 "version": self.update_version,
             }
-            server.instance.sse.publish(json.dumps(message), type='update')
+            try:
+                server.instance.sse.publish(json.dumps(message), type='update')
+            except KeyError:
+                print("Redis is not configured. Unable to send device updates.")
             if request.progress == 100:
                 self.update_version = None
                 server.instance._device_updates_db.delete(self.token.device_id)
@@ -205,6 +208,11 @@ def event_loop(self):
                 }
             )
         )
+        message = {"device": self.token.device_id}
+        try:
+            server.instance.sse.publish(json.dumps(message), type='connect')
+        except KeyError:
+            print("Redis is not configured. Unable to send device updates.")
 
         while True:
             self.__handle_device_message(self.receive_message())