Improve Active Workers table and recover stale tasks

Backend:
- Add _recover_stale_tasks() to reset tasks stuck in 'in_progress'
  from previous crashes (tasks >5 min old get reset to pending)
- Called automatically on startup

Frontend:
- Fix dark mode colors using CSS variables instead of hardcoded values
- Add elapsed time column showing how long task has been running
- Add spinning indicator next to package name
- Add status badge (Running/Stale?)
- Highlight stale tasks (>5 min) in amber
- Auto-updates every 5 seconds with existing refresh
This commit is contained in:
Mondo Diaz
2026-02-02 14:29:17 -06:00
parent 1138309aaa
commit 47b137f4eb
3 changed files with 143 additions and 23 deletions

View File

@@ -212,25 +212,43 @@ function AdminJobsPage() {
<th>Version</th>
<th>Depth</th>
<th>Attempt</th>
<th>Started</th>
<th>Elapsed</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{activeTasks.map((task) => (
<tr key={task.id} className="active-row">
<td className="package-name">{task.package}</td>
<td className="version-constraint">
{task.version_constraint || '*'}
</td>
<td>{task.depth}</td>
<td>{task.attempts + 1}</td>
<td className="timestamp">
{task.started_at
? new Date(task.started_at).toLocaleTimeString()
: '-'}
</td>
</tr>
))}
{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>