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

@@ -9,9 +9,13 @@ templ AgentDetail(agent *store.AgentStats) {
@BaseLayout(agent.Hostname, agentDetailContent(agent))
}
templ AgentDetailContent(agent *store.AgentStats) {
@agentDetailContent(agent)
}
templ agentDetailContent(agent *store.AgentStats) {
<a href="/" class="back-link">← Back to Dashboard</a>
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
<h2 style="margin: 0;">{ agent.Hostname }</h2>
@AgentStatusBadge(agent.LastSeen)
@@ -21,14 +25,16 @@ templ agentDetailContent(agent *store.AgentStats) {
<div class="grid" style="grid-template-columns: 1fr;">
<div class="card">
<div class="card-title">CPU Usage</div>
<div class="metric-value" style="font-size: 2rem; margin: 1rem 0;">
{ FormatPercent(agent.CPUUsage) }
</div>
<div class="progress-bar">
<div class={ "progress-fill", calcProgressClass(agent.CPUUsage/100) } style={ fmt.Sprintf("width: %.1f%%", agent.CPUUsage) }></div>
</div>
<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
Last updated: { FormatTime(agent.LastSeen) }
<div id="cpu-stats" hx-get={ templ.SafeURL("/api/agents/" + agent.ID + "/stats") } hx-trigger="stats-update" hx-swap="innerHTML">
<div class="metric-value" style="font-size: 2rem; margin: 1rem 0;">
{ FormatPercent(agent.CPUUsage) }
</div>
<div class="progress-bar">
<div class="progress-fill" class={ "progress-fill", calcProgressClass(agent.CPUUsage/100) } style={ fmt.Sprintf("width: %.1f%%", agent.CPUUsage) }></div>
</div>
<div style="margin-top: 1rem; font-size: 0.875rem; color: #94a3b8;">
Last updated: { FormatTime(agent.LastSeen) }
</div>
</div>
</div>
</div>