menzeljandClaude Opus 4.8
c830d28b65
Replace the analytics-style dashboard (stack-health funnel, uptime %, operations/day grid, AI pill) with an attention-driven fleet cockpit: - New /api/dashboard/fleet endpoint: server-side fan-out across the local host and every agent into one payload — a prioritized "needs attention" list, headline KPIs, an honest stack-status breakdown and a per-host resource rollup. Each agent uses its own DB session so the fan-out is concurrency-safe; failures degrade to "offline" instead of stalling. - New frontend: AttentionStrip, FleetKpiRow, StackStatusBar and HostResourceTable; Dashboard.tsx rewritten around them. - Remove the funnel/summary endpoints, the uptime sampler loop and the ops-activity machinery; delete the now-unused chart components. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
101 lines
3.9 KiB
TypeScript
101 lines
3.9 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import type { FleetHost } from "@/api/dashboard";
|
|
import { cn, formatBytes } from "@/lib/utils";
|
|
|
|
const DISK_PRESSURE = 85;
|
|
const MEM_PRESSURE = 90;
|
|
|
|
function Meter({ used, total, pressure }: { used: number; total: number; pressure: number }) {
|
|
const pct = total > 0 ? Math.round((used / total) * 100) : 0;
|
|
const hot = pct >= pressure;
|
|
return (
|
|
<div className="min-w-[7rem]">
|
|
<div className="mb-1 flex items-center justify-between text-xs">
|
|
<span className={cn("font-semibold", hot ? "text-red-600 dark:text-red-400" : "text-sp-text-1")}>
|
|
{pct}%
|
|
</span>
|
|
<span className="text-sp-text-3">
|
|
{formatBytes(used)} / {formatBytes(total)}
|
|
</span>
|
|
</div>
|
|
<div className="h-1.5 rounded-pill bg-sp-surface-2">
|
|
<div
|
|
className={cn("h-1.5 rounded-pill", hot ? "bg-red-500" : "bg-sp-blue")}
|
|
style={{ width: `${Math.min(pct, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function HostResourceTable({ hosts }: { hosts: FleetHost[] }) {
|
|
return (
|
|
<div className="sp-card overflow-hidden p-0">
|
|
<div className="border-b border-sp-border px-4 py-2.5">
|
|
<h2 className="sp-label">Hosts</h2>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-xs text-sp-text-3">
|
|
<th className="px-4 py-2 font-medium">Host</th>
|
|
<th className="px-4 py-2 font-medium">CPU</th>
|
|
<th className="px-4 py-2 font-medium">Memory</th>
|
|
<th className="px-4 py-2 font-medium">Disk</th>
|
|
<th className="px-4 py-2 font-medium">Containers</th>
|
|
<th className="px-4 py-2 font-medium">Stacks</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-sp-border">
|
|
{hosts.map((h) => (
|
|
<tr key={String(h.id)} className="align-middle">
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={cn(
|
|
"h-2.5 w-2.5 shrink-0 rounded-full",
|
|
h.online ? "bg-sp-green" : "bg-slate-400"
|
|
)}
|
|
title={h.status}
|
|
/>
|
|
<span className="font-medium text-sp-text-1">{h.name}</span>
|
|
</div>
|
|
</td>
|
|
{h.online ? (
|
|
<>
|
|
<td className="px-4 py-3 text-sp-text-2">{h.cpu_cores || "—"}</td>
|
|
<td className="px-4 py-3">
|
|
<Meter used={h.mem_used} total={h.mem_total} pressure={MEM_PRESSURE} />
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<Meter used={h.disk_used} total={h.disk_total} pressure={DISK_PRESSURE} />
|
|
</td>
|
|
<td className="px-4 py-3 text-sp-text-2">
|
|
{h.containers_running}/{h.containers_total}
|
|
</td>
|
|
<td className="px-4 py-3 text-sp-text-2">
|
|
{h.stacks.running}/{h.stacks.total}
|
|
{h.unhealthy > 0 && (
|
|
<span className="ml-1.5 text-xs font-semibold text-red-600 dark:text-red-400">
|
|
· {h.unhealthy} unhealthy
|
|
</span>
|
|
)}
|
|
</td>
|
|
</>
|
|
) : (
|
|
<td className="px-4 py-3 text-sp-text-3" colSpan={5}>
|
|
{h.status} —{" "}
|
|
<Link to="/settings" className="text-sp-blue hover:underline">
|
|
check under Settings
|
|
</Link>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|