mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-21 07:36:40 +00:00
Anso
748ba46669
* feat(dashboard): status masthead, unified gauges, stack health sparklines Rework the home dashboard around a single cyan-railed status masthead that carries the health state word, node meta, and reasons inline. The resource block collapses into one strip with a CPU hero sparkline, memory and disk gauge bars, and a network tile whose sparkline is built from per-container byte-counter deltas. Stack health becomes an 8-column mono table with row tinting, an uptime column sourced from the oldest running container's creation time, and a per-stack 10-minute CPU sparkline. Historical charts pick up a cyan gradient and an amber peak marker. A shared Sparkline primitive backs all of the above. * docs(dashboard): refresh screenshot for phase B layout * fix(dashboard): anchor sparkline bucketing to latest metric timestamp The cpuHistory, netHistory, and cpuPeakLabel memos called Date.now() inside useMemo, which violates react-hooks/purity: the rule fires because re-renders can produce different bucket boundaries from the same inputs. Derive a historyEndAt anchor from the newest metric sample in the polled series and thread it through to ResourceGauges.
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { useNodes } from '@/context/NodeContext';
|
|
import type { NotificationItem } from './dashboard/types';
|
|
import {
|
|
HealthStatusBar,
|
|
ResourceGauges,
|
|
StackHealthTable,
|
|
HistoricalCharts,
|
|
RecentAlerts,
|
|
useDashboardData,
|
|
} from './dashboard';
|
|
|
|
interface HomeDashboardProps {
|
|
onNavigateToStack?: (stackFile: string) => void;
|
|
notifications: NotificationItem[];
|
|
onClearNotifications: () => void | Promise<void>;
|
|
}
|
|
|
|
const NOOP = () => {};
|
|
|
|
export default function HomeDashboard({ onNavigateToStack, notifications, onClearNotifications }: HomeDashboardProps) {
|
|
const { activeNode, nodes } = useNodes();
|
|
const data = useDashboardData();
|
|
const activeNodeName = activeNode?.name || 'Local';
|
|
|
|
return (
|
|
<div className="flex-1 p-6 space-y-4">
|
|
<HealthStatusBar
|
|
stats={data.stats}
|
|
systemStats={data.systemStats}
|
|
notifications={notifications}
|
|
activeNodeName={activeNodeName}
|
|
nodeCount={data.nodeCount}
|
|
lastSyncAt={data.lastSyncAt}
|
|
/>
|
|
|
|
<ResourceGauges
|
|
systemStats={data.systemStats}
|
|
cpuHistory={data.cpuHistory}
|
|
netHistory={data.netHistory}
|
|
historyEndAt={data.historyEndAt}
|
|
/>
|
|
|
|
<StackHealthTable
|
|
stackStatuses={data.stackStatuses}
|
|
metrics={data.metrics}
|
|
stackCpuSeries={data.stackCpuSeries}
|
|
activeNodeName={activeNodeName}
|
|
onNavigateToStack={onNavigateToStack ?? NOOP}
|
|
/>
|
|
|
|
<HistoricalCharts
|
|
metrics={data.metrics}
|
|
systemStats={data.systemStats}
|
|
/>
|
|
|
|
<RecentAlerts
|
|
notifications={notifications}
|
|
nodes={nodes}
|
|
onCleared={onClearNotifications}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|