dashboard: handle translations on controller layer

src/opnsense/mvc/app/controllers/OPNsense/Core/Api/DashboardController.php

@@ -34,6 +34,24 @@ use OPNsense\Core\Config;
 
 class DashboardController extends ApiControllerBase
 {
+    private function getTranslations($id)
+    {
+        $translations = [
+            'cpu' => [
+                'title' => gettext('CPU Usage'),
+                'total' => gettext('Total'),
+                'interrupt' => gettext('Interrupt'),
+                'user' => gettext('User'),
+                'system' => gettext('System'),
+            ],
+            'interfaces' => [
+                'title' => gettext('Interfaces'),
+            ]
+        ];
+
+        return $translations[$id] ?? [];
+    }
+
     private function canAccessEndpoints($fname)
     {
         if (!file_exists($fname)) {
@@ -100,9 +118,11 @@ class DashboardController extends ApiControllerBase
 
         $result['modules'] = [];
         foreach ($widgetModules as $module) {
+            $id = strtolower(basename($module, '.js'));
             $result['modules'][] = [
-                'id' => strtolower(basename($module, '.js')),
-                'module' => basename($module)
+                'id' => $id,
+                'module' => basename($module),
+                'translations' => $this->getTranslations($id)
             ];
         }
 

src/opnsense/www/js/opnsense_widget_manager.js

@@ -84,6 +84,7 @@ class WidgetManager  {
         this.gridStackOptions = gridStackOptions;
         this.gettext = gettext;
         this.loadedModules = {}; // id -> widget module
+        this.widgetTranslations = {}; // id -> translations
         this.widgetConfigurations = {}; // id -> per-widget configuration
         this.widgetClasses = {}; // id -> instantiated widget module
         this.widgetHTMLElements = {}; // id -> Element types
@@ -125,6 +126,7 @@ class WidgetManager  {
             const promises = data.modules.map(async (item) => {
                 const mod = await import('/ui/js/widgets/' + item.module);
                 this.loadedModules[item.id] = mod.default;
+                this.widgetTranslations[item.id] = item.translations;
             });
 
             // Load all modules simultaneously - this shouldn't take long
@@ -164,6 +166,13 @@ class WidgetManager  {
         widget.setId(id);
         this.widgetClasses[id] = widget;
 
+        if (!id in this.widgetTranslations) {
+            console.error('Missing translations for widget', id);
+        }
+
+        widget.setTranslations(this.widgetTranslations[id]);
+        widget.setTitle(this.widgetTranslations[id].title);
+
         // setup generic panels
         let content = widget.getMarkup();
         let $panel = this._makeWidget(id, widget.title, content);

src/opnsense/www/js/widgets/BaseWidget.js

@@ -1,8 +1,9 @@
 export default class BaseWidget {
     constructor(config) {
         this.config = config;
-        this.title = "";
         this.id = null;
+        this.title = "";
+        this.translations = {};
         this.tickTimeout = 5000; // Default tick timeout
         this.resizeHandles = "all"
     }
@@ -15,6 +16,14 @@ export default class BaseWidget {
         this.id = id;
     }
 
+    setTitle(title) {
+        this.title = title;
+    }
+
+    setTranslations(translations) {
+        this.translations = translations;
+    }
+
     getGridOptions() {
         // per-widget gridstack options override
         return {};

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

@@ -32,7 +32,6 @@ import BaseWidget from "./BaseWidget.js";
 export default class Cpu extends BaseWidget {
     constructor() {
         super();
-        this.title = 'CPU Usage';
         this.resizeHandles = "e, w";
     }
 
@@ -65,19 +64,19 @@ export default class Cpu extends BaseWidget {
         let $container = $(`
         <div class="canvas-container">
             <div class="smoothie-container">
-                <b>Total</b>
+                <b>${this.translations.total}</b>
                 <div><canvas id="cpu-usage" style="width: 80%; height: 50px;"></canvas></div>
             </div>
             <div class="smoothie-container">
-                <b>Interrupt</b>
+                <b>${this.translations.interrupt}</b>
                 <div><canvas id="cpu-usage-intr" style="width: 80%; height: 50px;"></canvas></div>
             </div>
             <div class="smoothie-container">
-                <b>User</b>
+                <b>${this.translations.user}</b>
                 <div><canvas id="cpu-usage-user" style="width: 80%; height: 50px;"></canvas></div>
             </div>
             <div class="smoothie-container">
-                <b>System</b>
+                <b>${this.translations.system}</b>
                 <div><canvas id="cpu-usage-sys" style="width: 80%; height: 50px;"></canvas></div>
             </div>
         </div>`);

src/opnsense/www/js/widgets/Interfaces.js

@@ -32,7 +32,6 @@ import BaseTableWidget from "./BaseTableWidget.js";
 export default class Interfaces extends BaseTableWidget {
     constructor() {
         super();
-        this.title = "Interfaces";
         this.resizeHandles = "e, w";
     }