v0.11.0 — Phase C: Storage Init Wizard, Data Migration & Startup Fix
- Startup ping: fire heartbeat + health + hub report immediately on boot
(5s delay after scheduler start, instead of waiting 5-15 min for first tick)
- Storage init wizard: new internal/storage/ package with disk scanning
(lsblk -J), format+mount pipeline (sfdisk → mkfs.ext4 → blkid → fstab →
mount → chown), safety guards (system disk detection, confirmation "FORMÁZÁS"),
progress channel, auto-register in settings.json
- Data migration: MigrateAppData() with rsync --info=progress2 progress parsing,
stop/rsync/update-config/start flow, rollback on failure, old data preserved
- New pages: /settings/storage/init (wizard), /stacks/{name}/migrate (migration)
- New API routes: /api/storage/{scan,init,init/status,migrate,migrate/status}
- Deploy page: storage info section for deployed apps (path, size, free, migrate link)
- Settings page: "Mozgatás" button per app in storage path details
- Container: privileged: true, /dev:/dev, /etc/fstab:/host-fstab, /run/udev:/run/udev:ro
- Dockerfile: add util-linux, e2fsprogs, rsync, parted for disk ops
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -30,6 +30,34 @@
|
||||
<div class="alert alert-info">
|
||||
Ez az alkalmazás már telepítve van. Az alábbi beállítások csak olvashatók.
|
||||
</div>
|
||||
{{if .StorageInfo}}
|
||||
<div class="deploy-storage-info">
|
||||
<h4>Adattárolás</h4>
|
||||
<div class="settings-grid">
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Tárhely</span>
|
||||
<span class="settings-value">{{.StorageInfo.Label}} <span class="mono" style="color:var(--text-secondary)">({{.StorageInfo.Path}})</span></span>
|
||||
</div>
|
||||
{{if .StorageInfo.DataSizeHuman}}
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Adatméret</span>
|
||||
<span class="settings-value mono">{{.StorageInfo.DataSizeHuman}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .StorageInfo.FreeHuman}}
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Szabad hely</span>
|
||||
<span class="settings-value mono">{{.StorageInfo.FreeHuman}} ({{printf "%.0f" .StorageInfo.FreePercent}}% szabad)</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .OtherStoragePaths}}
|
||||
<a href="/stacks/{{.Meta.Slug}}/migrate" class="btn btn-sm btn-outline" style="margin-top:.75rem">
|
||||
📦 Mozgatás másik tárolóra
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if and (not .AlreadyDeployed) .MemoryInfo}}
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
{{define "migrate"}}
|
||||
{{template "layout_start" .}}
|
||||
|
||||
<div class="page-header">
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
<a href="/stacks/{{.Meta.Slug}}/deploy" class="btn btn-sm btn-outline">← Vissza</a>
|
||||
<h2>{{.Meta.DisplayName}} — Adatáthelyezés</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="migrate-form-card">
|
||||
<h3>Adatok áthelyezése másik tárolóra</h3>
|
||||
|
||||
<div class="settings-grid" style="margin-bottom:1.5rem">
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Jelenlegi tárhely</span>
|
||||
<span class="settings-value mono">{{.CurrentLabel}} ({{.CurrentHDDPath}})</span>
|
||||
</div>
|
||||
{{if .DataSizeHuman}}
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Adatméret</span>
|
||||
<span class="settings-value mono">{{.DataSizeHuman}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="target-path">Cél tárhely <span class="required">*</span></label>
|
||||
<select id="target-path" class="form-control">
|
||||
{{range .OtherPaths}}
|
||||
<option value="{{.Path}}">{{.Label}} ({{.Path}}) — {{.FreeHuman}} szabad</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning" style="margin-bottom:1.5rem">
|
||||
<strong>Figyelmeztetések:</strong>
|
||||
<ul style="margin:.5rem 0 0 1rem;padding:0">
|
||||
<li>Az alkalmazás a mozgatás idejére leáll</li>
|
||||
<li>Nagy adatmennyiségnél ez percekig tarthat</li>
|
||||
<li>A régi adatok megmaradnak biztonsági másolatként</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="migrate-error" class="alert alert-error" style="display:none;margin-bottom:1rem"></div>
|
||||
|
||||
<div class="form-actions" style="gap:.75rem">
|
||||
<button class="btn btn-primary" onclick="startMigrate()">📦 Mozgatás indítása</button>
|
||||
<a href="/stacks/{{.Meta.Slug}}/deploy" class="btn btn-outline">Mégsem</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="migrate-progress-card" style="display:none">
|
||||
<h3>Adatok áthelyezése...</h3>
|
||||
|
||||
<div class="disk-progress-steps" id="mig-steps">
|
||||
<div class="disk-step" id="mstep-stopping"><span class="disk-step-icon">○</span> Alkalmazás leállítása</div>
|
||||
<div class="disk-step" id="mstep-copying"><span class="disk-step-icon">○</span> Adatok másolása</div>
|
||||
<div class="disk-step" id="mstep-updating"><span class="disk-step-icon">○</span> Konfiguráció frissítése</div>
|
||||
<div class="disk-step" id="mstep-starting"><span class="disk-step-icon">○</span> Alkalmazás indítása</div>
|
||||
<div class="disk-step" id="mstep-done"><span class="disk-step-icon">○</span> Kész</div>
|
||||
</div>
|
||||
|
||||
<div class="disk-progress-bar-wrap" style="margin-top:1.5rem">
|
||||
<div class="system-bar" style="height:12px;border-radius:6px">
|
||||
<div class="system-bar-fill system-bar-green" id="mig-progress-bar" style="width:0%;transition:width .4s ease;height:12px;border-radius:6px"></div>
|
||||
</div>
|
||||
<span class="mono form-hint" id="mig-progress-pct">0%</span>
|
||||
</div>
|
||||
|
||||
<div id="mig-progress-msg" class="form-hint" style="margin-top:.75rem"></div>
|
||||
<div id="mig-elapsed" class="form-hint mono" style="margin-top:.25rem"></div>
|
||||
<div id="mig-progress-error" class="alert alert-error" style="display:none;margin-top:1rem"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="migrate-done-card" style="display:none">
|
||||
<h3>✅ Adatáthelyezés kész!</h3>
|
||||
<p style="margin-top:.75rem;color:var(--text-secondary)">
|
||||
Az alkalmazás az új tárolóról fut.<br>
|
||||
A régi adatok a korábbi helyen megmaradtak biztonsági másolatként.
|
||||
</p>
|
||||
<div style="margin-top:1.5rem;display:flex;gap:.75rem">
|
||||
<a href="/stacks" class="btn btn-primary">Alkalmazások megtekintése</a>
|
||||
<a href="/settings" class="btn btn-outline">Beállítások</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var stackName = '{{.Stack.Name}}';
|
||||
var migPollTimer = null;
|
||||
|
||||
function startMigrate() {
|
||||
var targetPath = document.getElementById('target-path').value;
|
||||
if (!targetPath) {
|
||||
document.getElementById('migrate-error').textContent = 'Válasszon cél tárhelyet.';
|
||||
document.getElementById('migrate-error').style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('migrate-form-card').style.display = 'none';
|
||||
document.getElementById('migrate-progress-card').style.display = 'block';
|
||||
|
||||
fetch('/api/storage/migrate', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({stack_name: stackName, target_path: targetPath})
|
||||
})
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(data) {
|
||||
if (!data.ok) {
|
||||
showMigError(data.error || 'Ismeretlen hiba');
|
||||
return;
|
||||
}
|
||||
migPollTimer = setInterval(pollMigProgress, 2000);
|
||||
})
|
||||
.catch(function(e) {
|
||||
showMigError('Hálózati hiba: ' + e.message);
|
||||
});
|
||||
}
|
||||
|
||||
var migStepOrder = ['stopping','copying','updating','starting','done'];
|
||||
|
||||
function pollMigProgress() {
|
||||
fetch('/api/storage/migrate/status')
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(data) {
|
||||
if (!data.ok) return;
|
||||
updateMigUI(data);
|
||||
if (data.done) {
|
||||
clearInterval(migPollTimer);
|
||||
if (data.step === 'done') {
|
||||
showMigDone();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function(){});
|
||||
}
|
||||
|
||||
function updateMigUI(data) {
|
||||
var currentIdx = migStepOrder.indexOf(data.step);
|
||||
if (currentIdx < 0 && data.step === 'rolling_back') {
|
||||
currentIdx = 1; // show during copy step
|
||||
}
|
||||
|
||||
migStepOrder.forEach(function(s, i) {
|
||||
var el = document.getElementById('mstep-' + s);
|
||||
if (!el) return;
|
||||
var icon = el.querySelector('.disk-step-icon');
|
||||
if (i < currentIdx) {
|
||||
el.className = 'disk-step disk-step-done';
|
||||
icon.textContent = '✅';
|
||||
} else if (i === currentIdx) {
|
||||
el.className = 'disk-step disk-step-active';
|
||||
icon.textContent = (data.step === 'error' || data.step === 'rolling_back') ? '❌' : '⏳';
|
||||
} else {
|
||||
el.className = 'disk-step';
|
||||
icon.textContent = '○';
|
||||
}
|
||||
});
|
||||
|
||||
var pct = data.pct || 0;
|
||||
document.getElementById('mig-progress-bar').style.width = pct + '%';
|
||||
document.getElementById('mig-progress-pct').textContent = pct + '%';
|
||||
document.getElementById('mig-progress-msg').textContent = data.msg || '';
|
||||
|
||||
if (data.elapsed_sec) {
|
||||
document.getElementById('mig-elapsed').textContent = data.elapsed_sec + ' másodperce fut';
|
||||
}
|
||||
|
||||
if (data.step === 'error' || (data.error && data.error !== '')) {
|
||||
showMigError(data.error || data.msg || 'Ismeretlen hiba');
|
||||
}
|
||||
}
|
||||
|
||||
function showMigError(msg) {
|
||||
clearInterval(migPollTimer);
|
||||
document.getElementById('mig-progress-error').textContent = 'Hiba: ' + msg;
|
||||
document.getElementById('mig-progress-error').style.display = 'block';
|
||||
document.getElementById('migrate-progress-card').querySelector('h3').textContent = 'Áthelyezés sikertelen';
|
||||
}
|
||||
|
||||
function showMigDone() {
|
||||
document.getElementById('migrate-progress-card').style.display = 'none';
|
||||
document.getElementById('migrate-done-card').style.display = 'block';
|
||||
document.getElementById('migrate-done-card').scrollIntoView({behavior:'smooth'});
|
||||
}
|
||||
</script>
|
||||
|
||||
{{template "layout_end" .}}
|
||||
{{end}}
|
||||
@@ -117,6 +117,7 @@
|
||||
<div class="storage-app-row">
|
||||
<a href="/apps/{{.Stack}}" class="storage-app-link">{{.Name}}</a>
|
||||
{{if .SizeHuman}}<span class="mono form-hint">{{.SizeHuman}}</span>{{end}}
|
||||
<a href="/stacks/{{.Stack}}/migrate" class="btn btn-xs btn-outline" title="Adatok áthelyezése másik tárolóra">📦 Mozgatás</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -163,8 +164,12 @@
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div style="margin-top:1rem;display:flex;gap:.75rem;flex-wrap:wrap">
|
||||
<a href="/settings/storage/init" class="btn btn-sm btn-outline">🔧 Új meghajtó inicializálása</a>
|
||||
</div>
|
||||
|
||||
<details class="storage-add-details">
|
||||
<summary class="btn btn-sm btn-outline" style="margin-top:1rem;cursor:pointer">Új adattároló hozzáadása</summary>
|
||||
<summary class="btn btn-sm btn-outline" style="margin-top:.75rem;cursor:pointer">Már csatlakoztatott tárhely hozzáadása kézzel</summary>
|
||||
<form method="POST" action="/settings/storage/add" class="storage-add-form">
|
||||
<div class="form-group">
|
||||
<label for="storage_path">Elérési út</label>
|
||||
|
||||
@@ -0,0 +1,325 @@
|
||||
{{define "storage_init"}}
|
||||
{{template "layout_start" .}}
|
||||
|
||||
<div class="page-header">
|
||||
<div style="display:flex;align-items:center;gap:.5rem">
|
||||
<a href="/settings" class="btn btn-sm btn-outline">← Vissza</a>
|
||||
<h2>Új meghajtó inicializálása</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="wizard-scan">
|
||||
<h3>1. Meghajtók keresése</h3>
|
||||
<p class="settings-card-desc">Keresse meg a rendszerhez csatlakoztatott, még nem inicializált meghajtókat.</p>
|
||||
|
||||
<button class="btn btn-primary" onclick="scanDisks()" id="scan-btn">🔍 Meghajtók keresése</button>
|
||||
<div id="scan-error" class="alert alert-error" style="display:none;margin-top:1rem"></div>
|
||||
|
||||
<div id="scan-result" style="display:none;margin-top:1.5rem">
|
||||
<div id="available-disks"></div>
|
||||
<div id="system-disks-note" style="display:none;margin-top:1rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="wizard-configure" style="display:none">
|
||||
<h3>2. Konfiguráció</h3>
|
||||
<p class="settings-card-desc">Adja meg az inicializálás paramétereit.</p>
|
||||
|
||||
<form id="init-form">
|
||||
<input type="hidden" id="selected-device" name="device_path">
|
||||
<input type="hidden" id="create-partition" name="create_partition" value="true">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Kiválasztott eszköz</label>
|
||||
<span class="settings-value mono" id="selected-device-display"></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="mount-name">Csatlakoztatási név <span class="required">*</span></label>
|
||||
<div class="form-inline">
|
||||
<span class="mono" style="opacity:.6">/mnt/</span>
|
||||
<input type="text" id="mount-name" class="form-control" placeholder="hdd_1"
|
||||
pattern="[a-zA-Z0-9_]+" required style="max-width:160px">
|
||||
</div>
|
||||
<span class="form-hint">Pl. hdd_1 → a meghajtó a /mnt/hdd_1 útvonalra kerül</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="storage-label">Megnevezés</label>
|
||||
<input type="text" id="storage-label" class="form-control" placeholder="Külső HDD 1TB" maxlength="50">
|
||||
</div>
|
||||
|
||||
<label class="toggle" style="margin-bottom:1.5rem">
|
||||
<input type="checkbox" id="set-default" checked>
|
||||
<span class="toggle-label">Beállítás alapértelmezett adattárolóként új telepítéseknél</span>
|
||||
</label>
|
||||
|
||||
<div class="alert alert-error" style="margin-bottom:1.5rem">
|
||||
<strong>⚠️ FIGYELEM:</strong> A meghajtó <strong>ÖSSZES</strong> adata törlődik!<br>
|
||||
Ez a művelet <strong>NEM vonható vissza.</strong>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm-input">A folytatáshoz írja be: <strong>FORMÁZÁS</strong></label>
|
||||
<input type="text" id="confirm-input" class="form-control" placeholder="FORMÁZÁS"
|
||||
autocomplete="off" style="max-width:200px">
|
||||
</div>
|
||||
|
||||
<div class="form-actions" style="gap:.75rem">
|
||||
<button type="submit" class="btn btn-danger-outline" id="init-btn" disabled>
|
||||
Inicializálás indítása
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline" onclick="resetWizard()">Mégsem</button>
|
||||
</div>
|
||||
<div id="init-error" class="alert alert-error" style="display:none;margin-top:1rem"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="wizard-progress" style="display:none">
|
||||
<h3>3. Inicializálás folyamatban...</h3>
|
||||
|
||||
<div class="disk-progress-steps" id="progress-steps">
|
||||
<div class="disk-step" id="pstep-validating"><span class="disk-step-icon">○</span> Eszköz ellenőrzése</div>
|
||||
<div class="disk-step" id="pstep-partitioning"><span class="disk-step-icon">○</span> Partíció létrehozása</div>
|
||||
<div class="disk-step" id="pstep-formatting"><span class="disk-step-icon">○</span> Fájlrendszer formázása (ext4)</div>
|
||||
<div class="disk-step" id="pstep-mounting"><span class="disk-step-icon">○</span> Csatlakoztatás</div>
|
||||
<div class="disk-step" id="pstep-permissions"><span class="disk-step-icon">○</span> Mappák és jogosultságok</div>
|
||||
<div class="disk-step" id="pstep-done"><span class="disk-step-icon">○</span> Regisztráció</div>
|
||||
</div>
|
||||
|
||||
<div class="disk-progress-bar-wrap" style="margin-top:1.5rem">
|
||||
<div class="system-bar" style="height:12px;border-radius:6px">
|
||||
<div class="system-bar-fill system-bar-green" id="progress-bar" style="width:0%;transition:width .4s ease;height:12px;border-radius:6px"></div>
|
||||
</div>
|
||||
<span class="mono form-hint" id="progress-pct">0%</span>
|
||||
</div>
|
||||
|
||||
<div id="progress-msg" class="form-hint" style="margin-top:.75rem"></div>
|
||||
<div id="progress-error" class="alert alert-error" style="display:none;margin-top:1rem"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card" id="wizard-done" style="display:none">
|
||||
<h3>✅ Meghajtó sikeresen inicializálva!</h3>
|
||||
<div id="done-info" class="settings-grid" style="margin-top:1rem">
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Útvonal</span>
|
||||
<span class="settings-value mono" id="done-path"></span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/settings" class="btn btn-primary" style="margin-top:1.5rem">← Vissza a Beállításokhoz</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var selectedDevice = null;
|
||||
var pollTimer = null;
|
||||
|
||||
function scanDisks() {
|
||||
var btn = document.getElementById('scan-btn');
|
||||
var errEl = document.getElementById('scan-error');
|
||||
var resultEl = document.getElementById('scan-result');
|
||||
btn.textContent = 'Keresés...';
|
||||
btn.disabled = true;
|
||||
errEl.style.display = 'none';
|
||||
resultEl.style.display = 'none';
|
||||
|
||||
fetch('/api/storage/scan', {method:'POST'})
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(data) {
|
||||
btn.textContent = '🔍 Meghajtók keresése';
|
||||
btn.disabled = false;
|
||||
if (!data.ok) {
|
||||
errEl.textContent = data.error || 'Ismeretlen hiba';
|
||||
errEl.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
renderScanResult(data);
|
||||
resultEl.style.display = 'block';
|
||||
})
|
||||
.catch(function(e) {
|
||||
btn.textContent = '🔍 Meghajtók keresése';
|
||||
btn.disabled = false;
|
||||
errEl.textContent = 'Hálózati hiba: ' + e.message;
|
||||
errEl.style.display = 'block';
|
||||
});
|
||||
}
|
||||
|
||||
function renderScanResult(data) {
|
||||
var availEl = document.getElementById('available-disks');
|
||||
var sysEl = document.getElementById('system-disks-note');
|
||||
|
||||
if (!data.available || data.available.length === 0) {
|
||||
availEl.innerHTML = '<div class="empty-state" style="padding:1rem">Nem található inicializálható meghajtó.</div>';
|
||||
} else {
|
||||
var html = '<h4 style="margin-bottom:.75rem">Talált meghajtók (' + data.available.length + '):</h4>';
|
||||
data.available.forEach(function(disk) {
|
||||
var partInfo = '';
|
||||
if (disk.Partitions && disk.Partitions.length > 0) {
|
||||
partInfo = disk.Partitions.map(function(p) {
|
||||
return p.Name + (p.FSType ? ' (' + p.FSType + ')' : ' (nincs fájlrendszer)') + (p.MountPoint ? ' → ' + p.MountPoint : '');
|
||||
}).join(', ');
|
||||
}
|
||||
html += '<div class="storage-path-item" style="cursor:pointer;border:2px solid transparent" ' +
|
||||
'onclick="selectDisk(this, \'' + disk.Path + '\', ' + JSON.stringify(disk.CreatePartition !== false) + ')" ' +
|
||||
'data-path="' + disk.Path + '" id="disk-' + disk.Name + '">' +
|
||||
'<div class="storage-path-header"><div class="storage-path-info">' +
|
||||
'<span class="storage-path-label">○ ' + disk.Path + ' — ' + (disk.Size || '?') + '</span>' +
|
||||
(disk.Model ? '<span class="storage-path-path">' + disk.Model + '</span>' : '') +
|
||||
(partInfo ? '<span class="form-hint">' + partInfo + '</span>' : '<span class="form-hint">Nincs partíció</span>') +
|
||||
'</div></div></div>';
|
||||
});
|
||||
availEl.innerHTML = html;
|
||||
}
|
||||
|
||||
if (data.system && data.system.length > 0) {
|
||||
var sysNames = data.system.map(function(d){ return d.Path + ' (' + (d.Size||'?') + ')'; }).join(', ');
|
||||
sysEl.innerHTML = '<span class="form-hint">A rendszermeghajtó(k) nem választhatók: ' + sysNames + '</span>';
|
||||
sysEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function selectDisk(el, path, needsPartition) {
|
||||
// Deselect all
|
||||
document.querySelectorAll('[data-path]').forEach(function(d) {
|
||||
d.style.border = '2px solid transparent';
|
||||
d.querySelector('.storage-path-label').textContent = d.querySelector('.storage-path-label').textContent.replace('● ', '○ ');
|
||||
});
|
||||
// Select this
|
||||
el.style.border = '2px solid var(--accent-blue)';
|
||||
el.querySelector('.storage-path-label').textContent = el.querySelector('.storage-path-label').textContent.replace('○ ', '● ');
|
||||
|
||||
selectedDevice = path;
|
||||
document.getElementById('selected-device').value = path;
|
||||
document.getElementById('create-partition').value = needsPartition ? 'true' : 'false';
|
||||
document.getElementById('selected-device-display').textContent = path;
|
||||
|
||||
// Show configure step
|
||||
document.getElementById('wizard-configure').style.display = 'block';
|
||||
document.getElementById('wizard-configure').scrollIntoView({behavior:'smooth'});
|
||||
}
|
||||
|
||||
function resetWizard() {
|
||||
selectedDevice = null;
|
||||
document.getElementById('wizard-configure').style.display = 'none';
|
||||
document.getElementById('init-error').style.display = 'none';
|
||||
document.getElementById('confirm-input').value = '';
|
||||
document.getElementById('init-btn').disabled = true;
|
||||
}
|
||||
|
||||
// Enable init button only when confirmation is correct
|
||||
document.getElementById('confirm-input').addEventListener('input', function() {
|
||||
document.getElementById('init-btn').disabled = (this.value !== 'FORMÁZÁS');
|
||||
});
|
||||
|
||||
document.getElementById('init-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
if (document.getElementById('confirm-input').value !== 'FORMÁZÁS') {
|
||||
return;
|
||||
}
|
||||
|
||||
var mountName = document.getElementById('mount-name').value.trim();
|
||||
var label = document.getElementById('storage-label').value.trim();
|
||||
var setDefault = document.getElementById('set-default').checked;
|
||||
|
||||
if (!mountName) {
|
||||
document.getElementById('init-error').textContent = 'A csatlakoztatási nevet meg kell adni.';
|
||||
document.getElementById('init-error').style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('wizard-scan').style.display = 'none';
|
||||
document.getElementById('wizard-configure').style.display = 'none';
|
||||
document.getElementById('wizard-progress').style.display = 'block';
|
||||
document.getElementById('wizard-progress').scrollIntoView({behavior:'smooth'});
|
||||
|
||||
var body = {
|
||||
device_path: selectedDevice,
|
||||
mount_name: mountName,
|
||||
label: label,
|
||||
create_partition: document.getElementById('create-partition').value === 'true',
|
||||
set_default: setDefault,
|
||||
confirm: 'FORMÁZÁS'
|
||||
};
|
||||
|
||||
fetch('/api/storage/init', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(body)
|
||||
}).then(function(r){ return r.json(); })
|
||||
.then(function(data) {
|
||||
if (!data.ok) {
|
||||
showProgressError(data.error || 'Ismeretlen hiba');
|
||||
return;
|
||||
}
|
||||
// Start polling
|
||||
pollTimer = setInterval(pollProgress, 1500);
|
||||
})
|
||||
.catch(function(e) {
|
||||
showProgressError('Hálózati hiba: ' + e.message);
|
||||
});
|
||||
});
|
||||
|
||||
var stepOrder = ['validating','partitioning','formatting','mounting','permissions','done'];
|
||||
|
||||
function pollProgress() {
|
||||
fetch('/api/storage/init/status')
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(data) {
|
||||
if (!data.ok) return;
|
||||
updateProgressUI(data);
|
||||
if (data.done) {
|
||||
clearInterval(pollTimer);
|
||||
if (data.step === 'done') {
|
||||
showDone('/mnt/' + document.getElementById('mount-name').value.trim());
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function(){});
|
||||
}
|
||||
|
||||
function updateProgressUI(data) {
|
||||
// Update step icons
|
||||
var currentIdx = stepOrder.indexOf(data.step);
|
||||
stepOrder.forEach(function(s, i) {
|
||||
var el = document.getElementById('pstep-' + s);
|
||||
if (!el) return;
|
||||
var icon = el.querySelector('.disk-step-icon');
|
||||
if (i < currentIdx) {
|
||||
el.className = 'disk-step disk-step-done';
|
||||
icon.textContent = '✅';
|
||||
} else if (i === currentIdx) {
|
||||
el.className = 'disk-step disk-step-active';
|
||||
icon.textContent = data.step === 'error' ? '❌' : '⏳';
|
||||
} else {
|
||||
el.className = 'disk-step';
|
||||
icon.textContent = '○';
|
||||
}
|
||||
});
|
||||
|
||||
// Progress bar
|
||||
var pct = data.pct || 0;
|
||||
document.getElementById('progress-bar').style.width = pct + '%';
|
||||
document.getElementById('progress-pct').textContent = pct + '%';
|
||||
document.getElementById('progress-msg').textContent = data.msg || '';
|
||||
|
||||
if (data.step === 'error' || data.error) {
|
||||
showProgressError(data.error || data.msg || 'Ismeretlen hiba');
|
||||
}
|
||||
}
|
||||
|
||||
function showProgressError(msg) {
|
||||
clearInterval(pollTimer);
|
||||
document.getElementById('progress-error').textContent = 'Hiba: ' + msg;
|
||||
document.getElementById('progress-error').style.display = 'block';
|
||||
document.getElementById('wizard-progress').querySelector('h3').textContent = 'Inicializálás sikertelen';
|
||||
}
|
||||
|
||||
function showDone(mountPath) {
|
||||
document.getElementById('wizard-progress').style.display = 'none';
|
||||
document.getElementById('wizard-done').style.display = 'block';
|
||||
document.getElementById('done-path').textContent = mountPath;
|
||||
document.getElementById('wizard-done').scrollIntoView({behavior:'smooth'});
|
||||
}
|
||||
</script>
|
||||
|
||||
{{template "layout_end" .}}
|
||||
{{end}}
|
||||
@@ -2127,3 +2127,84 @@ a.stat-card:hover {
|
||||
.restore-label { min-width: auto; }
|
||||
.restore-select { max-width: 100%; }
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Storage Init Wizard & Migration UI
|
||||
=================================================================== */
|
||||
|
||||
.disk-progress-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.disk-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
padding: .5rem .75rem;
|
||||
border-radius: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: .9rem;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.disk-step-icon {
|
||||
font-size: 1.1rem;
|
||||
min-width: 1.4rem;
|
||||
}
|
||||
|
||||
.disk-step.disk-step-done {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.disk-step.disk-step-active {
|
||||
background: rgba(0, 136, 204, 0.08);
|
||||
color: var(--accent-light);
|
||||
border: 1px solid rgba(0, 136, 204, 0.2);
|
||||
}
|
||||
|
||||
.disk-progress-bar-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.disk-progress-bar-wrap .system-bar {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.deploy-storage-info {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.deploy-storage-info h4 {
|
||||
font-size: .95rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.storage-app-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .75rem;
|
||||
padding: .35rem 0;
|
||||
}
|
||||
|
||||
.storage-app-link {
|
||||
color: var(--accent-light);
|
||||
text-decoration: none;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.storage-app-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user