bvandeusen
10808c1c5d
- Hosts-Overview: move the CPU sparkline inline next to the cpu % value it represents (was floated far right on the name line, reading as unrelated). - Host Agent history widget: caption the chart with the host it represents (the panel title is generic) — links to the host hub. - History widget: snap the y-axis to a stable 0..next-10%-band ceiling instead of auto-scaling to the exact peak, so the 'zoom' no longer jumps each poll. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
71 lines
3.1 KiB
HTML
71 lines
3.1 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="display:flex;flex-direction:column;height:100%;min-height:200px;">
|
||
{# Name the host the graph represents — the panel title is generic. #}
|
||
<div style="flex:0 0 auto;font-size:0.75rem;color:var(--text-muted);margin-bottom:0.3rem;">
|
||
{% if session.user_id %}
|
||
<a href="/hosts/{{ host.id }}" style="font-weight:600;">{{ host.name }}</a>
|
||
{% else %}
|
||
<strong style="color:var(--text);">{{ host.name }}</strong>
|
||
{% endif %}
|
||
<span style="color:var(--text-dim);">· last {{ hours }}h</span>
|
||
</div>
|
||
<div style="flex:1 1 auto;min-height:150px;position:relative;">
|
||
<canvas id="host-hist-{{ wid }}"></canvas>
|
||
</div>
|
||
</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" } },
|
||
// Fixed 0–{{ y_max }} ceiling (server snaps the data peak up to the next
|
||
// 10% band). Steady across refreshes — auto-scaling made the zoom jump on
|
||
// every poll — while a banded ceiling still keeps the lines filling the panel.
|
||
y: { min: 0, max: {{ y_max }}, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
|
||
},
|
||
plugins: {
|
||
legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } },
|
||
tooltip: { callbacks: { title: function (items) { return items.length ? fmtTime(items[0].parsed.x) : ""; } } },
|
||
},
|
||
},
|
||
});
|
||
})();
|
||
</script>
|
||
{% endif %}
|