From eb5266f848dbfaee65d946ced79469214c3834f3 Mon Sep 17 00:00:00 2001
From: cynfo3000 <cynfo3000@cynfo.net>
Date: Fri, 6 Mar 2026 21:56:03 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Sparkline-Charts=20f=C3=BCr=20CPU=20und?=
 =?UTF-8?q?=20RAM=20(8h)=20=E2=80=94=20generischer=20useMetricChart=20Hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AgentPanel.jsx | 59 ++++++++++++++++++--------
 1 file changed, 42 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AgentPanel.jsx b/frontend/src/components/AgentPanel.jsx
index 632431d..492c50b 100644
--- a/frontend/src/components/AgentPanel.jsx
+++ b/frontend/src/components/AgentPanel.jsx
@@ -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([])
-
   useEffect(() => {
     if (!agentId) return
     const from = new Date(Date.now() - 8 * 60 * 60 * 1000).toISOString()
-    api.getMetrics(agentId, 'pf_states_current', `&from=${from}&limit=200`)
-      .then(data => {
-        if (Array.isArray(data)) setChartData(data)
-      })
+    api.getMetrics(agentId, metric, `&from=${from}&limit=200`)
+      .then(data => { if (Array.isArray(data)) setChartData(data) })
       .catch(() => {})
-  }, [agentId])
+  }, [agentId, metric])
+  return chartData
+}
 
+function PFStatesCard({ agentId, sys }) {
+  const chartData = useMetricChart(agentId, 'pf_states_current')
   if (!sys?.pf_states) return null
   const pf = sys.pf_states
   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'
-
   return (
     <MetricCard
-      icon={Shield}
-      label="PF States"
+      icon={Shield} label="PF States"
       value={pf.hard_limit > 0
         ? `${pf.current_entries.toLocaleString('de-DE')} / ${pf.hard_limit.toLocaleString('de-DE')}`
         : `${pf.current_entries.toLocaleString('de-DE')}`}
       sub={`Search: ${pf.search_rate?.toFixed(1)}/s · Insert: ${pf.insert_rate?.toFixed(1)}/s`}
-      bar={pf.hard_limit > 0 ? usedPct : null}
-      barColor={barColor}
+      bar={pf.hard_limit > 0 ? usedPct : null} barColor={barColor}
       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 }) {
   const rootDisk = sys.disks?.find((d) => d.mount_point === '/')
   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>
       <div className="grid grid-cols-2 gap-3">
-        <MetricCard icon={Cpu} label="CPU Auslastung" value={cpuPct != null ? `${cpuPct.toFixed(1)}%` : '—'}
-          sub={sys.cpu?.model} bar={cpuPct} barColor={barColor(cpuPct || 0)} />
-        <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)} />
+        <CpuCard agentId={agentId} sys={sys} />
+        <RamCard agentId={agentId} sys={sys} />
         <MetricCard icon={HardDrive} label="Festplatte" value={diskPct != null ? `${diskPct.toFixed(1)}%` : '—'}
           sub={rootDisk ? `${formatBytes(rootDisk.used_bytes)} / ${formatBytes(rootDisk.total_bytes)}` : ''}
           bar={diskPct} barColor={barColor(diskPct || 0)} />