From d3625a14fcf4e5dabe0c2ff12061859b94678423 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=B8=D0=BA=D1=82=D0=BE=D1=80?=
 <78488229+viktor138irk@users.noreply.github.com>
Date: Wed, 6 May 2026 21:27:08 +0900
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B4=D0=B5=D1=82=D0=B0=D0=BB=D1=8C=D0=BD=D0=B0?=
 =?UTF-8?q?=D1=8F=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=20?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D0=B8=20=D1=81=20liv?=
 =?UTF-8?q?e-=D0=BB=D0=BE=D0=B3=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/templates/operation_detail.html | 110 ++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 web/templates/operation_detail.html
diff --git a/web/templates/operation_detail.html b/web/templates/operation_detail.html
new file mode 100644
index 0000000..f1f57f4
--- /dev/null
+++ b/web/templates/operation_detail.html
@@ -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>
