From bdff6631aceaa544d5d3463152ec5328342e2d6f Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Mon, 19 Aug 2024 12:00:22 +0200
Subject: [PATCH] dashboard: interface statistics: table view on expansion
 (https://github.com/opnsense/core/issues/7766)

---
 .../www/js/widgets/InterfaceStatistics.js     | 59 ++++++++++++++++---
 src/opnsense/www/js/widgets/Metadata/Core.xml |  1 +
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/opnsense/www/js/widgets/InterfaceStatistics.js b/src/opnsense/www/js/widgets/InterfaceStatistics.js
index 95ee97391..f2262ee3d 100644
--- a/src/opnsense/www/js/widgets/InterfaceStatistics.js
+++ b/src/opnsense/www/js/widgets/InterfaceStatistics.js
@@ -24,7 +24,7 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-export default class InterfaceStatistics extends BaseWidget {
+export default class InterfaceStatistics extends BaseTableWidget {
     constructor() {
         super();
 
@@ -37,13 +37,31 @@ export default class InterfaceStatistics extends BaseWidget {
     }
 
     getMarkup() {
-        return $(`
-        <div class="interface-statistics-chart-container">
-            <div class="canvas-container">
-                <canvas id="intf-stats"></canvas>
-            </div>
-        </div>
-        `);
+        let $container = $('<div id="if-stats-container"></div>');
+        let $table = this.createTable('interface-statistics-table', {
+            headerPosition: 'top',
+            headers: [
+                this.translations.interface,
+                this.translations.bytesin,
+                this.translations.bytesout,
+                this.translations.packetsin,
+                this.translations.packetsout,
+                this.translations.errorsin,
+                this.translations.errorsout,
+                this.translations.collisions
+            ]
+        });
+        let $chartContainer = $(`
+            <div class="interface-statistics-chart-container">
+                <div class="canvas-container">
+                    <canvas id="intf-stats"></canvas>
+                </div>
+            </div>`
+        );
+
+        $container.append($table);
+        $container.append($chartContainer);
+        return $container;
     }
 
     _getIndexedData(data) {
@@ -63,6 +81,22 @@ export default class InterfaceStatistics extends BaseWidget {
 
     async onWidgetTick() {
         const data = await this.ajaxCall('/api/diagnostics/traffic/interface');
+
+        for (const [id, obj] of Object.entries(data.interfaces)) {
+            super.updateTable('interface-statistics-table', [
+                [
+                    $(`<a href="/interfaces.php?if=${id}">${obj.name}</a>`).prop('outerHTML'),
+                    this._formatBytes(parseInt(obj["bytes received"])) || "0",
+                    this._formatBytes(parseInt(obj["bytes transmitted"])) || "0",
+                    parseInt(obj["packets received"]).toLocaleString(),
+                    parseInt(obj["packets transmitted"]).toLocaleString(),
+                    parseInt(obj["input errors"]).toLocaleString(),
+                    parseInt(obj["output errors"]).toLocaleString(),
+                    parseInt(obj["collisions"]).toLocaleString()
+                ]
+            ], id);
+        }
+
         let sortedSet = {};
         let i = 0;
         let colors = Chart.colorschemes.tableau.Classic10;
@@ -177,6 +211,15 @@ export default class InterfaceStatistics extends BaseWidget {
                 this.chart.options.plugins.legend.display = false;
             }
         }
+
+        if (width < 700) {
+            $('#intf-stats').show();
+            $('#interface-statistics-table').hide();
+        } else {
+            $('#intf-stats').hide();
+            $('#interface-statistics-table').show();
+        }
+
         return true;
     }
 
diff --git a/src/opnsense/www/js/widgets/Metadata/Core.xml b/src/opnsense/www/js/widgets/Metadata/Core.xml
index b9b96bdf8..6bd86e059 100644
--- a/src/opnsense/www/js/widgets/Metadata/Core.xml
+++ b/src/opnsense/www/js/widgets/Metadata/Core.xml
@@ -55,6 +55,7 @@
         </endpoints>
         <translations>
             <title>Interface Statistics</title>
+            <interface>Interface</interface>
             <bytesin>Bytes In</bytesin>
             <bytesout>Bytes Out</bytesout>
             <packetsin>Packets In</packetsin>