From d3466788f0684df9ee404b408b7a5d331e53a456 Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Mon, 13 Jan 2025 14:52:06 +0100
Subject: [PATCH] dashboard: minor UI fixes

- proper overflow handling and combined tooltips for grid table cells
- remove widget border radius
---
 src/opnsense/www/css/dashboard.css                |  3 ++-
 src/opnsense/www/js/widgets/Firewall.js           |  8 ++++++--
 .../www/js/widgets/InterfaceStatistics.js         | 15 ++++++++++++++-
 .../assets/stylesheets/dashboard.scss             |  3 ++-
 .../opnsense/assets/stylesheets/dashboard.scss    |  3 ++-
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
index a9b07fa09..8810c162f 100644
--- a/src/opnsense/www/css/dashboard.css
+++ b/src/opnsense/www/css/dashboard.css
@@ -53,7 +53,6 @@
   border-color: rgba(217, 79, 0, 0.15);
   border-width: 2px;
   background-color: #fbfbfb;
-  border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
 .widget-error {
@@ -337,6 +336,8 @@ div {
 }
 
 .grid-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
     border: 1 px solid #ccc;
     padding: 4px;
     text-align: center;
diff --git a/src/opnsense/www/js/widgets/Firewall.js b/src/opnsense/www/js/widgets/Firewall.js
index b645b54c9..f16a53b9a 100644
--- a/src/opnsense/www/js/widgets/Firewall.js
+++ b/src/opnsense/www/js/widgets/Firewall.js
@@ -82,6 +82,8 @@ export default class Firewall extends BaseTableWidget {
             super.closeEventSource();
         }
 
+        $('.ip-tooltip').tooltip('hide');
+
         let actIcons = {
             'pass': '<i class="fa fa-play text-success"></i>',
             'block': '<i class="fa fa-minus-circle text-danger"></i>',
@@ -123,12 +125,14 @@ export default class Firewall extends BaseTableWidget {
                 /* Format time based on client browser locale */
                 (new Intl.DateTimeFormat(undefined, {hour: 'numeric', minute: 'numeric'})).format(new Date(data.__timestamp__)),
                 this.ifMap[data.interface] ?? data.interface,
-                data.src,
-                data.dst,
+                `<span class="ip-tooltip" style="cursor: pointer; data-toggle="tooltip" title="${data.src}">${data.src}</span>`,
+                `<span class="ip-tooltip" style="cursor: pointer; data-toggle="tooltip" title="${data.dst}">${data.dst}</span>`,
                 data.dstport ?? ''
             ]
         ]);
 
+        $('.ip-tooltip').tooltip({container: 'body'});
+
         super.updateTable('fw-rule-table', [
             [
                 popover.html($(`<div style="text-align: left;">${this.counters[data.rid].label}</div>`)).prop('outerHTML'),
diff --git a/src/opnsense/www/js/widgets/InterfaceStatistics.js b/src/opnsense/www/js/widgets/InterfaceStatistics.js
index f2262ee3d..7ae874d30 100644
--- a/src/opnsense/www/js/widgets/InterfaceStatistics.js
+++ b/src/opnsense/www/js/widgets/InterfaceStatistics.js
@@ -36,6 +36,13 @@ export default class InterfaceStatistics extends BaseTableWidget {
         this.sortedData = [];
     }
 
+    getGridOptions() {
+        return {
+            // trigger overflow-y:scroll after 650px height
+            sizeToContent: 650,
+        };
+    }
+
     getMarkup() {
         let $container = $('<div id="if-stats-container"></div>');
         let $table = this.createTable('interface-statistics-table', {
@@ -82,10 +89,14 @@ export default class InterfaceStatistics extends BaseTableWidget {
     async onWidgetTick() {
         const data = await this.ajaxCall('/api/diagnostics/traffic/interface');
 
+        $('.if-tooltip').tooltip('hide');
+
         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'),
+                    `<span class="if-tooltip" style="cursor: pointer" data-toggle="tooltip" title="${obj.name}">
+                        <a href="/interfaces.php?if=${id}">${obj.name}</a>
+                    </span>`,
                     this._formatBytes(parseInt(obj["bytes received"])) || "0",
                     this._formatBytes(parseInt(obj["bytes transmitted"])) || "0",
                     parseInt(obj["packets received"]).toLocaleString(),
@@ -97,6 +108,8 @@ export default class InterfaceStatistics extends BaseTableWidget {
             ], id);
         }
 
+        $('.if-tooltip').tooltip({container: 'body'});
+
         let sortedSet = {};
         let i = 0;
         let colors = Chart.colorschemes.tableau.Classic10;
diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
index 6768fa60e..a10e71623 100644
--- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
+++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
@@ -55,7 +55,6 @@
   border-color: transparentize(map-get($colors, brand-primary), 0.85);
   border-width: 2px;
   background-color: map-get($colors, page-content-head-background);
-  border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
 .widget-error {
@@ -338,6 +337,8 @@ div {
 }
 
 .grid-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
     padding: 4px;
     text-align: center;
 }
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
index d852733db..66dd0d3fc 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
@@ -55,7 +55,6 @@
   border-color: transparentize(map-get($colors, brand-primary), 0.85);
   border-width: 2px;
   background-color: map-get($colors, page-content-head-background);
-  border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
 .widget-error {
@@ -338,6 +337,8 @@ div {
 }
 
 .grid-item {
+    overflow: hidden;
+    text-overflow: ellipsis;
     padding: 4px;
     text-align: center;
 }