feat: orphan stack detection/deletion, filebrowser infra, setup scripts

- Add orphan detection: stacks not in catalog marked as "Elavult" - Add DELETE /api/stacks/{name} endpoint with HDD data handling - Add GET /api/stacks/{name}/hdd-data endpoint - Add delete confirmation modal with HDD data checkbox (Hungarian UI) - Add filebrowser to protected stacks list - Add scripts/hdd-setup.sh and scripts/docker-setup.sh for node setup - Hide "Frissítés" and "Részletek" buttons for orphaned stacks Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 10:03:10 +01:00
parent a5c6899e2c
commit 59ed4bd1c2
7 changed files with 3367 additions and 3 deletions
@@ -117,6 +117,84 @@ const layoutTmpl = `
            btn.classList.remove('loading');
        }
    }
+    async function deleteOrphanStack(name) {
+        var modal = document.createElement('div');
+        modal.className = 'modal-overlay';
+        modal.id = 'delete-modal';
+        modal.innerHTML = '<div class="modal-card"><h3>Betöltés...</h3></div>';
+        modal.addEventListener('click', function(e) { if (e.target === modal) closeDeleteModal(); });
+        document.body.appendChild(modal);
+        try {
+            var resp = await fetch('/api/stacks/' + name + '/hdd-data');
+            var data = await resp.json();
+            var hddInfo = '';
+            var checkboxHTML = '';
+            if (data.ok && data.data && data.data.has_hdd_data) {
+                hddInfo = '<div class="modal-hdd-info"><strong>Felhasználói adatok a merevlemezen:</strong>';
+                data.data.hdd_paths.forEach(function(p) {
+                    hddInfo += '<div class="modal-hdd-path">' + p.path + ' (' + (p.exists ? p.size_human : 'nem létezik') + ')</div>';
+                });
+                hddInfo += '</div>';
+                checkboxHTML = '<label class="modal-checkbox"><input type="checkbox" id="delete-hdd-check"> Felhasználói adatok törlése a merevlemezről</label>';
+            }
+            modal.querySelector('.modal-card').innerHTML =
+                '<h3>Alkalmazás törlése: ' + name + '</h3>' +
+                '<p style="color:var(--text-secondary);font-size:.9rem;margin-bottom:.75rem">Ez a művelet eltávolítja a konténereket, a köteteket és a konfigurációs fájlokat.</p>' +
+                '<div class="alert alert-warning" style="margin-bottom:.75rem">Ez a művelet nem visszavonható!</div>' +
+                hddInfo + checkboxHTML +
+                '<div class="modal-actions">' +
+                    '<button class="btn btn-outline" onclick="closeDeleteModal()">Mégsem</button>' +
+                    '<button class="btn btn-danger" id="confirm-delete-btn" onclick="confirmDelete(\'' + name + '\')">Törlés</button>' +
+                '</div>';
+        } catch (err) {
+            modal.querySelector('.modal-card').innerHTML =
+                '<h3>Hiba</h3><p style="color:var(--text-secondary)">Nem sikerült lekérni az adatokat: ' + err.message + '</p>' +
+                '<div class="modal-actions"><button class="btn btn-outline" onclick="closeDeleteModal()">Bezárás</button></div>';
+        }
+    }
+    function closeDeleteModal() {
+        var modal = document.getElementById('delete-modal');
+        if (modal) modal.remove();
+    }
+    async function confirmDelete(name) {
+        var btn = document.getElementById('confirm-delete-btn');
+        var checkbox = document.getElementById('delete-hdd-check');
+        var removeHDD = checkbox ? checkbox.checked : false;
+        btn.disabled = true;
+        btn.textContent = 'Törlés folyamatban...';
+        try {
+            var resp = await fetch('/api/stacks/' + name, {
+                method: 'DELETE',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({remove_hdd_data: removeHDD})
+            });
+            var data = await resp.json();
+            if (data.ok) {
+                var modal = document.getElementById('delete-modal');
+                var removedInfo = '';
+                if (data.data && data.data.hdd_paths_removed && data.data.hdd_paths_removed.length > 0) {
+                    removedInfo = '<p style="color:var(--text-secondary);font-size:.85rem;margin-top:.5rem">Törölt adatok: ' + data.data.hdd_paths_removed.join(', ') + '</p>';
+                }
+                var preservedInfo = '';
+                if (data.data && data.data.hdd_paths_preserved && data.data.hdd_paths_preserved.length > 0) {
+                    preservedInfo = '<p style="color:var(--text-secondary);font-size:.85rem;margin-top:.5rem">Megőrzött adatok: ' + data.data.hdd_paths_preserved.join(', ') + '</p>';
+                }
+                modal.querySelector('.modal-card').innerHTML =
+                    '<h3>Sikeresen törölve!</h3>' +
+                    '<p style="color:var(--text-secondary)">Az alkalmazás (' + name + ') törölve lett.</p>' +
+                    removedInfo + preservedInfo +
+                    '<div class="modal-actions"><button class="btn btn-primary" onclick="window.location.href=\'/stacks\'">Bezárás</button></div>';
+            } else {
+                alert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
+                btn.disabled = false;
+                btn.textContent = 'Törlés';
+            }
+        } catch (err) {
+            alert('Hálózati hiba: ' + err.message);
+            btn.disabled = false;
+            btn.textContent = 'Törlés';
+        }
+    }
    </script>
 </body>
 </html>
@@ -198,6 +276,7 @@ const dashboardTmpl = `
        </div>
        <div class="stack-actions">
            <span class="stack-state-label">{{stateLabel .State}}</span>
