Интерфейс панели был полностью перерисован
Новый дизайн в стиле коммерческих продуктов, рассчитанный на обычного пользователя: - светлая и тёмная темы (следует системной), шрифт 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
@@ -0,0 +1,12 @@
|
||||
{% from "_ui.html" import icon %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Образы ОС</h1>
|
||||
<p class="lead">Файлы, из которых создаются машины. Загрузите один раз — используйте для любого количества машин.</p>
|
||||
</div>
|
||||
<div class="page-actions"><a class="btn btn-primary" href="/vm/create">{{ icon('plus') }}Создать машину</a></div>
|
||||
</div>
|
||||
<nav class="tabs">
|
||||
<a href="/iso" class="{{ 'active' if request.url.path.startswith('/iso') else '' }}">{{ icon('disc-3', 'icon-sm') }}Установочные образы{% if isos is defined %}<span class="tag">{{ isos|length }}</span>{% endif %}</a>
|
||||
<a href="/disk-images" class="{{ 'active' if request.url.path.startswith('/disk-images') else '' }}">{{ icon('hard-drive', 'icon-sm') }}Готовые системы{% if images is defined %}<span class="tag">{{ images|length }}</span>{% endif %}</a>
|
||||
</nav>
|
||||
@@ -0,0 +1,68 @@
|
||||
{% macro icon(name, cls='') -%}
|
||||
<svg class="icon {{ cls }}" aria-hidden="true"><use href="/static/icons.svg#i-{{ name }}"></use></svg>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro logo() -%}
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4.5 5.5 12 19l7.5-13.5" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 5.5h6" stroke="#fff" stroke-opacity=".55" stroke-width="2.6" stroke-linecap="round"/></svg>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro badge(label, tone='neutral', dot=True, cls='', attrs='') -%}
|
||||
<span class="badge {{ tone }} {{ cls }}" {{ attrs|safe }}>{% if dot %}<span class="dot"></span>{% endif %}{{ label }}</span>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro vm_badge(state, cls='') -%}
|
||||
{%- set s = state|vm_state -%}
|
||||
<span class="badge {{ s.tone }} {{ cls }}" data-live="badge"><span class="dot"></span>{{ s.label }}</span>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro op_badge(status, cls='') -%}
|
||||
{%- set s = status|operation_state -%}
|
||||
<span class="badge {{ s.tone }} {{ cls }}"><span class="dot"></span>{{ s.label }}</span>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro meter(pct, tone=None) -%}
|
||||
<div class="meter {{ tone or (pct|level_tone) }}"><span style="--value: {{ pct }}%"></span></div>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro empty(icon_name, title, text, action_url=None, action_label=None, action_icon='plus') -%}
|
||||
<div class="empty">
|
||||
<div class="empty-art">{{ icon(icon_name, 'icon-xl') }}</div>
|
||||
<h3>{{ title }}</h3>
|
||||
<p>{{ text }}</p>
|
||||
{% if action_url %}<div class="row"><a class="btn btn-primary" href="{{ action_url }}">{{ icon(action_icon) }}{{ action_label }}</a></div>{% endif %}
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro alert(tone, text, title=None, icon_name=None) -%}
|
||||
{%- set icons = {'success': 'circle-check', 'danger': 'circle-x', 'warning': 'triangle-alert', 'info': 'info', 'brand': 'sparkles'} -%}
|
||||
<div class="alert {{ tone }}" role="{{ 'alert' if tone == 'danger' else 'status' }}">
|
||||
{{ icon(icon_name or icons.get(tone, 'info')) }}
|
||||
<div>{% if title %}<strong>{{ title }}</strong>{% endif %}<span {% if tone == 'danger' %}data-error-message{% endif %}>{{ text }}</span></div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro uploader(action, field, accept, title, hint, redirect, button) -%}
|
||||
<form method="post" action="{{ action }}" enctype="multipart/form-data" class="stack-sm" data-uploader data-accept="{{ accept }}" data-redirect="{{ redirect }}">
|
||||
<label class="dropzone">
|
||||
<input type="file" name="{{ field }}" accept="{{ accept }}" required>
|
||||
<span class="dropzone-icon">{{ icon('cloud-upload', 'icon-lg') }}</span>
|
||||
<strong>{{ title }}</strong>
|
||||
<span>{{ hint }}</span>
|
||||
</label>
|
||||
<div class="upload-file" data-upload-file hidden>
|
||||
<span class="list-icon brand">{{ icon('package') }}</span>
|
||||
<div class="grow">
|
||||
<div class="row-between"><strong class="truncate" data-upload-name></strong><span class="subtle small" data-upload-size></span></div>
|
||||
<div class="subtle small mt-1" data-upload-status></div>
|
||||
<div class="progress mt-1" data-upload-progress hidden><span></span></div>
|
||||
<div class="upload-stats" data-upload-stats></div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-upload-clear title="Убрать файл">{{ icon('x') }}</button>
|
||||
</div>
|
||||
<div class="alert danger" data-upload-error hidden>{{ icon('circle-x') }}<div data-upload-error-text></div></div>
|
||||
<div class="row">
|
||||
<button type="submit" class="btn btn-primary" data-upload-submit disabled>{{ icon('cloud-upload') }}{{ button }}</button>
|
||||
<button type="button" class="btn btn-danger-soft" data-upload-cancel hidden>{{ icon('x') }}Отменить загрузку</button>
|
||||
</div>
|
||||
</form>
|
||||
{%- endmacro %}
|
||||
@@ -0,0 +1,94 @@
|
||||
{% from "_ui.html" import icon, logo, alert %}
|
||||
{%- set path = request.url.path -%}
|
||||
{%- macro nav_link(href, icon_name, label, active, extra='') -%}
|
||||
<a href="{{ href }}" class="{{ 'active' if active else '' }}" {% if active %}aria-current="page"{% endif %}>{{ icon(icon_name) }}<span>{{ label }}</span>{{ extra|safe }}</a>
|
||||
{%- endmacro -%}
|
||||
<!doctype html>
|
||||
<html lang="ru" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>{% block title %}{{ page_title|default('Панель') }}{% endblock %} — Virtuality</title>
|
||||
<script>
|
||||
(function () {
|
||||
var mode = 'system';
|
||||
try { mode = localStorage.getItem('virtualityTheme') || 'system'; } catch (e) {}
|
||||
var dark = mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
|
||||
})();
|
||||
</script>
|
||||
<link rel="preload" href="/static/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="stylesheet" href="/static/app.css?v={{ app_version }}">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237b6bff'/%3E%3Cstop offset='1' stop-color='%232f73f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cpath d='M9 10l7 13 7-13' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{%- set notice = update_notice() -%}
|
||||
<div class="app">
|
||||
<aside class="sidebar" id="sidebar" aria-label="Главное меню">
|
||||
<a class="logo" href="/">
|
||||
<span class="brand-mark">{{ logo() }}</span>
|
||||
<span class="brand-name">Virtuality<small>Виртуализация · {{ app_version }}</small></span>
|
||||
</a>
|
||||
|
||||
<nav class="nav">
|
||||
{{ nav_link('/', 'layout-dashboard', 'Обзор', path == '/') }}
|
||||
{{ nav_link('/vm/create', 'plus', 'Создать машину', path.startswith('/vm/create')) }}
|
||||
|
||||
<div class="nav-section">Ресурсы</div>
|
||||
{{ nav_link('/iso', 'disc-3', 'Образы ОС', path.startswith('/iso') or path.startswith('/disk-images')) }}
|
||||
{{ nav_link('/network', 'globe', 'Сеть и доступ', path.startswith('/network')) }}
|
||||
|
||||
<div class="nav-section">Система</div>
|
||||
{{ nav_link('/operations', 'list-checks', 'Задачи', path.startswith('/operations')) }}
|
||||
{{ nav_link('/logs', 'scroll-text', 'Журналы', path.startswith('/logs')) }}
|
||||
{{ nav_link('/update', 'refresh-cw', 'Обновления', path.startswith('/update'), '<span class="nav-dot" title="Доступно обновление"></span>' if notice.has_update else '') }}
|
||||
{{ nav_link('/host', 'server', 'Сервер', path.startswith('/host')) }}
|
||||
{{ nav_link('/help', 'circle-help', 'Помощь', path.startswith('/help')) }}
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="server-chip">
|
||||
<span class="avatar">{{ (user or '?')[:1]|upper }}</span>
|
||||
<div><strong>{{ user }}</strong><span>Администратор</span></div>
|
||||
</div>
|
||||
<div class="sidebar-actions">
|
||||
<button type="button" class="btn btn-sm btn-icon" data-theme-toggle title="Сменить тему">{{ icon('moon') }}</button>
|
||||
<form method="post" action="/logout" data-no-busy><button type="submit" class="btn btn-sm" style="flex:1">{{ icon('log-out', 'icon-sm') }}Выйти</button></form>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="mobilebar">
|
||||
<button type="button" class="btn btn-icon btn-ghost" data-nav-toggle aria-label="Открыть меню">{{ icon('menu') }}</button>
|
||||
<a class="logo" href="/"><span class="brand-mark">{{ logo() }}</span><span class="brand-name">Virtuality</span></a>
|
||||
<button type="button" class="btn btn-icon btn-ghost" data-theme-toggle aria-label="Сменить тему">{{ icon('moon') }}</button>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
{% block page_header %}{% endblock %}
|
||||
<div class="alerts">{% block alerts %}{% if error %}{{ alert('danger', error) }}{% endif %}{% endblock %}</div>
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog class="dialog" id="confirm-dialog">
|
||||
<form method="dialog">
|
||||
<div class="dialog-body">
|
||||
<div class="dialog-icon">{{ icon('triangle-alert', 'icon-lg') }}</div>
|
||||
<div><h3 data-confirm-title>Подтвердите действие</h3><p data-confirm-text></p></div>
|
||||
</div>
|
||||
<div class="dialog-actions">
|
||||
<button class="btn" value="cancel">Отмена</button>
|
||||
<button class="btn btn-danger" type="button" data-confirm-ok>Продолжить</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
<div id="toasts" aria-live="polite"></div>
|
||||
<script src="/static/panel.js?v={{ app_version }}" defer></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +1,37 @@
|
||||
{% from "_ui.html" import icon, logo, vm_badge %}
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<html lang="ru" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Консоль {{ vm.name }} — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<title>Экран {{ vm.name }} — Virtuality</title>
|
||||
<link rel="stylesheet" href="/static/app.css?v={{ app_version }}">
|
||||
</head>
|
||||
<body class="console-body">
|
||||
<div class="console-window">
|
||||
<header class="console-topbar">
|
||||
<div class="console-title">
|
||||
<strong>{{ vm.name }}</strong>
|
||||
<span>VNC {{ console.display }}{% if console.port %} · port {{ console.port }}{% endif %}</span>
|
||||
<body class="console-page">
|
||||
<header class="console-bar">
|
||||
<div class="row">
|
||||
<span class="brand-mark" style="width:28px;height:28px;border-radius:8px">{{ logo() }}</span>
|
||||
<strong>{{ vm.name }}</strong>
|
||||
{{ vm_badge(vm.info.state) }}
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="small" style="color:#8b95a7">Чтобы вернуть курсор, нажмите Ctrl+Alt</span>
|
||||
<a class="btn btn-sm" href="/vm/{{ vm.name }}">{{ icon('settings', 'icon-sm') }}Настройки машины</a>
|
||||
</div>
|
||||
</header>
|
||||
{% if console.url %}
|
||||
<iframe class="console-frame" src="{{ console.url }}" allowfullscreen title="Экран машины {{ vm.name }}"></iframe>
|
||||
{% else %}
|
||||
<main style="flex:1;display:grid;place-items:center;padding:24px">
|
||||
<div class="card" style="max-width:480px;background:#11141b;border-color:#232935">
|
||||
<div class="empty">
|
||||
<div class="empty-art">{{ icon('monitor', 'icon-xl') }}</div>
|
||||
<h3 style="color:#edf0f6">Экран недоступен</h3>
|
||||
<p style="color:#a9b1c2">{% if not console.has_novnc %}На сервере не установлен компонент noVNC. Переустановите панель: <code>sudo bash scripts/install_web_panel.sh</code>{% else %}Машина выключена или ещё загружается. Запустите её и обновите страницу.{% endif %}</p>
|
||||
<div class="row"><a class="btn btn-primary" href="/vm/{{ vm.name }}">К машине</a><button class="btn" onclick="location.reload()">Обновить</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-actions">
|
||||
<span class="status {{ 'ok' if console.url else 'err' }}">{{ 'connected ready' if console.url else 'not ready' }}</span>
|
||||
<a class="link-pill" href="/vm/{{ vm.name }}">VM</a>
|
||||
<a class="link-pill" href="/">Дашборд</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if console.url %}
|
||||
<main class="console-main">
|
||||
<iframe class="console-frame-full" src="{{ console.url }}" allowfullscreen></iframe>
|
||||
</main>
|
||||
{% else %}
|
||||
<main class="console-main console-error-wrap">
|
||||
<section class="card console-error-card">
|
||||
<div class="card-head">
|
||||
<h2>Консоль пока недоступна</h2>
|
||||
<span class="status err">not ready</span>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div class="service-row"><span>noVNC path</span><span>{{ console.novnc_dir }}</span></div>
|
||||
<div class="service-row"><span>VNC display</span><span>{{ console.display }}</span></div>
|
||||
<div class="service-row"><span>VNC port</span><span>{{ console.port or 'not available' }}</span></div>
|
||||
<div class="service-row"><span>VM IP</span><span>{{ vm.ip }}</span></div>
|
||||
</div>
|
||||
<div class="notice top-space">
|
||||
Проверь, что VM запущена, у неё есть VNC display, а пакет novnc установлен. После обновления web-панели установщик должен поставить novnc автоматически.
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+161
-188
@@ -1,190 +1,163 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ app_name }} Panel</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, vm_badge, op_badge, meter, alert %}
|
||||
{% set page_title = 'Обзор' %}
|
||||
{% set running = vms|selectattr('state', 'in', ['running', 'idle', 'blocked'])|list|length %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Обзор</div>
|
||||
<div class="v-subtitle">{{ system.hostname }} · {{ system.ip }} · {{ system.time }}</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if update_notice and update_notice.has_update %}
|
||||
<section class="card update-banner">
|
||||
<div>
|
||||
<div class="label">Доступно обновление Virtuality</div>
|
||||
<div class="value small">{{ update_notice.current_version }} → {{ update_notice.latest_version }}</div>
|
||||
<div class="muted small-note">Пропущено версий: {{ update_notice.missing_count }} · новых коммитов: {{ update_notice.commit_count }}</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a class="link-pill accent" href="/update">Посмотреть изменения</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid stats">
|
||||
<article class="card stat">
|
||||
<div class="label">Uptime</div>
|
||||
<div class="value">{{ system.uptime }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Load</div>
|
||||
<div class="value">{{ system.load }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Kernel</div>
|
||||
<div class="value small">{{ system.kernel }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">VM</div>
|
||||
<div class="value">{{ vms|length }}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Виртуальные машины</h2>
|
||||
<div class="actions">
|
||||
<a class="link-pill" href="/operations">Операции</a>
|
||||
<a class="link-pill" href="/logs">Журналы</a>
|
||||
</div>
|
||||
</div>
|
||||
<table class="vm-table">
|
||||
<thead>
|
||||
<tr><th>ID</th><th>Name</th><th>IP</th><th>State</th><th>Autostart</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms %}
|
||||
{% set is_running = 'running' in vm.state %}
|
||||
<tr class="vm-row {{ 'is-running' if is_running else 'is-stopped' }}">
|
||||
<td>{{ vm.id }}</td>
|
||||
<td class="strong"><a class="table-link" href="/vm/{{ vm.name }}">{{ vm.name }}</a></td>
|
||||
<td class="strong">{{ vm.ip|default('—') }}</td>
|
||||
<td><span class="status {{ 'ok' if is_running else 'err' if 'shut' in vm.state else 'warn' }}">{{ vm.state }}</span></td>
|
||||
<td class="autostart-cell">
|
||||
{% if vm.autostart_enabled %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/autostart-disable" class="inline-form">
|
||||
<button class="status status-button ok" title="Отключить автозапуск">{{ vm.autostart_label|default('enabled') }}</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/autostart" class="inline-form">
|
||||
<button class="status status-button err" title="Включить автозапуск">{{ vm.autostart_label|default('disabled') }}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="vm-actions-cell">
|
||||
<div class="vm-actions compact-actions">
|
||||
<a class="icon-action" href="/vm/{{ vm.name }}" title="Подробнее"><span>ℹ</span><em>Детали</em></a>
|
||||
<a class="icon-action accent" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener" title="Консоль"><span>▣</span><em>Консоль</em></a>
|
||||
{% if is_running %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/reboot"><button class="icon-action" title="Перезагрузить"><span>↻</span><em>Reboot</em></button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/shutdown"><button class="icon-action" title="Мягко выключить"><span>⏻</span><em>Shutdown</em></button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/destroy"><button class="icon-action danger" title="Принудительно выключить"><span>⚡</span><em>Power</em></button></form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/start"><button class="icon-action success" title="Запустить"><span>▶</span><em>Start</em></button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/delete" onsubmit="return confirm('Удалить VM {{ vm.name }} вместе с дисками?');"><button class="icon-action danger" title="Удалить VM"><span>🗑</span><em>Delete</em></button></form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" class="muted">Виртуальных машин пока нет</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="grid three dashboard-service-grid">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Сервисы</h2>
|
||||
<span class="pill">systemd</span>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for name, state in services.items() %}
|
||||
<div class="service-row">
|
||||
<span>{{ name }}</span>
|
||||
<span class="status {{ 'ok' if state == 'active' else 'warn' }}">{{ state }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Storage pools</h2>
|
||||
<span class="pill">libvirt</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>State</th><th>Autostart</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for pool in pools %}
|
||||
<tr>
|
||||
<td>{{ pool.name }}</td>
|
||||
<td><span class="status {{ 'ok' if pool.state == 'active' else 'warn' }}">{{ pool.state }}</span></td>
|
||||
<td>{{ pool.autostart }}</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="3" class="muted">Storage pools не найдены</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Последние операции</h2>
|
||||
<a class="link-pill" href="/operations">Все операции</a>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for operation in operations %}
|
||||
<a class="service-row service-link" href="/operations/{{ operation.id }}">
|
||||
<span>
|
||||
<strong>{{ operation.title }}</strong>
|
||||
<small>{{ operation.created_at }} · {{ operation.message }}</small>
|
||||
</span>
|
||||
<span class="status {{ operation_css(operation.status) }}">{{ operation.status }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="muted">Операций пока нет.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Интерфейсы</h2>
|
||||
<span class="pill">ip -br a</span>
|
||||
</div>
|
||||
<pre>{{ network.interfaces }}</pre>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Маршруты</h2>
|
||||
<span class="pill">ip route</span>
|
||||
</div>
|
||||
<pre>{{ network.routes }}</pre>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="eyebrow">{{ icon('server', 'icon-sm') }} {{ system.hostname }} · {{ system.ip }}</div>
|
||||
<h1>{{ greeting }}, {{ user }}</h1>
|
||||
<p class="lead">
|
||||
{% if vms %}Работает <strong data-live-count="running">{{ running }}</strong> из {{ vms|length }} {{ plural(vms|length, 'машины', 'машин', 'машин') }}.{% else %}Сервер готов к работе — осталось создать первую виртуальную машину.{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="page-actions">
|
||||
<a class="btn btn-primary" href="/vm/create">{{ icon('plus') }}Создать машину</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block alerts %}
|
||||
{% set notice = update_notice() %}
|
||||
{% if notice.has_update %}
|
||||
<div class="alert brand">{{ icon('sparkles') }}<div><strong>Доступна новая версия {{ notice.latest_version }}</strong>Обновление займёт пару минут, машины продолжат работать.</div><a class="btn btn-sm btn-primary alert-action" href="/update">Посмотреть</a></div>
|
||||
{% endif %}
|
||||
{% if profile.virtualization_warning %}
|
||||
{{ alert('warning', 'Машины будут работать медленно. Включите аппаратную виртуализацию (Intel VT-x / AMD-V) в настройках BIOS сервера.', 'Аппаратное ускорение недоступно') }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="grid grid-4">
|
||||
<article class="card stat">
|
||||
<div class="stat-head">Машины<span class="stat-icon">{{ icon('monitor', 'icon-sm') }}</span></div>
|
||||
<div class="stat-value"><span data-live-count="running">{{ running }}</span><small>/ {{ vms|length }} работают</small></div>
|
||||
{{ meter(((running / vms|length * 100) if vms else 0)|round|int, 'brand') }}
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="stat-head">Процессор<span class="stat-icon">{{ icon('cpu', 'icon-sm') }}</span></div>
|
||||
<div class="stat-value">{{ host.cpu_pct }}<small>%</small></div>
|
||||
{{ meter(host.cpu_pct) }}
|
||||
<div class="stat-foot">{{ host.cpu_count }} {{ plural(host.cpu_count, 'ядро', 'ядра', 'ядер') }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="stat-head">Память<span class="stat-icon">{{ icon('memory-stick', 'icon-sm') }}</span></div>
|
||||
<div class="stat-value">{{ host.mem_used }}<small>из {{ host.mem_total }}</small></div>
|
||||
{{ meter(host.mem_pct) }}
|
||||
<div class="stat-foot">Занято {{ host.mem_pct }}%</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="stat-head">Хранилище<span class="stat-icon">{{ icon('hard-drive', 'icon-sm') }}</span></div>
|
||||
<div class="stat-value">{{ host.disk_free }}<small>свободно</small></div>
|
||||
{{ meter(host.disk_pct) }}
|
||||
<div class="stat-foot">Всего {{ host.disk_total }}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{% if vms %}
|
||||
<section class="card mt-3">
|
||||
<div class="card-header">
|
||||
<div><h2>Виртуальные машины</h2><p>Нажмите на машину, чтобы открыть её настройки</p></div>
|
||||
<a class="btn btn-sm" href="/vm/create">{{ icon('plus', 'icon-sm') }}Новая</a>
|
||||
</div>
|
||||
<div class="vm-list">
|
||||
{% for vm in vms %}
|
||||
{% set s = vm.state|vm_state %}
|
||||
<div class="vm-row" data-live-vm="{{ vm.name }}" data-running="{{ '1' if s.running else '0' }}" data-reload-on-change>
|
||||
<a class="vm-ident" href="/vm/{{ vm.name }}">
|
||||
<span class="vm-avatar {{ 'on' if s.running else '' }}">{{ icon('monitor') }}<span class="status-dot {{ s.tone }}" data-live="dot"></span></span>
|
||||
<span style="min-width:0">
|
||||
<span class="vm-name truncate" style="display:block">{{ vm.name }}</span>
|
||||
<span class="vm-sub"><span data-live="ip">{{ vm.ip if vm.ip and vm.ip != '—' else ('IP появится после запуска' if not s.running else 'Получает адрес…') }}</span></span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="vm-col">
|
||||
<div class="vm-cell-label">Ресурсы</div>
|
||||
<div class="vm-cell-value">{{ vm.vcpus or '—' }} {{ plural(vm.vcpus or 0, 'ядро', 'ядра', 'ядер') }} · {{ vm.memory_mb|format_mb }}</div>
|
||||
</div>
|
||||
<div class="vm-col">{{ vm_badge(vm.state) }}</div>
|
||||
<div class="vm-actions">
|
||||
{% if s.running %}
|
||||
<a class="btn btn-sm" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">{{ icon('monitor', 'icon-sm') }}<span class="btn-label">Экран</span></a>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/start" class="inline-form" data-toast="Машина {{ vm.name }} запускается"><button class="btn btn-sm">{{ icon('play', 'icon-sm') }}<span class="btn-label">Запустить</span></button></form>
|
||||
{% endif %}
|
||||
<details class="menu">
|
||||
<summary class="btn btn-sm btn-icon btn-ghost" aria-label="Действия">{{ icon('ellipsis') }}</summary>
|
||||
<div class="menu-list">
|
||||
<a class="menu-item" href="/vm/{{ vm.name }}">{{ icon('settings') }}Открыть настройки</a>
|
||||
{% if s.running %}
|
||||
<a class="menu-item" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">{{ icon('monitor') }}Открыть экран</a>
|
||||
<form method="post" action="/vm/{{ vm.name }}/reboot" data-toast="Машина {{ vm.name }} перезагружается"><button class="menu-item">{{ icon('rotate-cw') }}Перезагрузить</button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/shutdown" data-toast="Машина {{ vm.name }} выключается"><button class="menu-item">{{ icon('power') }}Выключить</button></form>
|
||||
<div class="menu-sep"></div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/destroy" data-confirm="Машина будет выключена сразу, как при отключении питания. Несохранённые данные внутри неё пропадут." data-confirm-title="Выключить {{ vm.name }} принудительно?" data-confirm-button="Выключить" data-toast="Машина {{ vm.name }} выключена" data-toast-tone="warning"><button class="menu-item danger">{{ icon('zap') }}Выключить принудительно</button></form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/start" data-toast="Машина {{ vm.name }} запускается"><button class="menu-item">{{ icon('play') }}Запустить</button></form>
|
||||
<div class="menu-sep"></div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/delete" data-confirm="Машина и все её диски будут удалены без возможности восстановления." data-confirm-title="Удалить {{ vm.name }}?" data-confirm-button="Удалить навсегда" data-toast="Машина {{ vm.name }} удалена" data-toast-tone="warning"><button class="menu-item danger">{{ icon('trash-2') }}Удалить машину</button></form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
<section class="card hero-card mt-3">
|
||||
<div class="row-between" style="align-items:flex-start">
|
||||
<div>
|
||||
<span class="badge brand" style="background:rgba(255,255,255,.12);color:#fff">{{ icon('sparkles', 'icon-sm') }}Начало работы</span>
|
||||
<h2 class="mt-2">Создайте первую виртуальную машину</h2>
|
||||
<p>Три шага: загрузите установочный образ системы, создайте машину и установите систему прямо в браузере.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-3 mt-3">
|
||||
<a class="card card-link" href="/iso" style="background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff">
|
||||
<div class="card-body"><span class="list-icon" style="background:rgba(255,255,255,.12);color:#fff">{{ icon('disc-3') }}</span><h3 class="mt-2" style="color:#fff">1. Загрузите образ</h3><p class="small" style="color:rgba(255,255,255,.7)">Ubuntu, Debian, Windows — файл .iso</p></div>
|
||||
</a>
|
||||
<a class="card card-link" href="/vm/create" style="background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff">
|
||||
<div class="card-body"><span class="list-icon" style="background:rgba(255,255,255,.12);color:#fff">{{ icon('plus') }}</span><h3 class="mt-2" style="color:#fff">2. Создайте машину</h3><p class="small" style="color:rgba(255,255,255,.7)">Выберите готовую конфигурацию</p></div>
|
||||
</a>
|
||||
<div class="card" style="background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff">
|
||||
<div class="card-body"><span class="list-icon" style="background:rgba(255,255,255,.12);color:#fff">{{ icon('monitor') }}</span><h3 class="mt-2" style="color:#fff">3. Откройте экран</h3><p class="small" style="color:rgba(255,255,255,.7)">Установите систему прямо в браузере</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid grid-2 mt-3">
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Последние задачи</h2><p>Создание машин, загрузка и конвертация образов</p></div><a class="btn btn-sm btn-ghost" href="/operations">Все{{ icon('chevron-right', 'icon-sm') }}</a></div>
|
||||
<div class="list">
|
||||
{% for op in operations %}
|
||||
{% set os = op.status|operation_state %}
|
||||
<a class="list-item" href="/operations/{{ op.id }}">
|
||||
<span class="list-icon {{ os.tone }}">{{ icon('circle-check' if op.status == 'success' else 'circle-x' if op.status == 'error' else 'clock') }}</span>
|
||||
<div class="grow"><div class="title truncate">{{ op.title }}</div><div class="meta truncate">{{ op.created_at }} · {{ op.message }}</div></div>
|
||||
{{ op_badge(op.status) }}
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="empty" style="padding:32px 20px"><p class="subtle">Задач пока не было. Здесь появится прогресс создания машин и загрузки образов.</p></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>Состояние сервера</h2><p>Службы, от которых зависит работа машин</p></div>
|
||||
{% if services_ok %}{{ badge('Всё в порядке', 'success') }}{% else %}{{ badge('Требует внимания', 'danger') }}{% endif %}
|
||||
</div>
|
||||
<div class="checklist">
|
||||
{% for svc in service_rows %}
|
||||
<div class="check-item {{ svc.tone }}">
|
||||
{{ icon('circle-check' if svc.tone == 'success' else 'triangle-alert' if svc.tone == 'warning' else 'circle-dot' if svc.tone == 'neutral' else 'circle-x') }}
|
||||
<div class="row-between" style="flex:1"><strong>{{ svc.name }}</strong><span>{{ svc.label }}</span></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,329 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Диски — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, uploader, empty %}
|
||||
{% set page_title = 'Готовые системы' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Диски</div>
|
||||
<div class="v-subtitle">Готовые образы установленных систем: .img / .raw / .qcow2 / .img.xz, а также архивы .zip / .tar.gz / .tgz</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
{% block page_header %}{% include "_images_header.html" %}{% endblock %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Загрузить образ установленной системы</h2>
|
||||
<span class="pill">.img .raw .qcow2 .img.xz .zip .tar.gz</span>
|
||||
{% block content %}
|
||||
<section class="grid grid-main">
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Готовые системы</h2><p>Образы уже установленных систем — машина запускается сразу, без установки</p></div></div>
|
||||
{% if images %}
|
||||
<div class="list">
|
||||
{% for image in images %}
|
||||
<div class="list-item">
|
||||
<span class="list-icon brand">{{ icon('hard-drive') }}</span>
|
||||
<div class="grow"><div class="title truncate">{{ image.name }}</div><div class="meta">{{ image.size|replace('GB', 'ГБ') }} · формат {{ image.format }} · {{ image.updated }}</div></div>
|
||||
<a class="btn btn-sm hide-sm" href="/vm/create?image={{ image.name|urlencode }}">Создать машину</a>
|
||||
<form method="post" action="/disk-images/{{ image.name }}/delete" class="inline-form" data-confirm="Файл {{ image.name }} будет удалён с сервера. Машины, созданные из него, продолжат работать." data-confirm-title="Удалить образ?" data-confirm-button="Удалить" data-toast="Образ удалён" data-toast-tone="warning">
|
||||
<button class="btn btn-sm btn-icon btn-ghost" aria-label="Удалить">{{ icon('trash-2', 'icon-sm') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="disk-upload-form" method="post" action="/disk-images/upload" enctype="multipart/form-data" class="form-grid">
|
||||
<label class="upload-box">
|
||||
<span>Выбери файл готового диска или архив с диском</span>
|
||||
<input id="disk-file-input" type="file" name="image_file" accept=".img,.raw,.qcow2,.img.xz,.zip,.tar.gz,.tgz" required>
|
||||
</label>
|
||||
<div id="disk-file-hint" class="muted small-note">Файл ещё не выбран. Разрешены .img, .raw, .qcow2, .img.xz, .zip, .tar.gz и .tgz.</div>
|
||||
<div id="disk-file-error" class="alert danger" hidden></div>
|
||||
<div id="upload-progress-wrap" class="upload-progress-wrap" hidden>
|
||||
<div class="upload-progress-head">
|
||||
<strong id="upload-status">Подготовка…</strong>
|
||||
<span id="upload-percent">0%</span>
|
||||
</div>
|
||||
<div class="progress big"><span id="upload-progress-bar"></span></div>
|
||||
<div class="upload-progress-meta">
|
||||
<span id="upload-loaded">0 MB</span>
|
||||
<span id="upload-speed">скорость считается…</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="disk-upload-button" type="submit" class="primary wide">Загрузить образ диска</button>
|
||||
</form>
|
||||
<p class="muted small-note">Архив или .img.xz будет распакован автоматически. Virtuality найдёт внутри .img/.raw/.qcow2 или распакует .img.xz и положит результат в <b>/var/lib/virtuality/disk-images</b>. После загрузки .img/.raw/.img.xz запускается конвертация в qcow2. Установочные .iso загружаются отдельно в разделе <b>ISO</b>.</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ empty('hard-drive', 'Готовых образов пока нет', 'Подойдут облачные образы Ubuntu и Debian, образы для Raspberry Pi, диски других систем виртуализации.') }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Как использовать</h2>
|
||||
<span class="pill">import disk</span>
|
||||
</div>
|
||||
<div class="quick-actions">
|
||||
<div class="big-action static">
|
||||
<strong>Raspberry / Orange Pi images</strong>
|
||||
<span>Загрузи .img, .img.xz или архив с .img, дождись распаковки/конвертации, затем в “Создать VM” выбери режим “Готовый диск”.</span>
|
||||
</div>
|
||||
<div class="big-action static">
|
||||
<strong>Архивы безопасно распаковываются</strong>
|
||||
<span>Поддерживаются .zip, .tar.gz, .tgz и .img.xz. Из обычных архивов берём только .img/.raw/.qcow2.</span>
|
||||
</div>
|
||||
</div>
|
||||
<pre>qemu-img convert -p -f raw -O qcow2 source.img source.qcow2</pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Локальные образы дисков</h2>
|
||||
<span class="pill">{{ images|length }} файлов</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Файл</th><th>Тип</th><th>Размер</th><th>Обновлён</th><th>Действия</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for image in images %}
|
||||
<tr>
|
||||
<td class="strong">{{ image.name }}</td>
|
||||
<td><span class="status ok">{{ image.format }}</span></td>
|
||||
<td>{{ image.size }}</td>
|
||||
<td>{{ image.updated }}</td>
|
||||
<td class="actions">
|
||||
<a class="link-pill" href="/vm/create">Создать VM</a>
|
||||
<form method="post" action="/disk-images/{{ image.name }}/delete" onsubmit="return confirm('Удалить образ {{ image.name }}?');">
|
||||
<button class="danger">Удалить</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="5" class="muted">Образов пока нет. Загрузи .img, .raw, .qcow2, .img.xz или архив .zip/.tar.gz/.tgz.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('disk-upload-form');
|
||||
const fileInput = document.getElementById('disk-file-input');
|
||||
const button = document.getElementById('disk-upload-button');
|
||||
const hint = document.getElementById('disk-file-hint');
|
||||
const errorBox = document.getElementById('disk-file-error');
|
||||
const box = document.getElementById('upload-progress-wrap');
|
||||
const bar = document.getElementById('upload-progress-bar');
|
||||
const percent = document.getElementById('upload-percent');
|
||||
const statusLine = document.getElementById('upload-status');
|
||||
const loadedLine = document.getElementById('upload-loaded');
|
||||
const speedLine = document.getElementById('upload-speed');
|
||||
const allowedExtensions = ['.img', '.raw', '.qcow2', '.img.xz', '.zip', '.tar.gz', '.tgz'];
|
||||
let activeXhr = null;
|
||||
let uploadActive = false;
|
||||
|
||||
function bytesText(bytes) {
|
||||
if (!bytes) return '0 MB';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let value = bytes;
|
||||
let i = 0;
|
||||
while (value >= 1024 && i < units.length - 1) { value /= 1024; i++; }
|
||||
return value.toFixed(value >= 10 || i === 0 ? 0 : 1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
function validDiskFile(file) {
|
||||
if (!file || !file.name) return false;
|
||||
const lower = file.name.toLowerCase();
|
||||
return allowedExtensions.some(ext => lower.endsWith(ext));
|
||||
}
|
||||
|
||||
function setFileError(message) {
|
||||
if (!errorBox) return;
|
||||
errorBox.textContent = message || '';
|
||||
errorBox.hidden = !message;
|
||||
}
|
||||
|
||||
function setUploadMode(active) {
|
||||
uploadActive = active;
|
||||
window.VirtualityUploadActive = active;
|
||||
document.body.classList.toggle('upload-active', active);
|
||||
if (active) {
|
||||
button.disabled = false;
|
||||
button.type = 'button';
|
||||
button.textContent = 'Отменить загрузку';
|
||||
button.classList.remove('primary');
|
||||
button.classList.add('danger');
|
||||
fileInput.disabled = true;
|
||||
} else {
|
||||
activeXhr = null;
|
||||
button.type = 'submit';
|
||||
button.textContent = 'Загрузить образ диска';
|
||||
button.classList.add('primary');
|
||||
button.classList.remove('danger');
|
||||
fileInput.disabled = false;
|
||||
button.disabled = !validDiskFile(fileInput.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
function resetProgress(title, detail) {
|
||||
bar.style.width = '0%';
|
||||
percent.textContent = '0%';
|
||||
statusLine.textContent = title;
|
||||
loadedLine.textContent = detail || '0%';
|
||||
speedLine.textContent = 'ожидание…';
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', function (event) {
|
||||
if (!uploadActive) return;
|
||||
event.preventDefault();
|
||||
event.returnValue = 'Идёт загрузка образа. Если уйти со страницы, загрузка будет прервана.';
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!uploadActive) return;
|
||||
const navTarget = event.target.closest('a, form button[type="submit"], form button:not([type])');
|
||||
if (!navTarget || navTarget === button) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
statusLine.textContent = 'Сначала заверши или отмени текущую загрузку.';
|
||||
}, true);
|
||||
|
||||
async function pollConvert(operationId) {
|
||||
fileInput.disabled = true;
|
||||
button.disabled = true;
|
||||
button.textContent = 'Идёт конвертация…';
|
||||
button.classList.remove('danger');
|
||||
button.classList.add('primary');
|
||||
resetProgress('Конвертация образа в qcow2…', '0%');
|
||||
while (true) {
|
||||
const response = await fetch('/api/operations/' + operationId, {cache: 'no-store'});
|
||||
const payload = await response.json();
|
||||
if (!payload.ok) throw new Error(payload.error || 'operation error');
|
||||
const op = payload.operation;
|
||||
const progress = Math.max(0, Math.min(100, Number(op.progress || 0)));
|
||||
bar.style.width = progress + '%';
|
||||
percent.textContent = progress + '%';
|
||||
loadedLine.textContent = 'Конвертация: ' + progress + '%';
|
||||
speedLine.textContent = op.status;
|
||||
statusLine.textContent = op.message || 'Конвертация образа…';
|
||||
if (op.status === 'success') {
|
||||
bar.style.width = '100%';
|
||||
percent.textContent = '100%';
|
||||
statusLine.textContent = 'Конвертация завершена. Обновляем список образов…';
|
||||
setUploadMode(false);
|
||||
setTimeout(() => { window.location.href = '/disk-images'; }, 650);
|
||||
return;
|
||||
}
|
||||
if (op.status === 'error') {
|
||||
statusLine.textContent = 'Ошибка конвертации: ' + (op.message || 'см. журнал операций');
|
||||
setUploadMode(false);
|
||||
return;
|
||||
}
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
}
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', function () {
|
||||
const file = fileInput.files[0];
|
||||
setFileError('');
|
||||
if (!file) {
|
||||
hint.textContent = 'Файл ещё не выбран. Разрешены .img, .raw, .qcow2, .img.xz, .zip, .tar.gz и .tgz.';
|
||||
button.disabled = false;
|
||||
return;
|
||||
}
|
||||
if (!validDiskFile(file)) {
|
||||
const message = 'Неверное расширение: ' + file.name + '. Разрешены только .img, .raw, .qcow2, .img.xz, .zip, .tar.gz и .tgz.';
|
||||
hint.textContent = message;
|
||||
setFileError(message);
|
||||
fileInput.value = '';
|
||||
button.disabled = true;
|
||||
return;
|
||||
}
|
||||
button.disabled = false;
|
||||
hint.textContent = file.name + ' · ' + bytesText(file.size);
|
||||
});
|
||||
|
||||
button.addEventListener('click', function () {
|
||||
if (!uploadActive) return;
|
||||
if (activeXhr) activeXhr.abort();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (uploadActive) return;
|
||||
const file = fileInput.files[0];
|
||||
setFileError('');
|
||||
if (!validDiskFile(file)) {
|
||||
const message = 'Выбери образ установленной системы или архив: .img, .raw, .qcow2, .img.xz, .zip, .tar.gz или .tgz.';
|
||||
hint.textContent = message;
|
||||
setFileError(message);
|
||||
return;
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
activeXhr = xhr;
|
||||
const data = new FormData(form);
|
||||
const started = Date.now();
|
||||
|
||||
box.hidden = false;
|
||||
setUploadMode(true);
|
||||
resetProgress('Передача файла на сервер…', '0 MB из ' + bytesText(file.size));
|
||||
|
||||
xhr.upload.onprogress = function (event) {
|
||||
if (!event.lengthComputable) {
|
||||
statusLine.textContent = 'Загрузка идёт…';
|
||||
return;
|
||||
}
|
||||
const pct = Math.round((event.loaded / event.total) * 100);
|
||||
const seconds = Math.max(1, (Date.now() - started) / 1000);
|
||||
const speed = event.loaded / seconds;
|
||||
bar.style.width = pct + '%';
|
||||
percent.textContent = pct + '%';
|
||||
loadedLine.textContent = bytesText(event.loaded) + ' из ' + bytesText(event.total);
|
||||
speedLine.textContent = bytesText(speed) + '/s';
|
||||
if (pct >= 100) statusLine.textContent = 'Файл передан. Сервер сохраняет и при необходимости распаковывает архив…';
|
||||
};
|
||||
|
||||
xhr.onload = async function () {
|
||||
if (xhr.status >= 200 && xhr.status < 400) {
|
||||
let payload = null;
|
||||
try { payload = JSON.parse(xhr.responseText); } catch (error) {}
|
||||
if (payload && payload.mode === 'converting' && payload.operation_id) {
|
||||
await pollConvert(payload.operation_id);
|
||||
return;
|
||||
}
|
||||
bar.style.width = '100%';
|
||||
percent.textContent = '100%';
|
||||
statusLine.textContent = 'Готово. Обновляем список образов…';
|
||||
setUploadMode(false);
|
||||
window.location.href = '/disk-images';
|
||||
} else {
|
||||
statusLine.textContent = 'Ошибка загрузки: HTTP ' + xhr.status;
|
||||
setUploadMode(false);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onabort = function () {
|
||||
statusLine.textContent = 'Загрузка отменена пользователем.';
|
||||
bar.style.width = '0%';
|
||||
percent.textContent = '0%';
|
||||
loadedLine.textContent = '0 MB';
|
||||
speedLine.textContent = 'отменено';
|
||||
setUploadMode(false);
|
||||
};
|
||||
|
||||
xhr.onerror = function () {
|
||||
statusLine.textContent = 'Ошибка сети во время загрузки.';
|
||||
setUploadMode(false);
|
||||
};
|
||||
|
||||
xhr.open('POST', form.action);
|
||||
xhr.setRequestHeader('Accept', 'application/json');
|
||||
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
||||
xhr.send(data);
|
||||
});
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<aside class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Загрузить образ</h2></div>
|
||||
<div class="card-body">
|
||||
{{ uploader('/disk-images/upload', 'image_file', '.qcow2,.img,.raw,.img.xz,.zip,.tar.gz,.tgz', 'Перетащите файл образа сюда', '.qcow2, .img, .raw, а также архивы .img.xz, .zip, .tar.gz', '/disk-images', 'Загрузить') }}
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="card-body stack-sm">
|
||||
<div class="row">{{ icon('sparkles') }}<h3>Всё делается автоматически</h3></div>
|
||||
<p class="muted small">Архивы распаковываются, а образы .img и .raw конвертируются в быстрый формат qcow2. Прогресс виден прямо здесь и в разделе «Задачи».</p>
|
||||
</div>
|
||||
</article>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon %}
|
||||
{% set page_title = 'Помощь' %}
|
||||
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Помощь</h1>
|
||||
<p class="lead">Короткие инструкции для частых задач. Командная строка не понадобится.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="grid grid-2">
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('plus') }}</span><h3>Как создать машину</h3></div>
|
||||
<ol>
|
||||
<li>Скачайте установочный образ системы (.iso) на сайте разработчика — например, Ubuntu Server.</li>
|
||||
<li>Откройте <a href="/iso">Образы ОС</a> и перетащите файл в окно загрузки.</li>
|
||||
<li>Нажмите <a href="/vm/create">Создать машину</a>, выберите образ и конфигурацию.</li>
|
||||
<li>Когда задача завершится, нажмите «Открыть экран» и установите систему как на обычный компьютер.</li>
|
||||
</ol>
|
||||
</div></article>
|
||||
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('globe') }}</span><h3>Как открыть сайт или SSH из интернета</h3></div>
|
||||
<ol>
|
||||
<li>Откройте <a href="/network">Сеть и доступ</a>.</li>
|
||||
<li>В блоке «Открыть доступ» выберите машину и сервис, например «Сайт (HTTPS)».</li>
|
||||
<li>Нажмите «Открыть доступ». Теперь адрес <code>{{ host_ip }}:порт</code> ведёт в машину.</li>
|
||||
<li>Если не открывается — нажмите «Проверить» рядом с правилом: панель подскажет, в чём проблема.</li>
|
||||
</ol>
|
||||
</div></article>
|
||||
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('monitor') }}</span><h3>Экран машины</h3></div>
|
||||
<ul>
|
||||
<li>Экран открывается в новой вкладке браузера — это как монитор, подключённый к машине.</li>
|
||||
<li>Если курсор «застрял» внутри экрана, нажмите <code>Ctrl + Alt</code>.</li>
|
||||
<li>После установки системы извлеките установочный диск на странице машины → «Диски и загрузка».</li>
|
||||
</ul>
|
||||
</div></article>
|
||||
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('power') }}</span><h3>Выключение и автозапуск</h3></div>
|
||||
<ul>
|
||||
<li><b>Выключить</b> — аккуратно завершает работу системы, как кнопка питания.</li>
|
||||
<li><b>Выключить принудительно</b> — мгновенно, как выдернуть шнур. Используйте, только если машина зависла.</li>
|
||||
<li><b>Автозапуск</b> — машина сама включится после перезагрузки сервера.</li>
|
||||
</ul>
|
||||
</div></article>
|
||||
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('cpu') }}</span><h3>Сколько ресурсов выделять</h3></div>
|
||||
<ul>
|
||||
<li><b>Мини</b> (1 ядро, 1 ГБ) — VPN, роутер, небольшие сервисы.</li>
|
||||
<li><b>Стандарт</b> (2 ядра, 4 ГБ) — сайт, база данных, Linux-сервер.</li>
|
||||
<li><b>Мощная</b> (4 ядра, 8 ГБ) — Windows, 1С, игровые серверы.</li>
|
||||
<li>Процессор и память можно поменять позже, когда машина выключена.</li>
|
||||
</ul>
|
||||
</div></article>
|
||||
|
||||
<article class="card help-card"><div class="card-body">
|
||||
<div class="row"><span class="list-icon brand">{{ icon('wrench') }}</span><h3>Если что-то не работает</h3></div>
|
||||
<ul>
|
||||
<li>Проверьте раздел <a href="/host">Сервер</a> — там видно, чего не хватает.</li>
|
||||
<li>Посмотрите <a href="/operations">Задачи</a> — у каждой есть подробный журнал.</li>
|
||||
<li>Полная диагностика в терминале сервера: <code>sudo vhealth</code>.</li>
|
||||
<li>Расширенное управление доступно в Cockpit: <a href="https://{{ host_ip }}:9090" target="_blank" rel="noopener">https://{{ host_ip }}:9090</a>.</li>
|
||||
</ul>
|
||||
</div></article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
@@ -1,96 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Профиль хоста — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, alert %}
|
||||
{% set page_title = 'Сервер' %}
|
||||
{% set problems = profile.checks|selectattr('level', 'ne', 'ok')|list %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Профиль хоста</div>
|
||||
<div class="v-subtitle">Автоматически выбранная сборка Virtuality</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if profile.virtualization_warning %}
|
||||
<div class="notice">{{ profile.virtualization_warning }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid stats">
|
||||
<article class="card stat">
|
||||
<div class="label">Profile</div>
|
||||
<div class="value small">{{ profile.label }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Arch</div>
|
||||
<div class="value small">{{ profile.arch }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Virtualization</div>
|
||||
<div class="value small">{{ profile.virtualization_mode|default('unknown') }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Default network</div>
|
||||
<div class="value small">{{ profile.recommended_network }}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Модель устройства</h2>
|
||||
<span class="pill">auto-detected</span>
|
||||
</div>
|
||||
<div class="meta-grid">
|
||||
<div><span>Model</span><strong>{{ profile.model }}</strong></div>
|
||||
<div><span>VM mode</span><strong>{{ profile.recommended_vm_mode }}</strong></div>
|
||||
<div><span>Ready</span><strong>{{ 'yes' if profile.ready else 'needs check' }}</strong></div>
|
||||
</div>
|
||||
<div class="notice top-space">
|
||||
На физическом сервере для нормальной скорости нужен KVM: включи Intel VT-x / AMD-V в BIOS/UEFI. Если KVM недоступен, Virtuality может использовать QEMU fallback, но VM будут работать медленно.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Проверки</h2>
|
||||
<form method="post" action="/host/refresh"><button>Переопределить профиль</button></form>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for check in profile.checks %}
|
||||
{% set level = check.level|default('ok' if check.ok else 'err') %}
|
||||
<div class="service-row">
|
||||
<span>
|
||||
<strong>{{ check.name }}</strong>
|
||||
<small>{{ check.hint }}</small>
|
||||
</span>
|
||||
<span class="status {{ 'ok' if level == 'ok' else 'warn' if level == 'warn' else 'err' }}">{{ 'OK' if level == 'ok' else 'WARN' if level == 'warn' else 'FAIL' }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Raw profile</h2>
|
||||
<span class="pill">/var/lib/virtuality/config/host_profile.json</span>
|
||||
</div>
|
||||
<pre>{{ profile_json }}</pre>
|
||||
</section>
|
||||
</main>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Сервер</h1>
|
||||
<p class="lead">Оборудование и готовность сервера к работе с виртуальными машинами.</p>
|
||||
</div>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="page-actions">
|
||||
<form method="post" action="/host/refresh" data-toast="Проверка выполнена"><button class="btn">{{ icon('refresh-cw', 'icon-sm') }}Проверить заново</button></form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="grid grid-main">
|
||||
<div class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>Готовность</h2><p>{{ 'Всё готово для запуска машин' if not problems else 'Есть замечания — ниже написано, что сделать' }}</p></div>
|
||||
{% if profile.ready and not problems %}{{ badge('Готов', 'success') }}{% elif profile.ready %}{{ badge('Работает с замечаниями', 'warning') }}{% else %}{{ badge('Не готов', 'danger') }}{% endif %}
|
||||
</div>
|
||||
<div class="checklist">
|
||||
{% for check in profile.checks %}
|
||||
{% set level = check.level|default('ok' if check.ok else 'err') %}
|
||||
{% set tone = 'success' if level == 'ok' else 'warning' if level == 'warn' else 'danger' %}
|
||||
<div class="check-item {{ tone }}">
|
||||
{{ icon('circle-check' if tone == 'success' else 'triangle-alert' if tone == 'warning' else 'circle-x') }}
|
||||
<div><strong>{{ check.name }}</strong>{% if tone != 'success' %}<span>{{ check.hint }}</span>{% endif %}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</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">
|
||||
<div class="summary-row"><span>Тип</span><strong>{{ profile.label }}</strong></div>
|
||||
<div class="summary-row"><span>Модель</span><strong>{{ profile.model }}</strong></div>
|
||||
<div class="summary-row"><span>Архитектура</span><strong>{{ profile.arch }}</strong></div>
|
||||
<div class="summary-row"><span>Ускорение</span><strong>{{ 'KVM (аппаратное)' if profile.virtualization_mode == 'kvm' else 'Эмуляция (медленно)' }}</strong></div>
|
||||
<div class="summary-row"><span>Сеть по умолчанию</span><strong>{{ 'Локальная сеть' if profile.recommended_network == 'bridge' else 'Автоматически (NAT)' }}</strong></div>
|
||||
</div>
|
||||
</article>
|
||||
<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:360px">{{ profile_json }}</pre></div>
|
||||
</details>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
+47
-268
@@ -1,272 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ISO — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, uploader, empty %}
|
||||
{% set page_title = 'Образы ОС' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">ISO</div>
|
||||
<div class="v-subtitle">Установочные образы только .iso в /var/lib/virtuality/iso</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
{% block page_header %}{% include "_images_header.html" %}{% endblock %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Загрузить установочный ISO</h2>
|
||||
<span class="pill">только .iso</span>
|
||||
{% block content %}
|
||||
<section class="grid grid-main">
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>Установочные образы</h2><p>Файлы .iso для установки системы с нуля</p></div>
|
||||
<form method="post" action="/iso/refresh" class="inline-form" data-toast="Список образов обновлён"><button class="btn btn-sm btn-ghost">{{ icon('refresh-cw', 'icon-sm') }}Обновить</button></form>
|
||||
</div>
|
||||
{% if isos %}
|
||||
<div class="list">
|
||||
{% for iso in isos %}
|
||||
<div class="list-item">
|
||||
<span class="list-icon brand">{{ icon('disc-3') }}</span>
|
||||
<div class="grow"><div class="title truncate">{{ iso.name }}</div><div class="meta">{{ iso.size|replace('MB', 'МБ') }} · загружен {{ iso.updated }}</div></div>
|
||||
<a class="btn btn-sm hide-sm" href="/vm/create?iso={{ iso.name|urlencode }}">Создать машину</a>
|
||||
<form method="post" action="/iso/{{ iso.name }}/delete" class="inline-form" data-confirm="Файл {{ iso.name }} будет удалён с сервера. Уже созданные машины продолжат работать." data-confirm-title="Удалить образ?" data-confirm-button="Удалить" data-toast="Образ удалён" data-toast-tone="warning">
|
||||
<button class="btn btn-sm btn-icon btn-ghost" aria-label="Удалить">{{ icon('trash-2', 'icon-sm') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="iso-upload-form" method="post" action="/iso/upload" enctype="multipart/form-data" class="form-grid">
|
||||
<label class="upload-box">
|
||||
<span>Выбери ISO-файл установочного диска</span>
|
||||
<input id="iso-file-input" type="file" name="iso_file" accept=".iso" required>
|
||||
</label>
|
||||
<div id="iso-file-hint" class="muted small-note">Файл ещё не выбран. В этом разделе разрешены только установочные образы .iso.</div>
|
||||
<div id="iso-file-error" class="alert danger" hidden></div>
|
||||
<div id="upload-progress-wrap" class="upload-progress-wrap" hidden>
|
||||
<div class="upload-progress-head">
|
||||
<strong id="upload-status">Подготовка…</strong>
|
||||
<span id="upload-percent">0%</span>
|
||||
</div>
|
||||
<div class="progress big"><span id="upload-progress-bar"></span></div>
|
||||
<div class="upload-progress-meta">
|
||||
<span id="upload-loaded">0 MB</span>
|
||||
<span id="upload-speed">скорость считается…</span>
|
||||
</div>
|
||||
</div>
|
||||
<button id="iso-upload-button" type="submit" class="primary wide">Загрузить ISO</button>
|
||||
</form>
|
||||
<p class="muted small-note">Файл попадёт в <b>/var/lib/virtuality/iso</b>. Для готовых системных дисков используй раздел <b>Диски</b>: .img / .raw / .qcow2.</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ empty('disc-3', 'Образов пока нет', 'Скачайте установочный образ нужной системы на сайте разработчика и загрузите его сюда.') }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Действия</h2>
|
||||
<span class="pill">pool</span>
|
||||
</div>
|
||||
<div class="actions big-actions">
|
||||
<form method="post" action="/iso/refresh"><button>Обновить ISO pool</button></form>
|
||||
<a class="link-pill accent" href="/vm/create">Создать VM</a>
|
||||
</div>
|
||||
<pre>sudo virsh pool-refresh virtuality-iso
|
||||
ls -lh /var/lib/virtuality/iso</pre>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>ISO-образы</h2>
|
||||
<span class="pill">{{ isos|length }} файлов</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Файл</th><th>Размер</th><th>Обновлён</th><th>Действия</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for iso in isos %}
|
||||
<tr>
|
||||
<td class="strong">{{ iso.name }}</td>
|
||||
<td>{{ iso.size }}</td>
|
||||
<td>{{ iso.updated }}</td>
|
||||
<td class="actions">
|
||||
<form method="post" action="/iso/{{ iso.name }}/delete" onsubmit="return confirm('Удалить ISO {{ iso.name }}?');">
|
||||
<button class="danger">Удалить</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="4" class="muted">ISO пока нет. Загрузи первый установочный .iso через форму выше.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('iso-upload-form');
|
||||
const fileInput = document.getElementById('iso-file-input');
|
||||
const button = document.getElementById('iso-upload-button');
|
||||
const hint = document.getElementById('iso-file-hint');
|
||||
const errorBox = document.getElementById('iso-file-error');
|
||||
const box = document.getElementById('upload-progress-wrap');
|
||||
const bar = document.getElementById('upload-progress-bar');
|
||||
const percent = document.getElementById('upload-percent');
|
||||
const statusLine = document.getElementById('upload-status');
|
||||
const loadedLine = document.getElementById('upload-loaded');
|
||||
const speedLine = document.getElementById('upload-speed');
|
||||
let activeXhr = null;
|
||||
let uploadActive = false;
|
||||
|
||||
function bytesText(bytes) {
|
||||
if (!bytes) return '0 MB';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
let value = bytes;
|
||||
let i = 0;
|
||||
while (value >= 1024 && i < units.length - 1) { value /= 1024; i++; }
|
||||
return value.toFixed(value >= 10 || i === 0 ? 0 : 1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
function validIsoFile(file) {
|
||||
return file && file.name && file.name.toLowerCase().endsWith('.iso');
|
||||
}
|
||||
|
||||
function setFileError(message) {
|
||||
if (!errorBox) return;
|
||||
errorBox.textContent = message || '';
|
||||
errorBox.hidden = !message;
|
||||
}
|
||||
|
||||
function setUploadMode(active) {
|
||||
uploadActive = active;
|
||||
window.VirtualityUploadActive = active;
|
||||
document.body.classList.toggle('upload-active', active);
|
||||
if (active) {
|
||||
button.disabled = false;
|
||||
button.type = 'button';
|
||||
button.textContent = 'Отменить загрузку';
|
||||
button.classList.remove('primary');
|
||||
button.classList.add('danger');
|
||||
fileInput.disabled = true;
|
||||
} else {
|
||||
activeXhr = null;
|
||||
button.type = 'submit';
|
||||
button.textContent = 'Загрузить ISO';
|
||||
button.classList.add('primary');
|
||||
button.classList.remove('danger');
|
||||
fileInput.disabled = false;
|
||||
button.disabled = !validIsoFile(fileInput.files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', function (event) {
|
||||
if (!uploadActive) return;
|
||||
event.preventDefault();
|
||||
event.returnValue = 'Идёт загрузка ISO. Если уйти со страницы, загрузка будет прервана.';
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!uploadActive) return;
|
||||
const navTarget = event.target.closest('a, form button[type="submit"], form button:not([type])');
|
||||
if (!navTarget || navTarget === button) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
statusLine.textContent = 'Сначала заверши или отмени текущую загрузку.';
|
||||
}, true);
|
||||
|
||||
fileInput.addEventListener('change', function () {
|
||||
const file = fileInput.files[0];
|
||||
setFileError('');
|
||||
if (!file) {
|
||||
hint.textContent = 'Файл ещё не выбран. В этом разделе разрешены только установочные образы .iso.';
|
||||
button.disabled = false;
|
||||
return;
|
||||
}
|
||||
if (!validIsoFile(file)) {
|
||||
const message = 'Неверный тип файла: ' + file.name + '. Здесь можно выбрать только .iso.';
|
||||
hint.textContent = message;
|
||||
setFileError(message);
|
||||
fileInput.value = '';
|
||||
button.disabled = true;
|
||||
return;
|
||||
}
|
||||
button.disabled = false;
|
||||
hint.textContent = file.name + ' · ' + bytesText(file.size);
|
||||
});
|
||||
|
||||
button.addEventListener('click', function () {
|
||||
if (!uploadActive) return;
|
||||
if (activeXhr) activeXhr.abort();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (uploadActive) return;
|
||||
const file = fileInput.files[0];
|
||||
setFileError('');
|
||||
if (!validIsoFile(file)) {
|
||||
const message = 'Выбери установочный образ .iso.';
|
||||
hint.textContent = message;
|
||||
setFileError(message);
|
||||
return;
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
activeXhr = xhr;
|
||||
const data = new FormData(form);
|
||||
const started = Date.now();
|
||||
|
||||
box.hidden = false;
|
||||
setUploadMode(true);
|
||||
statusLine.textContent = 'Передача файла на сервер…';
|
||||
bar.style.width = '0%';
|
||||
percent.textContent = '0%';
|
||||
loadedLine.textContent = '0 MB из ' + bytesText(file.size);
|
||||
speedLine.textContent = 'скорость считается…';
|
||||
|
||||
xhr.upload.onprogress = function (event) {
|
||||
if (!event.lengthComputable) {
|
||||
statusLine.textContent = 'Загрузка идёт…';
|
||||
return;
|
||||
}
|
||||
const pct = Math.round((event.loaded / event.total) * 100);
|
||||
const seconds = Math.max(1, (Date.now() - started) / 1000);
|
||||
const speed = event.loaded / seconds;
|
||||
bar.style.width = pct + '%';
|
||||
percent.textContent = pct + '%';
|
||||
loadedLine.textContent = bytesText(event.loaded) + ' из ' + bytesText(event.total);
|
||||
speedLine.textContent = bytesText(speed) + '/s';
|
||||
if (pct >= 100) statusLine.textContent = 'Файл передан. Сервер сохраняет ISO и обновляет pool…';
|
||||
};
|
||||
|
||||
xhr.onload = function () {
|
||||
if (xhr.status >= 200 && xhr.status < 400) {
|
||||
bar.style.width = '100%';
|
||||
percent.textContent = '100%';
|
||||
statusLine.textContent = 'Готово. Обновляем список ISO…';
|
||||
setUploadMode(false);
|
||||
window.location.href = '/iso';
|
||||
} else {
|
||||
statusLine.textContent = 'Ошибка загрузки: HTTP ' + xhr.status;
|
||||
setUploadMode(false);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onabort = function () {
|
||||
statusLine.textContent = 'Загрузка отменена пользователем.';
|
||||
bar.style.width = '0%';
|
||||
percent.textContent = '0%';
|
||||
loadedLine.textContent = '0 MB';
|
||||
speedLine.textContent = 'отменено';
|
||||
setUploadMode(false);
|
||||
};
|
||||
|
||||
xhr.onerror = function () {
|
||||
statusLine.textContent = 'Ошибка сети во время загрузки.';
|
||||
setUploadMode(false);
|
||||
};
|
||||
|
||||
xhr.open('POST', form.action);
|
||||
xhr.send(data);
|
||||
});
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<aside class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Загрузить образ</h2></div>
|
||||
<div class="card-body">
|
||||
{{ uploader('/iso/upload', 'iso_file', '.iso', 'Перетащите файл .iso сюда', 'или нажмите, чтобы выбрать на компьютере', '/iso', 'Загрузить') }}
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Где взять образ</h2></div>
|
||||
<div class="list">
|
||||
{% for name, url, note in [('Ubuntu Server', 'https://ubuntu.com/download/server', 'Популярный Linux для серверов'), ('Debian', 'https://www.debian.org/distrib/', 'Надёжный и лёгкий Linux'), ('Windows Server', 'https://www.microsoft.com/evalcenter', 'Пробная версия от Microsoft')] %}
|
||||
<a class="list-item" href="{{ url }}" target="_blank" rel="noopener">
|
||||
<div class="grow"><div class="title">{{ name }}</div><div class="meta">{{ note }}</div></div>{{ icon('external-link', 'icon-sm') }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,43 +1,72 @@
|
||||
{% from "_ui.html" import icon, logo, alert %}
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<html lang="ru" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ app_name }} Login</title>
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<title>Вход — Virtuality</title>
|
||||
<script>
|
||||
document.documentElement.dataset.theme = localStorage.getItem('virtualityTheme') || 'neon';
|
||||
(function () {
|
||||
var mode = 'system';
|
||||
try { mode = localStorage.getItem('virtualityTheme') || 'system'; } catch (e) {}
|
||||
var dark = mode === 'dark' || (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<link rel="stylesheet" href="/static/themes.css">
|
||||
<link rel="stylesheet" href="/static/app.css?v={{ app_version }}">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%235a48f5'/%3E%3Cpath d='M9 10l7 13 7-13' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
|
||||
</head>
|
||||
<body class="auth-body">
|
||||
<main class="auth-shell">
|
||||
<section class="auth-card">
|
||||
<div class="brand auth-brand">Virtuality</div>
|
||||
<p class="muted">Вход в панель управления виртуализацией</p>
|
||||
|
||||
{% if not configured %}
|
||||
<div class="alert danger">Панель ещё не настроена. Повтори установку веб-панели.</div>
|
||||
{% endif %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/login" class="auth-form">
|
||||
<label>
|
||||
<span>Linux-пользователь</span>
|
||||
<input type="text" name="username" value="{{ auth_user }}" autocomplete="username" required>
|
||||
</label>
|
||||
<label>
|
||||
<span>Пароль</span>
|
||||
<input type="password" name="password" autocomplete="current-password" required autofocus>
|
||||
</label>
|
||||
<button type="submit" class="primary wide">Войти</button>
|
||||
</form>
|
||||
|
||||
<p class="muted small-note">Используется пароль системного пользователя Linux. Пароль не хранится в Virtuality.</p>
|
||||
<body>
|
||||
<div class="auth">
|
||||
<section class="auth-hero">
|
||||
<div class="logo">
|
||||
<span class="brand-mark">{{ logo() }}</span>
|
||||
<span class="brand-name">Virtuality<small>Платформа виртуализации</small></span>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Ваши серверы.<br><span>Под полным контролем.</span></h1>
|
||||
<p>Создавайте виртуальные машины, открывайте к ним доступ из интернета и следите за состоянием сервера — всё в одном окне, без командной строки.</p>
|
||||
<div class="auth-features">
|
||||
<div class="auth-feature"><span class="icon-wrap">{{ icon('zap') }}</span>Новая машина за пару минут</div>
|
||||
<div class="auth-feature"><span class="icon-wrap">{{ icon('monitor') }}</span>Экран машины прямо в браузере</div>
|
||||
<div class="auth-feature"><span class="icon-wrap">{{ icon('shield-check') }}</span>Работает на вашем железе, данные у вас</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="auth-foot">Virtuality {{ app_version }} · KVM · QEMU · libvirt</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section class="auth-panel">
|
||||
<form method="post" action="/login" class="auth-form stack">
|
||||
<div class="logo auth-mobile-brand">
|
||||
<span class="brand-mark">{{ logo() }}</span>
|
||||
<span class="brand-name">Virtuality<small>Платформа виртуализации</small></span>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Вход в панель</h2>
|
||||
<p>Используйте имя и пароль пользователя этого сервера.</p>
|
||||
</div>
|
||||
|
||||
{% if not configured %}
|
||||
{{ alert('warning', 'Панель ещё не настроена. Запустите установку web-панели повторно.') }}
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
{{ alert('danger', error) }}
|
||||
{% endif %}
|
||||
|
||||
<div class="field">
|
||||
<label for="username">Имя пользователя</label>
|
||||
<input class="input" id="username" type="text" name="username" value="{{ auth_user }}" autocomplete="username" autocapitalize="none" spellcheck="false" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Пароль</label>
|
||||
<input class="input" id="password" type="password" name="password" autocomplete="current-password" required autofocus>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block">Войти{{ icon('arrow-right') }}</button>
|
||||
<p class="subtle small">{{ icon('lock', 'icon-sm') }} Пароль проверяется системой сервера и нигде не сохраняется.</p>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/static/panel.js?v={{ app_version }}" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,92 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Журналы — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
<aside class="v-sidebar">
|
||||
<div class="v-logo">
|
||||
<strong>Virtuality</strong>
|
||||
<span>control panel</span>
|
||||
</div>
|
||||
<nav class="v-nav">
|
||||
<a href="/">Обзор</a>
|
||||
<a href="/vm/create">Создать VM</a>
|
||||
<div class="v-nav-group open">
|
||||
<button class="v-nav-group-title" type="button">Образы</button>
|
||||
<a href="/iso">ISO</a>
|
||||
<a href="/disk-images">Диски</a>
|
||||
</div>
|
||||
<a href="/network">Сеть</a>
|
||||
<a href="/operations">Операции</a>
|
||||
<a class="active" href="/logs">Журналы</a>
|
||||
<a href="/update">Обновления</a>
|
||||
<a href="/host">Хост</a>
|
||||
</nav>
|
||||
</aside>
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon %}
|
||||
{% set page_title = 'Журналы' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Журналы</div>
|
||||
<div class="v-subtitle">systemd, libvirt, update, install и операции Virtuality</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid stats compact-stats">
|
||||
{% for key, source in sources.items() %}
|
||||
<a class="card stat log-source-card {{ 'selected' if key == selected.key else '' }}" href="/logs?source={{ key }}&lines={{ selected.lines }}">
|
||||
<div class="label">Источник</div>
|
||||
<div class="value small">{{ source.title }}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h2>{{ selected.title }}</h2>
|
||||
<div class="muted small-note">{{ selected.cmd }}</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a class="link-pill" href="/logs?source={{ selected.key }}&lines=120">120</a>
|
||||
<a class="link-pill" href="/logs?source={{ selected.key }}&lines=300">300</a>
|
||||
<a class="link-pill" href="/logs?source={{ selected.key }}&lines=1000">1000</a>
|
||||
<button class="primary" onclick="refreshLog()">Обновить</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="log-content" class="op-log">{{ selected.content }}</pre>
|
||||
</section>
|
||||
</main>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Журналы</h1>
|
||||
<p class="lead">Записи служб сервера. Пригодятся, если что-то пошло не так, — их можно отправить в поддержку.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
async function refreshLog() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const source = params.get('source') || '{{ selected.key }}';
|
||||
const lines = params.get('lines') || '{{ selected.lines }}';
|
||||
const box = document.getElementById('log-content');
|
||||
try {
|
||||
const response = await fetch('/api/logs?source=' + encodeURIComponent(source) + '&lines=' + encodeURIComponent(lines), {cache: 'no-store'});
|
||||
const payload = await response.json();
|
||||
if (payload.ok && payload.log) {
|
||||
box.textContent = payload.log.content || 'Лог пуст';
|
||||
}
|
||||
} catch (error) {
|
||||
box.textContent = 'Ошибка обновления лога: ' + error;
|
||||
}
|
||||
}
|
||||
setInterval(refreshLog, 5000);
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
{% block content %}
|
||||
<nav class="tabs">
|
||||
{% for key, source in sources.items() %}
|
||||
<a href="/logs?source={{ key }}&lines={{ selected.lines }}" class="{{ 'active' if key == selected.key else '' }}">{{ source.title }}</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>{{ selected.title }}</h2><p class="mono">{{ selected.cmd }}</p></div>
|
||||
<div class="row">
|
||||
<label class="row small subtle" style="gap:8px;cursor:pointer"><input type="checkbox" data-log-live checked> Обновлять</label>
|
||||
<div class="segmented">
|
||||
{% for n in (120, 300, 1000) %}<a href="/logs?source={{ selected.key }}&lines={{ n }}" class="{{ 'active' if selected.lines == n else '' }}">{{ n }}</a>{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre class="terminal tall" data-log-source="{{ selected.key }}" data-log-lines="{{ selected.lines }}">{{ selected.content }}</pre>
|
||||
</div>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
||||
+183
-269
@@ -1,271 +1,185 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Сеть — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, alert, empty %}
|
||||
{% set page_title = 'Сеть и доступ' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Сеть</div>
|
||||
<div class="v-subtitle">NAT Router для VPS, проброс одиночных портов и диапазонов к VM</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid stats">
|
||||
<article class="card stat">
|
||||
<div class="label">NAT network</div>
|
||||
<div class="value small">{{ ctx.nat.name }}</div>
|
||||
<span class="status {{ 'ok' if ctx.nat.exists else 'warn' }}">{{ 'ready' if ctx.nat.exists else 'not created' }}</span>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Subnet</div>
|
||||
<div class="value small">{{ ctx.nat.subnet }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">External interface</div>
|
||||
<div class="value small">{{ ctx.external_interface }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">IPv4 forward</div>
|
||||
<div class="value small">{{ ctx.ip_forward }}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Virtuality NAT Router</h2>
|
||||
<span class="pill">{{ ctx.nat.bridge }}</span>
|
||||
</div>
|
||||
<div class="meta-grid">
|
||||
<div><span>Gateway</span><strong>{{ ctx.nat.gateway }}</strong></div>
|
||||
<div><span>DHCP</span><strong>{{ ctx.nat.dhcp }}</strong></div>
|
||||
<div><span>Bridge</span><strong>{{ ctx.nat.bridge }}</strong></div>
|
||||
</div>
|
||||
<form method="post" action="/network/nat/setup" class="inline-form top-space">
|
||||
<button class="primary">Создать / починить NAT-сеть</button>
|
||||
</form>
|
||||
<pre>{{ ctx.nat.info }}</pre>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>DHCP leases</h2>
|
||||
<span class="pill">virsh net-dhcp-leases</span>
|
||||
</div>
|
||||
<pre>{{ ctx.nat.leases }}</pre>
|
||||
<div class="notice top-space">IP для проброса можно оставить auto или ввести вручную, если DHCP leases пустые, у VM статический IP, bridge-сеть или нет qemu-guest-agent.</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Добавить проброс порта</h2>
|
||||
<span class="pill">DNAT auto/manual IP · ranges</span>
|
||||
</div>
|
||||
<form method="post" action="/network/forward/add" class="form-grid">
|
||||
<label>
|
||||
<span>Описание</span>
|
||||
<input type="text" name="note" placeholder="Например: сайт, SSH, SIP, RTP MikoPBX">
|
||||
</label>
|
||||
<label>
|
||||
<span>Внешний порт или диапазон</span>
|
||||
<input type="text" name="external_port" pattern="[0-9]{1,5}([:-][0-9]{1,5})?" placeholder="80, 443, 2222 или 10000-20000" required>
|
||||
</label>
|
||||
<label>
|
||||
<span>Машина</span>
|
||||
<select name="vm_name" required>
|
||||
{% for vm in vms %}
|
||||
<option value="{{ vm.name }}">{{ vm.name }} — {{ vm.state }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>IP VM</span>
|
||||
<input type="text" name="guest_ip" value="auto" placeholder="auto или 192.168.100.55" required>
|
||||
<small>Оставь auto для DHCP/qemu-guest-agent или впиши внутренний IP VM вручную.</small>
|
||||
</label>
|
||||
<label>
|
||||
<span>Внутренний порт или диапазон</span>
|
||||
<input type="text" name="guest_port" list="standard-ports" pattern="[0-9]{1,5}([:-][0-9]{1,5})?" placeholder="Выбери стандартный или введи 10000-20000" required>
|
||||
<datalist id="standard-ports">
|
||||
<option value="20" label="FTP data"></option>
|
||||
<option value="21" label="FTP"></option>
|
||||
<option value="22" label="SSH"></option>
|
||||
<option value="25" label="SMTP"></option>
|
||||
<option value="53" label="DNS"></option>
|
||||
<option value="80" label="HTTP / web"></option>
|
||||
<option value="110" label="POP3"></option>
|
||||
<option value="123" label="NTP"></option>
|
||||
<option value="143" label="IMAP"></option>
|
||||
<option value="443" label="HTTPS / SSL web"></option>
|
||||
<option value="465" label="SMTPS"></option>
|
||||
<option value="587" label="SMTP submission"></option>
|
||||
<option value="993" label="IMAPS"></option>
|
||||
<option value="995" label="POP3S"></option>
|
||||
<option value="1194" label="OpenVPN"></option>
|
||||
<option value="1433" label="Microsoft SQL Server"></option>
|
||||
<option value="1521" label="Oracle Database"></option>
|
||||
<option value="2049" label="NFS"></option>
|
||||
<option value="3306" label="MySQL / MariaDB"></option>
|
||||
<option value="3389" label="RDP / Windows Remote Desktop"></option>
|
||||
<option value="5060" label="SIP"></option>
|
||||
<option value="5061" label="SIP TLS"></option>
|
||||
<option value="5432" label="PostgreSQL"></option>
|
||||
<option value="5900" label="VNC"></option>
|
||||
<option value="6379" label="Redis"></option>
|
||||
<option value="8000" label="HTTP dev"></option>
|
||||
<option value="8080" label="HTTP alternative"></option>
|
||||
<option value="8443" label="HTTPS alternative"></option>
|
||||
<option value="10000" label="Webmin / RTP start"></option>
|
||||
<option value="10000-20000" label="RTP / VoIP media range"></option>
|
||||
</datalist>
|
||||
</label>
|
||||
<label>
|
||||
<span>Протокол</span>
|
||||
<select name="protocol">
|
||||
<option value="tcp">tcp</option>
|
||||
<option value="udp">udp</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="notice">Можно указать одиночный порт или диапазон. Если авто-IP не определяется, впиши IP VM вручную. Для VoIP/RTP обычно: внешний 10000-20000 → внутренний 10000-20000, протокол udp.</div>
|
||||
<button class="primary wide">Добавить и применить</button>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Диагностика публичного доступа</h2>
|
||||
<span class="pill">VM → Internet</span>
|
||||
</div>
|
||||
<form method="post" action="/network/diagnose" class="form-grid">
|
||||
<label>
|
||||
<span>Виртуальная машина</span>
|
||||
<select name="vm_name" required>
|
||||
{% for vm in vms %}
|
||||
<option value="{{ vm.name }}">{{ vm.name }} — {{ vm.state }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<div class="form-row">
|
||||
<label>
|
||||
<span>Внешний порт</span>
|
||||
<input type="number" name="external_port" min="1" max="65535" value="80" required>
|
||||
</label>
|
||||
<label>
|
||||
<span>Порт внутри VM</span>
|
||||
<input type="number" name="guest_port" min="1" max="65535" value="80" required>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Протокол</span>
|
||||
<select name="protocol">
|
||||
<option value="tcp">tcp</option>
|
||||
<option value="udp">udp</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="primary wide">Проверить доступ</button>
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{% if diagnostics %}
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Результат диагностики</h2>
|
||||
<span class="pill">{{ diagnostics.vm_name }} · {{ diagnostics.protocol }} {{ diagnostics.external_port }} → {{ diagnostics.guest_port }}</span>
|
||||
</div>
|
||||
<div class="notice">{{ diagnostics.verdict }}</div>
|
||||
<div class="meta-grid top-space">
|
||||
<div><span>VM IP</span><strong>{{ diagnostics.vm_ip or 'not found' }}</strong></div>
|
||||
<div><span>External interface</span><strong>{{ diagnostics.external_interface }}</strong></div>
|
||||
<div><span>Mapping</span><strong>{{ diagnostics.external_port }} → {{ diagnostics.guest_port }}</strong></div>
|
||||
</div>
|
||||
<table class="top-space">
|
||||
<thead><tr><th>Проверка</th><th>Статус</th><th>Детали</th></tr></thead>
|
||||
<tbody>
|
||||
{% for check in diagnostics.checks %}
|
||||
<tr>
|
||||
<td class="strong">{{ check.name }}</td>
|
||||
<td><span class="status {{ 'ok' if check.ok else 'err' }}">{{ 'OK' if check.ok else 'FAIL' }}</span></td>
|
||||
<td class="muted">{{ check.detail }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="grid two top-space">
|
||||
<article><div class="label">Проверить входящий трафик</div><pre>{{ diagnostics.commands.watch_external }}</pre></article>
|
||||
<article><div class="label">Проверить трафик к VM</div><pre>{{ diagnostics.commands.watch_internal }}</pre></article>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Пробросы портов</h2>
|
||||
<form method="post" action="/network/apply"><button>Применить правила</button></form>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Проброс</th><th>VM</th><th>Внутренний адрес</th><th>Протокол</th><th>Описание</th><th>Действия</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in ctx.forwards %}
|
||||
<tr>
|
||||
<td class="strong">
|
||||
{{ item.external_port_label|default(item.external_port) }} → {{ item.guest_port_label|default(item.guest_port) }}
|
||||
{% if item.is_range %}<span class="status warn">range</span>{% endif %}
|
||||
</td>
|
||||
<td>{{ item.vm_name }}</td>
|
||||
<td>{{ item.guest_ip }}</td>
|
||||
<td><span class="status ok">{{ item.protocol }}</span></td>
|
||||
<td>{{ item.note }}</td>
|
||||
<td>
|
||||
<div class="actions">
|
||||
<form method="post" action="/network/diagnose">
|
||||
<input type="hidden" name="vm_name" value="{{ item.vm_name }}">
|
||||
<input type="hidden" name="external_port" value="{{ item.external_port }}">
|
||||
<input type="hidden" name="guest_port" value="{{ item.guest_port }}">
|
||||
<input type="hidden" name="protocol" value="{{ item.protocol }}">
|
||||
<button>Диагностика</button>
|
||||
</form>
|
||||
<form method="post" action="/network/forward/{{ item.id }}/delete"><button class="danger">Удалить</button></form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="6" class="muted">Пробросов пока нет</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>nftables preview</h2>
|
||||
<span class="pill">/etc/virtuality/nftables/virtuality.nft</span>
|
||||
</div>
|
||||
<pre>{{ ctx.nft_rules }}</pre>
|
||||
</section>
|
||||
</main>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Сеть и доступ</h1>
|
||||
<p class="lead">Откройте доступ к машинам из интернета: сайт, SSH, удалённый рабочий стол. Всё остальное остаётся закрытым.</p>
|
||||
</div>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% if diagnostics %}
|
||||
{% set failed = diagnostics.checks|rejectattr('ok')|list %}
|
||||
<article class="card" style="margin-bottom:20px">
|
||||
<div class="card-header">
|
||||
<div><h2>Проверка доступа: {{ diagnostics.vm_name }}, порт {{ diagnostics.external_port }}</h2><p>{{ diagnostics.protocol|upper }} {{ diagnostics.external_port }} → {{ diagnostics.vm_ip or 'IP не найден' }}:{{ diagnostics.guest_port }}</p></div>
|
||||
{% if failed %}{{ badge('Есть проблемы: ' ~ failed|length, 'warning') }}{% else %}{{ badge('Всё в порядке', 'success') }}{% endif %}
|
||||
</div>
|
||||
<div class="card-body stack-sm">
|
||||
{{ alert('warning' if failed else 'success', diagnostics.verdict) }}
|
||||
</div>
|
||||
<div class="checklist">
|
||||
{% for check in diagnostics.checks %}
|
||||
<div class="check-item {{ 'success' if check.ok else 'danger' }}">{{ icon('circle-check' if check.ok else 'circle-x') }}<div style="min-width:0"><strong>{{ check.name }}</strong><span class="truncate" style="display:block">{{ check.detail|truncate(160) }}</span></div></div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-footer" style="justify-content:flex-start;display:grid;gap:8px">
|
||||
<span class="subtle small">Проверить входящий трафик на сервере:</span>
|
||||
<div class="code-line">{{ diagnostics.commands.watch_external }}<button type="button" class="btn btn-ghost btn-icon btn-sm" data-copy="{{ diagnostics.commands.watch_external }}" style="margin-left:auto">{{ icon('copy', 'icon-sm') }}</button></div>
|
||||
</div>
|
||||
</article>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid grid-main">
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>Доступ из интернета</h2><p>Порты сервера, которые ведут внутрь машин</p></div>
|
||||
{% if ctx.forwards %}<form method="post" action="/network/apply" class="inline-form" data-toast="Правила применены заново"><button class="btn btn-sm btn-ghost">{{ icon('refresh-cw', 'icon-sm') }}Применить заново</button></form>{% endif %}
|
||||
</div>
|
||||
{% if ctx.forwards %}
|
||||
<div class="list">
|
||||
{% for item in ctx.forwards %}
|
||||
{% set service = item.note or (item.guest_port|port_service) or ('Порт ' ~ item.guest_port_label) %}
|
||||
<div class="list-item">
|
||||
<span class="list-icon success">{{ icon('globe') }}</span>
|
||||
<div class="grow">
|
||||
<div class="title">{{ service }}</div>
|
||||
<div class="meta">Сервер : <b class="mono">{{ item.external_port_label }}</b> → {{ item.vm_name }} : <b class="mono">{{ item.guest_port_label }}</b> · {{ item.protocol|upper }}{% if item.is_range %} · диапазон{% endif %}</div>
|
||||
</div>
|
||||
<form method="post" action="/network/diagnose" class="inline-form">
|
||||
<input type="hidden" name="vm_name" value="{{ item.vm_name }}"><input type="hidden" name="external_port" value="{{ item.external_port }}"><input type="hidden" name="guest_port" value="{{ item.guest_port }}"><input type="hidden" name="protocol" value="{{ item.protocol }}">
|
||||
<button class="btn btn-sm hide-sm">{{ icon('activity', 'icon-sm') }}Проверить</button>
|
||||
</form>
|
||||
<form method="post" action="/network/forward/{{ item.id }}/delete" class="inline-form" data-confirm="Доступ к «{{ service }}» из интернета будет закрыт." data-confirm-title="Закрыть доступ?" data-confirm-button="Закрыть" data-toast="Доступ закрыт" data-toast-tone="warning">
|
||||
<button class="btn btn-sm btn-icon btn-ghost" aria-label="Удалить">{{ icon('trash-2', 'icon-sm') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ empty('shield-check', 'Всё закрыто', 'Машины выходят в интернет, но снаружи к ним подключиться нельзя. Откройте нужный порт в форме справа.') }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Открыть доступ</h2><p>Сделайте сервис машины доступным снаружи</p></div></div>
|
||||
{% if vms %}
|
||||
<form method="post" action="/network/forward/add" data-toast="Доступ открыт">
|
||||
<div class="card-body form-grid">
|
||||
<div class="field">
|
||||
<label for="fw-vm">Машина</label>
|
||||
<select class="select" id="fw-vm" name="vm_name" required>
|
||||
{% for vm in vms %}<option value="{{ vm.name }}">{{ vm.name }}{% if vm.ip and vm.ip != '—' %} · {{ vm.ip }}{% endif %}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="fw-preset">Что открыть</label>
|
||||
<select class="select" id="fw-preset" data-port-preset>
|
||||
<option value="">Выберите сервис…</option>
|
||||
{% for p in port_presets %}<option value="{{ p.port }}" data-protocol="{{ p.protocol }}">{{ p.label }}</option>{% endfor %}
|
||||
<option value="custom">Другой порт</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="field"><label for="fw-guest">Порт в машине</label><input class="input" id="fw-guest" type="text" name="guest_port" pattern="[0-9]{1,5}([:\-][0-9]{1,5})?" placeholder="22" required></div>
|
||||
<div class="field"><label for="fw-ext">Порт на сервере</label><input class="input" id="fw-ext" type="text" name="external_port" pattern="[0-9]{1,5}([:\-][0-9]{1,5})?" placeholder="2222" required></div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Протокол</label>
|
||||
<div class="segmented" role="radiogroup">
|
||||
<label style="display:contents"><input type="radio" name="protocol" value="tcp" checked hidden><button type="button" class="active" data-proto="tcp">TCP</button></label>
|
||||
<label style="display:contents"><input type="radio" name="protocol" value="udp" hidden><button type="button" data-proto="udp">UDP</button></label>
|
||||
</div>
|
||||
</div>
|
||||
<details class="advanced">
|
||||
<summary>{{ icon('wrench', 'icon-sm') }}Дополнительно<span class="chev">{{ icon('chevron-down', 'icon-sm') }}</span></summary>
|
||||
<div class="advanced-body form-grid">
|
||||
<div class="field"><label for="fw-ip">IP-адрес машины</label><input class="input" id="fw-ip" type="text" name="guest_ip" value="auto"><span class="hint">«auto» — определить автоматически</span></div>
|
||||
<div class="field"><label for="fw-note">Название</label><input class="input" id="fw-note" type="text" name="note" maxlength="120" placeholder="например, Сайт компании"></div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="card-footer"><button type="submit" class="btn btn-primary">{{ icon('globe', 'icon-sm') }}Открыть доступ</button></div>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="card-body subtle">Сначала <a href="/vm/create">создайте машину</a>.</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-2 mt-3">
|
||||
<article class="card">
|
||||
<div class="card-header">
|
||||
<div><h2>Внутренняя сеть машин</h2><p>Через неё машины выходят в интернет</p></div>
|
||||
{% if ctx.nat.exists %}{{ badge('Работает', 'success') }}{% else %}{{ badge('Не создана', 'warning') }}{% endif %}
|
||||
</div>
|
||||
<div class="card-body stack-sm">
|
||||
<div class="kv">
|
||||
<div><span>Адреса машин</span><strong class="mono">{{ ctx.nat.subnet }}</strong></div>
|
||||
<div><span>Шлюз</span><strong class="mono">{{ ctx.nat.gateway }}</strong></div>
|
||||
<div><span>Выход в интернет</span><strong class="mono">{{ ctx.external_interface }}</strong></div>
|
||||
<div><span>Маршрутизация</span><strong>{{ 'Включена' if ctx.ip_forward == 'enabled' else 'Выключена' }}</strong></div>
|
||||
</div>
|
||||
<form method="post" action="/network/nat/setup" data-toast="Сеть проверена и настроена"><button class="btn btn-sm">{{ icon('wrench', 'icon-sm') }}{{ 'Проверить и починить' if ctx.nat.exists else 'Создать сеть' }}</button></form>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Адреса машин</h2><p>Если адрес не определился сам, укажите его вручную</p></div></div>
|
||||
<div class="list">
|
||||
{% for vm in vms %}
|
||||
<form method="post" action="/network/vm-ip/save" class="list-item" data-toast="Адрес сохранён">
|
||||
<span class="list-icon">{{ icon('monitor') }}</span>
|
||||
<div class="grow"><div class="title">{{ vm.name }}</div><div class="meta">{{ vm.ip if vm.ip and vm.ip != '—' else 'адрес не определён' }}{% if vm.manual_ip %} · задан вручную{% endif %}</div></div>
|
||||
<input type="hidden" name="vm_name" value="{{ vm.name }}">
|
||||
<input class="input" style="width:150px;height:32px" type="text" name="manual_ip" value="{{ vm.manual_ip }}" placeholder="авто" aria-label="IP вручную">
|
||||
<button class="btn btn-sm">Сохранить</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="list-item subtle">Машин пока нет</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<details class="advanced mt-3">
|
||||
<summary>{{ icon('terminal', 'icon-sm') }}Для специалистов: DHCP и правила nftables<span class="chev">{{ icon('chevron-down', 'icon-sm') }}</span></summary>
|
||||
<div class="advanced-body grid grid-2">
|
||||
<div><div class="terminal-head"><i></i><i></i><i></i><span>virsh net-dhcp-leases {{ ctx.nat.name }}</span></div><pre class="terminal">{{ ctx.nat.leases or '—' }}</pre></div>
|
||||
<div><div class="terminal-head"><i></i><i></i><i></i><span>/etc/virtuality/nftables/virtuality.nft</span></div><pre class="terminal">{{ ctx.nft_rules }}</pre></div>
|
||||
</div>
|
||||
</details>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
var preset = document.querySelector('[data-port-preset]');
|
||||
if (!preset) return;
|
||||
var guest = document.getElementById('fw-guest'), ext = document.getElementById('fw-ext'), note = document.getElementById('fw-note');
|
||||
function setProto(value) {
|
||||
document.querySelectorAll('[data-proto]').forEach(function (btn) {
|
||||
var on = btn.dataset.proto === value;
|
||||
btn.classList.toggle('active', on);
|
||||
btn.previousElementSibling.checked = on;
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('[data-proto]').forEach(function (btn) { btn.addEventListener('click', function () { setProto(btn.dataset.proto); }); });
|
||||
preset.addEventListener('change', function () {
|
||||
var opt = preset.options[preset.selectedIndex];
|
||||
if (!opt.value || opt.value === 'custom') { if (opt.value === 'custom') guest.focus(); return; }
|
||||
guest.value = opt.value;
|
||||
var port = parseInt(opt.value, 10);
|
||||
ext.value = opt.value.indexOf('-') > -1 ? opt.value : (port === 22 ? '2222' : port === 3389 ? '33890' : opt.value);
|
||||
setProto(opt.dataset.protocol || 'tcp');
|
||||
if (note && !note.value) note.value = opt.text.split(' — ')[0];
|
||||
});
|
||||
guest.addEventListener('input', function () { if (!ext.dataset.touched) ext.value = guest.value; });
|
||||
ext.addEventListener('input', function () { ext.dataset.touched = '1'; });
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -1,56 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Операции — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, op_badge, empty %}
|
||||
{% set page_title = 'Задачи' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Операции</div>
|
||||
<div class="v-subtitle">Журнал фоновых действий Virtuality</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Последние операции</h2>
|
||||
<span class="pill">/var/log/virtuality/operations</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Операция</th><th>Статус</th><th>Создана</th><th>Действие</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for operation in operations %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="strong">{{ operation.title }}</div>
|
||||
<div class="muted small-note">{{ operation.message }}</div>
|
||||
</td>
|
||||
<td><span class="status {{ operation_css(operation.status) }}">{{ operation.status }}</span></td>
|
||||
<td>{{ operation.created_at }}</td>
|
||||
<td><a class="link-pill" href="/operations/{{ operation.id }}">Открыть</a></td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="4" class="muted">Журнал операций пуст</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Задачи</h1>
|
||||
<p class="lead">Долгие операции выполняются в фоне: создание машин, распаковка и конвертация образов. Можно закрыть страницу — работа продолжится.</p>
|
||||
</div>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<article class="card">
|
||||
{% if operations %}
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead><tr><th>Задача</th><th>Статус</th><th class="hide-sm">Прогресс</th><th class="hide-sm">Начата</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{% for op in operations %}
|
||||
{% set os = op.status|operation_state %}
|
||||
<tr>
|
||||
<td><a class="strong" href="/operations/{{ op.id }}" style="color:inherit">{{ op.title }}</a><div class="subtle small truncate" style="max-width:420px">{{ op.message }}</div></td>
|
||||
<td>{{ op_badge(op.status) }}</td>
|
||||
<td class="hide-sm" style="width:180px"><div class="progress {{ 'success' if op.status == 'success' else 'danger' if op.status == 'error' else '' }}"><span style="width:{{ op.progress|default(0) }}%"></span></div></td>
|
||||
<td class="hide-sm nowrap subtle">{{ op.created_at }}</td>
|
||||
<td><div class="actions"><a class="btn btn-sm btn-ghost" href="/operations/{{ op.id }}">Подробнее{{ icon('chevron-right', 'icon-sm') }}</a></div></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
{{ empty('list-checks', 'Задач пока нет', 'Когда вы создадите машину или загрузите образ, здесь появится ход выполнения.', '/vm/create', 'Создать машину') }}
|
||||
{% endif %}
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,199 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Обновления — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
<aside class="v-sidebar">
|
||||
<div class="v-logo">
|
||||
<strong>Virtuality</strong>
|
||||
<span>control panel</span>
|
||||
</div>
|
||||
<nav class="v-nav">
|
||||
<a href="/">Обзор</a>
|
||||
<a href="/vm/create">Создать VM</a>
|
||||
<div class="v-nav-group open">
|
||||
<button class="v-nav-group-title" type="button">Образы</button>
|
||||
<a href="/iso">ISO</a>
|
||||
<a href="/disk-images">Диски</a>
|
||||
</div>
|
||||
<a href="/network">Сеть</a>
|
||||
<a href="/operations">Операции</a>
|
||||
<a href="/logs">Журналы</a>
|
||||
<a class="active" href="/update">Обновления</a>
|
||||
<a href="/host">Хост</a>
|
||||
</nav>
|
||||
</aside>
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, alert %}
|
||||
{% set page_title = 'Обновления' %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Обновления</div>
|
||||
<div class="v-subtitle">GitHub update center: changelog, проверка и установка</div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</header>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Обновления</h1>
|
||||
<p class="lead">Новые возможности и исправления Virtuality. Машины продолжают работать во время обновления.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<section class="grid stats">
|
||||
<article class="card stat">
|
||||
<div class="label">Текущая версия</div>
|
||||
<div class="value small">{{ info.current_version }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Новая версия</div>
|
||||
<div class="value small">{{ info.latest_version }}</div>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Статус</div>
|
||||
<div class="value small">{{ 'Есть обновление' if info.has_update else 'Актуально' }}</div>
|
||||
<span class="status {{ 'warn' if info.has_update else 'ok' }}">{{ 'update' if info.has_update else 'ok' }}</span>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Последняя проверка</div>
|
||||
<div class="value small" id="last-check-value">{{ info.checked_at }}</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid two update-main-grid">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Проверка GitHub</h2>
|
||||
<span class="pill">{{ info.remote }}/{{ info.branch }}</span>
|
||||
</div>
|
||||
<div class="meta-grid">
|
||||
<div><span>Source</span><strong>{{ info.source_dir }}</strong></div>
|
||||
<div><span>Local commit</span><strong>{{ info.current_commit[:12] if info.current_commit else 'unknown' }}</strong></div>
|
||||
<div><span>Remote commit</span><strong>{{ info.latest_commit[:12] if info.latest_commit else 'unknown' }}</strong></div>
|
||||
</div>
|
||||
{% if not info.fetch_ok %}
|
||||
<div class="alert danger top-space">GitHub fetch вернул ошибку: {{ info.fetch_error }}</div>
|
||||
{% endif %}
|
||||
<div class="actions top-space update-actions">
|
||||
{% block content %}
|
||||
<section class="grid grid-main">
|
||||
<div class="stack">
|
||||
<article class="card {{ 'hero-card' if info.has_update else '' }}">
|
||||
<div class="card-body row-between" style="align-items:center">
|
||||
<div class="row" style="gap:16px;align-items:center">
|
||||
<span class="empty-art" style="margin:0;width:56px;height:56px;{{ 'background:rgba(255,255,255,.14);color:#fff' if info.has_update else '' }}">{{ icon('sparkles' if info.has_update else 'shield-check', 'icon-xl') }}</span>
|
||||
<div>
|
||||
{% if info.has_update %}
|
||||
<form method="post" action="/update/apply" id="update-apply-form" onsubmit="return confirm('Запустить обновление Virtuality из GitHub? Панель перезапустится.');">
|
||||
<button class="primary" id="update-apply-button" type="submit">Установить обновления</button>
|
||||
</form>
|
||||
<h2>Доступна версия {{ info.latest_version }}</h2>
|
||||
<p>У вас установлена {{ info.current_version }}. {% if info.missing_versions %}Пропущено обновлений: {{ info.missing_versions|length }}.{% endif %}</p>
|
||||
{% else %}
|
||||
<form method="post" action="/update/check" id="update-check-form">
|
||||
<button class="primary" id="update-main-button" type="submit">Проверить обновления</button>
|
||||
</form>
|
||||
<h2>Установлена последняя версия</h2>
|
||||
<p class="muted mt-1">Virtuality {{ info.current_version }} · проверено {{ info.checked_at }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% if info.has_update %}
|
||||
<form method="post" action="/update/apply" data-confirm="Панель перезапустится и будет недоступна около минуты. Виртуальные машины продолжат работать." data-confirm-title="Установить обновление?" data-confirm-button="Обновить" data-confirm-tone="brand" data-toast="Обновление запущено">
|
||||
<button class="btn btn-lg" style="background:#fff;color:#14112e;border:0">{{ icon('download') }}Обновить</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" action="/update/check" data-busy><button class="btn" data-busy="Проверяем…">{{ icon('refresh-cw', 'icon-sm') }}Проверить сейчас</button></form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card missed-versions-card">
|
||||
<div class="card-head">
|
||||
<h2>Пропущенные версии и функции</h2>
|
||||
<span class="pill">{{ info.missing_versions|length }} версий</span>
|
||||
</div>
|
||||
<div class="missed-versions-list">
|
||||
{% for release in info.missing_versions %}
|
||||
<div class="release-note">
|
||||
<div class="card-head compact">
|
||||
<h2>{{ release.version }} · {{ release.title }}</h2>
|
||||
<span class="pill">{{ release.date }}</span>
|
||||
</div>
|
||||
<p class="muted">{{ release.summary }}</p>
|
||||
<ul>
|
||||
{% for feature in release.features %}
|
||||
<li>{{ feature }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="muted">Нет пропущенных версий. Система на свежем коде.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<div class="alert info" data-update-running hidden>{{ icon('refresh-cw') }}<div><strong>Идёт обновление</strong><span data-update-state></span></div></div>
|
||||
{% if not info.fetch_ok %}{{ alert('warning', 'Не удалось связаться с GitHub: ' ~ (info.fetch_error or 'нет ответа') ~ '. Проверьте доступ сервера в интернет.', 'Проверка не удалась') }}{% endif %}
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Новые коммиты</h2>
|
||||
<span class="pill">{{ info.commits|length }}</span>
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Что нового</h2><p>{{ 'Изменения, которые вы получите' if info.missing_versions else 'Последние изменения' }}</p></div></div>
|
||||
{% set releases = info.missing_versions or ([current_release] if current_release else []) %}
|
||||
{% if releases %}
|
||||
{% for release in releases|reverse %}
|
||||
<div class="release">
|
||||
<div class="row-between"><div class="row"><span class="badge brand">{{ release.version }}</span><h3>{{ release.title }}</h3></div><span class="subtle small">{{ release.date }}</span></div>
|
||||
<p class="muted mt-1">{{ release.summary }}</p>
|
||||
<ul>{% for feature in release.features %}<li>{{ feature }}</li>{% endfor %}</ul>
|
||||
</div>
|
||||
<div class="services">
|
||||
{% for commit in info.commits %}
|
||||
<div class="service-row">
|
||||
<span><strong>{{ commit.short }}</strong><small>{{ commit.subject }} · {{ commit.date }}</small></span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="muted">Новых коммитов нет.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Лог обновления</h2>
|
||||
<span id="update-log-state" class="pill">live</span>
|
||||
</div>
|
||||
<pre id="update-log">{{ info.log_tail or 'Лог пока пуст.' }}</pre>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="card-body subtle">Новых изменений нет — всё уже установлено.</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const logBox = document.getElementById('update-log');
|
||||
const logState = document.getElementById('update-log-state');
|
||||
const checkForm = document.getElementById('update-check-form');
|
||||
const applyForm = document.getElementById('update-apply-form');
|
||||
const mainButton = document.getElementById('update-main-button');
|
||||
const applyButton = document.getElementById('update-apply-button');
|
||||
|
||||
function stageText(state) {
|
||||
const status = state.status || 'idle';
|
||||
const message = state.message || '';
|
||||
if (status === 'running') return message || 'Установка выполняется';
|
||||
if (status === 'success') return 'Обновление установлено';
|
||||
if (status === 'error') return 'Ошибка обновления';
|
||||
return message || 'Готово';
|
||||
}
|
||||
|
||||
async function refreshUpdateStatus() {
|
||||
try {
|
||||
const response = await fetch('/update/status', {cache: 'no-store'});
|
||||
const payload = await response.json();
|
||||
if (!payload.ok) return;
|
||||
const state = payload.state || {};
|
||||
logBox.textContent = payload.log_tail || 'Лог пока пуст.';
|
||||
logState.textContent = 'live · ' + (payload.checked_at || 'now');
|
||||
if (applyButton && state.status === 'running') applyButton.textContent = stageText(state);
|
||||
} catch (error) {
|
||||
logState.textContent = 'live error';
|
||||
}
|
||||
}
|
||||
|
||||
if (checkForm) {
|
||||
checkForm.addEventListener('submit', () => {
|
||||
if (mainButton) mainButton.textContent = 'Проверяем GitHub...';
|
||||
});
|
||||
}
|
||||
if (applyForm) {
|
||||
applyForm.addEventListener('submit', () => {
|
||||
if (applyButton) applyButton.textContent = 'Запускаем обновление...';
|
||||
setTimeout(refreshUpdateStatus, 1200);
|
||||
setTimeout(refreshUpdateStatus, 2600);
|
||||
});
|
||||
}
|
||||
|
||||
refreshUpdateStatus();
|
||||
setInterval(refreshUpdateStatus, 2000);
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<aside class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Версия</h2></div>
|
||||
<div class="card-body" style="padding-top:6px;padding-bottom:6px">
|
||||
<div class="summary-row"><span>Установлена</span><strong>{{ info.current_version }}</strong></div>
|
||||
{% if info.has_update %}<div class="summary-row"><span>Доступна</span><strong>{{ info.latest_version }}</strong></div>{% endif %}
|
||||
<div class="summary-row"><span>Канал</span><strong>{{ info.branch }}</strong></div>
|
||||
<div class="summary-row"><span>Сборка</span><strong class="mono">{{ info.current_commit[:8] if info.current_commit else '—' }}</strong></div>
|
||||
</div>
|
||||
</article>
|
||||
<details class="advanced" {% if info.commits %}open{% endif %}>
|
||||
<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:320px" data-update-log>{{ info.log_tail or 'Журнал пока пуст.' }}</pre></div>
|
||||
</details>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
+156
-188
@@ -1,203 +1,171 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Создать VM — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
</head>
|
||||
<body>
|
||||
{% set disk_images_available = disk_images is defined and disk_images %}
|
||||
{% set disk_feature_available = disk_images is defined %}
|
||||
<div class="v-layout">
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, alert %}
|
||||
{% set page_title = 'Новая машина' %}
|
||||
{% set source = form.source_type|default('iso') %}
|
||||
{% set preset_match = namespace(id='custom') %}
|
||||
{% for p in vm_presets %}{% if p.vcpus|string == form.vcpus|string and p.memory|string == form.memory|string and p.disk_size|string == form.disk_size|string %}{% set preset_match.id = p.id %}{% endif %}{% endfor %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">Создать VM</div>
|
||||
<div class="v-subtitle">Новая виртуальная машина через libvirt / virt-install</div>
|
||||
{% block page_header %}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="eyebrow"><a href="/">{{ icon('arrow-left', 'icon-sm') }} Все машины</a></div>
|
||||
<h1>Новая виртуальная машина</h1>
|
||||
<p class="lead">Заполните три шага — всё остальное Virtuality настроит сам.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form method="post" action="/vm/create" class="grid grid-main" data-wizard data-has-isos="{{ '1' if isos else '0' }}" data-has-disks="{{ '1' if disk_images else '0' }}">
|
||||
<div class="stack">
|
||||
<article class="card step-card">
|
||||
<div class="step-head"><span class="step-num">1</span><div><h2>Название и система</h2><p>Как назовём машину и что на неё установить</p></div></div>
|
||||
<div class="step-body form-grid">
|
||||
<div class="field">
|
||||
<label for="name">Название машины</label>
|
||||
<input class="input" id="name" type="text" name="name" value="{{ form.name or '' }}" placeholder="например, web-server" pattern="[a-zA-Z0-9][a-zA-Z0-9_.\-]{1,62}" autocomplete="off" required>
|
||||
<span class="hint">Латинские буквы, цифры, точка, дефис. От 2 до 63 символов.</span>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
|
||||
<div class="options" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr))">
|
||||
<label class="option">
|
||||
<input type="radio" name="source_type" value="iso" {% if source != 'disk_image' %}checked{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-icon">{{ icon('disc-3') }}</span><span class="option-check"></span></span>
|
||||
<span class="option-title">Установить с диска</span>
|
||||
<span class="option-text">Установочный образ .iso — как установка на обычный компьютер</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="option">
|
||||
<input type="radio" name="source_type" value="disk_image" {% if source == 'disk_image' %}checked{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-icon">{{ icon('hard-drive') }}</span><span class="option-check"></span></span>
|
||||
<span class="option-title">Готовая система</span>
|
||||
<span class="option-text">Образ уже установленной системы: .qcow2, .img, .raw</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if error %}
|
||||
<div class="alert danger">{{ error }}</div>
|
||||
{% endif %}
|
||||
<div class="field" data-show-when="source_type=iso">
|
||||
<label for="iso_path">Установочный образ</label>
|
||||
{% if isos %}
|
||||
<select class="select" id="iso_path" name="iso_path">
|
||||
{% for iso in isos %}<option value="{{ iso.path }}" data-label="{{ iso.name }}" {% if form.iso_path == iso.path %}selected{% endif %}>{{ iso.name }} · {{ iso.size }}</option>{% endfor %}
|
||||
</select>
|
||||
<span class="hint">Нужен другой? <a href="/iso">Загрузите образ</a>.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="field" data-show-when="source_type=disk_image">
|
||||
<label for="disk_image_path">Образ системы</label>
|
||||
{% if disk_images %}
|
||||
<select class="select" id="disk_image_path" name="disk_image_path">
|
||||
{% for image in disk_images %}<option value="{{ image.path }}" data-label="{{ image.name }}" {% if form.disk_image_path == image.path %}selected{% endif %}>{{ image.name }} · {{ image.size }}</option>{% endfor %}
|
||||
</select>
|
||||
<span class="hint">Образ будет скопирован — оригинал останется для других машин.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="alert warning" data-missing-source="iso" hidden>{{ icon('triangle-alert') }}<div><strong>Нет установочных образов</strong>Загрузите .iso с системой, например Ubuntu или Debian.</div><a class="btn btn-sm alert-action" href="/iso">Загрузить</a></div>
|
||||
<div class="alert warning" data-missing-source="disk_image" hidden>{{ icon('triangle-alert') }}<div><strong>Нет готовых образов</strong>Загрузите образ системы в формате .qcow2, .img или архив.</div><a class="btn btn-sm alert-action" href="/disk-images">Загрузить</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="grid two">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Параметры</h2>
|
||||
<span class="pill">VM wizard</span>
|
||||
</div>
|
||||
|
||||
<form method="post" action="/vm/create" class="form-grid">
|
||||
<label>
|
||||
<span>Имя VM</span>
|
||||
<input type="text" name="name" value="{{ form.name or '' }}" placeholder="ubuntu-test" required>
|
||||
<article class="card step-card">
|
||||
<div class="step-head"><span class="step-num">2</span><div><h2>Мощность</h2><p>Сколько ресурсов сервера выделить машине. Можно поменять позже.</p></div></div>
|
||||
<div class="step-body form-grid">
|
||||
<div class="options options-4">
|
||||
{% for p in vm_presets %}
|
||||
<label class="option">
|
||||
<input type="radio" name="preset" value="{{ p.id }}" data-vcpus="{{ p.vcpus }}" data-memory="{{ p.memory }}" data-disk="{{ p.disk_size }}" {% if preset_match.id == p.id %}checked{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-title">{{ p.title }}</span><span class="option-check"></span></span>
|
||||
<span class="option-text">{{ p.hint }}</span>
|
||||
<span class="option-specs"><span class="tag">{{ p.vcpus }} {{ plural(p.vcpus, 'ядро', 'ядра', 'ядер') }}</span><span class="tag">{{ (p.memory / 1024)|int }} ГБ ОЗУ</span><span class="tag">{{ p.disk_size }} ГБ</span></span>
|
||||
</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
<label class="option">
|
||||
<input type="radio" name="preset" value="custom" {% if preset_match.id == 'custom' %}checked{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-title">Своя</span><span class="option-check"></span></span>
|
||||
<span class="option-text">Задать вручную</span>
|
||||
<span class="option-specs"><span class="tag">{{ icon('settings', 'icon-sm') }}Точная настройка</span></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-row-3" data-custom-resources data-visible-when="preset=custom">
|
||||
<div class="field"><label for="vcpus">Ядра</label><input class="input" id="vcpus" type="number" name="vcpus" min="1" max="128" value="{{ form.vcpus }}" required></div>
|
||||
<div class="field"><label for="memory">Память, МБ</label><input class="input" id="memory" type="number" name="memory" min="512" max="262144" step="256" value="{{ form.memory }}" required></div>
|
||||
<div class="field" data-show-when="source_type=iso"><label for="disk_size">Диск, ГБ</label><input class="input" id="disk_size" type="number" name="disk_size" min="4" max="4096" value="{{ form.disk_size }}" required></div>
|
||||
</div>
|
||||
{% if profile.virtualization_warning %}{{ alert('warning', 'На этом сервере нет аппаратного ускорения — машины будут заметно медленнее.') }}{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card step-card">
|
||||
<div class="step-head"><span class="step-num">3</span><div><h2>Сеть</h2><p>Как машина будет выходить в интернет</p></div></div>
|
||||
<div class="step-body form-grid">
|
||||
<div class="options" style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr))">
|
||||
<label class="option">
|
||||
<input type="radio" name="network_mode" value="nat" {% if form.network_mode != 'bridge' %}checked{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-icon">{{ icon('shield-check') }}</span>{{ badge('Рекомендуем', 'brand', False) }}</span>
|
||||
<span class="option-title">Автоматически</span>
|
||||
<span class="option-text">Машина получит адрес сама и выйдет в интернет через сервер. Снаружи её не видно, пока вы не откроете доступ.</span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="option">
|
||||
<input type="radio" name="network_mode" value="bridge" {% if form.network_mode == 'bridge' %}checked{% endif %} {% if not profile.bridge_available %}disabled{% endif %}>
|
||||
<span class="option-body">
|
||||
<span class="option-top"><span class="option-icon">{{ icon('network') }}</span><span class="option-check"></span></span>
|
||||
<span class="option-title">В локальной сети</span>
|
||||
<span class="option-text">{% if profile.bridge_available %}Машина станет отдельным устройством в вашей сети и получит адрес от роутера.{% else %}Недоступно: на сервере не настроен сетевой мост br0.{% endif %}</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<details class="advanced">
|
||||
<summary>{{ icon('wrench', 'icon-sm') }}Дополнительные настройки<span class="chev">{{ icon('chevron-down', 'icon-sm') }}</span></summary>
|
||||
<div class="advanced-body form-grid">
|
||||
<div class="form-row">
|
||||
<label>
|
||||
<span>Источник VM</span>
|
||||
<select id="source-type" name="source_type" required>
|
||||
<option value="iso" {% if form.source_type|default('iso') != 'disk_image' %}selected{% endif %}>ISO-установщик</option>
|
||||
{% if disk_feature_available %}
|
||||
<option value="disk_image" {% if form.source_type|default('iso') == 'disk_image' %}selected{% endif %}>Готовый диск .img / .raw / .qcow2</option>
|
||||
{% endif %}
|
||||
<div class="field">
|
||||
<label for="guest_arch">Архитектура</label>
|
||||
<select class="select" id="guest_arch" name="guest_arch">
|
||||
{% for arch in arch_options %}<option value="{{ arch.value }}" {% if form.guest_arch == arch.value %}selected{% endif %}>{{ arch.label }}</option>{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Архитектура VM</span>
|
||||
<select name="guest_arch" required>
|
||||
{% if arch_options is defined and arch_options %}
|
||||
{% for arch in arch_options %}
|
||||
<option value="{{ arch.value }}" {% if form.guest_arch == arch.value %}selected{% endif %}>{{ arch.label }}</option>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<option value="x86_64" {% if form.guest_arch|default('x86_64') == 'x86_64' %}selected{% endif %}>x86_64 / amd64</option>
|
||||
<option value="aarch64" {% if form.guest_arch|default('x86_64') == 'aarch64' %}selected{% endif %}>ARM64 / aarch64</option>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="boot_order">Порядок загрузки</label>
|
||||
<select class="select" id="boot_order" name="boot_order">
|
||||
{% for opt in boot_options %}<option value="{{ opt.value }}" {% if form.boot_order == opt.value %}selected{% endif %}>{{ opt.label }}</option>{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label>
|
||||
<span>RAM, MB</span>
|
||||
<input type="number" name="memory" min="512" max="262144" step="512" value="{{ form.memory }}" required>
|
||||
</label>
|
||||
<label>
|
||||
<span>CPU</span>
|
||||
<input type="number" name="vcpus" min="1" max="128" value="{{ form.vcpus }}" required>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label id="disk-size-row">
|
||||
<span>Диск, GB</span>
|
||||
<input type="number" name="disk_size" min="4" max="4096" value="{{ form.disk_size }}" required>
|
||||
</label>
|
||||
|
||||
<label id="iso-source-row">
|
||||
<span id="source-image-label">ISO образ</span>
|
||||
<select name="iso_path" {% if isos %}required{% endif %}>
|
||||
{% for iso in isos %}
|
||||
<option value="{{ iso.path }}" {% if form.iso_path == iso.path %}selected{% endif %}>{{ iso.name }} — {{ iso.size }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{% if disk_feature_available %}
|
||||
<div id="disk-image-source-row" class="form-subcard">
|
||||
<label>
|
||||
<span id="disk-image-label">Готовый образ диска</span>
|
||||
<select name="disk_image_path">
|
||||
{% for image in disk_images %}
|
||||
<option value="{{ image.path }}" {% if form.disk_image_path == image.path %}selected{% endif %}>{{ image.name }} — {{ image.size }} — {{ image.format }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" name="replace_existing_disk" value="1" {% if form.replace_existing_disk == '1' %}checked{% endif %}>
|
||||
<span>Заменить существующий диск VM, если остался после неудачной установки</span>
|
||||
</label>
|
||||
<div class="muted small-note">Опция нужна, если предыдущая попытка создания VM оборвалась и оставила хвост в /var/lib/virtuality/images.</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<label>
|
||||
<span>Режим сети</span>
|
||||
<select name="network_mode" required>
|
||||
<option value="nat" {% if form.network_mode != 'bridge' %}selected{% endif %}>VPS NAT Router — virtuality-nat</option>
|
||||
<option value="bridge" {% if form.network_mode == 'bridge' %}selected{% endif %}>Bridge — br0 / локальная сеть</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<span>Bridge для режима Bridge</span>
|
||||
<input type="text" name="bridge" value="{{ form.bridge }}" placeholder="br0">
|
||||
</label>
|
||||
|
||||
<div id="source-mode-notice" class="notice">
|
||||
Для обычных ISO выбирай x86_64 на ПК/VPS. Для Raspberry/Orange Pi образов обычно нужен ARM64/aarch64 и источник “Готовый диск”.
|
||||
</div>
|
||||
|
||||
<button id="create-vm-button" type="submit" class="primary wide">Создать виртуальную машину</button>
|
||||
{% if not isos %}
|
||||
<div id="iso-missing-warning" class="alert danger">Для режима ISO сначала загрузи ISO-образ в ISO-менеджере.</div>
|
||||
{% endif %}
|
||||
{% if disk_feature_available and not disk_images %}
|
||||
<div id="disk-image-missing-warning" class="alert danger">Для режима готового диска сначала загрузи .img, .raw или .qcow2 в разделе «Диски».</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Архитектура и источник</h2>
|
||||
<a class="link-pill" href="/disk-images">Открыть диски</a>
|
||||
</div>
|
||||
<div class="quick-actions">
|
||||
<div class="big-action static">
|
||||
<strong>x86_64 / amd64</strong>
|
||||
<span>Обычные ПК, серверы, большинство VPS и стандартные Ubuntu/Debian ISO.</span>
|
||||
</div>
|
||||
<div class="big-action static">
|
||||
<strong>ARM64 / aarch64</strong>
|
||||
<span>На x86-хосте работает как QEMU-эмуляция из готового диска .img/.qcow2. Это медленно, но честно.</span>
|
||||
</div>
|
||||
<div class="big-action static">
|
||||
<strong>Готовый диск</strong>
|
||||
<span>Опция показывается только если backend передал список готовых образов. Так форма не уходит в поломанное состояние.</span>
|
||||
<div class="field">
|
||||
<label for="bridge">Сетевой мост для режима «В локальной сети»</label>
|
||||
<input class="input" id="bridge" type="text" name="bridge" value="{{ form.bridge or 'br0' }}" placeholder="br0">
|
||||
</div>
|
||||
</div>
|
||||
<pre>ISO x86: virt-install --arch x86_64 --cdrom ubuntu.iso
|
||||
IMG ARM: qemu-img convert -O qcow2 image.img VM.qcow2
|
||||
virsh define /tmp/virtuality-VM-arm64.xml && virsh start VM</pre>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</details>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const sourceType = document.getElementById('source-type');
|
||||
const isoRow = document.getElementById('iso-source-row');
|
||||
const diskImageRow = document.getElementById('disk-image-source-row');
|
||||
const diskSizeRow = document.getElementById('disk-size-row');
|
||||
const sourceImageLabel = document.getElementById('source-image-label');
|
||||
const diskImageLabel = document.getElementById('disk-image-label');
|
||||
const sourceModeNotice = document.getElementById('source-mode-notice');
|
||||
const isoWarning = document.getElementById('iso-missing-warning');
|
||||
const diskWarning = document.getElementById('disk-image-missing-warning');
|
||||
const createButton = document.getElementById('create-vm-button');
|
||||
const hasIsos = {{ 'true' if isos else 'false' }};
|
||||
const diskFeatureAvailable = {{ 'true' if disk_feature_available else 'false' }};
|
||||
const hasDiskImages = {{ 'true' if disk_images_available else 'false' }};
|
||||
|
||||
function refreshSourceUI() {
|
||||
const isDisk = diskFeatureAvailable && sourceType.value === 'disk_image';
|
||||
isoRow.style.display = isDisk ? 'none' : 'grid';
|
||||
if (diskImageRow) diskImageRow.style.display = isDisk ? 'grid' : 'none';
|
||||
sourceImageLabel.textContent = isDisk ? 'Готовый образ диска' : 'ISO образ';
|
||||
if (diskImageLabel) diskImageLabel.textContent = 'Готовый образ диска';
|
||||
diskSizeRow.style.opacity = isDisk ? '.45' : '1';
|
||||
diskSizeRow.querySelector('span').textContent = isDisk ? 'Диск, GB — не используется при импорте' : 'Диск, GB';
|
||||
sourceModeNotice.textContent = isDisk
|
||||
? 'Выбран источник “Готовый диск”: Virtuality импортирует .img/.raw/.qcow2 в новый qcow2-диск VM. Поле “Диск, GB” не используется.'
|
||||
: 'Выбран источник “ISO-установщик”: Virtuality создаст новый диск указанного размера и запустит установку с ISO.';
|
||||
if (isoWarning) isoWarning.style.display = !isDisk && !hasIsos ? 'block' : 'none';
|
||||
if (diskWarning) diskWarning.style.display = isDisk && !hasDiskImages ? 'block' : 'none';
|
||||
createButton.disabled = isDisk ? !hasDiskImages : !hasIsos;
|
||||
}
|
||||
|
||||
sourceType.addEventListener('change', refreshSourceUI);
|
||||
refreshSourceUI();
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<aside class="summary">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Итого</h2></div>
|
||||
<div class="card-body" style="padding-top:8px;padding-bottom:8px">
|
||||
<div class="summary-row"><span>Название</span><strong data-summary="name">—</strong></div>
|
||||
<div class="summary-row"><span>Система</span><strong data-summary="source">—</strong></div>
|
||||
<div class="summary-row"><span>Процессор</span><strong data-summary="cpu">—</strong></div>
|
||||
<div class="summary-row"><span>Память</span><strong data-summary="memory">—</strong></div>
|
||||
<div class="summary-row"><span>Диск</span><strong data-summary="disk">—</strong></div>
|
||||
<div class="summary-row"><span>Сеть</span><strong data-summary="network">—</strong></div>
|
||||
</div>
|
||||
<div class="card-footer" style="display:grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" data-create-button data-busy="Создаём машину…">{{ icon('zap') }}Создать машину</button>
|
||||
<p class="subtle small" style="text-align:center">Вы увидите прогресс, а затем сможете открыть экран машины</p>
|
||||
</div>
|
||||
</article>
|
||||
</aside>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
+227
-379
@@ -1,389 +1,237 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ vm.name }} — {{ app_name }}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<style>
|
||||
.vm-four-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-bottom: 14px; }
|
||||
.vm-four-grid .card { min-width: 0; height: calc(100% - 14px); }
|
||||
.vm-four-grid .card-head { align-items: flex-start; }
|
||||
.vm-four-grid h2 { font-size: 16px; line-height: 1.2; }
|
||||
.vm-four-grid .form-row { grid-template-columns: 1fr; }
|
||||
.vm-four-grid .compact-actions { justify-content: flex-start; }
|
||||
.vm-four-grid .vm-control-panel { display: grid; grid-template-columns: 1fr; gap: 12px; }
|
||||
.vm-four-grid .autostart-indicator { width: 100%; }
|
||||
.vm-visual-grid { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; margin-bottom: 14px; }
|
||||
.visual-card-body { display: grid; gap: 12px; }
|
||||
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
|
||||
.metric-tile { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(2,6,23,.32); min-width: 0; }
|
||||
.metric-tile strong { display: block; margin-top: 5px; font-size: 20px; line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }
|
||||
.metric-tile span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
|
||||
.chart-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
|
||||
.donut { --value: 0; --donut-color: var(--accent); width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--donut-color) calc(var(--value) * 1%), rgba(148,163,184,.16) 0); position: relative; }
|
||||
.donut::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--panel-solid); opacity: .95; }
|
||||
.donut-value { position: relative; z-index: 1; font-size: 18px; font-weight: 950; }
|
||||
.bar-list { display: grid; gap: 10px; }
|
||||
.bar-item { display: grid; gap: 6px; }
|
||||
.bar-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
|
||||
.mini-bar { height: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: rgba(148,163,184,.12); }
|
||||
.mini-bar span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
|
||||
.visual-list { display: grid; gap: 9px; }
|
||||
.visual-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(2,6,23,.32); }
|
||||
.visual-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(56,189,248,.13); color: var(--accent); font-weight: 950; }
|
||||
.visual-item b { display: block; font-size: 14px; overflow-wrap: anywhere; }
|
||||
.visual-item small { color: var(--muted); line-height: 1.35; }
|
||||
.visual-empty { padding: 12px; border: 1px dashed var(--line-strong); border-radius: 15px; color: var(--muted); }
|
||||
.raw-details { margin-top: 12px; }
|
||||
.raw-details summary { cursor: pointer; color: var(--muted); font-weight: 900; }
|
||||
.raw-details pre { max-height: 260px; }
|
||||
html[data-theme="macos"] .metric-tile, html[data-theme="macos"] .visual-item { background: #f7f7fa; border-color: rgba(60,60,67,.10); }
|
||||
html[data-theme="macos"] .donut::before { background: #fff; }
|
||||
html[data-theme="macos"] .visual-empty { border-color: rgba(60,60,67,.18); }
|
||||
@media (max-width: 1500px) { .vm-four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vm-visual-grid { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 980px) { .vm-four-grid, .metric-strip { grid-template-columns: 1fr; } .chart-row { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="v-layout">
|
||||
{% set is_running = 'running' in vm.dominfo|lower %}
|
||||
{% set is_autostart = vm.autostart_enabled|default(false) %}
|
||||
{% set autostart_label = 'enabled' if is_autostart else 'disabled' %}
|
||||
{% set rs = resource_settings|default({}) %}
|
||||
{% include "_sidebar.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% from "_ui.html" import icon, badge, vm_badge, alert %}
|
||||
{% set page_title = vm.name %}
|
||||
{% set s = (vm.info.state or ('running' if 'running' in vm.dominfo|lower else 'shut off'))|vm_state %}
|
||||
{% set rs = resource_settings|default({}) %}
|
||||
{% set has_ip = vm.ip and vm.ip not in ('—', 'not available') %}
|
||||
|
||||
<main class="v-main">
|
||||
<header class="v-topbar">
|
||||
<div>
|
||||
<div class="v-title">{{ vm.name }}</div>
|
||||
<div class="v-subtitle">Детали виртуальной машины</div>
|
||||
{% block page_header %}
|
||||
<div class="page-header" data-live-vm="{{ vm.name }}" data-running="{{ '1' if s.running else '0' }}" data-reload-on-change>
|
||||
<div>
|
||||
<div class="eyebrow"><a href="/">{{ icon('arrow-left', 'icon-sm') }} Все машины</a></div>
|
||||
<div class="title-row">
|
||||
<span class="vm-avatar {{ 'on' if s.running else '' }}" style="width:48px;height:48px">{{ icon('monitor', 'icon-lg') }}<span class="status-dot {{ s.tone }}" data-live="dot"></span></span>
|
||||
<div>
|
||||
<div class="row"><h1>{{ vm.name }}</h1>{{ vm_badge(vm.info.state or s.raw, 'lg') }}</div>
|
||||
<p class="subtle mt-1">{{ vm.info.vcpus }} {{ plural(vm.info.vcpus, 'ядро', 'ядра', 'ядер') }} · {{ vm.info.memory_mb|format_mb }} памяти{% if has_ip %} · <span data-live="ip">{{ vm.ip }}</span>{% endif %}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-actions">
|
||||
{% if s.running %}
|
||||
<a class="btn btn-primary" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">{{ icon('monitor') }}Открыть экран</a>
|
||||
<form method="post" action="/vm/{{ vm.name }}/shutdown" class="inline-form" data-toast="Машина выключается — это может занять до минуты"><button class="btn">{{ icon('power') }}Выключить</button></form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/start" class="inline-form" data-toast="Машина запускается"><button class="btn btn-primary">{{ icon('play') }}Запустить</button></form>
|
||||
{% endif %}
|
||||
<details class="menu">
|
||||
<summary class="btn btn-icon" aria-label="Другие действия">{{ icon('ellipsis') }}</summary>
|
||||
<div class="menu-list">
|
||||
{% if s.running %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/reboot" data-toast="Машина перезагружается"><button class="menu-item">{{ icon('rotate-cw') }}<span>Перезагрузить<small>Мягкая перезагрузка системы</small></span></button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/destroy" data-confirm="Машина будет выключена сразу, как при отключении питания. Несохранённые данные внутри неё пропадут." data-confirm-title="Выключить принудительно?" data-confirm-button="Выключить" data-toast="Машина выключена" data-toast-tone="warning"><button class="menu-item danger">{{ icon('zap') }}<span>Выключить принудительно<small>Если система зависла</small></span></button></form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/delete" data-confirm="Машина {{ vm.name }} и все её диски будут удалены без возможности восстановления." data-confirm-title="Удалить машину?" data-confirm-button="Удалить навсегда" data-toast="Машина {{ vm.name }} удалена" data-toast-tone="warning"><button class="menu-item danger">{{ icon('trash-2') }}<span>Удалить машину<small>Вместе с дисками</small></span></button></form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block alerts %}
|
||||
{% for key in ('resource', 'iso', 'boot') %}
|
||||
{% set msg = {'resource': resource_message, 'iso': iso_message, 'boot': boot_message}[key] %}
|
||||
{% set err = {'resource': resource_error, 'iso': iso_error, 'boot': boot_error}[key] %}
|
||||
{% if msg %}{{ alert('success', msg) }}{% endif %}
|
||||
{% if err %}{{ alert('danger', err) }}{% endif %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav class="tabs" data-tabs role="tablist">
|
||||
<button type="button" data-tab="overview" role="tab">{{ icon('layout-dashboard', 'icon-sm') }}Обзор</button>
|
||||
<button type="button" data-tab="resources" role="tab">{{ icon('cpu', 'icon-sm') }}Ресурсы</button>
|
||||
<button type="button" data-tab="storage" role="tab">{{ icon('hard-drive', 'icon-sm') }}Диски и загрузка</button>
|
||||
<button type="button" data-tab="expert" role="tab">{{ icon('terminal', 'icon-sm') }}Для специалистов</button>
|
||||
</nav>
|
||||
|
||||
<section data-tab-panel="overview" class="grid grid-main">
|
||||
<div class="stack">
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Сводка</h2></div>
|
||||
<div class="card-body">
|
||||
<div class="kv">
|
||||
<div><span>Состояние</span><strong data-live-vm="{{ vm.name }}">{{ vm_badge(vm.info.state or s.raw) }}</strong></div>
|
||||
<div><span>IP-адрес</span><strong>{% if has_ip %}{{ vm.ip }} <button type="button" class="btn btn-ghost btn-icon btn-sm" data-copy="{{ vm.ip }}" title="Скопировать" style="height:22px;width:22px;vertical-align:middle">{{ icon('copy', 'icon-sm') }}</button>{% else %}<span class="subtle">{{ 'Определяется…' if s.running else 'Нет — машина выключена' }}</span>{% endif %}</strong></div>
|
||||
<div><span>Процессор</span><strong>{{ vm.info.vcpus }} {{ plural(vm.info.vcpus, 'ядро', 'ядра', 'ядер') }}</strong></div>
|
||||
<div><span>Память</span><strong>{{ vm.info.memory_mb|format_mb }}</strong></div>
|
||||
<div><span>Архитектура</span><strong>{{ rs.arch|default('—') }}</strong></div>
|
||||
<div><span>Сеть</span><strong>{{ (vm.interface_list[0].source if vm.interface_list else '—')|replace('virtuality-nat', 'Автоматически (NAT)') }}</strong></div>
|
||||
</div>
|
||||
<div class="top-meta">
|
||||
<span>user: {{ user }}</span>
|
||||
<span class="status {{ 'ok' if is_running else 'err' }}">{{ 'running' if is_running else 'shut off' }}</span>
|
||||
<span class="status {{ 'ok' if is_autostart else 'err' }}">autostart: {{ autostart_label }}</span>
|
||||
<a class="link-pill accent" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">Консоль ↗</a>
|
||||
<a class="link-pill" href="/">← Дашборд</a>
|
||||
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Как подключиться</h2><p>Выберите удобный способ</p></div></div>
|
||||
<div class="list">
|
||||
<div class="list-item">
|
||||
<span class="list-icon brand">{{ icon('monitor') }}</span>
|
||||
<div class="grow"><div class="title">Экран в браузере</div><div class="meta">Как монитор, подключённый к машине. Подходит для установки системы.</div></div>
|
||||
{% if s.running %}<a class="btn btn-sm" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">Открыть{{ icon('external-link', 'icon-sm') }}</a>{% else %}<span class="subtle small">Запустите машину</span>{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if resource_message %}<div class="alert success">{{ resource_message }}</div>{% endif %}
|
||||
{% if resource_error %}<div class="alert danger">{{ resource_error }}</div>{% endif %}
|
||||
{% if iso_message %}<div class="alert success">{{ iso_message }}</div>{% endif %}
|
||||
{% if iso_error %}<div class="alert danger">{{ iso_error }}</div>{% endif %}
|
||||
{% if boot_message %}<div class="alert success">{{ boot_message }}</div>{% endif %}
|
||||
{% if boot_error %}<div class="alert danger">{{ boot_error }}</div>{% endif %}
|
||||
|
||||
<section class="grid vm-four-grid">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Управление</h2>
|
||||
<span class="pill">actions</span>
|
||||
</div>
|
||||
<div class="vm-control-panel compact-control-panel">
|
||||
<div>
|
||||
<div class="label">Основные действия</div>
|
||||
<div class="vm-actions compact-actions big-actions">
|
||||
<a class="icon-action accent" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener" title="Открыть консоль"><span>▣</span><em>Консоль</em></a>
|
||||
{% if is_running %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/reboot"><button class="icon-action" title="Перезагрузить"><span>↻</span><em>Reboot</em></button></form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/shutdown"><button class="icon-action" title="Мягко выключить"><span>⏻</span><em>Shutdown</em></button></form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/start"><button class="icon-action success" title="Запустить"><span>▶</span><em>Start</em></button></form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Автозапуск</div>
|
||||
<div class="vm-actions compact-actions big-actions">
|
||||
{% if is_autostart %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/autostart-disable" class="autostart-form">
|
||||
<button class="autostart-indicator on" title="Автозапуск включён. Нажми, чтобы отключить"><span>●</span><strong>Включён</strong><small>Нажми для отключения</small></button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/autostart" class="autostart-form">
|
||||
<button class="autostart-indicator off" title="Автозапуск выключен. Нажми, чтобы включить"><span>●</span><strong>Выключен</strong><small>Нажми для включения</small></button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="muted small-note">Автозапуск поднимает VM вместе с libvirt после перезагрузки хоста.</p>
|
||||
</div>
|
||||
<div class="danger-zone-inline">
|
||||
<div class="label">Опасные действия</div>
|
||||
<div class="vm-actions compact-actions big-actions">
|
||||
{% if is_running %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/destroy"><button class="icon-action danger" title="Принудительно выключить"><span>⚡</span><em>Power off</em></button></form>
|
||||
{% endif %}
|
||||
{% if not is_running %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/delete" onsubmit="return confirm('Удалить VM {{ vm.name }} вместе с дисками?');"><button class="icon-action danger" title="Удалить VM вместе с дисками"><span>🗑</span><em>Delete</em></button></form>
|
||||
{% else %}
|
||||
<span class="muted small-note">Удаление доступно после выключения VM.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>CPU / RAM / Архитектура</h2>
|
||||
<span class="pill">resources</span>
|
||||
</div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/resources" class="form-grid">
|
||||
<div class="form-row">
|
||||
<label>
|
||||
<span>CPU</span>
|
||||
<input type="number" name="vcpus" min="1" max="128" value="{{ rs.vcpus|default(1) }}" {% if is_running %}disabled{% endif %} required>
|
||||
</label>
|
||||
<label>
|
||||
<span>RAM, MB</span>
|
||||
<input type="number" name="memory_mb" min="512" max="262144" step="512" value="{{ rs.memory_mb|default(1024) }}" {% if is_running %}disabled{% endif %} required>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>Архитектура</span>
|
||||
<select name="guest_arch" {% if is_running %}disabled{% endif %}>
|
||||
<option value="keep">Не менять — {{ rs.arch|default('unknown') }}</option>
|
||||
<option value="x86_64">x86_64 / amd64</option>
|
||||
<option value="aarch64">ARM64 / aarch64</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="primary wide" type="submit" {% if is_running %}disabled{% endif %}>Сохранить ресурсы VM</button>
|
||||
</form>
|
||||
{% if is_running %}
|
||||
<p class="muted small-note">CPU/RAM/архитектуру можно менять только при выключенной VM.</p>
|
||||
{% else %}
|
||||
<p class="muted small-note">Изменения применяются через XML VM и virsh define.</p>
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Порядок загрузки</h2>
|
||||
<span class="pill">boot</span>
|
||||
</div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/boot-order" class="form-grid boot-order-form">
|
||||
<input type="hidden" name="boot_order" id="boot-order-value" value="{{ current_boot_order|default('auto') }}">
|
||||
<div class="boot-order-list" id="boot-order-list" data-current="{{ current_boot_order|default('auto') }}">
|
||||
<div class="boot-order-item" draggable="true" data-device="cdrom"><span class="drag-handle">☰</span><div><b>ISO / CD-ROM</b><small>Установщик или rescue-образ</small></div></div>
|
||||
<div class="boot-order-item" draggable="true" data-device="hd"><span class="drag-handle">☰</span><div><b>Диск</b><small>Основной диск VM</small></div></div>
|
||||
<div class="boot-order-item" draggable="true" data-device="network"><span class="drag-handle">☰</span><div><b>Сеть / PXE</b><small>Загрузка по сети</small></div></div>
|
||||
</div>
|
||||
<button class="primary wide" type="submit">Применить порядок</button>
|
||||
</form>
|
||||
<p class="muted small-note">Изменение работает после перезапуска VM.</p>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>ISO-привод</h2>
|
||||
<span class="pill">cdrom</span>
|
||||
</div>
|
||||
{% if current_iso %}
|
||||
<div class="notice">Сейчас подключен ISO: <b>{{ current_iso }}</b></div>
|
||||
{% else %}
|
||||
<div class="muted small-note">ISO сейчас не подключён.</div>
|
||||
{% endif %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/iso/mount" class="form-grid">
|
||||
<label>
|
||||
<span>ISO образ</span>
|
||||
<select name="iso_path" required>
|
||||
{% for iso in isos|default([]) %}
|
||||
<option value="{{ iso.path }}" {% if current_iso == iso.path %}selected{% endif %}>{{ iso.name }} — {{ iso.size }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<button class="primary wide" type="submit" {% if not isos %}disabled{% endif %}>Смонтировать ISO</button>
|
||||
</form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/iso/unmount" class="form-grid" onsubmit="return confirm('Отмонтировать ISO из VM {{ vm.name }}?');">
|
||||
<button type="submit" class="ghost wide" {% if not current_iso %}disabled{% endif %}>Отмонтировать ISO</button>
|
||||
</form>
|
||||
{% if not isos %}
|
||||
<div class="alert danger">ISO-образов пока нет. Сначала загрузи .iso в разделе ISO.</div>
|
||||
{% endif %}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="grid vm-visual-grid">
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Информация</h2>
|
||||
<span class="pill">overview</span>
|
||||
</div>
|
||||
<div class="visual-card-body" id="vm-info-visual"></div>
|
||||
<details class="raw-details">
|
||||
<summary>Технический вывод dominfo</summary>
|
||||
<pre>{{ vm.dominfo }}</pre>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Диски</h2>
|
||||
<span class="pill">storage</span>
|
||||
</div>
|
||||
<div class="visual-card-body" id="vm-disk-visual"></div>
|
||||
<details class="raw-details">
|
||||
<summary>Технический вывод domblklist</summary>
|
||||
<pre>{{ vm.disks }}</pre>
|
||||
</details>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-head">
|
||||
<h2>Сеть</h2>
|
||||
<span class="pill">network</span>
|
||||
</div>
|
||||
<div class="visual-card-body" id="vm-network-visual"></div>
|
||||
<details class="raw-details">
|
||||
<summary>Технический вывод domiflist</summary>
|
||||
<pre>{{ vm.interfaces }}</pre>
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-head">
|
||||
<h2>Консоль</h2>
|
||||
<a class="link-pill accent" href="/vm/{{ vm.name }}/console" target="_blank" rel="noopener">noVNC ↗</a>
|
||||
<div class="list-item">
|
||||
<span class="list-icon">{{ icon('terminal') }}</span>
|
||||
<div class="grow"><div class="title">SSH с этого сервера</div><div class="meta">{% if has_ip %}<code>ssh пользователь@{{ vm.ip }}</code>{% else %}Станет доступно, когда машина получит IP-адрес{% endif %}</div></div>
|
||||
</div>
|
||||
<div class="services">
|
||||
<div class="service-row"><span>VNC display</span><span class="status ok">{{ vm.vnc }}</span></div>
|
||||
<div class="service-row"><span>Host</span><span class="status ok">{{ host_ip }}</span></div>
|
||||
<div class="service-row"><span>Web console</span><span class="status ok">/vm/{{ vm.name }}/console</span></div>
|
||||
<div class="list-item">
|
||||
<span class="list-icon">{{ icon('globe') }}</span>
|
||||
<div class="grow"><div class="title">Доступ из интернета</div><div class="meta">Откройте порт машины наружу: сайт, SSH, удалённый рабочий стол</div></div>
|
||||
<a class="btn btn-sm" href="/network">Настроить</a>
|
||||
</div>
|
||||
<p class="muted small-note">Консоль открывается в новой вкладке и занимает всё окно браузера. VNC наружу открывать не нужно.</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<template id="vm-dominfo-raw">{{ vm.dominfo }}</template>
|
||||
<template id="vm-disks-raw">{{ vm.disks }}</template>
|
||||
<template id="vm-interfaces-raw">{{ vm.interfaces }}</template>
|
||||
<div class="stack">
|
||||
<article class="card">
|
||||
<div class="card-body stack-sm">
|
||||
<form method="post" action="/vm/{{ vm.name }}/{{ 'autostart-disable' if vm.autostart_enabled else 'autostart' }}" class="switch-row" data-no-busy data-toast="{{ 'Автозапуск выключен' if vm.autostart_enabled else 'Машина будет запускаться вместе с сервером' }}">
|
||||
<div class="switch-text"><strong>Автозапуск</strong><span>Запускать машину вместе с сервером</span></div>
|
||||
<button type="submit" class="switch" role="switch" aria-checked="{{ 'true' if vm.autostart_enabled else 'false' }}" aria-label="Автозапуск"></button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
const list = document.getElementById('boot-order-list');
|
||||
const input = document.getElementById('boot-order-value');
|
||||
if (!list || !input) return;
|
||||
const initialMap = { cdrom_disk: ['cdrom','hd','network'], disk_cdrom: ['hd','cdrom','network'], network_disk: ['network','hd','cdrom'], disk: ['hd','cdrom','network'], auto: ['hd','cdrom','network'] };
|
||||
const order = initialMap[list.dataset.current || 'auto'] || initialMap.auto;
|
||||
const nodes = Array.from(list.querySelectorAll('.boot-order-item'));
|
||||
order.forEach(device => { const node = nodes.find(item => item.dataset.device === device); if (node) list.appendChild(node); });
|
||||
function updateValue(){
|
||||
const devices = Array.from(list.querySelectorAll('.boot-order-item')).map(item => item.dataset.device);
|
||||
const first = devices[0]; const second = devices[1];
|
||||
if (first === 'cdrom' && second === 'hd') input.value = 'cdrom_disk';
|
||||
else if (first === 'hd' && second === 'cdrom') input.value = 'disk_cdrom';
|
||||
else if (first === 'network' && second === 'hd') input.value = 'network_disk';
|
||||
else if (first === 'hd') input.value = 'disk';
|
||||
else input.value = 'auto';
|
||||
}
|
||||
let dragged = null;
|
||||
list.addEventListener('dragstart', event => { dragged = event.target.closest('.boot-order-item'); if (!dragged) return; dragged.classList.add('dragging'); event.dataTransfer.effectAllowed = 'move'; });
|
||||
list.addEventListener('dragend', () => { if (dragged) dragged.classList.remove('dragging'); dragged = null; updateValue(); });
|
||||
list.addEventListener('dragover', event => {
|
||||
event.preventDefault();
|
||||
const after = Array.from(list.querySelectorAll('.boot-order-item:not(.dragging)')).find(item => {
|
||||
const box = item.getBoundingClientRect();
|
||||
return event.clientY < box.top + box.height / 2;
|
||||
});
|
||||
if (!dragged) return;
|
||||
if (after) list.insertBefore(dragged, after); else list.appendChild(dragged);
|
||||
});
|
||||
updateValue();
|
||||
})();
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Установочный диск</h2></div>
|
||||
<div class="card-body stack-sm">
|
||||
{% if current_iso %}
|
||||
<div class="upload-file"><span class="list-icon brand">{{ icon('disc-3') }}</span><div class="grow"><strong class="truncate" style="display:block">{{ current_iso.split('/')[-1] }}</strong><span class="subtle small">Вставлен в привод</span></div></div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/iso/unmount" data-confirm="Образ будет извлечён из привода машины." data-confirm-title="Извлечь диск?" data-confirm-button="Извлечь" data-confirm-tone="brand"><button class="btn btn-sm btn-block">{{ icon('x', 'icon-sm') }}Извлечь</button></form>
|
||||
{% else %}
|
||||
<p class="subtle small">Привод пуст. Вставьте образ, чтобы установить систему или загрузиться с диска восстановления.</p>
|
||||
<a class="btn btn-sm btn-block" href="#storage" onclick="document.querySelector('[data-tab=storage]').click()">{{ icon('disc-3', 'icon-sm') }}Вставить образ</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
(function(){
|
||||
function text(id) { const node = document.getElementById(id); return node ? node.textContent.trim() : ''; }
|
||||
function escapeHtml(value) { return String(value || '').replace(/[&<>"]/g, ch => ({'&':'&','<':'<','>':'>','"':'"'}[ch])); }
|
||||
function parseKeyValues(raw) {
|
||||
const data = {};
|
||||
raw.split('\n').forEach(line => {
|
||||
const idx = line.indexOf(':');
|
||||
if (idx < 0) return;
|
||||
const key = line.slice(0, idx).trim().toLowerCase();
|
||||
const value = line.slice(idx + 1).trim();
|
||||
if (key) data[key] = value;
|
||||
});
|
||||
return data;
|
||||
}
|
||||
function kibToGiB(value) {
|
||||
const n = Number(String(value || '').replace(/[^0-9.]/g, ''));
|
||||
if (!Number.isFinite(n) || n <= 0) return 0;
|
||||
return n / 1024 / 1024;
|
||||
}
|
||||
function renderInfo() {
|
||||
const box = document.getElementById('vm-info-visual');
|
||||
if (!box) return;
|
||||
const data = parseKeyValues(text('vm-dominfo-raw'));
|
||||
const cpu = data['cpu(s)'] || data['cpu'] || '—';
|
||||
const state = data['state'] || 'unknown';
|
||||
const osType = data['os type'] || '—';
|
||||
const maxMem = kibToGiB(data['max memory']);
|
||||
const usedMem = kibToGiB(data['used memory']);
|
||||
const memPct = maxMem > 0 ? Math.max(0, Math.min(100, Math.round((usedMem / maxMem) * 100))) : 0;
|
||||
const cpuPct = Math.max(8, Math.min(100, Number(cpu) ? Number(cpu) * 12 : 18));
|
||||
box.innerHTML = `
|
||||
<div class="metric-strip">
|
||||
<div class="metric-tile"><span>Состояние</span><strong>${escapeHtml(state)}</strong></div>
|
||||
<div class="metric-tile"><span>CPU</span><strong>${escapeHtml(cpu)}</strong></div>
|
||||
<div class="metric-tile"><span>Тип ОС</span><strong>${escapeHtml(osType)}</strong></div>
|
||||
<section data-tab-panel="resources" hidden>
|
||||
<article class="card" style="max-width:720px">
|
||||
<div class="card-header"><div><h2>Процессор и память</h2><p>Сколько ресурсов сервера получает машина</p></div></div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/resources" data-toast="Настройки сохранены">
|
||||
<div class="card-body form-grid">
|
||||
{% if not rs.is_shutoff %}
|
||||
{{ alert('info', 'Выключите машину, чтобы изменить процессор и память.') }}
|
||||
{% endif %}
|
||||
<div class="form-row">
|
||||
<div class="field">
|
||||
<label for="vcpus">Ядра процессора</label>
|
||||
<input class="input" id="vcpus" type="number" name="vcpus" min="1" max="128" value="{{ rs.vcpus|default(1) }}" {% if not rs.is_shutoff %}disabled{% endif %} required>
|
||||
</div>
|
||||
<div class="chart-row">
|
||||
<div class="donut" style="--value:${memPct};--donut-color:var(--accent)"><div class="donut-value">${memPct}%</div></div>
|
||||
<div class="bar-list">
|
||||
<div class="bar-item"><div class="bar-head"><span>Память</span><b>${usedMem ? usedMem.toFixed(1) : '—'} / ${maxMem ? maxMem.toFixed(1) : '—'} GB</b></div><div class="mini-bar"><span style="--value:${memPct}%"></span></div></div>
|
||||
<div class="bar-item"><div class="bar-head"><span>vCPU capacity</span><b>${escapeHtml(cpu)} vCPU</b></div><div class="mini-bar"><span style="--value:${cpuPct}%"></span></div></div>
|
||||
<div class="bar-item"><div class="bar-head"><span>Автозапуск</span><b>${escapeHtml(data['autostart'] || '—')}</b></div><div class="mini-bar"><span style="--value:${String(data['autostart'] || '').includes('enable') ? 100 : 18}%"></span></div></div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
function renderDisks() {
|
||||
const box = document.getElementById('vm-disk-visual');
|
||||
if (!box) return;
|
||||
const lines = text('vm-disks-raw').split('\n').map(line => line.trim()).filter(Boolean);
|
||||
const rows = [];
|
||||
lines.forEach(line => {
|
||||
if (/^(type|[-\s]+$)/i.test(line)) return;
|
||||
const parts = line.split(/\s+/);
|
||||
if (parts.length < 4) return;
|
||||
rows.push({ type: parts[0], device: parts[1], target: parts[2], source: parts.slice(3).join(' ') });
|
||||
});
|
||||
if (!rows.length) { box.innerHTML = '<div class="visual-empty">Диски не найдены в выводе libvirt.</div>'; return; }
|
||||
box.innerHTML = `<div class="visual-list">${rows.map(row => `
|
||||
<div class="visual-item">
|
||||
<div class="visual-icon">▣</div>
|
||||
<div><b>${escapeHtml(row.target)}</b><small>${escapeHtml(row.device)} · ${escapeHtml(row.type)}<br>${escapeHtml(row.source)}</small></div>
|
||||
<span class="status ok">disk</span>
|
||||
</div>`).join('')}</div>`;
|
||||
}
|
||||
function renderNetwork() {
|
||||
const box = document.getElementById('vm-network-visual');
|
||||
if (!box) return;
|
||||
const lines = text('vm-interfaces-raw').split('\n').map(line => line.trim()).filter(Boolean);
|
||||
const rows = [];
|
||||
lines.forEach(line => {
|
||||
if (/^(interface|[-\s]+$)/i.test(line)) return;
|
||||
const parts = line.split(/\s+/);
|
||||
if (parts.length < 5) return;
|
||||
rows.push({ iface: parts[0], type: parts[1], source: parts[2], model: parts[3], mac: parts[4] });
|
||||
});
|
||||
if (!rows.length) { box.innerHTML = '<div class="visual-empty">Сетевые интерфейсы не найдены в выводе libvirt.</div>'; return; }
|
||||
box.innerHTML = `<div class="visual-list">${rows.map(row => `
|
||||
<div class="visual-item">
|
||||
<div class="visual-icon">⇄</div>
|
||||
<div><b>${escapeHtml(row.iface)}</b><small>${escapeHtml(row.type)} · ${escapeHtml(row.source)} · ${escapeHtml(row.model)}<br>${escapeHtml(row.mac)}</small></div>
|
||||
<span class="status ok">link</span>
|
||||
</div>`).join('')}</div>`;
|
||||
}
|
||||
renderInfo();
|
||||
renderDisks();
|
||||
renderNetwork();
|
||||
})();
|
||||
</script>
|
||||
<script src="/static/panel.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
<div class="field">
|
||||
<label for="memory_mb">Память</label>
|
||||
<div class="input-group"><input class="input" id="memory_mb" type="number" name="memory_mb" min="512" max="262144" step="512" value="{{ rs.memory_mb|default(1024) }}" {% if not rs.is_shutoff %}disabled{% endif %} required><span class="addon">МБ</span></div>
|
||||
<span class="hint">1024 МБ = 1 ГБ</span>
|
||||
</div>
|
||||
</div>
|
||||
<details class="advanced">
|
||||
<summary>{{ icon('wrench', 'icon-sm') }}Архитектура процессора<span class="chev">{{ icon('chevron-down', 'icon-sm') }}</span></summary>
|
||||
<div class="advanced-body field">
|
||||
<select class="select" name="guest_arch" {% if not rs.is_shutoff %}disabled{% endif %}>
|
||||
<option value="keep">Не менять — {{ rs.arch|default('неизвестно') }}</option>
|
||||
<option value="x86_64">x86_64 — обычные ПК и серверы</option>
|
||||
<option value="aarch64">ARM64 — образы для Raspberry Pi и ARM-серверов</option>
|
||||
</select>
|
||||
<span class="hint">Меняйте, только если точно знаете, зачем: система внутри может перестать загружаться.</span>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="card-footer"><button type="submit" class="btn btn-primary" {% if not rs.is_shutoff %}disabled{% endif %}>Сохранить</button></div>
|
||||
</form>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section data-tab-panel="storage" class="grid grid-2" hidden>
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Порядок загрузки</h2><p>С чего машина пытается загрузиться в первую очередь</p></div></div>
|
||||
<form method="post" action="/vm/{{ vm.name }}/boot-order" data-toast="Порядок загрузки сохранён">
|
||||
<input type="hidden" name="boot_order" value="{{ current_boot_order|default('auto') }}" data-boot-value>
|
||||
<div class="list" data-boot-list data-current="{{ current_boot_order|default('auto') }}">
|
||||
{% for dev, title, hint, ic in [('hd', 'Жёсткий диск', 'Установленная система', 'hard-drive'), ('cdrom', 'Установочный диск', 'ISO-образ в приводе', 'disc-3'), ('network', 'Сеть (PXE)', 'Загрузка по сети', 'network')] %}
|
||||
<div class="list-item" data-device="{{ dev }}">
|
||||
<span class="list-icon"><b data-position>{{ loop.index }}</b></span>
|
||||
{{ icon(ic) }}
|
||||
<div class="grow"><div class="title">{{ title }}</div><div class="meta">{{ hint }}</div></div>
|
||||
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-move="up" aria-label="Выше"><svg class="icon icon-sm" style="transform:rotate(180deg)"><use href="/static/icons.svg#i-chevron-down"></use></svg></button>
|
||||
<button type="button" class="btn btn-ghost btn-icon btn-sm" data-move="down" aria-label="Ниже">{{ icon('chevron-down', 'icon-sm') }}</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-footer"><span class="subtle small" style="margin-right:auto">Применится при следующем запуске</span><button type="submit" class="btn btn-primary btn-sm">Сохранить порядок</button></div>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><div><h2>Привод CD/DVD</h2><p>Вставьте образ, чтобы установить систему</p></div></div>
|
||||
<div class="card-body stack-sm">
|
||||
{% if isos %}
|
||||
<form method="post" action="/vm/{{ vm.name }}/iso/mount" class="stack-sm" data-toast="Образ вставлен в привод">
|
||||
<div class="field">
|
||||
<label for="iso_path">Образ диска</label>
|
||||
<select class="select" id="iso_path" name="iso_path" required>
|
||||
{% for iso in isos %}<option value="{{ iso.path }}" {% if current_iso == iso.path %}selected{% endif %}>{{ iso.name }} · {{ iso.size }}</option>{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary btn-sm" type="submit">{{ icon('disc-3', 'icon-sm') }}Вставить</button>
|
||||
{% if current_iso %}<button class="btn btn-sm" type="submit" form="iso-eject">Извлечь текущий</button>{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" action="/vm/{{ vm.name }}/iso/unmount" id="iso-eject" data-toast="Образ извлечён"></form>
|
||||
{% else %}
|
||||
<p class="subtle">Образов пока нет.</p>
|
||||
<a class="btn btn-sm" href="/iso">{{ icon('cloud-upload', 'icon-sm') }}Загрузить образ</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Диски</h2></div>
|
||||
<div class="list">
|
||||
{% for disk in vm.disk_list %}
|
||||
<div class="list-item"><span class="list-icon">{{ icon('disc-3' if disk.is_cdrom else 'hard-drive') }}</span><div class="grow"><div class="title truncate">{{ disk.name }}</div><div class="meta">{{ disk.label }} · {{ disk.target }}</div></div></div>
|
||||
{% else %}
|
||||
<div class="list-item subtle">Дисков не найдено</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<div class="card-header"><h2>Сетевые карты</h2></div>
|
||||
<div class="list">
|
||||
{% for nic in vm.interface_list %}
|
||||
<div class="list-item"><span class="list-icon">{{ icon('network') }}</span><div class="grow"><div class="title">{{ nic.source|replace('virtuality-nat', 'Автоматическая сеть (NAT)') }}</div><div class="meta mono">{{ nic.mac }} · {{ nic.model }}</div></div></div>
|
||||
{% else %}
|
||||
<div class="list-item subtle">Сетевых карт не найдено</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section data-tab-panel="expert" class="stack" hidden>
|
||||
<div class="kv">
|
||||
<div><span>VNC-дисплей</span><strong class="mono">{{ vm.vnc }}</strong></div>
|
||||
<div><span>Адрес сервера</span><strong class="mono">{{ host_ip }}</strong></div>
|
||||
<div><span>UUID</span><strong class="mono small">{{ vm.info.uuid or '—' }}</strong></div>
|
||||
</div>
|
||||
{% for title, cmd, body in [('Информация о машине', 'virsh dominfo ' ~ vm.name, vm.dominfo), ('Диски', 'virsh domblklist ' ~ vm.name ~ ' --details', vm.disks), ('Сетевые интерфейсы', 'virsh domiflist ' ~ vm.name, vm.interfaces)] %}
|
||||
<div>
|
||||
<div class="terminal-head"><i></i><i></i><i></i><span style="margin-left:6px">{{ title }} — {{ cmd }}</span></div>
|
||||
<pre class="terminal">{{ body or '—' }}</pre>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Ссылка в новой задаче
Block a user
© 2026 StackWorks