Добавлена детальная страница операции с live-логом

2026-05-06 21:27:08 +09:00
@@ -0,0 +1,110 @@
+<!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>