Добавлена детальная страница операции с 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>