logger magnify demagnify functionality

api/src/config/dev.config.ts

@@ -10,4 +10,6 @@ export const devConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
-};
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
+};

api/src/config/prod.config.ts

@@ -11,4 +11,6 @@ export const prodConfig = {
     AZURE_NA: "https://azure-na-app.contentstack.com/#!",
     AZURE_EU: "https://azure-eu-app.contentstack.com/#!",
   },
+  LOG_FILE_PATH:
+    process.platform === "win32" ? ".\\combine.log" : "./combine.log", // Replace with the actual path to your log file
 };

api/src/server.ts

@@ -20,6 +20,7 @@ import chokidar from "chokidar";
 import { Server } from "socket.io";
 import http from "http";
 import fs from "fs";
+
 try {
   const app = express();
   app.use(
@@ -55,9 +56,17 @@ try {
       logger.info(`Server listening at port ${config.PORT}`)
     );
     // Chokidar - Watch for log file changes
-    const logFilePath = "/Users/sayali.joshi/Projects/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
+    const logFilePath = config.LOG_FILE_PATH;
     const watcher = chokidar.watch(logFilePath);
     // Socket.IO - Send logs to client
+    /**
+     * The Socket.IO server instance.
+     *
+     * @remarks
+     * This server instance is responsible for handling real-time communication between the client and the server using the Socket.IO library.
+     *
+     * @type {Server}
+     */
     const io = new Server(
       server,
       (http,
@@ -94,4 +103,4 @@ try {
 } catch (e) {
   logger.error("Error while starting the server!");
   logger.error(e);
-}
+}

ui/src/common/assets/icons.tsx

@@ -770,4 +770,21 @@ export const LOG_OUT = (
   <path fillRule="evenodd" clipRule="evenodd" d="M9.1875 12C9.1875 11.6893 9.43934 11.4375 9.75 11.4375H20.25C20.5607 11.4375 20.8125 11.6893 20.8125 12C20.8125 12.3107 20.5607 12.5625 20.25 12.5625H9.75C9.43934 12.5625 9.1875 12.3107 9.1875 12Z" fill="#475161"/>
   <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4.3125C4.45027 4.3125 4.40258 4.33225 4.36742 4.36742C4.33225 4.40258 4.3125 4.45027 4.3125 4.5V19.5C4.3125 19.5497 4.33225 19.5974 4.36742 19.6326C4.40258 19.6677 4.45027 19.6875 4.5 19.6875H9.75C10.0607 19.6875 10.3125 19.9393 10.3125 20.25C10.3125 20.5607 10.0607 20.8125 9.75 20.8125H4.5C4.1519 20.8125 3.81806 20.6742 3.57192 20.4281C3.32578 20.1819 3.1875 19.8481 3.1875 19.5V4.5C3.1875 4.1519 3.32578 3.81806 3.57192 3.57192C3.81806 3.32578 4.1519 3.1875 4.5 3.1875H9.75C10.0607 3.1875 10.3125 3.43934 10.3125 3.75C10.3125 4.06066 10.0607 4.3125 9.75 4.3125H4.5Z" fill="#475161"/>
   </svg>
-);  
+);  
+
+export const MAGNIFY = (
+<svg width="20" height="20" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.625 11.25C13.625 11.0429 13.4571 10.875 13.25 10.875C13.0429 10.875 12.875 11.0429 12.875 11.25V12.875H11.25C11.0429 12.875 10.875 13.0429 10.875 13.25C10.875 13.4571 11.0429 13.625 11.25 13.625H12.875V15.25C12.875 15.4571 13.0429 15.625 13.25 15.625C13.4571 15.625 13.625 15.4571 13.625 15.25V13.625H15.25C15.4571 13.625 15.625 13.4571 15.625 13.25C15.625 13.0429 15.4571 12.875 15.25 12.875H13.625V11.25Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M7.625 13.25C7.625 10.1434 10.1434 7.625 13.25 7.625C16.3566 7.625 18.875 10.1434 18.875 13.25C18.875 14.6683 18.3501 15.9641 17.4838 16.9535L20.2652 19.7349C20.4116 19.8813 20.4116 20.1187 20.2652 20.2652C20.1187 20.4116 19.8813 20.4116 19.7349 20.2652L16.9535 17.4838C15.9641 18.3501 14.6683 18.875 13.25 18.875C10.1434 18.875 7.625 16.3566 7.625 13.25ZM13.25 8.375C10.5576 8.375 8.375 10.5576 8.375 13.25C8.375 15.9424 10.5576 18.125 13.25 18.125C15.9424 18.125 18.125 15.9424 18.125 13.25C18.125 10.5576 15.9424 8.375 13.25 8.375Z" fill="#475161"/>
+</svg>
+);
+
+export const DEMAGNIFY = (
+  <svg width="20" height="20" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.25 13.625H15.25C15.4571 13.625 15.625 13.4571 15.625 13.25C15.625 13.0429 15.4571 12.875 15.25 12.875H11.25C11.0429 12.875 10.875 13.0429 10.875 13.25C10.875 13.4571 11.0429 13.625 11.25 13.625Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M7.625 13.25C7.625 10.1434 10.1434 7.625 13.25 7.625C16.3566 7.625 18.875 10.1434 18.875 13.25C18.875 14.6683 18.3501 15.9641 17.4838 16.9535L20.2652 19.7349C20.4116 19.8813 20.4116 20.1187 20.2652 20.2652C20.1187 20.4116 19.8813 20.4116 19.7349 20.2652L16.9535 17.4838C15.9641 18.3501 14.6683 18.875 13.25 18.875C10.1434 18.875 7.625 16.3566 7.625 13.25ZM13.25 8.375C10.5576 8.375 8.375 10.5576 8.375 13.25C8.375 15.9424 10.5576 18.125 13.25 18.125C15.9424 18.125 18.125 15.9424 18.125 13.25C18.125 10.5576 15.9424 8.375 13.25 8.375Z" fill="#475161"/>
+</svg>
+
+);
+
+

ui/src/components/LogScreen/index.scss

@@ -1,4 +1,7 @@
 @import '../../scss/variables';
+/**
+ * Styles for the LogScreen component.
+ */
 
 .logs-container {
   font-family: Arial, sans-serif;
@@ -8,22 +11,30 @@
   margin: 0 $px-24 $px-24;
   position: relative;
 }
+
 .logs-wrapper {
   position: relative;
+
+  /**
+   * Styles for the action items within the LogScreen component.
+   */
   .action-items {
     position: absolute;
     right: 48px;
     top: 24px;
   }
 }
 
-
+/**
+ * Styles for each log entry within the LogScreen component.
+ */
 .log-entry {
   align-items: center;
   background-color: $color-base-white-10;
   display: flex;
   padding: 5px 0;
   position: relative;
+
   &::before {
     background-color: $color-base-white-5;
     border-right: 1px solid $color-brand-secondary-lightest;
@@ -36,30 +47,33 @@
     width: 50px;
   }
 
-  .log-number, .log-time, .log-message {
+  /**
+   * Styles for the log number within each log entry.
+   */
+  .log-number {
+    text-align: center;
+    min-width: 50px;
+    color: $color-font-active;
+    position: relative;
+  }
+
+  /**
+   * Styles for the log time within each log entry.
+   */
+  .log-time {
+    color: $color-font-active;
     font-family: "IBM Plex Mono", monospace;
     font-size: $size-font-medium;
     font-weight: $font-weight-medium;
+    padding: 0 $px-16;
   }
-}
-
-.log-number {
-  text-align: center;
-  min-width: 50px;
-  color: $color-font-active;
-  position: relative;
-}
-
-.log-time {
-  color: $color-font-active;
-  font-family: "IBM Plex Mono", monospace;
-  font-size: $size-font-medium;
-  font-weight: $font-weight-medium;
-  padding: 0 $px-16;
-}
-
-.log-message {
-  color: $color-black-222;
-  flex-grow: 1;
-  padding: 0 $px-16;
-}
+
+  /**
+   * Styles for the log message within each log entry.
+   */
+  .log-message {
+    color: $color-black-222;
+    flex-grow: 1;
+    padding: 0 $px-16;
+  }
+}

ui/src/components/LogScreen/index.tsx

@@ -1,11 +1,13 @@
 // Libraries
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Icon } from '@contentstack/venus-components';
 import io from 'socket.io-client';
 
 // CSS
 import './index.scss';
 
+import { MAGNIFY,DEMAGNIFY } from '../../common/assets';
+
 const logStyles: { [key: string]: React.CSSProperties } = {
   info: { backgroundColor: '#f1f1f1' },
   warn: { backgroundColor: '#ffeeba', color: '#856404' },
@@ -17,61 +19,128 @@ type LogsType = {
   serverPath: string;
 }
 
-const LogViewer = ({serverPath}: LogsType) => {
+/**
+ * LogViewer component displays logs received from the server.
+ * @param {string} serverPath - The path of the server to connect to.
+ */
+const LogViewer = ({ serverPath }: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
 
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
+
+    /**
+     * Event listener for 'logUpdate' event.
+     * @param {string} newLogs - The new logs received from the server.
+     */
     socket.on('logUpdate', (newLogs: string) => {
-      console.log("new logs", newLogs);
-
+      // console.log("new logs", newLogs);
       const logArray = newLogs.split('\n');
-      console.log(logArray);
+      // console.log(logArray);
       setLogs(logArray);
-
     });
-  
+
     return () => {
       socket.disconnect(); // Cleanup on component unmount
     };
   }, []);
-
-  //SCROLL LISTENER
-  useEffect(() => {
-    window.addEventListener("scroll", handleScrollToTop);
-  });
 
-  const refScrollUp = useRef<HTMLDivElement>(null);
+  /**
+   * Scrolls to the top of the logs container.
+   */
   const handleScrollToTop = () => {
-    console.log("=============", refScrollUp, refScrollUp?.current);
-
-    refScrollUp?.current?.scrollIntoView({ behavior: "smooth" });
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  /**
+   * Scrolls to the bottom of the logs container.
+   */
+  const handleScrollToBottom = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      logsContainer.scrollTo({
+        top: logsContainer.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
   }
+
+  /**
+   * Copies the logs to the clipboard.
+   */
+  const handleCopyLogs = () => {
+    const logsContainer = document.querySelector('.logs-container');
+    if (logsContainer) {
+      const range = document.createRange();
+      range.selectNode(logsContainer);
+      window.getSelection()?.removeAllRanges();
+      window.getSelection()?.addRange(range);
+      navigator.clipboard.writeText(logsContainer.textContent || '');
+      window.getSelection()?.removeAllRanges();
+    }
+  }
+
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  /**
+   * Zooms in the logs container.
+   */
+  const handleZoomIn = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel + 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
+  /**
+   * Zooms out the logs container.
+   */
+  const handleZoomOut = () => {
+    const logsContainer = document.querySelector('.logs-magnify') as HTMLElement;
+    if (logsContainer) {
+      setZoomLevel(prevZoomLevel => prevZoomLevel - 0.1);
+      logsContainer.style.transform = `scale(${zoomLevel})`;
+    }
+  };
+
   return (
     <div className='logs-wrapper'>
       <div className="logs-container" style={{ height: '400px', overflowY: 'auto' }}>
-        {logs?.map((log, index) => {
-          console.log(log);
-          try {
-            const logObject = JSON.parse(log);
-            const level = logObject.level;
-            const timestamp = logObject.timestamp;
-            const message = logObject.message;
-            return (
-              <div key={index} style={logStyles[level] || logStyles.info} className="log-entry" ref={index === 0 ? refScrollUp : null}>
-                <div className="log-number">{index}</div>
-                <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
-                <div className="log-message">{message}</div>
-              </div>
-            );
-          } catch (error) {
-            console.error('Invalid JSON string', error);
-          }
-        })}
-
+        <div className="logs-magnify">
+          {logs?.map((log, index) => {
+            // console.log(log);
+            try {
+              const logObject = JSON.parse(log);
+              const level = logObject.level;
+              const timestamp = logObject.timestamp;
+              const message = logObject.message;
+              return (
+                <div key={index} style={logStyles[level] || logStyles.info} className="log-entry">
+                  <div className="log-number">{index}</div>
+                  <div className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</div>
+                  <div className="log-message">{message}</div>
+                </div>
+              );
+            } catch (error) {
+              console.error('Invalid JSON string', error);
+            }
+          })}
+        </div>
       </div>
       <div className='action-items'>
         <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />
+        <Icon icon="ArrowDown" version='v2' onClick={handleScrollToBottom} />
+        <span onClick={handleZoomIn}>{MAGNIFY}</span>
+        <span onClick={handleZoomOut}>{DEMAGNIFY}</span>
+        <Icon icon="ZoomOut" version='v2' onClick={handleZoomOut} />
+        <Icon icon="File" version='v2' onClick={handleCopyLogs} />
       </div>
     </div>
   );