Creationshop/cannaiq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Make Tasks Dashboard header sticky

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Kelly
2025-12-11 09:04:21 -07:00
parent 6f0a58f5d2
commit 2a9ae61dce
1 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
cannaiq/src/pages/TasksDashboard.tsx
View File

@@ -256,46 +256,47 @@ export default function TasksDashboard() {
return ( return (
<Layout> <Layout>
<div className="space-y-6"> <div className="space-y-6">
{/* Header */} {/* Sticky Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="sticky top-0 z-10 bg-white pb-4 -mx-6 px-6 pt-2 border-b border-gray-200 shadow-sm">
<div> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2"> <div>
<ListChecks className="w-7 h-7 text-emerald-600" /> <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
Task Queue <ListChecks className="w-7 h-7 text-emerald-600" />
</h1> Task Queue
<p className="text-gray-500 mt-1"> </h1>
{totalActive} active, {totalPending} pending tasks <p className="text-gray-500 mt-1">
</p> {totalActive} active, {totalPending} pending tasks
</div> </p>
</div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Worker Scaling */} {/* Worker Scaling */}
{k8sAvailable && ( {k8sAvailable && (
<div className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg"> <div className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg">
<Server className="w-4 h-4 text-gray-500" /> <Server className="w-4 h-4 text-gray-500" />
<button <button
onClick={() => scaleWorkers(-5)} onClick={() => scaleWorkers(-5)}
disabled={scalingWorkers || workerReplicas === 0} disabled={scalingWorkers || workerReplicas === 0}
className="p-1 hover:bg-gray-200 rounded disabled:opacity-50" className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
title="Remove 5 workers" title="Remove 5 workers"
> >
<Minus className="w-4 h-4" /> <Minus className="w-4 h-4" />
</button> </button>
<span className={`min-w-[60px] text-center font-mono ${scalingWorkers ? 'animate-pulse' : ''}`}> <span className={`min-w-[60px] text-center font-mono ${scalingWorkers ? 'animate-pulse' : ''}`}>
{workerReady}/{workerReplicas} {workerReady}/{workerReplicas}
</span> </span>
<button <button
onClick={() => scaleWorkers(5)} onClick={() => scaleWorkers(5)}
disabled={scalingWorkers || workerReplicas >= 50} disabled={scalingWorkers || workerReplicas >= 50}
className="p-1 hover:bg-gray-200 rounded disabled:opacity-50" className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
title="Add 5 workers" title="Add 5 workers"
> >
<Plus className="w-4 h-4" /> <Plus className="w-4 h-4" />
</button> </button>
</div> </div>
)} )}
{/* Pool Toggle */} {/* Pool Toggle */}
<button <button
onClick={togglePool} onClick={togglePool}
disabled={poolLoading} disabled={poolLoading}
@@ -318,6 +319,7 @@ export default function TasksDashboard() {
)} )}
</button> </button>
<span className="text-sm text-gray-400">Auto-refreshes every 15s</span> <span className="text-sm text-gray-400">Auto-refreshes every 15s</span>
</div>
</div> </div>
</div> </div>