Froidefond Julien
edfefc0128
Pause polling when the tab is hidden, refetch immediately when it becomes visible again, and use a 30s interval when no jobs are active instead of polling every 2s unconditionally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
373 lines
13 KiB
TypeScript
373 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useRef, useCallback } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import Link from "next/link";
|
|
import { useTranslation } from "../../lib/i18n/context";
|
|
import { Badge } from "./ui/Badge";
|
|
import { ProgressBar } from "./ui/ProgressBar";
|
|
|
|
interface Job {
|
|
id: string;
|
|
library_id: string | null;
|
|
type: string;
|
|
status: string;
|
|
current_file: string | null;
|
|
progress_percent: number | null;
|
|
processed_files: number | null;
|
|
total_files: number | null;
|
|
stats_json: {
|
|
scanned_files: number;
|
|
indexed_files: number;
|
|
errors: number;
|
|
warnings: number;
|
|
} | null;
|
|
}
|
|
|
|
// Icons
|
|
const JobsIcon = ({ className }: { className?: string }) => (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
|
<rect x="2" y="3" width="20" height="18" rx="2" />
|
|
<path d="M6 8h12M6 12h12M6 16h8" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
|
|
const SpinnerIcon = ({ className }: { className?: string }) => (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
|
<circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
|
|
<path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
|
|
const ChevronIcon = ({ className }: { className?: string }) => (
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
|
|
<path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
export function JobsIndicator() {
|
|
const { t } = useTranslation();
|
|
const [activeJobs, setActiveJobs] = useState<Job[]>([]);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
const popinRef = useRef<HTMLDivElement>(null);
|
|
const [popinStyle, setPopinStyle] = useState<React.CSSProperties>({});
|
|
|
|
useEffect(() => {
|
|
let intervalId: ReturnType<typeof setInterval> | null = null;
|
|
|
|
const fetchActiveJobs = async () => {
|
|
try {
|
|
const response = await fetch("/api/jobs/active");
|
|
if (response.ok) {
|
|
const jobs: Job[] = await response.json();
|
|
setActiveJobs(jobs);
|
|
// Adapt polling interval: 2s when jobs are active, 30s when idle
|
|
restartInterval(jobs.length > 0 ? 2000 : 30000);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to fetch jobs:", error);
|
|
}
|
|
};
|
|
|
|
const restartInterval = (ms: number) => {
|
|
if (intervalId !== null) clearInterval(intervalId);
|
|
intervalId = setInterval(fetchActiveJobs, ms);
|
|
};
|
|
|
|
const handleVisibilityChange = () => {
|
|
if (document.hidden) {
|
|
if (intervalId !== null) {
|
|
clearInterval(intervalId);
|
|
intervalId = null;
|
|
}
|
|
} else {
|
|
// Refetch immediately when tab becomes visible, then resume polling
|
|
fetchActiveJobs();
|
|
}
|
|
};
|
|
|
|
fetchActiveJobs();
|
|
document.addEventListener("visibilitychange", handleVisibilityChange);
|
|
|
|
return () => {
|
|
if (intervalId !== null) clearInterval(intervalId);
|
|
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
|
};
|
|
}, []);
|
|
|
|
// Position the popin relative to the button
|
|
const updatePosition = useCallback(() => {
|
|
if (!buttonRef.current) return;
|
|
const rect = buttonRef.current.getBoundingClientRect();
|
|
const isMobile = window.innerWidth < 640;
|
|
|
|
if (isMobile) {
|
|
setPopinStyle({
|
|
position: "fixed",
|
|
top: `${rect.bottom + 8}px`,
|
|
left: "12px",
|
|
right: "12px",
|
|
});
|
|
} else {
|
|
// Align right edge of popin with right edge of button
|
|
const rightEdge = window.innerWidth - rect.right;
|
|
setPopinStyle({
|
|
position: "fixed",
|
|
top: `${rect.bottom + 8}px`,
|
|
right: `${Math.max(rightEdge, 12)}px`,
|
|
width: "384px", // w-96
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
updatePosition();
|
|
window.addEventListener("resize", updatePosition);
|
|
window.addEventListener("scroll", updatePosition, true);
|
|
return () => {
|
|
window.removeEventListener("resize", updatePosition);
|
|
window.removeEventListener("scroll", updatePosition, true);
|
|
};
|
|
}, [isOpen, updatePosition]);
|
|
|
|
// Close when clicking outside
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const target = event.target as Node;
|
|
if (
|
|
buttonRef.current && !buttonRef.current.contains(target) &&
|
|
popinRef.current && !popinRef.current.contains(target)
|
|
) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, [isOpen]);
|
|
|
|
// Close on Escape
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
const handleEsc = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setIsOpen(false);
|
|
};
|
|
document.addEventListener("keydown", handleEsc);
|
|
return () => document.removeEventListener("keydown", handleEsc);
|
|
}, [isOpen]);
|
|
|
|
const runningJobs = activeJobs.filter(j => j.status === "running" || j.status === "extracting_pages" || j.status === "generating_thumbnails");
|
|
const pendingJobs = activeJobs.filter(j => j.status === "pending");
|
|
const totalCount = activeJobs.length;
|
|
|
|
const totalProgress = runningJobs.reduce((acc, job) => {
|
|
return acc + (job.progress_percent || 0);
|
|
}, 0) / (runningJobs.length || 1);
|
|
|
|
if (totalCount === 0) {
|
|
return (
|
|
<Link
|
|
href="/jobs"
|
|
className="
|
|
flex items-center justify-center
|
|
w-9 h-9
|
|
rounded-md
|
|
text-muted-foreground
|
|
hover:text-foreground
|
|
hover:bg-accent
|
|
transition-colors duration-200
|
|
"
|
|
title={t("jobsIndicator.viewAll")}
|
|
>
|
|
<JobsIcon className="w-[18px] h-[18px]" />
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
const popin = isOpen && (
|
|
<>
|
|
{/* Mobile backdrop */}
|
|
<div
|
|
className="fixed inset-0 z-[80] sm:hidden bg-background/60 backdrop-blur-sm"
|
|
onClick={() => setIsOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Popin */}
|
|
<div
|
|
ref={popinRef}
|
|
style={popinStyle}
|
|
className="
|
|
z-[90]
|
|
bg-popover/95 backdrop-blur-md
|
|
rounded-xl
|
|
shadow-elevation-2
|
|
border border-border/60
|
|
overflow-hidden
|
|
animate-fade-in
|
|
"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 border-b border-border/60 bg-muted/50">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">📊</span>
|
|
<div>
|
|
<h3 className="font-semibold text-foreground">{t("jobsIndicator.activeTasks")}</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
{runningJobs.length > 0
|
|
? t("jobsIndicator.runningAndPending", { running: runningJobs.length, pending: pendingJobs.length })
|
|
: t("jobsIndicator.pendingTasks", { count: pendingJobs.length, plural: pendingJobs.length !== 1 ? "s" : "" })
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/jobs"
|
|
className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{t("jobsIndicator.viewAllLink")}
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Overall progress bar if running */}
|
|
{runningJobs.length > 0 && (
|
|
<div className="px-4 py-3 border-b border-border/60">
|
|
<div className="flex items-center justify-between text-sm mb-2">
|
|
<span className="text-muted-foreground">{t("jobsIndicator.overallProgress")}</span>
|
|
<span className="font-semibold text-foreground">{Math.round(totalProgress)}%</span>
|
|
</div>
|
|
<ProgressBar value={totalProgress} size="sm" variant="success" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Job List */}
|
|
<div className="max-h-80 overflow-y-auto scrollbar-hide">
|
|
{activeJobs.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
|
<span className="text-4xl mb-2">✅</span>
|
|
<p>{t("jobsIndicator.noActiveTasks")}</p>
|
|
</div>
|
|
) : (
|
|
<ul className="divide-y divide-border/60">
|
|
{activeJobs.map(job => (
|
|
<li key={job.id}>
|
|
<Link
|
|
href={`/jobs/${job.id}`}
|
|
className="block px-4 py-3 hover:bg-accent/50 transition-colors duration-200"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="mt-0.5">
|
|
{(job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && <span className="animate-spin inline-block">⏳</span>}
|
|
{job.status === "pending" && <span>⏸</span>}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<code className="text-xs px-1.5 py-0.5 bg-muted rounded font-mono">{job.id.slice(0, 8)}</code>
|
|
<Badge variant={job.type === 'rebuild' ? 'primary' : job.type === 'thumbnail_regenerate' ? 'warning' : 'secondary'} className="text-[10px]">
|
|
{t(`jobType.${job.type}` as any) !== `jobType.${job.type}` ? t(`jobType.${job.type}` as any) : job.type}
|
|
</Badge>
|
|
</div>
|
|
|
|
{(job.status === "running" || job.status === "extracting_pages" || job.status === "generating_thumbnails") && job.progress_percent != null && (
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<MiniProgressBar value={job.progress_percent} />
|
|
<span className="text-xs font-medium text-muted-foreground">{job.progress_percent}%</span>
|
|
</div>
|
|
)}
|
|
|
|
{job.current_file && (
|
|
<p className="text-xs text-muted-foreground mt-1.5 truncate" title={job.current_file}>
|
|
📄 {job.current_file}
|
|
</p>
|
|
)}
|
|
|
|
{job.stats_json && (
|
|
<div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
|
|
<span>✓ {job.stats_json.indexed_files}</span>
|
|
{(job.stats_json.warnings ?? 0) > 0 && (
|
|
<span className="text-warning">⚠ {job.stats_json.warnings}</span>
|
|
)}
|
|
{job.stats_json.errors > 0 && (
|
|
<span className="text-destructive">✕ {job.stats_json.errors}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-2 border-t border-border/60 bg-muted/50">
|
|
<p className="text-xs text-muted-foreground text-center">{t("jobsIndicator.autoRefresh")}</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
ref={buttonRef}
|
|
className={`
|
|
flex items-center gap-1.5
|
|
p-2 sm:px-3 sm:py-2
|
|
rounded-md
|
|
font-medium text-sm
|
|
transition-all duration-200
|
|
${runningJobs.length > 0
|
|
? 'bg-success/10 text-success hover:bg-success/20'
|
|
: 'bg-warning/10 text-warning hover:bg-warning/20'
|
|
}
|
|
${isOpen ? 'ring-2 ring-ring ring-offset-2 ring-offset-background' : ''}
|
|
`}
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
title={t("jobsIndicator.taskCount", { count: totalCount, plural: totalCount !== 1 ? "s" : "" })}
|
|
>
|
|
{/* Animated spinner for running jobs */}
|
|
{runningJobs.length > 0 && (
|
|
<div className="w-4 h-4 animate-spin">
|
|
<SpinnerIcon className="w-4 h-4" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Icon */}
|
|
<JobsIcon className="w-4 h-4" />
|
|
|
|
{/* Badge with count */}
|
|
<span className="flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold bg-current rounded-full">
|
|
<span className="text-background">{totalCount > 99 ? "99+" : totalCount}</span>
|
|
</span>
|
|
|
|
{/* Chevron - hidden on small screens */}
|
|
<ChevronIcon
|
|
className={`w-4 h-4 hidden sm:block transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
|
|
/>
|
|
</button>
|
|
|
|
{typeof document !== "undefined" && createPortal(popin, document.body)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Mini progress bar for dropdown
|
|
function MiniProgressBar({ value }: { value: number }) {
|
|
return (
|
|
<div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-success rounded-full transition-all duration-300"
|
|
style={{ width: `${value}%` }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|