Add SSE streaming for server refresh with live progress log modal
All checks were successful
Build-Publish / build (linux/amd64) (push) Successful in 4s
Build-Publish / build (linux/arm64) (push) Successful in 13s
Build-Publish / create-manifest (push) Successful in 2s
Build-Publish / publish-template (push) Successful in 15s

This commit is contained in:
j
2026-03-08 20:03:34 +13:00
parent be032e66d7
commit cb946b2259
3 changed files with 262 additions and 65 deletions

View File

@@ -433,6 +433,17 @@
{% endfor %}
</main>
<!-- Log Modal -->
<div id="logModal" class="log-modal" style="display:none;">
<div class="log-modal-content">
<div class="log-modal-header">
<span id="logTitle">Collecting...</span>
<span id="logSpinner" class="spinner"></span>
</div>
<div id="logBody" class="log-modal-body"></div>
</div>
</div>
<script>
function toggleDetails(card) {
const details = card.querySelector('.card-details');
@@ -481,20 +492,57 @@
if (card) toggleDetails(card);
}
function showLogModal(title) {
const modal = document.getElementById('logModal');
const body = document.getElementById('logBody');
const titleEl = document.getElementById('logTitle');
const spinner = document.getElementById('logSpinner');
titleEl.textContent = title;
body.innerHTML = '';
spinner.style.display = 'inline-block';
modal.style.display = 'flex';
}
function addLogLine(text) {
const body = document.getElementById('logBody');
const line = document.createElement('div');
line.className = 'log-line';
// Color based on content
if (text.includes('online')) line.classList.add('log-ok');
else if (text.includes('offline') || text.includes('error')) line.classList.add('log-err');
line.textContent = text;
body.appendChild(line);
body.scrollTop = body.scrollHeight;
}
function streamRefresh(url, title) {
showLogModal(title);
const es = new EventSource(url);
es.onmessage = function(e) {
if (e.data === '[DONE]') {
es.close();
document.getElementById('logSpinner').style.display = 'none';
setTimeout(() => location.reload(), 800);
} else {
addLogLine(e.data);
}
};
es.onerror = function() {
es.close();
addLogLine('Connection lost');
document.getElementById('logSpinner').style.display = 'none';
setTimeout(() => location.reload(), 1500);
};
}
function refreshServer(btn, serverId) {
btn.disabled = true;
btn.textContent = '...';
fetch('/api/servers/' + serverId + '/refresh', {method: 'POST'})
.then(() => location.reload());
streamRefresh('/api/servers/' + serverId + '/refresh/stream', 'Refreshing server...');
}
function triggerRefresh(btn) {
btn.disabled = true;
btn.textContent = 'Collecting...';
fetch('/api/refresh', {method: 'POST'}).then(() => {
// Wait a few seconds for collection to finish, then reload
setTimeout(() => location.reload(), 8000);
});
streamRefresh('/api/refresh/stream', 'Refreshing all servers...');
}
// If no servers have data yet, refresh quickly; otherwise every 60s