Agent-Updater, Multi-Plattform Firmware, Frontend Firmware-Seite, Agent-Tab, Zertifikate-Redesign
Updater: - Separater Go-Daemon (rmm-updater) als eigener rc.d Service - Pollt alle 60s: Firmware vorhanden + Hash unterschiedlich + Flag gesetzt - Download -> SHA256 Verify -> Agent Stop -> Replace -> Agent Start - Automatisches Rollback bei Fehler - Deployed und getestet auf allen 3 Firewalls (.1, .19, .33) Backend: - Firmware-DB multi-plattform (freebsd/linux/windows) - update_requested Flag pro Agent in agents Tabelle - Heartbeat-Response liefert update_available wenn Flag gesetzt - Neue Endpoints: request-update, request-update-all, firmware/download - Auth: JWT + CombinedAuth Middleware (API-Key OR JWT) - Customers CRUD + Agent-Zuordnung - Users CRUD + Passwort-Aenderung Frontend: - Firmware-Seite: Multi-Plattform Upload, Agent-Liste mit Update-Trigger - Agent-Tab im AgentPanel: Update-Button, nuetzliche Befehle, Agent-Info - Zertifikate-Tab redesigned: Karten-Layout mit Restlaufzeit und Farbbalken - Sidebar: Firmware-Eintrag hinzugefuegt Plugin: - install.sh erweitert: Installiert Agent + Updater + rc.d Services - rmm_updater rc.d Service README: - Architektur-Diagramm erweitert (Frontend + Updater) - Auth, Customers, Users, Firmware API dokumentiert - Updater-Flow dokumentiert - Frontend-Seiten und Deploy beschrieben - DB-Schema aktualisiert (neue Tabellen) - Dateistruktur erweitert (updater/, frontend/, firmware.go, auth.go)
This commit is contained in:
cynfo3000
@@ -14,6 +14,31 @@ import {
|
||||
Download,
|
||||
} from 'lucide-react'
|
||||
|
||||
const SERVICE_DESCRIPTIONS = {
|
||||
configd: 'Configuration Daemon',
|
||||
dhcpd: 'DHCP Server',
|
||||
dpinger: 'Gateway Monitor',
|
||||
openssh: 'Secure Shell',
|
||||
syslogd: 'System Logger',
|
||||
unbound: 'DNS Resolver',
|
||||
openvpn: 'OpenVPN',
|
||||
cron: 'Cron Daemon',
|
||||
ntpd: 'NTP Daemon',
|
||||
'syslog-ng': 'Syslog-NG',
|
||||
haproxy: 'HAProxy Load Balancer',
|
||||
nginx: 'Nginx Webserver',
|
||||
squid: 'Squid Proxy',
|
||||
suricata: 'Suricata IDS/IPS',
|
||||
wireguard: 'WireGuard VPN',
|
||||
pf: 'Packet Filter',
|
||||
routing: 'Routing Daemon',
|
||||
radvd: 'Router Advertisement',
|
||||
dnsmasq: 'DNS Forwarder',
|
||||
monit: 'Process Monitor',
|
||||
collectd: 'System Statistics',
|
||||
rmm_agent: 'RMM Agent',
|
||||
}
|
||||
|
||||
export default function AgentDetail() {
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
@@ -94,16 +119,21 @@ export default function AgentDetail() {
|
||||
<Section title="Netzwerk-Interfaces" icon={Network}>
|
||||
<div className="divide-y divide-gray-800">
|
||||
{sys.network_interfaces
|
||||
.filter((i) => i.addresses && i.addresses.length > 0)
|
||||
.filter((i) => i.ip || (i.addresses && i.addresses.length > 0))
|
||||
.map((iface) => (
|
||||
<div key={iface.name} className="px-4 py-2 flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-white font-mono">{iface.name}</span>
|
||||
<span className={`ml-2 text-xs ${iface.status === 'active' ? 'text-green-400' : 'text-gray-500'}`}>
|
||||
{iface.role && (
|
||||
<span className="ml-2 text-xs px-1.5 py-0.5 rounded bg-blue-900/50 text-blue-300 border border-blue-800/50">
|
||||
{iface.role}
|
||||
</span>
|
||||
)}
|
||||
<span className={`ml-2 text-xs ${iface.status === 'active' || iface.status === 'up' ? 'text-green-400' : 'text-gray-500'}`}>
|
||||
{iface.status}
|
||||
</span>
|
||||
<div className="text-xs text-gray-500">
|
||||
{iface.addresses?.filter((a) => !a.includes(':')).join(', ')}
|
||||
{iface.ip || iface.addresses?.filter((a) => !a.includes(':')).join(', ') || '—'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right text-xs text-gray-500">
|
||||
@@ -119,20 +149,45 @@ export default function AgentDetail() {
|
||||
{/* Services */}
|
||||
{sys.services && sys.services.length > 0 && (
|
||||
<Section title="Dienste" icon={Shield}>
|
||||
<div className="px-4 py-2 flex flex-wrap gap-2">
|
||||
{sys.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>
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-gray-500 border-b border-gray-800">
|
||||
<th className="px-4 py-2 font-medium">Dienst</th>
|
||||
<th className="px-4 py-2 font-medium">Beschreibung</th>
|
||||
<th className="px-4 py-2 font-medium text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{sys.services
|
||||
.slice()
|
||||
.sort((a, b) => {
|
||||
const aRun = a.running || a.status === 'running'
|
||||
const bRun = b.running || b.status === 'running'
|
||||
return aRun === bRun ? a.name.localeCompare(b.name) : aRun ? -1 : 1
|
||||
})
|
||||
.map((svc) => {
|
||||
const isRunning = svc.running || svc.status === 'running'
|
||||
return (
|
||||
<tr key={svc.name}>
|
||||
<td className="px-4 py-2.5 text-white font-medium">{svc.name}</td>
|
||||
<td className="px-4 py-2.5 text-gray-400">{svc.description || SERVICE_DESCRIPTIONS[svc.name] || '—'}</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1 rounded ${
|
||||
isRunning
|
||||
? 'bg-green-900/40 text-green-400 border border-green-700/50'
|
||||
: 'bg-gray-800 text-gray-500 border border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${isRunning ? 'bg-green-400' : 'bg-gray-500'}`} />
|
||||
{isRunning ? 'running' : 'stopped'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
@@ -155,8 +210,8 @@ export default function AgentDetail() {
|
||||
<td className="px-4 py-2 text-white">{gw.name}</td>
|
||||
<td className="px-4 py-2 text-gray-400">{gw.gateway}</td>
|
||||
<td className="px-4 py-2">
|
||||
<span className={gw.status === 'none' ? 'text-green-400' : 'text-yellow-400'}>
|
||||
{gw.status === 'none' ? 'OK' : gw.status}
|
||||
<span className={gwOk(gw.status) ? 'text-green-400' : 'text-yellow-400'}>
|
||||
{gwOk(gw.status) ? 'OK' : gw.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-gray-400">{gw.delay || '—'}</td>
|
||||
@@ -251,6 +306,11 @@ function QuickStat({ icon: Icon, label, value, sub }) {
|
||||
)
|
||||
}
|
||||
|
||||
function gwOk(status) {
|
||||
const s = (status || '').toLowerCase()
|
||||
return s === 'none' || s === 'online' || s === 'ok'
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!bytes || bytes === 0) return '0 B'
|
||||
const k = 1024
|
||||
|
||||
@@ -206,7 +206,7 @@ export default function Agents() {
|
||||
<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={`w-1.5 h-1.5 rounded-full ${gwDotColor(gw.status)}`} />
|
||||
<span className="text-gray-400">{gw.name}</span>
|
||||
</span>
|
||||
))}
|
||||
@@ -238,6 +238,13 @@ export default function Agents() {
|
||||
)
|
||||
}
|
||||
|
||||
function gwDotColor(status) {
|
||||
const s = (status || '').toLowerCase()
|
||||
if (s === 'online' || s === 'none') return 'bg-green-500'
|
||||
if (s === 'offline' || s === 'down') return 'bg-red-500'
|
||||
return 'bg-yellow-500'
|
||||
}
|
||||
|
||||
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'
|
||||
|
||||
@@ -1,21 +1,26 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import api from '../api/client'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import AgentPanel from '../components/AgentPanel'
|
||||
import { Server, Users, Activity, AlertTriangle } from 'lucide-react'
|
||||
|
||||
export default function Dashboard() {
|
||||
const [agents, setAgents] = useState([])
|
||||
const [customers, setCustomers] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
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()
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
@@ -67,7 +72,7 @@ export default function Dashboard() {
|
||||
</div>
|
||||
<div className="divide-y divide-gray-800">
|
||||
{customer.agents.map((agent) => (
|
||||
<AgentRow key={agent.id} agent={agent} />
|
||||
<AgentRow key={agent.id} agent={agent} onClick={() => setSelectedId(agent.id)} selected={selectedId === agent.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,12 +88,22 @@ export default function Dashboard() {
|
||||
{agents
|
||||
.filter((a) => !a.customer_id)
|
||||
.map((agent) => (
|
||||
<AgentRow key={agent.id} agent={agent} />
|
||||
<AgentRow key={agent.id} agent={agent} onClick={() => setSelectedId(agent.id)} selected={selectedId === agent.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Detail Panel */}
|
||||
{selectedId && (
|
||||
<AgentPanel
|
||||
agentId={selectedId}
|
||||
customers={customers}
|
||||
onClose={() => setSelectedId(null)}
|
||||
onReload={reload}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -107,15 +122,15 @@ function StatCard({ icon: Icon, label, value, color }) {
|
||||
)
|
||||
}
|
||||
|
||||
function AgentRow({ agent }) {
|
||||
function AgentRow({ agent, onClick, selected }) {
|
||||
const lastHB = agent.last_heartbeat
|
||||
? new Date(agent.last_heartbeat).toLocaleString('de-DE')
|
||||
: '—'
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/agents/${agent.id}`}
|
||||
className="flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/50 transition-colors"
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`flex items-center justify-between px-4 py-2.5 hover:bg-gray-800/50 transition-colors cursor-pointer ${selected ? 'bg-gray-800/70' : ''}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusBadge status={agent.status} size="dot" />
|
||||
@@ -128,6 +143,6 @@ function AgentRow({ agent }) {
|
||||
<div className="text-xs text-gray-500">{agent.opnsense_version || '—'}</div>
|
||||
<div className="text-xs text-gray-600">{lastHB}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,272 @@
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import api from '../api/client'
|
||||
import { Upload, RefreshCw, CheckCircle, AlertTriangle, ArrowUpCircle, X, Monitor, Server, Cpu } from 'lucide-react'
|
||||
|
||||
const PLATFORMS = [
|
||||
{ id: 'freebsd', label: 'FreeBSD / OPNsense', icon: Server },
|
||||
{ id: 'linux', label: 'Linux', icon: Monitor },
|
||||
{ id: 'windows', label: 'Windows', icon: Cpu },
|
||||
]
|
||||
|
||||
export default function Firmware() {
|
||||
const [firmwareData, setFirmwareData] = useState(null)
|
||||
const [agents, setAgents] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [version, setVersion] = useState('')
|
||||
const [platform, setPlatform] = useState('freebsd')
|
||||
const [msg, setMsg] = useState('')
|
||||
const [msgType, setMsgType] = useState('info')
|
||||
const fileRef = useRef(null)
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const [fw, ag] = await Promise.all([
|
||||
api.getFirmwareInfo().catch(() => null),
|
||||
api.getAgents().catch(() => []),
|
||||
])
|
||||
setFirmwareData(fw)
|
||||
setAgents(Array.isArray(ag) ? ag : [])
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
const showMsg = (text, type = 'info') => {
|
||||
setMsg(text)
|
||||
setMsgType(type)
|
||||
setTimeout(() => setMsg(''), 5000)
|
||||
}
|
||||
|
||||
const getFwForPlatform = (p) => {
|
||||
if (!firmwareData?.platforms) return null
|
||||
return firmwareData.platforms.find(f => f.platform === p)
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
const file = fileRef.current?.files?.[0]
|
||||
if (!file) return showMsg('Bitte Binary auswaehlen', 'error')
|
||||
if (!version.trim()) return showMsg('Bitte Version angeben', 'error')
|
||||
|
||||
setUploading(true)
|
||||
try {
|
||||
const result = await api.uploadFirmware(version.trim(), platform, file)
|
||||
showMsg(`Firmware v${result.version} (${result.platform}) hochgeladen (${formatSize(result.size)})`, 'success')
|
||||
setVersion('')
|
||||
fileRef.current.value = ''
|
||||
load()
|
||||
} catch (err) {
|
||||
showMsg(`Upload fehlgeschlagen: ${err.message}`, 'error')
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const requestUpdate = async (agentId, name) => {
|
||||
try {
|
||||
await api.requestAgentUpdate(agentId)
|
||||
showMsg(`Update fuer ${name} angefordert`, 'success')
|
||||
load()
|
||||
} catch (err) {
|
||||
showMsg(`Fehler: ${err.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const cancelUpdate = async (agentId, name) => {
|
||||
try {
|
||||
await api.cancelAgentUpdate(agentId)
|
||||
showMsg(`Update-Anforderung fuer ${name} geloescht`, 'info')
|
||||
load()
|
||||
} catch (err) {
|
||||
showMsg(`Fehler: ${err.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const requestAll = async () => {
|
||||
try {
|
||||
const result = await api.requestUpdateAll()
|
||||
showMsg(result.message || 'Update fuer alle angefordert', 'success')
|
||||
load()
|
||||
} catch (err) {
|
||||
showMsg(`Fehler: ${err.message}`, 'error')
|
||||
}
|
||||
}
|
||||
|
||||
const formatSize = (bytes) => {
|
||||
if (!bytes) return '--'
|
||||
if (bytes > 1048576) return `${(bytes / 1048576).toFixed(1)} MB`
|
||||
return `${(bytes / 1024).toFixed(0)} KB`
|
||||
}
|
||||
|
||||
if (loading) return <div className="text-gray-500">Laden...</div>
|
||||
|
||||
// Fuer jetzt: alle Agents sind freebsd
|
||||
const freebsdFw = getFwForPlatform('freebsd')
|
||||
|
||||
const needsUpdate = (agent) => {
|
||||
if (!freebsdFw) return false
|
||||
return agent.agent_version !== freebsdFw.version
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<h1 className="text-2xl font-bold text-white">Agent-Firmware</h1>
|
||||
|
||||
{/* Status Message */}
|
||||
{msg && (
|
||||
<div className={`rounded-lg px-4 py-3 text-sm flex items-center gap-2 ${
|
||||
msgType === 'error' ? 'bg-red-500/10 border border-red-500/30 text-red-400' :
|
||||
msgType === 'success' ? 'bg-emerald-500/10 border border-emerald-500/30 text-emerald-400' :
|
||||
'bg-blue-500/10 border border-blue-500/30 text-blue-400'
|
||||
}`}>
|
||||
{msgType === 'success' ? <CheckCircle className="w-4 h-4 shrink-0" /> :
|
||||
msgType === 'error' ? <AlertTriangle className="w-4 h-4 shrink-0" /> : null}
|
||||
{msg}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Platform Firmware Overview */}
|
||||
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-5">
|
||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Verfuegbare Firmware</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{PLATFORMS.map(p => {
|
||||
const fw = getFwForPlatform(p.id)
|
||||
const Icon = p.icon
|
||||
return (
|
||||
<div key={p.id} className={`rounded-lg border p-4 ${
|
||||
fw ? 'bg-gray-900/50 border-gray-700/50' : 'bg-gray-900/20 border-gray-800/50'
|
||||
}`}>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon className={`w-4 h-4 ${fw ? 'text-orange-400' : 'text-gray-600'}`} />
|
||||
<span className={`text-sm font-medium ${fw ? 'text-white' : 'text-gray-600'}`}>{p.label}</span>
|
||||
</div>
|
||||
{fw ? (
|
||||
<div className="space-y-1">
|
||||
<div className="text-lg font-bold text-orange-400">v{fw.version}</div>
|
||||
<div className="text-xs text-gray-500">{formatSize(fw.size)}</div>
|
||||
<div className="text-[10px] text-gray-600 font-mono">{fw.hash?.substring(0, 16)}...</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-gray-600 mt-1">Nicht hochgeladen</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload */}
|
||||
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-5">
|
||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Neue Firmware hochladen</h2>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<select
|
||||
value={platform}
|
||||
onChange={(e) => setPlatform(e.target.value)}
|
||||
className="bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-white focus:border-orange-500 focus:outline-none"
|
||||
>
|
||||
{PLATFORMS.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Version (z.B. 1.0.2)"
|
||||
value={version}
|
||||
onChange={(e) => setVersion(e.target.value)}
|
||||
className="bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-white placeholder-gray-500 focus:border-orange-500 focus:outline-none w-40"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileRef}
|
||||
className="bg-gray-900 border border-gray-700 rounded px-3 py-2 text-sm text-gray-400 file:mr-3 file:bg-gray-700 file:text-gray-300 file:border-0 file:rounded file:px-3 file:py-1 file:text-xs file:cursor-pointer flex-1"
|
||||
/>
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={uploading}
|
||||
className="flex items-center gap-2 bg-orange-600 hover:bg-orange-500 disabled:bg-gray-700 disabled:text-gray-500 text-white px-4 py-2 rounded text-sm transition-colors shrink-0"
|
||||
>
|
||||
{uploading ? <RefreshCw className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
|
||||
{uploading ? 'Hochladen...' : 'Hochladen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Agent List */}
|
||||
<div className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Agents</h2>
|
||||
{freebsdFw && (
|
||||
<button
|
||||
onClick={requestAll}
|
||||
className="flex items-center gap-2 bg-orange-600/20 hover:bg-orange-600/30 text-orange-400 px-3 py-1.5 rounded text-xs transition-colors border border-orange-600/30"
|
||||
>
|
||||
<ArrowUpCircle className="w-3.5 h-3.5" />
|
||||
Alle updaten
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{agents.map((agent) => {
|
||||
const outdated = needsUpdate(agent)
|
||||
const pending = agent.update_requested
|
||||
return (
|
||||
<div key={agent.id} className="flex items-center justify-between bg-gray-900/50 rounded-lg px-4 py-3 border border-gray-700/30">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`w-2 h-2 rounded-full shrink-0 ${
|
||||
agent.status === 'online' ? 'bg-emerald-500' :
|
||||
agent.status === 'stale' ? 'bg-yellow-500' : 'bg-gray-600'
|
||||
}`} />
|
||||
<span className="text-white text-sm font-medium truncate">{agent.name}</span>
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-gray-700/50 text-gray-500">FreeBSD</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-xs text-gray-500">
|
||||
Version: <span className={outdated ? 'text-yellow-400' : 'text-gray-400'}>{agent.agent_version || '--'}</span>
|
||||
</span>
|
||||
{pending && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400 border border-orange-500/30">
|
||||
Update ausstehend
|
||||
</span>
|
||||
)}
|
||||
{!outdated && freebsdFw && agent.agent_version && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
|
||||
Aktuell
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0 ml-3">
|
||||
{pending ? (
|
||||
<button
|
||||
onClick={() => cancelUpdate(agent.id, agent.name)}
|
||||
className="flex items-center gap-1.5 bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 py-1.5 rounded text-xs transition-colors"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
Abbrechen
|
||||
</button>
|
||||
) : outdated ? (
|
||||
<button
|
||||
onClick={() => requestUpdate(agent.id, agent.name)}
|
||||
className="flex items-center gap-1.5 bg-orange-600 hover:bg-orange-500 text-white px-3 py-1.5 rounded text-xs transition-colors"
|
||||
>
|
||||
<ArrowUpCircle className="w-3.5 h-3.5" />
|
||||
Update
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,11 +1,16 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import api from '../api/client'
|
||||
import { Plus, Trash2 } from 'lucide-react'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { Plus, Trash2, KeyRound, ShieldAlert } from 'lucide-react'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [users, setUsers] = useState([])
|
||||
const [showAdd, setShowAdd] = useState(false)
|
||||
const [form, setForm] = useState({ username: '', password: '', display_name: '' })
|
||||
const [pwChange, setPwChange] = useState(null) // userId being changed
|
||||
const [pwForm, setPwForm] = useState({ password: '', confirm: '' })
|
||||
const [pwMsg, setPwMsg] = useState('')
|
||||
const { user: currentUser } = useAuthStore()
|
||||
|
||||
const reload = () => api.getUsers().then((u) => setUsers(u || []))
|
||||
useEffect(() => { reload() }, [])
|
||||
@@ -24,6 +29,25 @@ export default function SettingsPage() {
|
||||
reload()
|
||||
}
|
||||
|
||||
const handlePasswordChange = async () => {
|
||||
setPwMsg('')
|
||||
if (!pwForm.password || pwForm.password.length < 6) {
|
||||
setPwMsg('Mindestens 6 Zeichen')
|
||||
return
|
||||
}
|
||||
if (pwForm.password !== pwForm.confirm) {
|
||||
setPwMsg('Passwoerter stimmen nicht ueberein')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.changePassword(pwChange, pwForm.password)
|
||||
setPwMsg('Passwort geaendert')
|
||||
setTimeout(() => { setPwChange(null); setPwMsg(''); setPwForm({ password: '', confirm: '' }) }, 1500)
|
||||
} catch (e) {
|
||||
setPwMsg('Fehler: ' + e.message)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-xl font-bold text-white">Einstellungen</h1>
|
||||
@@ -42,7 +66,7 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
|
||||
{showAdd && (
|
||||
<div className="px-4 py-3 border-b border-gray-800 flex gap-2 items-end">
|
||||
<div className="px-4 py-3 border-b border-gray-800 flex gap-2 items-end flex-wrap">
|
||||
<div>
|
||||
<label className="text-xs text-gray-500">Benutzer</label>
|
||||
<input
|
||||
@@ -81,26 +105,116 @@ export default function SettingsPage() {
|
||||
|
||||
<div className="divide-y divide-gray-800">
|
||||
{users.map((u) => (
|
||||
<div key={u.id} className="px-4 py-2.5 flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-white">{u.username}</span>
|
||||
{u.display_name && (
|
||||
<span className="text-sm text-gray-500 ml-2">({u.display_name})</span>
|
||||
)}
|
||||
<span className="ml-2 text-xs text-gray-600">{u.role}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-600">
|
||||
{u.last_login ? `Letzter Login: ${new Date(u.last_login).toLocaleString('de-DE')}` : 'Nie eingeloggt'}
|
||||
</span>
|
||||
<button onClick={() => handleDelete(u.id)} className="text-gray-500 hover:text-red-400">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<div key={u.id}>
|
||||
<div className="px-4 py-2.5 flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm text-white">{u.username}</span>
|
||||
{u.display_name && (
|
||||
<span className="text-sm text-gray-500 ml-2">({u.display_name})</span>
|
||||
)}
|
||||
<span className="ml-2 text-xs text-gray-600">{u.role}</span>
|
||||
{currentUser?.username === u.username && (
|
||||
<span className="ml-2 text-xs text-orange-400">(Du)</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-600">
|
||||
{u.last_login ? `Login: ${new Date(u.last_login).toLocaleString('de-DE')}` : 'Nie eingeloggt'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => { setPwChange(pwChange === u.id ? null : u.id); setPwMsg(''); setPwForm({ password: '', confirm: '' }) }}
|
||||
className="text-gray-500 hover:text-orange-400 p-1 rounded hover:bg-gray-800 transition-colors"
|
||||
title="Passwort aendern"
|
||||
>
|
||||
<KeyRound className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(u.id)}
|
||||
className="text-gray-500 hover:text-red-400 p-1 rounded hover:bg-gray-800 transition-colors"
|
||||
title="Benutzer loeschen"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password Change */}
|
||||
{pwChange === u.id && (
|
||||
<div className="px-4 py-3 bg-gray-800/50 border-t border-gray-800 flex items-end gap-2 flex-wrap">
|
||||
<div>
|
||||
<label className="text-xs text-gray-500">Neues Passwort</label>
|
||||
<input
|
||||
type="password"
|
||||
value={pwForm.password}
|
||||
onChange={(e) => setPwForm({ ...pwForm, password: e.target.value })}
|
||||
className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-500">Bestaetigen</label>
|
||||
<input
|
||||
type="password"
|
||||
value={pwForm.confirm}
|
||||
onChange={(e) => setPwForm({ ...pwForm, confirm: e.target.value })}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handlePasswordChange()}
|
||||
className="w-full bg-gray-900 border border-gray-700 rounded px-2 py-1 text-white text-sm focus:outline-none focus:border-orange-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handlePasswordChange}
|
||||
className="px-3 py-1 bg-orange-600 hover:bg-orange-700 rounded text-sm text-white"
|
||||
>
|
||||
Aendern
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setPwChange(null); setPwMsg('') }}
|
||||
className="px-3 py-1 bg-gray-800 rounded text-sm text-gray-400"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
{pwMsg && (
|
||||
<span className={`text-sm ${pwMsg.startsWith('Fehler') || pwMsg.startsWith('Mindestens') || pwMsg.startsWith('Passwort') && !pwMsg.includes('geaendert') ? 'text-red-400' : pwMsg.includes('geaendert') ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{pwMsg}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2FA */}
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800">
|
||||
<span className="text-sm font-medium text-gray-300">Zwei-Faktor-Authentifizierung (2FA)</span>
|
||||
</div>
|
||||
<div className="px-4 py-6 flex items-center gap-3">
|
||||
<ShieldAlert className="w-6 h-6 text-gray-600" />
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">2FA ist noch nicht verfuegbar</div>
|
||||
<div className="text-xs text-gray-600 mt-0.5">TOTP-basierte Zwei-Faktor-Authentifizierung wird in einer zukuenftigen Version implementiert.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800">
|
||||
<span className="text-sm font-medium text-gray-300">System</span>
|
||||
</div>
|
||||
<div className="px-4 py-3 space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Backend</span>
|
||||
<span className="text-gray-400">192.168.85.13:8443</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">Authentifizierung</span>
|
||||
<span className="text-gray-400">JWT (8h Token)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import api from '../api/client'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import { Cable, Unplug, ExternalLink, RefreshCw, Search } from 'lucide-react'
|
||||
|
||||
const BACKEND_HOST = '192.168.85.13'
|
||||
|
||||
export default function Tunnels() {
|
||||
const [agents, setAgents] = useState([])
|
||||
const [allTunnels, setAllTunnels] = useState([]) // {agentId, agentName, agentStatus, ...tunnel}
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
const loadAll = async () => {
|
||||
setError('')
|
||||
try {
|
||||
const agentList = await api.getAgents()
|
||||
setAgents(agentList || [])
|
||||
|
||||
const tunnelPromises = (agentList || []).map(async (agent) => {
|
||||
try {
|
||||
const resp = await api.getTunnels(agent.id)
|
||||
const list = resp?.tunnels || resp?.data?.tunnels || resp?.data || resp || []
|
||||
const tunnels = Array.isArray(list) ? list : []
|
||||
return tunnels.map((t) => ({
|
||||
...t,
|
||||
agentId: agent.id,
|
||||
agentName: agent.name,
|
||||
agentIp: agent.ip,
|
||||
agentStatus: agent.status,
|
||||
}))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
})
|
||||
|
||||
const results = await Promise.all(tunnelPromises)
|
||||
setAllTunnels(results.flat())
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadAll()
|
||||
const iv = setInterval(loadAll, 15000)
|
||||
return () => clearInterval(iv)
|
||||
}, [])
|
||||
|
||||
const closeTunnel = async (agentId, tunnelId) => {
|
||||
try {
|
||||
await api.closeTunnel(agentId, tunnelId)
|
||||
setAllTunnels((prev) =>
|
||||
prev.filter((t) => !((t.id === tunnelId || t.tunnel_id === tunnelId) && t.agentId === agentId))
|
||||
)
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const closeAll = async () => {
|
||||
if (!confirm(`Alle ${allTunnels.length} Tunnel schliessen?`)) return
|
||||
for (const t of allTunnels) {
|
||||
const tid = t.id || t.tunnel_id
|
||||
await api.closeTunnel(t.agentId, tid).catch(() => {})
|
||||
}
|
||||
loadAll()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-xl font-bold text-white">Aktive Tunnel</h1>
|
||||
<span className="text-sm text-gray-500">
|
||||
{allTunnels.length} {allTunnels.length === 1 ? 'Tunnel' : 'Tunnel'} auf {new Set(allTunnels.map((t) => t.agentId)).size} Firewall(s)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={loadAll}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded text-sm text-gray-300 transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
Aktualisieren
|
||||
</button>
|
||||
{allTunnels.length > 0 && (
|
||||
<button
|
||||
onClick={closeAll}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 bg-red-600/20 hover:bg-red-600/30 border border-red-800/50 rounded text-sm text-red-400 transition-colors"
|
||||
>
|
||||
<Unplug className="w-3.5 h-3.5" />
|
||||
Alle schliessen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suchen (Firewall, IP, Ziel, Port)..."
|
||||
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>
|
||||
|
||||
{error && <div className="text-sm text-red-400 bg-red-900/20 rounded px-3 py-2 border border-red-800/50">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-gray-500">Lade Tunnel aller Firewalls...</div>
|
||||
) : (() => {
|
||||
const filtered = search
|
||||
? allTunnels.filter((t) => {
|
||||
const q = search.toLowerCase()
|
||||
const target = `${t.target_host || ''}:${t.target_port || ''}`
|
||||
return (t.agentName || '').toLowerCase().includes(q) ||
|
||||
(t.agentIp || '').toLowerCase().includes(q) ||
|
||||
target.toLowerCase().includes(q) ||
|
||||
String(t.proxy_port || t.local_port || '').includes(q)
|
||||
})
|
||||
: allTunnels
|
||||
return filtered.length === 0 ? (
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-800 px-6 py-12 text-center">
|
||||
<Cable className="w-10 h-10 text-gray-700 mx-auto mb-3" />
|
||||
<div className="text-gray-500">Keine aktiven Tunnel</div>
|
||||
<div className="text-xs text-gray-600 mt-1">
|
||||
Tunnel koennen ueber die Firewall-Detailansicht erstellt werden
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<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 text-xs">
|
||||
<th className="px-4 py-2.5 font-medium">Firewall</th>
|
||||
<th className="px-4 py-2.5 font-medium">Ziel</th>
|
||||
<th className="px-4 py-2.5 font-medium">Lokaler Zugang</th>
|
||||
<th className="px-4 py-2.5 font-medium">Status</th>
|
||||
<th className="px-4 py-2.5 font-medium">Erstellt</th>
|
||||
<th className="px-4 py-2.5 font-medium text-right">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{filtered.map((t) => {
|
||||
const tid = t.id || t.tunnel_id
|
||||
const proxyPort = t.proxy_port || t.local_port
|
||||
const target = t.target_host && t.target_port
|
||||
? `${t.target_host}:${t.target_port}`
|
||||
: t.target || '—'
|
||||
const isWebGUI = String(t.target_port) === '4444'
|
||||
|
||||
return (
|
||||
<tr key={`${t.agentId}-${tid}`} className="hover:bg-gray-800/50">
|
||||
<td className="px-4 py-2.5">
|
||||
<Link to={`/agents/${t.agentId}`} className="flex items-center gap-2 hover:text-orange-400 transition-colors">
|
||||
<StatusBadge status={t.agentStatus} size="dot" />
|
||||
<div>
|
||||
<div className="text-white text-sm">{t.agentName}</div>
|
||||
<div className="text-xs text-gray-500">{t.agentIp}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-white font-mono text-xs">
|
||||
{target}
|
||||
{isWebGUI && <span className="ml-2 text-xs text-orange-400">(WebGUI)</span>}
|
||||
{String(t.target_port) === '22' && <span className="ml-2 text-xs text-blue-400">(SSH)</span>}
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 font-mono text-xs">
|
||||
{proxyPort ? `${BACKEND_HOST}:${proxyPort}` : '—'}
|
||||
</span>
|
||||
{isWebGUI && proxyPort && (
|
||||
<a
|
||||
href={`https://${BACKEND_HOST}:${proxyPort}`}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-orange-400 hover:text-orange-300"
|
||||
title="WebGUI oeffnen"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2.5">
|
||||
<span className="inline-flex items-center gap-1.5 text-xs text-green-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
|
||||
aktiv
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-gray-500 text-xs">
|
||||
{t.created_at ? new Date(t.created_at).toLocaleString('de-DE') : '—'}
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-right">
|
||||
<button
|
||||
onClick={() => closeTunnel(t.agentId, tid)}
|
||||
className="text-red-400 hover:text-red-300 p-1 rounded hover:bg-red-900/30 transition-colors"
|
||||
title="Tunnel schliessen"
|
||||
>
|
||||
<Unplug className="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user