Configurable Connection Notifications

nodes/config/locales/en-US/ui_base.json

@@ -31,7 +31,11 @@
             "navigationStyleFixed": "Fixed",
             "navigationStyleIcon": "Collapse to icons",
             "navigationStyleTemporary": "Appear over content",
-            "navigationStyleNone": "Always hide"
+            "navigationStyleNone": "Always hide",
+            "notifications": "Notifications",
+            "showReconnect": "Show reconnect notification",
+            "showDisconnect": "Show disconnect notification",
+            "reconnectNotificationDelay": "Reconnect notification delay (sec)"
         },
         "layout": {
             "pages": "Pages",

nodes/config/ui_base.html

@@ -347,6 +347,15 @@
             },
             titleBarStyle: {
                 value: 'default'
+            },
+            showReconnectNotification: {
+                value: true
+            },
+            reconnectNotificationDelay: {
+                value: 1
+            },
+            showDisconnectNotification: {
+                value: true
             }
         },
         label: function () {
@@ -372,6 +381,24 @@
             if (this.appIcon) {
                 $('#node-config-input-appIcon').val(this.appIcon)
             }
+
+            // backward compatibility for reconnect notification
+            if (!this.showReconnectNotification) {
+                this.showReconnectNotification = true
+                $('#node-config-input-showReconnectNotification').prop('checked', true)
+            }
+
+            // backward compatibility for reconnect notification delay
+            if (!this.reconnectNotificationDelay) {
+                this.reconnectNotificationDelay = 1
+                $('#node-config-input-reconnectNotificationDelay').val(this.reconnectNotificationDelay)
+            }
+
+            // backward compatibility for disconnect notification
+            if (!this.showDisconnectNotification) {
+                this.showDisconnectNotification = true
+                $('#node-config-input-showDisconnectNotification').prop('checked', true)
+            }
         },
         onpaletteadd: function () {
             // add the Dashboard 2.0 sidebar
@@ -2429,4 +2456,20 @@
         <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showPathInSidebar">
         <label style="width:auto" for="node-config-input-showPathInSidebar"><span data-i18n="ui-base.label.showPath"></span></label>
     </div>
+    <div class="form-row" style="margin-bottom: 0;">
+        <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.notifications"></label>
+    </div>
+    <div class="form-row form-row-flex" style="align-items: center;">
+        <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showReconnectNotification">
+        <label style="width:auto" for="node-config-input-showReconnectNotification"><span data-i18n="ui-base.label.showReconnect"></span></label>
+    </div>
+    <div class="form-row form-row-flex" style="align-items: center;">   
+        <input style="width: 80px" type="number" id="node-config-input-reconnectNotificationDelay">
+        <label style="width:auto" for="node-config-input-reconnectNotificationDelay"><span data-i18n="ui-base.label.reconnectNotificationDelay"></span></label>
+    </div>
+
+    <div class="form-row form-row-flex" style="align-items: center;">
+        <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showDisconnectNotification">
+        <label style="width:auto" for="node-config-input-showDisconnectNotification"><span data-i18n="ui-base.label.showDisconnect"></span></label>
+    </div>
 </script>

ui/src/App.vue

@@ -254,6 +254,15 @@ export default {
                     break
                 }
             }
+            // store the notification settings in localStorage since we need to do apply them before ui-config is received
+            const dashboardKey = Object.keys(payload.dashboards)[0]
+            const dashboard = payload.dashboards && dashboardKey ? payload.dashboards[dashboardKey] : null
+
+            if (dashboard) {
+                localStorage.setItem('ndrb-show-reconnect-notification', JSON.stringify(dashboard.showReconnectNotification || true))
+                localStorage.setItem('ndrb-reconnect-notification-delay', JSON.stringify(dashboard.reconnectNotificationDelay || 1))
+                localStorage.setItem('ndrb-show-disconnect-notification', JSON.stringify(dashboard.showDisconnectNotification || true))
+            }
         })
     },
     methods: {

ui/src/main.mjs

@@ -139,6 +139,11 @@ fetch('_setup')
 
         store.commit('setup/set', setup)
 
+        // retrieve the notification settings from localStorage
+        const showReconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-reconnect-notification')) ?? true
+        const reconnectNotificationDelay = JSON.parse(localStorage.getItem('ndrb-reconnect-notification-delay')) ?? 1
+        const showDisconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-disconnect-notification')) ?? true
+
         let disconnected = false
         let retryCount = 0 // number of reconnection attempts made
 
@@ -157,12 +162,15 @@ fetch('_setup')
                 retryCount = 0
                 disconnected = true
             }
-            // tell the user we're trying to connect
-            Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', {
-                displayTime: 0, // displayTime 0 persists notifications until another notification closes it
-                allowDismiss: false,
-                showCountdown: false
-            })
+
+            if (showDisconnectNotification) {
+                // tell the user we're trying to connect
+                Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', {
+                    displayTime: 0, // displayTime 0 persists notifications until another notification closes it
+                    allowDismiss: false,
+                    showCountdown: false
+                })
+            }
             // attempt to reconnect
             reconnect()
         })
@@ -171,12 +179,21 @@ fetch('_setup')
             console.log('SIO connected')
             // if we've just disconnected (i.e. aren't connecting for the first time)
             if (disconnected) {
+                if (showReconnectNotification) {
                 // send a notification/alert to the user to let them know the connection is live again
-                Alerts.emit('Connected', 'Connection re-established.', '#1BC318', {
-                    displayTime: 1,
-                    allowDismiss: true,
-                    showCountdown: true
-                })
+                    Alerts.emit('Connected', 'Connection re-established.', '#1BC318', {
+                        displayTime: reconnectNotificationDelay,
+                        allowDismiss: true,
+                        showCountdown: true
+                    })
+                } else {
+                    //, send a notification for 1 ms to close the disconnected notification
+                    Alerts.emit('Connected', 'Connection re-established.', '#1BC318', {
+                        displayTime: 0.001, // 1 ms
+                        allowDismiss: false,
+                        showCountdown: false
+                    })
+                }
             }
             disconnected = false
             clearTimeout(reconnectTO)