feat: pre-computed state store and async ACME issuance (fixes timeout mismatch)

- Add lib/state.py: in-memory state store with subsystem collectors (firewall, dnsmasq, nginx, acme, wireguard) - Refactor all handlers: read from state on GET, call refresh_state() after mutations instead of invoking subprocesses per request - daemon/server.py: add refresh_state(), /status/all, /status/refresh; populate state at startup - webui/api/certs.py: async step-by-step ACME issuance (validate, issue with request_id, poll status) replacing blocking endpoint - webui/server.py: render pages from state instead of direct lib calls - Update templates, JS for async cert issuance with polling UI - Update tests for state-based mocking; add test_state.py - Fix SIM105 lint issue (contextlib.suppress) - Add TODO.md with certificate issuance issue tracking Resolves: WebUI 30s timeout freeze during cert issuance (Problem 1)
2026-05-30 05:45:40 +00:00
parent c091063248
commit dc96e15643
19 changed files with 1960 additions and 986 deletions
@@ -29,7 +29,7 @@ const closeModal = (id) => {
 };

 // Tab switching
-const switchTab = (tabName) => {
+let switchTab = (tabName) => {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
    document.getElementById('tab-' + tabName).classList.add('active');
@@ -321,3 +321,177 @@ const escHtml = (s) => {
 const escAttr = (s) => {
    return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/'/g,'&#39;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 };
+
+// ─── Certificate Issue Wizard ────────────────────────────────────────
+
+let _issuePollHandle = null;
+let _issueRequestId = null;
+
+function closeIssueWizard() {
+    if (_issuePollHandle) {
+        clearInterval(_issuePollHandle);
+        _issuePollHandle = null;
+    }
+    _issueRequestId = null;
+    resetIssueWizard();
+    closeModal('issue-cert-modal');
+}
+
+function resetIssueWizard() {
+    document.getElementById('cert-wizard-input').style.display = '';
+    document.getElementById('cert-wizard-progress').style.display = 'none';
+    document.getElementById('cert-check-results').style.display = 'none';
+    document.getElementById('cert-check-btn').style.display = '';
+    document.getElementById('cert-issue-btn').style.display = 'none';
+    document.getElementById('cert-close-progress').style.display = 'none';
+}
+
+function validateCertIssue() {
+    const domain = document.getElementById('cert-domain').value.trim();
+    if (!domain) {
+        showErrorToast('Domain is required');
+        return;
+    }
+    const email = document.getElementById('cert-email').value.trim() || undefined;
+
+    const checkBtn = document.getElementById('cert-check-btn');
+    checkBtn.disabled = true;
+    checkBtn.textContent = 'Checking...';
+
+    fetch('/api/certs/validate', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ domain, email })
+    })
+    .then(r => r.json())
+    .then(data => {
+        checkBtn.disabled = false;
+        checkBtn.textContent = 'Check';
+
+        const result = data.ok ? data.data : data;
+        renderChecks(result.checks);
+
+        if (result.ready) {
+            document.getElementById('cert-check-btn').style.display = 'none';
+            document.getElementById('cert-issue-btn').style.display = '';
+        } else {
+            document.getElementById('cert-issue-btn').style.display = 'none';
+        }
+    })
+    .catch(e => {
+        checkBtn.disabled = false;
+        checkBtn.textContent = 'Check';
+        showErrorToast('Validation failed: ' + e.message);
+    });
+}
+
+function renderChecks(checks) {
+    const container = document.getElementById('cert-checks-list');
+    const resultsDiv = document.getElementById('cert-check-results');
+    resultsDiv.style.display = '';
+
+    container.innerHTML = checks.map(c => {
+        let icon, badge;
+        if (c.passed) {
+            icon = '✓';
+            badge = c.blocking ? 'badge-success' : 'badge-info';
+        } else {
+            icon = '✗';
+            badge = 'badge-danger';
+        }
+        return '<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;">' +
+            '<span class="badge ' + badge + '">' + icon + '</span>' +
+            '<span>' + escHtml(c.name).replace(/_/g, ' ') + '</span>' +
+            '<span class="text-muted" style="flex:1;text-align:right;">' + escHtml(c.message || '') + '</span>' +
+            '</div>';
+    }).join('');
+}
+
+function startCertIssue() {
+    const domain = document.getElementById('cert-domain').value.trim();
+    const email = document.getElementById('cert-email').value.trim() || undefined;
+
+    document.getElementById('cert-wizard-input').style.display = 'none';
+    document.getElementById('cert-wizard-progress').style.display = '';
+    document.getElementById('cert-steps-list').innerHTML = '<div class="text-muted text-sm" style="margin:16px 0;">Starting certificate issuance…</div>';
+
+    fetch('/api/certs/issue/start', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ domain, email })
+    })
+    .then(r => r.json())
+    .then(data => {
+        const result = data.ok ? data.data : data;
+        _issueRequestId = result.request_id;
+        if (!result.request_id) throw new Error('No request_id returned');
+
+        // If issuance already exists for this domain, follow the existing request
+        startIssuePoll(result.request_id);
+    })
+    .catch(e => {
+        showErrorToast('Failed to start issuance: ' + e.message);
+        // Fall back to input phase
+        document.getElementById('cert-wizard-input').style.display = '';
+        document.getElementById('cert-wizard-progress').style.display = 'none';
+    });
+}
+
+function startIssuePoll(requestId) {
+    _issueRequestId = requestId;
+    _issuePollHandle = setInterval(() => pollIssueStatus(requestId), 2000);
+    // Also poll immediately
+    pollIssueStatus(requestId);
+}
+
+function pollIssueStatus(requestId) {
+    fetch('/api/certs/issue/' + encodeURIComponent(requestId))
+    .then(r => r.json())
+    .then(data => {
+        const result = data.ok ? data.data : data;
+        renderIssueSteps(result.steps, result.status);
+
+        if (result.status === 'completed') {
+            clearInterval(_issuePollHandle);
+            _issuePollHandle = null;
+            document.getElementById('cert-close-progress').style.display = '';
+            showSuccessToast('Certificate issued for ' + result.domain);
+        } else if (result.status === 'failed') {
+            clearInterval(_issuePollHandle);
+            _issuePollHandle = null;
+            // Show failed — user can see which step failed
+            document.getElementById('cert-close-progress').style.display = '';
+            showErrorToast('Certificate issuance failed for ' + result.domain);
+        }
+    })
+    .catch(e => {
+        // Don't poll on error — but keep trying since request might still be running
+    });
+}
+
+function renderIssueSteps(steps, status) {
+    const container = document.getElementById('cert-steps-list');
+    if (!steps || !steps.length) {
+        container.innerHTML = '<div class="text-muted text-sm">Pending…</div>';
+        return;
+    }
+    container.innerHTML = steps.map(s => {
+        let icon;
+        if (s.status === 'done') icon = '<span class="status-dot status-up"></span>';
+        else if (s.status === 'running') icon = '<span class="status-dot status-pending"></span>';
+        else if (s.status === 'error') icon = '<span class="status-dot status-down"></span>';
+        else icon = '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--border);margin-right:6px;"></span>';
+
+        return '<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;">' +
+            icon +
+            '<span>' + escHtml(s.label) + '</span>' +
+            (s.status === 'running' ? '<span class="text-muted text-sm">(in progress…)</span>' :
+             s.status === 'error' ? '<span class="badge badge-danger" style="margin-left:auto;">' + escHtml(s.message || 'failed') + '</span>' :
+             '<span class="badge badge-success" style="margin-left:auto;">done</span>') +
+            '</div>';
+    }).join('');
+
+    if (status === 'completed') {
+        container.innerHTML += '<div style="margin-top:12px;text-align:center;"><span class="badge badge-success" style="font-size:13px;padding:4px 12px;">✓ Certificate issued</span></div>';
+    }
+}