Handle lost connection in the dashboard (#837)

home-assistant-libs · Jul 26, 2024 · c09db74 · c09db74
1 parent 74bfa66
commit c09db74
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 50 deletions.
diff --git a/dashboard/src/client/client.ts b/dashboard/src/client/client.ts
@@ -181,7 +181,10 @@ export class MatterClient {
     if (this.connection.connected) {
       return;
     }
-    await this.connection.connect((msg) => this._handleIncomingMessage(msg));
+    await this.connection.connect(
+      (msg) => this._handleIncomingMessage(msg),
+      () => this.fireEvent("connection_lost")
+    );
   }
 
   disconnect(clearStorage = true) {

diff --git a/dashboard/src/client/connection.ts b/dashboard/src/client/connection.ts
@@ -13,7 +13,7 @@ export class Connection {
     return this.socket?.readyState === WebSocket.OPEN;
   }
 
-  async connect(onMessage: (msg: Record<string, any>) => void) {
+  async connect(onMessage: (msg: Record<string, any>) => void, onConnectionLost: () => void) {
     if (this.socket) {
       throw new Error("Already connected");
     }
@@ -31,7 +31,7 @@ export class Connection {
         console.log(
           `WebSocket Closed: Code=${event.code}, Reason=${event.reason}`
         );
-        reject(new Error("Connection Closed"));
+        onConnectionLost();
       };
 
       this.socket.onerror = (error) => {

diff --git a/dashboard/src/client/models/descriptions.ts b/dashboard/src/client/models/descriptions.ts
@@ -28,8 +28,8 @@ export const device_types: Record<number, DeviceType> = {
     "clusters": [
       66,
       67,
-      28,
-      68
+      68,
+      28
     ]
   },
   "22": {
@@ -96,8 +96,8 @@ export const device_types: Record<number, DeviceType> = {
     "id": 14,
     "label": "Aggregator",
     "clusters": [
-      37,
-      29
+      29,
+      37
     ]
   },
   "19": {
@@ -190,14 +190,14 @@ export const device_types: Record<number, DeviceType> = {
     "label": "Pump",
     "clusters": [
       512,
-      98,
+      1026,
       3,
-      4,
       1027,
+      4,
       6,
       1028,
+      98,
       8,
-      1026,
       29,
       30
     ]
@@ -300,8 +300,8 @@ export const device_types: Record<number, DeviceType> = {
     "id": 773,
     "label": "Pressure Sensor",
     "clusters": [
-      1027,
       3,
+      1027,
       29
     ]
   },
@@ -318,9 +318,9 @@ export const device_types: Record<number, DeviceType> = {
     "id": 775,
     "label": "Humidity Sensor",
     "clusters": [
-      29,
+      1029,
       3,
-      1029
+      29
     ]
   },
   "2128": {
@@ -355,9 +355,9 @@ export const device_types: Record<number, DeviceType> = {
     "label": "Window Covering",
     "clusters": [
       258,
+      98,
       3,
       4,
-      98,
       29
     ]
   },
@@ -374,10 +374,10 @@ export const device_types: Record<number, DeviceType> = {
     "id": 768,
     "label": "Heating/Cooling Unit",
     "clusters": [
-      98,
+      514,
       3,
       4,
-      514,
+      98,
       6,
       8,
       29,
@@ -391,8 +391,8 @@ export const device_types: Record<number, DeviceType> = {
       513,
       98,
       3,
-      4,
       516,
+      4,
       56,
       29,
       30
@@ -415,14 +415,14 @@ export const device_types: Record<number, DeviceType> = {
       1283,
       1284,
       1285,
+      1286,
       6,
       1287,
-      1288,
       1289,
-      1290,
+      1288,
       1291,
       1292,
-      1286,
+      1290,
       1294,
       29
     ]
@@ -435,10 +435,10 @@ export const device_types: Record<number, DeviceType> = {
       1284,
       1285,
       6,
+      1286,
       1287,
-      1288,
       1289,
-      1286,
+      1288,
       1291,
       29
     ]
@@ -450,17 +450,17 @@ export const device_types: Record<number, DeviceType> = {
       1283,
       1284,
       1285,
+      1286,
       6,
       1287,
-      8,
       1289,
-      1290,
+      1288,
       1291,
       1292,
       1293,
       1294,
-      1288,
-      1286,
+      8,
+      1290,
       29,
       30
     ]
@@ -472,16 +472,16 @@ export const device_types: Record<number, DeviceType> = {
       1283,
       1284,
       1285,
+      1286,
       6,
       1287,
-      8,
       1289,
-      1290,
+      1288,
       1291,
       1292,
-      1288,
+      8,
       1294,
-      1286,
+      1290,
       29,
       30
     ]
@@ -526,14 +526,14 @@ export const device_types: Record<number, DeviceType> = {
     "label": "Room Air Conditioner",
     "clusters": [
       513,
-      98,
+      514,
       3,
+      516,
       4,
-      1029,
       6,
-      514,
-      516,
       1026,
+      98,
+      1029,
       29
     ]
   },
@@ -573,10 +573,10 @@ export const device_types: Record<number, DeviceType> = {
       1066,
       1067,
       1068,
+      1036,
       1037,
-      1069,
       1071,
-      1036,
+      1069,
       1070,
       1043,
       1045,
@@ -591,10 +591,10 @@ export const device_types: Record<number, DeviceType> = {
       96,
       3,
       6,
-      29,
+      93,
       86,
       89,
-      93
+      29
     ]
   },
   "123": {
@@ -692,9 +692,9 @@ export const device_types: Record<number, DeviceType> = {
     "label": "Water Freeze Detector",
     "clusters": [
       128,
+      29,
       3,
-      69,
-      29
+      69
     ]
   },
   "66": {
@@ -711,19 +711,19 @@ export const device_types: Record<number, DeviceType> = {
     "label": "Water Leak Detector",
     "clusters": [
       128,
+      29,
       3,
-      69,
-      29
+      69
     ]
   },
   "68": {
     "id": 68,
     "label": "Rain Sensor",
     "clusters": [
       128,
+      29,
       3,
-      69,
-      29
+      69
     ]
   },
   "4293984272": {
@@ -740,11 +740,11 @@ export const device_types: Record<number, DeviceType> = {
       768,
       257,
       98,
-      259,
-      4,
       3,
-      6,
+      4,
       1026,
+      6,
+      259,
       8,
       29,
       30

diff --git a/dashboard/src/pages/matter-dashboard-app.ts b/dashboard/src/pages/matter-dashboard-app.ts
@@ -27,11 +27,11 @@ class MatterDashboardApp extends LitElement {
   public client!: MatterClient;
 
   @state()
-  private _state: "connecting" | "connected" | "error" = "connecting";
+  private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
 
   private _error: string | undefined;
 
-  private provider = new ContextProvider(this, {context: clientContext, initialValue: this.client});
+  private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
 
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
@@ -47,12 +47,15 @@ class MatterDashboardApp extends LitElement {
         this.client.addEventListener("server_info_updated", () => {
           this.provider.setValue(clone(this.client));
         });
+        this.client.addEventListener("connection_lost", () => {
+          this._state = "disconnected";
+        });
       },
       (err: MatterError) => {
         this._state = "error";
         this._error = err.message;
       }
-    );
+    )
 
     // Handle history changes
     const updateRoute = () => {
@@ -70,6 +73,9 @@ class MatterDashboardApp extends LitElement {
     if (this._state === "connecting") {
       return html`<p>Connecting...</p>`;
     }
+    if (this._state === "disconnected") {
+      return html`<p>Connection lost</p>`;
+    }
     if (this._state === "error") {
       return html`
         <p>Error: ${this._error}</p>