+            {{if .Orphaned}}<span class="badge badge-orphaned">Elavult</span>{{end}}

            {{if .Protected}}
                <span class="badge badge-protected">Védett</span>
@@ -211,6 +290,7 @@ const dashboardTmpl = `
                    <button class="btn btn-sm btn-success" onclick="stackAction('{{.Name}}', 'start')">▶</button>
                {{end}}
                <a href="/stacks/{{.Name}}/logs" class="btn btn-sm btn-outline">Napló</a>
+                {{if .Orphaned}}<button class="btn btn-sm btn-danger" onclick="deleteOrphanStack('{{.Name}}')">Törlés</button>{{end}}
            {{end}}
        </div>
    </div>
@@ -253,6 +333,7 @@ const stacksTmpl = `
                </div>
            </div>
            <span class="stack-state-badge state-{{stateColor .State}}">{{stateLabel .State}}</span>
+            {{if .Orphaned}}<span class="badge badge-orphaned">Elavult</span>{{end}}
        </div>

        {{if .Meta.Description}}
@@ -284,14 +365,15 @@ const stacksTmpl = `
                <a href="{{appPageURL .Meta.Slug}}" class="btn btn-outline">Részletek</a>
            {{else}}
                {{if isOperational .State}}
-                    <button class="btn btn-success" onclick="stackAction('{{.Name}}', 'update')">Frissítés</button>
+                    {{if not .Orphaned}}<button class="btn btn-success" onclick="stackAction('{{.Name}}', 'update')">Frissítés</button>{{end}}
                    <button class="btn btn-warning" onclick="stackAction('{{.Name}}', 'restart')">Újraindítás</button>
                    <button class="btn btn-danger" onclick="stackAction('{{.Name}}', 'stop')">Leállítás</button>
                {{else}}
                    <button class="btn btn-success" onclick="stackAction('{{.Name}}', 'start')">Indítás</button>
                {{end}}
                <a href="/stacks/{{.Name}}/logs" class="btn btn-outline">Naplók</a>
-                <a href="{{appPageURL .Meta.Slug}}" class="btn btn-outline">Részletek</a>
+                {{if not .Orphaned}}<a href="{{appPageURL .Meta.Slug}}" class="btn btn-outline">Részletek</a>{{end}}
+                {{if .Orphaned}}<button class="btn btn-danger" onclick="deleteOrphanStack('{{.Name}}')">Törlés</button>{{end}}
            {{end}}
        </div>
    </div>
@@ -753,9 +835,14 @@ const appInfoTmpl = `
    <div style="display:flex;align-items:center;gap:.5rem">
        {{if .Stack.Deployed}}
            <span class="stack-state-badge state-{{stateColor .Stack.State}}">{{stateLabel .Stack.State}}</span>
+            {{if .Stack.Orphaned}}<span class="badge badge-orphaned">Elavult</span>{{end}}
            <a href="https://{{.Meta.Subdomain}}.{{.Domain}}" target="_blank" class="btn btn-sm btn-outline">Megnyitás ↗</a>
            <a href="/stacks/{{.Stack.Name}}/logs" class="btn btn-sm btn-outline">Napló</a>
-            <a href="/stacks/{{.Stack.Name}}/deploy" class="btn btn-sm btn-outline">Beállítások</a>
+            {{if .Stack.Orphaned}}
+                <button class="btn btn-sm btn-danger" onclick="deleteOrphanStack('{{.Stack.Name}}')">Törlés</button>
+            {{else}}
+                <a href="/stacks/{{.Stack.Name}}/deploy" class="btn btn-sm btn-outline">Beállítások</a>
+            {{end}}
        {{else}}
            <a href="/stacks/{{.Stack.Name}}/deploy" class="btn btn-sm btn-primary" onclick="return checkBeforeDeploy(event, '{{.Stack.Name}}')">Telepítés</a>
        {{end}}
@@ -1980,6 +2067,74 @@ select.form-control option { background: var(--bg-secondary); color: var(--text-
    color: var(--green) !important;
 }

+/* Orphan badge */
+.badge-orphaned {
+    background: var(--orange-bg);
+    color: var(--orange);
+}
+
+/* Delete modal */
+.modal-overlay {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.modal-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+.modal-card h3 {
+    margin-bottom: .75rem;
+}
+.modal-hdd-info {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: .75rem 1rem;
+    margin: .75rem 0;
+    font-size: .85rem;
+    color: var(--text-secondary);
+}
+.modal-hdd-path {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: .8rem;
+    color: var(--text-muted);
+    padding: .2rem 0;
+}
+.modal-checkbox {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin: .75rem 0;
+    padding: .75rem 1rem;
+    background: var(--red-bg);
+    border: 1px solid rgba(218, 54, 51, 0.3);
+    border-radius: 8px;
+    font-size: .85rem;
+    color: var(--red);
+    cursor: pointer;
+}
+.modal-checkbox input[type="checkbox"] {
+    accent-color: var(--red);
+}
+.modal-actions {
+    display: flex;
+    gap: .75rem;
+    margin-top: 1rem;
+    justify-content: flex-end;
+}
+
 /* Responsive */
@media(max-width: 768px) {
    .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border-color); }