Admin: Gameserver-Einstellungen, Docker-Hosts und Image-Update im Admin-Bereich
This commit is contained in:
mregosar committed
1 parent
69d620bb19
commit
c1c9e7a9f9
10 files changed
+710
-12
No files matched your search
@@ -100,6 +100,8 @@ export default function AdminPage() {
|
||||
<button className={`admin-tab ${tab === 'settings' ? 'is-active' : ''}`} onClick={() => setTab('settings')}>Einstellungen</button>
|
||||
</nav>
|
||||
|
||||
{tab === 'settings' && token && <ServerSettingsPanel token={token} setNotice={setNotice} />}
|
||||
{tab === 'settings' && token && <DockerHostsPanel token={token} setNotice={setNotice} />}
|
||||
{tab === 'settings' && token && <NotificationSettings token={token} setNotice={setNotice} />}
|
||||
{notice && <div className={`toast toast-${notice.tone}`} role="status">{notice.text}</div>}
|
||||
{error && <div className="alert alert-error">{error}</div>}
|
||||
@@ -438,3 +440,249 @@ function HostUsage({ hosts }) {
|
||||
function gb(bytes) {
|
||||
return `${Math.round(bytes / 1e9)} GB`;
|
||||
}
|
||||
const SETTING_GROUPS = [
|
||||
{ key: 'match', title: 'Match-Regeln' },
|
||||
{ key: 'tv', title: 'CSTV' },
|
||||
{ key: 'times', title: 'Zeiten' },
|
||||
];
|
||||
|
||||
const toInput = (field, value) => (field.type === 'commands' ? value.join('; ') : value);
|
||||
const shownDefault = (field) => {
|
||||
if (field.type === 'bool') return field.default ? 'an' : 'aus';
|
||||
if (field.type === 'commands') return field.default.length ? field.default.join('; ') : 'keine';
|
||||
return field.default;
|
||||
};
|
||||
|
||||
/** Gameserver-Einstellungen: Vorgaben aus der .env, im Admin-Bereich änderbar. */
|
||||
function ServerSettingsPanel({ token, setNotice }) {
|
||||
const [fields, setFields] = useState(null);
|
||||
const [values, setValues] = useState({});
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const apply = (list) => {
|
||||
setFields(list);
|
||||
setValues(Object.fromEntries(list.map((f) => [f.key, toInput(f, f.value)])));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
api('/admin/server-settings', { token })
|
||||
.then((res) => apply(res.fields))
|
||||
.catch((err) => setNotice({ tone: 'error', text: err.message }));
|
||||
}, [token, setNotice]);
|
||||
|
||||
if (!fields) return null;
|
||||
const changedKeys = fields.filter((f) => String(values[f.key]) !== String(toInput(f, f.value))).map((f) => f.key);
|
||||
|
||||
const save = async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const body = Object.fromEntries(changedKeys.map((key) => {
|
||||
const field = fields.find((f) => f.key === key);
|
||||
return [key, field.type === 'int' ? Number(values[key]) : values[key]];
|
||||
}));
|
||||
const res = await api('/admin/server-settings', { method: 'PUT', body: { values: body }, token });
|
||||
apply(res.fields);
|
||||
const parts = ['Einstellungen gespeichert'];
|
||||
if (res.live.updated) parts.push(`${res.live.updated} laufende${res.live.updated === 1 ? 'r' : ''} Server aktualisiert`);
|
||||
if (res.live.failed.length) parts.push(`${res.live.failed.length} Server nicht erreichbar`);
|
||||
setNotice({ tone: res.live.failed.length ? 'error' : 'ok', text: parts.join(' · ') });
|
||||
} catch (err) {
|
||||
setNotice({ tone: 'error', text: err.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const input = (f) => {
|
||||
if (f.type === 'bool') {
|
||||
return (
|
||||
<label className="admin-check">
|
||||
<input type="checkbox" checked={!!values[f.key]} onChange={(e) => setValues({ ...values, [f.key]: e.target.checked })} />
|
||||
{f.label}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<label className="setting-field">
|
||||
<span>{f.label}</span>
|
||||
{f.type === 'commands' ? (
|
||||
<textarea rows={2} value={values[f.key]} placeholder="z. B. mp_freezetime 15; sv_alltalk 0"
|
||||
onChange={(e) => setValues({ ...values, [f.key]: e.target.value })} />
|
||||
) : (
|
||||
<input type="number" min={f.min} max={f.max} value={values[f.key]}
|
||||
onChange={(e) => setValues({ ...values, [f.key]: e.target.value })} />
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="admin-settings">
|
||||
<h2>Gameserver</h2>
|
||||
<p className="small muted">
|
||||
Markierte Werte (live) gehen beim Speichern sofort an alle laufenden Server. Die übrigen gelten für neue Server und Vetos.
|
||||
</p>
|
||||
{SETTING_GROUPS.map((g) => (
|
||||
<div key={g.key} className="setting-group">
|
||||
<h3>{g.title}</h3>
|
||||
<div className="setting-grid">
|
||||
{fields.filter((f) => f.group === g.key).map((f) => (
|
||||
<div key={f.key} className="setting-item">
|
||||
{input(f)}
|
||||
<div className="small muted">
|
||||
{f.live && <span className="setting-live">live</span>}
|
||||
{f.overridden ? `Vorgabe aus .env: ${shownDefault(f)}` : 'Vorgabe aus .env'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="admin-actions">
|
||||
<button className="btn btn-sm btn-primary" onClick={save} disabled={busy || changedKeys.length === 0}>Speichern</button>
|
||||
{changedKeys.length > 0 && (
|
||||
<button className="btn btn-sm" disabled={busy} onClick={() => apply(fields)}>Verwerfen</button>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const EMPTY_HOST = { name: '', dockerHost: 'ssh://', publicHost: '', portStart: 27100, portEnd: 27139, volume: 'cs2-mapveto-gamefiles' };
|
||||
const HOST_COLUMNS = [
|
||||
{ key: 'name', label: 'Name', placeholder: 'host1' },
|
||||
{ key: 'dockerHost', label: 'Docker-Ziel', placeholder: 'ssh://server@192.168.178.45' },
|
||||
{ key: 'publicHost', label: 'Adresse für Spieler', placeholder: '192.168.178.45' },
|
||||
{ key: 'portStart', label: 'Port von', type: 'number' },
|
||||
{ key: 'portEnd', label: 'Port bis', type: 'number' },
|
||||
{ key: 'volume', label: 'Volume', placeholder: 'cs2-mapveto-gamefiles' },
|
||||
];
|
||||
|
||||
/** Docker-Hosts verwalten und das CS2-Image auf allen Hosts gleichzeitig aktualisieren. */
|
||||
function DockerHostsPanel({ token, setNotice }) {
|
||||
const [data, setData] = useState(null);
|
||||
const [rows, setRows] = useState([]);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const apply = useCallback((res) => {
|
||||
setData(res);
|
||||
setRows(res.hosts.map((h) => ({ ...EMPTY_HOST, ...h, dockerHost: h.dockerHost ?? '' })));
|
||||
}, []);
|
||||
|
||||
const load = useCallback(() => api('/admin/docker-hosts', { token }), [token]);
|
||||
|
||||
useEffect(() => {
|
||||
load().then(apply).catch((err) => setNotice({ tone: 'error', text: err.message }));
|
||||
}, [load, apply, setNotice]);
|
||||
|
||||
// Während das Image lädt, alle 3 Sekunden den Stand holen (ohne die bearbeiteten Zeilen zu überschreiben)
|
||||
const pulling = !!data?.pull?.running;
|
||||
useEffect(() => {
|
||||
if (!pulling) return undefined;
|
||||
const timer = setInterval(() => {
|
||||
load().then((res) => setData((d) => ({ ...d, pull: res.pull }))).catch(() => {});
|
||||
}, 3000);
|
||||
return () => clearInterval(timer);
|
||||
}, [pulling, load]);
|
||||
|
||||
if (!data) return null;
|
||||
if (!data.editable) return null;
|
||||
|
||||
const original = JSON.stringify(data.hosts.map((h) => ({ ...EMPTY_HOST, ...h, dockerHost: h.dockerHost ?? '' })));
|
||||
const dirty = JSON.stringify(rows) !== original;
|
||||
const setCell = (i, key, value) => setRows(rows.map((r, j) => (j === i ? { ...r, [key]: value } : r)));
|
||||
|
||||
const run = async (fn, success) => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await fn();
|
||||
apply(res);
|
||||
if (success) setNotice({ tone: 'ok', text: success });
|
||||
} catch (err) {
|
||||
setNotice({ tone: 'error', text: err.message });
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const save = () => run(() => api('/admin/docker-hosts', {
|
||||
method: 'PUT',
|
||||
token,
|
||||
body: {
|
||||
hosts: rows.map((r) => ({
|
||||
name: r.name.trim(),
|
||||
dockerHost: r.dockerHost.trim() || null,
|
||||
publicHost: r.publicHost.trim(),
|
||||
...(r.rconHost && r.rconHost !== r.publicHost ? { rconHost: r.rconHost } : {}),
|
||||
portStart: Number(r.portStart),
|
||||
portEnd: Number(r.portEnd),
|
||||
volume: r.volume.trim() || undefined,
|
||||
})),
|
||||
},
|
||||
}), 'Docker-Hosts gespeichert');
|
||||
|
||||
const reset = () => {
|
||||
if (!window.confirm('Hosts aus der .env verwenden? Die hier gespeicherte Liste wird gelöscht.')) return;
|
||||
run(() => api('/admin/docker-hosts', { method: 'DELETE', token }), 'Hosts aus der .env aktiv');
|
||||
};
|
||||
|
||||
const pull = () => {
|
||||
if (!window.confirm(`Image ${data.image} auf allen Hosts neu laden? Laufende Server laufen weiter.`)) return;
|
||||
run(() => api('/admin/docker-hosts/pull', { method: 'POST', token }));
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="admin-settings">
|
||||
<h2>Docker-Hosts</h2>
|
||||
<p className="small muted">
|
||||
{data.overridden ? 'Diese Liste ist im Admin-Bereich gespeichert und ersetzt CS2_DOCKER_HOSTS aus der .env.' : 'Aktuell gilt die Liste aus der .env.'}
|
||||
{' '}Hosts mit laufenden Servern lassen sich erst nach dem Stoppen entfernen.
|
||||
</p>
|
||||
<div className="host-edit">
|
||||
{rows.map((r, i) => (
|
||||
<div key={i} className="host-edit-row">
|
||||
{HOST_COLUMNS.map((c) => (
|
||||
<label key={c.key} className={`setting-field host-col-${c.key}`}>
|
||||
<span>{c.label}</span>
|
||||
<input type={c.type ?? 'text'} value={r[c.key] ?? ''} placeholder={c.placeholder}
|
||||
onChange={(e) => setCell(i, c.key, e.target.value)} />
|
||||
</label>
|
||||
))}
|
||||
<button className="link-btn danger" disabled={busy || rows.length === 1}
|
||||
onClick={() => setRows(rows.filter((_, j) => j !== i))}>Entfernen</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="admin-actions">
|
||||
<button className="btn btn-sm" disabled={busy} onClick={() => setRows([...rows, { ...EMPTY_HOST }])}>Host hinzufügen</button>
|
||||
<button className="btn btn-sm btn-primary" disabled={busy || !dirty} onClick={save}>Hosts speichern</button>
|
||||
{dirty && <button className="btn btn-sm" disabled={busy} onClick={() => apply(data)}>Verwerfen</button>}
|
||||
{data.overridden && <button className="btn btn-sm btn-ghost" disabled={busy} onClick={reset}>Liste aus .env verwenden</button>}
|
||||
</div>
|
||||
|
||||
<h3>Image aktualisieren</h3>
|
||||
<p className="small muted">
|
||||
Lädt <code>{data.image}</code> auf allen Hosts gleichzeitig neu. Laufende Server laufen weiter, neue Server starten mit dem neuen Image.
|
||||
</p>
|
||||
<div className="admin-actions">
|
||||
<button className="btn btn-sm btn-primary" disabled={busy || pulling || dirty} onClick={pull}>
|
||||
{pulling ? 'Wird aktualisiert …' : 'Auf allen Hosts aktualisieren'}
|
||||
</button>
|
||||
</div>
|
||||
{data.pull?.results?.length > 0 && (
|
||||
<ul className="pull-results">
|
||||
{data.pull.results.map((r) => (
|
||||
<li key={r.name} className={`pull-${r.state}`}>
|
||||
<strong>{r.name}</strong>
|
||||
<span>{r.state === 'running' ? 'lädt …' : r.state === 'ok' ? 'aktuell' : 'fehlgeschlagen'}</span>
|
||||
{r.message && <code className="small">{r.message}</code>}
|
||||
</li>
|
||||
))}
|
||||
{data.pull.finishedAt && (
|
||||
<li className="small muted">Zuletzt fertig: {new Date(data.pull.finishedAt).toLocaleString('de-DE')}</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user