Add batched status endpoint and optimize frontend performance
Server-side batched /api/v1/services/status endpoint replaces N individual browser probes with a single API call (HEAD-first with GET fallback, concurrency-limited, CA-aware HTTPS agent). Frontend: clock reuses DOM instead of rebuilding innerHTML every second with drift-correcting timer that pauses on hidden tabs. Card animations use CSS transitionDelay + requestAnimationFrame. Internet dot blink moved from JS intervals to CSS keyframes with prefers-reduced-motion support. Service worker rewritten with network-first navigation, stale-while-revalidate assets, and navigation preload. Font faces drop TTF fallbacks, use font-display swap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -29,45 +29,8 @@
|
||||
card.setAttribute('data-status', up ? 'on' : 'off');
|
||||
}
|
||||
|
||||
// Internet card packet blink effect
|
||||
if (id === 'internet' && dot && up) {
|
||||
blinkInternetPacket(dot);
|
||||
}
|
||||
}
|
||||
|
||||
// Internet card packet activity blink
|
||||
let internetBlinkInterval = null;
|
||||
function blinkInternetPacket(dot) {
|
||||
// Alternate between rx (green) and tx (blue) to simulate bidirectional traffic
|
||||
const isRx = Math.random() > 0.5;
|
||||
dot.classList.add(isRx ? 'packet-rx' : 'packet-tx');
|
||||
setTimeout(() => {
|
||||
dot.classList.remove('packet-rx', 'packet-tx');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
// Continuous packet simulation for Internet card when online
|
||||
function startInternetPacketSimulation() {
|
||||
if (internetBlinkInterval) return;
|
||||
internetBlinkInterval = setInterval(() => {
|
||||
const dot = document.getElementById('internet-dot');
|
||||
const card = document.querySelector('[data-app="internet"]');
|
||||
if (dot && card && card.getAttribute('data-status') === 'on') {
|
||||
blinkInternetPacket(dot);
|
||||
}
|
||||
}, 300 + Math.random() * 400); // Random interval 300-700ms
|
||||
}
|
||||
|
||||
function stopInternetPacketSimulation() {
|
||||
if (internetBlinkInterval) {
|
||||
clearInterval(internetBlinkInterval);
|
||||
internetBlinkInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Start simulation on page load
|
||||
startInternetPacketSimulation();
|
||||
|
||||
function getResponseTimeClass(time, isUp) {
|
||||
if (!isUp) return 'timeout';
|
||||
if (time < 200) return 'excellent';
|
||||
@@ -93,6 +56,8 @@
|
||||
|
||||
/* App grid - loaded from API */
|
||||
window.APPS = []; // Use window.APPS as the main array
|
||||
let refreshInFlight = null;
|
||||
let refreshQueued = false;
|
||||
|
||||
// Load services from API
|
||||
async function loadServices() {
|
||||
@@ -290,17 +255,17 @@
|
||||
btn.onclick = () => window.open(serviceUrl(s.id), '_blank', 'noopener');
|
||||
btnRow.appendChild(btn);
|
||||
card.appendChild(btnRow);
|
||||
card.style.transitionDelay = `${Math.min(i * 45, 270)}ms`;
|
||||
|
||||
root.appendChild(card);
|
||||
|
||||
// Staggered loading animation
|
||||
setTimeout(() => {
|
||||
card.classList.add('loaded');
|
||||
}, i * 100); // 100ms delay between each card
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
root.querySelectorAll('.card').forEach(card => card.classList.add('loaded'));
|
||||
});
|
||||
|
||||
// Group recipe cards visually after grid is built
|
||||
if (window.groupRecipeCards) setTimeout(window.groupRecipeCards, 50);
|
||||
if (window.groupRecipeCards) requestAnimationFrame(() => window.groupRecipeCards());
|
||||
}
|
||||
|
||||
function setBadge(id, up, responseTime = null) {
|
||||
@@ -332,30 +297,83 @@
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
// Check DNS servers dynamically (only those configured in SITE.dnsServers)
|
||||
const dnsIds = Object.keys(SITE.dnsServers);
|
||||
const topChecks = dnsIds.map(id => checkServiceWithTiming(id));
|
||||
topChecks.push(checkServiceWithTiming('internet'));
|
||||
const topResults = await Promise.all(topChecks);
|
||||
if (refreshInFlight) {
|
||||
refreshQueued = true;
|
||||
return refreshInFlight;
|
||||
}
|
||||
|
||||
dnsIds.forEach((id, i) => setQuick(id, topResults[i].isUp, topResults[i].responseTime));
|
||||
const internetResult = topResults[topResults.length - 1];
|
||||
setQuick('internet', internetResult.isUp, internetResult.responseTime);
|
||||
function updateStamp(label, checkedAt = new Date()) {
|
||||
const stamp = document.getElementById('stamp');
|
||||
if (stamp) stamp.textContent = `${label}: ${new Date(checkedAt).toLocaleTimeString()}`;
|
||||
}
|
||||
|
||||
// Check app services with timing
|
||||
const appResults = await Promise.all(
|
||||
window.APPS.map(async s => {
|
||||
const result = await checkServiceWithTiming(s.id);
|
||||
return { id: s.id, ...result };
|
||||
})
|
||||
);
|
||||
function applyBatchResults(statuses) {
|
||||
const dnsIds = Object.keys(SITE.dnsServers);
|
||||
dnsIds.forEach((id) => {
|
||||
const result = statuses[id];
|
||||
if (result) setQuick(id, result.isUp, result.responseTime);
|
||||
});
|
||||
|
||||
appResults.forEach(result => {
|
||||
setBadge(result.id, result.isUp, result.responseTime);
|
||||
});
|
||||
if (statuses.internet) {
|
||||
setQuick('internet', statuses.internet.isUp, statuses.internet.responseTime);
|
||||
}
|
||||
|
||||
const stamp = document.getElementById('stamp');
|
||||
if (stamp) stamp.textContent = 'last check: ' + new Date().toLocaleTimeString();
|
||||
window.APPS.forEach((service) => {
|
||||
const result = statuses[service.id];
|
||||
if (result) setBadge(service.id, result.isUp, result.responseTime);
|
||||
});
|
||||
}
|
||||
|
||||
async function refreshFallback() {
|
||||
const dnsIds = Object.keys(SITE.dnsServers);
|
||||
const topChecks = dnsIds.map(id => checkServiceWithTiming(id));
|
||||
topChecks.push(checkServiceWithTiming('internet'));
|
||||
const topResults = await Promise.all(topChecks);
|
||||
|
||||
dnsIds.forEach((id, i) => setQuick(id, topResults[i].isUp, topResults[i].responseTime));
|
||||
const internetResult = topResults[topResults.length - 1];
|
||||
setQuick('internet', internetResult.isUp, internetResult.responseTime);
|
||||
|
||||
const appResults = await Promise.all(
|
||||
window.APPS.map(async s => {
|
||||
const result = await checkServiceWithTiming(s.id);
|
||||
return { id: s.id, ...result };
|
||||
})
|
||||
);
|
||||
|
||||
appResults.forEach(result => {
|
||||
setBadge(result.id, result.isUp, result.responseTime);
|
||||
});
|
||||
}
|
||||
|
||||
refreshInFlight = (async () => {
|
||||
try {
|
||||
const response = await fetch('/api/v1/services/status', { cache: 'no-store' });
|
||||
if (!response.ok) {
|
||||
throw new Error(`Status refresh failed (${response.status})`);
|
||||
}
|
||||
const data = await response.json();
|
||||
applyBatchResults(data.statuses || {});
|
||||
updateStamp('last check', data.checkedAt || new Date());
|
||||
} catch (batchError) {
|
||||
console.warn('Batched status refresh failed, falling back to direct probes:', batchError);
|
||||
try {
|
||||
await refreshFallback();
|
||||
updateStamp('last check');
|
||||
} catch (fallbackError) {
|
||||
console.error('Dashboard refresh failed:', fallbackError);
|
||||
updateStamp('last failed');
|
||||
}
|
||||
} finally {
|
||||
refreshInFlight = null;
|
||||
if (refreshQueued) {
|
||||
refreshQueued = false;
|
||||
setTimeout(() => { window.refreshAll(); }, 0);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return refreshInFlight;
|
||||
}
|
||||
|
||||
// DNS open buttons — use event delegation on .top container
|
||||
|
||||
@@ -25,14 +25,28 @@
|
||||
function animateTopCards() {
|
||||
const topCards = document.querySelectorAll('.top .card');
|
||||
topCards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 150); // 150ms delay between top cards
|
||||
card.style.transitionDelay = `${Math.min(index * 60, 300)}ms`;
|
||||
});
|
||||
requestAnimationFrame(() => {
|
||||
topCards.forEach(card => card.classList.add('loaded'));
|
||||
});
|
||||
}
|
||||
|
||||
function registerServiceWorker() {
|
||||
if (!('serviceWorker' in navigator)) return;
|
||||
if (!window.isSecureContext && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') return;
|
||||
|
||||
const register = () => {
|
||||
navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' }).catch((error) => {
|
||||
console.warn('[init] Service worker registration failed:', error);
|
||||
});
|
||||
};
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
register();
|
||||
} else {
|
||||
window.addEventListener('load', register, { once: true });
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize dashboard (called after TOTP gate check or directly if TOTP disabled)
|
||||
@@ -184,6 +198,7 @@
|
||||
|
||||
window.initializeDashboard = initializeDashboard;
|
||||
window.loadCustomServices = loadCustomServices;
|
||||
registerServiceWorker();
|
||||
|
||||
// TOTP-gated initialization
|
||||
(async () => {
|
||||
|
||||
Reference in New Issue
Block a user