Add global notes/links overview modals and fix SSE drain race condition
This commit is contained in:
@@ -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">↻ 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;">×</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,'<') + '</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,'"') + '" target="_blank" rel="noopener" class="service-link" style="font-size:0.8rem;padding:3px 10px;">' +
|
||||
l.label.replace(/</g,'<') + '</a>'
|
||||
).join('') +
|
||||
'</div></div>'
|
||||
).join('');
|
||||
});
|
||||
}
|
||||
|
||||
function toggleDetails(card) {
|
||||
const details = card.querySelector('.card-details');
|
||||
const isOpen = details.style.display !== 'none';
|
||||
|
||||
Reference in New Issue
Block a user