feat: Windows-Seite in Navigation + Agents-Filter excludes Windows
This commit is contained in:
cynfo3000
parent
0e6154a0dd
commit
4e21fe3c4e
@ -5,6 +5,7 @@ import AppLayout from './layouts/AppLayout'
|
||||
import Login from './pages/Login'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import Agents from './pages/Agents'
|
||||
import Windows from './pages/Windows'
|
||||
import AgentDetail from './pages/AgentDetail'
|
||||
import ProxmoxServers from './pages/ProxmoxServers'
|
||||
import Customers from './pages/Customers'
|
||||
@ -53,6 +54,7 @@ export default function App() {
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="agents" element={<Agents />} />
|
||||
<Route path="agents/:id" element={<AgentDetail />} />
|
||||
<Route path="windows" element={<Windows />} />
|
||||
<Route path="proxmox" element={<ProxmoxServers />} />
|
||||
<Route path="tunnels" element={<Tunnels />} />
|
||||
<Route path="customers" element={<Customers />} />
|
||||
|
||||
@ -14,11 +14,13 @@ import {
|
||||
Download,
|
||||
HardDrive,
|
||||
ClipboardList,
|
||||
Monitor,
|
||||
} from 'lucide-react'
|
||||
|
||||
const navItems = [
|
||||
{ path: '/', label: 'Dashboard', icon: LayoutDashboard },
|
||||
{ path: '/agents', label: 'Firewalls', icon: Server },
|
||||
{ path: '/windows', label: 'Windows', icon: Monitor },
|
||||
{ path: '/proxmox', label: 'Proxmox', icon: HardDrive },
|
||||
{ path: '/tunnels', label: 'Tunnel', icon: Cable },
|
||||
{ path: '/firmware', label: 'Firmware', icon: Download },
|
||||
|
||||
@ -126,7 +126,7 @@ export default function Agents() {
|
||||
const cust = a.customer_id ? customerMap[a.customer_id] : null
|
||||
|
||||
// Nur OPNsense/FreeBSD Agents anzeigen
|
||||
if (a.platform === 'linux') return null
|
||||
if (a.platform === 'linux' || a.platform === 'windows') return null
|
||||
|
||||
const rootDisk = sys?.disks?.find((d) => d.mount_point === '/')
|
||||
const diskPct = rootDisk && rootDisk.total_bytes > 0
|
||||
|
||||
157
frontend/src/pages/Windows.jsx
Normal file
157
frontend/src/pages/Windows.jsx
Normal file
@ -0,0 +1,157 @@
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import api from '../api/client'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import WindowsPanel from '../components/WindowsPanel'
|
||||
import { Search, Monitor } from 'lucide-react'
|
||||
|
||||
function fmtPct(v) {
|
||||
if (v === null || v === undefined) return '—'
|
||||
return `${Number(v).toFixed(0)}%`
|
||||
}
|
||||
|
||||
function fmtUptime(s) {
|
||||
if (!s) return '—'
|
||||
const d = Math.floor(s / 86400)
|
||||
const h = Math.floor((s % 86400) / 3600)
|
||||
return d > 0 ? `${d}d ${h}h` : `${h}h`
|
||||
}
|
||||
|
||||
function fmtBytes(b) {
|
||||
if (!b) return '—'
|
||||
if (b >= 1073741824) return `${(b / 1073741824).toFixed(1)} GB`
|
||||
return `${(b / 1048576).toFixed(0)} MB`
|
||||
}
|
||||
|
||||
export default function Windows() {
|
||||
const [agents, setAgents] = useState([])
|
||||
const [customers, setCustomers] = useState([])
|
||||
const [details, setDetails] = useState({})
|
||||
const [search, setSearch] = useState('')
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const reload = () => {
|
||||
Promise.all([api.getAgents(), api.getCustomers()]).then(([a, c]) => {
|
||||
const win = a.filter(ag => ag.platform === 'windows')
|
||||
setAgents(win)
|
||||
setCustomers(c)
|
||||
setLoading(false)
|
||||
win.forEach(ag => {
|
||||
api.getAgent(ag.id).then(d => setDetails(prev => ({ ...prev, [ag.id]: d })))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => { reload() }, [])
|
||||
|
||||
const customerMap = useMemo(() =>
|
||||
Object.fromEntries(customers.map(c => [c.id, c])), [customers])
|
||||
|
||||
const rows = useMemo(() => agents.map(a => {
|
||||
const d = details[a.id]
|
||||
const sys = d?.system_data
|
||||
const win = sys?.windows
|
||||
const cust = a.customer_id ? customerMap[a.customer_id] : null
|
||||
const memUsed = win?.memory?.total_bytes > 0
|
||||
? ((win.memory.total_bytes - win.memory.available_bytes) / win.memory.total_bytes * 100)
|
||||
: null
|
||||
const disk = win?.disks?.[0]
|
||||
return {
|
||||
id: a.id, name: a.name, status: a.status,
|
||||
version: a.agent_version,
|
||||
customer: cust ? `${cust.number} — ${cust.name}` : '—',
|
||||
customer_id: a.customer_id,
|
||||
os: win?.os_version?.replace('Windows ', 'Win ') || '—',
|
||||
cpu: win?.cpu?.load_percent != null ? fmtPct(win.cpu.load_percent) : '—',
|
||||
ram: memUsed != null ? fmtPct(memUsed) : '—',
|
||||
disk: disk?.used_percent != null ? fmtPct(disk.used_percent) : '—',
|
||||
uptime: fmtUptime(win?.uptime_seconds),
|
||||
lastHB: a.last_heartbeat
|
||||
? new Date(a.last_heartbeat).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
|
||||
: '—',
|
||||
}
|
||||
}), [agents, details, customerMap])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!search) return rows
|
||||
const q = search.toLowerCase()
|
||||
return rows.filter(r =>
|
||||
r.name.toLowerCase().includes(q) ||
|
||||
r.customer.toLowerCase().includes(q) ||
|
||||
r.os.toLowerCase().includes(q)
|
||||
)
|
||||
}, [rows, search])
|
||||
|
||||
if (loading) return <div className="p-6 text-gray-500">Laden...</div>
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center gap-3 px-6 py-3 border-b border-gray-800">
|
||||
<Monitor className="w-4 h-4 text-sky-400" />
|
||||
<span className="text-sm font-medium text-white">Windows Agents</span>
|
||||
<span className="text-xs text-gray-500">({agents.length})</span>
|
||||
<div className="flex-1" />
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-2 w-3.5 h-3.5 text-gray-500" />
|
||||
<input
|
||||
value={search} onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Suchen..."
|
||||
className="pl-8 pr-3 py-1.5 bg-gray-800 border border-gray-700 rounded text-sm text-white focus:outline-none focus:border-sky-500 w-56"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabelle */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
{agents.length === 0 ? 'Keine Windows Agents registriert' : 'Keine Ergebnisse'}
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-800 text-left">
|
||||
{['Status', 'Name', 'Kunde', 'OS', 'Version', 'CPU', 'RAM', 'Disk', 'Uptime', 'Letzter Kontakt'].map(h => (
|
||||
<th key={h} className="px-4 py-2 text-xs text-gray-500 font-medium whitespace-nowrap">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800/50">
|
||||
{filtered.map(r => (
|
||||
<tr
|
||||
key={r.id}
|
||||
onClick={() => setSelectedId(r.id)}
|
||||
className={`hover:bg-gray-800/50 cursor-pointer transition-colors ${selectedId === r.id ? 'bg-gray-800/70' : ''}`}
|
||||
>
|
||||
<td className="px-4 py-2">
|
||||
<StatusBadge status={r.status} size="dot" />
|
||||
</td>
|
||||
<td className="px-4 py-2 text-white font-medium whitespace-nowrap">{r.name}</td>
|
||||
<td className="px-4 py-2 text-gray-400 whitespace-nowrap text-xs">{r.customer}</td>
|
||||
<td className="px-4 py-2 text-gray-300 whitespace-nowrap text-xs">{r.os}</td>
|
||||
<td className="px-4 py-2 text-gray-500 text-xs font-mono">{r.version ? `v${r.version}` : '—'}</td>
|
||||
<td className="px-4 py-2 text-gray-300 text-xs">{r.cpu}</td>
|
||||
<td className="px-4 py-2 text-gray-300 text-xs">{r.ram}</td>
|
||||
<td className="px-4 py-2 text-gray-300 text-xs">{r.disk}</td>
|
||||
<td className="px-4 py-2 text-gray-500 text-xs">{r.uptime}</td>
|
||||
<td className="px-4 py-2 text-gray-600 text-xs whitespace-nowrap">{r.lastHB}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Panel */}
|
||||
{selectedId && (
|
||||
<WindowsPanel
|
||||
agentId={selectedId}
|
||||
customers={customers}
|
||||
onClose={() => setSelectedId(null)}
|
||||
onReload={reload}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user