refactor(ui): Modals & Unterseiten auf Primitives & dark: umgestellt
This commit is contained in:
Hitonabi
@@ -1,13 +1,10 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Server, RefreshCw, Copy, CheckCircle, Trash2 } from 'lucide-react'
|
||||
import { api } from '../lib/api'
|
||||
import { useDarkMode } from '../context/ThemeContext'
|
||||
import { useToast } from '../context/ToastContext'
|
||||
|
||||
// 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.
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/Card'
|
||||
import { Button } from './ui/Button'
|
||||
import { Input } from './ui/Input'
|
||||
|
||||
interface WorkerInfo {
|
||||
name: string
|
||||
@@ -42,13 +39,8 @@ export default function WorkerVerwaltung() {
|
||||
const [kopiert, setKopiert] = useState(false)
|
||||
const [variante, setVariante] = useState<'linux' | 'windows'>('linux')
|
||||
const [rippyHost, setRippyHost] = useState(window.location.hostname)
|
||||
const { theme } = useDarkMode()
|
||||
const { toast } = useToast()
|
||||
|
||||
// Worker verbinden sich DIREKT mit Redis/Postgres (6379/5432) — das geht
|
||||
// nur im Heimnetz. Wer das UI gerade über eine externe Domain (Reverse-
|
||||
// Proxy) aufruft, würde sonst Befehle mit der falschen Adresse kopieren
|
||||
// (Befund 24.07.: 401 vom Proxy statt Installer).
|
||||
const siehtOeffentlichAus =
|
||||
!/^(\d{1,3}\.){3}\d{1,3}$/.test(rippyHost) &&
|
||||
!rippyHost.endsWith('.local') &&
|
||||
@@ -92,123 +84,127 @@ export default function WorkerVerwaltung() {
|
||||
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(true)} title="Worker neu laden" className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Server size={20} className="text-amber-500" />
|
||||
<span>Verbundene Worker</span>
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="sm" onClick={() => laden(true)} title="Worker neu laden">
|
||||
<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-medium 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)}
|
||||
{w.info?.ip ? ` · IP ${w.info.ip}` : ''}
|
||||
{w.info?.hostname && w.info.hostname !== w.name ? ` · ID ${w.info.hostname}` : ''}
|
||||
</p>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{workers.length === 0 ? (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">Noch kein Worker gemeldet.</p>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{workers.map(w => (
|
||||
<div key={w.name} className="flex items-center justify-between p-3.5 rounded-xl border border-slate-200/80 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/80">
|
||||
<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 shadow-sm shadow-emerald-500/50' : 'bg-rose-500'}`}
|
||||
title={w.online ? 'erreichbar (Ping OK)' : 'nicht erreichbar'}
|
||||
/>
|
||||
<Server size={18} className="text-slate-400 dark:text-slate-500" />
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium truncate text-slate-900 dark:text-slate-200">{w.name}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{w.online ? 'online' : 'offline'} · Lebenszeichen {relativeZeit(w.last_seen)}
|
||||
{w.info?.ip ? ` · IP ${w.info.ip}` : ''}
|
||||
{w.info?.hostname && w.info.hostname !== w.name ? ` · ID ${w.info.hostname}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap gap-1 justify-end">
|
||||
{w.encoders.map(e => (
|
||||
<span key={e} className={`text-xs px-2.5 py-0.5 rounded-md font-medium border ${
|
||||
e.startsWith('cpu')
|
||||
? 'bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-700'
|
||||
: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
|
||||
}`}>
|
||||
{ENCODER_LABELS[e] || e}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{!w.online && (
|
||||
<button
|
||||
onClick={() => {
|
||||
api.delete(`/workers/${encodeURIComponent(w.name)}`)
|
||||
.then(() => { toast('success', `„${w.name}" entfernt — ein aktiver Worker meldet sich binnen 1 min zurück`); laden() })
|
||||
.catch(() => toast('error', 'Entfernen fehlgeschlagen'))
|
||||
}}
|
||||
title="Verwaisten Eintrag entfernen"
|
||||
className="p-1.5 rounded-lg text-rose-500 hover:bg-rose-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
{!w.online && (
|
||||
<button
|
||||
onClick={() => {
|
||||
api.delete(`/workers/${encodeURIComponent(w.name)}`)
|
||||
.then(() => { toast('success', `„${w.name}" entfernt — ein aktiver Worker meldet sich binnen 1 min zurück`); laden() })
|
||||
.catch(() => toast('error', 'Entfernen fehlgeschlagen'))
|
||||
}}
|
||||
title="Verwaisten Eintrag entfernen (alte Container-ID nach Rebuild) — aktive Worker melden sich automatisch wieder an"
|
||||
className="p-1.5 rounded text-rose-500 hover:bg-rose-500/10"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Neue Maschine anbinden */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Maschine als Encoding-Worker anbinden</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="max-w-md">
|
||||
<Input
|
||||
label="Rippy-Adresse aus Sicht des Workers (Heimnetz-IP oder -Name)"
|
||||
value={rippyHost}
|
||||
onChange={e => setRippyHost(e.target.value.trim())}
|
||||
placeholder="192.168.178.162"
|
||||
/>
|
||||
{siehtOeffentlichAus && (
|
||||
<p className="text-xs mt-2 p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-700 dark:text-amber-300">
|
||||
⚠️ Das sieht nach einer externen Domain aus (Reverse-Proxy). Worker verbinden sich
|
||||
direkt mit Redis/Postgres (Ports 6379/5432) — das geht nur im Heimnetz. Hier die <strong>LAN-IP</strong> eintragen, z. B. 192.168.178.162.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{([['linux', '🐧 Linux (Docker)'], ['windows', '🪟 Windows (nativ, ohne Docker)']] as const).map(([wert, label]) => (
|
||||
<Button
|
||||
key={wert}
|
||||
variant={variante === wert ? 'amber' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setVariante(wert)}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Neue Maschine anbinden — zwei Varianten */}
|
||||
<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-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Maschine als Encoding-Worker anbinden</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{variante === 'linux'
|
||||
? 'Auf der Linux-Maschine (mit Docker) ausführen — WORKER_NAME frei wählen, unter dem Namen taucht sie oben auf und übernimmt Kompressions-Jobs. GPU wird erkannt und angezeigt.'
|
||||
: 'In einer PowerShell auf dem Windows-PC ausführen (braucht nur Python 3.10+ — kein Docker, kein git). Der Installer holt Worker-Code und HandBrake automatisch.'}
|
||||
</p>
|
||||
|
||||
{/* Rippy-Adresse für die Befehle: Worker reden DIREKT mit Redis/
|
||||
Postgres — das geht nur im Heimnetz, nie über die externe Domain */}
|
||||
<div className="mb-3">
|
||||
<label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
|
||||
Rippy-Adresse aus Sicht des Workers (Heimnetz-IP oder -Name)
|
||||
</label>
|
||||
<input
|
||||
value={rippyHost}
|
||||
onChange={e => setRippyHost(e.target.value.trim())}
|
||||
className={`w-full max-w-xs px-3 py-2 border rounded-lg text-sm font-mono focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`}
|
||||
placeholder="192.168.178.162"
|
||||
/>
|
||||
{siehtOeffentlichAus && (
|
||||
<p className={`text-xs mt-1.5 px-2.5 py-1.5 rounded-lg inline-block ${theme === 'dark' ? 'bg-amber-900/30 text-amber-300' : 'bg-amber-50 text-amber-700'}`}>
|
||||
⚠️ Das sieht nach einer externen Domain aus (Reverse-Proxy). Worker verbinden sich
|
||||
direkt mit Redis/Postgres (Ports 6379/5432) — das geht nur im Heimnetz, und der
|
||||
Proxy blockt den Installer-Download (401). Hier die <strong>LAN-IP</strong> der
|
||||
Rippy-Maschine eintragen, z. B. 192.168.178.162.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-3">
|
||||
{([['linux', '🐧 Linux (Docker)'], ['windows', '🪟 Windows (nativ, ohne Docker)']] as const).map(([wert, label]) => (
|
||||
<div className="relative rounded-xl p-4 font-mono text-xs whitespace-pre overflow-x-auto bg-slate-900 text-slate-200 border border-slate-800">
|
||||
{installBefehl}
|
||||
<button
|
||||
key={wert}
|
||||
onClick={() => setVariante(wert)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
|
||||
variante === wert
|
||||
? theme === 'dark' ? 'bg-indigo-900/40 border-indigo-500 text-indigo-300' : 'bg-indigo-50 border-indigo-600 text-indigo-700'
|
||||
: theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500' : 'bg-white border-slate-300 text-slate-600 hover:border-slate-400'
|
||||
}`}
|
||||
onClick={kopieren}
|
||||
className="absolute top-3 right-3 p-1.5 rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
|
||||
title="Kopieren"
|
||||
>
|
||||
{label}
|
||||
{kopiert ? <CheckCircle size={15} className="text-emerald-400" /> : <Copy size={15} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className={`text-xs mb-3 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
|
||||
{variante === 'linux'
|
||||
? 'Auf der Linux-Maschine (mit Docker) ausführen — WORKER_NAME frei wählen, unter dem Namen taucht sie oben auf und übernimmt Kompressions-Jobs. GPU wird erkannt und angezeigt.'
|
||||
: 'In einer PowerShell auf dem Windows-PC ausführen (braucht nur Python 3.10+ — kein Docker, kein git). Der Installer holt Worker-Code und HandBrake automatisch und erzeugt: start-tray.bat (Tray-Symbol neben der Uhr mit Start/Stopp/Status), start-worker.bat (Konsole, für Fehlersuche) und uninstall.ps1 (entfernt alles rückstandsfrei inkl. Worker-Eintrag hier). Autostart bei Anmeldung: Parameter -Autostart anhängen.'}
|
||||
</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'}`}>
|
||||
Beide Varianten bedienen nur die Kompressions-Queue — gerippt wird immer hier,
|
||||
wo das Laufwerk hängt. Voraussetzung: die Maschine erreicht diesen Rippy-Host im Netz.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Beide Varianten bedienen nur die Kompressions-Queue — gerippt wird immer hier, wo das Laufwerk hängt.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user