feat(jobs): T22 complété - Page détail jobs avec timeline et stats
- Page /jobs/[id] avec affichage complet des détails - Timeline visuelle (Created → Started → Finished) - Barre de progression avec stats (processed/total/remaining) - Stats: scanned, indexed, removed, errors - Vitesse de traitement (fichiers/sec) - Liste des erreurs avec fichier et message - Navigation retour vers la liste - Bouton 'View' sur chaque ligne de job - Lien cliquable sur l'ID du job - Styles CSS pour timeline, progress bar, statistiques DoD: Page job détaillée avec timeline, stats et navigation complète
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { JobProgress } from "./JobProgress";
|
||||
|
||||
interface JobRowProps {
|
||||
@@ -32,14 +33,16 @@ export function JobRow({ job, libraryName, highlighted, onCancel }: JobRowProps)
|
||||
<>
|
||||
<tr className={highlighted ? "job-highlighted" : undefined}>
|
||||
<td>
|
||||
<code>{job.id.slice(0, 8)}</code>
|
||||
<Link href={`/jobs/${job.id}`} className="job-id-link">
|
||||
<code>{job.id.slice(0, 8)}</code>
|
||||
</Link>
|
||||
</td>
|
||||
<td>{job.library_id ? libraryName || job.library_id.slice(0, 8) : "—"}</td>
|
||||
<td>{job.type}</td>
|
||||
<td>
|
||||
<span className={`status-${job.status}`}>{job.status}</span>
|
||||
{job.error_opt && <span className="error-hint" title={job.error_opt}>!</span>}
|
||||
{job.status === "running" && (
|
||||
{(job.status === "running" || job.status === "pending") && (
|
||||
<button
|
||||
className="toggle-progress-btn"
|
||||
onClick={() => setShowProgress(!showProgress)}
|
||||
@@ -50,14 +53,19 @@ export function JobRow({ job, libraryName, highlighted, onCancel }: JobRowProps)
|
||||
</td>
|
||||
<td>{new Date(job.created_at).toLocaleString()}</td>
|
||||
<td>
|
||||
{job.status === "pending" || job.status === "running" ? (
|
||||
<button
|
||||
className="cancel-btn"
|
||||
onClick={() => onCancel(job.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
) : null}
|
||||
<div style={{ display: "flex", gap: "8px" }}>
|
||||
<Link href={`/jobs/${job.id}`} className="view-btn">
|
||||
View
|
||||
</Link>
|
||||
{(job.status === "pending" || job.status === "running") && (
|
||||
<button
|
||||
className="cancel-btn"
|
||||
onClick={() => onCancel(job.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{showProgress && (job.status === "running" || job.status === "pending") && (
|
||||
|
||||
@@ -1258,3 +1258,334 @@ tr.job-highlighted td {
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Job Detail Page Styles */
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
color: hsl(198 78% 37%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.job-detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.job-detail-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.job-progress-detail,
|
||||
.job-statistics,
|
||||
.job-errors,
|
||||
.job-error-message {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.job-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.job-type {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.job-type.full_rebuild {
|
||||
color: hsl(280 60% 45%);
|
||||
}
|
||||
|
||||
.job-type.rebuild {
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 2px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timeline-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--line);
|
||||
border: 2px solid var(--card);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.timeline-item.completed .timeline-dot {
|
||||
background: hsl(142 60% 45%);
|
||||
}
|
||||
|
||||
.timeline-item.active .timeline-dot {
|
||||
background: hsl(198 78% 37%);
|
||||
animation: pulse-dot 2s infinite;
|
||||
}
|
||||
|
||||
.timeline-item.pending .timeline-dot {
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { box-shadow: 0 0 0 0 hsl(198 78% 37% / 0.4); }
|
||||
50% { box-shadow: 0 0 0 6px hsl(198 78% 37% / 0); }
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.timeline-time {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.duration-badge {
|
||||
margin-top: 16px;
|
||||
padding: 8px 12px;
|
||||
background: hsl(198 52% 90%);
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.progress-bar-large {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
background: var(--line);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, hsl(198 78% 37%), hsl(192 85% 55%));
|
||||
border-radius: 16px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.progress-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
background: hsl(198 52% 95%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-box .stat-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
.stat-box .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.current-file-box {
|
||||
padding: 12px;
|
||||
background: hsl(45 93% 90% / 0.3);
|
||||
border: 1px solid hsl(45 93% 47% / 0.3);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.current-file-box .label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.current-file-box .file-path {
|
||||
font-size: 0.85rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Statistics */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.stat-number.success { color: hsl(142 60% 45%); }
|
||||
.stat-number.primary { color: hsl(198 78% 37%); }
|
||||
.stat-number.warning { color: hsl(45 93% 47%); }
|
||||
.stat-number.error { color: hsl(2 72% 48%); }
|
||||
|
||||
.speed-stat {
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.speed-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.speed-value {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Errors */
|
||||
.errors-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
padding: 12px;
|
||||
background: hsl(2 72% 48% / 0.05);
|
||||
border: 1px solid hsl(2 72% 48% / 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-file {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: hsl(2 72% 48%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.error-time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error-details {
|
||||
padding: 16px;
|
||||
background: hsl(2 72% 48% / 0.05);
|
||||
border: 1px solid hsl(2 72% 48% / 0.2);
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Job list enhancements */
|
||||
.job-id-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.job-id-link:hover code {
|
||||
background: hsl(198 52% 90%);
|
||||
color: hsl(198 78% 37%);
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
padding: 4px 10px;
|
||||
font-size: 0.8rem;
|
||||
background: hsl(198 78% 37% / 0.1);
|
||||
border: 1px solid hsl(198 78% 37% / 0.3);
|
||||
border-radius: 4px;
|
||||
color: hsl(198 78% 37%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: hsl(198 78% 37% / 0.2);
|
||||
}
|
||||
|
||||
254
apps/backoffice/app/jobs/[id]/page.tsx
Normal file
254
apps/backoffice/app/jobs/[id]/page.tsx
Normal file
@@ -0,0 +1,254 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { apiFetch } from "../../../lib/api";
|
||||
|
||||
interface JobDetailPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
interface JobDetails {
|
||||
id: string;
|
||||
library_id: string | null;
|
||||
type: string;
|
||||
status: string;
|
||||
created_at: string;
|
||||
started_at: string | null;
|
||||
finished_at: string | null;
|
||||
current_file: string | null;
|
||||
progress_percent: number | null;
|
||||
processed_files: number | null;
|
||||
total_files: number | null;
|
||||
stats_json: {
|
||||
scanned_files: number;
|
||||
indexed_files: number;
|
||||
removed_files: number;
|
||||
errors: number;
|
||||
} | null;
|
||||
error_opt: string | null;
|
||||
}
|
||||
|
||||
interface JobError {
|
||||
id: string;
|
||||
file_path: string;
|
||||
error_message: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
async function getJobDetails(jobId: string): Promise<JobDetails | null> {
|
||||
try {
|
||||
return await apiFetch<JobDetails>(`/index/jobs/${jobId}`);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function getJobErrors(jobId: string): Promise<JobError[]> {
|
||||
try {
|
||||
return await apiFetch<JobError[]>(`/index/jobs/${jobId}/errors`);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(start: string, end: string | null): string {
|
||||
const startDate = new Date(start);
|
||||
const endDate = end ? new Date(end) : new Date();
|
||||
const diff = endDate.getTime() - startDate.getTime();
|
||||
|
||||
if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}m ${Math.floor((diff % 60000) / 1000)}s`;
|
||||
return `${Math.floor(diff / 3600000)}h ${Math.floor((diff % 3600000) / 60000)}m`;
|
||||
}
|
||||
|
||||
function formatSpeed(stats: { scanned_files: number } | null, duration: number): string {
|
||||
if (!stats || duration === 0) return "-";
|
||||
const filesPerSecond = stats.scanned_files / (duration / 1000);
|
||||
return `${filesPerSecond.toFixed(1)} f/s`;
|
||||
}
|
||||
|
||||
export default async function JobDetailPage({ params }: JobDetailPageProps) {
|
||||
const { id } = await params;
|
||||
const [job, errors] = await Promise.all([
|
||||
getJobDetails(id),
|
||||
getJobErrors(id),
|
||||
]);
|
||||
|
||||
if (!job) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const duration = job.started_at
|
||||
? new Date(job.finished_at || new Date()).getTime() - new Date(job.started_at).getTime()
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page-header">
|
||||
<Link href="/jobs" className="back-link">← Back to jobs</Link>
|
||||
<h1>Job Details</h1>
|
||||
</div>
|
||||
|
||||
<div className="job-detail-grid">
|
||||
{/* Overview Card */}
|
||||
<div className="card job-overview">
|
||||
<h2>Overview</h2>
|
||||
<div className="job-meta">
|
||||
<div className="meta-item">
|
||||
<span className="meta-label">ID</span>
|
||||
<code className="meta-value">{job.id}</code>
|
||||
</div>
|
||||
<div className="meta-item">
|
||||
<span className="meta-label">Type</span>
|
||||
<span className={`meta-value job-type ${job.type}`}>{job.type}</span>
|
||||
</div>
|
||||
<div className="meta-item">
|
||||
<span className="meta-label">Status</span>
|
||||
<span className={`meta-value status-badge status-${job.status}`}>{job.status}</span>
|
||||
</div>
|
||||
<div className="meta-item">
|
||||
<span className="meta-label">Library</span>
|
||||
<span className="meta-value">{job.library_id || "All libraries"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline Card */}
|
||||
<div className="card job-timeline">
|
||||
<h2>Timeline</h2>
|
||||
<div className="timeline">
|
||||
<div className={`timeline-item ${job.created_at ? 'completed' : ''}`}>
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content">
|
||||
<span className="timeline-label">Created</span>
|
||||
<span className="timeline-time">{new Date(job.created_at).toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`timeline-item ${job.started_at ? 'completed' : ''} ${!job.started_at ? 'pending' : ''}`}>
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content">
|
||||
<span className="timeline-label">Started</span>
|
||||
<span className="timeline-time">
|
||||
{job.started_at ? new Date(job.started_at).toLocaleString() : "Pending..."}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`timeline-item ${job.finished_at ? 'completed' : ''} ${job.started_at && !job.finished_at ? 'active' : ''} ${!job.started_at ? 'pending' : ''}`}>
|
||||
<div className="timeline-dot" />
|
||||
<div className="timeline-content">
|
||||
<span className="timeline-label">Finished</span>
|
||||
<span className="timeline-time">
|
||||
{job.finished_at
|
||||
? new Date(job.finished_at).toLocaleString()
|
||||
: job.started_at
|
||||
? "Running..."
|
||||
: "Waiting..."
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{job.started_at && (
|
||||
<div className="duration-badge">
|
||||
Duration: {formatDuration(job.started_at, job.finished_at)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress Card */}
|
||||
{(job.status === "running" || job.status === "success" || job.status === "failed") && (
|
||||
<div className="card job-progress-detail">
|
||||
<h2>Progress</h2>
|
||||
{job.total_files && job.total_files > 0 && (
|
||||
<>
|
||||
<div className="progress-bar-large">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{ width: `${job.progress_percent || 0}%` }}
|
||||
/>
|
||||
<span className="progress-text">{job.progress_percent || 0}%</span>
|
||||
</div>
|
||||
<div className="progress-stats-grid">
|
||||
<div className="stat-box">
|
||||
<span className="stat-value">{job.processed_files || 0}</span>
|
||||
<span className="stat-label">Processed</span>
|
||||
</div>
|
||||
<div className="stat-box">
|
||||
<span className="stat-value">{job.total_files}</span>
|
||||
<span className="stat-label">Total</span>
|
||||
</div>
|
||||
<div className="stat-box">
|
||||
<span className="stat-value">{job.total_files - (job.processed_files || 0)}</span>
|
||||
<span className="stat-label">Remaining</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{job.current_file && (
|
||||
<div className="current-file-box">
|
||||
<span className="label">Current file:</span>
|
||||
<code className="file-path">{job.current_file}</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Statistics Card */}
|
||||
{job.stats_json && (
|
||||
<div className="card job-statistics">
|
||||
<h2>Statistics</h2>
|
||||
<div className="stats-grid">
|
||||
<div className="stat-item">
|
||||
<span className="stat-number success">{job.stats_json.scanned_files}</span>
|
||||
<span className="stat-label">Scanned</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number primary">{job.stats_json.indexed_files}</span>
|
||||
<span className="stat-label">Indexed</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number warning">{job.stats_json.removed_files}</span>
|
||||
<span className="stat-label">Removed</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className={`stat-number ${job.stats_json.errors > 0 ? 'error' : ''}`}>
|
||||
{job.stats_json.errors}
|
||||
</span>
|
||||
<span className="stat-label">Errors</span>
|
||||
</div>
|
||||
</div>
|
||||
{job.started_at && (
|
||||
<div className="speed-stat">
|
||||
<span className="speed-label">Speed:</span>
|
||||
<span className="speed-value">{formatSpeed(job.stats_json, duration)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Errors Card */}
|
||||
{errors.length > 0 && (
|
||||
<div className="card job-errors">
|
||||
<h2>Errors ({errors.length})</h2>
|
||||
<div className="errors-list">
|
||||
{errors.map((error) => (
|
||||
<div key={error.id} className="error-item">
|
||||
<code className="error-file">{error.file_path}</code>
|
||||
<span className="error-message">{error.error_message}</span>
|
||||
<span className="error-time">{new Date(error.created_at).toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{job.error_opt && (
|
||||
<div className="card job-error-message">
|
||||
<h2>Error</h2>
|
||||
<pre className="error-details">{job.error_opt}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user