dashboard: CPU widget graph selection (https://github.com/opnsense/core/issues/7672)

src/opnsense/www/js/opnsense_widget_manager.js

@@ -629,6 +629,7 @@ class WidgetManager  {
 
         // parse widget options
         const options = await widget.getWidgetOptions();
+        const config = await widget.getWidgetConfig();
         for (const [key, value] of Object.entries(options)) {
             let $option = $(`<div class="widget-option-container"></div>`);
             switch (value.type) {
@@ -640,12 +641,8 @@ class WidgetManager  {
                                      multiple="multiple"></select>`);
 
                     for (const option of value.options) {
-                        $select.append($(`<option value="${option.value}" ${option.selected ? 'selected' : ''}>${option.value}</option>`));
-                    }
-
-                    if (value.options.every(obj => !obj.selected)) {
-                        // No selection, apply the default.
-                        $select.val(value.default);
+                        let selected = config[key].includes(option.value);
+                        $select.append($(`<option value="${option.value}" ${selected ? 'selected' : ''}>${option.label}</option>`));
                     }
 
                     $option.append($(`<div><b>${value.title}</b></div>`));

src/opnsense/www/js/widgets/Cpu.js

@@ -27,9 +27,11 @@
 import BaseWidget from 'widget-base';
 
 export default class Cpu extends BaseWidget {
-    constructor() {
-        super();
+    constructor(config) {
+        super(config);
         this.resizeHandles = "e, w";
+        this.configurable = true;
+        this.graphs = ['total', 'intr', 'user', 'sys'];
     }
 
     _createChart(selector, timeSeries) {
@@ -57,24 +59,46 @@ export default class Cpu extends BaseWidget {
         });
     }
 
+    async getWidgetOptions() {
+        return {
+            graphs: {
+                title: this.translations.graphs,
+                type: 'select_multiple',
+                options: ['total', 'intr', 'user', 'sys'].map((value) => {
+                    return {
+                        value: value,
+                        label: this.translations[value]
+                    }
+                }),
+                default: ['total']
+            }
+        }
+    }
+
+    onWidgetOptionsChanged(options) {
+        this.graphs.filter(x => !options.graphs.includes(x)).forEach(graph => $(`#cpu-${graph}`).hide());
+        this.graphs = options.graphs;
+        this.graphs.forEach(graph => $(`#cpu-${graph}`).show());
+    }
+
     getMarkup() {
         let $container = $(`
         <div class="cpu-type"></div>
         <div class="cpu-canvas-container">
-            <div class="smoothie-container">
+            <div id="cpu-total" class="smoothie-container">
                 <b>${this.translations.total}</b>
-                <div><canvas id="cpu-usage" style="width: 100%; height: 50px;"></canvas></div>
+                <div><canvas id="cpu-usage-total" style="width: 100%; height: 50px;"></canvas></div>
             </div>
-            <div class="smoothie-container">
-                <b>${this.translations.interrupt}</b>
+            <div id="cpu-intr" class="smoothie-container">
+                <b>${this.translations.intr}</b>
                 <div><canvas id="cpu-usage-intr" style="width: 100%; height: 50px;"></canvas></div>
             </div>
-            <div class="smoothie-container">
+            <div id="cpu-user" class="smoothie-container">
                 <b>${this.translations.user}</b>
                 <div><canvas id="cpu-usage-user" style="width: 100%; height: 50px;"></canvas></div>
             </div>
-            <div class="smoothie-container">
-                <b>${this.translations.system}</b>
+            <div id="cpu-sys" class="smoothie-container">
+                <b>${this.translations.sys}</b>
                 <div><canvas id="cpu-usage-sys" style="width: 100%; height: 50px;"></canvas></div>
             </div>
         </div>`);
@@ -86,24 +110,29 @@ export default class Cpu extends BaseWidget {
         const data = await this.ajaxCall('/api/diagnostics/cpu_usage/getcputype');
         $('.cpu-type').text(data);
 
-        let total_ts = new TimeSeries();
-        let intr_ts = new TimeSeries();
-        let user_ts = new TimeSeries();
-        let sys_ts = new TimeSeries();
-        this._createChart('cpu-usage', total_ts);
-        this._createChart('cpu-usage-intr', intr_ts);
-        this._createChart('cpu-usage-user', user_ts);
-        this._createChart('cpu-usage-sys', sys_ts);
+        const config = await this.getWidgetConfig();
+
+        let ts = {};
+        this.graphs.forEach((graph) => {
+            let timeSeries = new TimeSeries();
+            this._createChart(`cpu-usage-${graph}`, timeSeries);
+            ts[graph] = timeSeries;
+
+            if (!config.graphs.includes(graph)) {
+                // hide canvas container
+                $(`#cpu-${graph}`).hide();
+            }
+        });
+
         super.openEventSource('/api/diagnostics/cpu_usage/stream', (event) => {
             if (!event) {
                 super.closeEventSource();
             }
             const data = JSON.parse(event.data);
             let date = Date.now();
-            total_ts.append(date, data.total);
-            intr_ts.append(date, data.intr);
-            user_ts.append(date, data.user);
-            sys_ts.append(date, data.sys);
+            this.graphs.forEach((graph) => {
+                ts[graph].append(date, data[graph]);
+            });
         });
     }
 

src/opnsense/www/js/widgets/Metadata/Core.xml

@@ -43,8 +43,9 @@
             <title>CPU</title>
             <total>Total</total>
             <user>User</user>
-            <system>System</system>
-            <interrupt>Interrupt</interrupt>
+            <sys>System</sys>
+            <intr>Interrupt</intr>
+            <graphs>Graphs</graphs>
         </translations>
     </cpu>
     <interfacestatistics>

src/opnsense/www/js/widgets/Traffic.js

@@ -225,7 +225,7 @@ export default class Traffic extends BaseWidget {
                 options: Object.entries(interfaces.interfaces).map(([key,intf]) => {
                     return {
                         value: intf.name,
-                        selected: this.config.widget?.interfaces?.includes(intf.name) ?? false
+                        label: intf.name,
                     };
                 }),
                 default: Object.entries(interfaces.interfaces)