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