Test Migration Logger screen completed

api/src/server.ts

@@ -55,7 +55,7 @@ try {
       logger.info(`Server listening at port ${config.PORT}`)
     );
     // Chokidar - Watch for log file changes
-    const logFilePath = "/Users/rohit/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
+    const logFilePath = "/Users/sayali.joshi/Projects/migration-v2-node-server/api/combine.log"; // Replace with the actual path to your log file
     const watcher = chokidar.watch(logFilePath);
     // Socket.IO - Send logs to client
     const io = new Server(

ui/public/index.html

@@ -21,18 +21,18 @@
       crossorigin="anonymous"
     />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="preload"
       as="style"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
     />
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap"
       rel="stylesheet"
     />
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="https://ui.contentstack.com/contentstack.min.css" />
     <script

ui/src/components/LogScreen/index.scss

@@ -2,24 +2,64 @@
 
 .logs-container {
   font-family: Arial, sans-serif;
+  background-color: $color-base-white-5;
+  border: 1px solid #EDF1F7;
+  border-radius: 8px;
+  margin: 0 $px-24 $px-24;
+  position: relative;
 }
+.logs-wrapper {
+  position: relative;
+  .action-items {
+    position: absolute;
+    right: 48px;
+    top: 24px;
+  }
+}
+
 
 .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;
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 50px;
+  }
+
+  .log-number, .log-time, .log-message {
+    font-family: "IBM Plex Mono", monospace;
+    font-size: $size-font-medium;
+    font-weight: $font-weight-medium;
+  }
+}
+
+.log-number {
+  text-align: center;
+  min-width: 50px;
+  color: $color-font-active;
+  position: relative;
 }
 
 .log-time {
-  font-weight: bold;
-  margin-right: 8px;
-  color: #333;
-  padding-right: 5px;
+  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;
-  color: #555;
-}
-
-.log-entry:nth-child(odd) {
-  background-color: #f9f9f9;
+  padding: 0 $px-16;
 }

ui/src/components/LogScreen/index.tsx

@@ -1,22 +1,32 @@
-import React, { useEffect, useState } from 'react';
-import { PageLayout, PageTitle, Button } from '@contentstack/venus-components';
+// Libraries
+import React, { useEffect, useState, useRef } from 'react';
+import { Icon } from '@contentstack/venus-components';
 import io from 'socket.io-client';
+
+// CSS
 import './index.scss';
+
 const logStyles: { [key: string]: React.CSSProperties } = {
   info: { backgroundColor: '#f1f1f1' },
   warn: { backgroundColor: '#ffeeba', color: '#856404' },
   error: { backgroundColor: '#f8d7da', color: '#721c24' },
   success: { backgroundColor: '#d4edda', color: '#155724' },
 };
 
-const LogViewer = () => {
+type LogsType = {
+  serverPath: string;
+}
+
+const LogViewer = ({serverPath}: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
 
   useEffect(() => {
-    const socket = io('http://localhost:5000'); // Connect to the server
+    const socket = io(serverPath || ''); // Connect to the server
     socket.on('logUpdate', (newLogs: string) => {
+      console.log("new logs", newLogs);
+
       const logArray = newLogs.split('\n');
-      // console.log(logArray);
+      console.log(logArray);
       setLogs(logArray);
 
     });
@@ -25,57 +35,46 @@ const LogViewer = () => {
       socket.disconnect(); // Cleanup on component unmount
     };
   }, []);
+
+  //SCROLL LISTENER
+  useEffect(() => {
+    window.addEventListener("scroll", handleScrollToTop);
+  });
 
-return(
-<div
-  style={{
-    height: '100vh',
-    overflow: 'auto',
-    transform: 'scale(0.6)',
-    width: '100vw'
-  }}
->
-  <PageLayout
-    content={{
-      component: <div style={{height: '600px', padding: '20px 0', textAlign: 'center'}}>List Data</div>
-    }}
-    footer={{
-      // component: <div className="flex-justify flex-v-center"><div>2020 Contentstack. All rights reserved. Support | Privacy | Terms</div><div><Button buttonType="primary">Save</Button></div></div>
-    }}
-    header={{
-      // backNavigation: function noRefCheck(){},
-      component: <h2>Logs</h2>,
-    }}
-    type="edit"
-    // version="v1"
-  />
-</div>
-)
-  // return (
-  //   <div style={{ fontFamily: 'monospace' }}>
-  //     <h2>Execution Logs</h2>
-  //     <div className="logs-container" style={{ height: '400px', overflowY: 'scroll' }}>
-  //       {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">
-  //               <span className="log-time">{index}</span>
-  //               <span className="log-time">{new Date(timestamp).toTimeString().split(' ')[0]}</span>
-  //               <span className="log-message">{message}</span>
-  //             </div>
-  //           );
-  //         } catch (error) {
-  //           console.error('Invalid JSON string', error);
-  //         }
-  //       })}
-  //     </div>
-  //     </div>
-  // );
+  const refScrollUp = useRef<HTMLDivElement>(null);
+  const handleScrollToTop = () => {
+    console.log("=============", refScrollUp, refScrollUp?.current);
+
+    refScrollUp?.current?.scrollIntoView({ behavior: "smooth" });
+  }
+  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>
+      <div className='action-items'>
+        <Icon icon="ArrowUp" version='v2' onClick={handleScrollToTop} />
+      </div>
+    </div>
+  );
 };
 
 export default LogViewer;

ui/src/components/TestMigration/index.scss

@@ -1,11 +1,8 @@
 @import '../../scss/App.scss';
 @import '../../scss/variables';
 
-
-
-
-
-
-
-
-
+.migration-step-container {
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}

ui/src/components/TestMigration/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { Field, FieldLabel, TextInput, Link, Icon, Tooltip } from '@contentstack/venus-components';
 import { useSelector } from 'react-redux';
 
@@ -12,6 +11,12 @@ import { CS_ENTRIES } from '../../utilities/constants';
 // Interface
 import { MigrationType } from './testMigration.interface';
 
+// Component
+import LogViewer from '../LogScreen';
+
+// CSS
+import './index.scss';
+
 const TestMigration = () => {
   const [data, setData] = useState<MigrationType>({});
 
@@ -30,7 +35,7 @@ const TestMigration = () => {
   }, []);
 
   return (
-    <div className='step-content-wrapper'>
+    <div className='migration-step-container'>
       <div className='content-block'>
         <div className='content-header text-uppercase'>UID</div>
         <div className='content-body'>
@@ -74,7 +79,7 @@ const TestMigration = () => {
       <div className='content-block'>
         <div className='content-header'>Execution Logs</div>
         <div>
-
+          <LogViewer serverPath="http://localhost:5001" />
         </div>
       </div>
     </div>

ui/src/pages/Home/index.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '@contentstack/venus-components';
 import parse from 'html-react-parser';
-import LogViewer from '../../components/LogScreen';
+
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 
@@ -45,7 +45,6 @@ const Home = () => {
           </Button>
         </Link>
       )}
-      <LogViewer/>
     </div>
   );
 };