fix: Windows-Seite identisches Format wie Firewalls (Spaltenwahl, Sort, MiniBar)
This commit is contained in:
cynfo3000
parent
4e21fe3c4e
commit
1f8fda6a83
@ -1,149 +1,300 @@
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { useEffect, useState, useMemo, useRef } from 'react'
|
||||
import api from '../api/client'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import WindowsPanel from '../components/WindowsPanel'
|
||||
import { Search, Monitor } from 'lucide-react'
|
||||
import { Search, ChevronUp, ChevronDown, Settings2, X } from 'lucide-react'
|
||||
|
||||
function fmtPct(v) {
|
||||
if (v === null || v === undefined) return '—'
|
||||
return `${Number(v).toFixed(0)}%`
|
||||
const ALL_COLUMNS = [
|
||||
{ id: 'customer', label: 'Kunde', default: true },
|
||||
{ id: 'name', label: 'Name', default: true, locked: true },
|
||||
{ id: 'hostname', label: 'Hostname', default: false },
|
||||
{ id: 'os', label: 'OS', default: true },
|
||||
{ id: 'version', label: 'Agent Version', default: true },
|
||||
{ id: 'ip', label: 'IP', default: true },
|
||||
{ id: 'uptime', label: 'Uptime', default: true },
|
||||
{ id: 'cpu', label: 'CPU', default: true },
|
||||
{ id: 'ram', label: 'RAM', default: true },
|
||||
{ id: 'disk', label: 'Disk (C:)', default: true },
|
||||
{ id: 'lastresponse', label: 'Letzter Kontakt', default: false },
|
||||
]
|
||||
|
||||
const STORAGE_KEY = 'rmm-windows-columns'
|
||||
|
||||
function loadColumns() {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY)
|
||||
if (saved) return JSON.parse(saved)
|
||||
} catch {}
|
||||
return ALL_COLUMNS.filter(c => c.default).map(c => c.id)
|
||||
}
|
||||
|
||||
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 saveColumns(cols) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(cols))
|
||||
}
|
||||
|
||||
function fmtBytes(b) {
|
||||
if (!b) return '—'
|
||||
if (b >= 1073741824) return `${(b / 1073741824).toFixed(1)} GB`
|
||||
return `${(b / 1048576).toFixed(0)} MB`
|
||||
function formatUptime(seconds) {
|
||||
if (!seconds) return '—'
|
||||
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`
|
||||
}
|
||||
|
||||
export default function Windows() {
|
||||
const [agents, setAgents] = useState([])
|
||||
const [customers, setCustomers] = useState([])
|
||||
const [details, setDetails] = useState({})
|
||||
const [agentDetails, setAgentDetails] = useState({})
|
||||
const [search, setSearch] = useState('')
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [sortKey, setSortKey] = useState('customer')
|
||||
const [sortDir, setSortDir] = useState('asc')
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [visibleCols, setVisibleCols] = useState(loadColumns)
|
||||
const [showColMenu, setShowColMenu] = useState(false)
|
||||
const colMenuRef = useRef(null)
|
||||
|
||||
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 })))
|
||||
})
|
||||
Promise.all([api.getAgents(), api.getCustomers()])
|
||||
.then(([a, c]) => {
|
||||
setAgents((a || []).filter(ag => ag.platform === 'windows'))
|
||||
setCustomers(c || [])
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}
|
||||
|
||||
useEffect(() => { reload() }, [])
|
||||
useEffect(() => {
|
||||
reload()
|
||||
const iv = setInterval(reload, 30000)
|
||||
return () => clearInterval(iv)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
agents.forEach(a => {
|
||||
if (!agentDetails[a.id]) {
|
||||
api.getAgent(a.id).then(d =>
|
||||
setAgentDetails(prev => ({ ...prev, [a.id]: d }))
|
||||
)
|
||||
}
|
||||
})
|
||||
}, [agents])
|
||||
|
||||
// Close column menu on click outside
|
||||
useEffect(() => {
|
||||
const handler = (e) => {
|
||||
if (colMenuRef.current && !colMenuRef.current.contains(e.target)) setShowColMenu(false)
|
||||
}
|
||||
document.addEventListener('mousedown', handler)
|
||||
return () => document.removeEventListener('mousedown', handler)
|
||||
}, [])
|
||||
|
||||
const customerMap = useMemo(() =>
|
||||
Object.fromEntries(customers.map(c => [c.id, c])), [customers])
|
||||
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' })
|
||||
: '—',
|
||||
const toggleSort = (key) => {
|
||||
if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc')
|
||||
else { setSortKey(key); setSortDir('asc') }
|
||||
}
|
||||
}), [agents, details, customerMap])
|
||||
|
||||
const toggleCol = (id) => {
|
||||
const col = ALL_COLUMNS.find(c => c.id === id)
|
||||
if (col?.locked) return
|
||||
const next = visibleCols.includes(id)
|
||||
? visibleCols.filter(c => c !== id)
|
||||
: [...visibleCols, id]
|
||||
setVisibleCols(next)
|
||||
saveColumns(next)
|
||||
}
|
||||
|
||||
const isColVisible = (id) => visibleCols.includes(id)
|
||||
|
||||
const enriched = useMemo(() => agents.map(a => {
|
||||
const d = agentDetails[a.id]
|
||||
const win = d?.system_data?.windows
|
||||
const cust = a.customer_id ? customerMap[a.customer_id] : null
|
||||
|
||||
const memPct = win?.memory?.total_bytes > 0
|
||||
? ((win.memory.total_bytes - (win.memory.available_bytes ?? 0)) / win.memory.total_bytes * 100)
|
||||
: null
|
||||
|
||||
// Ersten FIXED-Disk nehmen (meistens C:)
|
||||
const disk = win?.disks?.[0]
|
||||
const diskPct = disk?.used_percent ?? null
|
||||
|
||||
return {
|
||||
...a,
|
||||
customer: cust,
|
||||
customerName: cust?.name || '',
|
||||
customerNumber: cust?.number || '',
|
||||
os: win?.os_version || '—',
|
||||
cpuPct: win?.cpu?.load_percent ?? null,
|
||||
memPct,
|
||||
diskPct,
|
||||
uptime: win?.uptime_seconds || 0,
|
||||
}
|
||||
}), [agents, agentDetails, customerMap])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!search) return rows
|
||||
let list = enriched
|
||||
if (search) {
|
||||
const q = search.toLowerCase()
|
||||
return rows.filter(r =>
|
||||
r.name.toLowerCase().includes(q) ||
|
||||
r.customer.toLowerCase().includes(q) ||
|
||||
r.os.toLowerCase().includes(q)
|
||||
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)
|
||||
)
|
||||
}, [rows, search])
|
||||
}
|
||||
list = [...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 'os': va = a.os; vb = b.os; break
|
||||
case 'version': va = a.agent_version || ''; vb = b.agent_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.memPct ?? 999) - (b.memPct ?? 999) : (b.memPct ?? -1) - (a.memPct ?? -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])
|
||||
|
||||
if (loading) return <div className="p-6 text-gray-500">Laden...</div>
|
||||
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="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" />
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-bold text-white">Windows Agents ({agents.length})</h1>
|
||||
</div>
|
||||
|
||||
<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
|
||||
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"
|
||||
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-sky-500"
|
||||
/>
|
||||
</div>
|
||||
{/* Spalten-Toggle */}
|
||||
<div className="relative" ref={colMenuRef}>
|
||||
<button
|
||||
onClick={() => setShowColMenu(!showColMenu)}
|
||||
className="p-2 bg-gray-900 border border-gray-800 rounded hover:border-gray-600 text-gray-400 hover:text-white transition-colors"
|
||||
title="Spalten konfigurieren"
|
||||
>
|
||||
<Settings2 className="w-4 h-4" />
|
||||
</button>
|
||||
{showColMenu && (
|
||||
<div className="absolute right-0 top-full mt-1 z-50 bg-gray-900 border border-gray-700 rounded-lg shadow-xl py-2 w-52">
|
||||
<div className="px-3 py-1 text-xs text-gray-500 font-medium">Sichtbare Spalten</div>
|
||||
{ALL_COLUMNS.map(col => (
|
||||
<label
|
||||
key={col.id}
|
||||
className={`flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-800 ${col.locked ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={visibleCols.includes(col.id)}
|
||||
onChange={() => toggleCol(col.id)}
|
||||
disabled={col.locked}
|
||||
className="rounded border-gray-600 bg-gray-800 text-sky-500 focus:ring-sky-500 focus:ring-offset-0"
|
||||
/>
|
||||
<span className="text-gray-300">{col.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
{loading ? (
|
||||
<div className="text-gray-500">Laden...</div>
|
||||
) : (
|
||||
<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-xs whitespace-nowrap">
|
||||
<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 className="border-b border-gray-800 text-left text-gray-500 text-xs">
|
||||
<th className="px-2 py-1.5 font-medium w-8"></th>
|
||||
{isColVisible('customer') && <SortHeader label="KUNDE" k="customer" />}
|
||||
{isColVisible('name') && <SortHeader label="NAME" k="name" />}
|
||||
{isColVisible('hostname') && <th className="px-3 py-2 font-medium">HOSTNAME</th>}
|
||||
{isColVisible('os') && <SortHeader label="OS" k="os" />}
|
||||
{isColVisible('version') && <SortHeader label="AGENT" k="version" />}
|
||||
{isColVisible('ip') && <th className="px-3 py-2 font-medium">IP</th>}
|
||||
{isColVisible('uptime') && <SortHeader label="UPTIME" k="uptime" />}
|
||||
{isColVisible('cpu') && <SortHeader label="CPU" k="cpu" />}
|
||||
{isColVisible('ram') && <SortHeader label="RAM" k="ram" />}
|
||||
{isColVisible('disk') && <SortHeader label="DISK" k="disk" />}
|
||||
{isColVisible('lastresponse') && <th className="px-3 py-2 font-medium">LETZTER KONTAKT</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800/50">
|
||||
{filtered.map(r => (
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
{filtered.map(a => (
|
||||
<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' : ''}`}
|
||||
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-4 py-2">
|
||||
<StatusBadge status={r.status} size="dot" />
|
||||
<td className="px-2 py-1.5"><StatusBadge status={a.status} size="dot" /></td>
|
||||
{isColVisible('customer') && (
|
||||
<td className="px-3 py-1.5 text-gray-400">
|
||||
{a.customer
|
||||
? <span className="text-sky-400">{a.customerNumber}</span>
|
||||
: <span className="text-gray-600">—</span>}
|
||||
</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>
|
||||
)}
|
||||
{isColVisible('name') && <td className="px-3 py-1.5 text-white font-medium">{a.name}</td>}
|
||||
{isColVisible('hostname') && <td className="px-3 py-1.5 text-gray-400">{a.hostname || '—'}</td>}
|
||||
{isColVisible('os') && <td className="px-3 py-1.5 text-gray-400">{a.os}</td>}
|
||||
{isColVisible('version') && <td className="px-3 py-1.5 text-gray-500">{a.agent_version ? `v${a.agent_version}` : '—'}</td>}
|
||||
{isColVisible('ip') && <td className="px-3 py-1.5 text-gray-400">{a.ip || '—'}</td>}
|
||||
{isColVisible('uptime') && <td className="px-3 py-1.5 text-gray-400">{formatUptime(a.uptime)}</td>}
|
||||
{isColVisible('cpu') && <td className="px-3 py-1.5"><MiniBar value={a.cpuPct} /></td>}
|
||||
{isColVisible('ram') && <td className="px-3 py-1.5"><MiniBar value={a.memPct} /></td>}
|
||||
{isColVisible('disk') && <td className="px-3 py-1.5"><MiniBar value={a.diskPct} /></td>}
|
||||
{isColVisible('lastresponse') && (
|
||||
<td className="px-3 py-1.5 text-gray-500">
|
||||
{a.last_heartbeat ? new Date(a.last_heartbeat).toLocaleString('de-DE') : '—'}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{filtered.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
{search ? 'Keine Treffer' : 'Keine Windows Agents registriert'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Panel */}
|
||||
{selectedId && (
|
||||
<WindowsPanel
|
||||
agentId={selectedId}
|
||||
@ -155,3 +306,16 @@ export default function Windows() {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MiniBar({ value }) {
|
||||
if (value === null || value === undefined) return <span className="text-gray-600 text-[10px]">—</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">
|
||||
<div className="w-10 h-1 bg-gray-800 rounded overflow-hidden">
|
||||
<div className={`h-full rounded ${color}`} style={{ width: `${Math.min(value, 100)}%` }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-gray-400">{value.toFixed(0)}%</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user