feat: add rule Run History page with status and error details
- Add /admin/runs page listing all rule executions with filters for All/Running/Success/Error. - Add /api/admin/runs endpoint returning run status, stage, progress, duration, and error details. - Add Run History link to admin sidebar.
This commit is contained in:
hermes
170
src/app/admin/runs/page.tsx
Normal file
170
src/app/admin/runs/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Loader2, AlertCircle, CheckCircle, XCircle, Clock } from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
type Run = {
|
||||||
|
id: string;
|
||||||
|
status: 'RUNNING' | 'SUCCESS' | 'ERROR';
|
||||||
|
stage: string | null;
|
||||||
|
progress: string | null;
|
||||||
|
articlesFound: number;
|
||||||
|
error: string | null;
|
||||||
|
startedAt: string;
|
||||||
|
endedAt: string | null;
|
||||||
|
rule: { name: string };
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusIcon = {
|
||||||
|
RUNNING: <Loader2 size={16} className="animate-spin text-yellow-600" />,
|
||||||
|
SUCCESS: <CheckCircle size={16} className="text-green-600" />,
|
||||||
|
ERROR: <XCircle size={16} className="text-red-600" />,
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusClass = {
|
||||||
|
RUNNING: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-300',
|
||||||
|
SUCCESS: 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-300',
|
||||||
|
ERROR: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RunsPage() {
|
||||||
|
const [runs, setRuns] = useState<Run[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [filter, setFilter] = useState<'ALL' | 'RUNNING' | 'SUCCESS' | 'ERROR'>('ALL');
|
||||||
|
|
||||||
|
async function fetchRuns() {
|
||||||
|
setLoading(true);
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filter !== 'ALL') params.set('status', filter);
|
||||||
|
params.set('limit', '100');
|
||||||
|
const res = await fetch(`/api/admin/runs?${params.toString()}`);
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setRuns(data.runs);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchRuns();
|
||||||
|
}, [filter]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-4 mb-6">
|
||||||
|
<h1 className="text-2xl font-bold">Run History</h1>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{(['ALL', 'RUNNING', 'SUCCESS', 'ERROR'] as const).map((f) => (
|
||||||
|
<button
|
||||||
|
key={f}
|
||||||
|
onClick={() => setFilter(f)}
|
||||||
|
className={`px-3 py-1.5 text-sm font-medium rounded-lg ${
|
||||||
|
filter === f
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-white dark:bg-neutral-900 border dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{f === 'ALL' ? 'All' : f.charAt(0) + f.slice(1).toLowerCase()}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<p className="text-neutral-500">Loading runs...</p>
|
||||||
|
) : runs.length === 0 ? (
|
||||||
|
<div className="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border dark:border-neutral-800 p-8 text-center">
|
||||||
|
<p className="text-neutral-500 dark:text-neutral-400">No runs found.</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white dark:bg-neutral-900 rounded-xl shadow-sm border dark:border-neutral-800 overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-sm">
|
||||||
|
<thead className="bg-neutral-50 dark:bg-neutral-800">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Status</th>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Rule</th>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Stage / Progress</th>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Articles</th>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Started</th>
|
||||||
|
<th className="px-4 py-3 text-left font-medium">Duration</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y dark:divide-neutral-800">
|
||||||
|
{runs.map((run) => {
|
||||||
|
const started = new Date(run.startedAt);
|
||||||
|
const ended = run.endedAt ? new Date(run.endedAt) : null;
|
||||||
|
const duration = ended
|
||||||
|
? Math.round((ended.getTime() - started.getTime()) / 1000)
|
||||||
|
: Math.round((Date.now() - started.getTime()) / 1000);
|
||||||
|
const durationText = duration < 60
|
||||||
|
? `${duration}s`
|
||||||
|
: `${Math.floor(duration / 60)}m ${duration % 60}s`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr key={run.id} className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${statusClass[run.status]}`}>
|
||||||
|
{statusIcon[run.status]}
|
||||||
|
{run.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
<Link
|
||||||
|
href="/admin/rules"
|
||||||
|
className="font-medium hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
{run.rule.name}
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">
|
||||||
|
{run.status === 'RUNNING' && run.stage ? (
|
||||||
|
<span className="text-yellow-700 dark:text-yellow-300">
|
||||||
|
{run.stage}
|
||||||
|
{run.progress ? ` • ${run.progress}` : ''}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="text-neutral-400">—</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3">{run.articlesFound}</td>
|
||||||
|
<td className="px-4 py-3 text-neutral-500">{started.toLocaleString()}</td>
|
||||||
|
<td className="px-4 py-3 text-neutral-500">{durationText}</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{runs.some((r) => r.error) && (
|
||||||
|
<div className="border-t dark:border-neutral-800 p-4">
|
||||||
|
<h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
|
||||||
|
<AlertCircle size={16} className="text-red-600" />
|
||||||
|
Errors
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{runs
|
||||||
|
.filter((r) => r.error)
|
||||||
|
.map((run) => (
|
||||||
|
<div
|
||||||
|
key={`${run.id}-error`}
|
||||||
|
className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 rounded-lg p-3 text-sm"
|
||||||
|
>
|
||||||
|
<div className="font-medium text-red-800 dark:text-red-300 mb-1">
|
||||||
|
{run.rule.name} — {new Date(run.startedAt).toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<pre className="whitespace-pre-wrap text-red-700 dark:text-red-200 font-mono text-xs">
|
||||||
|
{run.error}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
31
src/app/api/admin/runs/route.ts
Normal file
31
src/app/api/admin/runs/route.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
import { prisma } from '@/lib/db';
|
||||||
|
import { RunStatus } from '@prisma/client';
|
||||||
|
|
||||||
|
export async function GET(request: Request) {
|
||||||
|
const { searchParams } = new URL(request.url);
|
||||||
|
const status = searchParams.get('status') as RunStatus | null;
|
||||||
|
const ruleId = searchParams.get('ruleId');
|
||||||
|
const limit = Number(searchParams.get('limit') || '100');
|
||||||
|
const offset = Number(searchParams.get('offset') || '0');
|
||||||
|
|
||||||
|
const where: {
|
||||||
|
status?: RunStatus;
|
||||||
|
ruleId?: string;
|
||||||
|
} = {};
|
||||||
|
if (status) where.status = status;
|
||||||
|
if (ruleId) where.ruleId = ruleId;
|
||||||
|
|
||||||
|
const [runs, total] = await Promise.all([
|
||||||
|
prisma.searchRun.findMany({
|
||||||
|
where,
|
||||||
|
orderBy: { startedAt: 'desc' },
|
||||||
|
take: limit,
|
||||||
|
skip: offset,
|
||||||
|
include: { rule: { select: { name: true } } },
|
||||||
|
}),
|
||||||
|
prisma.searchRun.count({ where }),
|
||||||
|
]);
|
||||||
|
|
||||||
|
return NextResponse.json({ runs, total });
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user