main migration stack added to dropdown, table-header added to empty state, css fix for empty state and dropdown

Author: yashin4112

ui/src/components/ExecutionLogs/executionlog.interface.ts

@@ -8,10 +8,12 @@ export type LogEntry = {
 export type StackIds = {
   stackUid?: string;
   stackName?: string;
+  isMigrated?: boolean;
 };
 
+
 export type DropdownOption = {
-  label: string;
+  label: string ;
   value: string;
 };
 

ui/src/components/ExecutionLogs/index.scss

@@ -12,8 +12,6 @@
 }
 
 .dropdown-wrapper {
-  display: flex;
-  justify-content: center;
   margin-bottom: 8px;
 }
 
@@ -31,6 +29,11 @@
   height: auto;
 }
 
+.Table:has(.custom-empty-state) {
+    height: 40.5rem;
+}
+
+
 .custom-empty-state {
   .Icon--original {
     width: 207px !important;

ui/src/components/ExecutionLogs/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
   InfiniteScrollTable,
-  Dropdown,
   Button,
   EmptyState,
   Select
@@ -17,7 +16,7 @@ import { getMigrationLogs } from '../../services/api/migration.service';
 const ExecutionLogs = ({ projectId }: { projectId: string }) => {
   const [data, setData] = useState<LogEntry[]>([]);
   const [loading, setLoading] = useState(true);
-  const [totalCounts, setTotalCounts] = useState<number | 0>(0);
+  const [totalCounts, setTotalCounts] = useState<number>(0);
   const [searchText, setSearchText] = useState<string>('');
   const [filterOption, setFilterOption] = useState<FilterOption[]>([]);
   const [isCursorInside, setIsCursorInside] = useState(false);
@@ -29,25 +28,42 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
     (state: RootState) => state?.authentication?.selectedOrganisation
   );
 
-  const stacks = useSelector((state: RootState) => state?.migration?.newMigrationData?.testStacks);
+  const testStacks = useSelector(
+    (state: RootState) => state?.migration?.newMigrationData?.testStacks
+  );
+  console.info(testStacks.length)
+  const mainStack = useSelector(
+    (state: RootState) => state?.migration?.newMigrationData?.stackDetails
+  );
+  const migrationCompleted = useSelector(
+    (state: RootState) =>
+      state?.migration?.newMigrationData?.migration_execution?.migrationCompleted
+  );
 
-  const stackIds = stacks?.map((stack: StackIds) => ({
+  const stackIds = testStacks?.map((stack: StackIds) => ({
     label: stack?.stackName,
     value: stack?.stackUid
   }));
 
-  const [selectedStackId, setSelectedStackId] = useState<string>(
-    stackIds[stackIds.length - 1]?.value ?? ''
-  );
-  const [selectedStackName, setSelectedStackName] = useState<string>(
-    stackIds[stackIds.length - 1]?.label ?? ''
+  if (migrationCompleted) {
+    stackIds?.push({
+      label: mainStack?.label,
+      value: mainStack?.value
+    });
+  }
+
+  const [selectedStack, setSelectedStack] = useState<DropdownOption>(
+    {
+      label: stackIds[stackIds.length - 1]?.label ?? '' ,
+      value: stackIds[stackIds.length - 1]?.value ?? '' 
+    }
   );
 
   useEffect(() => {
-    if (selectedStackId) {
+    if (selectedStack) {
       fetchData({});
     }
-  }, [selectedStackId]);
+  }, [selectedStack]);
 
   const ColumnFilter = () => {
     const closeModal = () => {
@@ -224,7 +240,7 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
   }) => {
     searchText = searchText === '' ? 'null' : searchText;
 
-    if (!selectedStackId) {
+    if (!selectedStack) {
       setLoading(false);
       return;
     }
@@ -234,7 +250,7 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
       const response = await getMigrationLogs(
         selectedOrganisation?.value || '',
         projectId,
-        selectedStackId,
+        selectedStack.value,
         skip,
         limit,
         startIndex,
@@ -265,7 +281,6 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
       <InfiniteScrollTable
         tableHeight={590}
         itemSize={60}
-        TABLE_HEAD_HEIGHT={0}
         columns={columns}
         data={data}
         uniqueKey={'timestamp'}
@@ -275,7 +290,8 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
         rowPerPageOptions={[10, 30, 50, 100]}
         minBatchSizeToFetch={30}
         v2Features={{
-          pagination: true
+          pagination: true,
+          isNewEmptyState : true
         }}
         isResizable={true}
         isRowSelect={false}
@@ -286,24 +302,18 @@ const ExecutionLogs = ({ projectId }: { projectId: string }) => {
         onSearchChangeEvent={(value: string) => setSearchText(value)}
         withExportCta={{
           component: (
-              <Select
-                width="250px"
-                version="v2"
-                value={selectedStackName}
-                options={stackIds}
-                placeholder={
-                  selectedStackName === ''
-                    ? stackIds.length > 0
-                      ? 'Select Stack Id'
-                      : 'No stack created'
-                    : selectedStackName
-                }
-                onChange={(s: DropdownOption) => {
-                  setSelectedStackId(s.value);
-                  setSelectedStackName(s.label);
-                  setSearchText('');
-                }}
-              />
+            <Select
+              className='dropdown-wrapper'
+              width="250px"
+              version="v2"
+              value={testStacks.length ?  selectedStack : ''}
+              options={stackIds}
+              placeholder='Select a stack'
+              onChange={(s: DropdownOption) => {
+                setSelectedStack({label: s.label, value: s.value})
+                setSearchText('');
+              }}
+            />
           ),
           showExportCta: true
         }}

ui/src/components/FilterModale/index.scss

@@ -27,6 +27,12 @@
   padding: 8px 16px;
 }
 
+.tableFilterModalStories__body{
+  overflow: scroll;
+  max-height: 250px;
+  overflow-x: hidden;
+}
+
 .Checkbox {
   display: flex;
   align-items: center;
@@ -65,10 +71,10 @@
 }
 
 .close-btn:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transform: scale(1.05);
   border-radius: 8px;
-  background-color: #f0f1f3; 
+  background-color: #f0f1f3;
   cursor: pointer;
   transition:
     box-shadow 0.2s ease,

ui/src/components/FilterModale/index.tsx

@@ -32,6 +32,7 @@ const FilterModal = ({
         </div>
       </div>
       {/* Modal Body */}
+      <div className="tableFilterModalStories__body">
       <ul>
         {data.map((item) => (
           <li key={item.value}>
@@ -49,6 +50,7 @@ const FilterModal = ({
           </li>
         ))}
       </ul>
+      </div>
 
       {/* Modal Footer */}
       <div className="tableFilterModalStories__footer">