From 6940b2fe7bccfc6f992289eaba1a483886bcac49 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Wed, 15 Jan 2025 10:16:33 -0500
Subject: [PATCH] Fix reattaching to currently running jobs on load

---
 .../components/settings/DataManagement.tsx    | 94 ++++++++++++-------
 1 file changed, 61 insertions(+), 33 deletions(-)

diff --git a/inventory/src/components/settings/DataManagement.tsx b/inventory/src/components/settings/DataManagement.tsx
index 9ab9209..c756239 100644
--- a/inventory/src/components/settings/DataManagement.tsx
+++ b/inventory/src/components/settings/DataManagement.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
+import { Progress } from "@/components/ui/progress"; // Import Progress component from shadcn
 import {
   AlertDialog,
   AlertDialogAction,
@@ -128,7 +128,7 @@ export function DataManagement() {
   };
 
   // Helper function to render progress
-  const renderProgress = (progress: any) => {
+  const renderProgress = (progress: any, operationType: 'update' | 'import' | 'reset' | 'reset-metrics' | 'calculate-metrics') => {
     if (!progress) return null;
 
     const status = progress.status?.toLowerCase();
@@ -156,12 +156,10 @@ export function DataManagement() {
             {isFinished ? statusText : `${percent}%`}
           </span>
         </div>
-        <div className="w-full bg-gray-200 rounded-full h-2.5">
-          <div
-            className={`h-2.5 rounded-full ${barColor} transition-all duration-500`}
-            style={{ width: isFinished ? '100%' : `${percent}%` }}
-          />
-        </div>
+        <Progress 
+          value={percent} 
+          className={barColor}
+        />
         {/* Additional details */}
         <div className="flex flex-col gap-1 text-xs text-gray-600">
           {/* Progress details (only show during active progress) */}
@@ -205,7 +203,7 @@ export function DataManagement() {
           )}
 
           {/* Error message */}
-          {isError && progress.error && !progress.error.includes('cancelled') && !cancelledOperations.has(type) && (
+          {isError && progress.error && !progress.error.includes('cancelled') && !cancelledOperations.has(operationType) && (
             <div className="text-red-600 whitespace-pre-wrap">
               {progress.error}
             </div>
@@ -492,6 +490,7 @@ export function DataManagement() {
   // Check status on mount and periodically
   useEffect(() => {
     const checkStatus = async () => {
+      console.log('Checking status...');
       try {
         // Check all operations in parallel
         const [metricsResponse, importResponse] = await Promise.all([
@@ -503,14 +502,25 @@ export function DataManagement() {
           }).catch(() => null)
         ]);
 
+        console.log('Got responses:', { 
+          metricsOk: metricsResponse?.ok,
+          importOk: importResponse?.ok 
+        });
+
         // Handle metrics status
         if (metricsResponse?.ok) {
           const metricsData = await metricsResponse.json().catch(() => null);
-          if (metricsData?.active) {
+          console.log('Metrics data:', metricsData);
+          
+          if (metricsData?.status === 'running' || metricsData?.active) {
+            console.log('Metrics calculation is running');
             setIsCalculatingMetrics(true);
-            setMetricsProgress(metricsData.progress);
-            connectToEventSource('calculate-metrics');
+            setMetricsProgress(metricsData.progress || metricsData);
+            if (!eventSource) {
+              connectToEventSource('calculate-metrics');
+            }
           } else if (metricsData?.lastStatus) {
+            console.log('Setting last metrics status');
             setLastMetricsStatus(metricsData.lastStatus);
           }
         }
@@ -518,35 +528,50 @@ export function DataManagement() {
         // Handle import/update/reset status
         if (importResponse?.ok) {
           const importData = await importResponse.json().catch(() => null);
-          if (importData?.active) {
-            const operation = importData.progress?.operation?.toLowerCase() || '';
+          console.log('Import data:', importData);
+          
+          if (importData?.status === 'running' || importData?.active) {
+            console.log('Found running operation:', importData);
+            const operation = (importData.progress?.operation || importData.operation || '').toLowerCase();
             
             if (operation.includes('import')) {
+              console.log('Import is running');
               setIsImporting(true);
               if (operation.includes('purchase orders')) {
-                setPurchaseOrdersProgress(importData.progress);
+                setPurchaseOrdersProgress(importData.progress || importData);
               } else {
-                setImportProgress(importData.progress);
+                setImportProgress(importData.progress || importData);
+              }
+              if (!eventSource) {
+                connectToEventSource('import');
               }
-              connectToEventSource('import');
             } else if (operation.includes('update')) {
+              console.log('Update is running');
               setIsUpdating(true);
-              setUpdateProgress(importData.progress);
-              connectToEventSource('update');
+              setUpdateProgress(importData.progress || importData);
+              if (!eventSource) {
+                connectToEventSource('update');
+              }
             } else if (operation.includes('reset')) {
               if (operation.includes('metrics')) {
+                console.log('Reset metrics is running');
                 setIsResettingMetrics(true);
-                setResetMetricsProgress(importData.progress);
-                connectToEventSource('reset-metrics');
+                setResetMetricsProgress(importData.progress || importData);
+                if (!eventSource) {
+                  connectToEventSource('reset-metrics');
+                }
               } else {
+                console.log('Reset is running');
                 setIsResetting(true);
-                setResetProgress(importData.progress);
-                connectToEventSource('reset');
+                setResetProgress(importData.progress || importData);
+                if (!eventSource) {
+                  connectToEventSource('reset');
+                }
               }
             }
           } else if (importData?.lastStatus) {
-            // Handle last status based on operation type
-            const operation = importData.lastStatus?.operation?.toLowerCase() || '';
+            console.log('Setting last status for:', importData.lastStatus?.operation);
+            const operation = (importData.lastStatus?.operation || '').toLowerCase();
             if (operation.includes('import')) {
               setLastImportStatus(importData.lastStatus);
             } else if (operation.includes('update')) {
@@ -565,11 +590,14 @@ export function DataManagement() {
       }
     };
 
-    // Check status immediately and then every 5 seconds
+    console.log('Setting up status check interval');
     checkStatus();
     const interval = setInterval(checkStatus, 5000);
 
-    return () => clearInterval(interval);
+    return () => {
+      console.log('Cleaning up status check interval');
+      clearInterval(interval);
+    };
   }, []);
 
   const handleUpdateCSV = async () => {
@@ -845,7 +873,7 @@ export function DataManagement() {
             )}
           </div>
 
-          {(isUpdating || lastUpdateStatus) && renderProgress(updateProgress || lastUpdateStatus)}
+          {(isUpdating || lastUpdateStatus) && renderProgress(updateProgress || lastUpdateStatus, 'update')}
         </CardContent>
       </Card>
 
@@ -887,8 +915,8 @@ export function DataManagement() {
 
           {(isImporting || lastImportStatus) && (
             <div className="space-y-4">
-              {renderProgress(importProgress || lastImportStatus)}
-              {renderProgress(purchaseOrdersProgress)}
+              {renderProgress(importProgress || lastImportStatus, 'import')}
+              {renderProgress(purchaseOrdersProgress, 'import')}
             </div>
           )}
         </CardContent>
@@ -930,7 +958,7 @@ export function DataManagement() {
             )}
           </div>
 
-          {(isCalculatingMetrics || lastMetricsStatus) && renderProgress(metricsProgress || lastMetricsStatus)}
+          {(isCalculatingMetrics || lastMetricsStatus) && renderProgress(metricsProgress || lastMetricsStatus, 'calculate-metrics')}
         </CardContent>
       </Card>
 
@@ -1000,13 +1028,13 @@ export function DataManagement() {
 
           {(resetProgress || lastResetStatus) && (
             <div className="mt-4">
-              {renderProgress(resetProgress || lastResetStatus)}
+              {renderProgress(resetProgress || lastResetStatus, 'reset')}
             </div>
           )}
 
           {(resetMetricsProgress || lastResetMetricsStatus) && (
             <div className="mt-4">
-              {renderProgress(resetMetricsProgress || lastResetMetricsStatus)}
+              {renderProgress(resetMetricsProgress || lastResetMetricsStatus, 'reset-metrics')}
             </div>
           )}
         </CardContent>