Firewalls: konfigurierbare Spalten (localStorage), kurze Versionsnr, WAN/LAN IP getrennt, Spalten-Zahnrad
This commit is contained in:
cynfo3000
parent
25a6cc2a1a
commit
025840e9ba
@ -1,10 +1,47 @@
|
||||
import { useEffect, useState, useMemo } from 'react'
|
||||
import { useEffect, useState, useMemo, useRef } from 'react'
|
||||
import api from '../api/client'
|
||||
import StatusBadge from '../components/StatusBadge'
|
||||
import AgentPanel from '../components/AgentPanel'
|
||||
import { Search, ChevronUp, ChevronDown, Plus, X } from 'lucide-react'
|
||||
import { Search, ChevronUp, ChevronDown, Plus, X, Settings2 } from 'lucide-react'
|
||||
import InstallGuide from '../components/InstallGuide'
|
||||
|
||||
const ALL_COLUMNS = [
|
||||
{ id: 'customer', label: 'Kunde', default: true },
|
||||
{ id: 'name', label: 'Name', default: true, locked: true },
|
||||
{ id: 'hostname', label: 'Hostname', default: false },
|
||||
{ id: 'version', label: 'Version', default: true },
|
||||
{ id: 'wanip', label: 'WAN IP', default: true },
|
||||
{ id: 'lanip', label: 'LAN IP', default: false },
|
||||
{ id: 'uptime', label: 'Uptime', default: true },
|
||||
{ id: 'cpu', label: 'CPU', default: true },
|
||||
{ id: 'ram', label: 'RAM', default: true },
|
||||
{ id: 'disk', label: 'Disk', default: true },
|
||||
{ id: 'lastresponse', label: 'Letzter Kontakt', default: false },
|
||||
{ id: 'gateways', label: 'Gateways', default: true },
|
||||
{ id: 'agentversion', label: 'Agent Version', default: false },
|
||||
]
|
||||
|
||||
const STORAGE_KEY = 'rmm-firewall-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 saveColumns(cols) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(cols))
|
||||
}
|
||||
|
||||
// Extract short version: "OPNsense 26.1.2_5 (amd64)" -> "26.1.2_5"
|
||||
function shortVersion(v) {
|
||||
if (!v) return ''
|
||||
const m = v.match(/(\d+\.\d+[\w._-]*)/)
|
||||
return m ? m[1] : v
|
||||
}
|
||||
|
||||
export default function Agents() {
|
||||
const [agents, setAgents] = useState([])
|
||||
const [customers, setCustomers] = useState([])
|
||||
@ -15,6 +52,9 @@ export default function Agents() {
|
||||
const [selectedId, setSelectedId] = useState(null)
|
||||
const [showAddDialog, setShowAddDialog] = useState(false)
|
||||
const [addResult, setAddResult] = useState(null)
|
||||
const [visibleCols, setVisibleCols] = useState(loadColumns)
|
||||
const [showColMenu, setShowColMenu] = useState(false)
|
||||
const colMenuRef = useRef(null)
|
||||
|
||||
const reload = () => {
|
||||
Promise.all([api.getAgents(), api.getCustomers()])
|
||||
@ -59,6 +99,25 @@ export default function 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 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(() => {
|
||||
return agents.map((a) => {
|
||||
const detail = agentDetails[a.id]
|
||||
@ -77,6 +136,14 @@ export default function Agents() {
|
||||
: null
|
||||
const gateways = sys?.gateways || []
|
||||
|
||||
// WAN IP: prefer gateway with WAN role, fallback to interface with WAN role, fallback to a.ip
|
||||
const ifaces = sys?.network_interfaces || []
|
||||
const wanIface = ifaces.find(i => (i.role || '').toUpperCase() === 'WAN')
|
||||
const lanIface = ifaces.find(i => (i.role || '').toUpperCase() === 'LAN')
|
||||
const wanGw = gateways.find(g => (g.name || '').toUpperCase().includes('WAN'))
|
||||
const wanIp = wanIface?.ip || wanGw?.address || a.ip || ''
|
||||
const lanIp = lanIface?.ip || ''
|
||||
|
||||
return {
|
||||
...a,
|
||||
customer: cust,
|
||||
@ -86,11 +153,13 @@ export default function Agents() {
|
||||
ramPct,
|
||||
diskPct,
|
||||
uptime: sys?.uptime_seconds || 0,
|
||||
version: sys?.opnsense_version || a.opnsense_version || '',
|
||||
version: shortVersion(sys?.opnsense_version || a.opnsense_version || ''),
|
||||
gateways,
|
||||
wanIp,
|
||||
lanIp,
|
||||
sys,
|
||||
}
|
||||
}).filter(Boolean) // Entferne null Werte
|
||||
}).filter(Boolean)
|
||||
}, [agents, agentDetails, customerMap])
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
@ -163,6 +232,35 @@ export default function Agents() {
|
||||
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 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-orange-500 focus:ring-orange-500 focus:ring-offset-0"
|
||||
/>
|
||||
<span className="text-gray-300">{col.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
@ -173,17 +271,19 @@ export default function Agents() {
|
||||
<thead>
|
||||
<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>
|
||||
{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('version') && <SortHeader label="VERSION" k="version" />}
|
||||
{isColVisible('wanip') && <th className="px-3 py-2 font-medium">WAN IP</th>}
|
||||
{isColVisible('lanip') && <th className="px-3 py-2 font-medium">LAN 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>}
|
||||
{isColVisible('gateways') && <th className="px-3 py-2 font-medium">GATEWAYS</th>}
|
||||
{isColVisible('agentversion') && <th className="px-3 py-2 font-medium">AGENT</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800">
|
||||
@ -194,45 +294,51 @@ export default function Agents() {
|
||||
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">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className={`text-[10px] font-mono px-1 rounded ${a.platform === 'linux' ? 'bg-blue-900/50 text-blue-400' : 'bg-orange-900/50 text-orange-400'}`}>
|
||||
{a.platform === 'linux' ? 'LNX' : 'OPN'}
|
||||
{isColVisible('customer') && (
|
||||
<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>
|
||||
)}
|
||||
{isColVisible('name') && (
|
||||
<td className="px-3 py-2 text-white font-medium">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className={`text-[10px] font-mono px-1 rounded ${a.platform === 'linux' ? 'bg-blue-900/50 text-blue-400' : 'bg-orange-900/50 text-orange-400'}`}>
|
||||
{a.platform === 'linux' ? 'LNX' : 'OPN'}
|
||||
</span>
|
||||
{a.name}
|
||||
</span>
|
||||
{a.name}
|
||||
</span>
|
||||
</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 ${gwDotColor(gw.status)}`} />
|
||||
<span className="text-gray-400">{gw.name}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : '—'}
|
||||
</td>
|
||||
</td>
|
||||
)}
|
||||
{isColVisible('hostname') && <td className="px-3 py-2 text-gray-400 text-xs">{a.hostname}</td>}
|
||||
{isColVisible('version') && <td className="px-3 py-2 text-gray-400">{a.version || '—'}</td>}
|
||||
{isColVisible('wanip') && <td className="px-3 py-2 text-gray-400">{a.wanIp || '—'}</td>}
|
||||
{isColVisible('lanip') && <td className="px-3 py-2 text-gray-400">{a.lanIp || '—'}</td>}
|
||||
{isColVisible('uptime') && <td className="px-3 py-2 text-gray-400">{a.uptime ? formatUptime(a.uptime) : '—'}</td>}
|
||||
{isColVisible('cpu') && <td className="px-3 py-2"><MiniBar value={a.cpuPct} /></td>}
|
||||
{isColVisible('ram') && <td className="px-3 py-2"><MiniBar value={a.ramPct} /></td>}
|
||||
{isColVisible('disk') && <td className="px-3 py-2"><MiniBar value={a.diskPct} /></td>}
|
||||
{isColVisible('lastresponse') && (
|
||||
<td className="px-3 py-2 text-gray-500 text-xs">
|
||||
{a.last_heartbeat ? new Date(a.last_heartbeat).toLocaleString('de-DE') : '—'}
|
||||
</td>
|
||||
)}
|
||||
{isColVisible('gateways') && (
|
||||
<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 ${gwDotColor(gw.status)}`} />
|
||||
<span className="text-gray-400">{gw.name}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : '—'}
|
||||
</td>
|
||||
)}
|
||||
{isColVisible('agentversion') && (
|
||||
<td className="px-3 py-2 text-gray-500 text-xs">{a.agent_version || '—'}</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user