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:
@@ -18,7 +18,7 @@
|
||||
<a href="https://{{.EffectiveSubdomain}}.{{.Domain}}{{.Meta.OpenPath}}" target="_blank" class="btn btn-sm btn-outline">Megnyitás ↗</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
<a href="/apps/{{.Meta.Slug}}" class="btn btn-sm btn-outline">ℹ️ Részletek</a>
|
||||
<a href="/apps/{{.Meta.Slug}}" class="btn btn-sm btn-outline"><svg class="ico ico-sm"><use href="#i-info"/></svg> Részletek</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,11 +30,11 @@
|
||||
<div>
|
||||
<h3>{{.Meta.DisplayName}}</h3>
|
||||
{{if .Meta.Description}}<p>{{.Meta.Description}}</p>{{end}}
|
||||
<div class="stack-meta-badges">
|
||||
{{if .Meta.Resources.MemRequest}}<span class="meta-badge">~{{.Meta.Resources.MemRequest}}</span>{{end}}
|
||||
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">Pi kompatibilis</span>{{end}}
|
||||
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">HDD szükséges</span>{{end}}
|
||||
{{if .Meta.Resources.HungarianUI}}<span class="meta-badge meta-badge-ok">Magyar felület</span>{{end}}
|
||||
<div class="metarows">
|
||||
{{if .Meta.Resources.MemRequest}}<span class="metarow"><svg class="ico"><use href="#i-memory-stick"/></svg><span class="mono">~{{.Meta.Resources.MemRequest}}</span></span>{{end}}
|
||||
{{if .Meta.Resources.PiCompatible}}<span class="metarow"><svg class="ico"><use href="#i-check"/></svg>Pi kompatibilis</span>{{end}}
|
||||
{{if .Meta.Resources.NeedsHDD}}<span class="metarow"><svg class="ico"><use href="#i-hard-drive"/></svg>HDD szükséges</span>{{end}}
|
||||
{{if .Meta.Resources.HungarianUI}}<span class="metarow"><svg class="ico"><use href="#i-check"/></svg>Magyar felület</span>{{end}}
|
||||
</div>
|
||||
<a href="/apps/{{.Meta.Slug}}" class="btn btn-sm btn-outline" style="margin-top:0.5rem">
|
||||
Részletes leírás, képernyőképek
|
||||
@@ -52,7 +52,7 @@
|
||||
<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>
|
||||
<span class="settings-value">{{.StorageInfo.Label}} <span class="mono" style="color:var(--text-2)">({{.StorageInfo.Path}})</span></span>
|
||||
</div>
|
||||
{{if .StorageInfo.DataSizeHuman}}
|
||||
<div class="settings-row">
|
||||
@@ -86,7 +86,7 @@
|
||||
<div class="settings-grid" style="margin-bottom:.75rem">
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Tárhely</span>
|
||||
<span class="settings-value">{{.Label}} <span class="mono" style="color:var(--text-secondary)">({{.Path}})</span></span>
|
||||
<span class="settings-value">{{.Label}} <span class="mono" style="color:var(--text-2)">({{.Path}})</span></span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Méret</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<div class="cross-drive-nightly">
|
||||
<span class="form-hint" style="display:block;margin-top:.25rem">
|
||||
Az alkalmazás adatbázisa és Docker kötetei automatikusan bekerülnek az éjszakai biztonsági mentésbe.
|
||||
<a href="/backups" style="color:var(--accent-blue)">Mentési állapot →</a>
|
||||
<a href="/backups" style="color:var(--blue)">Mentési állapot →</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,18 +127,18 @@
|
||||
</p>
|
||||
|
||||
{{range .Integrations}}
|
||||
<div class="config-field" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--border)">
|
||||
<div class="config-field" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)">
|
||||
<div style="flex:1">
|
||||
<strong>{{.Label}}</strong>
|
||||
<p class="config-field-help" style="margin:0">{{.Description}}</p>
|
||||
{{if not .TargetDeployed}}
|
||||
<span class="badge badge-muted" style="margin-top:.25rem;display:inline-block">Nincs telepítve</span>
|
||||
<span class="tag tag-off" style="margin-top:.25rem"><span class="dot"></span>Nincs telepítve</span>
|
||||
{{else if not .TargetRunning}}
|
||||
<span class="badge badge-orphaned" style="margin-top:.25rem;display:inline-block">Célalkalmazás leállítva</span>
|
||||
<span class="tag tag-neutral" style="margin-top:.25rem"><span class="dot"></span>Célalkalmazás leállítva</span>
|
||||
{{else if eq .Status "error"}}
|
||||
<span class="badge badge-orphaned" style="margin-top:.25rem;display:inline-block">Hiba</span>
|
||||
<span class="tag tag-crit" style="margin-top:.25rem"><span class="dot"></span>Hiba</span>
|
||||
{{else if .Enabled}}
|
||||
<span class="badge badge-ok" style="margin-top:.25rem;display:inline-block">Aktív</span>
|
||||
<span class="tag tag-run" style="margin-top:.25rem"><span class="dot"></span>Aktív</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<label class="toggle">
|
||||
@@ -433,7 +433,7 @@
|
||||
<span class="memory-summary-label">Memória</span>
|
||||
<span class="memory-summary-value">{{.AfterMB}} MB / {{.UsableMB}} MB ({{.Percent}}%)</span>
|
||||
</div>
|
||||
<div class="memory-bar-stacked">
|
||||
<div class="meter-track meter-track-stacked">
|
||||
<div class="memory-bar-segment memory-bar-committed" style="width:{{.UsedPercent}}%" title="Jelenlegi használat: {{.UsedMB}} MB"></div>
|
||||
<div class="memory-bar-segment memory-bar-new" style="width:{{subtract .Percent .UsedPercent}}%" title="{{$.Meta.DisplayName}}: +{{.NewRequestMB}} MB"></div>
|
||||
</div>
|
||||
@@ -456,7 +456,7 @@
|
||||
<form id="deploy-form" class="deploy-form">
|
||||
{{if .DockerBelowReserve}}
|
||||
<div class="alert alert-warning" style="margin-bottom:1rem">
|
||||
⚠ Nincs elég szabad tárhely a telepítéshez. Jelenleg {{.DockerFreeHuman}} szabad, és a rendszer
|
||||
<svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> Nincs elég szabad tárhely a telepítéshez. Jelenleg {{.DockerFreeHuman}} szabad, és a rendszer
|
||||
{{.DockerReserveHuman}} tartalékot tart fenn az alapszolgáltatások (vezérlő, proxy) védelmében.
|
||||
A telepítés ezért átmenetileg le van tiltva — szabadítson fel helyet, vagy bővítse a tárhelyet.
|
||||
</div>
|
||||
@@ -474,7 +474,7 @@
|
||||
{{range .AutoFields}}
|
||||
{{$val := index $autoValues .EnvVar}}
|
||||
<div class="form-group form-group-auto">
|
||||
<label>{{.Label}} {{if eq .Type "secret"}}<span class="auto-generated-badge">✓ Automatikusan generálva</span>{{end}}</label>
|
||||
<label>{{.Label}} {{if eq .Type "secret"}}<span class="auto-generated-badge"><svg class="ico ico-sm"><use href="#i-check"/></svg> Automatikusan generálva</span>{{end}}</label>
|
||||
{{if $val}}
|
||||
{{if eq .Type "secret"}}
|
||||
<div class="input-with-button">
|
||||
@@ -569,11 +569,11 @@
|
||||
</option>
|
||||
{{end}}
|
||||
</select>
|
||||
<div id="storage-space-warn" class="form-hint" style="color:var(--yellow);display:none">
|
||||
⚠️ A kiválasztott tárhely majdnem megtelt.
|
||||
<div id="storage-space-warn" class="form-hint" style="color:var(--warn);display:none">
|
||||
<svg class="ico ico-sm"><use href="#i-triangle-alert"/></svg> A kiválasztott tárhely majdnem megtelt.
|
||||
</div>
|
||||
<div class="form-hint" style="margin-top:.4rem;opacity:.8">
|
||||
ℹ️ A kiválasztott meghajtón az alkalmazás <strong>fájljai</strong> (média, dokumentumok) tárolódnak.
|
||||
<svg class="ico ico-sm"><use href="#i-info"/></svg> A kiválasztott meghajtón az alkalmazás <strong>fájljai</strong> (média, dokumentumok) tárolódnak.
|
||||
Az <strong>adatbázis a gyors belső SSD-n</strong> fut — és az alkalmazással együtt készül róla biztonsági mentés.
|
||||
</div>
|
||||
{{else}}
|
||||
@@ -582,7 +582,7 @@
|
||||
placeholder="{{.Placeholder}}"
|
||||
{{if .Required}}required{{end}}
|
||||
{{if $.AlreadyDeployed}}disabled{{end}}>
|
||||
<span class="form-hint" style="color:var(--yellow)">Nincs regisztrált adattároló — adja meg kézzel az útvonalat</span>
|
||||
<span class="form-hint" style="color:var(--warn)">Nincs regisztrált adattároló — adja meg kézzel az útvonalat</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
|
||||
@@ -612,15 +612,15 @@
|
||||
<h3>Telepítés folyamatban...</h3>
|
||||
<div class="deploy-steps">
|
||||
<div class="deploy-step active" id="step-config">
|
||||
<span class="step-icon">⏳</span>
|
||||
<span class="step-icon"><svg class="ico"><use href="#i-rotate-cw"/></svg></span>
|
||||
<span class="step-text">Konfiguráció mentése...</span>
|
||||
</div>
|
||||
<div class="deploy-step" id="step-containers">
|
||||
<span class="step-icon">⏳</span>
|
||||
<span class="step-icon"><svg class="ico"><use href="#i-rotate-cw"/></svg></span>
|
||||
<span class="step-text">Konténer(ek) indítása...</span>
|
||||
</div>
|
||||
<div class="deploy-step" id="step-health">
|
||||
<span class="step-icon">⏳</span>
|
||||
<span class="step-icon"><svg class="ico"><use href="#i-rotate-cw"/></svg></span>
|
||||
<span class="step-text">Alkalmazás inicializálása...</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -690,15 +690,15 @@ function buildPostDeployCard(stackName) {
|
||||
if (!val) continue;
|
||||
if (isPassword) {
|
||||
var credId = 'postdeploy-cred-' + i;
|
||||
credRows += '<tr><td style="padding:.25rem .75rem .25rem 0;color:var(--text-muted);white-space:nowrap">' + f.label + '</td>' +
|
||||
credRows += '<tr><td style="padding:.25rem .75rem .25rem 0;color:var(--text-3);white-space:nowrap">' + f.label + '</td>' +
|
||||
'<td style="padding:.25rem 0;display:flex;align-items:center;gap:.5rem">' +
|
||||
'<code id="' + credId + '" style="font-family:var(--font-mono);letter-spacing:1px">••••••••••••</code>' +
|
||||
'<code id="' + credId + '" style="font-family:var(--font-data);letter-spacing:1px">••••••••••••</code>' +
|
||||
'<button type="button" class="btn btn-sm btn-outline" onclick="togglePostDeployCred(this,\'' + credId + '\',\'' + val.replace(/'/g, "\\'") + '\')" style="padding:.15rem .4rem;font-size:.75rem">Megjelenítés</button>' +
|
||||
'<button type="button" class="btn btn-sm btn-outline" onclick="copyPostDeployCred(this,\'' + val.replace(/'/g, "\\'") + '\')" style="padding:.15rem .4rem;font-size:.75rem">Másolás</button>' +
|
||||
'</td></tr>';
|
||||
} else {
|
||||
credRows += '<tr><td style="padding:.25rem .75rem .25rem 0;color:var(--text-muted);white-space:nowrap">' + f.label + '</td>' +
|
||||
'<td style="padding:.25rem 0;font-family:var(--font-mono);user-select:all">' + val + '</td></tr>';
|
||||
credRows += '<tr><td style="padding:.25rem .75rem .25rem 0;color:var(--text-3);white-space:nowrap">' + f.label + '</td>' +
|
||||
'<td style="padding:.25rem 0;font-family:var(--font-data);user-select:all">' + val + '</td></tr>';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -790,7 +790,7 @@ function copyPostDeployCred(btn, val) {
|
||||
}
|
||||
|
||||
function deleteStaleData(stackName, stalePath, btn) {
|
||||
if (!confirm('Biztosan törölni szeretnéd a korábbi adatokat?\n\nTárhely: ' + stalePath + '\n\n⚠️ Ez a művelet visszavonhatatlan!\nElőtte győződj meg róla, hogy az alkalmazás az új tárolóról megfelelően működik.')) {
|
||||
if (!confirm('Biztosan törölni szeretnéd a korábbi adatokat?\n\nTárhely: ' + stalePath + '\n\nFIGYELEM: Ez a művelet visszavonhatatlan!\nElőtte győződj meg róla, hogy az alkalmazás az új tárolóról megfelelően működik.')) {
|
||||
return;
|
||||
}
|
||||
// Second confirmation
|
||||
@@ -913,10 +913,10 @@ document.getElementById('deploy-form').addEventListener('submit', async function
|
||||
el.className = 'deploy-step ' + status;
|
||||
if (text) el.querySelector('.step-text').textContent = text;
|
||||
var icon = el.querySelector('.step-icon');
|
||||
if (status === 'done') icon.textContent = '\u2705';
|
||||
else if (status === 'error') icon.textContent = '\u274C';
|
||||
else if (status === 'warn') icon.textContent = '\u26A0\uFE0F';
|
||||
else if (status === 'active') icon.textContent = '\u23F3';
|
||||
if (status === 'done') icon.innerHTML = '<svg class="ico"><use href="#i-check"/></svg>';
|
||||
else if (status === 'error') icon.innerHTML = '<svg class="ico"><use href="#i-x"/></svg>';
|
||||
else if (status === 'warn') icon.innerHTML = '<svg class="ico"><use href="#i-triangle-alert"/></svg>';
|
||||
else if (status === 'active') icon.innerHTML = '<svg class="ico ico-spin"><use href="#i-rotate-cw"/></svg>';
|
||||
}
|
||||
|
||||
// Phase 1: Deploy request
|
||||
|
||||
Reference in New Issue
Block a user