@viplance/nestjs-logger 0.4.7 → 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,40 +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.');
     }
   }
@@ -244,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

@@ -21,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">

package/public/scripts/ws.js

@@ -1,8 +1,17 @@
 // 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}`);
@@ -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,24 +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();
+          handleWsUpdate(data['data']);
           break;
         case 'delete':
-          getLogs();
+          handleWsDelete(data['data']._id);
           break;
       }
     }
   };
+
+  setTimeout(() => {
+    if (!connected) connectWebSocket(); // fix for Safari browser
+  }, 300);
 }
+
 function sendMessage(message) {
   socket.send(JSON.stringify(message));
 }

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

@@ -64,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

package/src/services/log.service.ts

@@ -11,6 +11,8 @@ import {
   DataSourceOptions,
   EntityManager,
   EntitySchema,
+  Like,
+  In,
 } from 'typeorm';
 import { createLogEntity } from '../entities/log.entity';
 import { ExecutionContextHost } from '@nestjs/core/helpers/execution-context-host';
@@ -94,7 +96,12 @@ export class LogService implements LoggerService, OnApplicationShutdown {
             case 'getLogs':
               this.wsService.sendMessage({
                 action: 'list',
-                data: await this.getAll(),
+                data: await this.getAll(
+                  message.page,
+                  message.limit,
+                  message.search,
+                  message.types
+                ),
               });
               break;
             case 'delete':
@@ -159,8 +166,16 @@ export class LogService implements LoggerService, OnApplicationShutdown {
     });
   }
 
-  async getAll(): Promise<any[]> {
-    return this.getConnection().find(LogService.Log, {
+  async getAll(
+    page: number = 1,
+    limit: number = 50,
+    search: string = '',
+    types: string[] = []
+  ): Promise<any[]> {
+    const skip = (page - 1) * limit;
+    const take = limit;
+
+    const findOptions: any = {
       select: [
         '_id',
         'type',
@@ -173,7 +188,49 @@ export class LogService implements LoggerService, OnApplicationShutdown {
         'breadcrumbs',
       ],
       order: { updatedAt: 'DESC' },
-    });
+      take,
+      skip,
+    };
+
+    if (search) {
+      if (LogService.options?.database?.type === 'mongodb') {
+        const where: any = {
+          $or: [
+            { message: { $regex: search, $options: 'i' } },
+            { trace: { $regex: search, $options: 'i' } },
+          ],
+        };
+
+        if (types.length > 0) {
+          where.type = { $in: types };
+        }
+
+        findOptions.where = where;
+      } else {
+        findOptions.where = [
+          { message: Like(`%${search}%`) },
+          { trace: Like(`%${search}%`) },
+        ];
+
+        if (types.length > 0) {
+          findOptions.where.forEach((option: any) => {
+            option.type = In(types);
+          });
+        }
+      }
+    } else if (types.length > 0) {
+      if (LogService.options?.database?.type === 'mongodb') {
+        findOptions.where = {
+          type: { $in: types },
+        };
+      } else {
+        findOptions.where = {
+          type: In(types),
+        };
+      }
+    }
+
+    return this.getConnection().find(LogService.Log, findOptions);
   }
 
   async delete(_id: string) {
@@ -197,7 +254,7 @@ export class LogService implements LoggerService, OnApplicationShutdown {
     // find the same log in DB
     let log;
 
-    if (LogService.options?.join) {
+    if (LogService.options && (LogService.options.join || LogService.options.join === undefined)) {
       log = await connection.findOne(LogService.Log, {
         where: {
           type: data.type,