feat: implement real-time updates and enhance monitoring system

- Add structured logging with slog throughout application
- Implement real-time updates using Server-Sent Events and HTMX
- Add broadcaster system for instant UI updates when agents report stats
- Replace meta refresh with HTMX-powered seamless updates
- Add new API endpoints for HTMX fragments and SSE events
- Update templates to use HTMX for instant data refresh
- Enhance README with real-time features and updated documentation
- Remove obsolete template generation file
This commit is contained in:
Ducky SSH User
2025-12-20 08:08:56 +00:00
parent 50dcfcdc83
commit 8cb33dbc90
8 changed files with 437 additions and 105 deletions

View File

@@ -6,8 +6,31 @@ templ BaseLayout(title string, content templ.Component) {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content="5" />
<title>{ title } - Nerd Monitor</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Connect to Server-Sent Events for real-time updates
const eventSource = new EventSource('/api/events');
eventSource.onmessage = function(event) {
console.log('SSE message received:', event.data);
};
eventSource.addEventListener('stats-update', function(event) {
console.log('Stats update event:', event.data);
// Trigger HTMX updates using HTMX's API
const agentTable = document.getElementById('agent-table-container');
const cpuStats = document.getElementById('cpu-stats');
if (agentTable) htmx.trigger(agentTable, 'stats-update');
if (cpuStats) htmx.trigger(cpuStats, 'stats-update');
});
eventSource.addEventListener('connected', function(event) {
console.log('SSE connected');
});
eventSource.onerror = function(event) {
console.log('SSE error:', event);
};
});
</script>
<style>
* {
margin: 0;