bitforge/orchard
3
0
Fork 0
Code Projects Wiki Activity

Redesign jobs dashboard with unified table and progress bar

Browse Source 
- 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
2026-02-02 14:34:48 -06:00
parent 47b137f4eb
commit 92edef92e6
4 changed files with 422 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
backend/app/pypi_cache_worker.py
View File

@@ -600,6 +600,40 @@ def get_active_tasks(db: Session, limit: int = 50) -> List[dict]:
]
def get_recent_activity(db: Session, limit: int = 20) -> List[dict]:
"""
Get recent task completions and failures for activity feed.
Args:
db: Database session.
limit: Maximum number of items to return.
Returns:
List of recent activity items sorted by time descending.
"""
# Get recently completed and failed tasks
tasks = (
db.query(PyPICacheTask)
.filter(PyPICacheTask.status.in_(["completed", "failed"]))
.filter(PyPICacheTask.completed_at != None)
.order_by(PyPICacheTask.completed_at.desc())
.limit(limit)
.all()
)
return [
{
"id": str(task.id),
"package": task.package_name,
"status": task.status,
"type": "pypi",
"error": task.error_message if task.status == "failed" else None,
"completed_at": task.completed_at.isoformat() if task.completed_at else None,
}
for task in tasks
]
def retry_failed_task(db: Session, package_name: str) -> Optional[PyPICacheTask]:
"""
Reset a failed task to retry.

1
backend/app/pypi_proxy.py
View File

@@ -29,6 +29,7 @@ from .pypi_cache_worker import (
get_cache_status,
get_failed_tasks,
get_active_tasks,
get_recent_activity,
retry_failed_task,
retry_all_failed_tasks,
)

445
frontend/src/pages/AdminJobsPage.css
View File

@@ -54,19 +54,19 @@
/* Messages */
.success-message {
padding: 0.75rem 1rem;
background-color: #d4edda;
border: 1px solid #c3e6cb;
background-color: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 4px;
color: #155724;
color: #10b981;
margin-bottom: 1rem;
}
.error-message {
padding: 0.75rem 1rem;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
background-color: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 4px;
color: #721c24;
color: #ef4444;
margin-bottom: 1rem;
}
@@ -77,10 +77,10 @@
}
.success-text {
color: #2e7d32;
color: #10b981;
padding: 1rem;
text-align: center;
background: #e8f5e9;
background: rgba(16, 185, 129, 0.1);
border-radius: 4px;
margin-top: 1rem;
}
@@ -92,6 +92,69 @@
text-align: center;
}
/* Overall Progress Bar */
.overall-progress {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.progress-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
color: var(--text-primary);
}
.progress-stats {
font-size: 0.9rem;
color: var(--text-secondary);
}
.progress-bar-container {
height: 8px;
background: var(--bg-tertiary);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-bar-active {
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
animation: progress-sweep 1.5s ease-in-out infinite;
}
@keyframes progress-sweep {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(400%);
}
}
/* Jobs Section */
.jobs-section {
background: var(--bg-secondary);
@@ -101,10 +164,6 @@
margin-bottom: 1.5rem;
}
.jobs-section.coming-soon {
opacity: 0.7;
}
.section-header {
display: flex;
justify-content: space-between;
@@ -112,51 +171,6 @@
margin-bottom: 1rem;
}
/* Status Cards */
.status-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1rem;
}
.status-card {
background: var(--bg-primary);
border-radius: 8px;
padding: 1rem;
text-align: center;
border: 1px solid var(--border-color);
}
.status-card .status-value {
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
}
.status-card .status-label {
font-size: 0.85rem;
color: var(--text-secondary);
text-transform: uppercase;
margin-top: 0.25rem;
}
.status-card.pending .status-value {
color: #f59e0b;
}
.status-card.in-progress .status-value {
color: #3b82f6;
}
.status-card.completed .status-value {
color: #10b981;
}
.status-card.failed .status-value {
color: #ef4444;
}
/* Jobs Table */
.jobs-table {
width: 100%;
@@ -189,41 +203,190 @@
font-family: monospace;
font-weight: 500;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.jobs-table .error-cell {
max-width: 300px;
/* Job Row States */
.job-row.in_progress {
background-color: rgba(59, 130, 246, 0.05);
}
.job-row.failed {
background-color: rgba(239, 68, 68, 0.05);
}
.job-row.stale {
background-color: rgba(245, 158, 11, 0.1);
}
.job-row:hover {
background-color: var(--bg-tertiary);
}
/* Type Badge */
.type-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.type-badge.pypi {
background-color: rgba(59, 130, 246, 0.15);
color: var(--color-primary, #3b82f6);
}
/* Status Cell */
.status-cell {
min-width: 120px;
}
.status-with-progress {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.mini-progress-bar {
width: 80px;
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.mini-progress-fill {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: var(--color-primary, #3b82f6);
border-radius: 2px;
animation: mini-progress 1s ease-in-out infinite;
}
@keyframes mini-progress {
0%, 100% {
left: 0;
width: 40%;
}
50% {
left: 60%;
width: 40%;
}
}
/* Status Badges */
.status-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}
.status-badge.running,
.status-badge.working {
background-color: rgba(59, 130, 246, 0.15);
color: var(--color-primary, #3b82f6);
}
.status-badge.failed {
background-color: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.status-badge.pending {
background-color: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
.status-badge.stale {
background-color: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
/* Spinner */
.spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--border-color);
border-top-color: var(--color-primary, #3b82f6);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Pulse Indicator */
.pulse-indicator {
width: 8px;
height: 8px;
background-color: var(--color-primary, #3b82f6);
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.2);
}
}
/* Details Cell */
.details-cell {
max-width: 200px;
}
.error-text {
color: #ef4444;
font-size: 0.85rem;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #c62828;
font-size: 0.9rem;
}
.jobs-table .timestamp {
.version-text {
font-family: monospace;
font-size: 0.85rem;
color: var(--text-secondary);
}
.elapsed-time {
font-size: 0.75rem;
color: var(--text-secondary);
font-family: monospace;
}
.timestamp {
font-size: 0.85rem;
color: var(--text-secondary);
white-space: nowrap;
}
.jobs-table .actions-cell {
.actions-cell {
white-space: nowrap;
text-align: right;
}
/* Badges */
.coming-soon-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 500;
background-color: #e0e0e0;
color: #616161;
margin-left: 0.75rem;
text-transform: uppercase;
}
/* Buttons */
.btn {
padding: 0.5rem 1rem;
@@ -271,128 +434,8 @@
font-size: 0.8rem;
}
/* Active Workers Section */
.active-workers-section {
margin-bottom: 1.5rem;
}
.active-workers-section h3 {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-primary, #3b82f6);
margin-top: 1rem;
}
.pulse-indicator {
width: 8px;
height: 8px;
background-color: var(--color-primary, #3b82f6);
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(1.2);
}
}
.jobs-table.active-table {
border: 1px solid var(--color-primary, #3b82f6);
border-radius: 4px;
}
.jobs-table.active-table th {
background: var(--bg-tertiary);
color: var(--color-primary, #3b82f6);
}
.jobs-table .active-row {
background-color: var(--bg-secondary);
}
.jobs-table .active-row:hover {
background-color: var(--bg-tertiary);
}
.jobs-table .version-constraint {
font-family: monospace;
font-size: 0.85rem;
color: var(--text-secondary);
}
/* Spinner for active tasks */
.spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--border-color);
border-top-color: var(--color-primary, #3b82f6);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 0.5rem;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Elapsed time */
.elapsed-time {
font-family: monospace;
font-size: 0.9rem;
color: var(--text-secondary);
}
.elapsed-time.stale {
color: #f59e0b;
font-weight: 500;
}
/* Status badges */
.status-badge {
display: inline-block;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
}
.status-badge.running {
background-color: rgba(59, 130, 246, 0.15);
color: var(--color-primary, #3b82f6);
}
.status-badge.stale {
background-color: rgba(245, 158, 11, 0.15);
color: #f59e0b;
}
/* Stale row highlighting */
.jobs-table .stale-row {
background-color: rgba(245, 158, 11, 0.1);
}
.jobs-table .stale-row:hover {
background-color: rgba(245, 158, 11, 0.15);
}
/* Responsive */
@media (max-width: 768px) {
.status-cards {
grid-template-columns: repeat(2, 1fr);
}
.page-header {
flex-direction: column;
align-items: flex-start;
@@ -403,7 +446,13 @@
font-size: 0.85rem;
}
.jobs-table .error-cell {
max-width: 150px;
.details-cell {
max-width: 100px;
}
.progress-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}

296
frontend/src/pages/AdminJobsPage.tsx
View File

@@ -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>
);
}