From 9885f09d8dcf69f489773f183237c6a913139a86 Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Wed, 15 Jan 2025 18:48:43 +0100
Subject: [PATCH] Log viewer: Fixed column width for timestamp, level & logger
 name (#3011)

When using the log viewer, I have regularly noticed that the time column
is wider than required, as well as the logger name column taking up much
space and making the message column move if a new log with a longer
logger name comes in.
This sets the width of the time, level and logger name columns to a
fixed value and limits the logger name length.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../web/src/pages/developer/log-viewer.vue    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue b/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
index 171b8d763..0e9a9b58b 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/log-viewer.vue
@@ -225,12 +225,27 @@
   td.sticky
     position sticky
     left 0
+    width 105px
     color black
     background #f1f1f1
     z-index 1
     white-space nowrap
     overflow hidden
 
+  td.level
+    width 50px
+
+  td.logger
+    width 280px
+
+  span.logger
+    width 280px
+    display block
+    direction rtl
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
+
   tr.table-rows
     height 31px
 
@@ -335,6 +350,7 @@ export default {
       batchLogs: [],
       nextId: 0,
       maxEntries: 2000,
+      maxLoggerNameLength: 40,
       logStart: '--:--:--',
       logEnd: '--:--:--',
       currentHighlightColorItemIndex: null,
@@ -468,8 +484,8 @@ export default {
           break
       }
       tr.innerHTML = '<td class="sticky"><i class="icon f7-icons" style="font-size: 18px;">' + icon + `</i> ${entity.time}<span class="milliseconds">${entity.milliseconds}</span></td>` +
-        `<td>${entity.level}</td>` +
-        `<td>${entity.loggerName}</td>` +
+        `<td class="level">${entity.level}</td>` +
+        `<td class="logger"><span class="logger">${entity.loggerName}</span></td>` +
         `<td class="nowrap">${this.highlightText(entity.message)}</td>`
       return tr
     },