Nurfog
a3467d22d3
- Added support for ZIP RAG import in the asset management system. - Introduced a new background task type for ZIP RAG imports. - Enhanced the asset import process to allow for optional development processing. - Updated the UI to reflect the new RAG processing status and options. - Created database migration for background tasks related to ZIP RAG imports. - Refactored asset handling to support FLV normalization and improved error handling. - Added new API endpoints and updated existing ones to accommodate changes.
203 lines
11 KiB
TypeScript
203 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { cmsApi, BackgroundTask } from "@/lib/api";
|
|
import { Loader2, RefreshCw, XCircle, PlayCircle } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import ProtectedRoute from "@/components/AuthGuard";
|
|
|
|
export default function BackgroundTasksPage() {
|
|
const [tasks, setTasks] = useState<BackgroundTask[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
|
|
|
const fetchTasks = async () => {
|
|
try {
|
|
const data = await cmsApi.getBackgroundTasks();
|
|
setTasks(data);
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
const interval = setInterval(fetchTasks, 5000); // Poll every 5 seconds
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const handleRetry = async (id: string) => {
|
|
setActionLoading(id);
|
|
try {
|
|
await cmsApi.retryTask(id);
|
|
await fetchTasks();
|
|
} catch (error) {
|
|
console.error("Failed to retry task", error);
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const handleCancel = async (id: string) => {
|
|
if (!confirm("Are you sure you want to cancel this task? It will be removed from the queue.")) return;
|
|
setActionLoading(id);
|
|
try {
|
|
await cmsApi.cancelTask(id);
|
|
await fetchTasks();
|
|
} catch (error) {
|
|
console.error("Failed to cancel task", error);
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
const getStatusBadge = (task: BackgroundTask) => {
|
|
const status = task.status;
|
|
const progress = task.progress;
|
|
|
|
switch (status) {
|
|
case 'processing':
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-semibold flex items-center gap-1 w-fit">
|
|
<Loader2 className="w-3 h-3 animate-spin" /> Processing
|
|
</span>
|
|
{task.task_type !== 'lesson_transcription' && (
|
|
<div className="w-full bg-gray-200 rounded-full h-1.5 mt-1 max-w-[150px]">
|
|
<div
|
|
className="bg-blue-600 h-1.5 rounded-full transition-all duration-500 ease-out"
|
|
style={{ width: `${progress}%` }}
|
|
></div>
|
|
<div className="text-[10px] text-gray-400 mt-1 font-medium">{progress}% completo</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
case 'queued':
|
|
return <span className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-semibold w-fit">Queued</span>;
|
|
case 'failed':
|
|
case 'error':
|
|
return <span className="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-semibold w-fit">Failed</span>;
|
|
case 'completed':
|
|
return <span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-semibold w-fit">Completed</span>;
|
|
case 'idle':
|
|
return <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-semibold w-fit">Idle</span>;
|
|
default:
|
|
return <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs font-semibold w-fit">{status}</span>;
|
|
}
|
|
};
|
|
|
|
const getTaskTypeBadge = (type: string) => {
|
|
let label = 'Unknown';
|
|
let color = 'bg-slate-100 text-slate-800';
|
|
|
|
switch (type) {
|
|
case 'lesson_transcription':
|
|
label = 'Transcription';
|
|
color = 'bg-purple-100 text-purple-800';
|
|
break;
|
|
case 'zip_rag_import':
|
|
label = 'ZIP RAG';
|
|
color = 'bg-indigo-100 text-indigo-800';
|
|
break;
|
|
case 'lesson_image':
|
|
label = 'Lesson Image';
|
|
color = 'bg-blue-100 text-blue-800';
|
|
break;
|
|
case 'course_image':
|
|
label = 'Course Cover';
|
|
color = 'bg-emerald-100 text-emerald-800';
|
|
break;
|
|
}
|
|
|
|
return <span className={`${color} px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider`}>{label}</span>;
|
|
};
|
|
|
|
return (
|
|
<ProtectedRoute>
|
|
<div className="p-8">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Background Tasks</h1>
|
|
<p className="text-gray-500">Monitor and manage asynchronous processing jobs and AI transcriptions.</p>
|
|
</div>
|
|
<button onClick={fetchTasks} className="p-2 hover:bg-gray-100 rounded-full text-gray-600 transition-colors">
|
|
<RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
|
|
</button>
|
|
</div>
|
|
|
|
{loading && tasks.length === 0 ? (
|
|
<div className="flex justify-center p-12"><Loader2 className="w-8 h-8 animate-spin text-indigo-600" /></div>
|
|
) : tasks.length === 0 ? (
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-12 text-center">
|
|
<div className="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<span className="text-2xl">🌱</span>
|
|
</div>
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">All Clear</h3>
|
|
<p className="text-gray-500">There are no pending or stuck background tasks at the moment.</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white shadow-sm border border-gray-200 rounded-lg overflow-hidden">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task / Context</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
|
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{tasks.map((task) => (
|
|
<tr key={task.id} className="hover:bg-gray-50 transition-colors">
|
|
<td className="px-6 py-4">
|
|
<div className="font-medium text-gray-900">{task.title}</div>
|
|
<div className="text-sm text-gray-500">{task.course_title || 'Unknown Course'}</div>
|
|
<div className="text-xs text-gray-400 font-mono mt-1">{task.id}</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{getTaskTypeBadge(task.task_type)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{getStatusBadge(task)}
|
|
</td>
|
|
<td className="px-6 py-4 text-sm text-gray-500">
|
|
{format(new Date(task.updated_at), 'MMM d, h:mm a')}
|
|
<div className="text-xs text-gray-400">({format(new Date(task.updated_at), 'yyyy')})</div>
|
|
</td>
|
|
<td className="px-6 py-4 text-right space-x-2">
|
|
{task.task_type === 'lesson_transcription' && task.status === 'failed' && (
|
|
<button
|
|
onClick={() => handleRetry(task.id)}
|
|
disabled={actionLoading === task.id}
|
|
className="inline-flex items-center px-3 py-1.5 border border-indigo-200 text-xs font-medium rounded-md text-indigo-700 bg-indigo-50 hover:bg-indigo-100 disabled:opacity-50"
|
|
>
|
|
{actionLoading === task.id ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : <PlayCircle className="w-3 h-3 mr-1" />}
|
|
Retry
|
|
</button>
|
|
)}
|
|
{task.task_type === 'lesson_transcription' && (
|
|
<button
|
|
onClick={() => handleCancel(task.id)}
|
|
disabled={actionLoading === task.id}
|
|
className="inline-flex items-center px-3 py-1.5 border border-red-200 text-xs font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 disabled:opacity-50"
|
|
>
|
|
{actionLoading === task.id ? <Loader2 className="w-3 h-3 animate-spin mr-1" /> : <XCircle className="w-3 h-3 mr-1" />}
|
|
Cancel
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ProtectedRoute>
|
|
);
|
|
}
|