v0.5.4: monitoring page frontend fixes

- Fix tooltip "Invalid Date" by using raw.x with parsed.x fallback
- Fix chart x-axis bounds by including initial min/max in chartOpts
- Fix sysinfo alignment with fixed 2-column grid and consistent styling
- Fix chart overflow on mobile with min-width:0 and overflow:hidden
- Remove redundant <style> block from monitoring.html (moved to style.css)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-16 12:04:02 +01:00
parent 71da2938a5
commit c1dda1aec6
2 changed files with 31 additions and 14 deletions
@@ -1,14 +1,6 @@
{{define "monitoring"}}
{{template "layout_start" .}}
<style>
/* Monitoring page specific overrides */
.sysinfo-value {
text-align: right;
font-weight: bold;
}
</style>
<div class="page-header">
<h2>Rendszermonitor</h2>
</div>
@@ -183,6 +175,8 @@
// --- Chart options for line charts with LINEAR x-axis ---
function chartOpts(yLabel, beginAtZero) {
var now = Date.now();
var defaultRangeMs = parseRangeMs('1h');
return {
responsive: true,
maintainAspectRatio: false,
@@ -198,8 +192,14 @@
callbacks: {
title: function(items) {
if (!items.length) return '';
// parsed.x is the ms timestamp on a linear axis
return formatTimestamp(items[0].parsed.x);
var raw = items[0].raw;
if (raw && typeof raw === 'object' && raw.x) {
return formatTimestamp(raw.x);
}
if (items[0].parsed && items[0].parsed.x) {
return formatTimestamp(items[0].parsed.x);
}
return '';
}
}
}
@@ -207,6 +207,8 @@
scales: {
x: {
type: 'linear',
min: now - defaultRangeMs,
max: now,
grid: {color: 'rgba(48,54,61,0.5)'},
ticks: {
color: '#8b949e',