Интерфейс панели был полностью перерисован
Новый дизайн в стиле коммерческих продуктов, рассчитанный на обычного пользователя: - светлая и тёмная темы (следует системной), шрифт Inter и иконки Lucide вшиты в панель — работает без интернета; - общий каркас base.html и компоненты _ui.html вместо 14 независимых страниц; адаптивная вёрстка для телефона; - простой язык: «Работает / Выключена», «Автозапуск», «Доступ из интернета» вместо running, autostart, DNAT; технические данные убраны во вкладку «Для специалистов»; - главная: загрузка процессора, памяти и хранилища, карточки машин с главным действием и меню остальных, приветственный сценарий для первой машины; - мастер создания машины из трёх шагов с готовыми конфигурациями; - страница машины с вкладками, переключателем автозапуска и порядком загрузки кнопками; - «Сеть и доступ»: открытие SSH, сайта, RDP и т. д. из списка, ручные IP машин, понятная диагностика; - загрузка образов перетаскиванием с прогрессом и оставшимся временем; - подтверждения опасных действий в диалоге и уведомления; - раздел «Помощь»; - web/presenters.py переводит вывод virsh и /proc в данные для страниц; tests/dev_server.py запускает панель с имитацией virsh. Также: исправлено определение модели CPU на x86 («207» вместо названия процессора), история версии 0.10.0 и документация обновлены под Ubuntu 26.04 LTS, в README добавлены скриншоты. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019LEUXMcdZo7b87mjkUsPgg
Этот коммит содержится в:
Claude
@@ -1,170 +1,63 @@
|
||||
<!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>
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, op_badge %}
|
||||
{% set page_title = operation.title %}
|
||||
{% set done = operation.status in ('success', 'error') %}
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card" id="operation-card" data-operation-id="{{ operation.id }}" data-initial-progress="{{ operation.progress }}">
|
||||
<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');
|
||||
|
||||
let serverProgress = Number(card.dataset.initialProgress || 0);
|
||||
let visualProgress = serverProgress;
|
||||
let lastServerProgress = serverProgress;
|
||||
let currentStatus = statusEl.textContent.trim() || 'queued';
|
||||
let lastProgressAt = Date.now();
|
||||
|
||||
function statusClass(status) {
|
||||
if (status === 'success') return 'status ok';
|
||||
if (status === 'error') return 'status err';
|
||||
return 'status warn';
|
||||
}
|
||||
|
||||
function setProgress(value) {
|
||||
const safeValue = Math.max(0, Math.min(100, Math.round(value)));
|
||||
progressBar.style.width = `${safeValue}%`;
|
||||
progressText.textContent = `${safeValue}%`;
|
||||
}
|
||||
|
||||
function interpolateProgress() {
|
||||
if (currentStatus === 'success') {
|
||||
visualProgress = 100;
|
||||
setProgress(100);
|
||||
clearInterval(window.virtualitySmoothProgressTimer);
|
||||
return;
|
||||
}
|
||||
if (currentStatus === 'error') {
|
||||
visualProgress = Math.max(visualProgress, serverProgress || 100);
|
||||
setProgress(visualProgress);
|
||||
clearInterval(window.virtualitySmoothProgressTimer);
|
||||
return;
|
||||
}
|
||||
if (currentStatus !== 'queued' && currentStatus !== 'running') return;
|
||||
|
||||
const ceiling = currentStatus === 'queued' ? 12 : 95;
|
||||
const ageSeconds = Math.max(1, Math.floor((Date.now() - lastProgressAt) / 1000));
|
||||
const baseStep = currentStatus === 'queued' ? 0.35 : 0.75;
|
||||
const slowDown = visualProgress > 80 ? 0.28 : visualProgress > 60 ? 0.45 : 1;
|
||||
const step = Math.min(2.5, baseStep * slowDown * ageSeconds);
|
||||
|
||||
if (visualProgress < ceiling) {
|
||||
visualProgress = Math.min(ceiling, Math.max(visualProgress, serverProgress) + step);
|
||||
setProgress(visualProgress);
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshOperation() {
|
||||
try {
|
||||
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;
|
||||
currentStatus = op.status || currentStatus;
|
||||
serverProgress = Number(op.progress || 0);
|
||||
statusEl.textContent = currentStatus;
|
||||
statusEl.className = statusClass(currentStatus);
|
||||
|
||||
if (serverProgress !== lastServerProgress || currentStatus === 'success' || currentStatus === 'error') {
|
||||
lastProgressAt = Date.now();
|
||||
lastServerProgress = serverProgress;
|
||||
}
|
||||
|
||||
if (currentStatus === 'success') {
|
||||
visualProgress = 100;
|
||||
} else if (currentStatus === 'error') {
|
||||
visualProgress = Math.max(visualProgress, serverProgress);
|
||||
} else {
|
||||
visualProgress = Math.max(visualProgress, serverProgress);
|
||||
}
|
||||
|
||||
setProgress(visualProgress);
|
||||
messageEl.textContent = op.message || '';
|
||||
logEl.textContent = op.log_tail || '';
|
||||
logEl.scrollTop = logEl.scrollHeight;
|
||||
|
||||
if (currentStatus === 'success' || currentStatus === 'error') {
|
||||
clearInterval(window.virtualityOperationTimer);
|
||||
}
|
||||
} catch (error) {
|
||||
messageEl.textContent = 'Ожидаем ответ операции...';
|
||||
}
|
||||
}
|
||||
|
||||
window.virtualityOperationTimer = setInterval(refreshOperation, 1500);
|
||||
window.virtualitySmoothProgressTimer = setInterval(interpolateProgress, 1000);
|
||||
refreshOperation();
|
||||
interpolateProgress();
|
||||
</script>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="eyebrow"><a href="/operations">{{ icon('arrow-left', 'icon-sm') }} Все задачи</a></div>
|
||||
<h1>{{ operation.title }}</h1>
|
||||
<p class="lead">Начата {{ operation.created_at }}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="grid grid-main">
|
||||
<div class="stack">
|
||||
<article class="card" data-operation-id="{{ operation.id }}" data-progress="{{ operation.progress|default(0) }}" data-status="{{ operation.status }}">
|
||||
<div class="card-body stack-sm">
|
||||
<div class="row-between">
|
||||
<span data-op="status">{{ op_badge(operation.status, 'lg') }}</span>
|
||||
<strong class="stat-value" style="margin:0;font-size:22px" data-op="pct">{{ operation.progress|default(0) }}%</strong>
|
||||
</div>
|
||||
<div class="progress lg {{ 'success' if operation.status == 'success' else 'danger' if operation.status == 'error' else '' }}" data-op="progress" style="height:10px"><span data-op="bar" style="width:{{ operation.progress|default(0) }}%"></span></div>
|
||||
<p class="muted" data-op="message">{{ operation.message }}</p>
|
||||
{% if operation.vm_name %}
|
||||
<div class="row" data-op-done {% if operation.status != 'success' %}hidden{% endif %}>
|
||||
<a class="btn btn-primary" href="/vm/{{ operation.vm_name }}/console" target="_blank" rel="noopener">{{ icon('monitor') }}Открыть экран машины</a>
|
||||
<a class="btn" href="/vm/{{ operation.vm_name }}">Перейти к машине</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div>
|
||||
<div class="terminal-head"><i></i><i></i><i></i><span style="margin-left:6px">Журнал выполнения</span></div>
|
||||
<pre class="terminal tall" data-op="log">{{ operation.log_tail or 'Ожидаем вывод…' }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Параметры</h2></div>
|
||||
<div class="card-body" style="padding-top:6px;padding-bottom:6px">
|
||||
{% if operation.vm_name %}<div class="summary-row"><span>Машина</span><strong>{{ operation.vm_name }}</strong></div>{% endif %}
|
||||
{% if operation.vcpus %}<div class="summary-row"><span>Процессор</span><strong>{{ operation.vcpus }} {{ plural(operation.vcpus|int, 'ядро', 'ядра', 'ядер') }}</strong></div>{% endif %}
|
||||
{% if operation.memory %}<div class="summary-row"><span>Память</span><strong>{{ operation.memory|format_mb }}</strong></div>{% endif %}
|
||||
{% if operation.disk_size %}<div class="summary-row"><span>Диск</span><strong>{{ operation.disk_size }} ГБ</strong></div>{% endif %}
|
||||
{% if operation.network_mode %}<div class="summary-row"><span>Сеть</span><strong>{{ 'Локальная сеть' if operation.network_mode == 'bridge' else 'Автоматически (NAT)' }}</strong></div>{% endif %}
|
||||
{% if operation.source_path %}<div class="summary-row"><span>Файл</span><strong>{{ operation.source_path.split('/')[-1] }}</strong></div>{% endif %}
|
||||
<div class="summary-row"><span>Запустил</span><strong>{{ operation.created_by|default('—') }}</strong></div>
|
||||
</div>
|
||||
</article>
|
||||
{% if operation.cmd %}
|
||||
<details class="advanced">
|
||||
<summary>{{ icon('terminal', 'icon-sm') }}Команда<span class="chev">{{ icon('chevron-down', 'icon-sm') }}</span></summary>
|
||||
<div class="advanced-body"><pre class="terminal" style="max-height:260px">{{ operation.cmd }}</pre></div>
|
||||
</details>
|
||||
{% endif %}
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Ссылка в новой задаче
Block a user
© 2026 StackWorks