ducky/nerd-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: implement real-time updates and enhance monitoring system

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

134
views/dashboard.templ
View File

@@ -8,74 +8,80 @@ templ Dashboard(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
@BaseLayout("Dashboard", dashboardContent(agents, staleAgents))
}
templ DashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
@dashboardContent(agents, staleAgents)
}
templ dashboardContent(agents []*store.AgentStats, staleAgents []*store.AgentStats) {
<h2 style="margin-bottom: 1rem;">Agent Status Overview</h2>
@StaleAgentAlert(len(staleAgents), nil)
if len(agents) == 0 {
<div class="alert alert-info">
<strong>ℹ️ No agents connected</strong>
<p style="margin-top: 0.5rem; font-size: 0.875rem;">
Start an agent to see its statistics appear here.
</p>
</div>
} else {
<div class="card">
<div class="card-title">Active Agents</div>
<table>
<thead>
<tr>
<th>Hostname</th>
<th>CPU Usage</th>
<th>Memory</th>
<th>Disk</th>
<th>Last Seen</th>
</tr>
</thead>
<tbody>
for _, agent := range agents {
@AgentRow(agent.ID, agent.Hostname, agent.CPUUsage, agent.RAMUsage, agent.RAMTotal, agent.DiskUsage, agent.DiskTotal, agent.LastSeen)
}
</tbody>
</table>
</div>
}
if len(staleAgents) > 0 {
<div class="card" style="margin-top: 2rem; border-color: #d97706;">
<div class="card-title" style="color: #f59e0b;">
Stale Agents ({ len(staleAgents) })
</div>
<form method="POST" action="/api/agents/remove-stale" style="margin-top: 1rem;">
<table>
<thead>
<tr>
<th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)" /></th>
<th>Hostname</th>
<th>Last Seen</th>
</tr>
</thead>
<tbody>
for _, agent := range staleAgents {
<tr>
<td><input type="checkbox" name="agent_ids" value={ agent.ID } class="agent-checkbox" /></td>
<td>{ agent.Hostname }</td>
<td class="timestamp">{ FormatTime(agent.LastSeen) }</td>
</tr>
}
</tbody>
</table>
<div class="btn-group">
<button type="submit" class="btn btn-danger" style="margin-top: 1rem;">Remove Selected</button>
@StaleAgentAlert(len(staleAgents), nil)
<div id="agent-table-container" hx-get="/api/dashboard/table" hx-trigger="stats-update" hx-swap="innerHTML">
if len(agents) == 0 {
<div class="alert alert-info">
<strong>ℹ️ No agents connected</strong>
<p style="margin-top: 0.5rem; font-size: 0.875rem;">
Start an agent to see its statistics appear here.
</p>
</div>
</form>
} else {
<div class="card">
<div class="card-title">Active Agents</div>
<table>
<thead>
<tr>
<th>Hostname</th>
<th>CPU Usage</th>
<th>Memory</th>
<th>Disk</th>
<th>Last Seen</th>
</tr>
</thead>
<tbody>
for _, agent := range agents {
@AgentRow(agent.ID, agent.Hostname, agent.CPUUsage, agent.RAMUsage, agent.RAMTotal, agent.DiskUsage, agent.DiskTotal, agent.LastSeen)
}
</tbody>
</table>
</div>
}
</div>
<script>
function toggleAll(checkbox) {
const checkboxes = document.querySelectorAll('.agent-checkbox');
checkboxes.forEach(cb => cb.checked = checkbox.checked);
if len(staleAgents) > 0 {
<div class="card" style="margin-top: 2rem; border-color: #d97706;">
<div class="card-title" style="color: #f59e0b;">
Stale Agents ({ len(staleAgents) })
</div>
<form method="POST" action="/api/agents/remove-stale" style="margin-top: 1rem;">
<table>
<thead>
<tr>
<th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)" /></th>
<th>Hostname</th>
<th>Last Seen</th>
</tr>
</thead>
<tbody>
for _, agent := range staleAgents {
<tr>
<td><input type="checkbox" name="agent_ids" value={ agent.ID } class="agent-checkbox" /></td>
<td>{ agent.Hostname }</td>
<td class="timestamp">{ FormatTime(agent.LastSeen) }</td>
</tr>
}
</tbody>
</table>
<div class="btn-group">
<button type="submit" class="btn btn-danger" style="margin-top: 1rem;">Remove Selected</button>
</div>
</form>
</div>
}
</script>
<script>
function toggleAll(checkbox) {
const checkboxes = document.querySelectorAll('.agent-checkbox');
checkboxes.forEach(cb => cb.checked = checkbox.checked);
}
</script>
}