113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
let autoRefreshInterval = null;
|
|
|
|
function refreshImage() {
|
|
const img = document.getElementById('gradientImage');
|
|
img.classList.add('loading');
|
|
|
|
const timestamp = new Date().getTime();
|
|
img.src = 'gradient.jxl?' + timestamp;
|
|
|
|
img.onload = function() {
|
|
img.classList.remove('loading');
|
|
updateStatus('Image refreshed at ' + new Date().toLocaleTimeString());
|
|
};
|
|
|
|
img.onerror = function() {
|
|
img.classList.remove('loading');
|
|
updateStatus('Error loading image', 'error');
|
|
};
|
|
}
|
|
|
|
function toggleAutoRefresh() {
|
|
const button = document.getElementById('autoRefreshBtn');
|
|
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
autoRefreshInterval = null;
|
|
button.textContent = 'Start Auto-Refresh (30s)';
|
|
button.classList.remove('danger');
|
|
updateStatus('Auto-refresh stopped');
|
|
} else {
|
|
autoRefreshInterval = setInterval(refreshImage, 30000);
|
|
button.textContent = 'Stop Auto-Refresh';
|
|
button.classList.add('danger');
|
|
updateStatus('Auto-refresh started (30s interval)');
|
|
}
|
|
}
|
|
|
|
function showStats() {
|
|
fetch('/api/timing-stats')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
displayStats(data);
|
|
document.getElementById('statsPanel').style.display = 'block';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching stats:', error);
|
|
updateStatus('Error loading stats', 'error');
|
|
});
|
|
}
|
|
|
|
function hideStats() {
|
|
document.getElementById('statsPanel').style.display = 'none';
|
|
}
|
|
|
|
function clearStats() {
|
|
fetch('/api/clear-stats', { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateStatus('Statistics cleared');
|
|
hideStats();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error clearing stats:', error);
|
|
updateStatus('Error clearing stats', 'error');
|
|
});
|
|
}
|
|
|
|
function displayStats(stats) {
|
|
const statsContent = document.getElementById('statsContent');
|
|
|
|
if (stats.length === 0) {
|
|
statsContent.innerHTML = '<p>No timing data available.</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '<table class="stats-table">';
|
|
html += '<tr><th>Function</th><th>Calls</th><th>Total (s)</th><th>Avg (s)</th><th>Min (s)</th><th>Max (s)</th><th>Median (s)</th><th>P90 (s)</th><th>P95 (s)</th><th>P99 (s)</th></tr>';
|
|
|
|
stats.forEach(stat => {
|
|
html += `<tr>
|
|
<td>${stat.function}</td>
|
|
<td>${stat.call_count}</td>
|
|
<td>${parseFloat(stat.total_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.avg_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.min_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.max_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.median_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.p90_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.p95_time).toFixed(6)}</td>
|
|
<td>${parseFloat(stat.p99_time).toFixed(6)}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</table>';
|
|
statsContent.innerHTML = html;
|
|
}
|
|
|
|
function updateStatus(message, type = 'info') {
|
|
const statusEl = document.getElementById('status');
|
|
statusEl.textContent = message;
|
|
statusEl.className = `status ${type}`;
|
|
|
|
// Auto-hide after 5 seconds
|
|
setTimeout(() => {
|
|
statusEl.textContent = '';
|
|
statusEl.className = 'status';
|
|
}, 5000);
|
|
}
|
|
|
|
// Auto-refresh when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
refreshImage();
|
|
}); |