bvandeusen/Roundtable-plugins
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish(host_agent): settings table padding + confirm guards + widget flex rows

Browse Source 
- settings_list: use global .table class for proper cell padding,
  wrap confirm() on rotate/delete submit, use btn-sm and btn-danger
  for clearer destructive affordance
- widget_table: replace naked table (unstyled, header wrap) with
  flex rows matching docker/snmp widget convention, compact labels,
  health dot colored by worst-of cpu/mem/disk thresholds
This commit is contained in:
Bryan Van Deusen
2026-04-15 18:25:48 -04:00
parent 7468806bad
commit 9eda04e57b
2 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
host_agent/templates/settings_list.html
+16 -12
View File
@@ -15,12 +15,12 @@
<div class="card">
<form method="post" action="/plugins/host_agent/settings/add-host"
style="display:flex;gap:0.5rem;align-items:flex-end;">
<div class="form-group">
style="display:flex;gap:0.75rem;align-items:flex-end;flex-wrap:wrap;">
<div class="form-group" style="margin-bottom:0;">
<label>Host name</label>
<input type="text" name="name" required>
</div>
<div class="form-group">
<div class="form-group" style="margin-bottom:0;">
<label>Address (optional)</label>
<input type="text" name="address">
</div>
@@ -28,12 +28,12 @@
</form>
</div>
<div class="card">
<table>
<div class="card-flush">
<table class="table">
<thead>
<tr>
<th>Host</th><th>Agent version</th><th>Distro</th>
<th>Last seen</th><th>Actions</th>
<th>Last seen</th><th class="td-actions">Actions</th>
</tr>
</thead>
<tbody>
@@ -43,17 +43,21 @@
<td>{{ item.reg.agent_version or "—" }}</td>
<td>{{ item.reg.distro or "—" }}</td>
<td>{{ item.reg.last_seen_at.strftime("%Y-%m-%d %H:%M:%S") if item.reg.last_seen_at else "never" }}</td>
<td>
<form method="post" action="/plugins/host_agent/settings/{{ item.reg.host_id }}/rotate-token" style="display:inline;">
<button type="submit" class="btn btn-ghost">Rotate token</button>
<td class="td-actions">
<form method="post" action="/plugins/host_agent/settings/{{ item.reg.host_id }}/rotate-token"
style="display:inline;"
onsubmit="return confirm('Rotate the token for this host? The existing agent will stop working until reinstalled with the new token.');">
<button type="submit" class="btn btn-ghost btn-sm">Rotate token</button>
</form>
<form method="post" action="/plugins/host_agent/settings/{{ item.reg.host_id }}/delete" style="display:inline;">
<button type="submit" class="btn btn-ghost">Delete</button>
<form method="post" action="/plugins/host_agent/settings/{{ item.reg.host_id }}/delete"
style="display:inline;"
onsubmit="return confirm('Delete this host registration? The agent will be unable to report metrics until re-registered.');">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
{% else %}
<tr><td colspan="5">No hosts registered. Add one above.</td></tr>
<tr><td colspan="5" class="empty">No hosts registered. Add one above.</td></tr>
{% endfor %}
</tbody>
</table>
host_agent/templates/widget_table.html
+32 -17
View File
@@ -1,19 +1,34 @@
<table class="widget-table">
<thead>
<tr><th>Host</th><th>CPU %</th><th>Mem %</th><th>Disk % (worst)</th><th>Load 1m</th><th>Last seen</th></tr>
</thead>
<tbody>
{# host_agent widget — fleet glance, flex rows (no header wrap) #}
{% if rows %}
<div style="display:grid;gap:0.1rem;">
{% for r in rows %}
<tr>
<td><a href="/plugins/host_agent/{{ r.host.id }}/">{{ r.host.name }}</a></td>
<td>{{ "%.1f"|format(r.cpu_pct) if r.cpu_pct is not none else "—" }}</td>
<td>{{ "%.1f"|format(r.mem_used_pct) if r.mem_used_pct is not none else "—" }}</td>
<td>{{ "%.1f"|format(r.disk_worst) if r.disk_worst is not none else "—" }}</td>
<td>{{ "%.2f"|format(r.load_1m) if r.load_1m is not none else "—" }}</td>
<td>{{ r.reg.last_seen_at.strftime("%H:%M:%S") if r.reg.last_seen_at else "never" }}</td>
</tr>
{% else %}
<tr><td colspan="6">No hosts with agent data yet.</td></tr>
{% set stale = not r.reg.last_seen_at %}
<div style="display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;padding:0.3rem 0;border-bottom:1px solid var(--border);">
<span class="dot {% if stale %}dot-dim{% elif (r.cpu_pct or 0) >= 90 or (r.mem_used_pct or 0) >= 90 or (r.disk_worst or 0) >= 90 %}dot-warn{% else %}dot-up{% endif %}"></span>
<a href="/plugins/host_agent/{{ r.host.id }}/"
style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;">
{{ r.host.name }}
</a>
<span style="display:flex;gap:0.75rem;font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:0.75rem;flex-shrink:0;">
{% if r.cpu_pct is not none %}
<span title="CPU"><span style="color:var(--text-dim);">cpu</span> {{ "%.0f"|format(r.cpu_pct) }}%</span>
{% endif %}
{% if r.mem_used_pct is not none %}
<span title="Memory"><span style="color:var(--text-dim);">mem</span> {{ "%.0f"|format(r.mem_used_pct) }}%</span>
{% endif %}
{% if r.disk_worst is not none %}
<span title="Worst disk mount"><span style="color:var(--text-dim);">disk</span> {{ "%.0f"|format(r.disk_worst) }}%</span>
{% endif %}
{% if r.load_1m is not none %}
<span title="Load average 1m"><span style="color:var(--text-dim);">load</span> {{ "%.2f"|format(r.load_1m) }}</span>
{% endif %}
</span>
<span style="min-width:60px;text-align:right;font-size:0.72rem;color:var(--text-dim);flex-shrink:0;">
{{ r.reg.last_seen_at.strftime("%H:%M:%S") if r.reg.last_seen_at else "never" }}
</span>
</div>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="empty" style="padding:0.5rem 0;font-size:0.85rem;">No hosts with agent data yet.</p>
{% endif %}