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

Frontend: Firewall-Tabelle mit CPU/RAM/Disk/Uptime/Gateways, sortierbar, Slide-in Detail-Panel mit Tabs (Uebersicht, Interfaces, Dienste, VPN, Routen, DHCP, Zertifikate, Backups)

Browse Source
This commit is contained in:
cynfo3000 2026-02-28 16:03:02 +01:00
parent c56fded7d7
commit 616a0cb6ac
5 changed files with 747 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/api/handlers.go
View File

@ -50,6 +50,7 @@ func (h *Handler) SetupRoutes(mux *http.ServeMux, hub *ws.Hub) {
// User-Routes
mux.HandleFunc("GET /api/v1/users", h.listUsers)
mux.HandleFunc("POST /api/v1/users", h.createUser)
mux.HandleFunc("PUT /api/v1/users/{id}/password", h.changePassword)
mux.HandleFunc("DELETE /api/v1/users/{id}", h.deleteUser)
// WebSocket und Tunnel-Routes

25
backend/api/users.go
View File

@ -39,6 +39,31 @@ func (h *Handler) createUser(w http.ResponseWriter, r *http.Request) {
writeJSON(w, http.StatusCreated, u)
}
// PUT /api/v1/users/{id}/password
func (h *Handler) changePassword(w http.ResponseWriter, r *http.Request) {
id, err := strconv.Atoi(r.PathValue("id"))
if err != nil {
writeError(w, http.StatusBadRequest, "Ungueltige ID")
return
}
var req struct {
Password string `json:"password"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil || req.Password == "" {
writeError(w, http.StatusBadRequest, "password ist erforderlich")
return
}
if len(req.Password) < 6 {
writeError(w, http.StatusBadRequest, "Passwort muss mindestens 6 Zeichen lang sein")
return
}
if err := h.db.ChangePassword(id, req.Password); err != nil {
writeError(w, http.StatusInternalServerError, "Passwort aendern fehlgeschlagen")
return
}
writeJSON(w, http.StatusOK, map[string]string{"message": "Passwort geaendert"})
}
// DELETE /api/v1/users/{id}
func (h *Handler) deleteUser(w http.ResponseWriter, r *http.Request) {
id, err := strconv.Atoi(r.PathValue("id"))

9
backend/db/users.go
View File

@ -73,6 +73,15 @@ func (d *Database) UpdateUserLastLogin(id int) error {
return err
}
func (d *Database) ChangePassword(id int, newPassword string) error {
hash, err := bcrypt.GenerateFromPassword([]byte(newPassword), bcrypt.DefaultCost)
if err != nil {
return err
}
_, err = d.db.Exec("UPDATE users SET password_hash = $1 WHERE id = $2", string(hash), id)
return err
}
func (d *Database) DeleteUser(id int) (bool, error) {
res, err := d.db.Exec("DELETE FROM users WHERE id = $1", id)
if err != nil {

497
frontend/src/components/AgentPanel.jsx Normal file
View File

@ -0,0 +1,497 @@
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} &middot; IP: {agent.ip} &middot; {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`
}

288
frontend/src/pages/Agents.jsx
View File

@ -1,109 +1,220 @@
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useEffect, useState, useMemo } from 'react'
import api from '../api/client'
import StatusBadge from '../components/StatusBadge'
import { Search } from 'lucide-react'
import AgentPanel from '../components/AgentPanel'
import { Search, ChevronUp, ChevronDown } from 'lucide-react'
export default function Agents() {
const [agents, setAgents] = useState([])
const [customers, setCustomers] = useState([])
const [search, setSearch] = useState('')
const [loading, setLoading] = useState(true)
const [sortKey, setSortKey] = useState('customer')
const [sortDir, setSortDir] = useState('asc')
const [selectedId, setSelectedId] = useState(null)
useEffect(() => {
const reload = () => {
Promise.all([api.getAgents(), api.getCustomers()])
.then(([a, c]) => {
setAgents(a || [])
setCustomers(c || [])
})
.finally(() => setLoading(false))
}
useEffect(() => {
reload()
const iv = setInterval(reload, 30000)
return () => clearInterval(iv)
}, [])
const customerMap = {}
customers.forEach((c) => (customerMap[c.id] = c))
const customerMap = useMemo(() => {
const m = {}
customers.forEach((c) => (m[c.id] = c))
return m
}, [customers])
const filtered = agents.filter((a) => {
const q = search.toLowerCase()
const cust = a.customer_id ? customerMap[a.customer_id] : null
return (
a.name.toLowerCase().includes(q) ||
a.ip.toLowerCase().includes(q) ||
a.hostname.toLowerCase().includes(q) ||
(cust && (cust.name.toLowerCase().includes(q) || cust.number.toLowerCase().includes(q)))
)
})
// Enrich agents with system data summaries
const [agentDetails, setAgentDetails] = useState({})
useEffect(() => {
agents.forEach((a) => {
if (!agentDetails[a.id]) {
api.getAgent(a.id).then((d) => {
setAgentDetails((prev) => ({ ...prev, [a.id]: d }))
})
}
})
}, [agents])
const toggleSort = (key) => {
if (sortKey === key) {
setSortDir(sortDir === 'asc' ? 'desc' : 'asc')
} else {
setSortKey(key)
setSortDir('asc')
}
}
const enriched = useMemo(() => {
return agents.map((a) => {
const detail = agentDetails[a.id]
const sys = detail?.system_data
const cust = a.customer_id ? customerMap[a.customer_id] : null
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 gateways = sys?.gateways || []
return {
...a,
customer: cust,
customerName: cust?.name || '',
customerNumber: cust?.number || '',
cpuPct: sys?.cpu?.usage_percent ?? null,
ramPct,
diskPct,
uptime: sys?.uptime_seconds || 0,
version: sys?.opnsense_version || a.opnsense_version || '',
gateways,
sys,
}
})
}, [agents, agentDetails, customerMap])
const filtered = useMemo(() => {
let list = enriched
if (search) {
const q = search.toLowerCase()
list = list.filter((a) =>
a.name.toLowerCase().includes(q) ||
a.ip.toLowerCase().includes(q) ||
a.hostname.toLowerCase().includes(q) ||
a.customerName.toLowerCase().includes(q) ||
a.customerNumber.toLowerCase().includes(q)
)
}
list.sort((a, b) => {
let va, vb
switch (sortKey) {
case 'customer': va = a.customerNumber; vb = b.customerNumber; break
case 'name': va = a.name; vb = b.name; break
case 'ip': va = a.ip; vb = b.ip; break
case 'version': va = a.version; vb = b.version; break
case 'uptime': return sortDir === 'asc' ? a.uptime - b.uptime : b.uptime - a.uptime
case 'cpu': return sortDir === 'asc' ? (a.cpuPct ?? 999) - (b.cpuPct ?? 999) : (b.cpuPct ?? -1) - (a.cpuPct ?? -1)
case 'ram': return sortDir === 'asc' ? (a.ramPct ?? 999) - (b.ramPct ?? 999) : (b.ramPct ?? -1) - (a.ramPct ?? -1)
case 'disk': return sortDir === 'asc' ? (a.diskPct ?? 999) - (b.diskPct ?? 999) : (b.diskPct ?? -1) - (a.diskPct ?? -1)
case 'status': va = a.status; vb = b.status; break
default: va = a.name; vb = b.name
}
if (typeof va === 'string') {
const cmp = va.localeCompare(vb)
return sortDir === 'asc' ? cmp : -cmp
}
return 0
})
return list
}, [enriched, search, sortKey, sortDir])
const SortHeader = ({ label, k, className = '' }) => (
<th
className={`px-3 py-2 font-medium cursor-pointer hover:text-gray-300 select-none ${className}`}
onClick={() => toggleSort(k)}
>
<span className="inline-flex items-center gap-1">
{label}
{sortKey === k && (sortDir === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />)}
</span>
</th>
)
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h1 className="text-xl font-bold text-white">Firewalls</h1>
<span className="text-sm text-gray-500">{agents.length} gesamt</span>
<h1 className="text-xl font-bold text-white">Firewalls ({agents.length})</h1>
</div>
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
<input
type="text"
placeholder="Suchen (Name, IP, Kunde)..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full bg-gray-900 border border-gray-800 rounded pl-10 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-orange-500"
/>
<div className="flex items-center gap-3">
<div className="relative flex-1">
<Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
<input
type="text"
placeholder="Suchen (Name, IP, Kunde)..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full bg-gray-900 border border-gray-800 rounded pl-10 pr-3 py-2 text-sm text-white placeholder-gray-600 focus:outline-none focus:border-orange-500"
/>
</div>
</div>
{loading ? (
<div className="text-gray-500">Laden...</div>
) : (
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
<table className="w-full text-sm">
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-x-auto">
<table className="w-full text-sm whitespace-nowrap">
<thead>
<tr className="border-b border-gray-800 text-left text-gray-500">
<th className="px-4 py-2 font-medium">Status</th>
<th className="px-4 py-2 font-medium">Name</th>
<th className="px-4 py-2 font-medium hidden md:table-cell">IP</th>
<th className="px-4 py-2 font-medium hidden lg:table-cell">Version</th>
<th className="px-4 py-2 font-medium hidden lg:table-cell">Kunde</th>
<th className="px-4 py-2 font-medium hidden md:table-cell">Letzter Heartbeat</th>
<tr className="border-b border-gray-800 text-left text-gray-500 text-xs">
<th className="px-3 py-2 font-medium w-8"></th>
<SortHeader label="KUNDE" k="customer" />
<SortHeader label="NAME" k="name" />
<th className="px-3 py-2 font-medium">HOSTNAME</th>
<SortHeader label="VERSION" k="version" />
<th className="px-3 py-2 font-medium">WAN IP</th>
<SortHeader label="UPTIME" k="uptime" />
<SortHeader label="CPU" k="cpu" />
<SortHeader label="RAM" k="ram" />
<SortHeader label="DISK" k="disk" />
<th className="px-3 py-2 font-medium">LAST RESPONSE</th>
<th className="px-3 py-2 font-medium">GATEWAYS</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-800">
{filtered.map((agent) => {
const cust = agent.customer_id ? customerMap[agent.customer_id] : null
return (
<tr
key={agent.id}
className="hover:bg-gray-800/50 transition-colors cursor-pointer"
>
<td className="px-4 py-2.5">
<StatusBadge status={agent.status} />
</td>
<td className="px-4 py-2.5">
<Link to={`/agents/${agent.id}`} className="text-white hover:text-orange-400">
{agent.name}
</Link>
</td>
<td className="px-4 py-2.5 text-gray-400 hidden md:table-cell">{agent.ip}</td>
<td className="px-4 py-2.5 text-gray-400 hidden lg:table-cell">
{agent.opnsense_version || '—'}
</td>
<td className="px-4 py-2.5 hidden lg:table-cell">
{cust ? (
<span className="text-gray-400">
<span className="text-orange-400">{cust.number}</span> {cust.name}
</span>
) : (
<span className="text-gray-600">—</span>
)}
</td>
<td className="px-4 py-2.5 text-gray-500 text-xs hidden md:table-cell">
{agent.last_heartbeat
? new Date(agent.last_heartbeat).toLocaleString('de-DE')
: '—'}
</td>
</tr>
)
})}
{filtered.map((a) => (
<tr
key={a.id}
onClick={() => setSelectedId(a.id)}
className={`hover:bg-gray-800/50 transition-colors cursor-pointer ${selectedId === a.id ? 'bg-gray-800/70' : ''}`}
>
<td className="px-3 py-2"><StatusBadge status={a.status} size="dot" /></td>
<td className="px-3 py-2 text-gray-400">
{a.customer ? <span className="text-orange-400">{a.customerNumber}</span> : <span className="text-gray-600">—</span>}
</td>
<td className="px-3 py-2 text-white font-medium">{a.name}</td>
<td className="px-3 py-2 text-gray-400 text-xs">{a.hostname}</td>
<td className="px-3 py-2 text-gray-400">{a.version || '—'}</td>
<td className="px-3 py-2 text-gray-400">{a.ip}</td>
<td className="px-3 py-2 text-gray-400">{a.uptime ? formatUptime(a.uptime) : '—'}</td>
<td className="px-3 py-2">
<MiniBar value={a.cpuPct} />
</td>
<td className="px-3 py-2">
<MiniBar value={a.ramPct} />
</td>
<td className="px-3 py-2">
<MiniBar value={a.diskPct} />
</td>
<td className="px-3 py-2 text-gray-500 text-xs">
{a.last_heartbeat ? new Date(a.last_heartbeat).toLocaleString('de-DE') : '—'}
</td>
<td className="px-3 py-2">
{a.gateways.length > 0 ? (
<div className="flex flex-col gap-0.5">
{a.gateways.map((gw) => (
<span key={gw.name} className="inline-flex items-center gap-1 text-xs">
<span className={`w-1.5 h-1.5 rounded-full ${gw.status === 'none' ? 'bg-green-500' : 'bg-yellow-500'}`} />
<span className="text-gray-400">{gw.name}</span>
</span>
))}
</div>
) : '—'}
</td>
</tr>
))}
</tbody>
</table>
{filtered.length === 0 && (
@ -113,6 +224,37 @@ export default function Agents() {
)}
</div>
)}
{/* Detail Panel */}
{selectedId && (
<AgentPanel
agentId={selectedId}
customers={customers}
onClose={() => setSelectedId(null)}
onReload={reload}
/>
)}
</div>
)
}
function MiniBar({ value }) {
if (value === null || value === undefined) return <span className="text-gray-600 text-xs">—</span>
const color = value > 90 ? 'bg-red-500' : value > 70 ? 'bg-yellow-500' : value > 50 ? 'bg-blue-500' : 'bg-green-500'
return (
<div className="flex items-center gap-1.5">
<div className="w-12 h-1.5 bg-gray-800 rounded overflow-hidden">
<div className={`h-full rounded ${color}`} style={{ width: `${Math.min(value, 100)}%` }} />
</div>
<span className="text-xs text-gray-400">{value.toFixed(0)}%</span>
</div>
)
}
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`
return `${h}h ${m}m`
}