From 6c0597d2071cb91ac89dfdad15025e5f695d1ea9 Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Mon, 13 Jan 2025 14:27:15 +0100
Subject: [PATCH] Log viewer: Limit column width

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../web/src/pages/developer/log-viewer.vue    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 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 e630449ff2..8aabde0dc0 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
@@ -227,9 +227,18 @@
   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
 
   tr.table-rows
     height 31px
@@ -335,6 +344,7 @@ export default {
       batchLogs: [],
       nextId: 0,
       maxEntries: 2000,
+      maxLoggerNameLength: 40,
       logStart: '--:--:--',
       logEnd: '--:--:--',
       currentHighlightColorItemIndex: null,
@@ -425,11 +435,11 @@ export default {
         this.addLogEntry(event)
       }
 
-      const heartbeatCallback = () => {
+      const keepaliveCallback = () => {
         this.socket.send('[]')
       }
 
-      this.socket = this.$oh.ws.connect('/ws/logs', messageCallback, heartbeatCallback, readyCallback, null, 9)
+      this.socket = this.$oh.ws.connect('/ws/logs', messageCallback, readyCallback, null, keepaliveCallback, 9)
 
       // TEMP
       // for (let i = 0; i < 1980; i++) {
@@ -449,9 +459,11 @@ export default {
     renderEntry (entity) {
       let tr = document.createElement('tr')
       tr.className = 'table-rows ' + entity.level.toLowerCase()
+      let loggerName = entity.loggerName
+      if (loggerName.length > this.maxLoggerNameLength) loggerName = loggerName.substring(loggerName.length - this.maxLoggerNameLength)
       tr.innerHTML = `<td class="sticky">${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">${loggerName}</td>` +
         `<td class="nowrap">${this.highlightText(entity.message)}</td>`
       return tr
     },