From 2aeb8074d1c4e0ebbccb50467a37c5b03917ba9f Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Wed, 26 Jun 2024 14:57:59 +0200
Subject: [PATCH] dashboard: add mechanism for widget-specific data storage and
 restructure BaseWidget

---
 .../www/js/opnsense_widget_manager.js         |  5 +++
 .../www/js/widgets/BaseTableWidget.js         |  4 +-
 src/opnsense/www/js/widgets/BaseWidget.js     | 45 ++++++++++++++-----
 src/opnsense/www/js/widgets/Firewall.js       |  3 +-
 src/opnsense/www/js/widgets/LiveLog.js        |  3 +-
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
index 382c991e5..8e5d2d6fd 100644
--- a/src/opnsense/www/js/opnsense_widget_manager.js
+++ b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -290,6 +290,11 @@ class WidgetManager  {
 
             let items = this.grid.save(false);
             items.forEach((item) => {
+                // Store widget-specific configuration
+                let widgetConfig = this.widgetClasses[item.id].getWidgetConfig();
+                if (widgetConfig) {
+                    item['widget'] = widgetConfig;
+                }
                 // XXX the gridstack save() behavior is inconsistent with the responsive columnWidth option,
                 // as the calculation will return impossible values for the x, y, w and h attributes.
                 // For now, the gs-{x,y,w,h} attributes are a better representation of the grid for layout persistence
diff --git a/src/opnsense/www/js/widgets/BaseTableWidget.js b/src/opnsense/www/js/widgets/BaseTableWidget.js
index 284a2c692..5e92507f7 100644
--- a/src/opnsense/www/js/widgets/BaseTableWidget.js
+++ b/src/opnsense/www/js/widgets/BaseTableWidget.js
@@ -27,8 +27,8 @@
 import BaseWidget from "./BaseWidget.js";
 
 export default class BaseTableWidget extends BaseWidget {
-    constructor() {
-        super();
+    constructor(config) {
+        super(config);
 
         this.tables = {};
         this.curSize = null;
diff --git a/src/opnsense/www/js/widgets/BaseWidget.js b/src/opnsense/www/js/widgets/BaseWidget.js
index a4dcf7a0b..39c3f0b9b 100644
--- a/src/opnsense/www/js/widgets/BaseWidget.js
+++ b/src/opnsense/www/js/widgets/BaseWidget.js
@@ -36,10 +36,20 @@ export default class BaseWidget {
         this.eventSourceOnData = null;
     }
 
+    /* Public functions */
+
     getResizeHandles() {
         return this.resizeHandles;
     }
 
+    getWidgetConfig() {
+        if (this.config !== undefined && 'widget' in this.config) {
+            return this.config['widget'];
+        }
+
+        return false;
+    }
+
     setId(id) {
         this.id = id;
     }
@@ -48,6 +58,8 @@ export default class BaseWidget {
         this.translations = translations;
     }
 
+    /* Public virtual functions */
+
     getGridOptions() {
         // per-widget gridstack options override
         return {};
@@ -73,6 +85,22 @@ export default class BaseWidget {
         this.closeEventSource();
     }
 
+    onVisibilityChanged(visible) {
+        if (this.eventSourceUrl !== null) {
+            if (visible) {
+                this.openEventSource(this.eventSourceUrl, this.eventSourceOnData);
+            } else if (this.eventSource !== null) {
+                this.closeEventSource();
+            }
+        }
+    }
+
+    /* Utility/protected functions */
+
+    setWidgetConfig(config) {
+        this.config['widget'] = config;
+    }
+
     openEventSource(url, onMessage) {
         this.closeEventSource();
 
@@ -81,7 +109,12 @@ export default class BaseWidget {
         this.eventSource = new EventSource(url);
         this.eventSource.onmessage = onMessage;
         this.eventSource.onerror = (e) => {
-            if (this.eventSource.readyState == EventSource.closed) {
+            if (this.eventSource.readyState == EventSource.CONNECTING) {
+                /* Backend closed connection due to timeout, reconnect issued by browser */
+                return;
+            }
+
+            if (this.eventSource.readyState == EventSource.CLOSED) {
                 this.closeEventSource();
             } else {
                 console.error('Unknown error occurred during streaming operation', e);
@@ -96,16 +129,6 @@ export default class BaseWidget {
         }
     }
 
-    onVisibilityChanged(visible) {
-        if (this.eventSourceUrl !== null) {
-            if (visible) {
-                this.openEventSource(this.eventSourceUrl, this.eventSourceOnData);
-            } else if (this.eventSource !== null) {
-                this.closeEventSource();
-            }
-        }
-    }
-
     /* For testing purposes */
     sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
diff --git a/src/opnsense/www/js/widgets/Firewall.js b/src/opnsense/www/js/widgets/Firewall.js
index 72990d431..a45471705 100644
--- a/src/opnsense/www/js/widgets/Firewall.js
+++ b/src/opnsense/www/js/widgets/Firewall.js
@@ -31,8 +31,7 @@ import BaseTableWidget from "./BaseTableWidget.js";
 
 export default class Firewall extends BaseTableWidget {
     constructor(config) {
-        super();
-        this.config = config;
+        super(config);
         this.ifMap = {};
         this.counters = {};
         this.chart = null;
diff --git a/src/opnsense/www/js/widgets/LiveLog.js b/src/opnsense/www/js/widgets/LiveLog.js
index bfa2eadc0..9058a28c4 100644
--- a/src/opnsense/www/js/widgets/LiveLog.js
+++ b/src/opnsense/www/js/widgets/LiveLog.js
@@ -30,8 +30,7 @@ import BaseTableWidget from "./BaseTableWidget.js";
 
 export default class LiveLog extends BaseTableWidget {
     constructor(config) {
-        super();
-        this.config = config;
+        super(config);
     }
 
     getMarkup() {