Fix reattaching to currently running jobs on load
This commit is contained in:
@@ -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}%` }}
|
||||
<Progress
|
||||
value={percent}
|
||||
className={barColor}
|
||||
/>
|
||||
</div>
|
||||
{/* 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);
|
||||
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');
|
||||
}
|
||||
} else if (operation.includes('update')) {
|
||||
console.log('Update is running');
|
||||
setIsUpdating(true);
|
||||
setUpdateProgress(importData.progress);
|
||||
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);
|
||||
setResetMetricsProgress(importData.progress || importData);
|
||||
if (!eventSource) {
|
||||
connectToEventSource('reset-metrics');
|
||||
}
|
||||
} else {
|
||||
console.log('Reset is running');
|
||||
setIsResetting(true);
|
||||
setResetProgress(importData.progress);
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user