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,142 +1,231 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
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;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface JobsIndicatorProps {
|
||||
apiBaseUrl: string;
|
||||
apiToken: string;
|
||||
}
|
||||
|
||||
export function JobsIndicator({ apiBaseUrl, apiToken }: JobsIndicatorProps) {
|
||||
export function JobsIndicator() {
|
||||
const [activeJobs, setActiveJobs] = useState<Job[]>([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchActiveJobs = async () => {
|
||||
try {
|
||||
const response = await fetch(`${apiBaseUrl}/index/jobs/active`, {
|
||||
headers: {
|
||||
"Authorization": `Bearer ${apiToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
const response = await fetch("/api/jobs/active");
|
||||
if (response.ok) {
|
||||
const jobs = await response.json();
|
||||
// Enrich with details for running 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 {
|
||||
// ignore detail fetch errors
|
||||
}
|
||||
}
|
||||
return job;
|
||||
})
|
||||
);
|
||||
setActiveJobs(jobsWithDetails);
|
||||
setActiveJobs(jobs);
|
||||
}
|
||||
} catch {
|
||||
// Silently fail
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch jobs:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchActiveJobs();
|
||||
const interval = setInterval(fetchActiveJobs, 5000);
|
||||
|
||||
const interval = setInterval(fetchActiveJobs, 2000);
|
||||
return () => clearInterval(interval);
|
||||
}, [apiBaseUrl, apiToken]);
|
||||
}, []);
|
||||
|
||||
const pendingCount = activeJobs.filter(j => j.status === "pending").length;
|
||||
const runningCount = activeJobs.filter(j => j.status === "running").length;
|
||||
// Close dropdown when clicking outside
|
||||
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;
|
||||
|
||||
// Calculate overall progress
|
||||
const totalProgress = runningJobs.reduce((acc, job) => {
|
||||
return acc + (job.progress_percent || 0);
|
||||
}, 0) / (runningJobs.length || 1);
|
||||
|
||||
if (totalCount === 0) {
|
||||
return (
|
||||
<Link href="/jobs" className="jobs-indicator empty">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
||||
<path d="M8 12h8M12 8v8" />
|
||||
<Link href="/jobs" className="jobs-indicator-empty" title="View all jobs">
|
||||
<svg width="22" height="22" 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>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="jobs-indicator-container">
|
||||
<div className="jobs-indicator-wrapper" ref={dropdownRef}>
|
||||
<button
|
||||
className="jobs-indicator active"
|
||||
className={`jobs-indicator-button ${runningJobs.length > 0 ? 'has-running' : ''} ${isOpen ? 'open' : ''}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
title={`${totalCount} active job${totalCount !== 1 ? 's' : ''}`}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" />
|
||||
<path d="M8 12h8M12 8v8" />
|
||||
{/* Animated spinner for running jobs */}
|
||||
{runningJobs.length > 0 && (
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Chevron */}
|
||||
<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>
|
||||
{totalCount > 0 && (
|
||||
<span className="jobs-badge">
|
||||
{totalCount > 9 ? "9+" : totalCount}
|
||||
</span>
|
||||
)}
|
||||
{runningCount > 0 && (
|
||||
<span className="jobs-pulse" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Popin/Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="jobs-dropdown">
|
||||
<div className="jobs-dropdown-header">
|
||||
<strong>Active Jobs</strong>
|
||||
<Link href="/jobs" onClick={() => setIsOpen(false)}>View all</Link>
|
||||
<div className="jobs-popin">
|
||||
<div className="jobs-popin-header">
|
||||
<div className="jobs-popin-title">
|
||||
<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>
|
||||
|
||||
{activeJobs.length === 0 ? (
|
||||
<p className="jobs-empty">No active jobs</p>
|
||||
) : (
|
||||
<ul className="jobs-list">
|
||||
{activeJobs.map(job => (
|
||||
<li key={job.id} className={`job-item job-${job.status}`}>
|
||||
<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>
|
||||
{job.status === "running" && job.progress_percent !== null && (
|
||||
<div className="job-mini-progress">
|
||||
<div
|
||||
className="job-progress-bar"
|
||||
style={{ width: `${job.progress_percent}%` }}
|
||||
/>
|
||||
<span>{job.progress_percent}%</span>
|
||||
</div>
|
||||
)}
|
||||
{job.current_file && (
|
||||
<p className="job-file" title={job.current_file}>
|
||||
{job.current_file.length > 30
|
||||
? job.current_file.substring(0, 30) + "..."
|
||||
: job.current_file}
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Overall progress bar if running */}
|
||||
{runningJobs.length > 0 && (
|
||||
<div className="jobs-overall-progress">
|
||||
<div className="progress-header">
|
||||
<span>Overall Progress</span>
|
||||
<span className="progress-percent">{Math.round(totalProgress)}%</span>
|
||||
</div>
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="progress-fill"
|
||||
style={{ width: `${totalProgress}%` }}
|
||||
/>
|
||||
</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 && (
|
||||
<p className="job-current-file" title={job.current_file}>
|
||||
📄 {job.current_file.length > 35
|
||||
? job.current_file.substring(0, 35) + "..."
|
||||
: job.current_file}
|
||||
</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>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="jobs-popin-footer">
|
||||
<p className="jobs-auto-refresh">Auto-refreshing every 2s</p>
|
||||
</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;
|
||||
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 { ThemeProvider } from "./theme-provider";
|
||||
import { ThemeToggle } from "./theme-toggle";
|
||||
import { JobsIndicatorWrapper } from "./components/JobsIndicatorWrapper";
|
||||
import { JobsIndicator } from "./components/JobsIndicator";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Stripstream Backoffice",
|
||||
@@ -34,7 +34,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
|
||||
<Link href="/jobs">Jobs</Link>
|
||||
<Link href="/tokens">Tokens</Link>
|
||||
</div>
|
||||
<JobsIndicatorWrapper apiBaseUrl={apiBaseUrl} apiToken={apiToken} />
|
||||
<JobsIndicator />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user