feat: PBS Collector — automatische Erkennung, Datastores + Tasks + GC, Frontend-Tab 'Backup Server'

frontend/src/components/ProxmoxPanel.jsx

@@ -8,12 +8,13 @@ import {
   MonitorSmartphone, Terminal, Cable, ExternalLink,
 } from 'lucide-react'
 
-const tabs = [
+const buildTabs = (hasPBS) => [
   { id: 'overview', label: 'Uebersicht' },
   { id: 'vms', label: 'Virtuelle Maschinen' },
   { id: 'containers', label: 'Container' },
   { id: 'storage', label: 'Storage' },
   { id: 'zfs', label: 'ZFS' },
+  ...(hasPBS ? [{ id: 'pbs', label: 'Backup Server' }] : []),
   { id: 'tunnel', label: 'Tunnel' },
   { id: 'services', label: 'Dienste' },
   { id: 'updates', label: 'Updates' },
@@ -45,7 +46,9 @@ export default function ProxmoxPanel({ agentId, customers, onClose, onReload })
 
   const { agent, system_data: sys, status } = data
   const proxmox = sys?.proxmox
+  const pbs = sys?.pbs
   const cust = agent.customer_id ? customers.find((c) => c.id === agent.customer_id) : null
+  const tabs = buildTabs(pbs?.available)
 
   if (!proxmox?.available) {
     return <Panel onClose={onClose}><div className="p-6 text-red-400">Keine Proxmox-Daten verfuegbar</div></Panel>
@@ -123,6 +126,8 @@ export default function ProxmoxPanel({ agentId, customers, onClose, onReload })
           <ServicesTab sys={sys} />
         ) : tab === 'updates' ? (
           <UpdatesTab sys={sys} />
+        ) : tab === 'pbs' ? (
+          <PBSTab pbs={pbs} />
         ) : tab === 'backups' ? (
           <BackupsTab sys={sys} />
         ) : tab === 'agent' ? (
@@ -946,4 +951,113 @@ function formatUptime(seconds) {
   const m = Math.floor((seconds % 3600) / 60)
   if (d > 0) return `${d}d ${h}h`
   return `${h}h ${m}m`
-}
+}
+function PBSTab({ pbs }) {
+  if (!pbs?.available) return <div className="p-4 text-gray-500">Keine PBS-Daten verfuegbar</div>
+
+  const formatBytes = (b) => {
+    if (!b) return '—'
+    if (b >= 1099511627776) return `${(b / 1099511627776).toFixed(1)} TB`
+    if (b >= 1073741824) return `${(b / 1073741824).toFixed(1)} GB`
+    if (b >= 1048576) return `${(b / 1048576).toFixed(1)} MB`
+    return `${b} B`
+  }
+
+  const formatTs = (ts) => ts ? new Date(ts * 1000).toLocaleString('de-DE') : '—'
+  const formatDuration = (s) => {
+    if (!s) return '—'
+    if (s < 60) return `${s}s`
+    if (s < 3600) return `${Math.floor(s/60)}m ${s%60}s`
+    return `${Math.floor(s/3600)}h ${Math.floor((s%3600)/60)}m`
+  }
+
+  const taskStatusColor = (s) => {
+    if (!s) return 'text-gray-500'
+    if (s === 'OK' || s.startsWith('OK')) return 'text-green-400'
+    if (s.toLowerCase().includes('err') || s.toLowerCase().includes('fail')) return 'text-red-400'
+    if (s === 'running') return 'text-blue-400'
+    return 'text-yellow-400'
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div>
+          <div className="text-white font-semibold">Proxmox Backup Server</div>
+          {pbs.version && <div className="text-xs text-gray-500">Version {pbs.version}</div>}
+        </div>
+      </div>
+
+      {/* Datastores */}
+      {pbs.datastores?.length > 0 && (
+        <>
+          <h3 className="text-sm font-medium text-gray-300">Datastores</h3>
+          <div className="space-y-3">
+            {pbs.datastores.map((ds) => {
+              const usedPct = ds.total > 0 ? (ds.used / ds.total * 100) : 0
+              const barColor = usedPct > 90 ? 'bg-red-500' : usedPct > 70 ? 'bg-yellow-500' : 'bg-green-500'
+              const gc = pbs.gc?.find(g => g.datastore === ds.name)
+              return (
+                <div key={ds.name} className="bg-gray-800/50 rounded-lg border border-gray-700/50 p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <div>
+                      <span className="text-white font-medium">{ds.name}</span>
+                      {ds.path && <span className="text-xs text-gray-500 ml-2">{ds.path}</span>}
+                    </div>
+                    <span className="text-sm text-gray-400">{usedPct.toFixed(1)}%</span>
+                  </div>
+                  <div className="h-1.5 bg-gray-700 rounded overflow-hidden mb-2">
+                    <div className={`h-full rounded ${barColor}`} style={{ width: `${Math.min(usedPct, 100)}%` }} />
+                  </div>
+                  <div className="flex items-center justify-between text-xs text-gray-500">
+                    <span>Belegt: {formatBytes(ds.used)} / {formatBytes(ds.total)}</span>
+                    <span>Frei: {formatBytes(ds.available)}</span>
+                  </div>
+                  {gc && (
+                    <div className="mt-2 pt-2 border-t border-gray-700/50 text-xs text-gray-500 flex gap-4">
+                      <span>GC: <span className={gc.status === 'ok' ? 'text-green-400' : gc.status === 'running' ? 'text-blue-400' : 'text-gray-500'}>{gc.status || '—'}</span></span>
+                      {gc.last_run > 0 && <span>Letzter Lauf: {formatTs(gc.last_run)}</span>}
+                      {gc.duration > 0 && <span>Dauer: {formatDuration(gc.duration)}</span>}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Tasks */}
+      {pbs.tasks?.length > 0 && (
+        <>
+          <h3 className="text-sm font-medium text-gray-300 mt-4">Letzte Tasks</h3>
+          <div className="bg-gray-800/50 rounded-lg border border-gray-700/50 overflow-hidden">
+            <table className="w-full text-xs">
+              <thead>
+                <tr className="text-left text-gray-500 border-b border-gray-700">
+                  <th className="px-4 py-2">Typ</th>
+                  <th className="px-4 py-2">Start</th>
+                  <th className="px-4 py-2">Dauer</th>
+                  <th className="px-4 py-2">Benutzer</th>
+                  <th className="px-4 py-2 text-right">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-700/50">
+                {pbs.tasks.map((t, i) => (
+                  <tr key={i}>
+                    <td className="px-4 py-2 text-gray-300 font-mono">{t.type || '—'}</td>
+                    <td className="px-4 py-2 text-gray-400">{formatTs(t.start_time)}</td>
+                    <td className="px-4 py-2 text-gray-400">{formatDuration(t.duration)}</td>
+                    <td className="px-4 py-2 text-gray-500">{t.user || '—'}</td>
+                    <td className={`px-4 py-2 text-right font-medium ${taskStatusColor(t.status)}`}>{t.status || '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}