officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jobs: download-job UI — panel decision screen + live progress + /jobs renderer

Browse Source 
Front half of the download-job feature.

Panel (VideoDownloadPanel): after Fetch expands a playlist and the count is known,
a decision screen — "Found N items" → pick Audio/Video + subfolder → "Download all
as a job" (POST /jobs/download), or "fetch inline to pick individually" (the
existing card grid). A single video still goes straight to the inline card. The
job phase shows live two-phase progress (polled from the job) + a "View in Jobs"
link; it notes the job runs server-side so closing the panel is fine, and it
refreshes the browser as each file lands.

/jobs (DownloadJobDetail + JobsPage dispatch): a `download` job renders a compact
two-phase readout — Metadata and Download bars (processed/total, found/skipped and
saved/failed) + the current item — polled from the job's progress, with a Stop.

Executor tweak: phase-1 meta.done now counts kept (not processed) so both phases
read the same `(done+failed)/total`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-07-28 18:20:07 +00:00
co-authored by Claude Opus 4.8
parent 4e78986e39
commit bc1b799a27
4 changed files with 595 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
+83 -19
View File
@@ -1,11 +1,23 @@
import { useState, useEffect, useCallback, type ReactNode, type MouseEvent } from 'react';
import { useParams, useNavigate } from 'react-router';
import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox, Square, Trash2 } from 'lucide-react';
import {
Search,
CheckCircle2,
AlertCircle,
Clock,
Loader2,
StopCircle,
AlertTriangle,
Inbox,
Square,
Trash2,
} from 'lucide-react';
import { WorkspaceLayout } from 'officerdev';
import type { LayoutNode, PanelComponents } from 'officerdev';
import { useClient } from 'hooks/useClient';
import { Card } from '@/components/Card';
import { ScriptJobDetail } from './ScriptJobDetail';
import { DownloadJobDetail } from './DownloadJobDetail';
import { PipelineJobDetail } from './JobDetail';
type JobSummary = {
@@ -28,12 +40,18 @@ const formatDate = (iso: string) =>
const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
switch (status) {
case 'completed': return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
case 'failed': return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
case 'running': return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
case 'stopped': return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
case 'interrupted': return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
case 'pending': return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
case 'completed':
return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
case 'failed':
return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
case 'running':
return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
case 'stopped':
return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
case 'interrupted':
return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
case 'pending':
return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
}
};
@@ -43,7 +61,14 @@ const useJobsData = () => {
const [jobs, setJobs] = useState<JobSummary[]>([]);
const [isLoading, setIsLoading] = useState(true);
const load = useCallback(
() => client.get<JobSummary[]>('/jobs').then((d) => { setJobs(d); setIsLoading(false); }).catch(() => setIsLoading(false)),
() =>
client
.get<JobSummary[]>('/jobs')
.then((d) => {
setJobs(d);
setIsLoading(false);
})
.catch(() => setIsLoading(false)),
[client],
);
useEffect(() => {
@@ -60,7 +85,12 @@ const useJobsData = () => {
},
[client, load],
);
const clearHistory = useCallback(() => { client.delete('/jobs/history').then(() => load()).catch(() => {}); }, [client, load]);
const clearHistory = useCallback(() => {
client
.delete('/jobs/history')
.then(() => load())
.catch(() => {});
}, [client, load]);
return { jobs, isLoading, act, clearHistory };
};
@@ -71,12 +101,21 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
const isRunning = job.status === 'running';
const target = basename(job.target);
return (
<div className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}>
<button onClick={() => navigate(`/jobs/${job.id}`)} className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer">
<div
className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}
>
<button
onClick={() => navigate(`/jobs/${job.id}`)}
className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer"
>
<StatusIcon status={job.status} />
<div className="flex-1 min-w-0">
<span className="text-sm font-medium text-duck-dark truncate block">{job.taskName}</span>
{target && <span className="text-xs text-duck-dark/60 truncate block" title={job.target ?? undefined}>{target}</span>}
{target && (
<span className="text-xs text-duck-dark/60 truncate block" title={job.target ?? undefined}>
{target}
</span>
)}
<div className="flex items-center gap-2 mt-0.5">
<span className="text-xs text-duck-dark/40">{formatDate(job.createdAt)}</span>
{job.error && <span className="text-xs text-red-500 truncate max-w-[160px]">{job.error}</span>}
@@ -153,7 +192,11 @@ const HistoryJobsPanel = () => {
/>
</div>
{history.length > 0 && (
<button onClick={clearHistory} title="Delete all finished jobs" className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer">
<button
onClick={clearHistory}
title="Delete all finished jobs"
className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer"
>
Clear all
</button>
)}
@@ -162,7 +205,9 @@ const HistoryJobsPanel = () => {
{isLoading ? (
<div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
) : history.length === 0 ? (
<div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{search ? 'No matches' : 'No finished jobs'}</div>
<div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
{search ? 'No matches' : 'No finished jobs'}
</div>
) : (
history.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
)}
@@ -179,9 +224,15 @@ const JobDetailPanel = () => {
const [mode, setMode] = useState<string | null>(null);
useEffect(() => {
if (!id) { setMode(null); return; }
if (!id) {
setMode(null);
return;
}
setMode(null);
client.get<{ mode?: string }>(`/jobs/${id}`).then((j) => setMode(j.mode ?? 'pipeline')).catch(() => setMode('notfound'));
client
.get<{ mode?: string }>(`/jobs/${id}`)
.then((j) => setMode(j.mode ?? 'pipeline'))
.catch(() => setMode('notfound'));
}, [id]);
if (!id) {
@@ -197,7 +248,9 @@ const JobDetailPanel = () => {
if (mode === null) {
return (
<div className="h-full p-2">
<Card className="h-full flex items-center justify-center text-duck-dark/40"><Loader2 className="h-5 w-5 animate-spin" /></Card>
<Card className="h-full flex items-center justify-center text-duck-dark/40">
<Loader2 className="h-5 w-5 animate-spin" />
</Card>
</div>
);
}
@@ -208,11 +261,22 @@ const JobDetailPanel = () => {
</div>
);
}
// Pipeline detail brings its own full chrome; the script terminal gets a card background here.
// Pipeline detail brings its own full chrome; the script terminal + download progress get a card here.
if (mode === 'script') {
return (
<div className="h-full p-2">
<Card className="h-full flex flex-col overflow-hidden"><ScriptJobDetail key={id} /></Card>
<Card className="h-full flex flex-col overflow-hidden">
<ScriptJobDetail key={id} />
</Card>
</div>
);
}
if (mode === 'download') {
return (
<div className="h-full p-2">
<Card className="h-full flex flex-col overflow-hidden">
<DownloadJobDetail key={id} />
</Card>
</div>
);
}