bvandeusen
9e4f1983f8
The full-metrics page rendered once server-side with the history query inline, so the charts blocked first paint and nothing refreshed without a reload (it reads the latest snapshot the server holds — the agent pushes ~every 30s). Split it into a shell + two HTMX fragments: - Shell (host_detail.html): header + shared time-range toggle + two containers; paints instantly. - Current state (/<id>/metrics → _host_metrics.html): identity + gauges + per-core + filesystems + interfaces/disks + temps, from the DISTINCT ON latest query. hx-trigger "load, every 15s" → live numbers at ~the agent cadence. - History charts (/<id>/charts → _host_charts.html): the 3 charts + Chart.js, from the date_bin history query. hx-trigger "load, every 60s, rangeChange" so they lazy-load (never block paint), refresh slowly, and follow the range selector. Leak-safe: previous Chart instances are destroyed before re-render. - Range toggle switched from full-reload links to the shared _time_range.html (setTimeRange + rangeChange), so only the fragments refetch. - routes: host_detail (shell) + host_detail_metrics + host_detail_charts, with a _split_host_metrics helper. - tests/test_templates_parse.py now also parses plugin templates (these fragments aren't rendered in the unit lane). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC
33 lines
1.5 KiB
HTML
33 lines
1.5 KiB
HTML
{% extends "base.html" %}
|
|
{% from "_macros.html" import crumbs %}
|
|
{% block title %}{{ host.name }} — Metrics — Steward{% endblock %}
|
|
{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), (host.name, "/hosts/" ~ host.id), ("Metrics", "")]) }}{% endblock %}
|
|
{% block content %}
|
|
{# Shell only: the current-state and history-chart sections stream in via HTMX
|
|
below, so the heavy history query never blocks first paint and the data
|
|
refreshes live (≈ the agent's push cadence) without a full reload. #}
|
|
<div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:0.75rem;">
|
|
<h1 class="page-title" style="margin-bottom:0;">{{ host.name }}</h1>
|
|
{% include "_time_range.html" %}
|
|
</div>
|
|
|
|
{# Current state — lazy + polled live (latest snapshot the server holds). #}
|
|
<div id="hm-current"
|
|
hx-get="/plugins/host_agent/{{ host.id }}/metrics"
|
|
hx-trigger="load, every {{ poll_seconds }}s"
|
|
hx-swap="innerHTML">
|
|
<div class="card empty">Loading metrics…</div>
|
|
</div>
|
|
|
|
{# History charts — lazy (never blocks paint), refreshed on a slow cadence and
|
|
on range change; range comes from the shared #time-range input. #}
|
|
<div id="hm-charts"
|
|
hx-get="/plugins/host_agent/{{ host.id }}/charts"
|
|
hx-trigger="load, every {{ chart_poll_seconds }}s, rangeChange from:body"
|
|
hx-include="#time-range"
|
|
hx-swap="innerHTML"
|
|
style="margin-top:1rem;">
|
|
<div class="card empty">Loading charts…</div>
|
|
</div>
|
|
{% endblock %}
|