63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { Badge } from '~/shared/components/ui/badge';
|
|
|
|
interface ProcessingColumnProps {
|
|
items: any[];
|
|
progress?: { id: number; seconds: number; total: number } | null;
|
|
queueStatus?: { status: string; until?: string; seconds?: number } | null;
|
|
}
|
|
|
|
export function ProcessingColumn({ items, progress, queueStatus }: ProcessingColumnProps) {
|
|
const job = items[0]; // at most one running job
|
|
|
|
const formatTime = (s: number) => {
|
|
const m = Math.floor(s / 60);
|
|
const sec = Math.floor(s % 60);
|
|
return `${m}:${String(sec).padStart(2, '0')}`;
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col w-72 min-w-72 bg-gray-50 rounded-lg">
|
|
<div className="px-3 py-2 border-b font-medium text-sm">Processing</div>
|
|
<div className="flex-1 p-3">
|
|
{queueStatus && queueStatus.status !== 'running' && (
|
|
<div className="mb-3 text-xs text-gray-500 bg-white rounded border p-2">
|
|
{queueStatus.status === 'paused' && <>Paused until {queueStatus.until}</>}
|
|
{queueStatus.status === 'sleeping' && <>Sleeping {queueStatus.seconds}s between jobs</>}
|
|
{queueStatus.status === 'idle' && <>Idle</>}
|
|
</div>
|
|
)}
|
|
|
|
{job ? (
|
|
<div className="rounded border bg-white p-3">
|
|
<p className="text-sm font-medium truncate">{job.name}</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant="running">running</Badge>
|
|
<Badge variant={job.job_type === 'transcode' ? 'manual' : 'noop'}>
|
|
{job.job_type}
|
|
</Badge>
|
|
</div>
|
|
|
|
{progress && progress.total > 0 && (
|
|
<div className="mt-3">
|
|
<div className="flex justify-between text-xs text-gray-500 mb-1">
|
|
<span>{formatTime(progress.seconds)}</span>
|
|
<span>{Math.round((progress.seconds / progress.total) * 100)}%</span>
|
|
<span>{formatTime(progress.total)}</span>
|
|
</div>
|
|
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-blue-500 rounded-full transition-all"
|
|
style={{ width: `${Math.min(100, (progress.seconds / progress.total) * 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-400 text-center py-8">No active job</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|