Frontend: Firewall-Tabelle mit CPU/RAM/Disk/Uptime/Gateways, sortierbar, Slide-in Detail-Panel mit Tabs (Uebersicht, Interfaces, Dienste, VPN, Routen, DHCP, Zertifikate, Backups)
This commit is contained in:
cynfo3000
+215
-73
@@ -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`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user