feat(ui): JobsIndicator moderne avec loader et popin détaillée
- Spinner animé visible quand jobs en cours (avec pulse) - Badge avec compteur de jobs actifs - Popin moderne au clic avec: - Header avec titre et lien View All - Barre de progression globale - Liste détaillée des jobs (status, type, %) - Fichier en cours de traitement - Mini-stats (indexed, errors) - Footer avec info auto-refresh - CSS complet avec animations et dark mode - Suppression JobsIndicatorWrapper obsolète - Mise à jour layout.tsx pour nouvelle API
This commit is contained in:
@@ -1,143 +1,232 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState, useRef } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
|
||||||
interface Job {
|
interface Job {
|
||||||
id: string;
|
id: string;
|
||||||
|
library_id: string | null;
|
||||||
|
type: string;
|
||||||
status: string;
|
status: string;
|
||||||
current_file: string | null;
|
current_file: string | null;
|
||||||
progress_percent: number | null;
|
progress_percent: number | null;
|
||||||
|
processed_files: number | null;
|
||||||
|
total_files: number | null;
|
||||||
|
stats_json: {
|
||||||
|
scanned_files: number;
|
||||||
|
indexed_files: number;
|
||||||
|
errors: number;
|
||||||
|
} | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface JobsIndicatorProps {
|
export function JobsIndicator() {
|
||||||
apiBaseUrl: string;
|
|
||||||
apiToken: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function JobsIndicator({ apiBaseUrl, apiToken }: JobsIndicatorProps) {
|
|
||||||
const [activeJobs, setActiveJobs] = useState<Job[]>([]);
|
const [activeJobs, setActiveJobs] = useState<Job[]>([]);
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchActiveJobs = async () => {
|
const fetchActiveJobs = async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${apiBaseUrl}/index/jobs/active`, {
|
const response = await fetch("/api/jobs/active");
|
||||||
headers: {
|
|
||||||
"Authorization": `Bearer ${apiToken}`,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const jobs = await response.json();
|
const jobs = await response.json();
|
||||||
// Enrich with details for running jobs
|
setActiveJobs(jobs);
|
||||||
const jobsWithDetails = await Promise.all(
|
|
||||||
jobs.map(async (job: Job) => {
|
|
||||||
if (job.status === "running") {
|
|
||||||
try {
|
|
||||||
const detailRes = await fetch(`${apiBaseUrl}/index/jobs/${job.id}`, {
|
|
||||||
headers: { "Authorization": `Bearer ${apiToken}` },
|
|
||||||
});
|
|
||||||
if (detailRes.ok) {
|
|
||||||
const detail = await detailRes.json();
|
|
||||||
return { ...job, ...detail };
|
|
||||||
}
|
}
|
||||||
} catch {
|
} catch (error) {
|
||||||
// ignore detail fetch errors
|
console.error("Failed to fetch jobs:", error);
|
||||||
}
|
|
||||||
}
|
|
||||||
return job;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
setActiveJobs(jobsWithDetails);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Silently fail
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fetchActiveJobs();
|
fetchActiveJobs();
|
||||||
const interval = setInterval(fetchActiveJobs, 5000);
|
const interval = setInterval(fetchActiveJobs, 2000);
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [apiBaseUrl, apiToken]);
|
}, []);
|
||||||
|
|
||||||
const pendingCount = activeJobs.filter(j => j.status === "pending").length;
|
// Close dropdown when clicking outside
|
||||||
const runningCount = activeJobs.filter(j => j.status === "running").length;
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const runningJobs = activeJobs.filter(j => j.status === "running");
|
||||||
|
const pendingJobs = activeJobs.filter(j => j.status === "pending");
|
||||||
const totalCount = activeJobs.length;
|
const totalCount = activeJobs.length;
|
||||||
|
|
||||||
|
// Calculate overall progress
|
||||||
|
const totalProgress = runningJobs.reduce((acc, job) => {
|
||||||
|
return acc + (job.progress_percent || 0);
|
||||||
|
}, 0) / (runningJobs.length || 1);
|
||||||
|
|
||||||
if (totalCount === 0) {
|
if (totalCount === 0) {
|
||||||
return (
|
return (
|
||||||
<Link href="/jobs" className="jobs-indicator empty">
|
<Link href="/jobs" className="jobs-indicator-empty" title="View all jobs">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
<rect x="2" y="3" width="20" height="18" rx="2" />
|
||||||
<path d="M8 12h8M12 8v8" />
|
<path d="M6 8h12M6 12h12M6 16h8" />
|
||||||
</svg>
|
</svg>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="jobs-indicator-container">
|
<div className="jobs-indicator-wrapper" ref={dropdownRef}>
|
||||||
<button
|
<button
|
||||||
className="jobs-indicator active"
|
className={`jobs-indicator-button ${runningJobs.length > 0 ? 'has-running' : ''} ${isOpen ? 'open' : ''}`}
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
title={`${totalCount} active job${totalCount !== 1 ? 's' : ''}`}
|
title={`${totalCount} active job${totalCount !== 1 ? 's' : ''}`}
|
||||||
>
|
>
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
{/* Animated spinner for running jobs */}
|
||||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
{runningJobs.length > 0 && (
|
||||||
<path d="M8 12h8M12 8v8" />
|
<div className="jobs-spinner">
|
||||||
|
<svg 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>
|
</svg>
|
||||||
{totalCount > 0 && (
|
</div>
|
||||||
<span className="jobs-badge">
|
)}
|
||||||
{totalCount > 9 ? "9+" : totalCount}
|
|
||||||
|
{/* Icon */}
|
||||||
|
<svg className="jobs-icon" width="20" height="20" 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" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Badge with count */}
|
||||||
|
<span className="jobs-count-badge">
|
||||||
|
{totalCount > 99 ? "99+" : totalCount}
|
||||||
</span>
|
</span>
|
||||||
)}
|
|
||||||
{runningCount > 0 && (
|
{/* Chevron */}
|
||||||
<span className="jobs-pulse" />
|
<svg
|
||||||
)}
|
className={`jobs-chevron ${isOpen ? 'open' : ''}`}
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
>
|
||||||
|
<path d="M6 9l6 6 6-6" />
|
||||||
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* Popin/Dropdown */}
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<div className="jobs-dropdown">
|
<div className="jobs-popin">
|
||||||
<div className="jobs-dropdown-header">
|
<div className="jobs-popin-header">
|
||||||
<strong>Active Jobs</strong>
|
<div className="jobs-popin-title">
|
||||||
<Link href="/jobs" onClick={() => setIsOpen(false)}>View all</Link>
|
<span className="jobs-icon-large">📊</span>
|
||||||
|
<div>
|
||||||
|
<h3>Active Jobs</h3>
|
||||||
|
<p className="jobs-subtitle">
|
||||||
|
{runningJobs.length > 0
|
||||||
|
? `${runningJobs.length} running, ${pendingJobs.length} pending`
|
||||||
|
: `${pendingJobs.length} job${pendingJobs.length !== 1 ? 's' : ''} pending`
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/jobs"
|
||||||
|
className="jobs-view-all"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
View All →
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeJobs.length === 0 ? (
|
{/* Overall progress bar if running */}
|
||||||
<p className="jobs-empty">No active jobs</p>
|
{runningJobs.length > 0 && (
|
||||||
) : (
|
<div className="jobs-overall-progress">
|
||||||
<ul className="jobs-list">
|
<div className="progress-header">
|
||||||
{activeJobs.map(job => (
|
<span>Overall Progress</span>
|
||||||
<li key={job.id} className={`job-item job-${job.status}`}>
|
<span className="progress-percent">{Math.round(totalProgress)}%</span>
|
||||||
<div className="job-header">
|
|
||||||
<span className={`job-status status-${job.status}`}>
|
|
||||||
{job.status}
|
|
||||||
</span>
|
|
||||||
<code className="job-id">{job.id.slice(0, 8)}</code>
|
|
||||||
</div>
|
</div>
|
||||||
{job.status === "running" && job.progress_percent !== null && (
|
<div className="progress-bar">
|
||||||
<div className="job-mini-progress">
|
|
||||||
<div
|
<div
|
||||||
className="job-progress-bar"
|
className="progress-fill"
|
||||||
style={{ width: `${job.progress_percent}%` }}
|
style={{ width: `${totalProgress}%` }}
|
||||||
/>
|
/>
|
||||||
<span>{job.progress_percent}%</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<div className="jobs-list-container">
|
||||||
|
{activeJobs.length === 0 ? (
|
||||||
|
<div className="jobs-empty-state">
|
||||||
|
<span className="empty-icon">✅</span>
|
||||||
|
<p>No active jobs</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="jobs-detailed-list">
|
||||||
|
{activeJobs.map(job => (
|
||||||
|
<li key={job.id} className={`job-detailed-item job-status-${job.status}`}>
|
||||||
|
<Link
|
||||||
|
href={`/jobs/${job.id}`}
|
||||||
|
className="job-link"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
<div className="job-info-row">
|
||||||
|
<div className="job-status-icon">
|
||||||
|
{job.status === "running" && <span className="spinning">⏳</span>}
|
||||||
|
{job.status === "pending" && <span>⏸</span>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="job-details">
|
||||||
|
<div className="job-main-info">
|
||||||
|
<code className="job-id-short">{job.id.slice(0, 8)}</code>
|
||||||
|
<span className={`job-type-badge ${job.type}`}>{job.type}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{job.status === "running" && job.progress_percent !== null && (
|
||||||
|
<div className="job-progress-row">
|
||||||
|
<div className="job-mini-progress-bar">
|
||||||
|
<div
|
||||||
|
className="job-mini-progress-fill"
|
||||||
|
style={{ width: `${job.progress_percent}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="job-progress-text">{job.progress_percent}%</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{job.current_file && (
|
{job.current_file && (
|
||||||
<p className="job-file" title={job.current_file}>
|
<p className="job-current-file" title={job.current_file}>
|
||||||
{job.current_file.length > 30
|
📄 {job.current_file.length > 35
|
||||||
? job.current_file.substring(0, 30) + "..."
|
? job.current_file.substring(0, 35) + "..."
|
||||||
: job.current_file}
|
: job.current_file}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{job.stats_json && (
|
||||||
|
<div className="job-mini-stats">
|
||||||
|
<span>✓ {job.stats_json.indexed_files}</span>
|
||||||
|
{job.stats_json.errors > 0 && (
|
||||||
|
<span className="error-stat">⚠ {job.stats_json.errors}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="jobs-popin-footer">
|
||||||
|
<p className="jobs-auto-refresh">Auto-refreshing every 2s</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { JobsIndicator } from "./JobsIndicator";
|
|
||||||
|
|
||||||
interface JobsIndicatorWrapperProps {
|
|
||||||
apiBaseUrl: string;
|
|
||||||
apiToken: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function JobsIndicatorWrapper({ apiBaseUrl, apiToken }: JobsIndicatorWrapperProps) {
|
|
||||||
return <JobsIndicator apiBaseUrl={apiBaseUrl} apiToken={apiToken} />;
|
|
||||||
}
|
|
||||||
@@ -1979,3 +1979,395 @@ tr.job-highlighted td {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== Jobs Indicator - Modern Version ===== */
|
||||||
|
|
||||||
|
.jobs-indicator-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button */
|
||||||
|
.jobs-indicator-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-indicator-button:hover {
|
||||||
|
background: hsl(198 52% 95%);
|
||||||
|
border-color: hsl(198 78% 37% / 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-indicator-button.has-running {
|
||||||
|
background: hsl(198 52% 95%);
|
||||||
|
border-color: hsl(198 78% 37%);
|
||||||
|
animation: jobs-button-pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes jobs-button-pulse {
|
||||||
|
0%, 100% { box-shadow: 0 0 0 0 hsl(198 78% 37% / 0.4); }
|
||||||
|
50% { box-shadow: 0 0 0 4px hsl(198 78% 37% / 0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-indicator-button.open {
|
||||||
|
background: hsl(198 52% 90%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Spinner */
|
||||||
|
.jobs-spinner {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon */
|
||||||
|
.jobs-icon {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-running .jobs-icon {
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Count Badge */
|
||||||
|
.jobs-count-badge {
|
||||||
|
background: hsl(2 72% 48%);
|
||||||
|
color: white;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-running .jobs-count-badge {
|
||||||
|
background: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chevron */
|
||||||
|
.jobs-chevron {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-chevron.open {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty state (no jobs) */
|
||||||
|
.jobs-indicator-empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-indicator-empty:hover {
|
||||||
|
background: hsl(198 52% 95%);
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Popin/Dropdown ===== */
|
||||||
|
|
||||||
|
.jobs-popin {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
right: 0;
|
||||||
|
width: 420px;
|
||||||
|
max-width: calc(100vw - 32px);
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
z-index: 1000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.jobs-popin-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: hsl(198 52% 97%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .jobs-popin-header {
|
||||||
|
background: hsl(198 52% 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-popin-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-icon-large {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-popin-title h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-subtitle {
|
||||||
|
margin: 2px 0 0 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-view-all {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: hsl(198 78% 37%);
|
||||||
|
color: white;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-view-all:hover {
|
||||||
|
background: hsl(198 78% 32%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overall Progress */
|
||||||
|
.jobs-overall-progress {
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
background: hsl(198 52% 95%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .jobs-overall-progress {
|
||||||
|
background: hsl(198 52% 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percent {
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 8px;
|
||||||
|
background: var(--line);
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, hsl(198 78% 37%), hsl(192 85% 55%));
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List Container */
|
||||||
|
.jobs-list-container {
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty State */
|
||||||
|
.jobs-empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 32px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Detailed List */
|
||||||
|
.jobs-detailed-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-detailed-item {
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-detailed-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-link {
|
||||||
|
display: block;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-link:hover {
|
||||||
|
background: hsl(198 52% 95%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .job-link:hover {
|
||||||
|
background: hsl(198 52% 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-info-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-status-icon {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinning {
|
||||||
|
display: inline-block;
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-details {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-main-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-id-short {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: hsl(220 13% 90%);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .job-id-short {
|
||||||
|
background: hsl(220 13% 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-type-badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-type-badge.full_rebuild {
|
||||||
|
background: hsl(280 60% 45% / 0.15);
|
||||||
|
color: hsl(280 60% 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-type-badge.rebuild {
|
||||||
|
background: hsl(198 78% 37% / 0.15);
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress Row */
|
||||||
|
.job-progress-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-mini-progress-bar {
|
||||||
|
flex: 1;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--line);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-mini-progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: hsl(198 78% 37%);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-progress-text {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: hsl(198 78% 37%);
|
||||||
|
min-width: 35px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Current File */
|
||||||
|
.job-current-file {
|
||||||
|
margin: 4px 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mini Stats */
|
||||||
|
.job-mini-stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: hsl(142 60% 45%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-stat {
|
||||||
|
color: hsl(2 72% 48%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.jobs-popin-footer {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
|
background: hsl(220 13% 97%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .jobs-popin-footer {
|
||||||
|
background: hsl(220 13% 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jobs-auto-refresh {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import type { ReactNode } from "react";
|
|||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ThemeProvider } from "./theme-provider";
|
import { ThemeProvider } from "./theme-provider";
|
||||||
import { ThemeToggle } from "./theme-toggle";
|
import { ThemeToggle } from "./theme-toggle";
|
||||||
import { JobsIndicatorWrapper } from "./components/JobsIndicatorWrapper";
|
import { JobsIndicator } from "./components/JobsIndicator";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Stripstream Backoffice",
|
title: "Stripstream Backoffice",
|
||||||
@@ -34,7 +34,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
|||||||
<Link href="/jobs">Jobs</Link>
|
<Link href="/jobs">Jobs</Link>
|
||||||
<Link href="/tokens">Tokens</Link>
|
<Link href="/tokens">Tokens</Link>
|
||||||
</div>
|
</div>
|
||||||
<JobsIndicatorWrapper apiBaseUrl={apiBaseUrl} apiToken={apiToken} />
|
<JobsIndicator />
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user