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
101 lines
3.6 KiB
Plaintext
101 lines
3.6 KiB
Plaintext
package views
|
|
|
|
import (
|
|
"fmt"
|
|
"nerd-monitor/internal/store"
|
|
)
|
|
|
|
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)
|
|
</div>
|
|
|
|
<!-- CPU Usage Card -->
|
|
<div class="grid" style="grid-template-columns: 1fr;">
|
|
<div class="card">
|
|
<div class="card-title">CPU Usage</div>
|
|
<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>
|
|
|
|
<!-- Memory and Disk Usage Cards -->
|
|
<div class="grid" style="margin-top: 1.5rem;">
|
|
<div class="card">
|
|
<div class="card-title">Memory Usage</div>
|
|
@UsageBar("RAM", agent.RAMUsage, agent.RAMTotal)
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-title">Disk Usage</div>
|
|
@UsageBar("Disk", agent.DiskUsage, agent.DiskTotal)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Information and Settings -->
|
|
<div class="card" style="margin-top: 1.5rem;">
|
|
<div class="card-title">Agent Information</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Agent ID</span>
|
|
<span class="metric-value" style="font-family: monospace; font-size: 0.875rem;">{ agent.ID }</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<span class="metric-label">Last Seen</span>
|
|
<span class="metric-value">{ agent.LastSeen.Format("2006-01-02 15:04:05") }</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hostname Settings -->
|
|
<div class="card" style="margin-top: 1.5rem;">
|
|
<div class="card-title">Settings</div>
|
|
<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/agents/%s/hostname", agent.ID)) } style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<label for="hostname" style="font-size: 0.875rem; font-weight: 500; color: #cbd5e1;">
|
|
Hostname
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="hostname"
|
|
name="hostname"
|
|
value={ agent.Hostname }
|
|
required
|
|
style="padding: 0.5rem 0.75rem; background-color: #1e293b; border: 1px solid #475569; border-radius: 0.375rem; color: #e2e8f0; font-size: 0.875rem;"
|
|
/>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" style="align-self: flex-start;">
|
|
Update Hostname
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Danger Zone -->
|
|
<div class="card" style="margin-top: 1.5rem; border-left: 3px solid #ef4444;">
|
|
<div class="card-title" style="color: #ef4444;">Danger Zone</div>
|
|
<p style="margin: 0 0 1rem 0; color: #94a3b8; font-size: 0.875rem;">
|
|
Deleting this agent will remove all its data and history.
|
|
</p>
|
|
<form method="POST" action={ templ.SafeURL(fmt.Sprintf("/api/agents/%s/delete", agent.ID)) } style="margin: 0;" onsubmit="return confirm('Are you sure you want to remove this agent? This action cannot be undone.');">
|
|
<button type="submit" class="btn btn-danger">Delete Agent</button>
|
|
</form>
|
|
</div>
|
|
}
|