feat(dashboard): add zero-scale explanation banner and trigger status refresh on Open App & tab switch

This commit is contained in:
Stephen Schuresko
2026-09-24 10:59:27 -04:00
parent d44144e66e
commit 14f550c21b

View File

@@ -475,7 +475,13 @@
<span>⚡ Zero-Scale Deployed Services</span>
<span class="badge-count" id="count-zero">0</span>
</div>
<div style="font-size:12px; color:var(--text-muted);">Consolidated systemd runner compute runtime</div>
<div style="font-size:12px; color:var(--text-muted);">Consolidated systemd runner compute runtime &bull; 10s idle scale-down</div>
</div>
<div class="zero-scale-notice" style="background: rgba(56, 189, 248, 0.07); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 12.5px; color: #bae6fd; line-height: 1.5; display: flex; align-items: flex-start; gap: 12px;">
<span style="font-size: 20px; line-height: 1.2;">⚡</span>
<div>
<strong>On-Demand Serverless Compute:</strong> Services remain <em>"Scaled to Zero"</em> when inactive to conserve cluster resources. Opening a service instantly boots it in under 200ms. If you click <strong>Open App</strong> on an idle service and switch tabs back to this dashboard within <strong>10 seconds</strong>, the badge will show <strong style="color: var(--green);">🟢 Active</strong> before scaling down automatically after 10 seconds of idle!
</div>
</div>
<div class="zero-grid" id="zero-container">
<div style="color:var(--text-muted); font-size:13px;">Querying zero-scale runner runtime...</div>
@@ -806,7 +812,7 @@ function renderDashboard(data) {
<div class="zero-desc">${app.description || 'Zero-scale dynamic service'}</div>
</div>
<div class="zero-actions">
<a href="${app.url}" target="_blank" class="btn btn-primary" style="flex:1; justify-content:center;">🌐 Open App</a>
<a href="${app.url}" target="_blank" onclick="handleOpenApp()" class="btn btn-primary" style="flex:1; justify-content:center;">🌐 Open App</a>
<a href="${logsUrl}" target="_blank" class="btn" style="flex:1; justify-content:center;">🔐 Logs</a>
</div>
`;
@@ -849,6 +855,18 @@ function renderDashboard(data) {
});
}
function handleOpenApp() {
setTimeout(loadStatus, 400);
setTimeout(loadStatus, 1500);
}
// Automatically refresh status whenever the user switches back to this tab
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
loadStatus();
}
});
// Initial load & 10s auto-refresh
loadStatus();
setInterval(loadStatus, 10000);