bvandeusen
988c13d51f
Milestone 72 phase C — bring the host-view graphs onto the dashboard:
- host_resource_history widget reworked into a real host-view chart: epoch-ms
linear axis (no Chart.js date adapter), themed like the host-detail charts,
maintainAspectRatio:false so it fills the resized panel, unique canvas per
widget instance (wid), and empty states ("pick a host" / "no metrics yet").
Was previously unusable — it had a broken time axis and no way to choose a host.
- Add a "host" param type: the edit form renders a live dropdown of hosts
(dashboard routes now pass the host list to the editor); the chosen host_id is
stored in config and fed to the widget.
- Hosts-overview widget gains a per-row CPU sparkline (last hour) via the shared
sparkline_svg helper — the host-view at-a-glance trend, on the main widget.
Charts/sparklines render only in the browser, so CI can't exercise them — needs
an operator visual check.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
{# host_agent history-graph widget — the host-view utilization chart, embedded
|
|
on a dashboard. Fills the (resizable) panel; epoch-ms linear axis so no
|
|
Chart.js date adapter is needed. #}
|
|
{% set has_data = host and (series.cpu_pct or series.mem_used_pct or series.disk_root) %}
|
|
{% if not host %}
|
|
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.75rem 0;">
|
|
No host selected. <strong>Edit</strong> this dashboard and pick a host for this graph.
|
|
</div>
|
|
{% elif not has_data %}
|
|
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.75rem 0;">
|
|
No agent metrics for <strong>{{ host.name }}</strong> in the last {{ hours }}h yet.
|
|
</div>
|
|
{% else %}
|
|
<div style="height:100%;min-height:180px;position:relative;">
|
|
<canvas id="host-hist-{{ wid }}"></canvas>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var el = document.getElementById("host-hist-{{ wid }}");
|
|
if (!el) return;
|
|
var series = {{ series|tojson }};
|
|
var fmtTime = function (v) {
|
|
var d = new Date(v);
|
|
return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
|
|
};
|
|
var ds = [
|
|
{ key: "cpu_pct", label: "CPU %", color: "#c8a840" },
|
|
{ key: "mem_used_pct", label: "Mem %", color: "#4aa86a" },
|
|
{ key: "disk_root", label: "Disk / %", color: "#c87840" },
|
|
];
|
|
new Chart(el.getContext("2d"), {
|
|
type: "line",
|
|
data: { datasets: ds.map(function (d) {
|
|
return {
|
|
label: d.label,
|
|
data: (series[d.key] || []).map(function (p) { return { x: p[0], y: p[1] }; }),
|
|
borderColor: d.color, backgroundColor: d.color, borderWidth: 1.5, tension: 0.25,
|
|
};
|
|
}) },
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
interaction: { mode: "index", intersect: false },
|
|
elements: { point: { radius: 0 } },
|
|
scales: {
|
|
x: { type: "linear", ticks: { callback: function (v) { return fmtTime(v); }, maxTicksLimit: 6, color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
|
|
y: { beginAtZero: true, max: 100, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
|
|
},
|
|
plugins: { legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } } },
|
|
},
|
|
});
|
|
})();
|
|
</script>
|
|
{% endif %}
|