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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user