christian/rmm2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Proxmox: feinere Tabelle, konfigurierbare Spalten (localStorage), kompaktere MiniBar+VmBadge

Browse Source
This commit is contained in:
cynfo3000 2026-03-04 00:11:43 +01:00
parent 5d26158b53
commit 240cbe37fa
1 changed files with 127 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
frontend/src/pages/ProxmoxServers.jsx
View File

@ -1,10 +1,40 @@
import { useEffect, useState, useMemo } from 'react' import { useEffect, useState, useMemo, useRef } from 'react'
import api from '../api/client' import api from '../api/client'
import StatusBadge from '../components/StatusBadge' import StatusBadge from '../components/StatusBadge'
import ProxmoxPanel from '../components/ProxmoxPanel' import ProxmoxPanel from '../components/ProxmoxPanel'
import { Search, ChevronUp, ChevronDown, Plus, X } from 'lucide-react' import { Search, ChevronUp, ChevronDown, Plus, X, Settings2 } from 'lucide-react'
import InstallGuide from '../components/InstallGuide' 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: 'PVE 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', default: true },
{ id: 'vms', label: 'VMs', default: true },
{ id: 'containers', label: 'Container', default: true },
{ id: 'lastresponse', label: 'Letzter Kontakt', default: false },
{ id: 'agentversion', label: 'Agent Version', default: false },
]
const STORAGE_KEY = 'rmm-proxmox-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))
}
export default function ProxmoxServers() { export default function ProxmoxServers() {
const [agents, setAgents] = useState([]) const [agents, setAgents] = useState([])
const [customers, setCustomers] = useState([]) const [customers, setCustomers] = useState([])
@ -15,6 +45,9 @@ export default function ProxmoxServers() {
const [selectedId, setSelectedId] = useState(null) const [selectedId, setSelectedId] = useState(null)
const [showAddDialog, setShowAddDialog] = useState(false) const [showAddDialog, setShowAddDialog] = useState(false)
const [addResult, setAddResult] = useState(null) const [addResult, setAddResult] = useState(null)
const [visibleCols, setVisibleCols] = useState(loadColumns)
const [showColMenu, setShowColMenu] = useState(false)
const colMenuRef = useRef(null)
const reload = () => { const reload = () => {
Promise.all([api.getAgents(), api.getCustomers()]) Promise.all([api.getAgents(), api.getCustomers()])
@ -59,6 +92,25 @@ export default function ProxmoxServers() {
} }
} }
// 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(() => { const enriched = useMemo(() => {
return agents.map((a) => { return agents.map((a) => {
const detail = agentDetails[a.id] const detail = agentDetails[a.id]
@ -143,7 +195,7 @@ export default function ProxmoxServers() {
const SortHeader = ({ label, k, className = '' }) => ( const SortHeader = ({ label, k, className = '' }) => (
<th <th
className={`px-3 py-2 font-medium cursor-pointer hover:text-gray-300 select-none ${className}`} className={`px-2 py-1.5 font-medium cursor-pointer hover:text-gray-300 select-none ${className}`}
onClick={() => toggleSort(k)} onClick={() => toggleSort(k)}
> >
<span className="inline-flex items-center gap-1"> <span className="inline-flex items-center gap-1">
@ -176,27 +228,58 @@ export default function ProxmoxServers() {
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" 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>
<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> </div>
{loading ? ( {loading ? (
<div className="text-gray-500">Laden...</div> <div className="text-gray-500">Laden...</div>
) : ( ) : (
<div className="bg-gray-900 rounded-lg border border-gray-800 overflow-x-auto"> <div className="bg-gray-900 rounded-lg border border-gray-800 overflow-x-auto">
<table className="w-full text-sm whitespace-nowrap"> <table className="w-full text-xs whitespace-nowrap">
<thead> <thead>
<tr className="border-b border-gray-800 text-left text-gray-500 text-xs"> <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> <th className="px-2 py-1.5 font-medium w-8"></th>
<SortHeader label="KUNDE" k="customer" /> {isColVisible('customer') && <SortHeader label="KUNDE" k="customer" />}
<SortHeader label="NAME" k="name" /> {isColVisible('name') && <SortHeader label="NAME" k="name" />}
<th className="px-3 py-2 font-medium">HOSTNAME</th> {isColVisible('hostname') && <th className="px-2 py-1.5 font-medium">HOSTNAME</th>}
<SortHeader label="PVE VERSION" k="version" /> {isColVisible('version') && <SortHeader label="PVE" k="version" />}
<th className="px-3 py-2 font-medium">IP</th> {isColVisible('ip') && <th className="px-2 py-1.5 font-medium">IP</th>}
<SortHeader label="UPTIME" k="uptime" /> {isColVisible('uptime') && <SortHeader label="UPTIME" k="uptime" />}
<SortHeader label="CPU" k="cpu" /> {isColVisible('cpu') && <SortHeader label="CPU" k="cpu" />}
<SortHeader label="RAM" k="ram" /> {isColVisible('ram') && <SortHeader label="RAM" k="ram" />}
<SortHeader label="DISK" k="disk" /> {isColVisible('disk') && <SortHeader label="DISK" k="disk" />}
<SortHeader label="VMS" k="vms" /> {isColVisible('vms') && <SortHeader label="VMS" k="vms" />}
<SortHeader label="CONTAINER" k="containers" /> {isColVisible('containers') && <SortHeader label="CT" k="containers" />}
{isColVisible('lastresponse') && <th className="px-2 py-1.5 font-medium">LETZTER KONTAKT</th>}
{isColVisible('agentversion') && <th className="px-2 py-1.5 font-medium">AGENT</th>}
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-800"> <tbody className="divide-y divide-gray-800">
@ -206,30 +289,28 @@ export default function ProxmoxServers() {
onClick={() => setSelectedId(a.id)} onClick={() => setSelectedId(a.id)}
className={`hover:bg-gray-800/50 transition-colors cursor-pointer ${selectedId === a.id ? 'bg-gray-800/70' : ''}`} 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-2 py-1.5"><StatusBadge status={a.status} size="dot" /></td>
<td className="px-3 py-2 text-gray-400"> {isColVisible('customer') && (
{a.customer ? <span className="text-orange-400">{a.customerNumber}</span> : <span className="text-gray-600">—</span>} <td className="px-2 py-1.5 text-gray-400">
</td> {a.customer ? <span className="text-orange-400">{a.customerNumber}</span> : <span className="text-gray-600">—</span>}
<td className="px-3 py-2 text-white font-medium">{a.name}</td> </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.pveVersion || '—'}</td> {isColVisible('name') && <td className="px-2 py-1.5 text-white font-medium">{a.name}</td>}
<td className="px-3 py-2 text-gray-400">{a.ip}</td> {isColVisible('hostname') && <td className="px-2 py-1.5 text-gray-400 text-xs">{a.hostname}</td>}
<td className="px-3 py-2 text-gray-400">{a.uptime ? formatUptime(a.uptime) : '—'}</td> {isColVisible('version') && <td className="px-2 py-1.5 text-gray-400">{a.pveVersion || '—'}</td>}
<td className="px-3 py-2"> {isColVisible('ip') && <td className="px-2 py-1.5 text-gray-400">{a.ip}</td>}
<MiniBar value={a.cpuPct} /> {isColVisible('uptime') && <td className="px-2 py-1.5 text-gray-400">{a.uptime ? formatUptime(a.uptime) : '—'}</td>}
</td> {isColVisible('cpu') && <td className="px-2 py-1.5"><MiniBar value={a.cpuPct} /></td>}
<td className="px-3 py-2"> {isColVisible('ram') && <td className="px-2 py-1.5"><MiniBar value={a.ramPct} /></td>}
<MiniBar value={a.ramPct} /> {isColVisible('disk') && <td className="px-2 py-1.5"><MiniBar value={a.diskPct} /></td>}
</td> {isColVisible('vms') && <td className="px-2 py-1.5"><VmBadge running={a.vmsRunning} total={a.vmsTotal} /></td>}
<td className="px-3 py-2"> {isColVisible('containers') && <td className="px-2 py-1.5"><VmBadge running={a.ctRunning} total={a.ctTotal} /></td>}
<MiniBar value={a.diskPct} /> {isColVisible('lastresponse') && (
</td> <td className="px-2 py-1.5 text-gray-500 text-xs">
<td className="px-3 py-2"> {a.last_heartbeat ? new Date(a.last_heartbeat).toLocaleString('de-DE') : '—'}
<VmBadge running={a.vmsRunning} total={a.vmsTotal} /> </td>
</td> )}
<td className="px-3 py-2"> {isColVisible('agentversion') && <td className="px-2 py-1.5 text-gray-500 text-xs">{a.agent_version || '—'}</td>}
<VmBadge running={a.ctRunning} total={a.ctTotal} />
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -347,9 +428,9 @@ function AddServerDialog({ customers, result, onAdd, onClose }) {
} }
function VmBadge({ running, total }) { function VmBadge({ running, total }) {
if (total === 0) return <span className="text-gray-600 text-xs">—</span> if (total === 0) return <span className="text-gray-600 text-[10px]">—</span>
return ( return (
<span className="text-xs"> <span className="text-[11px]">
<span className="text-green-400">{running}</span> <span className="text-green-400">{running}</span>
<span className="text-gray-500">/{total}</span> <span className="text-gray-500">/{total}</span>
</span> </span>
@ -357,14 +438,14 @@ function VmBadge({ running, total }) {
} }
function MiniBar({ value }) { function MiniBar({ value }) {
if (value === null || value === undefined) return <span className="text-gray-600 text-xs">—</span> 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' const color = value > 90 ? 'bg-red-500' : value > 70 ? 'bg-yellow-500' : value > 50 ? 'bg-blue-500' : 'bg-green-500'
return ( return (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1">
<div className="w-12 h-1.5 bg-gray-800 rounded overflow-hidden"> <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 className={`h-full rounded ${color}`} style={{ width: `${Math.min(value, 100)}%` }} />
</div> </div>
<span className="text-xs text-gray-400">{value.toFixed(0)}%</span> <span className="text-[10px] text-gray-400">{value.toFixed(0)}%</span>
</div> </div>
) )
} }