8cb33dbc90
- 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
88 lines
2.6 KiB
Plaintext
88 lines
2.6 KiB
Plaintext
package views
|
||
|
||
import (
|
||
"nerd-monitor/internal/store"
|
||
)
|
||
|
||
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)
|
||
|
||
<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>
|
||
} 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>
|
||
|
||
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>
|
||
function toggleAll(checkbox) {
|
||
const checkboxes = document.querySelectorAll('.agent-checkbox');
|
||
checkboxes.forEach(cb => cb.checked = checkbox.checked);
|
||
}
|
||
</script>
|
||
}
|