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