61 lines
2.1 KiB
HTML
61 lines
2.1 KiB
HTML
{{define "content"}}
|
|
<div class="header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
|
<div>
|
|
<h2 style="margin: 0;">System Logs</h2>
|
|
<p style="color: var(--text-secondary); margin-top: 0.5rem;">Live streaming output of the application logs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 0;">
|
|
<pre id="log-container" style="margin: 0; padding: 1.5rem; background: var(--surface); color: var(--text-primary); border-radius: 12px; font-family: monospace; height: 600px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; font-size: 0.875rem; line-height: 1.5;"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
const logContainer = document.getElementById('log-container');
|
|
let autoScroll = true;
|
|
|
|
logContainer.addEventListener('scroll', () => {
|
|
const isAtBottom = logContainer.scrollHeight - logContainer.scrollTop <= logContainer.clientHeight + 50;
|
|
autoScroll = isAtBottom;
|
|
});
|
|
|
|
function appendLog(timestamp, message) {
|
|
const entry = document.createElement('div');
|
|
const tsSpan = document.createElement('span');
|
|
tsSpan.style.color = '#888';
|
|
tsSpan.textContent = `[${timestamp}] `;
|
|
|
|
const msgSpan = document.createElement('span');
|
|
msgSpan.textContent = message;
|
|
|
|
entry.appendChild(tsSpan);
|
|
entry.appendChild(msgSpan);
|
|
logContainer.appendChild(entry);
|
|
|
|
if (autoScroll) {
|
|
logContainer.scrollTop = logContainer.scrollHeight;
|
|
}
|
|
}
|
|
|
|
// Load recent logs first
|
|
fetch('/api/logs')
|
|
.then(response => response.json())
|
|
.then(logs => {
|
|
if (logs && logs.length > 0) {
|
|
logs.forEach(log => {
|
|
appendLog(log.timestamp, log.message);
|
|
});
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching logs:', error));
|
|
|
|
// Listen for live updates
|
|
if (window.sse) {
|
|
window.sse.addEventListener('log', function(e) {
|
|
const data = JSON.parse(e.data);
|
|
appendLog(data.timestamp, data.message);
|
|
});
|
|
}
|
|
</script>
|
|
{{end}}
|