@viplance/nestjs-logger 0.4.5 → 0.4.8

package/public/scripts/common.js

@@ -11,6 +11,10 @@ const logTypes = Object.keys(selectedLogTypes).filter((key) => key !== `all`);
 
 let logs = [];
 let text = '';
+let currentPage = 1;
+let isLoading = false;
+let hasMore = true;
+const limit = 10;
 
 connectWebSocket();
 
@@ -36,7 +40,9 @@ document.addEventListener(`click`, (e) => {
         });
       }
 
-      renderLogs();
+      currentPage = 1;
+      hasMore = true;
+      getLogs(1);
 
       return;
     }
@@ -53,7 +59,9 @@ document.addEventListener(`click`, (e) => {
     selectedLogTypes[`all`] = false;
     unsetSelectorActive(document.querySelector(`li.all`));
 
-    getLogs();
+    currentPage = 1;
+    hasMore = true;
+    getLogs(1);
 
     return;
   }
@@ -141,24 +149,9 @@ function getLogHtmlElement(log) {
 function renderLogs(logList = logs) {
   let html = '';
 
-  logList
-    .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);
-    });
+  logList.forEach((log) => {
+    html += getLogHtmlElement(log);
+  });
 
   document.getElementById('logs').innerHTML = html;
 }
@@ -166,39 +159,79 @@ function renderLogs(logList = logs) {
 async function checkElementsVisibility(logList = logs) {
   if (logList.length === 0) {
     document.getElementById('no-logs').style.display = 'block';
-    document.getElementById('search').style.display = 'none';
     document.querySelector('.table-header').style.display = 'none';
-    document.querySelector('nav').style.display = 'none';
+    document.querySelector('nav').style.display = 'flex';
   } else {
     document.getElementById('no-logs').style.display = 'none';
-    document.getElementById('search').style.display = 'inline-block';
     document.querySelector('.table-header').style.display = 'flex';
     document.querySelector('nav').style.display = 'flex';
   }
 }
 
-async function getLogs() {
-  const { origin, pathname, search } = window.location;
-  const searchParams = new URLSearchParams(search);
+async function getLogs(page = 1) {
+  if (isLoading && page > 1) return;
+
+  if (page > 1 && !hasMore) return;
+
+  isLoading = true;
+  currentPage = page;
+  document.getElementById('loader').style.display = 'block';
+
+  const { origin, pathname, search: urlSearch } = window.location;
+  const searchParams = new URLSearchParams(urlSearch);
   const key = searchParams.get('key');
 
-  if (!!socket) {
+  const types = selectedLogTypes.all
+    ? []
+    : Object.keys(selectedLogTypes).filter(
+        (key) => selectedLogTypes[key] && key !== 'all',
+      );
+
+  if (!!socket && socket.readyState === WebSocket.OPEN) {
     socket.send(
       JSON.stringify({
         action: 'getLogs',
         key,
-      })
+        page,
+        limit,
+        search: text,
+        types,
+      }),
     );
   } else {
-    const res = await fetch(`${origin}${pathname}api${search}`);
+    const apiParams = new URLSearchParams(urlSearch);
+    apiParams.set('page', page);
+    apiParams.set('limit', limit);
+
+    if (text) {
+      apiParams.set('search', text);
+    }
+
+    if (types.length > 0) {
+      apiParams.set('types', types.join(','));
+    }
+
+    const res = await fetch(`${origin}${pathname}api?${apiParams.toString()}`);
 
     if (res.ok) {
-      logs = await res.json();
+      const newLogs = await res.json();
 
-      checkElementsVisibility();
+      if (page === 1) {
+        logs = newLogs;
+      } else {
+        logs = logs.concat(newLogs);
+      }
+
+      hasMore = newLogs.length === limit;
+      isLoading = false;
+      document.getElementById('loader').style.display = 'none';
 
+      checkElementsVisibility();
       renderLogs();
+      checkAndUpdatePopup();
     } else {
+      isLoading = false;
+      document.getElementById('loader').style.display = 'none';
       alert('An error occurred while fetching logs.');
     }
   }
@@ -220,7 +253,7 @@ async function deleteLog(_id) {
         data: {
           _id,
         },
-      })
+      }),
     );
     closePopup();
     getLogs();
