385 lines
13 KiB
TypeScript
385 lines
13 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { apiRequest } from "@/lib/queryClient";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Activity,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Clock,
|
|
RefreshCw,
|
|
ServerCrash,
|
|
SkipForward,
|
|
Wifi,
|
|
WifiOff,
|
|
} from "lucide-react";
|
|
import { formatDistanceToNow, format } from "date-fns";
|
|
|
|
// ─── Types ────────────────────────────────────────────────────────────────────
|
|
|
|
interface CronJobLog {
|
|
id: number;
|
|
jobName: string;
|
|
status: string;
|
|
startedAt: string;
|
|
completedAt: string | null;
|
|
durationMs: number | null;
|
|
errorMessage: string | null;
|
|
}
|
|
|
|
interface CronSummary {
|
|
lastRuns: CronJobLog[];
|
|
recentLogs: CronJobLog[];
|
|
}
|
|
|
|
interface SeleniumStatus {
|
|
online: boolean;
|
|
active_jobs: number;
|
|
queued_jobs: number;
|
|
status: string;
|
|
}
|
|
|
|
// ─── Helpers ──────────────────────────────────────────────────────────────────
|
|
|
|
const JOB_LABELS: Record<string, string> = {
|
|
"local-backup": "Local Backup (8 PM)",
|
|
"usb-backup": "USB Backup (9 PM)",
|
|
};
|
|
|
|
function jobLabel(name: string) {
|
|
return JOB_LABELS[name] ?? name;
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: string }) {
|
|
if (status === "success")
|
|
return (
|
|
<Badge className="bg-green-100 text-green-700 border-green-200 gap-1">
|
|
<CheckCircle2 className="h-3 w-3" /> Success
|
|
</Badge>
|
|
);
|
|
if (status === "failed")
|
|
return (
|
|
<Badge className="bg-red-100 text-red-700 border-red-200 gap-1">
|
|
<ServerCrash className="h-3 w-3" /> Failed
|
|
</Badge>
|
|
);
|
|
if (status === "skipped")
|
|
return (
|
|
<Badge className="bg-gray-100 text-gray-600 border-gray-200 gap-1">
|
|
<SkipForward className="h-3 w-3" /> Skipped
|
|
</Badge>
|
|
);
|
|
return (
|
|
<Badge className="bg-blue-100 text-blue-700 border-blue-200 gap-1">
|
|
<Activity className="h-3 w-3 animate-pulse" /> Running
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
function formatDuration(ms: number | null) {
|
|
if (ms === null) return "—";
|
|
if (ms < 1000) return `${ms}ms`;
|
|
return `${(ms / 1000).toFixed(1)}s`;
|
|
}
|
|
|
|
function formatDate(iso: string | null) {
|
|
if (!iso) return "—";
|
|
return format(new Date(iso), "MMM d, yyyy HH:mm:ss");
|
|
}
|
|
|
|
function timeAgo(iso: string | null) {
|
|
if (!iso) return "—";
|
|
return formatDistanceToNow(new Date(iso), { addSuffix: true });
|
|
}
|
|
|
|
// ─── Page ─────────────────────────────────────────────────────────────────────
|
|
|
|
export default function JobMonitorPage() {
|
|
const {
|
|
data: summary,
|
|
isLoading: loadingSummary,
|
|
refetch: refetchSummary,
|
|
dataUpdatedAt: summaryUpdated,
|
|
} = useQuery<CronSummary>({
|
|
queryKey: ["/job-monitor/summary"],
|
|
queryFn: async () => {
|
|
const res = await apiRequest("GET", "/api/job-monitor/summary");
|
|
return res.json();
|
|
},
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
const {
|
|
data: failed,
|
|
isLoading: loadingFailed,
|
|
refetch: refetchFailed,
|
|
} = useQuery<CronJobLog[]>({
|
|
queryKey: ["/job-monitor/failed"],
|
|
queryFn: async () => {
|
|
const res = await apiRequest("GET", "/api/job-monitor/failed");
|
|
return res.json();
|
|
},
|
|
refetchInterval: 30_000,
|
|
});
|
|
|
|
const {
|
|
data: seleniumStatus,
|
|
isLoading: loadingSelenium,
|
|
refetch: refetchSelenium,
|
|
} = useQuery<SeleniumStatus>({
|
|
queryKey: ["/job-monitor/selenium-status"],
|
|
queryFn: async () => {
|
|
const res = await apiRequest("GET", "/api/job-monitor/selenium-status");
|
|
return res.json();
|
|
},
|
|
refetchInterval: 10_000,
|
|
});
|
|
|
|
function refreshAll() {
|
|
refetchSummary();
|
|
refetchFailed();
|
|
refetchSelenium();
|
|
}
|
|
|
|
const lastUpdated = summaryUpdated
|
|
? format(new Date(summaryUpdated), "HH:mm:ss")
|
|
: null;
|
|
|
|
return (
|
|
<div className="p-6 max-w-5xl mx-auto space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold text-gray-900">Job Monitor</h1>
|
|
<p className="text-sm text-gray-500 mt-0.5">
|
|
Background job health and queue status
|
|
{lastUpdated && (
|
|
<span className="ml-2 text-gray-400">· last updated {lastUpdated}</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={refreshAll}
|
|
className="gap-1.5"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
Refresh
|
|
</Button>
|
|
</div>
|
|
|
|
{/* ── Cron Jobs ── */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Clock className="h-4 w-4 text-gray-500" />
|
|
Scheduled Cron Jobs
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loadingSummary ? (
|
|
<p className="text-sm text-gray-400">Loading…</p>
|
|
) : !summary?.lastRuns.length ? (
|
|
<p className="text-sm text-gray-500">
|
|
No job runs recorded yet. Jobs are scheduled at 8 PM (local backup) and 9 PM (USB backup).
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{summary.lastRuns.map((log) => (
|
|
<div
|
|
key={log.id}
|
|
className="flex items-start justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3"
|
|
>
|
|
<div className="space-y-0.5">
|
|
<p className="text-sm font-medium text-gray-800">
|
|
{jobLabel(log.jobName)}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
Last run: {formatDate(log.startedAt)}{" "}
|
|
<span className="text-gray-400">({timeAgo(log.startedAt)})</span>
|
|
</p>
|
|
{log.status === "failed" && log.errorMessage && (
|
|
<p className="text-xs text-red-600 mt-1 flex items-center gap-1">
|
|
<AlertTriangle className="h-3 w-3 shrink-0" />
|
|
{log.errorMessage}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col items-end gap-1">
|
|
<StatusBadge status={log.status} />
|
|
<span className="text-xs text-gray-400">
|
|
{formatDuration(log.durationMs)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Selenium Queue ── */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
{seleniumStatus?.online ? (
|
|
<Wifi className="h-4 w-4 text-green-500" />
|
|
) : (
|
|
<WifiOff className="h-4 w-4 text-gray-400" />
|
|
)}
|
|
Selenium Job Queue
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loadingSelenium ? (
|
|
<p className="text-sm text-gray-400">Loading…</p>
|
|
) : (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{/* Online status */}
|
|
<div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
|
|
<p className="text-xs text-gray-500 mb-1">Service</p>
|
|
{seleniumStatus?.online ? (
|
|
<span className="inline-flex items-center gap-1 text-sm font-medium text-green-700">
|
|
<CheckCircle2 className="h-4 w-4" /> Online
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center gap-1 text-sm font-medium text-gray-500">
|
|
<WifiOff className="h-4 w-4" /> Offline
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Active jobs */}
|
|
<div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
|
|
<p className="text-xs text-gray-500 mb-1">Active Jobs</p>
|
|
<p
|
|
className={`text-2xl font-bold ${
|
|
(seleniumStatus?.active_jobs ?? 0) > 0
|
|
? "text-blue-600"
|
|
: "text-gray-700"
|
|
}`}
|
|
>
|
|
{seleniumStatus?.active_jobs ?? 0}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Queued jobs */}
|
|
<div className="rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 text-center">
|
|
<p className="text-xs text-gray-500 mb-1">Queued</p>
|
|
<p
|
|
className={`text-2xl font-bold ${
|
|
(seleniumStatus?.queued_jobs ?? 0) > 0
|
|
? "text-amber-600"
|
|
: "text-gray-700"
|
|
}`}
|
|
>
|
|
{seleniumStatus?.queued_jobs ?? 0}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Failed Alerts ── */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<AlertTriangle className="h-4 w-4 text-red-500" />
|
|
Failed Job Alerts
|
|
{!loadingFailed && failed && failed.length > 0 && (
|
|
<Badge className="bg-red-100 text-red-700 border-red-200 ml-1">
|
|
{failed.length}
|
|
</Badge>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loadingFailed ? (
|
|
<p className="text-sm text-gray-400">Loading…</p>
|
|
) : !failed?.length ? (
|
|
<div className="flex items-center gap-2 text-sm text-green-700">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
No failed jobs — everything looks healthy.
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{failed.map((log) => (
|
|
<div
|
|
key={log.id}
|
|
className="rounded-lg border border-red-100 bg-red-50 px-4 py-3"
|
|
>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-sm font-medium text-red-800">
|
|
{jobLabel(log.jobName)}
|
|
</span>
|
|
<span className="text-xs text-gray-500">
|
|
{formatDate(log.startedAt)}
|
|
</span>
|
|
</div>
|
|
{log.errorMessage && (
|
|
<p className="text-xs text-red-600">{log.errorMessage}</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* ── Recent History ── */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Activity className="h-4 w-4 text-gray-500" />
|
|
Recent Run History
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loadingSummary ? (
|
|
<p className="text-sm text-gray-400">Loading…</p>
|
|
) : !summary?.recentLogs.length ? (
|
|
<p className="text-sm text-gray-500">No history yet.</p>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b text-xs text-gray-500 uppercase tracking-wide">
|
|
<th className="text-left py-2 pr-4 font-medium">Job</th>
|
|
<th className="text-left py-2 pr-4 font-medium">Started</th>
|
|
<th className="text-left py-2 pr-4 font-medium">Duration</th>
|
|
<th className="text-left py-2 font-medium">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{summary.recentLogs.map((log) => (
|
|
<tr
|
|
key={log.id}
|
|
className="border-b border-gray-50 last:border-0 hover:bg-gray-50 transition-colors"
|
|
>
|
|
<td className="py-2 pr-4 font-medium text-gray-700">
|
|
{jobLabel(log.jobName)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-gray-500">
|
|
{formatDate(log.startedAt)}
|
|
</td>
|
|
<td className="py-2 pr-4 text-gray-500">
|
|
{formatDuration(log.durationMs)}
|
|
</td>
|
|
<td className="py-2">
|
|
<StatusBadge status={log.status} />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|