Improve logs and error check (#97)

* Improve logs and error check * Add download logs button * fix logs border in dark mode * format * combine 4 regex in 1
home-assistant · Sep 11, 2023 · 2171cfd · 2171cfd
1 parent 981b338
commit 2171cfd
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/rootfs/usr/share/www/index.html b/rootfs/usr/share/www/index.html
@@ -27,13 +27,14 @@ <h2>This may take up to 20 minutes</h2>
     <div class="state-error">
       <h1>Error installing Home Assistant</h1>
       <div role="alert" class="alert">
-          <svg class="alert-icon" preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true" viewBox="0 0 24 24">
-            <g>
-              <path
-                d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
-              </path>
-            </g>
-          </svg>
+        <svg class="alert-icon" preserveAspectRatio="xMidYMid meet" focusable="false" role="img" aria-hidden="true"
+          viewBox="0 0 24 24">
+          <g>
+            <path
+              d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z">
+            </path>
+          </g>
+        </svg>
         <div class="alert-content">
           An error occured while installing Home Assistant, check the logs below for more information.
         </div>

diff --git a/rootfs/usr/share/www/static/scripts.js b/rootfs/usr/share/www/static/scripts.js
@@ -70,24 +70,25 @@ function testAvailable() {
   }, scheduleTry);
 }
 
+var errorCheck = /^[\d -:]+ERROR(.*)/gm
+
 function fetchLogs() {
   fetch("/observer/logs").then(function (res) {
     if (res.ok) {
       res.text().then(function (text) {
         var logElement = document.getElementById("log");
-        if (text.includes("ERROR")) {
+        if (errorCheck.test(text)) {
           document.body.classList.add("error");
-          document.getElementById("show_logs").classList.add("hidden");
+          document.getElementById("show_logs").innerText = "Download raw logs";
           logElement.showFull = true;
         }
         if (!logElement.showFull) {
           return;
         }
         var scrolledDown = logElement.scrollTop + logElement.clientHeight === logElement.scrollHeight;
-        logElement.innerText = text
-          .replace(/\s[A-Z]+\s\(\w+\)\s\[[\w.]+\]/gi, "")
-          .replace(/\d{2}-\d{2}-\d{2}\s/gi, "")
-          .replace(/\d{2}:\d{2}:\d{2}\s/gi, "");
+        logElement.innerHTML = text
+          .replace(/^[\[\d \-:\]]*/gm, "")
+          .replace(/^(INFO|WARNING|ERROR)\s\(\w+\)\s(.*)\n/gm, "<span class='$1'>$2</span>\n")
         if (scrolledDown) {
           // Scroll content down if it was already scrolled down
           logElement.scrollTop = logElement.scrollHeight;
@@ -113,6 +114,17 @@ fetchLogs();
 
 document.getElementById("show_logs").addEventListener("click", toggleLogs);
 function toggleLogs(event) {
+  if (document.body.classList.contains("error")) {
+    const a = document.createElement("a");
+    a.target = "_blank";
+    a.href = "/observer/logs";
+    a.download = "logs.txt";
+
+    document.body.appendChild(a);
+    a.dispatchEvent(new MouseEvent("click"));
+    document.body.removeChild(a);
+    return;
+  }
   var logElement = document.getElementById("log");
   logElement.showFull = !logElement.showFull;
   if (logElement.showFull) {

diff --git a/rootfs/usr/share/www/static/styles.css b/rootfs/usr/share/www/static/styles.css
@@ -45,6 +45,7 @@ body {
   display: flex;
   align-items: center;
 }
+
 .alert::after {
   position: absolute;
   top: 0;
@@ -57,22 +58,20 @@ body {
   border-radius: 4px;
   background-color: #db4437;
 }
+
 .alert-icon {
   fill: #db4437;
   width: 24px;
   flex-shrink: 0;
 }
+
 .alert-content {
   font-size: 14px;
   text-align: left;
   margin-left: 8px;
   margin-right: 0;
 }
 
-.hidden {
-  display: none;
-}
-
 .header {
   text-align: center;
   margin-top: 32px;
@@ -276,9 +275,11 @@ button.icon {
 .block:after {
   border-radius: 12px;
 }
+
 .link-list {
   padding: 8px 0;
 }
+
 .link {
   width: 100%;
   height: 100%;
@@ -343,6 +344,18 @@ pre:empty {
   display: none;
 }
 
+pre .INFO {
+  color: #039be5;
+}
+
+pre .ERROR {
+  color: #db4437;
+}
+
+pre .WARNING {
+  color: #ffa600;
+}
+
 dialog {
   background-color: #ffffff;
   border: none !important;
@@ -359,9 +372,9 @@ dialog::backdrop {
 
 dialog button {
   width: 48px;
-	  height: 48px;
-	  padding: 12px;
-	  margin: -12px;
+  height: 48px;
+  padding: 12px;
+  margin: -12px;
   border-radius: 50%;
 }
 
@@ -417,7 +430,8 @@ dialog button svg {
   gap: 16px;
 }
 
-.app-qr a, .app-qr img {
+.app-qr a,
+.app-qr img {
   flex: 1;
 }
 
@@ -427,7 +441,8 @@ dialog button svg {
     background-color: #111111;
   }
 
-  .content {
+  .content,
+  pre {
     background-color: #1c1c1c;
     border-color: rgba(225, 225, 225, 0.12);
   }