update processing flow

Author: Shreyas-Microsoft

src/frontend/src/components/uploadButton.tsx

@@ -339,16 +339,15 @@ const FileUploadZone: React.FC<FileUploadZoneProps> = ({
         };
 
         if (uploadingFiles.length > 0) {
-          // First navigate to loading page before starting processing
+          // First navigate to modernization page to show progress
           navigate(`/batch-process/${batchId}`);
 
-          // Then dispatch the action and wait for it to complete
+          // Then dispatch the action
           try {
             dispatch(startProcessing(payload));
-            return batchId; // Return the batchId after processing completes
+            return batchId;
           } catch (error) {
             console.error('Processing failed:', error);
-            // Still return the batchId even if processing failed
             return batchId;
           }
         }

src/frontend/src/pages/modernizationPage.tsx

@@ -4,6 +4,7 @@ import Header from "../components/Header/Header";
 import HeaderTools from "../components/Header/HeaderTools";
 import PanelLeft from "../components/Panels/PanelLeft";
 import webSocketService from "../api/WebSocketService";
+import { useSelector } from 'react-redux';
 import {
   Button,
   Text,
@@ -478,6 +479,9 @@ const ModernizationPage = () => {
   const { batchId } = useParams<{ batchId: string }>();
   const navigate = useNavigate()
 
+  // Redux state to listen for start processing completion
+  const batchState = useSelector((state: any) => state.batch);
+  
   const [batchSummary, setBatchSummary] = useState<BatchSummary | null>(null);
   const styles = useStyles()
   const [text, setText] = useState("");
@@ -498,6 +502,8 @@ const ModernizationPage = () => {
   const [isZipButtonDisabled, setIsZipButtonDisabled] = useState(true);
   const [fileLoading, setFileLoading] = useState(false);
   const [selectedFileTranslatedContent, setSelectedFileTranslatedContent] = useState<string>("");
+  const [lastActivityTime, setLastActivityTime] = useState<number>(Date.now());
+  const [pageLoadTime] = useState<number>(Date.now());
 
   // Fetch file content when a file is selected
   useEffect(() => {
@@ -593,6 +599,19 @@ const ModernizationPage = () => {
     fetchBatchData(batchId);
   }, [batchId]);
 
+  // Listen for startProcessing completion and navigate to batch view
+  useEffect(() => {
+    if (batchState && !batchState.loading && batchState.status === "Processing completed") {
+      console.log("Start processing API completed successfully - processing is done!");
+      
+      // Check if we have the response with batch_id that matches current batchId
+      if (batchState.batchId === batchId) {
+        console.log("Processing completed for current batch, navigating to batch view page");
+        navigate(`/batch-view/${batchId}`);
+      }
+    }
+  }, [batchState.loading, batchState.status, batchState.batchId, batchId, navigate]);
+
   const handleDownloadZip = async () => {
     if (batchId) {
       try {
@@ -789,11 +808,39 @@ const ModernizationPage = () => {
     try {
       const latestBatch = await fetchBatchSummary(batchId!);
       setBatchSummary(latestBatch);
+      
+      // Check if all files are in terminal states OR if the batch itself is marked as completed
       const allFilesDone = latestBatch.files.every(file =>
         ["completed", "failed", "error"].includes(file.status?.toLowerCase() || "")
       );
+      
+      // Also check if batch status indicates completion (for cases where some files remain queued)
+      const batchCompleted = latestBatch.status?.toLowerCase() === "completed" || 
+                            latestBatch.status?.toLowerCase() === "failed";
+      
+      // Special handling for stuck processing files - if no completed files and long time passed
+      const hasProcessingFiles = latestBatch.files.some(file => 
+        file.status?.toLowerCase() === "in_process"
+      );
+      const hasCompletedFiles = latestBatch.files.some(file => 
+        file.status?.toLowerCase() === "completed"
+      );
+      const timeSinceLastActivity = Date.now() - lastActivityTime;
+      const likelyStuckProcessing = hasProcessingFiles && 
+                                   !hasCompletedFiles && 
+                                   timeSinceLastActivity > 60000; // 60 seconds of no activity
+      
+      // Consider processing done if either all files are terminal OR batch is marked complete OR files appear stuck
+      const processingComplete = allFilesDone || batchCompleted || likelyStuckProcessing;
 
-      if (allFilesDone) {
+      if (processingComplete) {
+        console.log("Processing complete detected:", {
+          allFilesDone,
+          batchCompleted,
+          likelyStuckProcessing,
+          batchStatus: latestBatch.status,
+          timeSinceActivity: timeSinceLastActivity
+        });
         setAllFilesCompleted(true);
         const hasUsableFile = latestBatch.files.some(file =>
           file.status?.toLowerCase() === "completed" &&
@@ -820,7 +867,7 @@ const ModernizationPage = () => {
         });
 
         // Navigate to batch view page when processing is complete
-        console.log("All files processed, navigating to batch view page");
+        console.log("Processing complete (either all files done or batch completed), navigating to batch view page");
         navigate(`/batch-view/${batchId}`);
       }
     } catch (err) {
@@ -838,6 +885,7 @@ const ModernizationPage = () => {
     }
 
     setFileId(data.file_id);
+    setLastActivityTime(Date.now()); // Update activity time on WebSocket message
 
     const agent = formatAgent(data.agent_type);
     const message = formatDescription(data.agent_message);
@@ -900,11 +948,23 @@ useEffect(() => {
       file.id === "summary" || // skip summary
       ["completed", "failed", "error"].includes(file.status?.toLowerCase() || "")
     );
+    
+    // Also check if we have at least one completed file and no files currently processing
+    const hasCompletedFiles = files.some(file => 
+      file.id !== "summary" && file.status === "completed"
+    );
+    const hasProcessingFiles = files.some(file => 
+      file.id !== "summary" && file.status === "in_process"
+    );
+    
+    // Consider done if all terminal OR (has completed files and no processing files)
+    const effectivelyDone = areAllFilesTerminal || (hasCompletedFiles && !hasProcessingFiles);
 
-    if (files.length > 1 && areAllFilesTerminal && !allFilesCompleted) {
+    if (files.length > 1 && effectivelyDone && !allFilesCompleted) {
+      console.log("Files processing appears complete, checking batch status");
       updateSummaryStatus(); 
     }
-  }, [files, allFilesCompleted]);
+  }, [files, allFilesCompleted, updateSummaryStatus]);
 
 
 useEffect(() => {
@@ -962,6 +1022,45 @@ useEffect(() => {
     return () => clearTimeout(loadingTimeout);
   }, [progressPercentage, showLoading]);
 
+  // Add timeout mechanism to navigate if no activity for 30 seconds
+  useEffect(() => {
+    const checkInactivity = setInterval(() => {
+      const timeSinceLastActivity = Date.now() - lastActivityTime;
+      const hasCompletedFiles = files.some(file => 
+        file.id !== "summary" && file.status === "completed"
+      );
+      const hasProcessingFiles = files.some(file => 
+        file.id !== "summary" && file.status === "in_process"
+      );
+      const nonSummaryFiles = files.filter(f => f.id !== "summary");
+      
+      // If we have completed files and no activity for 30 seconds, check if we should navigate
+      if (hasCompletedFiles && timeSinceLastActivity > 30000 && !allFilesCompleted) {
+        console.log("No activity for 30 seconds with completed files, checking final status");
+        updateSummaryStatus();
+      }
+      
+      // Special case: If only harmful files that are stuck in processing for 60+ seconds
+      if (nonSummaryFiles.length > 0 && 
+          hasProcessingFiles && 
+          !hasCompletedFiles && 
+          timeSinceLastActivity > 60000 && 
+          !allFilesCompleted) {
+        console.log("Files stuck in processing for 60+ seconds, likely failed - checking batch status");
+        updateSummaryStatus();
+      }
+      
+      // Ultimate fallback: If on page for 2+ minutes with no completion, force navigation
+      const timeSincePageLoad = Date.now() - pageLoadTime;
+      if (timeSincePageLoad > 120000 && !allFilesCompleted && nonSummaryFiles.length > 0) {
+        console.log("Page loaded for 2+ minutes without completion, forcing navigation to batch view");
+        navigate(`/batch-view/${batchId}`);
+      }
+    }, 5000); // Check every 5 seconds
+
+    return () => clearInterval(checkInactivity);
+  }, [lastActivityTime, files, allFilesCompleted, updateSummaryStatus, pageLoadTime, navigate, batchId]);
+
 
   useEffect(() => {
     console.log('Current files state:', files);

src/frontend/src/slices/batchSlice.ts

@@ -174,6 +174,7 @@ const initialState: {
   batchId: string | null;
   fileId: string | null;
   message: string;
+  status: string | null;
   loading: boolean;
   error: string | null;
   uploadingFiles: boolean;
@@ -192,6 +193,7 @@ const initialState: {
   batchId: null,
   fileId: null,
   message: '',
+  status: null,
   loading: false,
   error: null,
   uploadingFiles: false,
@@ -207,6 +209,7 @@ export const batchSlice = createSlice({
       state.batchId = null;
       state.fileId = null
       state.message = '';
+      state.status = null;
       state.error = null;
     },
   },
@@ -288,7 +291,8 @@ export const batchSlice = createSlice({
         if (action.payload) {
           console.log("Action Payload", action.payload);
           state.batchId = action.payload.batch_id;
-          state.message = "Processing started successfully";
+          state.status = action.payload.status; // Store the actual status from backend
+          state.message = action.payload.message; // Store the actual message from backend
         } else {
           state.error = "Unexpected response: Payload is undefined.";
         }