Dashboard-Korrektur-Popup, Worker-Tab mit Live-Ping, Herzschlag, Anzeige-Fixes

Commander-Wuensche (23.07. Nacht): - "Nicht korrekt?!"-Knopf direkt an der Disc-Karte: Korrektur-Suche als Popup (MetadataKorrektur) — kein Seitenwechsel mehr noetig; Wahl gilt per Disc-Fingerabdruck weiter 30 Tage - Einstellungen -> Worker: verbundene Encoding-Maschinen mit ECHTER Erreichbarkeit (Celery-Ping + minuetlicher Herzschlag/last_seen), Encoder-Badges, Copy-Paste-Anbindung fuer neue Maschinen (Linux/Docker + Docker Desktop; SSH-Ein-Klick als Ausbaustufe) - JSX-0-Falle gefixt: {0 && ...} renderte nackte "0" unter GENRE/LAUFZEIT - ruff.toml: Regelsatz gepinnt — lokal aktualisierte Ruff-Version zog ploetzlich Stilregeln und faerbte den Baum rot; Ampel und lokal urteilen jetzt identisch Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-24 08:18:44 +02:00
parent 6b7d391737
commit 6517644d1f
8 changed files with 358 additions and 19 deletions
@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react'
+import { Server, RefreshCw, Copy, CheckCircle } from 'lucide-react'
+import { api } from '../lib/api'
+import { useDarkMode } from '../context/ThemeContext'
+
+// Worker-Verwaltung (Commander-Anforderung 23.07.): Welche Maschinen encoden,
+// sind sie erreichbar, und wie bindet man eine neue an? Ein Worker "installiert
+// sich" über einen Copy-Paste-Befehl auf der Zielmaschine — danach taucht er
+// hier automatisch auf und zieht sich Kompressions-Jobs aus der Warteschlange.
+
+interface WorkerInfo {
+  name: string
+  encoders: string[]
+  last_seen?: string
+  online?: boolean
+}
+
+const ENCODER_LABELS: Record<string, string> = {
+  'cpu-x264': 'CPU · H.264',
+  'cpu-x265': 'CPU · H.265',
+  'vaapi': 'GPU · VAAPI (AMD/Intel)',
+  'nvenc': 'GPU · NVENC (NVIDIA)',
+}
+
+function relativeZeit(iso?: string): string {
+  if (!iso) return 'nie'
+  const sekunden = Math.floor((Date.now() - new Date(iso).getTime()) / 1000)
+  if (sekunden < 90) return 'gerade eben'
+  if (sekunden < 3600) return `vor ${Math.floor(sekunden / 60)} min`
+  return `vor ${Math.floor(sekunden / 3600)} h`
+}
+
+export default function WorkerVerwaltung() {
+  const [workers, setWorkers] = useState<WorkerInfo[]>([])
+  const [kopiert, setKopiert] = useState(false)
+  const { theme } = useDarkMode()
+
+  const laden = () => {
+    api.get('/capabilities').then(r => setWorkers(r.data.workers || [])).catch(() => {})
+  }
+
+  useEffect(() => {
+    laden()
+    const interval = setInterval(laden, 15000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const rippyHost = window.location.hostname
+  const installBefehl = [
+    `git clone <rippy-repo-url> rippy && cd rippy`,
+    `RIPPY_HOST=${rippyHost} docker compose -f deploy/remote-transcode-worker.yml up -d --build`,
+  ].join('\n')
+
+  const kopieren = () => {
+    navigator.clipboard.writeText(installBefehl).then(() => {
+      setKopiert(true)
+      setTimeout(() => setKopiert(false), 2000)
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Verbundene Worker */}
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Verbundene Worker</h3>
+          <button onClick={laden} className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
+            <RefreshCw size={16} />
+          </button>
+        </div>
+        {workers.length === 0 ? (
+          <p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch kein Worker gemeldet.</p>
+        ) : (
+          <div className="space-y-2">
+            {workers.map(w => (
+              <div key={w.name} className={`flex items-center justify-between p-3 rounded-lg ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
+                <div className="flex items-center gap-3 min-w-0">
+                  <span
+                    className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${w.online ? 'bg-emerald-500' : 'bg-rose-500'}`}
+                    title={w.online ? 'erreichbar (Ping OK)' : 'nicht erreichbar'}
+                  />
+                  <Server size={18} className={theme === 'dark' ? 'text-slate-400' : 'text-slate-500'} />
+                  <div className="min-w-0">
+                    <p className={`text-sm font-mono truncate ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{w.name}</p>
+                    <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                      {w.online ? 'online' : 'offline'} · Lebenszeichen {relativeZeit(w.last_seen)}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-1 justify-end">
+                  {w.encoders.map(e => (
+                    <span key={e} className={`text-xs px-2 py-0.5 rounded ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-200 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
+                      {ENCODER_LABELS[e] || e}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Neue Maschine anbinden */}
+      <div className={`rounded-lg p-4 border ${theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50'}`}>
+        <h3 className={`font-medium mb-1 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Maschine als Encoding-Worker anbinden</h3>
+        <p className={`text-xs mb-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+          Auf der Zielmaschine (Linux mit Docker, oder Windows mit Docker Desktop) diesen
+          Befehl ausführen — der Worker verbindet sich, taucht oben in der Liste auf und
+          übernimmt ab dann automatisch Kompressions-Jobs. GPU vorhanden? Wird erkannt
+          und angezeigt. Voraussetzung: die Maschine erreicht diesen Rippy-Host im Netz.
+        </p>
+        <div className={`relative rounded-lg p-3 font-mono text-xs whitespace-pre overflow-x-auto ${theme === 'dark' ? 'bg-slate-950 text-slate-300' : 'bg-slate-900 text-slate-200'}`}>
+          {installBefehl}
+          <button
+            onClick={kopieren}
+            className="absolute top-2 right-2 p-1.5 rounded bg-slate-700 text-slate-300 hover:bg-slate-600"
+            title="Kopieren"
+          >
+            {kopiert ? <CheckCircle size={14} className="text-emerald-400" /> : <Copy size={14} />}
+          </button>
+        </div>
+        <p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+          Eine geführte Ein-Klick-Installation (SSH) ist als Ausbaustufe geplant.
+        </p>
+      </div>
+    </div>
+  )
+}