From 35ab093b9993c232f0681b2d227b0e143edc3018 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Wed, 9 Oct 2024 15:55:54 +0530 Subject: [PATCH] Migration Execution logs added --- ui/src/components/LegacyCms/legacyCms.scss | 2 +- ui/src/components/LogScreen/index.scss | 13 +++-- ui/src/components/LogScreen/index.tsx | 49 ++++++++++++++++++- .../components/MigrationExecution/index.tsx | 15 ++++-- .../HorizontalStepper/HorizontalStepper.tsx | 4 +- ui/src/components/TestMigration/index.tsx | 35 ++++++++++--- ui/src/context/app/app.interface.ts | 4 +- ui/src/pages/Migration/index.tsx | 2 +- 8 files changed, 102 insertions(+), 22 deletions(-) diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss index 647dfcd0..9220dedc 100644 --- a/ui/src/components/LegacyCms/legacyCms.scss +++ b/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; diff --git a/ui/src/components/LogScreen/index.scss b/ui/src/components/LogScreen/index.scss index ae1c11f2..116274e2 100644 --- a/ui/src/components/LogScreen/index.scss +++ b/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,7 +58,6 @@ .log-number { text-align: center; min-width: 50px; - color: $color-font-active; position: relative; } @@ -61,10 +65,6 @@ * 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; } @@ -72,7 +72,6 @@ * Styles for the log message within each log entry. */ .log-message { - color: $color-black-222; flex-grow: 1; padding: 0 $px-16; } diff --git a/ui/src/components/LogScreen/index.tsx b/ui/src/components/LogScreen/index.tsx index 50251a73..1cde4ac1 100644 --- a/ui/src/components/LogScreen/index.tsx +++ b/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(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 ( diff --git a/ui/src/components/MigrationExecution/index.tsx b/ui/src/components/MigrationExecution/index.tsx index 732f4d40..21d7582c 100644 --- a/ui/src/components/MigrationExecution/index.tsx +++ b/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 = () => { - :
+ :
-
Path
-
Select your organization maintained on Contentstack.
+
We have Uploaded CMS, Organization, Selected stack and locale. The actual migration process can be started here.
{MigrationInformation && @@ -108,6 +110,13 @@ const MigrationExecution = () => {
+ +
+
Execution Logs
+
+ +
+
); }; diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx index 23a62462..cf106bbc 100644 --- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.tsx +++ b/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 (
diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index 5f8de937..696032eb 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/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 ?
@@ -122,14 +146,13 @@ const TestMigration = () => {
:
-
UID

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.

diff --git a/ui/src/context/app/app.interface.ts b/ui/src/context/app/app.interface.ts index 67329ca2..ef8df9b0 100644 --- a/ui/src/context/app/app.interface.ts +++ b/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 = { diff --git a/ui/src/pages/Migration/index.tsx b/ui/src/pages/Migration/index.tsx index 411bea72..6e388fab 100644 --- a/ui/src/pages/Migration/index.tsx +++ b/ui/src/pages/Migration/index.tsx @@ -462,7 +462,7 @@ const Migration = () => { }
- +
)