From 531fee266dc84068c362f6a192a61f0b6249378e Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 18 Mar 2025 13:07:09 +0530 Subject: [PATCH] Set Maximum zoom level for logs --- api/.eslintrc.json | 2 +- ui/.eslintrc.json | 4 +- ui/src/components/AccountPage/index.scss | 8 +- .../components/AdvancePropertise/index.scss | 52 ++-- ui/src/components/Card/card.scss | 7 +- ui/src/components/Common/Card/card.scss | 10 +- .../Common/ProgressBar/progressBar.scss | 31 ++- .../components/Common/Settings/Settings.scss | 7 +- ui/src/components/ContentMapper/index.scss | 21 +- .../DestinationStack/DestinationStack.scss | 30 ++- ui/src/components/LegacyCms/legacyCms.scss | 50 ++-- .../LogScreen/MigrationLogViewer.tsx | 224 +++++++++------- ui/src/components/LogScreen/index.scss | 18 +- ui/src/components/LogScreen/index.tsx | 248 ++++++++++-------- ui/src/components/MainHeader/index.scss | 10 +- .../components/MigrationFlowHeader/index.scss | 2 +- ui/src/components/ProfileHeader/index.scss | 11 +- ui/src/components/SideBar/index.scss | 8 +- .../HorizontalStepper/HorizontalStepper.scss | 31 +-- .../VerticalStepper/AutoVerticalStepper.scss | 25 +- ui/src/components/TestMigration/index.scss | 2 +- ui/src/components/TestMigration/index.tsx | 14 +- 22 files changed, 435 insertions(+), 380 deletions(-) diff --git a/api/.eslintrc.json b/api/.eslintrc.json index d371d680f..1c0a3d935 100644 --- a/api/.eslintrc.json +++ b/api/.eslintrc.json @@ -28,6 +28,6 @@ ], "func-names": [0], "no-console": ["error", { "allow": ["warn", "error", "info"] }], - "@typescript-eslint/no-explicit-any": "off" + "@typescript-eslint/no-explicit-any": "warn" } } diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json index 9f36c7674..b315b678d 100644 --- a/ui/.eslintrc.json +++ b/ui/.eslintrc.json @@ -29,6 +29,8 @@ "{}": false } } - ] + ], + "@typescript-eslint/no-explicit-any": "warn", + "no-console": ["error", { "allow": ["warn", "error", "info"] }] } } diff --git a/ui/src/components/AccountPage/index.scss b/ui/src/components/AccountPage/index.scss index 2de759609..f754bac3b 100644 --- a/ui/src/components/AccountPage/index.scss +++ b/ui/src/components/AccountPage/index.scss @@ -22,7 +22,7 @@ } &__intro { - background-image: url("../../../public/images/login_bg.webp"); + background-image: url('../../../public/images/login_bg.webp'); background-repeat: no-repeat; background-size: cover; height: 100vh; @@ -61,7 +61,7 @@ -webkit-box-direction: normal; -webkit-box-align: center; -ms-flex-align: center; - grid-row-gap: .5rem; + grid-row-gap: 0.5rem; align-items: center; display: -webkit-box; display: -ms-flexbox; @@ -70,7 +70,7 @@ flex-direction: column; left: 8%; position: absolute; - row-gap: .5rem; + row-gap: 0.5rem; top: 30%; z-index: 10; @@ -79,7 +79,7 @@ font-family: $font-family-secondary; font-size: 3.8rem; font-weight: $font-weight-extra-bold; - letter-spacing: .04em; + letter-spacing: 0.04em; line-height: 3.625rem; // max-width: $px-260; text-transform: uppercase; diff --git a/ui/src/components/AdvancePropertise/index.scss b/ui/src/components/AdvancePropertise/index.scss index 403f278f4..9c17e1b41 100644 --- a/ui/src/components/AdvancePropertise/index.scss +++ b/ui/src/components/AdvancePropertise/index.scss @@ -17,7 +17,7 @@ margin-bottom: 20px; grid-template-columns: 1fr; gap: 20px; - } +} /** * Styles for the option label in the AdvancePropertise component. * @@ -51,15 +51,15 @@ margin-bottom: 0.75rem; } .Radio { - width: calc(33.33333% - .66667rem); - padding: .5rem; + width: calc(33.33333% - 0.66667rem); + padding: 0.5rem; margin: 0 !important; } .FieldLabel { margin-bottom: $px-8; } .info-style { - margin-top: .75rem; + margin-top: 0.75rem; margin-bottom: 1.5rem; .Info__border { border-left-color: #0469e3; @@ -73,11 +73,11 @@ font-size: $size-font-large; line-height: $line-height-default; margin-left: 2.75rem; - margin-top: -.25rem !important; + margin-top: -0.25rem !important; } .ToggleWrap { margin-top: 0.5rem; - padding: 0 0.5rem + padding: 0 0.5rem; } .Field { margin-bottom: $px-24; @@ -97,10 +97,10 @@ .Checkbox__label { height: auto; } - } + } } - } - } + } + } .Select__menu { position: relative; z-index: 10000; @@ -109,49 +109,44 @@ position: relative; border: 2px solid red; z-index: 10000; - } + } } -.Radio-class{ +.Radio-class { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; grid-template-columns: 1fr; - } -.dropdown-choices-wrapper{ +.dropdown-choices-wrapper { height: auto; width: auto; border: 1px solid #dde3ee; margin: 10px 10px; } -.element-wrapper{ +.element-wrapper { margin: 20px 10px; display: flex; justify-content: space-between; align-items: center; transition: opacity 0.2s ease, border 0.2s ease; position: relative; - - } .element-wrapper.dragging { - opacity: 0.4; - + opacity: 0.4; } - -.dropdown-filter-wrapper{ +.dropdown-filter-wrapper { background-color: $color-brand-white-base; border-radius: $px-4; - box-shadow: 0 $px-4 $px-30 rgba(0,0,0,.25); + box-shadow: 0 $px-4 $px-30 rgba(0, 0, 0, 0.25); position: absolute; top: 45px; right: -9px; width: auto; - z-index:99; + z-index: 99; li { button { align-items: center; @@ -160,7 +155,7 @@ font-size: $size-font-medium; padding: $px-8 $px-12; } - + &:hover { background-color: $color-base-white-10; color: $color-brand-primary-base; @@ -177,16 +172,13 @@ } } } -.button-filter-wrapper{ +.button-filter-wrapper { margin: 20px 10px; display: flex; justify-content: space-between; align-items: center; - } -.read-only-text{ - - font-size: 14px; - color: $color-stepper-title; - +.read-only-text { + font-size: 14px; + color: $color-stepper-title; } diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index 37f258ce1..cac65d74f 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -10,7 +10,8 @@ transition: box-shadow 0.3s ease; width: 20rem; &:hover { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .14); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), + 0 0 2px 0 rgba(0, 0, 0, 0.14); cursor: pointer; } } @@ -43,9 +44,9 @@ line-height: $line-height-default; overflow: hidden; padding: 0; - white-space: normal; + white-space: normal; -webkit-line-clamp: 2; - line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; } diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss index a45b4c701..a0bac7b09 100644 --- a/ui/src/components/Common/Card/card.scss +++ b/ui/src/components/Common/Card/card.scss @@ -42,7 +42,7 @@ .action_list, .trigger_list { //border: 1px solid $color-base-gray-40; - border: 1px solid #6C5CE766; + border: 1px solid #6c5ce766; border-radius: $px-6; flex: 0 10%; cursor: pointer; @@ -76,7 +76,7 @@ * @cssproperty box-shadow - The box shadow effect to apply. * @cssvalue 0 3px $px-5 $px-2 rgb(215 215 215) - The specific box shadow values. */ - .connector_list:hover { +.connector_list:hover { box-shadow: 0 3px $px-5 $px-2 rgb(215 215 215); } @@ -156,7 +156,7 @@ color: $color-stepper-title; } } -.Card__disabled{ +.Card__disabled { cursor: not-allowed; - opacity: .5; -} \ No newline at end of file + opacity: 0.5; +} diff --git a/ui/src/components/Common/ProgressBar/progressBar.scss b/ui/src/components/Common/ProgressBar/progressBar.scss index 2e304456f..24a5cab34 100644 --- a/ui/src/components/Common/ProgressBar/progressBar.scss +++ b/ui/src/components/Common/ProgressBar/progressBar.scss @@ -10,19 +10,18 @@ * */ .ProgressBar { - border-radius: $space-4; - - overflow: hidden; - &__bar { - - border-radius: inherit; - height: inherit; - transition: width 100ms linear; - } - &__circle{ - stroke-width: 5%; - transform: rotate(-90deg); - transform-origin: 50% 50%; - transition: stroke-dashoffset 1s; - } -} \ No newline at end of file + border-radius: $space-4; + + overflow: hidden; + &__bar { + border-radius: inherit; + height: inherit; + transition: width 100ms linear; + } + &__circle { + stroke-width: 5%; + transform: rotate(-90deg); + transform-origin: 50% 50%; + transition: stroke-dashoffset 1s; + } +} diff --git a/ui/src/components/Common/Settings/Settings.scss b/ui/src/components/Common/Settings/Settings.scss index 5d7787582..bfdca554e 100644 --- a/ui/src/components/Common/Settings/Settings.scss +++ b/ui/src/components/Common/Settings/Settings.scss @@ -11,7 +11,8 @@ .PageLayout { width: 100%; } - .PageLayout__head, .PageLayout__leftSidebar { + .PageLayout__head, + .PageLayout__leftSidebar { border-top: 0 none; } .PageLayout--primary { @@ -21,8 +22,8 @@ margin-left: 15rem; padding-top: $px-8; } - } - } + } + } .action-component-title { justify-content: space-between; width: calc(100vw - 326px); diff --git a/ui/src/components/ContentMapper/index.scss b/ui/src/components/ContentMapper/index.scss index 578537524..3edf1861b 100644 --- a/ui/src/components/ContentMapper/index.scss +++ b/ui/src/components/ContentMapper/index.scss @@ -33,9 +33,9 @@ .Search__v2 { background-color: $color-brand-white-base; height: 2.5rem; - width: 100%!important; + width: 100% !important; .Search-input-show { - width: 100%!important; + width: 100% !important; } } // svg { @@ -98,7 +98,8 @@ width: 20px; } } - &:hover, &.active-ct { + &:hover, + &.active-ct { background-color: $color-brand-white-base; .cms-title { span { @@ -106,7 +107,7 @@ } } } - } + } } .mapped-icon { circle { @@ -117,7 +118,7 @@ .Dropdown__menu--primary { right: 0; top: 1.5rem; - } + } } .content-type-list { padding-left: $px-12; @@ -202,7 +203,7 @@ div .select { width: 100%; max-width: 100% !important; } -} +} div .table-row { display: flex; justify-content: space-between; @@ -249,7 +250,7 @@ div .table-row { .filter-wrapper { background-color: $color-brand-white-base; border-radius: $px-4; - box-shadow: 0 $px-4 $px-30 rgba(0,0,0,.25); + box-shadow: 0 $px-4 $px-30 rgba(0, 0, 0, 0.25); position: absolute; right: $px-12; top: $px-50; @@ -262,7 +263,7 @@ div .table-row { font-size: $size-font-medium; padding: $px-8 $px-12; } - + &:hover { background-color: $color-base-white-10; color: $color-brand-primary-base; @@ -288,7 +289,7 @@ div .table-row { background-color: $color-brand-fail-light; cursor: pointer; } -.mapper-emptystate{ +.mapper-emptystate { padding: 10px 10px; } .Checkbox .Checkbox__tick svg { @@ -296,4 +297,4 @@ div .table-row { } .advanced-setting-button { padding: 5px; -} \ No newline at end of file +} diff --git a/ui/src/components/DestinationStack/DestinationStack.scss b/ui/src/components/DestinationStack/DestinationStack.scss index cfe630cec..854fd5e16 100644 --- a/ui/src/components/DestinationStack/DestinationStack.scss +++ b/ui/src/components/DestinationStack/DestinationStack.scss @@ -5,7 +5,7 @@ display: flex; flex-wrap: wrap; gap: 12px; - margin: 0 0 20px 10px !important + margin: 0 0 20px 10px !important; } .title { @@ -27,15 +27,15 @@ } .Dropdown-wrapper { .css-b8ldur-Input { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .Select__v2 .Select__menu .Select__menu-list { max-height: 130px; padding-bottom: 0; } .Select__v2 .Select__menu { - max-width: 100%!important; + max-width: 100% !important; } } .stackselect { @@ -70,7 +70,8 @@ font-weight: $font-weight-semi-bold; line-height: 21px; } - .orgWrapper, .title { + .orgWrapper, + .title { .asterisk_input::after { content: ''; color: $color-stepper-title; @@ -83,7 +84,7 @@ box-shadow: none; border: 0 none; border-radius: 0; - padding:0 !important; + padding: 0 !important; } .migration-vertical-stepper-container { border-bottom: 0 none; @@ -96,7 +97,7 @@ // max-width: 430px; width: 100%; margin: 0; - padding: 0; + padding: 0; .createStack { background-color: $color-brand-white-base; border-top: 1px solid $color-brand-secondary-lightest; @@ -120,9 +121,9 @@ &:hover { background: $color-base-white-10; } - } - .Select .Select__control .Select__value-container input, .Select__single-value input[text]{ + .Select .Select__control .Select__value-container input, + .Select__single-value input[text] { font-size: 16px !important; line-height: 24px !important; color: $color-placeholder !important; @@ -143,7 +144,7 @@ } .TextInput--disabled .TextInput__v2 { - background-color: #F9F8FF !important; + background-color: #f9f8ff !important; } #Step2 { .action-summary-wrapper { @@ -156,12 +157,14 @@ color: $color-brand-warning-medium; font-size: $size-font-small; } - - } } .action-summary-wrapper { - .Select .Select__control .Select__value-container.Select__value-container--has-value .Select__single-value input { + .Select + .Select__control + .Select__value-container.Select__value-container--has-value + .Select__single-value + input { width: 100% !important; background-color: $color-brand-white-base; font-size: $size-font-xl; @@ -175,7 +178,6 @@ } } - .locale-container { display: flex; background-color: $color-base-white-5; diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/ui/src/components/LegacyCms/legacyCms.scss index 7ba37a83b..550ddb95d 100644 --- a/ui/src/components/LegacyCms/legacyCms.scss +++ b/ui/src/components/LegacyCms/legacyCms.scss @@ -3,8 +3,8 @@ text-align: center; display: flex; flex-wrap: wrap; - gap: 12px ; - margin: 20px 20px ; + gap: 12px; + margin: 20px 20px; } .pl-40 { @@ -21,7 +21,6 @@ border-top: $px-5 solid $color-brand-primary-base !important; } .legacy-cms-container { - padding-left: 25px !important; padding-top: 26px; padding-right: 30px; @@ -30,7 +29,6 @@ overflow-x: hidden; max-height: 70vh; background-color: $color-base-white-10; - } .service_list_search { @@ -80,7 +78,7 @@ // margin-right: 10px; // margin-left: 15px; // } -.error-container{ +.error-container { display: flex; background-color: $color-base-white-5; flex-direction: column; @@ -92,7 +90,6 @@ min-height: 72px; width: 560px; margin-left: 20px !important; - } .error-container > * { margin-left: 10px; @@ -103,18 +100,18 @@ color: $color-brand-warning-medium; font-size: 12px; } -.validation-cta{ +.validation-cta { margin: $space-16 $space-12 0; line-height: 24px; } -.success{ +.success { color: $color-brand-success-base; margin-top: 5px; } -.error{ +.error { color: $color-brand-fail-base; } -.link-discription{ +.link-discription { font-family: $font-family-primary; font-style: normal; font-weight: $font-weight-regular; @@ -124,15 +121,15 @@ margin-bottom: $space-10; margin-top: $space-10; } -.bar-container{ +.bar-container { height: 10px; width: 560px; align-items: center; margin-left: 10px !important; margin-top: 10px; } -.file-icon-group{ - display:inline-block; +.file-icon-group { + display: inline-block; flex-direction: row; gap: 30px; word-wrap: break-word; @@ -141,37 +138,36 @@ font-weight: $font-weight-semi-bold; overflow: hidden; padding: 0; - white-space: normal; + white-space: normal; display: -webkit-box; -webkit-line-clamp: 2 !important; - line-clamp: 2; + line-clamp: 2; } } -.loader{ +.loader { margin-left: 20px; - .CircularLoader--size-small{ + .CircularLoader--size-small { width: 2rem !important; height: 2rem !important; } - } -.processing-test{ +.processing-test { margin-top: 5px; } -.file-container{ +.file-container { overflow: hidden; padding: 0; - white-space: normal; + white-space: normal; -webkit-line-clamp: 2; - line-clamp: 2; + line-clamp: 2; -webkit-box-orient: vertical; width: 540px; } -.message-container{ - display: inline-flex; - align-items: center; +.message-container { + display: inline-flex; + align-items: center; } -.doc-link{ +.doc-link { margin-left: 5px; -} \ No newline at end of file +} diff --git a/ui/src/components/LogScreen/MigrationLogViewer.tsx b/ui/src/components/LogScreen/MigrationLogViewer.tsx index 4a0f0c905..cb59399df 100644 --- a/ui/src/components/LogScreen/MigrationLogViewer.tsx +++ b/ui/src/components/LogScreen/MigrationLogViewer.tsx @@ -33,13 +33,13 @@ const logStyles: { [key: string]: React.CSSProperties } = { info: { backgroundColor: '#f1f1f1' }, warn: { backgroundColor: '#ffeeba', color: '#856404' }, error: { backgroundColor: '#f8d7da', color: '#721c24' }, - success: { backgroundColor: '#d4edda', color: '#155724' }, + success: { backgroundColor: '#d4edda', color: '#155724' } }; type LogsType = { serverPath: string; handleStepChange: (currentStep: number) => void; -} +}; export interface LogEntry { level?: string; @@ -52,23 +52,29 @@ export interface LogEntry { * @param {string} serverPath - The path of the server to connect to. */ const MigrationLogViewer = ({ serverPath }: LogsType) => { - const [logs, setLogs] = useState([{ message: "Migration logs will appear here once the process begins.", level: '' }]); + const [logs, setLogs] = useState([ + { message: 'Migration logs will appear here once the process begins.', level: '' } + ]); const [isModalOpen, setIsModalOpen] = useState(false); const [zoomLevel, setZoomLevel] = useState(1); const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData); - const selectedOrganisation = useSelector((state: RootState) => state?.authentication?.selectedOrganisation); + const selectedOrganisation = useSelector( + (state: RootState) => state?.authentication?.selectedOrganisation + ); const user = useSelector((state: RootState) => state?.authentication?.user); const dispatch = useDispatch(); const { projectId = '' } = useParams(); - const stackLink = `${CS_URL[user?.region]}/stack/${newMigrationData?.stackDetails?.value}/dashboard`; + const stackLink = `${CS_URL[user?.region]}/stack/${ + newMigrationData?.stackDetails?.value + }/dashboard`; useEffect(() => { const socket = io(serverPath || '', { - reconnection: true, + reconnection: true }); // Connect to the server socket.on('disconnect', () => { @@ -81,30 +87,32 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { * @param {string} newLogs - The new logs received from the server. */ socket.on('logUpdate', (newLogs: string) => { - const parsedLogsArray: LogEntry[] = []; - const logArray = newLogs?.split('\n') - - logArray?.forEach((logLine) => { - try { - //parse each log entry as a JSON object - const parsedLog = JSON?.parse(logLine); - - // Build the log object with default values - const plogs = { - level: parsedLog.level || 'info', - message: parsedLog.message || 'Unknown message', - timestamp: parsedLog.timestamp || null, - }; - parsedLogsArray.push(plogs); - }catch(error){ - console.log("error in parsing logs : ", error); - } - }); - - setLogs((prevLogs) => - [...prevLogs.filter(log => log.message !== "Migration logs will appear here once the process begins."), - ...parsedLogsArray] - ); + const parsedLogsArray: LogEntry[] = []; + const logArray = newLogs?.split('\n'); + + logArray?.forEach((logLine) => { + try { + //parse each log entry as a JSON object + const parsedLog = JSON?.parse(logLine); + + // Build the log object with default values + const plogs = { + level: parsedLog.level || 'info', + message: parsedLog.message || 'Unknown message', + timestamp: parsedLog.timestamp || null + }; + parsedLogsArray.push(plogs); + } catch (error) { + console.error('error in parsing logs : ', error); + } + }); + + setLogs((prevLogs) => [ + ...prevLogs.filter( + (log) => log.message !== 'Migration logs will appear here once the process begins.' + ), + ...parsedLogsArray + ]); }); return () => { @@ -122,10 +130,10 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { if (logsContainer) { logsContainer.scrollTo({ top: 0, - behavior: 'smooth', + behavior: 'smooth' }); } - } + }; /** * Scrolls to the bottom of the logs container. @@ -135,20 +143,19 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { if (logsContainer) { logsContainer.scrollTo({ top: logsContainer.scrollHeight, - behavior: 'smooth', + behavior: 'smooth' }); } - } + }; /** * 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})`; - // } + setZoomLevel((prevZoomLevel) => { + const newZoomLevel = Math.min(prevZoomLevel + 0.1, 1.4); // Ensures it does not exceed 1.4 + return newZoomLevel; + }); }; /** @@ -178,8 +185,7 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { //const logObject = JSON.parse(log); const message = log.message; - if (message === "Migration Process Completed") { - + if (message === 'Migration Process Completed') { setIsModalOpen(true); const newMigrationDataObj: INewMigration = { @@ -191,7 +197,7 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { } }; - dispatch(updateNewMigrationData((newMigrationDataObj))); + dispatch(updateNewMigrationData(newMigrationDataObj)); /** * Updates the Migration excution step as completed in backend if migration completes. @@ -220,74 +226,98 @@ const MigrationLogViewer = ({ serverPath }: LogsType) => { }, [logs]); return ( -
-
- {newMigrationData?.migration_execution?.migrationCompleted - ?
+
+
+ {newMigrationData?.migration_execution?.migrationCompleted ? ( +
Migration Execution process is completed in the selected stack - + {newMigrationData?.stackDetails?.label}
- :
- {logs.map((log, index) => { - try { - //const logObject = JSON.parse(log); - const { level, timestamp, message } = log; - - return ( - newMigrationData?.destination_stack?.migratedStacks?.includes(newMigrationData?.destination_stack?.selectedStack?.value) ? -
-
Migration has already done in selected stack. Please create a new project.
+ transformOrigin: 'top left', + transition: 'transform 0.1s ease' + }} + > + {logs.map((log, index) => { + try { + //const logObject = JSON.parse(log); + const { level, timestamp, message } = log; + + return newMigrationData?.destination_stack?.migratedStacks?.includes( + newMigrationData?.destination_stack?.selectedStack?.value + ) ? ( +
+
+ Migration has already done in selected stack. Please create a new project.
- : -
- {message === "Migration logs will appear here once the process begins." - ?
-
{message}
-
: -
-
{index}
-
- {timestamp ? new Date(timestamp)?.toTimeString()?.split(' ')[0] : - new Date()?.toTimeString()?.split(' ')[0]} -
-
{message}
+
+ ) : ( +
+ {message === 'Migration logs will appear here once the process begins.' ? ( +
+
{message}
+
+ ) : ( +
+
{index}
+
+ {timestamp + ? new Date(timestamp)?.toTimeString()?.split(' ')[0] + : new Date()?.toTimeString()?.split(' ')[0]}
- } -
- ); - } catch (error) { - console.error('Invalid log format', error); - return null; - } - })} +
{message}
+
+ )} +
+ ); + } catch (error) { + console.error('Invalid log format', error); + return null; + } + })}
- } + )}
- {!newMigrationData?.migration_execution?.migrationCompleted && !logs?.every((log) => log.message === "Migration logs will appear here once the process begins.") && ( -
- - - {MAGNIFY} - {DEMAGNIFY} - -
- )} - + {!newMigrationData?.migration_execution?.migrationCompleted && + !logs?.every( + (log) => log.message === 'Migration logs will appear here once the process begins.' + ) && ( +
+ + + {MAGNIFY} + {DEMAGNIFY} + +
+ )}
); }; -export default MigrationLogViewer; \ No newline at end of file +export default MigrationLogViewer; diff --git a/ui/src/components/LogScreen/index.scss b/ui/src/components/LogScreen/index.scss index a61e388f6..21aa278d9 100644 --- a/ui/src/components/LogScreen/index.scss +++ b/ui/src/components/LogScreen/index.scss @@ -6,14 +6,14 @@ .logs-container { font-family: Arial, sans-serif; background-color: rgb(241, 241, 241); - border: 1px solid #EDF1F7; + border: 1px solid #edf1f7; border-radius: 8px; margin: 0 $px-24 $px-24; position: relative; } .empty-log-state { - font-family: "IBM Plex Mono", monospace; + font-family: 'IBM Plex Mono', monospace; font-size: $size-font-xl; font-weight: $font-weight-medium; padding: 40px 20px; @@ -22,7 +22,7 @@ .logs-wrapper { position: relative; - + /** * Styles for the action items within the LogScreen component. */ @@ -42,7 +42,7 @@ // background-color: $color-base-white-10; color: $color-base-black-base; display: flex; - font-family: "IBM Plex Mono", monospace; + font-family: 'IBM Plex Mono', monospace; font-size: $size-font-large; font-weight: $font-weight-medium; padding: 30px 20px; @@ -55,7 +55,7 @@ background-color: $color-base-white-5; border-right: 1px solid $color-brand-secondary-lightest; bottom: 0; - content: ""; + content: ''; left: 0; position: absolute; right: 0; @@ -63,7 +63,7 @@ width: 50px; } } - + /** * Styles for the log number within each log entry. */ @@ -72,14 +72,14 @@ min-width: 50px; position: relative; } - + /** * Styles for the log time within each log entry. */ .log-time { padding: 0 $px-16; } - + /** * Styles for the log message within each log entry. */ @@ -87,4 +87,4 @@ flex-grow: 1; padding: 0 $px-16; } -} \ No newline at end of file +} diff --git a/ui/src/components/LogScreen/index.tsx b/ui/src/components/LogScreen/index.tsx index d595004ec..62532e890 100644 --- a/ui/src/components/LogScreen/index.tsx +++ b/ui/src/components/LogScreen/index.tsx @@ -14,7 +14,7 @@ import { INewMigration, TestStacks } from '../../context/app/app.interface'; // CSS import './index.scss'; -import { MAGNIFY,DEMAGNIFY } from '../../common/assets'; +import { MAGNIFY, DEMAGNIFY } from '../../common/assets'; import { saveStateToLocalStorage } from '../../utilities/functions'; import { LogEntry } from './MigrationLogViewer'; @@ -23,15 +23,15 @@ const logStyles: { [key: string]: React.CSSProperties } = { info: { backgroundColor: '#f1f1f1' }, warn: { backgroundColor: '#ffeeba', color: '#856404' }, error: { backgroundColor: '#f8d7da', color: '#721c24' }, - success: { backgroundColor: '#d4edda', color: '#155724' }, + success: { backgroundColor: '#d4edda', color: '#155724' } }; // Define the props for the component type LogsType = { serverPath: string; sendDataToParent?: (isMigrationStarted: boolean) => void | undefined; - projectId: string -} + projectId: string; +}; /** * TestMigrationLogViewer component displays logs received from the server. @@ -39,29 +39,37 @@ type LogsType = { * @param {function} sendDataToParent - Callback to inform the parent about migration status. * @param {string} projectId - The project ID for saving state to local storage. */ -const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: LogsType) => { - const [isLogsLoading, setisLogsLoading] = useState(false) - const [logs, setLogs] = useState([{ message: !isLogsLoading ? "Migration logs will appear here once the process begins." : '', level: ''}]); +const TestMigrationLogViewer = ({ serverPath, sendDataToParent, projectId }: LogsType) => { + const [isLogsLoading, setisLogsLoading] = useState(false); + const [logs, setLogs] = useState([ + { + message: !isLogsLoading ? 'Migration logs will appear here once the process begins.' : '', + level: '' + } + ]); const newMigrationData = useSelector((state: RootState) => state?.migration?.newMigrationData); const [migratedStack, setmigratedSatck] = useState( - (newMigrationData?.testStacks ?? [])?.find((test) => test?.stackUid === newMigrationData?.test_migration?.stack_api_key)); - + (newMigrationData?.testStacks ?? [])?.find( + (test) => test?.stackUid === newMigrationData?.test_migration?.stack_api_key + ) + ); + // Redux dispatcher const dispatch = useDispatch(); - - - useEffect(()=>{ - const migratedTestStack = newMigrationData?.testStacks?.find((test) => test?.stackUid === newMigrationData?.test_migration?.stack_api_key); + useEffect(() => { + const migratedTestStack = newMigrationData?.testStacks?.find( + (test) => test?.stackUid === newMigrationData?.test_migration?.stack_api_key + ); setmigratedSatck(migratedTestStack); - },[newMigrationData?.test_migration]); + }, [newMigrationData?.test_migration]); // Set up WebSocket connection useEffect(() => { - const socket = io(serverPath || '',{ - reconnection: true, + const socket = io(serverPath || '', { + reconnection: true }); // Connect to the server socket.on('disconnect', () => { @@ -76,29 +84,30 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs socket.on('logUpdate', (newLogs: string) => { setisLogsLoading(true); const parsedLogsArray: LogEntry[] = []; - const logArray = newLogs?.split('\n') - + const logArray = newLogs?.split('\n'); + logArray?.forEach((logLine) => { try { // parse each log entry as a JSON object const parsedLog = JSON.parse(logLine); - + const plogs = { level: parsedLog.level || 'info', message: parsedLog.message || 'Unknown message', - timestamp: parsedLog.timestamp || null, + timestamp: parsedLog.timestamp || null }; parsedLogsArray.push(plogs); - - }catch(error){ - console.log("error in parsing logs : ", error); + } catch (error) { + console.error('error in parsing logs : ', error); } }); - setLogs((prevLogs) => - [...prevLogs.filter(log => log.message !== "Migration logs will appear here once the process begins."), - ...parsedLogsArray] - ); - }) + setLogs((prevLogs) => [ + ...prevLogs.filter( + (log) => log.message !== 'Migration logs will appear here once the process begins.' + ), + ...parsedLogsArray + ]); + }); return () => { socket.disconnect(); // Cleanup on component unmount }; @@ -112,10 +121,10 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs if (logsContainer) { logsContainer.scrollTo({ top: 0, - behavior: 'smooth', + behavior: 'smooth' }); } - } + }; /** * Scrolls to the bottom of the logs container. @@ -125,10 +134,10 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs if (logsContainer) { logsContainer.scrollTo({ top: logsContainer.scrollHeight, - behavior: 'smooth', + behavior: 'smooth' }); } - } + }; const [zoomLevel, setZoomLevel] = useState(1); @@ -136,31 +145,24 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs * 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})`; - // } + setZoomLevel((prevZoomLevel) => { + const newZoomLevel = Math.min(prevZoomLevel + 0.1, 1.4); // Ensures it does not exceed 1.4 + return newZoomLevel; + }); }; /** * 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})`; - // } setZoomLevel((prevZoomLevel) => { const newZoomLevel = Math.max(prevZoomLevel - 0.1, 0.6); // added minimum level for zoom out return newZoomLevel; - }); + }); }; const logsContainerRef = useRef(null); - useEffect(() => { if (logsContainerRef.current) { logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight; @@ -171,13 +173,13 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs //const logObject = JSON.parse(log); const message = log?.message; - if (message === "Test Migration Process Completed") { + if (message === 'Test Migration Process Completed') { setisLogsLoading(false); // Save test migration state to local storage saveStateToLocalStorage(`testmigration_${projectId}`, { - isTestMigrationCompleted : true, - isTestMigrationStarted : false, + isTestMigrationCompleted: true, + isTestMigrationStarted: false }); Notification({ @@ -189,29 +191,37 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs type: 'success' }); sendDataToParent?.(false); - const stacks = newMigrationData?.testStacks?.length > 0 ? - newMigrationData?.testStacks?.map((stack)=> - stack?.stackUid === newMigrationData?.test_migration?.stack_api_key - ? { - ...stack, - stackName: newMigrationData?.test_migration?.stack_name, - isMigrated: true - } - : stack - ) : [{stackUid: newMigrationData?.test_migration?.stack_api_key, stackName: newMigrationData?.test_migration?.stack_name, isMigrated: true}] - + const stacks = + newMigrationData?.testStacks?.length > 0 + ? newMigrationData?.testStacks?.map((stack) => + stack?.stackUid === newMigrationData?.test_migration?.stack_api_key + ? { + ...stack, + stackName: newMigrationData?.test_migration?.stack_name, + isMigrated: true + } + : stack + ) + : [ + { + stackUid: newMigrationData?.test_migration?.stack_api_key, + stackName: newMigrationData?.test_migration?.stack_name, + isMigrated: true + } + ]; + // Update testStacks data in Redux const newMigrationObj: INewMigration = { ...newMigrationData, testStacks: stacks, - test_migration:{ + test_migration: { ...newMigrationData?.test_migration, - isMigrationComplete:true, - isMigrationStarted: false, + isMigrationComplete: true, + isMigrationStarted: false } }; - - dispatch(updateNewMigrationData((newMigrationObj))); + + dispatch(updateNewMigrationData(newMigrationObj)); } } catch (error) { console.error('Invalid JSON string', error); @@ -219,48 +229,65 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs }); }, [logs]); - useEffect(()=>{ - if(! isLogsLoading && !migratedStack?.isMigrated){ - setLogs([{ message: "Migration logs will appear here once the process begins.", level: ''}]); + useEffect(() => { + if (!isLogsLoading && !migratedStack?.isMigrated) { + setLogs([{ message: 'Migration logs will appear here once the process begins.', level: '' }]); } - - },[isLogsLoading, migratedStack?.isMigrated]); - + }, [isLogsLoading, migratedStack?.isMigrated]); return ( -
- {/* Logs container */} -
- {migratedStack?.isMigrated - ?
-
Test Migration is completed for stack {migratedStack?.stackName}
+
+ {/* Logs container */} +
+ {migratedStack?.isMigrated ? ( +
+
+ Test Migration is completed for stack{' '} + + {migratedStack?.stackName} +
- :
+ ) : ( +
+ transformOrigin: 'top left', + transition: 'transform 0.1s ease' + }} + > {logs?.map((log, index) => { try { - const { level, timestamp, message } = log; - + const { level, timestamp, message } = log; + return ( -
- {message === "Migration logs will appear here once the process begins." - ?
-
{message}
-
: -
-
{index}
-
- {timestamp ? new Date(timestamp)?.toTimeString()?.split(' ')[0] : new Date()?.toTimeString()?.split(' ')[0]} -
-
{message}
-
- } +
+ {message === 'Migration logs will appear here once the process begins.' ? ( +
+
{message}
+
+ ) : ( +
+
{index}
+
+ {timestamp + ? new Date(timestamp)?.toTimeString()?.split(' ')[0] + : new Date()?.toTimeString()?.split(' ')[0]} +
+
{message}
+
+ )}
); } catch (error) { @@ -268,21 +295,24 @@ const TestMigrationLogViewer = ({ serverPath, sendDataToParent,projectId }: Logs } })}
- } + )}
- - {/* Action buttons for scrolling and zooming */} - {!migratedStack?.isMigrated && !logs?.every((log) => log.message === "Migration logs will appear here once the process begins.") && ( -
- - - {MAGNIFY} - {DEMAGNIFY} - -
- )} + + {/* Action buttons for scrolling and zooming */} + {!migratedStack?.isMigrated && + !logs?.every( + (log) => log.message === 'Migration logs will appear here once the process begins.' + ) && ( +
+ + + {MAGNIFY} + {DEMAGNIFY} + +
+ )}
); }; -export default TestMigrationLogViewer; \ No newline at end of file +export default TestMigrationLogViewer; diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss index 8dac578f5..31cc2ac2c 100644 --- a/ui/src/components/MainHeader/index.scss +++ b/ui/src/components/MainHeader/index.scss @@ -1,17 +1,17 @@ @import '../../scss/variables'; .mainheader { - [class*="Profile_card"] { - [class*="Dropdown__menu__list"] { + [class*='Profile_card'] { + [class*='Dropdown__menu__list'] { max-height: 203px; padding: 0; } - [class*="Dropdown__menu__list__item"] { + [class*='Dropdown__menu__list__item'] { pointer-events: none; padding: 0; - [class*="profile-card__logout"] { + [class*='profile-card__logout'] { pointer-events: all; } } @@ -119,4 +119,4 @@ top: 3rem; width: 300px; } -} \ No newline at end of file +} diff --git a/ui/src/components/MigrationFlowHeader/index.scss b/ui/src/components/MigrationFlowHeader/index.scss index 70cad8253..2f05dcd4d 100644 --- a/ui/src/components/MigrationFlowHeader/index.scss +++ b/ui/src/components/MigrationFlowHeader/index.scss @@ -12,7 +12,7 @@ } } .project-name-ellipsis { - max-width: 1210px; + max-width: 1210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/ui/src/components/ProfileHeader/index.scss b/ui/src/components/ProfileHeader/index.scss index 7e0b2a75b..73931d338 100644 --- a/ui/src/components/ProfileHeader/index.scss +++ b/ui/src/components/ProfileHeader/index.scss @@ -24,11 +24,10 @@ justify-content: center; font-size: 24px; margin: 12px auto; - } .profile-card__name { - color: #6E6B86; + color: #6e6b86; font-size: $size-font-large; font-weight: $font-weight-semi-bold; line-height: $line-height-default; @@ -37,7 +36,7 @@ } .profile-card__email { - color: #6E6B86; + color: #6e6b86; font-size: $size-font-small; line-height: $line-height-default; margin-top: 2px; @@ -59,7 +58,7 @@ } .profile-card__logout-text { - color: #6E6B86; + color: #6e6b86; font-size: $size-font-large; &:hover { text-decoration: underline; @@ -74,10 +73,10 @@ height: 64px; top: 0; left: 0; - background-color: #F9F8FF; + background-color: #f9f8ff; z-index: 1; } .profile-card__avatar { z-index: 2; position: relative; -} \ No newline at end of file +} diff --git a/ui/src/components/SideBar/index.scss b/ui/src/components/SideBar/index.scss index dc581bd62..84201e3b2 100644 --- a/ui/src/components/SideBar/index.scss +++ b/ui/src/components/SideBar/index.scss @@ -1,6 +1,6 @@ @import '../../scss/variables'; .recycle-wrapper { - margin-top: -1px; - background-color: $color-brand-white-base; - z-index: 99; -} \ No newline at end of file + margin-top: -1px; + background-color: $color-brand-white-base; + z-index: 99; +} diff --git a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss index ef135821a..f8549cec1 100644 --- a/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss +++ b/ui/src/components/Stepper/HorizontalStepper/HorizontalStepper.scss @@ -15,8 +15,7 @@ flex-direction: column; align-items: flex-start; } - -} +} .stepWrapperContainer { display: flex; @@ -24,8 +23,7 @@ justify-content: center; position: relative; flex: 0.6; - margin: 0 ; - + margin: 0; } .stepWrapper { @@ -36,13 +34,13 @@ position: relative; z-index: 1; - &.completed .badge{ - background-color:$color-brand-primary-base; + &.completed .badge { + background-color: $color-brand-primary-base; } &.active .badge { background-color: white; border: $px-2 solid $color-brand-primary-base; - color: #6E6B86; + color: #6e6b86; width: 40px; height: 40px; } @@ -53,7 +51,7 @@ align-items: center; background-color: white; border: 0.063rem solid $color-stepper-title; - color: #6E6B86; + color: #6e6b86; width: 40px; height: 40px; border-radius: 50%; @@ -72,11 +70,10 @@ overflow: hidden; white-space: nowrap; font-family: Inter; - } - &.disableEvents{ + &.disableEvents { cursor: not-allowed; - opacity: 1 !important; + opacity: 1 !important; color: #475161 !important; } } @@ -88,7 +85,7 @@ height: 4px; background-color: $color-brand-primary-base; flex-grow: 1; - margin: 0; + margin: 0; margin-bottom: 30px; border-radius: 4px; margin-left: -40px; @@ -100,14 +97,14 @@ flex-direction: column; align-items: center; } -.icon-wrapper{ +.icon-wrapper { width: 16px; height: 11px; } -.disabled-connector{ +.disabled-connector { background-color: $color-base-gray-40; flex-grow: 1; - margin: 0; + margin: 0; margin-bottom: 30px; border-radius: 4px; height: 4px; @@ -139,11 +136,11 @@ } } } -.stepper-loader{ +.stepper-loader { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; width: 100%; -} \ No newline at end of file +} diff --git a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss index 777370104..d542c0d01 100644 --- a/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss +++ b/ui/src/components/Stepper/VerticalStepper/AutoVerticalStepper.scss @@ -6,8 +6,6 @@ justify-content: flex-start; border-bottom: 1px solid $color-brand-secondary-lightest; gap: 8px; - - } .migration-vertical-stepper .stepper-title { @@ -15,7 +13,6 @@ margin: 10px 8px 10px 20px; color: $color-font-base; line-height: 21px; - } .migration-vertical-stepper .stepper-discription { @@ -83,8 +80,8 @@ } .action-summary-wrapper { - padding: $space-4 $space-24; - align-items: center; + padding: $space-4 $space-24; + align-items: center; //border: 1px solid $color-base-gray-40; //border-radius: var(--TermCount, 5px); //background: $color-brand-white-base; @@ -103,11 +100,11 @@ height: $space-24; margin-right: $space-10; } -.step_block{ +.step_block { border-radius: 4px; border: 1px solid $color-brand-secondary-lightest; background-color: $color-brand-white-base; - padding: 24px 30px, 24px, 30px; + padding: 24px 30px, 24px, 30px; gap: 24px; margin-bottom: 40px; } @@ -120,13 +117,13 @@ } } .asterisk_input::after { - content:" *"; + content: ' *'; color: $color-brand-warning-medium; - margin: 2px 0px 0px -15px; - font-size:medium; - padding: 10px 5px 0 0 !important; - padding-left: .25em; + margin: 2px 0px 0px -15px; + font-size: medium; + padding: 10px 5px 0 0 !important; + padding-left: 0.25em; } -.required-text{ +.required-text { margin-left: -5px; -} \ No newline at end of file +} diff --git a/ui/src/components/TestMigration/index.scss b/ui/src/components/TestMigration/index.scss index 8a8473c15..cfdbc9a24 100644 --- a/ui/src/components/TestMigration/index.scss +++ b/ui/src/components/TestMigration/index.scss @@ -5,4 +5,4 @@ max-height: 70vh; overflow-y: auto; overflow-x: hidden; -} \ No newline at end of file +} diff --git a/ui/src/components/TestMigration/index.tsx b/ui/src/components/TestMigration/index.tsx index 02b62d9d5..9bc354f67 100644 --- a/ui/src/components/TestMigration/index.tsx +++ b/ui/src/components/TestMigration/index.tsx @@ -128,7 +128,7 @@ const TestMigration = () => { return; } } catch (error) { - console.log(error); + console.error(error); } // Prepare data for stack creation @@ -178,7 +178,15 @@ const TestMigration = () => { dispatch(updateNewMigrationData((newMigrationDataObj))); } } catch (err) { - console.log(err); + console.error(err); + Notification({ + notificationContent: { text: err }, + notificationProps: { + position: 'bottom-center', + hideProgressBar: true + }, + type: 'error' + }); } } @@ -224,7 +232,7 @@ const TestMigration = () => { }); } } catch (error) { - console.log(error); + console.error(error); } }