@@ -231,7 +264,7 @@ async function deleteLog(_id) {
       `${origin}${pathname}api?${searchParamsWithId.toString()}`,
       {
         method: 'DELETE',
-      }
+      },
     );
 
     if (res.ok) {
@@ -243,8 +276,85 @@ async function deleteLog(_id) {
   }
 }
 
+let searchTimeout;
 function search(event) {
   text = event.target.value.toLowerCase();
 
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    currentPage = 1;
+    hasMore = true;
+    getLogs(1);
+  }, 300);
+}
+
+// Infinite scrolling
+const observer = new IntersectionObserver(
+  (entries) => {
+    if (entries[0].isIntersecting && !isLoading && hasMore) {
+      getLogs(currentPage + 1);
+    }
+  },
+  { threshold: 1.0 },
+);
+
+document.addEventListener('DOMContentLoaded', () => {
+  const scrollAnchor = document.getElementById('scroll-anchor');
+  if (scrollAnchor) {
+    observer.observe(scrollAnchor);
+  }
+});
+
+function matchesFilter(log) {
+  // Check types
+  if (!selectedLogTypes['all'] && !selectedLogTypes[log.type]) {
+    return false;
+  }
+
+  // Check search text
+  if (text !== '') {
+    const matches =
+      log.message.toLowerCase().includes(text) ||
+      log.trace?.toLowerCase().includes(text) ||
+      JSON.stringify(log.context || {})
+        .toLowerCase()
+        .includes(text);
+
+    if (!matches) return false;
+  }
+
+  return true;
+}
+
+function handleWsInsert(log) {
+  if (matchesFilter(log)) {
+    logs.unshift(log);
+    checkElementsVisibility();
+    renderLogs();
+  }
+}
+
+function handleWsUpdate(updatedLog) {
+  const idx = logs.findIndex((l) => l._id === updatedLog._id);
+  if (idx > -1) {
+    logs.splice(idx, 1);
+  }
+
+  if (matchesFilter(updatedLog)) {
+    logs.unshift(updatedLog);
+  }
+
+  checkElementsVisibility();
   renderLogs();
+  checkAndUpdatePopup();
+}
+
+function handleWsDelete(id) {
+  const idx = logs.findIndex((l) => l._id === id);
+  if (idx > -1) {
+    logs.splice(idx, 1);
+    checkElementsVisibility();
+    renderLogs();
+    checkAndUpdatePopup();
+  }
 }

package/public/scripts/details-popup.js

@@ -1,6 +1,9 @@
 const popup = document.getElementById('popup');
+let selectedLogId = null;
 
 function showLogDetails(log) {
+  selectedLogId = log._id;
+
   const context = getObject(log.context);
   const breadcrumbs = getObject(log.breadcrumbs);
 
@@ -18,8 +21,8 @@ function showLogDetails(log) {
         )}.   First seen: ${getDate(log.createdAt)}`;
 
   popup.innerHTML = `
-    <div id="drag-handle" style="margin: -2rem -2rem 1rem -2rem; height: 1.5rem; background-color: #f1f1f1; border-bottom: 1px solid #ddd; cursor: grab; display: flex; align-items: center; justify-content: center;" title="Drag to move">
-        <div style="width: 50px; height: 5px; background-color: #ccc; border-radius: 5px;"></div>
+    <div id="drag-handle" title="Drag to move">
+        <div class="handle-indicator"></div>
     </div>
     <div class="content center">
       <div class="container">
@@ -117,9 +120,21 @@ function getTrace(trace) {
 }
 
 function closePopup() {
+  selectedLogId = null;
   popup.style.display = 'none';
 }
 
