498 lines
20 KiB
JavaScript
498 lines
20 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import api from '../api/client'
|
|
import StatusBadge from './StatusBadge'
|
|
import {
|
|
X, Cpu, MemoryStick, HardDrive, Clock, Network, Shield, Route,
|
|
Globe, Key, Download, Terminal, Wifi,
|
|
} from 'lucide-react'
|
|
|
|
const tabs = [
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'interfaces', label: 'Interfaces' },
|
|
{ id: 'services', label: 'Dienste' },
|
|
{ id: 'vpn', label: 'VPN' },
|
|
{ id: 'routes', label: 'Routen' },
|
|
{ id: 'dhcp', label: 'DHCP' },
|
|
{ id: 'certs', label: 'Zertifikate' },
|
|
{ id: 'backups', label: 'Backups' },
|
|
]
|
|
|
|
export default function AgentPanel({ agentId, customers, onClose, onReload }) {
|
|
const [data, setData] = useState(null)
|
|
const [tab, setTab] = useState('overview')
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
setLoading(true)
|
|
setTab('overview')
|
|
api.getAgent(agentId).then(setData).finally(() => setLoading(false))
|
|
}, [agentId])
|
|
|
|
useEffect(() => {
|
|
if (!data) return
|
|
const iv = setInterval(() => {
|
|
api.getAgent(agentId).then(setData)
|
|
}, 30000)
|
|
return () => clearInterval(iv)
|
|
}, [agentId, data])
|
|
|
|
if (loading) return <Panel onClose={onClose}><div className="p-6 text-gray-500">Laden...</div></Panel>
|
|
if (!data) return <Panel onClose={onClose}><div className="p-6 text-red-400">Nicht gefunden</div></Panel>
|
|
|
|
const { agent, system_data: sys, status } = data
|
|
const cust = agent.customer_id ? customers.find((c) => c.id === agent.customer_id) : null
|
|
|
|
return (
|
|
<Panel onClose={onClose}>
|
|
{/* Header */}
|
|
<div className="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 border-b border-gray-700">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-lg font-bold text-white">{agent.name}</h2>
|
|
<StatusBadge status={status} />
|
|
</div>
|
|
{cust && (
|
|
<div className="text-sm text-orange-400 mt-0.5">{cust.number} — {cust.name}</div>
|
|
)}
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
{agent.hostname} · IP: {agent.ip} · {sys?.opnsense_version || agent.opnsense_version || '—'}
|
|
</div>
|
|
</div>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-white">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-1 mt-4 overflow-x-auto text-xs">
|
|
{tabs.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => setTab(t.id)}
|
|
className={`px-3 py-1.5 rounded-t whitespace-nowrap transition-colors ${
|
|
tab === t.id
|
|
? 'bg-gray-900 text-orange-400 border-t border-x border-gray-700'
|
|
: 'text-gray-400 hover:text-gray-200'
|
|
}`}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
|
{!sys ? (
|
|
<div className="text-gray-500">Keine Systemdaten</div>
|
|
) : tab === 'overview' ? (
|
|
<OverviewTab sys={sys} />
|
|
) : tab === 'interfaces' ? (
|
|
<InterfacesTab sys={sys} />
|
|
) : tab === 'services' ? (
|
|
<ServicesTab sys={sys} />
|
|
) : tab === 'vpn' ? (
|
|
<VPNTab sys={sys} />
|
|
) : tab === 'routes' ? (
|
|
<RoutesTab sys={sys} />
|
|
) : tab === 'dhcp' ? (
|
|
<DHCPTab sys={sys} />
|
|
) : tab === 'certs' ? (
|
|
<CertsTab sys={sys} />
|
|
) : tab === 'backups' ? (
|
|
<BackupsTab agentId={agentId} />
|
|
) : null}
|
|
</div>
|
|
</Panel>
|
|
)
|
|
}
|
|
|
|
function Panel({ onClose, children }) {
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-40 bg-black/50" onClick={onClose} />
|
|
<div className="fixed inset-y-0 right-0 z-50 w-full max-w-3xl bg-gray-900 border-l border-gray-800 flex flex-col shadow-2xl animate-slide-in">
|
|
{children}
|
|
</div>
|
|
<style>{`
|
|
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
|
.animate-slide-in { animation: slideIn 0.2s ease-out; }
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function MetricCard({ icon: Icon, label, value, sub, bar, barColor }) {
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-4">
|
|
<div className="flex items-center gap-2 text-gray-500 mb-2">
|
|
{Icon && <Icon className="w-4 h-4" />}
|
|
<span className="text-xs uppercase">{label}</span>
|
|
</div>
|
|
<div className="text-xl font-bold text-white">{value}</div>
|
|
{sub && <div className="text-xs text-gray-500 mt-0.5">{sub}</div>}
|
|
{bar !== undefined && bar !== null && (
|
|
<div className="mt-2 h-1.5 bg-gray-700 rounded overflow-hidden">
|
|
<div className={`h-full rounded ${barColor || 'bg-blue-500'}`} style={{ width: `${Math.min(bar, 100)}%` }} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function OverviewTab({ sys }) {
|
|
const rootDisk = sys.disks?.find((d) => d.mount_point === '/')
|
|
const diskPct = rootDisk && rootDisk.total_bytes > 0
|
|
? (rootDisk.used_bytes / rootDisk.total_bytes * 100) : null
|
|
const ramPct = sys.memory?.total_bytes > 0
|
|
? (sys.memory.used_bytes / sys.memory.total_bytes * 100) : null
|
|
const cpuPct = sys.cpu?.usage_percent
|
|
|
|
const barColor = (v) => v > 90 ? 'bg-red-500' : v > 70 ? 'bg-yellow-500' : v > 50 ? 'bg-orange-500' : 'bg-green-500'
|
|
|
|
const ifaceCount = sys.network_interfaces?.filter((i) => i.status === 'active' || i.status === 'up').length || 0
|
|
const gwCount = sys.gateways?.length || 0
|
|
const wgCount = sys.wireguard_peers?.length || 0
|
|
const routeCount = sys.routes?.length || 0
|
|
const certCount = sys.certificates?.length || 0
|
|
const svcRunning = sys.services?.filter((s) => s.running).length || 0
|
|
const svcTotal = sys.services?.length || 0
|
|
|
|
return (
|
|
<>
|
|
<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)} />
|
|
<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)} />
|
|
<MetricCard icon={Clock} label="Uptime" value={sys.uptime_seconds ? formatUptime(sys.uptime_seconds) : '—'} />
|
|
</div>
|
|
|
|
<h3 className="text-sm font-medium text-gray-300 mt-4">Firewall Status</h3>
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<StatusCard icon={Shield} value={sys.opnsense_version || '—'} label="OPNsense" />
|
|
<StatusCard icon={Network} value={ifaceCount} label="Interfaces" />
|
|
<StatusCard icon={Globe} value={gwCount} label="Gateways" />
|
|
<StatusCard icon={Wifi} value={wgCount} label="VPN Tunnel" />
|
|
<StatusCard icon={Route} value={routeCount} label="Routen" />
|
|
<StatusCard icon={Key} value={certCount} label="Zertifikate" />
|
|
<StatusCard value={`${svcRunning}/${svcTotal}`} label="Dienste" />
|
|
</div>
|
|
|
|
{/* Gateways */}
|
|
{sys.gateways && sys.gateways.length > 0 && (
|
|
<>
|
|
<h3 className="text-sm font-medium text-gray-300 mt-4">Gateways</h3>
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">Name</th>
|
|
<th className="px-3 py-2">Gateway</th>
|
|
<th className="px-3 py-2">Status</th>
|
|
<th className="px-3 py-2">RTT</th>
|
|
<th className="px-3 py-2">Loss</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{sys.gateways.map((gw) => (
|
|
<tr key={gw.name}>
|
|
<td className="px-3 py-2 text-white">{gw.name}</td>
|
|
<td className="px-3 py-2 text-gray-400">{gw.gateway}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={gw.status === 'none' ? 'text-green-400' : 'text-yellow-400'}>
|
|
{gw.status === 'none' ? 'OK' : gw.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-400">{gw.delay || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400">{gw.loss || '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
function StatusCard({ icon: Icon, value, label }) {
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-3 text-center">
|
|
{Icon && <Icon className="w-5 h-5 mx-auto text-gray-500 mb-1" />}
|
|
<div className="text-lg font-bold text-white">{value}</div>
|
|
<div className="text-xs text-gray-500">{label}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InterfacesTab({ sys }) {
|
|
const ifaces = sys.network_interfaces || []
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">Interface</th>
|
|
<th className="px-3 py-2">Status</th>
|
|
<th className="px-3 py-2">MAC</th>
|
|
<th className="px-3 py-2">Adressen</th>
|
|
<th className="px-3 py-2">RX</th>
|
|
<th className="px-3 py-2">TX</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{ifaces.map((i) => (
|
|
<tr key={i.name}>
|
|
<td className="px-3 py-2 text-white font-mono text-xs">{i.name}</td>
|
|
<td className="px-3 py-2">
|
|
<span className={`text-xs ${i.status === 'active' || i.status === 'up' ? 'text-green-400' : 'text-gray-500'}`}>
|
|
{i.status || '—'}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-400 font-mono text-xs">{i.mac || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">
|
|
{i.addresses && i.addresses.length > 0
|
|
? i.addresses.join(', ')
|
|
: '—'}
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{formatBytes(i.rx_bytes)}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{formatBytes(i.tx_bytes)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ServicesTab({ sys }) {
|
|
const services = sys.services || []
|
|
const running = services.filter((s) => s.running)
|
|
const stopped = services.filter((s) => !s.running)
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="text-sm text-gray-400">{running.length} aktiv / {stopped.length} inaktiv</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{services.map((svc) => (
|
|
<span
|
|
key={svc.name}
|
|
className={`text-xs px-2 py-1 rounded ${
|
|
svc.running
|
|
? 'bg-green-900/30 text-green-400 border border-green-800/50'
|
|
: 'bg-gray-800 text-gray-500 border border-gray-700'
|
|
}`}
|
|
>
|
|
{svc.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function VPNTab({ sys }) {
|
|
const peers = sys.wireguard_peers || []
|
|
if (peers.length === 0) return <div className="text-gray-500">Keine WireGuard-Peers</div>
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">Interface</th>
|
|
<th className="px-3 py-2">Public Key</th>
|
|
<th className="px-3 py-2">Endpoint</th>
|
|
<th className="px-3 py-2">Transfer</th>
|
|
<th className="px-3 py-2">Last Handshake</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{peers.map((p, i) => (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2 text-white font-mono text-xs">{p.interface || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400 font-mono text-xs">{(p.public_key || '—').substring(0, 16)}...</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{p.endpoint || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">
|
|
{p.transfer_rx ? `RX: ${formatBytes(p.transfer_rx)} / TX: ${formatBytes(p.transfer_tx)}` : '—'}
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{p.latest_handshake || '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RoutesTab({ sys }) {
|
|
const routes = sys.routes || []
|
|
if (routes.length === 0) return <div className="text-gray-500">Keine Routen</div>
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">Ziel</th>
|
|
<th className="px-3 py-2">Gateway</th>
|
|
<th className="px-3 py-2">Flags</th>
|
|
<th className="px-3 py-2">Interface</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{routes.map((r, i) => (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2 text-white font-mono text-xs">{r.destination}</td>
|
|
<td className="px-3 py-2 text-gray-400 font-mono text-xs">{r.gateway}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{r.flags}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{r.interface_name || r.iface}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DHCPTab({ sys }) {
|
|
const leases = sys.dhcp_leases || []
|
|
if (leases.length === 0) return <div className="text-gray-500">Keine DHCP Leases</div>
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">IP</th>
|
|
<th className="px-3 py-2">MAC</th>
|
|
<th className="px-3 py-2">Hostname</th>
|
|
<th className="px-3 py-2">Ablauf</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{leases.map((l, i) => (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2 text-white font-mono text-xs">{l.ip || l.address}</td>
|
|
<td className="px-3 py-2 text-gray-400 font-mono text-xs">{l.mac || l.hwaddr}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{l.hostname || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{l.expires || l.expire || '—'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CertsTab({ sys }) {
|
|
const certs = sys.certificates || []
|
|
if (certs.length === 0) return <div className="text-gray-500">Keine Zertifikate</div>
|
|
return (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">Name</th>
|
|
<th className="px-3 py-2">Aussteller</th>
|
|
<th className="px-3 py-2">Gueltig bis</th>
|
|
<th className="px-3 py-2">Typ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{certs.map((c, i) => {
|
|
const expires = c.not_after ? new Date(c.not_after) : null
|
|
const isExpired = expires && expires < new Date()
|
|
const soonExpires = expires && !isExpired && (expires - new Date()) < 30 * 86400000
|
|
return (
|
|
<tr key={i}>
|
|
<td className="px-3 py-2 text-white text-xs">{c.name || c.subject || '—'}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{c.issuer || '—'}</td>
|
|
<td className={`px-3 py-2 text-xs ${isExpired ? 'text-red-400' : soonExpires ? 'text-yellow-400' : 'text-gray-400'}`}>
|
|
{expires ? expires.toLocaleDateString('de-DE') : '—'}
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{c.type || (c.is_ca ? 'CA' : 'Cert')}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BackupsTab({ agentId }) {
|
|
const [backups, setBackups] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
api.getBackups(agentId).then(setBackups).catch(() => {}).finally(() => setLoading(false))
|
|
}, [agentId])
|
|
|
|
const triggerBackup = async () => {
|
|
await api.triggerBackup(agentId)
|
|
setTimeout(() => {
|
|
api.getBackups(agentId).then(setBackups)
|
|
}, 3000)
|
|
}
|
|
|
|
if (loading) return <div className="text-gray-500">Laden...</div>
|
|
return (
|
|
<div className="space-y-3">
|
|
<button
|
|
onClick={triggerBackup}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
Backup jetzt erstellen
|
|
</button>
|
|
{backups.length === 0 ? (
|
|
<div className="text-gray-500">Keine Backups vorhanden</div>
|
|
) : (
|
|
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-gray-500 text-xs border-b border-gray-700">
|
|
<th className="px-3 py-2">ID</th>
|
|
<th className="px-3 py-2">Erstellt</th>
|
|
<th className="px-3 py-2">Groesse</th>
|
|
<th className="px-3 py-2">Hash</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700/50">
|
|
{backups.map((b) => (
|
|
<tr key={b.id}>
|
|
<td className="px-3 py-2 text-white">{b.id}</td>
|
|
<td className="px-3 py-2 text-gray-400 text-xs">{new Date(b.created_at).toLocaleString('de-DE')}</td>
|
|
<td className="px-3 py-2 text-gray-400">{formatBytes(b.size)}</td>
|
|
<td className="px-3 py-2 text-gray-500 font-mono text-xs">{(b.hash || '').substring(0, 16)}...</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (!bytes || bytes === 0) return '0 B'
|
|
const k = 1024
|
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
|
|
}
|
|
|
|
function formatUptime(seconds) {
|
|
const d = Math.floor(seconds / 86400)
|
|
const h = Math.floor((seconds % 86400) / 3600)
|
|
const m = Math.floor((seconds % 3600) / 60)
|
|
if (d > 0) return `${d}d ${h}h ${m}m`
|
|
return `${h}h ${m}m`
|
|
}
|