xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

fix: Auto-refresh EventLog every 10s for processing/queued videos

Browse source 
Previously the event log only loaded once when the row was expanded,
so mid-pipeline videos only showed start events. Now the EventLog
component accepts a status prop and polls every 10s when the video is
processing or queued, silently updating without showing a loading spinner.
This commit is contained in:
jlightner 2026-03-31 16:23:33 +00:00
parent b0ad4c2dfc
commit 6f1c7dae00
1 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/pages/AdminPipeline.tsx
View file

@ -215,7 +215,7 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
// ── Event Log ──────────────────────────────────────────────────────────────── // ── Event Log ────────────────────────────────────────────────────────────────
function EventLog({ videoId }: { videoId: string }) { function EventLog({ videoId, status }: { videoId: string; status: string }) {
const [events, setEvents] = useState<PipelineEvent[]>([]); const [events, setEvents] = useState<PipelineEvent[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -223,9 +223,10 @@ function EventLog({ videoId }: { videoId: string }) {
const [offset, setOffset] = useState(0); const [offset, setOffset] = useState(0);
const [viewMode, setViewMode] = useState<"head" | "tail">("tail"); const [viewMode, setViewMode] = useState<"head" | "tail">("tail");
const limit = 50; const limit = 50;
const initialLoaded = useRef(false);
const load = useCallback(async () => { const load = useCallback(async (silent = false) => {
setLoading(true); if (!silent) setLoading(true);
setError(null); setError(null);
try { try {
const res = await fetchPipelineEvents(videoId, { const res = await fetchPipelineEvents(videoId, {
@ -235,10 +236,11 @@ function EventLog({ videoId }: { videoId: string }) {
}); });
setEvents(res.items); setEvents(res.items);
setTotal(res.total); setTotal(res.total);
initialLoaded.current = true;
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Failed to load events"); if (!silent) setError(err instanceof Error ? err.message : "Failed to load events");
} finally { } finally {
setLoading(false); if (!silent) setLoading(false);
} }
}, [videoId, offset, viewMode]); }, [videoId, offset, viewMode]);
@ -246,6 +248,13 @@ function EventLog({ videoId }: { videoId: string }) {
void load(); void load();
}, [load]); }, [load]);
// Auto-refresh when video is actively processing
useEffect(() => {
if (status !== "processing" && status !== "queued") return;
const id = setInterval(() => void load(true), 10_000);
return () => clearInterval(id);
}, [status, load]);
if (loading) return <div className="loading">Loading events…</div>; if (loading) return <div className="loading">Loading events…</div>;
if (error) return <div className="loading error-text">Error: {error}</div>; if (error) return <div className="loading error-text">Error: {error}</div>;
if (events.length === 0) return <div className="pipeline-events__empty">No events recorded.</div>; if (events.length === 0) return <div className="pipeline-events__empty">No events recorded.</div>;
@ -1056,7 +1065,7 @@ export default function AdminPipeline() {
<span>Created: {formatDate(video.created_at)}</span> <span>Created: {formatDate(video.created_at)}</span>
<span>Updated: {formatDate(video.updated_at)}</span> <span>Updated: {formatDate(video.updated_at)}</span>
</div> </div>
<EventLog videoId={video.id} /> <EventLog videoId={video.id} status={video.processing_status} />
</div> </div>
)} )}
</div> </div>