+function checkAndUpdatePopup() {
+  if (selectedLogId) {
+    const log = logs.find((log) => log._id === selectedLogId);
+    if (log) {
+      showLogDetails(log);
+    } else {
+      closePopup();
+    }
+  }
+}
+
 function setPopupLeft(left) {
   if (popup?.style.display === 'block') {
     if (left < 0) {

package/public/scripts/local-storage.js

@@ -1,10 +1,14 @@
 const LS_KEY = 'nestjs-logger';
 
+const defaultSettings = {
+  popupLeft: `${window.innerWidth / 4}px`,
+};
+
 function getLs(propertyName) {
   const item = localStorage.getItem(LS_KEY);
 
   if (!item) {
-    return;
+    return defaultSettings[propertyName];
   }
 
   return JSON.parse(item)[propertyName];
@@ -12,12 +16,8 @@ function getLs(propertyName) {
 
 function setLs(propertyName, value) {
   const item = localStorage.getItem(LS_KEY);
+  const ls = item ? JSON.parse(item) : { ...defaultSettings };
 
-  if (!item) {
-    localStorage.setItem(LS_KEY, JSON.stringify({}));
-  }
-
-  const ls = JSON.parse(item);
   ls[propertyName] = value;
   localStorage.setItem(LS_KEY, JSON.stringify(ls));
 }

package/public/scripts/ws.js

@@ -1,15 +1,24 @@
 // WebSocket connection
 let socket;
+let connected = false;
+let connectionAttempts = 0;
 let frozen = false;
 
 async function connectWebSocket() {
+  connectionAttempts++;
+
+  if (connectionAttempts > 3) {
+    alert('Failed to connect to WebSocket. Check the `key` url parameter.');
+    return;
+  }
+
   const { hostname, origin, pathname, search } = window.location;
 
   const res = await fetch(`${origin}${pathname}settings${search}`);
 
   if (!res.ok) {
     alert(
-      'An error occurred while fetching settings. Check the `key` url parameter.'
+      'An error occurred while fetching settings. Check the `key` url parameter.',
     );
     return;
   }
@@ -39,11 +48,14 @@ async function connectWebSocket() {
   };
 
   socket.onopen = (event) => {
+    connected = true;
+    connectionAttempts = 0;
     getLogs();
   };
 
   socket.onclose = (event) => {
-    console.log(event);
+    connected = false;
+    console.error(event);
     setTimeout(connectWebSocket, 5000);
   };
 
@@ -53,22 +65,38 @@ async function connectWebSocket() {
     if (data['action'] && !frozen) {
       switch (data['action']) {
         case 'list':
-          logs = data['data'];
+          if (currentPage === 1) {
+            logs = data['data'];
+          } else {
+            logs = logs.concat(data['data']);
+          }
+          hasMore = data['data'].length === limit;
+          isLoading = false;
+          document.getElementById('loader').style.display = 'none';
           checkElementsVisibility(logs);
           renderLogs(logs);
+          checkAndUpdatePopup();
           break;
         case 'insert':
-          getLogs();
+          if (currentPage === 1) {
+            handleWsInsert(data['data']);
+          }
           break;
         case 'update':
-          getLogs();
-          return;
+          handleWsUpdate(data['data']);
+          break;
         case 'delete':
-          return;
+          handleWsDelete(data['data']._id);
+          break;
       }
     }
   };
+
+  setTimeout(() => {
+    if (!connected) connectWebSocket(); // fix for Safari browser
+  }, 300);
 }
+
 function sendMessage(message) {
   socket.send(JSON.stringify(message));
 }
@@ -84,5 +112,6 @@ function toggleFreeze() {
   } else {
     button.classList.remove('light');
     button.classList.add('white');
+    getLogs();
   }
 }

package/public/styles/index.css

@@ -54,7 +54,7 @@ h3 {
 }
 
 #logs {
-  margin-top: 4rem;
+  margin-top: 7rem;
 }
 
 #no-logs {
@@ -63,6 +63,18 @@ h3 {
   text-align: center;
 }
 
+#loader {
+  display: none;
+  text-align: center;
+  padding: 1rem;
+  color: var(--teal);
+  font-weight: bold;
+}
+
+#scroll-anchor {
+  height: 20px;
+}
+
 /* buttons */
 button {
   display: flex;
@@ -316,7 +328,27 @@ nav ul li:hover {
   overflow-y: scroll;
   z-index: 1;
   opacity: 0.97;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+#drag-handle {
+  margin: -2rem -2rem 1rem -2rem;
+  height: 1.5rem;
+  background-color: #f1f1f1;
+  border-bottom: 1px solid #ddd;
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#drag-handle .handle-indicator {
+  width: 50px;
+  height: 5px;
+  background-color: #ccc;
+  border-radius: 5px;
 }
 
 /* JSON viewer */
@@ -347,3 +379,146 @@ nav ul li:hover {
     box-shadow: none;
   }
 }
+
+@media (max-width: 768px) {
+  /* Allow header to flow naturally */
+  header {
+    position: relative !important;
+    padding-bottom: 1rem;
+    height: auto;
+  }
+
+  /* Reset logo from previous media query */
+  .logo {
+    width: 100%;
+    margin: 0 !important;
+    justify-content: center;
+  }
+
+  /* Show title again for branding */
+  .logo h2 {
+    display: block !important;
+    margin-left: 0.5rem;
+    font-size: 1.2rem;
+  }
+
+  /* Wrap controls */
+  .controls {
+    flex-wrap: wrap;
+    padding: 0 1rem;
+  }
+
+  /* Nav */
+  nav {
+    width: 100%;
+    order: 2;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+    -webkit-overflow-scrolling: touch;
+    margin-top: 1rem;
+    height: 2rem;
+  }
+
+  nav ul {
+    width: max-content;
+    padding: 0 0.5rem;
+    gap: 1.5rem;
+    justify-content: flex-start;
+  }
+
+  /* Search */
+  #search {
+    order: 3;
+    width: 100%;
+    margin-bottom: 1rem;
+    box-sizing: border-box;
+  }
+
+  /* Buttons */
+  #refresh,
+  #freeze {
+    order: 4;
+    width: 48%;
+  }
+
+  #refresh button,
+  #freeze button {
+    width: 100%;
+    justify-content: center;
+    padding: 10px;
+    margin-bottom: 1rem;
+  }
+
+  /* Logs Container */
+  #logs {
+    margin-top: 0;
+  }
+
+  /* Hide Table Header */
+  .table-header {
+    display: none;
+  }
+
+  /* Row Layout */
+  .row {
+    flex-wrap: wrap;
+    height: auto;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--light);
+    align-items: flex-start;
+  }
+
+  .row:hover {
+    border-left: 2px solid transparent;
+    background-color: transparent;
+  }
+
+  .row:active {
+    background-color: #f5f5f5;
+  }
+
+  /* Type */
+  .row > :first-child {
+    flex: 0 0 3.5rem;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding-left: 0.5rem;
+    text-align: left;
+  }
+
+  /* Info */
+  .row > :nth-child(2) {
+    flex: 1 1 auto;
+    max-width: calc(100% - 6.5rem);
+    padding: 0 0.5rem;
+  }
+
+  .log-info {
+    white-space: normal;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 2.8rem;
+    margin-bottom: 0.2rem;
+  }
+
+  /* Hide Context */
+  .row > :nth-child(3) {
+    display: none;
+  }
+
+  /* Count */
+  .row > :last-child {
+    flex: 0 0 2rem;
+    font-size: 0.8rem;
+    color: #aaa;
+    text-align: right;
+    padding-right: 0.5rem;
+  }
+
+  #drag-handle {
+    display: none;
+  }
+}

package/src/log.module.ts

@@ -27,10 +27,8 @@ export class LogModule {
     app: any,
     options?: LogModuleOptions
   ): Promise<void> {
-    app.resolve(LogService);
-
-    const logService: LogService = await app.resolve(LogService);
-    const wsService: WsService = await app.resolve(WsService);
+    const logService: LogService = await app.get(LogService);
+    const wsService: WsService = await app.get(WsService);
     const logAccessGuard: LogAccessGuard = await app.get(LogAccessGuard);
 
     if (options) {
@@ -66,11 +64,17 @@ export class LogModule {
         }
       );
 
-      // get all logs endpoint
+      // get logs endpoint
       httpAdapter.get(join(options.path, 'api'), async (req: any, res: any) => {
         logAccessGuard.canActivate(req);
 
-        res.json(await logService.getAll());
+        const params = querystring.parse(req.url.split('?')[1]);
+        const page = params.page ? parseInt(params.page.toString()) : 1;
+        const limit = params.limit ? parseInt(params.limit.toString()) : 50;
+        const search = params.search ? params.search.toString() : '';
+        const types = params.types ? params.types.toString().split(',') : [];
+
+        res.json(await logService.getAll(page, limit, search, types));
       });
 
       // delete log endpoint