111 строки
4.2 KiB
HTML
111 строки
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ operation.title }} — {{ app_name }}</title>
|
|
<link rel="stylesheet" href="/static/app.css">
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<header class="topbar">
|
|
<div>
|
|
<div class="brand">{{ operation.title }}</div>
|
|
<div class="muted">Фоновая операция Virtuality</div>
|
|
</div>
|
|
<div class="top-meta">
|
|
<span>user: {{ user }}</span>
|
|
<a class="link-pill" href="/operations">Операции</a>
|
|
<a class="link-pill" href="/">← Дашборд</a>
|
|
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid two">
|
|
<article class="card" id="operation-card" data-operation-id="{{ operation.id }}">
|
|
<div class="card-head">
|
|
<h2>Состояние</h2>
|
|
<span id="operation-status" class="status {{ operation_css(operation.status) }}">{{ operation.status }}</span>
|
|
</div>
|
|
|
|
<div class="operation-summary">
|
|
<div>
|
|
<div class="label">Прогресс</div>
|
|
<div class="progress big"><span id="operation-progress-bar" style="width: {{ operation.progress }}%"></span></div>
|
|
<div id="operation-progress-text" class="muted small-note">{{ operation.progress }}%</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Сообщение</div>
|
|
<div id="operation-message" class="value small">{{ operation.message }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="meta-grid">
|
|
<div><span>VM</span><strong>{{ operation.vm_name }}</strong></div>
|
|
<div><span>RAM</span><strong>{{ operation.memory }} MB</strong></div>
|
|
<div><span>CPU</span><strong>{{ operation.vcpus }}</strong></div>
|
|
<div><span>Disk</span><strong>{{ operation.disk_size }} GB</strong></div>
|
|
<div><span>Bridge</span><strong>{{ operation.bridge }}</strong></div>
|
|
<div><span>Created</span><strong>{{ operation.created_at }}</strong></div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<div class="card-head">
|
|
<h2>Команда</h2>
|
|
<span class="pill">virt-install</span>
|
|
</div>
|
|
<pre class="command-box">{{ operation.cmd }}</pre>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="card-head">
|
|
<h2>Журнал virt-install</h2>
|
|
<span class="pill live-dot">live</span>
|
|
</div>
|
|
<pre id="operation-log" class="op-log">{{ operation.log_tail }}</pre>
|
|
</section>
|
|
|
|
<script>
|
|
const card = document.getElementById('operation-card');
|
|
const operationId = card.dataset.operationId;
|
|
const statusEl = document.getElementById('operation-status');
|
|
const progressBar = document.getElementById('operation-progress-bar');
|
|
const progressText = document.getElementById('operation-progress-text');
|
|
const messageEl = document.getElementById('operation-message');
|
|
const logEl = document.getElementById('operation-log');
|
|
|
|
function statusClass(status) {
|
|
if (status === 'success') return 'status ok';
|
|
if (status === 'error') return 'status err';
|
|
return 'status warn';
|
|
}
|
|
|
|
async function refreshOperation() {
|
|
const response = await fetch(`/api/operations/${operationId}`, {cache: 'no-store'});
|
|
if (!response.ok) return;
|
|
const payload = await response.json();
|
|
if (!payload.ok) return;
|
|
|
|
const op = payload.operation;
|
|
statusEl.textContent = op.status;
|
|
statusEl.className = statusClass(op.status);
|
|
progressBar.style.width = `${op.progress || 0}%`;
|
|
progressText.textContent = `${op.progress || 0}%`;
|
|
messageEl.textContent = op.message || '';
|
|
logEl.textContent = op.log_tail || '';
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
|
|
if (op.status === 'success' || op.status === 'error') {
|
|
clearInterval(window.virtualityOperationTimer);
|
|
}
|
|
}
|
|
|
|
window.virtualityOperationTimer = setInterval(refreshOperation, 1800);
|
|
refreshOperation();
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
© 2026 StackWorks