D0 Part 3: deploy + backups + monitoring in v2
- deploy.html: stacked memory bar -> meter track with two segments (committed solid blue, new app 35%-opacity blue), neutral threshold ticks; integration status badges -> tags; meta pills -> metarows; 3-step deploy progress icons -> sprite (check/x/triangle-alert/ spinning rotate-cw); emoji -> icons or plain text incl. the JS confirm string. - backups.html: storage bars -> meters, disconnected drives render an empty track with a neutral 'Leválasztva' (no red), drive-state badges -> warn tags, checkmark/warning glyphs -> sprite icons, JS flash/info strings de-emojified. - monitoring.html: bars -> meters in both template and JS-generated host-storage markup (usageColorClass now emits nominal/warn/crit); Chart.js palette per spec (cpu #2EA8F5, memory #8E7CE8, temp #E0A93E, load #5EC4B6 — categorical data series keep distinct hues); tooltip/ grid/tick colors moved to v2 literals; mem-dist palette rebalanced. - Templates repo-wide: legacy var(--*) names in inline styles and JS string literals renamed to v2 tokens (old names no longer resolve). - style.css: memory-bar family rewritten for the two-segment meter, .ico-spin animation added (reduced-motion respected).
This commit is contained in:
@@ -28,32 +28,32 @@
|
||||
<div class="storage-overview-grid">
|
||||
<div class="storage-bars">
|
||||
{{with $.SystemInfo}}
|
||||
<div class="storage-item">
|
||||
<div class="storage-item meter {{usageColor .DiskPercent}}">
|
||||
<div class="storage-header">
|
||||
<span class="storage-label">Rendszer (/)</span>
|
||||
<span class="storage-value">{{fmtGB .DiskUsedGB}} / {{fmtGB .DiskTotalGB}} ({{printf "%.0f" .DiskPercent}}%)</span>
|
||||
</div>
|
||||
<div class="system-bar">
|
||||
<div class="system-bar-fill {{usageColor .DiskPercent | printf "system-bar-%s"}}" style="width:{{printf "%.1f" .DiskPercent}}%"></div>
|
||||
<div class="meter-track">
|
||||
<div class="meter-fill" style="width:{{printf "%.1f" .DiskPercent}}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{range $.StorageBars}}
|
||||
{{if .Disconnected}}
|
||||
<div class="storage-item storage-disconnected">
|
||||
<div class="storage-item meter meter-empty storage-disconnected">
|
||||
<div class="storage-header">
|
||||
<span class="storage-label">{{.Label}}</span>
|
||||
<span class="storage-value badge-error" style="font-size:.75rem">Leválasztva</span>
|
||||
<span class="storage-value">— <span class="state-text-neutral">Leválasztva</span></span>
|
||||
</div>
|
||||
<div class="system-bar"><div class="system-bar-disconnected"></div></div>
|
||||
<div class="meter-track"></div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="storage-item">
|
||||
<div class="storage-item meter {{usageColor .Percent}}">
|
||||
<div class="storage-header">
|
||||
<span class="storage-label">{{.Label}}</span>
|
||||
<span class="storage-value">{{fmtGB .UsedGB}} / {{fmtGB .TotalGB}} ({{printf "%.0f" .Percent}}%)</span>
|
||||
</div>
|
||||
<div class="system-bar">
|
||||
<div class="system-bar-fill {{usageColor .Percent | printf "system-bar-%s"}}" style="width:{{printf "%.1f" .Percent}}%"></div>
|
||||
<div class="meter-track">
|
||||
<div class="meter-fill" style="width:{{printf "%.1f" .Percent}}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -107,7 +107,7 @@
|
||||
{{if .CanTrigger}}
|
||||
<div class="schedule-actions" style="margin-top:1rem">
|
||||
<button class="btn btn-sm btn-primary" id="wg-backup-btn" onclick="triggerGuestBackup()" {{if .Running}}disabled{{end}}>Mentés most</button>
|
||||
{{if .StopMode}}<span class="form-hint" style="margin-left:.5rem">⚠ A mentés idejére az alkalmazások rövid időre leállnak.</span>
|
||||
{{if .StopMode}}<span class="form-hint" style="margin-left:.5rem"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> A mentés idejére az alkalmazások rövid időre leállnak.</span>
|
||||
{{else}}<span class="form-hint" style="margin-left:.5rem">Pillanatkép-mód: az alkalmazások csak néhány másodpercre állnak le.</span>{{end}}
|
||||
<div id="wg-backup-result" style="margin-top:.6rem"></div>
|
||||
</div>
|
||||
@@ -223,8 +223,8 @@
|
||||
<div class="stat-label">Távoli mentés<br><span class="relative-time">külön hardveren (PBS)</span></div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="stat-card" style="border-left-color: var(--gray);">
|
||||
<div class="stat-value" style="background:var(--gray);-webkit-background-clip:text;background-clip:text;">–</div>
|
||||
<div class="stat-card" style="border-left-color: var(--text-3);">
|
||||
<div class="stat-value" style="background:var(--text-3);-webkit-background-clip:text;background-clip:text;">–</div>
|
||||
<div class="stat-label">Távoli mentés<br><span class="relative-time">nincs beállítva</span></div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -361,7 +361,7 @@
|
||||
<span class="app-backup-row-name">{{.DisplayName}}</span>
|
||||
<div class="app-backup-row-meta">
|
||||
{{if .DriveDisconnected}}
|
||||
<span class="badge badge-error" style="font-size:.7rem">Meghajtó leválasztva</span>
|
||||
<span class="tag tag-warn">Meghajtó leválasztva</span>
|
||||
{{else if .HasHDDData}}
|
||||
{{if .StorageLabel}}<span class="meta-badge meta-badge-storage">{{.StorageLabel}}</span>{{end}}
|
||||
<span class="mono app-backup-size" style="font-size:.8rem">{{.HDDSizeHuman}}</span>
|
||||
@@ -382,13 +382,13 @@
|
||||
<span class="tier-location">helyi</span>
|
||||
{{if .Tier1LastRun}}
|
||||
<span class="layer-last">Utolsó: {{.Tier1LastRun}}
|
||||
{{if eq .Tier1LastStatus "ok"}}<span class="text-ok">✓</span>
|
||||
{{if eq .Tier1LastStatus "ok"}}<span class="text-ok"><svg class="ico ico-sm"><use href="#i-check"/></svg></span>
|
||||
{{else if eq .Tier1LastStatus "error"}}<span class="text-error">✗</span>{{end}}
|
||||
</span>
|
||||
{{end}}
|
||||
<span class="tier-contents">{{.BackupContents}}</span>
|
||||
{{if and .HasDB (eq .Tier1DBStatus "error")}}
|
||||
<span class="text-error" style="font-size:.8rem">⚠ DB dump hiba</span>
|
||||
<span class="text-error" style="font-size:.8rem"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> DB dump hiba</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<!-- Tier 2: Cross-drive backup (opt-in, different device) -->
|
||||
@@ -402,7 +402,7 @@
|
||||
{{else if and .Tier2Configured .Tier2DestDisconnected}}
|
||||
<span class="layer-method" style="opacity:.6">rsync</span>
|
||||
<span class="layer-dest" style="opacity:.6">→ {{.Tier2Dest}}</span>
|
||||
<span class="badge badge-warn" style="font-size:.7rem">Cél meghajtó leválasztva</span>
|
||||
<span class="tag tag-warn">Cél meghajtó leválasztva</span>
|
||||
{{if .Tier2LastRun}}
|
||||
<span class="layer-last" style="opacity:.6">Utolsó: {{.Tier2LastRun}}</span>
|
||||
{{end}}
|
||||
@@ -413,7 +413,7 @@
|
||||
{{else if and .Tier2Configured .Tier2DestInactive}}
|
||||
<span class="layer-method" style="opacity:.6">rsync</span>
|
||||
<span class="layer-dest" style="opacity:.6">→ {{.Tier2Dest}}</span>
|
||||
<span class="badge badge-warn" style="font-size:.7rem">Cél meghajtó inaktív</span>
|
||||
<span class="tag tag-warn">Cél meghajtó inaktív</span>
|
||||
{{if .Tier2LastRun}}
|
||||
<span class="layer-last" style="opacity:.6">Utolsó: {{.Tier2LastRun}}</span>
|
||||
{{end}}
|
||||
@@ -439,8 +439,8 @@
|
||||
<a href="/stacks/{{.StackName}}/backup" class="btn btn-xs btn-outline">Beállítás</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<span class="layer-auto-ok">✓ 1. mentés auto</span>
|
||||
<span class="layer-unconfigured">⚠ Nincs 2. (off-drive) másolat</span>
|
||||
<span class="layer-auto-ok"><svg class="ico ico-sm"><use href="#i-check"/></svg> 1. mentés auto</span>
|
||||
<span class="layer-unconfigured"><svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> Nincs 2. (off-drive) másolat</span>
|
||||
{{if .Tier2LastError}}
|
||||
<span class="layer-reason" style="opacity:.85" title="A 2. mentés automatikus — külön beállítás nem kell">{{.Tier2LastError}}</span>
|
||||
{{end}}
|
||||
@@ -452,9 +452,9 @@
|
||||
<!-- Tier 3: Remote backup (future) -->
|
||||
<div class="backup-layer-row" style="opacity:.5">
|
||||
<span class="tier-label">3. mentés</span>
|
||||
<span class="layer-badge" style="background:var(--bg-tertiary);color:var(--text-muted)">Hamarosan</span>
|
||||
<span class="layer-badge" style="background:var(--bg-2);color:var(--text-3)">Hamarosan</span>
|
||||
<span class="tier-location">távoli (offsite)</span>
|
||||
<span class="tier-contents" style="font-style:normal;color:var(--text-muted)">B2 / S3 / SFTP — hamarosan elérhető</span>
|
||||
<span class="tier-contents" style="font-style:normal;color:var(--text-3)">B2 / S3 / SFTP — hamarosan elérhető</span>
|
||||
</div>
|
||||
</div>
|
||||
{{if .Warnings}}
|
||||
@@ -569,7 +569,7 @@
|
||||
Még nincs mentés felhasználói adattal.
|
||||
</div>
|
||||
<div class="restore-warning">
|
||||
⚠ A visszaállítás felülírja az alkalmazás jelenlegi adatait a kiválasztott mentés állapotával.
|
||||
<svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> A visszaállítás felülírja az alkalmazás jelenlegi adatait a kiválasztott mentés állapotával.
|
||||
Az alkalmazás a folyamat során automatikusan leáll és újraindul.
|
||||
</div>
|
||||
<div class="restore-confirm">
|
||||
@@ -581,7 +581,7 @@
|
||||
<div class="restore-actions">
|
||||
<button type="button" class="btn btn-sm btn-danger" id="restore-btn" disabled onclick="submitRestore()">Visszaállítás indítása</button>
|
||||
</div>
|
||||
<div style="margin-top: 1rem; text-align: center; border-top: 1px solid var(--border); padding-top: 1rem;">
|
||||
<div style="margin-top: 1rem; text-align: center; border-top: 1px solid var(--line); padding-top: 1rem;">
|
||||
<a href="/import" class="btn btn-sm btn-outline">Importálás mentett csomagból (.fab)</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -679,7 +679,7 @@ function pollGuestBackup(out, btn) {
|
||||
if (data.ok && data.data) {
|
||||
var ph = data.data.phase;
|
||||
out.innerHTML = '<span class="form-hint">Állapot: ' + ph + '</span>';
|
||||
if (ph === 'done') { clearInterval(iv); out.innerHTML = '<div class="flash flash-success">✅ A rendszermentés elkészült.</div>'; setTimeout(() => window.location.reload(), 1500); }
|
||||
if (ph === 'done') { clearInterval(iv); out.innerHTML = '<div class="flash flash-success">A rendszermentés elkészült.</div>'; setTimeout(() => window.location.reload(), 1500); }
|
||||
else if (ph === 'failed') { clearInterval(iv); out.innerHTML = '<div class="alert alert-error">A mentés sikertelen.</div>'; btn.disabled = false; }
|
||||
}
|
||||
})
|
||||
@@ -746,10 +746,10 @@ function onRestoreAppChange() {
|
||||
typeInfo.innerHTML = '🔄 Teljes visszaállítás: adatbázis + konfiguráció + felhasználói adatok a kiválasztott pillanatképből.';
|
||||
typeInfo.className = 'restore-info';
|
||||
} else if (hasDB) {
|
||||
typeInfo.innerHTML = 'ℹ Adatbázis és konfiguráció visszaállítása — az alkalmazásnak nincs külön felhasználói adata.';
|
||||
typeInfo.innerHTML = 'Adatbázis és konfiguráció visszaállítása — az alkalmazásnak nincs külön felhasználói adata.';
|
||||
typeInfo.className = 'restore-info restore-info-partial';
|
||||
} else {
|
||||
typeInfo.innerHTML = 'ℹ Csak konfiguráció visszaállítása (compose fájlok, beállítások).';
|
||||
typeInfo.innerHTML = 'Csak konfiguráció visszaállítása (compose fájlok, beállítások).';
|
||||
typeInfo.className = 'restore-info restore-info-partial';
|
||||
}
|
||||
typeInfo.style.display = 'block';
|
||||
|
||||
Reference in New Issue
Block a user