Console update
This commit is contained in:
@@ -9,6 +9,7 @@ $terminalNotice = null;
|
|||||||
$terminalError = null;
|
$terminalError = null;
|
||||||
$terminalUrl = null;
|
$terminalUrl = null;
|
||||||
$terminalToken = null;
|
$terminalToken = null;
|
||||||
|
$terminalHostLabel = null;
|
||||||
|
|
||||||
$settings = modules()->settings('pi_control');
|
$settings = modules()->settings('pi_control');
|
||||||
$ttydUrl = trim((string)($settings['ttyd_url'] ?? '/ttyd'));
|
$ttydUrl = trim((string)($settings['ttyd_url'] ?? '/ttyd'));
|
||||||
@@ -22,18 +23,76 @@ $tokenTtl = $tokenTtl > 0 ? $tokenTtl : 10;
|
|||||||
$hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY name ASC')->fetchAll(PDO::FETCH_ASSOC);
|
$hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY name ASC')->fetchAll(PDO::FETCH_ASSOC);
|
||||||
$commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY label ASC')->fetchAll(PDO::FETCH_ASSOC);
|
$commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY label ASC')->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
$renderRuns = function (array $runs): string {
|
||||||
$action = (string)($_POST['action'] ?? '');
|
ob_start();
|
||||||
|
if (!$runs) {
|
||||||
|
echo '<tr><td colspan="7" class="muted">Noch keine Runs.</td></tr>';
|
||||||
|
return ob_get_clean();
|
||||||
|
}
|
||||||
|
foreach ($runs as $r) {
|
||||||
|
$out = (string)($r['output'] ?? '');
|
||||||
|
$err = (string)($r['error'] ?? '');
|
||||||
|
$snippet = $out !== '' ? $out : $err;
|
||||||
|
if (strlen($snippet) > 140) {
|
||||||
|
$snippet = substr($snippet, 0, 140) . '…';
|
||||||
|
}
|
||||||
|
echo '<tr>';
|
||||||
|
echo '<td>' . e((string)$r['id']) . '</td>';
|
||||||
|
echo '<td>' . e((string)($r['status'] ?? '')) . '</td>';
|
||||||
|
echo '<td>' . e((string)($r['host_name'] ?? $r['host_addr'] ?? '')) . '</td>';
|
||||||
|
echo '<td class="muted" style="max-width:360px;"><code>' . e((string)($r['command_text'] ?? '')) . '</code></td>';
|
||||||
|
echo '<td>' . e((string)($r['created_by'] ?? '')) . '</td>';
|
||||||
|
echo '<td class="muted" style="max-width:240px;"><code>' . e($snippet) . '</code></td>';
|
||||||
|
echo '<td>' . (!empty($r['timeout_sec']) ? e((string)$r['timeout_sec']) . 's' : 'default') . '</td>';
|
||||||
|
echo '</tr>';
|
||||||
|
}
|
||||||
|
return ob_get_clean();
|
||||||
|
};
|
||||||
|
|
||||||
if ($action === 'open_console') {
|
if (isset($_GET['queue_json'])) {
|
||||||
|
$runs = $pdo->query(
|
||||||
|
'SELECT r.*, h.name AS host_name, h.host AS host_addr
|
||||||
|
FROM ' . $table('runs') . ' r
|
||||||
|
LEFT JOIN ' . $table('hosts') . ' h ON h.id = r.host_id
|
||||||
|
ORDER BY r.id DESC LIMIT 20'
|
||||||
|
)->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
echo json_encode([
|
||||||
|
'ok' => true,
|
||||||
|
'next' => 10,
|
||||||
|
'html' => $renderRuns($runs),
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_GET['open_console_json'])) {
|
||||||
$hostId = (int)($_POST['terminal_host_id'] ?? 0);
|
$hostId = (int)($_POST['terminal_host_id'] ?? 0);
|
||||||
$provider = 'ttyd';
|
$presetId = (int)($_POST['terminal_preset_id'] ?? 0);
|
||||||
|
$rawCommand = trim((string)($_POST['terminal_command_text'] ?? ''));
|
||||||
|
$terminalError = null;
|
||||||
|
$terminalUrl = null;
|
||||||
|
$terminalToken = null;
|
||||||
|
$terminalHostLabel = null;
|
||||||
|
|
||||||
if ($hostId <= 0) {
|
if ($hostId <= 0) {
|
||||||
$terminalError = 'Bitte einen Host wählen.';
|
$terminalError = 'Bitte einen Host wählen.';
|
||||||
} elseif ($ttydUrl === '') {
|
} elseif ($ttydUrl === '') {
|
||||||
$terminalError = 'ttyd URL fehlt. Bitte im Setup setzen.';
|
$terminalError = 'ttyd URL fehlt. Bitte im Setup setzen.';
|
||||||
} else {
|
} else {
|
||||||
|
$presetCommand = '';
|
||||||
|
if ($presetId > 0) {
|
||||||
|
foreach ($commands as $c) {
|
||||||
|
if ((int)$c['id'] === $presetId) {
|
||||||
|
if (!auth_is_admin() && !empty($c['admin_only'])) {
|
||||||
|
$terminalError = 'Diese Vorlage ist nur für Admins.';
|
||||||
|
} else {
|
||||||
|
$presetCommand = (string)$c['command'];
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!$terminalError) {
|
||||||
$driver = (string)$pdo->getAttribute(PDO::ATTR_DRIVER_NAME);
|
$driver = (string)$pdo->getAttribute(PDO::ATTR_DRIVER_NAME);
|
||||||
$expiresSql = $driver === 'pgsql'
|
$expiresSql = $driver === 'pgsql'
|
||||||
? "NOW() + INTERVAL '{$tokenTtl} minutes'"
|
? "NOW() + INTERVAL '{$tokenTtl} minutes'"
|
||||||
@@ -48,18 +107,43 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
$stmt->execute([
|
$stmt->execute([
|
||||||
'token' => $token,
|
'token' => $token,
|
||||||
'host_id' => $hostId,
|
'host_id' => $hostId,
|
||||||
'provider' => $provider,
|
'provider' => 'ttyd',
|
||||||
'created_by' => auth_display_name() ?: null,
|
'created_by' => auth_display_name() ?: null,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$sep = str_contains($ttydUrl, '?') ? '&' : '?';
|
$sep = str_contains($ttydUrl, '?') ? '&' : '?';
|
||||||
$terminalUrl = rtrim($ttydUrl, '/') . '/' . $sep . 'arg=' . rawurlencode($token);
|
$terminalUrl = rtrim($ttydUrl, '/') . '/' . $sep . 'arg=' . rawurlencode($token);
|
||||||
|
$commandToRun = $presetCommand !== '' ? $presetCommand : $rawCommand;
|
||||||
|
if ($commandToRun !== '') {
|
||||||
|
$terminalUrl .= '&arg=' . rawurlencode(base64_encode($commandToRun));
|
||||||
}
|
}
|
||||||
} else {
|
foreach ($hosts as $h) {
|
||||||
$hostId = (int)($_POST['host_id'] ?? 0);
|
if ((int)$h['id'] === $hostId) {
|
||||||
$commandId = (int)($_POST['command_id'] ?? 0);
|
$terminalHostLabel = (string)($h['name'] ?? $h['host']);
|
||||||
$rawCommand = trim((string)($_POST['command_text'] ?? ''));
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
echo json_encode([
|
||||||
|
'ok' => $terminalError === null,
|
||||||
|
'error' => $terminalError,
|
||||||
|
'url' => $terminalUrl,
|
||||||
|
'token' => $terminalToken,
|
||||||
|
'host' => $terminalHostLabel,
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isset($_GET['run_command_json'])) {
|
||||||
|
$hostId = (int)($_POST['terminal_host_id'] ?? 0);
|
||||||
|
$commandId = (int)($_POST['terminal_preset_id'] ?? 0);
|
||||||
|
$rawCommand = trim((string)($_POST['terminal_command_text'] ?? ''));
|
||||||
$timeoutSec = $defaultTimeout;
|
$timeoutSec = $defaultTimeout;
|
||||||
|
$error = null;
|
||||||
|
$notice = null;
|
||||||
|
|
||||||
if ($hostId <= 0) {
|
if ($hostId <= 0) {
|
||||||
$error = 'Bitte einen Host wählen.';
|
$error = 'Bitte einen Host wählen.';
|
||||||
@@ -127,8 +211,17 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
echo json_encode([
|
||||||
|
'ok' => $error === null,
|
||||||
|
'error' => $error,
|
||||||
|
'notice' => $notice,
|
||||||
|
]);
|
||||||
|
exit;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
// Form submits are handled via AJAX to avoid reloads.
|
||||||
|
|
||||||
$runs = $pdo->query(
|
$runs = $pdo->query(
|
||||||
'SELECT r.*, h.name AS host_name, h.host AS host_addr
|
'SELECT r.*, h.name AS host_name, h.host AS host_addr
|
||||||
@@ -155,17 +248,9 @@ $runs = $pdo->query(
|
|||||||
<div class="grid" style="margin-top:1rem;">
|
<div class="grid" style="margin-top:1rem;">
|
||||||
<div class="card form-card" style="background:var(--panel-2);">
|
<div class="card form-card" style="background:var(--panel-2);">
|
||||||
<strong>Live-Konsole</strong>
|
<strong>Live-Konsole</strong>
|
||||||
<?php if ($terminalError): ?>
|
<div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114; display:none;" data-console-error></div>
|
||||||
<div class="card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
|
<div class="card" style="margin-top:1rem; border-color:var(--accent-2); display:none;" data-console-notice></div>
|
||||||
<?= e($terminalError) ?>
|
<form method="post" class="form-grid" style="margin-top:.75rem;" data-console-form>
|
||||||
</div>
|
|
||||||
<?php elseif ($terminalNotice): ?>
|
|
||||||
<div class="card" style="margin-top:1rem; border-color:var(--accent-2);">
|
|
||||||
<?= e($terminalNotice) ?>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
<form method="post" class="form-grid" style="margin-top:.75rem;">
|
|
||||||
<input type="hidden" name="action" value="open_console">
|
|
||||||
<label class="form-field">
|
<label class="form-field">
|
||||||
<span class="muted">Host</span>
|
<span class="muted">Host</span>
|
||||||
<select name="terminal_host_id" required title="Pi auswählen, zu dem die Konsole verbindet.">
|
<select name="terminal_host_id" required title="Pi auswählen, zu dem die Konsole verbindet.">
|
||||||
@@ -176,47 +261,9 @@ $runs = $pdo->query(
|
|||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
<label class="form-field">
|
<label class="form-field">
|
||||||
<span class="muted">Konsole</span>
|
<span class="muted">Vorlage</span>
|
||||||
<input type="text" value="ttyd" disabled>
|
<select name="terminal_preset_id" title="Optional: Vorlage direkt in der Konsole ausführen.">
|
||||||
</label>
|
<option value="">Vorlage auswählen (optional)</option>
|
||||||
<button class="cta-button" type="submit">Konsole öffnen</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<?php if ($terminalUrl): ?>
|
|
||||||
<div class="card" style="margin-top:1rem;">
|
|
||||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
|
|
||||||
<strong>Aktive Konsole</strong>
|
|
||||||
<a class="nav-link" href="<?= e($terminalUrl) ?>" target="_blank" rel="noopener">In neuem Tab öffnen</a>
|
|
||||||
</div>
|
|
||||||
<?php if ($terminalToken): ?>
|
|
||||||
<div class="muted" style="margin-top:.5rem;">
|
|
||||||
Token: <code><?= e($terminalToken) ?></code>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
<div style="margin-top:.75rem; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0b0f17;">
|
|
||||||
<iframe src="<?= e($terminalUrl) ?>" title="Pi Konsole" style="width:100%; height:520px; border:0;"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card form-card" style="background:var(--panel-2);">
|
|
||||||
<strong>Befehl ausführen</strong>
|
|
||||||
<form method="post" class="form-grid" style="margin-top:.75rem;">
|
|
||||||
<input type="hidden" name="action" value="run_command">
|
|
||||||
<label class="form-field">
|
|
||||||
<span class="muted">Host</span>
|
|
||||||
<select name="host_id" required>
|
|
||||||
<option value="">Host wählen</option>
|
|
||||||
<?php foreach ($hosts as $h): ?>
|
|
||||||
<option value="<?= e((string)$h['id']) ?>"><?= e($h['name'] ?? $h['host']) ?></option>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label class="form-field">
|
|
||||||
<span class="muted">Preset</span>
|
|
||||||
<select name="command_id">
|
|
||||||
<option value="">Preset auswählen (optional)</option>
|
|
||||||
<?php foreach ($commands as $c): ?>
|
<?php foreach ($commands as $c): ?>
|
||||||
<?php if (!auth_is_admin() && !empty($c['admin_only'])) { continue; } ?>
|
<?php if (!auth_is_admin() && !empty($c['admin_only'])) { continue; } ?>
|
||||||
<option value="<?= e((string)$c['id']) ?>"><?= e($c['label'] ?? '') ?></option>
|
<option value="<?= e((string)$c['id']) ?>"><?= e($c['label'] ?? '') ?></option>
|
||||||
@@ -225,15 +272,42 @@ $runs = $pdo->query(
|
|||||||
</label>
|
</label>
|
||||||
<label class="form-field">
|
<label class="form-field">
|
||||||
<span class="muted">Direkter Command</span>
|
<span class="muted">Direkter Command</span>
|
||||||
<textarea name="command_text" rows="3" placeholder="Oder Command direkt eingeben"></textarea>
|
<textarea name="terminal_command_text" rows="2" placeholder="Optional: Command direkt ausführen"></textarea>
|
||||||
</label>
|
</label>
|
||||||
<button class="cta-button" type="submit">Befehl senden</button>
|
<div style="display:flex; gap:10px; flex-wrap:wrap;">
|
||||||
|
<button class="cta-button" type="button" data-open-console>Konsole öffnen</button>
|
||||||
|
<button class="nav-link" type="button" data-run-command>Im Hintergrund ausführen</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<p class="muted" style="margin-top:.5rem;">Befehle werden über die Queue ausgeführt.</p>
|
<div class="muted" style="margin-top:.5rem;">
|
||||||
|
Token: <code data-console-token></code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if ($terminalUrl): ?>
|
||||||
|
<div class="console-launch"
|
||||||
|
data-url="<?= e($terminalUrl) ?>"
|
||||||
|
data-host="<?= e($terminalHostLabel ?: 'Konsole') ?>"
|
||||||
|
data-token="<?= e($terminalToken ?: '') ?>"></div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card form-card" style="background:var(--panel-2);">
|
<div class="card form-card" style="background:var(--panel-2);">
|
||||||
<strong>Letzte Runs</strong>
|
<strong>Konsole Tabs</strong>
|
||||||
|
<div class="console-tabs" data-console-tabs>
|
||||||
|
<div class="console-tab-bar" data-console-tab-bar></div>
|
||||||
|
<div class="console-tab-panels" data-console-tab-panels></div>
|
||||||
|
</div>
|
||||||
|
<p class="muted" style="margin-top:.5rem;">Mehrere Konsolen bleiben hier parallel offen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card form-card" style="background:var(--panel-2);">
|
||||||
|
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
|
||||||
|
<strong>Queue</strong>
|
||||||
|
<div class="muted" style="display:flex; align-items:center; gap:10px;">
|
||||||
|
<span>Update in <span data-queue-countdown>10</span>s</span>
|
||||||
|
<button class="icon-button" type="button" data-queue-refresh title="Jetzt aktualisieren">↻</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div style="margin-top:.75rem; overflow:auto;">
|
<div style="margin-top:.75rem; overflow:auto;">
|
||||||
<table class="table" style="min-width:560px;">
|
<table class="table" style="min-width:560px;">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -247,29 +321,8 @@ $runs = $pdo->query(
|
|||||||
<th>Timeout</th>
|
<th>Timeout</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody data-queue-body>
|
||||||
<?php if (!$runs): ?>
|
<?= $renderRuns($runs) ?>
|
||||||
<tr><td colspan="7" class="muted">Noch keine Runs.</td></tr>
|
|
||||||
<?php endif; ?>
|
|
||||||
<?php foreach ($runs as $r): ?>
|
|
||||||
<?php
|
|
||||||
$out = (string)($r['output'] ?? '');
|
|
||||||
$err = (string)($r['error'] ?? '');
|
|
||||||
$snippet = $out !== '' ? $out : $err;
|
|
||||||
if (strlen($snippet) > 140) {
|
|
||||||
$snippet = substr($snippet, 0, 140) . '…';
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<tr>
|
|
||||||
<td><?= e((string)$r['id']) ?></td>
|
|
||||||
<td><?= e($r['status'] ?? '') ?></td>
|
|
||||||
<td><?= e($r['host_name'] ?? $r['host_addr'] ?? '') ?></td>
|
|
||||||
<td class="muted" style="max-width:360px;"><code><?= e($r['command_text'] ?? '') ?></code></td>
|
|
||||||
<td><?= e($r['created_by'] ?? '') ?></td>
|
|
||||||
<td class="muted" style="max-width:240px;"><code><?= e($snippet) ?></code></td>
|
|
||||||
<td><?= !empty($r['timeout_sec']) ? e((string)$r['timeout_sec']) . 's' : 'default' ?></td>
|
|
||||||
</tr>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -154,6 +154,74 @@ body {
|
|||||||
.form-field select,
|
.form-field select,
|
||||||
.form-field textarea { width: 100%; }
|
.form-field textarea { width: 100%; }
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
background: var(--panel-2);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.icon-button:hover { background: var(--panel); }
|
||||||
|
|
||||||
|
.console-tabs {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #0b0f17;
|
||||||
|
}
|
||||||
|
.console-tab-bar {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 8px;
|
||||||
|
background: #0f1624;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||||
|
}
|
||||||
|
.console-tab {
|
||||||
|
background: transparent;
|
||||||
|
color: #c9d3e3;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.console-tab.is-active {
|
||||||
|
border-color: rgba(255,255,255,0.2);
|
||||||
|
background: rgba(255,255,255,0.08);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.console-tab-panels {
|
||||||
|
min-height: 420px;
|
||||||
|
}
|
||||||
|
.console-tab-close {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255,255,255,0.12);
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.console-tab-close:hover {
|
||||||
|
background: rgba(255,255,255,0.25);
|
||||||
|
}
|
||||||
|
.console-panel { display: none; }
|
||||||
|
.console-panel.is-active { display: block; }
|
||||||
|
.console-panel iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 520px;
|
||||||
|
border: 0;
|
||||||
|
background: #0b0f17;
|
||||||
|
}
|
||||||
|
|
||||||
.layout-body {
|
.layout-body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|||||||
@@ -125,3 +125,202 @@
|
|||||||
startRefresh();
|
startRefresh();
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
const tabBar = document.querySelector('[data-console-tab-bar]');
|
||||||
|
const tabPanels = document.querySelector('[data-console-tab-panels]');
|
||||||
|
if (!tabBar || !tabPanels) return;
|
||||||
|
|
||||||
|
let tabCount = 0;
|
||||||
|
const idleMs = 5 * 60 * 1000;
|
||||||
|
const idleTimers = new Map();
|
||||||
|
|
||||||
|
const activateTab = (id) => {
|
||||||
|
tabBar.querySelectorAll('.console-tab').forEach((btn) => {
|
||||||
|
btn.classList.toggle('is-active', btn.dataset.tabId === id);
|
||||||
|
});
|
||||||
|
tabPanels.querySelectorAll('.console-panel').forEach((panel) => {
|
||||||
|
panel.classList.toggle('is-active', panel.dataset.tabId === id);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const openTab = (label, url) => {
|
||||||
|
const id = `tab-${++tabCount}`;
|
||||||
|
const btn = document.createElement('button');
|
||||||
|
btn.type = 'button';
|
||||||
|
btn.className = 'console-tab';
|
||||||
|
btn.textContent = label || 'Konsole';
|
||||||
|
btn.dataset.tabId = id;
|
||||||
|
btn.addEventListener('click', () => activateTab(id));
|
||||||
|
|
||||||
|
const closeBtn = document.createElement('span');
|
||||||
|
closeBtn.className = 'console-tab-close';
|
||||||
|
closeBtn.textContent = '×';
|
||||||
|
closeBtn.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const panel = tabPanels.querySelector(`.console-panel[data-tab-id="${id}"]`);
|
||||||
|
if (panel) panel.remove();
|
||||||
|
btn.remove();
|
||||||
|
idleTimers.delete(id);
|
||||||
|
const next = tabBar.querySelector('.console-tab');
|
||||||
|
if (next) activateTab(next.dataset.tabId);
|
||||||
|
});
|
||||||
|
btn.appendChild(closeBtn);
|
||||||
|
|
||||||
|
const panel = document.createElement('div');
|
||||||
|
panel.className = 'console-panel';
|
||||||
|
panel.dataset.tabId = id;
|
||||||
|
panel.innerHTML = `<iframe src="${url}" title="${label || 'Konsole'}"></iframe>`;
|
||||||
|
|
||||||
|
tabBar.appendChild(btn);
|
||||||
|
tabPanels.appendChild(panel);
|
||||||
|
activateTab(id);
|
||||||
|
|
||||||
|
const iframe = panel.querySelector('iframe');
|
||||||
|
const markActive = () => {
|
||||||
|
idleTimers.set(id, Date.now());
|
||||||
|
};
|
||||||
|
idleTimers.set(id, Date.now());
|
||||||
|
|
||||||
|
iframe.addEventListener('load', () => {
|
||||||
|
try {
|
||||||
|
const doc = iframe.contentWindow.document;
|
||||||
|
['keydown', 'mousedown', 'wheel', 'touchstart'].forEach((evt) => {
|
||||||
|
doc.addEventListener(evt, markActive, { passive: true });
|
||||||
|
});
|
||||||
|
const observer = new MutationObserver(markActive);
|
||||||
|
observer.observe(doc.body, { childList: true, subtree: true, characterData: true });
|
||||||
|
} catch (e) {
|
||||||
|
// cross-origin or blocked; rely on timer only
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const idleCheck = setInterval(() => {
|
||||||
|
const last = idleTimers.get(id) || 0;
|
||||||
|
if (Date.now() - last > idleMs) {
|
||||||
|
const panelEl = tabPanels.querySelector(`.console-panel[data-tab-id="${id}"]`);
|
||||||
|
const btnEl = tabBar.querySelector(`.console-tab[data-tab-id="${id}"]`);
|
||||||
|
if (panelEl) panelEl.remove();
|
||||||
|
if (btnEl) btnEl.remove();
|
||||||
|
idleTimers.delete(id);
|
||||||
|
clearInterval(idleCheck);
|
||||||
|
const next = tabBar.querySelector('.console-tab');
|
||||||
|
if (next) activateTab(next.dataset.tabId);
|
||||||
|
}
|
||||||
|
}, 10000);
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('.console-launch').forEach((el) => {
|
||||||
|
const url = el.dataset.url;
|
||||||
|
const host = el.dataset.host || 'Konsole';
|
||||||
|
if (url) {
|
||||||
|
openTab(host, url);
|
||||||
|
}
|
||||||
|
el.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
const queueBody = document.querySelector('[data-queue-body]');
|
||||||
|
const countdownEl = document.querySelector('[data-queue-countdown]');
|
||||||
|
const refreshBtn = document.querySelector('[data-queue-refresh]');
|
||||||
|
if (!queueBody || !countdownEl) return;
|
||||||
|
|
||||||
|
let remaining = 10;
|
||||||
|
let timer = null;
|
||||||
|
|
||||||
|
const fetchQueue = async () => {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set('queue_json', '1');
|
||||||
|
try {
|
||||||
|
const res = await fetch(url.toString(), { cache: 'no-store' });
|
||||||
|
if (!res.ok) return;
|
||||||
|
const data = await res.json();
|
||||||
|
if (data && data.html) {
|
||||||
|
queueBody.innerHTML = data.html;
|
||||||
|
}
|
||||||
|
remaining = data && data.next ? data.next : 10;
|
||||||
|
} catch (e) {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const tick = () => {
|
||||||
|
remaining -= 1;
|
||||||
|
if (remaining <= 0) {
|
||||||
|
fetchQueue();
|
||||||
|
remaining = 10;
|
||||||
|
}
|
||||||
|
countdownEl.textContent = String(remaining);
|
||||||
|
};
|
||||||
|
|
||||||
|
timer = setInterval(tick, 1000);
|
||||||
|
if (refreshBtn) {
|
||||||
|
refreshBtn.addEventListener('click', () => {
|
||||||
|
fetchQueue();
|
||||||
|
remaining = 10;
|
||||||
|
countdownEl.textContent = String(remaining);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const consoleForm = document.querySelector('[data-console-form]');
|
||||||
|
const consoleError = document.querySelector('[data-console-error]');
|
||||||
|
const consoleNotice = document.querySelector('[data-console-notice]');
|
||||||
|
const tokenEl = document.querySelector('[data-console-token]');
|
||||||
|
if (consoleForm) {
|
||||||
|
const submitOpen = async () => {
|
||||||
|
const formData = new FormData(consoleForm);
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set('open_console_json', '1');
|
||||||
|
const res = await fetch(url.toString(), { method: 'POST', body: formData, cache: 'no-store' });
|
||||||
|
const data = await res.json();
|
||||||
|
if (!data.ok) {
|
||||||
|
if (consoleError) {
|
||||||
|
consoleError.textContent = data.error || 'Fehler beim Öffnen der Konsole.';
|
||||||
|
consoleError.style.display = 'block';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (consoleError) consoleError.style.display = 'none';
|
||||||
|
if (consoleNotice) consoleNotice.style.display = 'none';
|
||||||
|
if (tokenEl) tokenEl.textContent = data.token || '';
|
||||||
|
if (data.url) openTab(data.host || 'Konsole', data.url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const submitRun = async () => {
|
||||||
|
const formData = new FormData(consoleForm);
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set('run_command_json', '1');
|
||||||
|
const res = await fetch(url.toString(), { method: 'POST', body: formData, cache: 'no-store' });
|
||||||
|
const data = await res.json();
|
||||||
|
if (!data.ok) {
|
||||||
|
if (consoleError) {
|
||||||
|
consoleError.textContent = data.error || 'Fehler beim Ausführen.';
|
||||||
|
consoleError.style.display = 'block';
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (consoleError) consoleError.style.display = 'none';
|
||||||
|
if (consoleNotice) {
|
||||||
|
consoleNotice.textContent = data.notice || '';
|
||||||
|
consoleNotice.style.display = 'block';
|
||||||
|
}
|
||||||
|
fetchQueue();
|
||||||
|
remaining = 10;
|
||||||
|
countdownEl.textContent = String(remaining);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openBtn = consoleForm.querySelector('[data-open-console]');
|
||||||
|
const runBtn = consoleForm.querySelector('[data-run-command]');
|
||||||
|
if (openBtn) {
|
||||||
|
openBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
submitOpen();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (runBtn) {
|
||||||
|
runBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
submitRun();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
set -euo pipefail
|
set -euo pipefail
|
||||||
|
|
||||||
TOKEN="${1:-}"
|
TOKEN="${1:-}"
|
||||||
|
ENC_COMMAND="${2:-}"
|
||||||
if [[ -z "${TOKEN}" ]]; then
|
if [[ -z "${TOKEN}" ]]; then
|
||||||
echo "Missing token."
|
echo "Missing token."
|
||||||
exit 1
|
exit 1
|
||||||
@@ -34,6 +35,11 @@ AUTH_TYPE="$(echo "${JSON}" | jq -r '.host.auth_type')"
|
|||||||
KEY_PATH="$(echo "${JSON}" | jq -r '.host.key_path')"
|
KEY_PATH="$(echo "${JSON}" | jq -r '.host.key_path')"
|
||||||
PASSWORD="$(echo "${JSON}" | jq -r '.host.password')"
|
PASSWORD="$(echo "${JSON}" | jq -r '.host.password')"
|
||||||
|
|
||||||
|
COMMAND=""
|
||||||
|
if [[ -n "${ENC_COMMAND}" ]]; then
|
||||||
|
COMMAND="$(printf '%s' "${ENC_COMMAND}" | base64 -d 2>/dev/null || true)"
|
||||||
|
fi
|
||||||
|
|
||||||
if [[ -z "${HOST}" || -z "${USER}" ]]; then
|
if [[ -z "${HOST}" || -z "${USER}" ]]; then
|
||||||
echo "Host data incomplete."
|
echo "Host data incomplete."
|
||||||
exit 1
|
exit 1
|
||||||
@@ -46,10 +52,24 @@ else
|
|||||||
SSH_OPTS=(-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null)
|
SSH_OPTS=(-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null)
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
SSH_TARGET="${USER}@${HOST}"
|
||||||
|
if [[ -n "${COMMAND}" ]]; then
|
||||||
|
REMOTE_CMD="${COMMAND}; exec \$SHELL"
|
||||||
|
REMOTE_CMD="${REMOTE_CMD//\\/\\\\}"
|
||||||
|
REMOTE_CMD="${REMOTE_CMD//\"/\\\"}"
|
||||||
if [[ "${AUTH_TYPE}" == "key" && -n "${KEY_PATH}" ]]; then
|
if [[ "${AUTH_TYPE}" == "key" && -n "${KEY_PATH}" ]]; then
|
||||||
exec ssh "${SSH_OPTS[@]}" -i "${KEY_PATH}" -p "${PORT:-22}" "${USER}@${HOST}"
|
exec ssh "${SSH_OPTS[@]}" -i "${KEY_PATH}" -p "${PORT:-22}" -t "${SSH_TARGET}" -- sh -lc "${REMOTE_CMD}"
|
||||||
elif [[ "${AUTH_TYPE}" == "pass" && -n "${PASSWORD}" ]]; then
|
elif [[ "${AUTH_TYPE}" == "pass" && -n "${PASSWORD}" ]]; then
|
||||||
exec sshpass -p "${PASSWORD}" ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" "${USER}@${HOST}"
|
exec sshpass -p "${PASSWORD}" ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" -t "${SSH_TARGET}" -- sh -lc "${REMOTE_CMD}"
|
||||||
else
|
else
|
||||||
exec ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" "${USER}@${HOST}"
|
exec ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" -t "${SSH_TARGET}" -- sh -lc "${REMOTE_CMD}"
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
if [[ "${AUTH_TYPE}" == "key" && -n "${KEY_PATH}" ]]; then
|
||||||
|
exec ssh "${SSH_OPTS[@]}" -i "${KEY_PATH}" -p "${PORT:-22}" "${SSH_TARGET}"
|
||||||
|
elif [[ "${AUTH_TYPE}" == "pass" && -n "${PASSWORD}" ]]; then
|
||||||
|
exec sshpass -p "${PASSWORD}" ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" "${SSH_TARGET}"
|
||||||
|
else
|
||||||
|
exec ssh "${SSH_OPTS[@]}" -p "${PORT:-22}" "${SSH_TARGET}"
|
||||||
|
fi
|
||||||
fi
|
fi
|
||||||
|
|||||||
Reference in New Issue
Block a user