Migration Execution logs added

ui/src/components/LegacyCms/legacyCms.scss

@@ -73,7 +73,7 @@
   flex-direction: column;
   justify-content: center;
   background-color: $color-base-white-5;
-  height: 72px;
+  min-height: 72px;
   width: 592px;
   margin-left: 20px !important;
   border: 1px solid $color-brand-secondary-lightest;

ui/src/components/LogScreen/index.scss

@@ -5,7 +5,7 @@
 
 .logs-container {
   font-family: Arial, sans-serif;
-  background-color: $color-base-white-5;
+  background-color: rgb(241, 241, 241);
   border: 1px solid #EDF1F7;
   border-radius: 8px;
   margin: 0 $px-24 $px-24;
@@ -19,6 +19,7 @@
    * Styles for the action items within the LogScreen component.
    */
   .action-items {
+    background-color: rgb(241, 241, 241);
     position: absolute;
     right: 48px;
     top: 24px;
@@ -31,7 +32,11 @@
 .log-entry {
   align-items: center;
   background-color: $color-base-white-10;
+  color: $color-base-black-base;
   display: flex;
+  font-family: "IBM Plex Mono", monospace;
+  font-size: $size-font-medium;
+  font-weight: $font-weight-medium;
   padding: 5px 0;
   position: relative;
 
@@ -53,26 +58,20 @@
   .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;
   }
 
   /**
    * 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,7 +1,15 @@
 // Libraries
 import React, { useEffect, useState, useRef } from 'react';
-import { Icon } from '@contentstack/venus-components';
+import { Icon, Notification } from '@contentstack/venus-components';
 import io from 'socket.io-client';
+import { useSelector, useDispatch } from 'react-redux';
+
+// Redux files
+import { RootState } from '../../store';
+import { updateNewMigrationData } from '../../store/slice/migrationDataSlice';
+
+// Interface
+import { INewMigration } from '../../context/app/app.interface';
 
 // CSS
 import './index.scss';
@@ -17,14 +25,21 @@ const logStyles: { [key: string]: React.CSSProperties } = {
 
 type LogsType = {
   serverPath: string;
+  isMigrationStarted?: boolean;
+  sendDataToParent?: (isMigrationStarted: boolean) => void | undefined;
 }
 
 /**
  * LogViewer component displays logs received from the server.
  * @param {string} serverPath - The path of the server to connect to.
  */
-const LogViewer = ({ serverPath }: LogsType) => {
+const LogViewer = ({ serverPath, sendDataToParent }: LogsType) => {
   const [logs, setLogs] = useState(["Loading logs..."]);
+  const [isMigrationComplete, setIsMigrationComplete] = useState<boolean>(false);
+
+  const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData);
+
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const socket = io(serverPath || ''); // Connect to the server
@@ -116,6 +131,36 @@ const LogViewer = ({ serverPath }: LogsType) => {
     if (logsContainerRef.current) {
       logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
     }
+
+    logs?.forEach((log) => {
+      try {
+        const logObject = JSON.parse(log);
+        const message = logObject.message;
+
+        if (message === "Test Migration Process Completed") {
+          Notification({
+            notificationContent: { text: 'Test Migration completed successfully' },
+            notificationProps: {
+              position: 'bottom-center',
+              hideProgressBar: true
+            },
+            type: 'success'
+          });
+          sendDataToParent?.(false);
+          setIsMigrationComplete(true);
+
+          const newMigrationDataObj: INewMigration = {
+            ...newMigrationData,
+            test_migration: { ...newMigrationData?.test_migration, isMigrationComplete: true }
+          };
+
+          dispatch(updateNewMigrationData((newMigrationDataObj)));
+
+        }
+      } catch (error) {
+        console.error('Invalid JSON string', error);
+      }
+    });
   }, [logs]);
 
   return (

ui/src/components/MigrationExecution/index.tsx

@@ -16,6 +16,9 @@ import { validateArray } from '../../utilities/functions';
 // Interface
 import { DEFAULT_MIGRATION_EXECUTION } from '../../context/app/app.interface';
 
+// Component
+import LogViewer from '../LogScreen';
+
 //stylesheet
 import './index.scss';
 
@@ -77,10 +80,9 @@ const MigrationExecution = () => {
         <CircularLoader />
       </div>
     </div>
-    : <div className='step-content-wrapper'>
+    : <div className='migration-step-container'>
       <div className='content-block'>
-        <div className='content-header'>Path</div>
-        <div className='content-body step-desc'>Select your organization maintained on Contentstack.</div>
+        <div className='content-body step-desc'>We have Uploaded CMS, Organization, Selected stack and locale. The actual migration process can be started here.</div>
         <div className='content-body'>
           <div className='select-wrapper'>
             {MigrationInformation &&
@@ -108,6 +110,13 @@ const MigrationExecution = () => {
           </div>
         </div>
       </div>
+
+      <div className='content-block'>
+        <div className='content-header'>Execution Logs</div>
+        <div>
+          <LogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} />
+        </div>
+      </div>
     </div>
   );
 };

ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx

@@ -190,7 +190,9 @@ const HorizontalStepper = forwardRef(
                         !stepsCompleted.includes(idx) && idx !== showStep && !stepsCompleted?.includes(idx - 1)
                             ? 'disableEvents'
                             : '';
-                    const completeDisable = stepsCompleted?.includes(idx) && stepIndex === steps?.length - 1 ? 'completed disableEvents' : '';
+
+                    const currentTestStack = newMigrationData?.testStacks?.find((stack) => stack?.stackUid === newMigrationData?.test_migration?.stack_api_key);
+                    const completeDisable = stepsCompleted?.includes(idx) && currentTestStack?.isMigrated === true && newMigrationData?.test_migration?.isMigrationComplete === false ? 'disableEvents' : '';
                     return (
                         <React.Fragment key={id}>
                             <div className="stepWrapperContainer">

ui/src/components/TestMigration/index.tsx

@@ -18,7 +18,7 @@ import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
 import { MigrationType } from './testMigration.interface';
-import { INewMigration, TestStacks } from '../../context/app/app.interface';
+import { INewMigration } from '../../context/app/app.interface';
 
 
 // Component
@@ -91,11 +91,19 @@ const TestMigration = () => {
 
     if (res?.status === 200) {
       setIsStackLoading(false);
+      Notification({
+        notificationContent: { text: 'Test Stack created successfully' },
+        notificationProps: {
+          position: 'bottom-center',
+          hideProgressBar: true
+        },
+        type: 'success'
+      });
 
 
       const newMigrationDataObj: INewMigration = {
         ...newMigrationData,
-        test_migration: { stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
+        test_migration: { ...newMigrationData?.test_migration, stack_link: res?.data?.data?.url, stack_api_key: res?.data?.data?.data?.stack?.api_key }
       };
 
       dispatch(updateNewMigrationData((newMigrationDataObj)));
@@ -108,11 +116,27 @@ const TestMigration = () => {
       projectId
     );
 
+    console.log("testRes", testRes);
+
+
     if (testRes?.status === 200) {
-      setIsMigrationStarted(true);
+      handleMigrationState(true);
+      Notification({
+        notificationContent: { text: 'Test Migration started' },
+        notificationProps: {
+          position: 'bottom-center',
+          hideProgressBar: false
+        },
+        type: 'message'
+      });
     }
   }
 
+  // Function to update the parent state
+  const handleMigrationState = (newState: boolean) => {
+    setIsMigrationStarted(newState);
+} ;
+
   return (
     isLoading || newMigrationData?.isprojectMapped
       ? <div className="row">
@@ -122,14 +146,13 @@ const TestMigration = () => {
     </div>
     : <div className='migration-step-container'>
       <div className='content-block'>
-        <div className='content-header text-uppercase'>UID</div>
         <div className='content-body'>
           <p>Test Migration is a step where some content types are migrated in a test stack for review. A user can verify the stack and data. If the data is migrated properly then it can proceed with the final Migration Execution process.</p>
           <Button
             className="mt-3"
             onClick={handleCreateTestStack}
             version="v2"
-            disabled={newMigrationData?.testStacks?.some((stack: TestStacks) => stack?.isMigrated === false)}
+            disabled={newMigrationData?.test_migration?.stack_api_key}
             isLoading={isStackLoading}
           >
             Create Test Stack
@@ -183,7 +206,7 @@ const TestMigration = () => {
       <div className='content-block'>
         <div className='content-header'>Execution Logs</div>
         <div>
-          <LogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} />
+          <LogViewer serverPath={process.env.REACT_APP_BASE_API_URL ?? ''} sendDataToParent={handleMigrationState} />
         </div>
       </div>
     </div>

ui/src/context/app/app.interface.ts

@@ -217,6 +217,7 @@ export interface IDropDown {
 export interface ITestMigration {
   stack_link: string;
   stack_api_key: string;
+  isMigrationComplete: boolean;
 }
 export interface IAppContext {
   authToken: string;
@@ -327,7 +328,8 @@ export const DEFAULT_CONTENT_MAPPER: IContentMapper = {
 
 export const DEFAULT_TEST_MIGRATION: ITestMigration = {
   stack_link: '',
-  stack_api_key: ''
+  stack_api_key: '',
+  isMigrationComplete: false
 };
 
 export const DEFAULT_NEW_MIGRATION: INewMigration = {

ui/src/pages/Migration/index.tsx

@@ -462,7 +462,7 @@ const Migration = () => {
         <MigrationFlowHeader projectData={projectData} handleOnClick={handleOnClickFunctions[curreentStepIndex]} isLoading={isLoading} isCompleted={isCompleted} legacyCMSRef={legacyCMSRef}   />
       }
       <div className='steps-wrapper'>
-        <HorizontalStepper ref={stepperRef} steps={createStepper(projectData ?? defaultMigrationResponse, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={changeDropdownState } />
+        <HorizontalStepper ref={stepperRef} steps={createStepper(projectData ?? defaultMigrationResponse, handleClick)} handleSaveCT={saveRef?.current?.handleSaveContentType} changeDropdownState={changeDropdownState} />
       </div>
     </div>
   )