Выбор образа при создании машины карточками: название системы, размер, дата загрузки и поиск, когда образов много
Этот коммит содержится в:
+8
-2
@@ -577,7 +577,12 @@ def list_iso_files() -> list[dict[str, str]]:
|
||||
except OSError:
|
||||
size_mb = 0
|
||||
updated = "unknown"
|
||||
files.append({"name": item.name, "path": str(item), "size": f"{size_mb:.1f} MB", "updated": updated, "os_type": catalog.guess_os_type(iso_volume_label(item), item.name)})
|
||||
label = iso_volume_label(item)
|
||||
files.append({
|
||||
"name": item.name, "path": str(item), "size": f"{size_mb:.1f} MB", "updated": updated,
|
||||
"os_type": catalog.guess_os_type(label, item.name), "system": catalog.iso_system_name(label, item.name),
|
||||
"size_label": presenters.format_bytes(stat.st_size) if size_mb else "", "date_label": presenters.short_date(stat.st_mtime) if size_mb else "",
|
||||
})
|
||||
return files
|
||||
|
||||
|
||||
@@ -635,7 +640,8 @@ def list_disk_image_files() -> list[dict[str, str]]:
|
||||
size_gb = 0
|
||||
updated = "unknown"
|
||||
entry = catalog.entry_for_filename(item.name)
|
||||
files.append({"name": item.name, "path": str(item), "format": item.suffix.lower().lstrip('.'), "size": f"{size_gb:.2f} GB", "updated": updated, "login": cloudinit.default_user(item.name), "title": entry["title"] if entry else "", "catalog_id": entry["id"] if entry else ""})
|
||||
files.append({"name": item.name, "path": str(item), "format": item.suffix.lower().lstrip('.'), "size": f"{size_gb:.2f} GB", "updated": updated, "login": cloudinit.default_user(item.name), "title": entry["title"] if entry else "", "catalog_id": entry["id"] if entry else "",
|
||||
"size_label": presenters.format_bytes(stat.st_size) if size_gb else "", "date_label": presenters.short_date(stat.st_mtime) if size_gb else ""})
|
||||
return files
|
||||
|
||||
|
||||
|
||||
@@ -88,6 +88,25 @@ def guess_os_type(volume_label: str, filename: str) -> str:
|
||||
return "windows10" if WINDOWS10_RE.search(text) else "windows11"
|
||||
|
||||
|
||||
# Название системы для карточки образа в форме создания машины.
|
||||
DISTROS = (
|
||||
("UBUNTU", "Ubuntu"), ("DEBIAN", "Debian"), ("FEDORA", "Fedora"), ("ALPINE", "Alpine"), ("CENTOS", "CentOS"),
|
||||
("ROCKY", "Rocky Linux"), ("ALMALINUX", "AlmaLinux"), ("OPENSUSE", "openSUSE"), ("ARCHLINUX", "Arch Linux"),
|
||||
("LINUXMINT", "Linux Mint"), ("KALI", "Kali Linux"), ("ASTRA", "Astra Linux"), ("REDOS", "РЕД ОС"),
|
||||
("PROXMOX", "Proxmox"), ("TRUENAS", "TrueNAS"), ("FREEBSD", "FreeBSD"), ("PFSENSE", "pfSense"),
|
||||
("OPNSENSE", "OPNsense"), ("OPENWRT", "OpenWrt"),
|
||||
)
|
||||
|
||||
|
||||
def iso_system_name(volume_label: str, filename: str) -> str:
|
||||
"""«Windows 10», «Ubuntu»… или "", если систему по образу не узнать."""
|
||||
guess = guess_os_type(volume_label, filename)
|
||||
if guess:
|
||||
return "Windows 11" if guess == "windows11" else "Windows 10"
|
||||
words = set(re.sub(r"[^A-Z0-9]+", " ", f"{volume_label} {filename}".upper()).split())
|
||||
return next((title for key, title in DISTROS if key in words), "")
|
||||
|
||||
|
||||
def cloud_image(image_id: str) -> dict[str, Any] | None:
|
||||
return next((item for item in CLOUD_IMAGES if item["id"] == image_id), None)
|
||||
|
||||
|
||||
@@ -242,6 +242,17 @@ def port_service(port: int) -> str:
|
||||
return WELL_KNOWN_PORTS.get(int(port or 0), "")
|
||||
|
||||
|
||||
MONTHS_GENITIVE = ("января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря")
|
||||
|
||||
|
||||
def short_date(timestamp: float, now: datetime | None = None) -> str:
|
||||
"""«27 сентября», для прошлых лет — «27 сентября 2025»."""
|
||||
moment = datetime.fromtimestamp(timestamp)
|
||||
now = now or datetime.now()
|
||||
text = f"{moment.day} {MONTHS_GENITIVE[moment.month - 1]}"
|
||||
return text if moment.year == now.year else f"{text} {moment.year}"
|
||||
|
||||
|
||||
def format_bytes(value: int | float) -> str:
|
||||
value = float(value or 0)
|
||||
for unit in ("Б", "КБ", "МБ", "ГБ", "ТБ"):
|
||||
|
||||
@@ -333,6 +333,25 @@ hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
|
||||
.option input:checked + .option-body .option-check { border: 5px solid var(--brand); }
|
||||
.option-title { font-weight: 650; font-size: 14px; }
|
||||
.option-text { color: var(--text-2); font-size: 12.5px; }
|
||||
/* Выбор образа в форме создания машины */
|
||||
.image-picker { display: grid; gap: 10px; }
|
||||
.image-list { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
|
||||
.image-option { position: relative; display: block; cursor: pointer; }
|
||||
.image-option[hidden] { display: none; }
|
||||
.image-option input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.image-option-body { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, background .15s; }
|
||||
.image-option:hover .image-option-body { border-color: var(--border-strong); }
|
||||
.image-option input:checked + .image-option-body { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); box-shadow: 0 0 0 4px var(--focus); }
|
||||
.image-option input:focus-visible + .image-option-body { box-shadow: 0 0 0 4px var(--focus); }
|
||||
.image-option input:checked + .image-option-body .option-check { border: 5px solid var(--brand); }
|
||||
.image-option .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
|
||||
.image-title { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.image-meta { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
@media (max-width: 560px) {
|
||||
.image-option .list-icon { display: none; }
|
||||
.image-title, .image-meta { white-space: normal; overflow-wrap: anywhere; }
|
||||
}
|
||||
|
||||
/* Расписание копий: день недели и список машин видны, только когда нужны (без :has — видны всегда). */
|
||||
.schedule-form:has(input[name=frequency][value=daily]:checked) [data-when=weekly],
|
||||
.schedule-form:has(input[name=machines][value=all]:checked) [data-when=chosen] { display: none; }
|
||||
|
||||
@@ -435,7 +435,8 @@
|
||||
const field = (name) => form.elements[name];
|
||||
const value = (name) => { const el = field(name); if (!el) return ''; if (el instanceof RadioNodeList) return el.value; return el.value; };
|
||||
const setSummary = (key, text) => $$(`[data-summary="${key}"]`).forEach((el) => { el.textContent = text || '—'; });
|
||||
const optionText = (select) => select && select.selectedIndex >= 0 ? select.options[select.selectedIndex].dataset.label || select.options[select.selectedIndex].text : '';
|
||||
// Образы выбираются карточками (радиокнопки): берём отмеченную.
|
||||
const picked = (name) => $(`input[name="${name}"]:checked`, form);
|
||||
|
||||
function sync() {
|
||||
const source = value('source_type');
|
||||
@@ -454,9 +455,7 @@
|
||||
// Default login of the chosen cloud image (ubuntu, debian, …) until the user types a name.
|
||||
const login = field('ci_user');
|
||||
if (login && login.dataset.autoLogin === '1') {
|
||||
const image = field('disk_image_path');
|
||||
const option = image && image.selectedIndex >= 0 ? image.options[image.selectedIndex] : null;
|
||||
login.value = option?.dataset.login || 'admin';
|
||||
login.value = picked('disk_image_path')?.dataset.login || 'admin';
|
||||
}
|
||||
const preset = value('preset');
|
||||
const custom = preset === 'custom';
|
||||
@@ -469,7 +468,7 @@
|
||||
$$('[data-custom-resources] input', form).forEach((input) => { input.readOnly = !custom; });
|
||||
const memory = Number(value('memory')) || 0;
|
||||
setSummary('name', value('name'));
|
||||
setSummary('source', source === 'disk_image' ? optionText(field('disk_image_path')) : optionText(field('iso_path')));
|
||||
setSummary('source', picked(source === 'disk_image' ? 'disk_image_path' : 'iso_path')?.dataset.label || '');
|
||||
setSummary('cpu', `${value('vcpus')} ${Number(value('vcpus')) === 1 ? 'ядро' : 'ядра'}`);
|
||||
setSummary('memory', memory >= 1024 ? `${+(memory / 1024).toFixed(1)} ГБ` : `${memory} МБ`);
|
||||
setSummary('disk', `${value('disk_size')} ГБ`);
|
||||
@@ -480,9 +479,7 @@
|
||||
}
|
||||
// Установщик Windows панель узнаёт по ISO (data-os) и сама выбирает тип, пока пользователь не выбрал его руками.
|
||||
const guessOs = () => {
|
||||
const select = field('iso_path');
|
||||
const option = select && select.selectedIndex >= 0 ? select.options[select.selectedIndex] : null;
|
||||
const guess = option?.dataset.os || '';
|
||||
const guess = picked('iso_path')?.dataset.os || '';
|
||||
const hint = $('[data-os-hint]', form);
|
||||
if (form.dataset.osManual) return;
|
||||
const radio = $(`input[name=os_type][value="${guess || 'linux'}"]`, form);
|
||||
@@ -495,6 +492,17 @@
|
||||
if (event.target.name === 'iso_path') guessOs();
|
||||
sync();
|
||||
});
|
||||
// Поиск по образам, когда их много.
|
||||
$$('[data-image-picker]', form).forEach((picker) => {
|
||||
const search = $('[data-image-search]', picker);
|
||||
if (!search) return;
|
||||
search.addEventListener('input', () => {
|
||||
const query = search.value.trim().toLowerCase();
|
||||
let shown = 0;
|
||||
$$('.image-option', picker).forEach((item) => { item.hidden = Boolean(query) && !item.dataset.search.includes(query); shown += item.hidden ? 0 : 1; });
|
||||
$('[data-image-empty]', picker).hidden = shown > 0;
|
||||
});
|
||||
});
|
||||
guessOs();
|
||||
sync();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
{% from "_ui.html" import icon %}
|
||||
{#- Выбор образа карточками. Ожидает: picker_name (имя поля), picker_items (list_iso_files или list_disk_image_files),
|
||||
picker_selected (путь выбранного), picker_icon. Поиск появляется, когда образов больше шести. -#}
|
||||
<div class="image-picker" data-image-picker>
|
||||
{% if picker_items|length > 6 %}
|
||||
<input class="input" type="search" placeholder="Найти образ по названию" aria-label="Найти образ" data-image-search>
|
||||
{% endif %}
|
||||
<div class="image-list" role="radiogroup">
|
||||
{% for item in picker_items %}
|
||||
{% set title = item.title or item.name %}
|
||||
<label class="image-option" data-search="{{ (title ~ ' ' ~ item.name ~ ' ' ~ (item.system or ''))|lower }}">
|
||||
<input type="radio" name="{{ picker_name }}" value="{{ item.path }}" data-label="{{ title }}" data-os="{{ item.os_type or '' }}" data-login="{{ item.login or '' }}" {% if picker_selected == item.path or (not picker_selected and loop.first) %}checked{% endif %}>
|
||||
<span class="image-option-body">
|
||||
<span class="list-icon brand">{{ icon(picker_icon) }}</span>
|
||||
<span class="grow">
|
||||
<span class="image-title">{{ title }}</span>
|
||||
<span class="image-meta">{% if item.title %}{{ item.name }} · {% endif %}{{ item.size_label or item.size }}{% if item.date_label %} · загружен {{ item.date_label }}{% endif %}</span>
|
||||
</span>
|
||||
{% if item.system %}<span class="tag">{{ item.system }}</span>{% endif %}
|
||||
<span class="option-check"></span>
|
||||
</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p class="subtle small" data-image-empty hidden>Образов с таким названием нет.</p>
|
||||
</div>
|
||||
@@ -47,12 +47,10 @@
|
||||
</div>
|
||||
|
||||
<div class="field" data-show-when="source_type=iso">
|
||||
<label for="iso_path">Установочный образ</label>
|
||||
<span class="label">Установочный образ</span>
|
||||
{% if isos %}
|
||||
<select class="select" id="iso_path" name="iso_path">
|
||||
{% for iso in isos %}<option value="{{ iso.path }}" data-label="{{ iso.name }}" data-os="{{ iso.os_type }}" {% if form.iso_path == iso.path %}selected{% endif %}>{{ iso.name }} · {{ iso.size }}</option>{% endfor %}
|
||||
</select>
|
||||
<span class="hint">Нужен другой? <a href="/iso">Загрузите образ</a>.</span>
|
||||
{% with picker_name = 'iso_path', picker_items = isos, picker_selected = form.iso_path, picker_icon = 'disc-3' %}{% include "_image_picker.html" %}{% endwith %}
|
||||
<span class="hint">Образы хранятся на сервере отдельно от машин, один образ можно ставить сколько угодно раз. Нужен другой? <a href="/iso">Загрузите образ</a>.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="field" data-show-when="source_type=iso">
|
||||
@@ -69,11 +67,9 @@
|
||||
<span class="hint">От этого зависят виртуальные устройства: Windows получит совместимые диск и сеть, Windows 11 — UEFI и TPM.</span>
|
||||
</div>
|
||||
<div class="field" data-show-when="source_type=disk_image">
|
||||
<label for="disk_image_path">Образ системы</label>
|
||||
<span class="label">Образ системы</span>
|
||||
{% 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.title or image.name }}" data-login="{{ image.login }}" {% if form.disk_image_path == image.path %}selected{% endif %}>{{ image.title or image.name }} · {{ image.size }}</option>{% endfor %}
|
||||
</select>
|
||||
{% with picker_name = 'disk_image_path', picker_items = disk_images, picker_selected = form.disk_image_path, picker_icon = 'hard-drive' %}{% include "_image_picker.html" %}{% endwith %}
|
||||
<span class="hint">Образ будет скопирован — оригинал останется для других машин.</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Ссылка в новой задаче
Block a user
© 2026 StackWorks