761b91b031
- Create enhanced agent detail template with all stats and hostname edit form
- Add UpdateHostname method to store for agent hostname updates
- Add UpdateAgentHostname handler in UI for web form submissions
- Add UpdateHostname endpoint in API handler for JSON requests
- Register new POST /agents/{id}/hostname route for hostname updates
- Improve agent detail page layout with Settings and Danger Zone sections
- Add error handling for missing agents and empty hostname values
95 lines
3.3 KiB
Plaintext
95 lines
3.3 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) {
|
|
<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 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>
|
|
</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>
|
|
}
|