@viplance/nestjs-logger 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viplance/nestjs-logger",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "NestJS internal logging system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/index.html

@@ -41,6 +41,7 @@
               <li class="verbose" data-selector="verbose">Verbose</li>
             </ul>
           </nav>
+          <input id="search" onkeyup="search(event)" type="text" placeholder="Search" />
           <div onclick="getLogs()"><button class="white">Refresh</button></div>
       </div>
       <div class="container table-header">

package/public/scripts/common.js

@@ -10,6 +10,7 @@ const selectedLogTypes = {
 const logTypes = Object.keys(selectedLogTypes).filter((key) => key !== `all`);
 
 let logs = [];
+let text = "";
 
 window.addEventListener("load", async () => {
   getLogs();
@@ -37,7 +38,7 @@ document.addEventListener(`click`, (e) => {
         });
       }
 
-      getLogs();
+      renderLogs();
 
       return;
     }
@@ -132,6 +133,31 @@ function getLogHtmlElement(log) {
     </div>`;
 }
 
+function renderLogs() {
+  let html = "";
+
+  logs
+    .filter((log) => {
+      return selectedLogTypes["all"] || selectedLogTypes[log.type];
+    })
+    .filter((log) => {
+      if (text === "") return true;
+
+      return (
+        log.message.toLowerCase().includes(text) ||
+        log.trace?.toLowerCase().includes(text) ||
+        JSON.stringify(log.context || {})
+          .toLowerCase()
+          .includes(text)
+      );
+    })
+    .forEach((log) => {
+      html += getLogHtmlElement(log);
+    });
+
+  document.getElementById("logs").innerHTML = html;
+}
+
 async function getLogs() {
   const { origin, pathname, search } = window.location;
   const res = await fetch(`${origin}${pathname}api${search}`);
@@ -149,16 +175,12 @@ async function getLogs() {
       document.querySelector("nav").style.display = "flex";
     }
 
-    logs = logs.filter((log) => {
-      return selectedLogTypes["all"] || selectedLogTypes[log.type];
-    });
+    renderLogs();
+  }
+}
 
-    let html = "";
+function search(event) {
+  text = event.target.value.toLowerCase();
 
-    logs.forEach((log) => {
-      html += getLogHtmlElement(log);
-    });
-
-    document.getElementById("logs").innerHTML = html;
-  }
+  renderLogs();
 }

package/public/scripts/details-popup.js

@@ -9,7 +9,7 @@ function showLogDetails(log) {
           ${
             log.trace
               ? `
-              <h3 class="mt-2">Trace</h3>
+              <h3 class="mt-15">Trace</h3>
               <p class="key pl-2"><span>${getTrace(log.trace)}</span></p>
               `
               : ""
@@ -17,7 +17,7 @@ function showLogDetails(log) {
           ${
             log.context
               ? `
-            <h3 class="mt-2">Context</h3>
+            <h3 class="mt-15">Context</h3>
             <p>${jsonViewer(log.context)}</p>
             `
               : ""
@@ -25,7 +25,7 @@ function showLogDetails(log) {
           ${
             log.breadcrumbs && log.breadcrumbs.length > 0
               ? `
-            <h3 class="mt-2">Breadcrumbs</h3>
+            <h3 class="mt-15">Breadcrumbs</h3>
             <p>${jsonViewer(log.breadcrumbs)}</p>
             `
               : ""

package/public/scripts/json-viewer.js

@@ -19,7 +19,7 @@ function jsonViewer(json, parentKey) {
   const showParentKey = parentKey && keys.length > 0; // hide an empty object
 
   if (showParentKey) {
-    res += `<div class="pl-2"><div>${parentKey}</div>`;
+    res += `<div class="pl-2"><div>&#9662; ${parentKey}</div>`;
   }
 
   for (const key of keys) {

package/public/styles/index.css

@@ -169,6 +169,9 @@ nav ul li:hover {
 .mt-1 {
   margin-top: 1rem;
 }
+.mt-15 {
+  margin-top: 1.5rem;
+}
 .mt-2 {
   margin-top: 2rem;
 }
@@ -180,6 +183,13 @@ nav ul li:hover {
   padding-left: 2rem;
 }
 
+#search {
+  outline: none;
+  padding: 0.5rem;
+  border: 1px solid var(--light);
+  font-size: 1rem;
+}
+
 /* table */
 .table-header,
 .row {
@@ -190,10 +200,10 @@ nav ul li:hover {
   align-items: center;
   justify-content: space-around;
 }
-
 .table-header {
-  display: none;
+  display: flex;
   height: 2rem;
+  justify-content: space-between;
   background-color: var(--dark);
   color: var(--white);
   margin-top: 0.5rem;
@@ -208,12 +218,10 @@ nav ul li:hover {
   flex: 0 0 5rem;
   text-align: center;
 }
-
-.table-header > :nth-child(2),
 .row > :nth-child(2) {
   flex: 0 0 auto;
+  max-width: 35rem;
 }
-.table-header > :nth-child(3),
 .row > :nth-child(3) {
   flex: 1 1 auto;
 }