Handle log-viewer heartbeat

Signed-off-by: Ravi Nadahar <[email protected]>

Author: Ravi Nadahar

bundles/org.openhab.ui/web/src/js/openhab/ws.ts

@@ -110,6 +110,7 @@ type CloseCallback = (event: CloseEvent) => void;
  * @param path the path to connect to, e.g. `/ws`
  * @param messageCallback the callback to handle incoming messages
  * @param readyCallback the callback to handle the connection being ready
+ * @param closeCallback the callback to handle the connection being closed
  * @param errorCallback the callback to handle errors
  * @param heartbeatCallback the callback to handle heartbeats
  * @param heartbeatInterval the interval in seconds for sending heartbeats
@@ -118,6 +119,7 @@ function newWSConnection (
   path: string,
   messageCallback: MessageCallback,
   readyCallback: ReadyCallback | undefined,
+  closeCallback: CloseCallback | undefined,
   errorCallback: ErrorCallback | undefined,
   heartbeatCallback: HeartbeatCallback | undefined,
   heartbeatInterval: number
@@ -154,6 +156,13 @@ function newWSConnection (
     if (readyCallback) readyCallback(event)
   }
 
+  // Handle WebSocket connection closed
+  socket.onclose = (event: CloseEvent) => {
+    socket.clearKeepalive()
+    if (closeCallback) closeCallback(event)
+    else console.debug('WebSocket connection closed', event)
+  }
+
   // Handle WebSocket message received
   socket.onmessage = (event: MessageEvent) => {
     let evt: WebSocketMessage
@@ -192,6 +201,7 @@ const WebSocketService = {
    * @param messageCallback message callback to handle incoming messages
    * @param heartbeatCallback heartbeat callback
    * @param readyCallback ready callback
+   * @param closeCallback close callback
    * @param errorCallback error callback
    * @param heartbeatInterval heartbeat interval in seconds (defaults to 5)
    */
@@ -200,10 +210,11 @@ const WebSocketService = {
     messageCallback: MessageCallback,
     heartbeatCallback: HeartbeatCallback,
     readyCallback?: ReadyCallback,
+    closeCallback?: CloseCallback,
     errorCallback?: ErrorCallback,
     heartbeatInterval: number = 5
   ): KeepaliveWebSocket {
-    return newWSConnection(path, messageCallback, readyCallback, errorCallback, heartbeatCallback, heartbeatInterval)
+    return newWSConnection(path, messageCallback, readyCallback, closeCallback, errorCallback, heartbeatCallback, heartbeatInterval)
   },
   /**
    * Connect to the event WebSocket, which provides direct access to the EventBus.
@@ -250,6 +261,7 @@ const WebSocketService = {
       extendedMessageCallback,
       heartbeatCallback,
       extendedReadyCallback,
+      undefined,
       errorCallback
     )
 

bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue

@@ -237,7 +237,7 @@
           <input type="search" placeholder="Filter..." v-model="filterText" @keyup.enter="handleFilter"></input>
         </div> -->
         <div style="display: flex; flex-wrap: nowrap">
-          <f7-badge class="log-period margin-left-half">
+          <f7-badge class="log-period margin-left-half" :color="periodRangeColor" :tooltip="periodRangeTooltip">
             {{ logStart }}&nbsp;>&nbsp;{{ logEnd }}
           </f7-badge>
           <f7-badge class="margin-horizontal" :color="countersBadgeColor" tooltip="Log entries filtered/total">
@@ -322,6 +322,12 @@
 </template>
 
 <style lang="stylus">
+.theme-filled
+  .log-viewer
+    .subnavbar
+      .badge.color-red
+        background-color #300
+        color #ff4d4d
 .log-viewer
 
   .subnavbar
@@ -578,6 +584,14 @@ export default {
     filteredTableData () {
       return this.tableData.filter((item) => item.visible)
     },
+    periodRangeColor () {
+      if (!this.stateConnected) return 'red'
+      return this.stateProcessing ? 'green' : 'orange'
+    },
+    periodRangeTooltip () {
+      if (!this.stateConnected) return 'Log period - Disconnected'
+      return this.stateProcessing ? 'Log period - Receiving logs' : 'Log period - Paused'
+    },
     countersBadgeColor () {
       if (this.tableData.length >= this.maxEntries) return 'red'
       if (this.filterCount < this.tableData.length) return 'orange'
@@ -645,6 +659,10 @@ export default {
         nextTick(() => this.scrollToBottom())
       }
 
+      const closeCallback = () => {
+        this.stateConnected = false
+      }
+
       const messageCallback = (event) => {
         if (Array.isArray(event)) {
           event.forEach((ev) => {
@@ -656,10 +674,18 @@ export default {
       }
 
       const heartbeatCallback = () => {
-        this.socket.send('{}')
+        try {
+          this.socket.send('{}')
+        } catch (e) {
+          console.warn('WebSocket heartbeat failed:', e)
+        }
+      }
+
+      const errorCallback = (event) => {
+        console.error('WebSocket error:', event)
       }
 
-      this.socket = this.$oh.ws.connect('/ws/logs', messageCallback, heartbeatCallback, readyCallback, null, 9)
+      this.socket = this.$oh.ws.connect('/ws/logs', messageCallback, heartbeatCallback, readyCallback, closeCallback, errorCallback, 9)
 
       // TEMP
       // for (let i = 0; i < 1980; i++) {