Redesign jobs dashboard with unified table and progress bar
- Add overall progress bar showing completed/active/failed counts - Unify all job types into single table with Type column - Simplify status to Working/Pending/Failed badges - Remove NPM "Coming Soon" section - Add get_recent_activity() function for future activity feed - Fix dark mode CSS using CSS variables
This commit is contained in:
Mondo Diaz
@@ -126,6 +126,49 @@ function AdminJobsPage() {
|
||||
? cacheStatus.pending + cacheStatus.in_progress + cacheStatus.completed + cacheStatus.failed
|
||||
: 0;
|
||||
|
||||
const completedPercent = totalJobs > 0
|
||||
? Math.round((cacheStatus?.completed ?? 0) / totalJobs * 100)
|
||||
: 0;
|
||||
|
||||
// Combine all jobs into unified list with type column
|
||||
type UnifiedJob = {
|
||||
id: string;
|
||||
type: 'pypi';
|
||||
package: string;
|
||||
status: 'pending' | 'in_progress' | 'completed' | 'failed';
|
||||
depth: number;
|
||||
attempts: number;
|
||||
error?: string | null;
|
||||
started_at?: string | null;
|
||||
failed_at?: string | null;
|
||||
version_constraint?: string | null;
|
||||
};
|
||||
|
||||
const allJobs: UnifiedJob[] = [
|
||||
// Active tasks first
|
||||
...activeTasks.map((t): UnifiedJob => ({
|
||||
id: t.id,
|
||||
type: 'pypi',
|
||||
package: t.package,
|
||||
status: 'in_progress',
|
||||
depth: t.depth,
|
||||
attempts: t.attempts,
|
||||
started_at: t.started_at,
|
||||
version_constraint: t.version_constraint,
|
||||
})),
|
||||
// Then failed tasks
|
||||
...failedTasks.map((t): UnifiedJob => ({
|
||||
id: t.id,
|
||||
type: 'pypi',
|
||||
package: t.package,
|
||||
status: 'failed',
|
||||
depth: t.depth,
|
||||
attempts: t.attempts,
|
||||
error: t.error,
|
||||
failed_at: t.failed_at,
|
||||
})),
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="admin-jobs-page">
|
||||
<div className="page-header">
|
||||
@@ -148,7 +191,33 @@ function AdminJobsPage() {
|
||||
{successMessage && <div className="success-message">{successMessage}</div>}
|
||||
{statusError && <div className="error-message">{statusError}</div>}
|
||||
|
||||
{/* PyPI Cache Jobs Section */}
|
||||
{/* Overall Progress Bar */}
|
||||
{totalJobs > 0 && (
|
||||
<div className="overall-progress">
|
||||
<div className="progress-header">
|
||||
<span className="progress-label">
|
||||
<span className="pulse-indicator"></span>
|
||||
Overall Progress
|
||||
</span>
|
||||
<span className="progress-stats">
|
||||
{cacheStatus?.completed ?? 0} / {totalJobs} completed
|
||||
{(cacheStatus?.in_progress ?? 0) > 0 && ` · ${cacheStatus?.in_progress} active`}
|
||||
{(cacheStatus?.failed ?? 0) > 0 && ` · ${cacheStatus?.failed} failed`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div
|
||||
className="progress-bar-fill"
|
||||
style={{ width: `${completedPercent}%` }}
|
||||
/>
|
||||
{(cacheStatus?.in_progress ?? 0) > 0 && (
|
||||
<div className="progress-bar-active" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Unified Jobs Section */}
|
||||
<section className="jobs-section">
|
||||
<div className="section-header">
|
||||
<h2>
|
||||
@@ -157,7 +226,7 @@ function AdminJobsPage() {
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
</svg>
|
||||
PyPI Cache Jobs
|
||||
All Jobs
|
||||
</h2>
|
||||
{failedTasks.length > 0 && (
|
||||
<button
|
||||
@@ -172,163 +241,78 @@ function AdminJobsPage() {
|
||||
|
||||
{loadingStatus && !cacheStatus ? (
|
||||
<p className="loading-text">Loading job status...</p>
|
||||
) : totalJobs === 0 ? (
|
||||
<p className="empty-message">No jobs yet. Jobs are created when packages are downloaded through the PyPI proxy.</p>
|
||||
) : allJobs.length === 0 ? (
|
||||
<p className="success-text">All {cacheStatus?.completed ?? 0} jobs completed successfully!</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Status Cards */}
|
||||
<div className="status-cards">
|
||||
<div className="status-card pending">
|
||||
<div className="status-value">{cacheStatus?.pending ?? 0}</div>
|
||||
<div className="status-label">Pending</div>
|
||||
</div>
|
||||
<div className="status-card in-progress">
|
||||
<div className="status-value">{cacheStatus?.in_progress ?? 0}</div>
|
||||
<div className="status-label">In Progress</div>
|
||||
</div>
|
||||
<div className="status-card completed">
|
||||
<div className="status-value">{cacheStatus?.completed ?? 0}</div>
|
||||
<div className="status-label">Completed</div>
|
||||
</div>
|
||||
<div className="status-card failed">
|
||||
<div className="status-value">{cacheStatus?.failed ?? 0}</div>
|
||||
<div className="status-label">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{totalJobs === 0 ? (
|
||||
<p className="empty-message">No cache jobs yet. Jobs are created when packages are downloaded through the PyPI proxy.</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Active Workers Table */}
|
||||
{activeTasks.length > 0 && (
|
||||
<div className="active-workers-section">
|
||||
<h3>
|
||||
<span className="pulse-indicator"></span>
|
||||
Active Workers ({activeTasks.length})
|
||||
</h3>
|
||||
<table className="jobs-table active-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Package</th>
|
||||
<th>Version</th>
|
||||
<th>Depth</th>
|
||||
<th>Attempt</th>
|
||||
<th>Elapsed</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{activeTasks.map((task) => {
|
||||
const elapsed = task.started_at
|
||||
? Math.floor((Date.now() - new Date(task.started_at).getTime()) / 1000)
|
||||
: 0;
|
||||
const minutes = Math.floor(elapsed / 60);
|
||||
const seconds = elapsed % 60;
|
||||
const elapsedStr = minutes > 0
|
||||
? `${minutes}m ${seconds}s`
|
||||
: `${seconds}s`;
|
||||
const isStale = elapsed > 300; // 5 minutes
|
||||
return (
|
||||
<tr key={task.id} className={`active-row ${isStale ? 'stale-row' : ''}`}>
|
||||
<td className="package-name">
|
||||
<span className="spinner"></span>
|
||||
{task.package}
|
||||
</td>
|
||||
<td className="version-constraint">
|
||||
{task.version_constraint || '*'}
|
||||
</td>
|
||||
<td>{task.depth}</td>
|
||||
<td>{task.attempts + 1}</td>
|
||||
<td className={`elapsed-time ${isStale ? 'stale' : ''}`}>
|
||||
{elapsedStr}
|
||||
</td>
|
||||
<td className="status-cell">
|
||||
<span className={`status-badge ${isStale ? 'stale' : 'running'}`}>
|
||||
{isStale ? 'Stale?' : 'Running'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Failed Tasks Table */}
|
||||
{failedTasks.length > 0 && (
|
||||
<>
|
||||
<h3>Failed Tasks</h3>
|
||||
<table className="jobs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Package</th>
|
||||
<th>Error</th>
|
||||
<th>Attempts</th>
|
||||
<th>Depth</th>
|
||||
<th>Failed At</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{failedTasks.map((task) => (
|
||||
<tr key={task.id}>
|
||||
<td className="package-name">{task.package}</td>
|
||||
<td className="error-cell" title={task.error || ''}>
|
||||
{task.error || 'Unknown error'}
|
||||
</td>
|
||||
<td>{task.attempts}</td>
|
||||
<td>{task.depth}</td>
|
||||
<td className="timestamp">
|
||||
{task.failed_at
|
||||
? new Date(task.failed_at).toLocaleString()
|
||||
: '-'}
|
||||
</td>
|
||||
<td className="actions-cell">
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => handleRetryPackage(task.package)}
|
||||
disabled={retryingPackage === task.package}
|
||||
>
|
||||
{retryingPackage === task.package ? 'Retrying...' : 'Retry'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Success message when nothing is pending/in-progress/failed */}
|
||||
{failedTasks.length === 0 && activeTasks.length === 0 && cacheStatus?.pending === 0 && (
|
||||
<p className="success-text">All jobs completed successfully.</p>
|
||||
)}
|
||||
|
||||
{/* In progress message */}
|
||||
{activeTasks.length === 0 && failedTasks.length === 0 && (cacheStatus?.pending ?? 0) > 0 && (
|
||||
<p className="empty-message">Jobs queued for processing...</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
<table className="jobs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Package</th>
|
||||
<th>Status</th>
|
||||
<th>Depth</th>
|
||||
<th>Attempts</th>
|
||||
<th>Details</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allJobs.map((job) => {
|
||||
return (
|
||||
<tr key={job.id} className={`job-row ${job.status}`}>
|
||||
<td>
|
||||
<span className="type-badge pypi">PyPI</span>
|
||||
</td>
|
||||
<td className="package-name">
|
||||
{job.status === 'in_progress' && <span className="spinner"></span>}
|
||||
{job.package}
|
||||
</td>
|
||||
<td className="status-cell">
|
||||
{job.status === 'in_progress' ? (
|
||||
<span className="status-badge working">Working</span>
|
||||
) : job.status === 'failed' ? (
|
||||
<span className="status-badge failed">Failed</span>
|
||||
) : (
|
||||
<span className="status-badge pending">Pending</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{job.depth}</td>
|
||||
<td>{job.attempts}</td>
|
||||
<td className="details-cell">
|
||||
{job.status === 'failed' && job.error && (
|
||||
<span className="error-text" title={job.error}>
|
||||
{job.error.length > 40 ? job.error.substring(0, 40) + '...' : job.error}
|
||||
</span>
|
||||
)}
|
||||
{job.status === 'in_progress' && job.version_constraint && (
|
||||
<span className="version-text">{job.version_constraint}</span>
|
||||
)}
|
||||
{job.status === 'failed' && job.failed_at && (
|
||||
<span className="timestamp">
|
||||
{new Date(job.failed_at).toLocaleTimeString()}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="actions-cell">
|
||||
{job.status === 'failed' && (
|
||||
<button
|
||||
className="btn btn-sm btn-secondary"
|
||||
onClick={() => handleRetryPackage(job.package)}
|
||||
disabled={retryingPackage === job.package}
|
||||
>
|
||||
{retryingPackage === job.package ? '...' : 'Retry'}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Placeholder for future job types */}
|
||||
<section className="jobs-section coming-soon">
|
||||
<div className="section-header">
|
||||
<h2>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="3" y1="9" x2="21" y2="9"/>
|
||||
<line x1="9" y1="21" x2="9" y2="9"/>
|
||||
</svg>
|
||||
NPM Cache Jobs
|
||||
<span className="coming-soon-badge">Coming Soon</span>
|
||||
</h2>
|
||||
</div>
|
||||
<p className="empty-message">NPM proxy support is planned for a future release.</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user