Improve log rendering

Use pre-compiled regex and define colors for debug and critical alerts as well.
home-assistant · Oct 3, 2024 · c9a8282 · c9a8282
1 parent 5109754
commit c9a8282
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/rootfs/usr/share/www/static/scripts.js b/rootfs/usr/share/www/static/scripts.js
@@ -70,7 +70,10 @@ function testAvailable() {
   }, scheduleTry);
 }
 
-var errorCheck = /^[\d -:]+ERROR(.*)/gm
+var errorCheck = /^[\d -:]+(ERROR|CRITICAL)(.*)/gm
+
+const regexRemoveTimestamp = /^[\[\d \-:.\]]*/gm
+const regexColorLines = /^(DEBUG|INFO|WARNING|ERROR|CRITICAL)\s\(\w+\)\s(.*)\n/gm
 
 function fetchLogs() {
   fetch("/observer/logs").then(function (res) {
@@ -87,8 +90,8 @@ function fetchLogs() {
         }
         var scrolledDown = logElement.scrollTop + logElement.clientHeight === logElement.scrollHeight;
         logElement.innerHTML = text
-          .replace(/^[\[\d \-:.\]]*/gm, "")
-          .replace(/^(INFO|WARNING|ERROR)\s\(\w+\)\s(.*)\n/gm, "<span class='$1'>$2</span>\n")
+          .replace(regexRemoveTimestamp, "")
+          .replace(regexColorLines, "<span class='$1'>$2</span>\n")
         if (scrolledDown) {
           // Scroll content down if it was already scrolled down
           logElement.scrollTop = logElement.scrollHeight;

diff --git a/rootfs/usr/share/www/static/styles.css b/rootfs/usr/share/www/static/styles.css
@@ -348,11 +348,15 @@ pre:empty {
   display: none;
 }
 
-pre .INFO {
+pre .DEBUG {
   color: #039be5;
 }
 
-pre .ERROR {
+pre .INFO {
+  color: #43a047;
+}
+
+pre .ERROR, pre .CRITICAL {
   color: #db4437;
 }