christian/rmm2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Sparkline-Charts für CPU und RAM (8h) — generischer useMetricChart Hook

Browse Source
This commit is contained in:
cynfo3000 2026-03-06 21:56:03 +01:00
parent aca013b848
commit eb5266f848
1 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/AgentPanel.jsx
View File

@ -373,39 +373,67 @@ function MetricCard({ icon: Icon, label, value, sub, bar, barColor, chart }) {
) )
} }
function PFStatesCard({ agentId, sys }) { function useMetricChart(agentId, metric) {
const [chartData, setChartData] = useState([]) const [chartData, setChartData] = useState([])
useEffect(() => { useEffect(() => {
if (!agentId) return if (!agentId) return
const from = new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString() const from = new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString()
api.getMetrics(agentId, 'pf_states_current', `&from=${from}&limit=200`) api.getMetrics(agentId, metric, `&from=${from}&limit=200`)
.then(data => { .then(data => { if (Array.isArray(data)) setChartData(data) })
if (Array.isArray(data)) setChartData(data)
})
.catch(() => {}) .catch(() => {})
}, [agentId]) }, [agentId, metric])
return chartData
}
function PFStatesCard({ agentId, sys }) {
const chartData = useMetricChart(agentId, 'pf_states_current')
if (!sys?.pf_states) return null if (!sys?.pf_states) return null
const pf = sys.pf_states const pf = sys.pf_states
const usedPct = pf.hard_limit > 0 ? (pf.current_entries / pf.hard_limit * 100) : 0 const usedPct = pf.hard_limit > 0 ? (pf.current_entries / pf.hard_limit * 100) : 0
const barColor = usedPct > 90 ? 'bg-red-500' : usedPct > 70 ? 'bg-yellow-500' : 'bg-green-500' const barColor = usedPct > 90 ? 'bg-red-500' : usedPct > 70 ? 'bg-yellow-500' : 'bg-green-500'
return ( return (
<MetricCard <MetricCard
icon={Shield} icon={Shield} label="PF States"
label="PF States"
value={pf.hard_limit > 0 value={pf.hard_limit > 0
? `${pf.current_entries.toLocaleString('de-DE')} / ${pf.hard_limit.toLocaleString('de-DE')}` ? `${pf.current_entries.toLocaleString('de-DE')} / ${pf.hard_limit.toLocaleString('de-DE')}`
: `${pf.current_entries.toLocaleString('de-DE')}`} : `${pf.current_entries.toLocaleString('de-DE')}`}
sub={`Search: ${pf.search_rate?.toFixed(1)}/s · Insert: ${pf.insert_rate?.toFixed(1)}/s`} sub={`Search: ${pf.search_rate?.toFixed(1)}/s · Insert: ${pf.insert_rate?.toFixed(1)}/s`}
bar={pf.hard_limit > 0 ? usedPct : null} bar={pf.hard_limit > 0 ? usedPct : null} barColor={barColor}
barColor={barColor}
chart={<Sparkline data={chartData} height={44} color="#3b82f6" />} chart={<Sparkline data={chartData} height={44} color="#3b82f6" />}
/> />
) )
} }
function CpuCard({ agentId, sys }) {
const chartData = useMetricChart(agentId, 'cpu_usage')
const cpuPct = sys?.cpu?.usage_percent
const barColor = cpuPct > 90 ? 'bg-red-500' : cpuPct > 70 ? 'bg-yellow-500' : cpuPct > 50 ? 'bg-orange-500' : 'bg-green-500'
return (
<MetricCard
icon={Cpu} label="CPU Auslastung"
value={cpuPct != null ? `${cpuPct.toFixed(1)}%` : '—'}
sub={sys?.cpu?.model} bar={cpuPct} barColor={barColor}
chart={<Sparkline data={chartData} height={44} color="#f97316" />}
/>
)
}
function RamCard({ agentId, sys }) {
const chartData = useMetricChart(agentId, 'memory_used_percent')
const ramPct = sys?.memory?.total_bytes > 0
? (sys.memory.used_bytes / sys.memory.total_bytes * 100) : null
const barColor = ramPct > 90 ? 'bg-red-500' : ramPct > 70 ? 'bg-yellow-500' : ramPct > 50 ? 'bg-orange-500' : 'bg-green-500'
return (
<MetricCard
icon={MemoryStick} label="RAM Auslastung"
value={ramPct != null ? `${ramPct.toFixed(1)}%` : '—'}
sub={sys?.memory ? `${formatBytes(sys.memory.used_bytes)} / ${formatBytes(sys.memory.total_bytes)}` : ''}
bar={ramPct} barColor={barColor}
chart={<Sparkline data={chartData} height={44} color="#a855f7" />}
/>
)
}
function OverviewTab({ sys, agentId }) { function OverviewTab({ sys, agentId }) {
const rootDisk = sys.disks?.find((d) => d.mount_point === '/') const rootDisk = sys.disks?.find((d) => d.mount_point === '/')
const diskPct = rootDisk && rootDisk.total_bytes > 0 const diskPct = rootDisk && rootDisk.total_bytes > 0
@ -428,11 +456,8 @@ function OverviewTab({ sys, agentId }) {
<> <>
<h3 className="text-sm font-medium text-gray-300">System-Metriken</h3> <h3 className="text-sm font-medium text-gray-300">System-Metriken</h3>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<MetricCard icon={Cpu} label="CPU Auslastung" value={cpuPct != null ? `${cpuPct.toFixed(1)}%` : '—'} <CpuCard agentId={agentId} sys={sys} />
sub={sys.cpu?.model} bar={cpuPct} barColor={barColor(cpuPct || 0)} /> <RamCard agentId={agentId} sys={sys} />
<MetricCard icon={MemoryStick} label="RAM Auslastung" value={ramPct != null ? `${ramPct.toFixed(1)}%` : '—'}
sub={sys.memory ? `${formatBytes(sys.memory.used_bytes)} / ${formatBytes(sys.memory.total_bytes)}` : ''}
bar={ramPct} barColor={barColor(ramPct || 0)} />
<MetricCard icon={HardDrive} label="Festplatte" value={diskPct != null ? `${diskPct.toFixed(1)}%` : '—'} <MetricCard icon={HardDrive} label="Festplatte" value={diskPct != null ? `${diskPct.toFixed(1)}%` : '—'}
sub={rootDisk ? `${formatBytes(rootDisk.used_bytes)} / ${formatBytes(rootDisk.total_bytes)}` : ''} sub={rootDisk ? `${formatBytes(rootDisk.used_bytes)} / ${formatBytes(rootDisk.total_bytes)}` : ''}
bar={diskPct} barColor={barColor(diskPct || 0)} /> bar={diskPct} barColor={barColor(diskPct || 0)} />