Add global notes/links overview modals and fix SSE drain race condition
All checks were successful
Build-Publish / build (linux/amd64) (push) Successful in 5s
Build-Publish / build (linux/arm64) (push) Successful in 12s
Build-Publish / create-manifest (push) Successful in 2s
Build-Publish / publish-template (push) Successful in 8s

This commit is contained in:
j
2026-03-09 18:48:08 +13:00
parent d6e956d9b4
commit 9d288b7430
4 changed files with 121 additions and 27 deletions

View File

@@ -10,6 +10,8 @@
<header>
<h1>Infrastructure Map</h1>
<span class="subtitle">Auto-refreshes every 60s | Built: {{ build_date }}</span>
<button class="header-btn" onclick="showAllNotes()" title="View all notes">Notes</button>
<button class="header-btn" onclick="showAllLinks()" title="View all links">Links</button>
<button class="refresh-btn" onclick="triggerRefresh(this)" title="Force re-collect from all servers">&#x21bb; Refresh</button>
</header>
@@ -502,7 +504,64 @@
</div>
</div>
<!-- Overview Modal -->
<div id="overviewModal" class="log-modal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
<div class="log-modal-content" style="width:700px;">
<div class="log-modal-header">
<span id="overviewTitle"></span>
<button onclick="document.getElementById('overviewModal').style.display='none'" style="margin-left:auto;background:none;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer;">&times;</button>
</div>
<div id="overviewBody" class="log-modal-body" style="padding:16px 18px;"></div>
</div>
</div>
<script>
function showAllNotes() {
const modal = document.getElementById('overviewModal');
document.getElementById('overviewTitle').textContent = 'All Notes';
const body = document.getElementById('overviewBody');
body.innerHTML = '<div class="spinner" style="margin:20px auto;"></div>';
modal.style.display = 'flex';
fetch('/api/all-notes').then(r => r.json()).then(data => {
if (!data.length) {
body.innerHTML = '<div style="color:#64748b;text-align:center;padding:20px;">No notes yet</div>';
return;
}
body.innerHTML = data.map(s =>
'<div style="margin-bottom:16px;">' +
'<div style="font-weight:600;color:#3b82f6;font-size:0.8rem;margin-bottom:4px;">' +
s.group_name + ' / ' + s.hostname + '</div>' +
'<div style="color:#cbd5e1;font-size:0.85rem;white-space:pre-wrap;background:#0f172a;padding:8px 10px;border-radius:6px;border:1px solid #1e3a5f;">' +
s.notes.replace(/</g,'&lt;') + '</div></div>'
).join('');
});
}
function showAllLinks() {
const modal = document.getElementById('overviewModal');
document.getElementById('overviewTitle').textContent = 'All Links';
const body = document.getElementById('overviewBody');
body.innerHTML = '<div class="spinner" style="margin:20px auto;"></div>';
modal.style.display = 'flex';
fetch('/api/all-links').then(r => r.json()).then(data => {
if (!data.length) {
body.innerHTML = '<div style="color:#64748b;text-align:center;padding:20px;">No links yet</div>';
return;
}
body.innerHTML = data.map(s =>
'<div style="margin-bottom:12px;">' +
'<div style="font-weight:600;color:#3b82f6;font-size:0.8rem;margin-bottom:4px;">' +
s.group_name + ' / ' + s.hostname + '</div>' +
'<div style="display:flex;flex-wrap:wrap;gap:6px;">' +
s.links.map(l =>
'<a href="' + l.url.replace(/"/g,'&quot;') + '" target="_blank" rel="noopener" class="service-link" style="font-size:0.8rem;padding:3px 10px;">' +
l.label.replace(/</g,'&lt;') + '</a>'
).join('') +
'</div></div>'
).join('');
});
}
function toggleDetails(card) {
const details = card.querySelector('.card-details');
const isOpen = details.style.display !== 'none';