From ef97ce785fc682eabe8aa2afad64464a7a3e422f Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Thu, 30 Jan 2025 20:06:30 +0100
Subject: [PATCH] System: Health: add "stacked" option and some curly braces.

---
 .../views/OPNsense/Diagnostics/health.volt    | 17 ++++++++++++---
 src/opnsense/www/js/opnsense_health.js        | 21 ++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/health.volt b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/health.volt
index f46febaeb..e9536af82 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Diagnostics/health.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Diagnostics/health.volt
@@ -98,10 +98,16 @@ POSSIBILITY OF SUCH DAMAGE.
 
 			$('#detail-select').change(async function() {
 				$('#spinner').show();
-				var selectedValue = $(this).val();
-				await healthGraph.update(null, selectedValue);
+				await healthGraph.update(null, $(this).val());
 				$('#spinner').hide();
 			});
+
+            $("#stacked-select").change(async function() {
+				$('#spinner').show();
+				await healthGraph.update(null, null, $(this).is(':checked'));
+				$('#spinner').hide();
+			});
+
 		}).catch((err) => {
 			$('#info-disabled').show();
 			$('#main').hide();
@@ -160,7 +166,7 @@ POSSIBILITY OF SUCH DAMAGE.
             <select id="health-subcategory-select" class="selectpicker" data-width="200px" data-live-search="true" data-container="body"></select>
         </div>
 
-        <div class="label-select-pair ">
+        <div class="label-select-pair">
             <label for="detail-select"><b>{{ lang._('Granularity') }}</b></label>
             <select id="detail-select" class="selectpicker" data-width="200px">
                 <option value="0">{{ lang._('Default (%d minute)') | format('1') }}</option>
@@ -170,6 +176,11 @@ POSSIBILITY OF SUCH DAMAGE.
             </select>
         </div>
 
+        <div class="label-select-pair" style="height: 55px">
+            <label for="stacked-select"><b>{{ lang._('Stacked') }}</b></label>
+            <input id="stacked-select" type="checkbox"/>
+        </div>
+
         <button id="export" class="btn btn-default" data-toggle="tooltip" data-original-title="{{ lang._('Export current selection as CSV')}}" style="align-self: flex-end;">
             <span class="fa fa-cloud-download"></span>
         </button>
diff --git a/src/opnsense/www/js/opnsense_health.js b/src/opnsense/www/js/opnsense_health.js
index 56e998881..2d2bd45c0 100644
--- a/src/opnsense/www/js/opnsense_health.js
+++ b/src/opnsense/www/js/opnsense_health.js
@@ -35,6 +35,7 @@ class HealthGraph {
 
         this.currentSystem = null;
         this.currentDetailLevel = 0;
+        this.currentStacked = false;
     }
 
     async initialize() {
@@ -54,17 +55,22 @@ class HealthGraph {
         return this.rrdList;
     }
 
-    async update(system = null, detailLevel = null) {
-        if (system === null)
+    async update(system = null, detailLevel = null, stacked = null) {
+        if (system === null) {
             system = this.currentSystem;
-        else
+        } else {
             this.currentSystem = system;
-
-
-        if (detailLevel === null)
+        }
+        if (detailLevel === null) {
             detailLevel = this.currentDetailLevel;
-        else
+        } else {
             this.currentDetailLevel = detailLevel;
+        }
+        if (stacked === null) {
+            stacked = this.currentStacked;
+        } else {
+            this.currentStacked = stacked;
+        }
 
         const data = await this._fetchData();
         const formatted = this._formatData(data.set);
@@ -73,6 +79,7 @@ class HealthGraph {
 
         this.chart.data.datasets = formatted;
         this.chart.options.scales.y.title.text = data['y-axis_label'];
+        this.chart.options.scales.y.stacked = stacked;
         this.chart.options.plugins.title.text = data['title'];
         this.chart.options.plugins.zoom.limits.x.minRange = this._getMinRange(stepSize * 1000);
         this.chart.update();