From 4af2b1b5606af46b8d893f0fc439131c0806a6d9 Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Mon, 16 Feb 2026 11:44:29 +0100
Subject: [PATCH] updated monitoring.html

---
 .../internal/web/templates/monitoring.html    | 445 +++++++++++-------
 1 file changed, 270 insertions(+), 175 deletions(-)

diff --git a/controller/internal/web/templates/monitoring.html b/controller/internal/web/templates/monitoring.html
index 30864ec..eb5ff8e 100644
--- a/controller/internal/web/templates/monitoring.html
+++ b/controller/internal/web/templates/monitoring.html
@@ -1,6 +1,14 @@
 {{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>
@@ -145,139 +153,37 @@
 <script src="/static/chart.min.js"></script>
 <script>
 (function() {
+    'use strict';
+
     // --- Chart.js dark theme defaults ---
-    const colors = {
+    var colors = {
         cpu: {border: '#0088cc', bg: 'rgba(0,136,204,0.1)'},
         memory: {border: '#238636', bg: 'rgba(35,134,54,0.1)'},
         temp: {border: '#d29922', bg: 'rgba(210,153,34,0.1)'},
-        load: {border: '#db6d28', bg: 'rgba(219,109,40,0.1)'},
+        load: {border: '#db6d28', bg: 'rgba(219,109,40,0.1)'}
     };
 
-    const chartOpts = (yLabel, beginAtZero) => ({
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: {duration: 300},
-        plugins: {
-            legend: {display: false},
-            tooltip: {
-                backgroundColor: '#1c2128',
-                titleColor: '#e6edf3',
-                bodyColor: '#8b949e',
-                borderColor: '#30363d',
-                borderWidth: 1,
-                callbacks: {
-                    title: function(items) {
-                        if (!items.length) return '';
-                        return formatTimestamp(items[0].label);
-                    }
-                }
-            }
-        },
-        scales: {
-            x: {
-                grid: {color: 'rgba(48,54,61,0.5)'},
-                ticks: {color: '#8b949e', maxTicksLimit: 8, callback: function(v) { return formatTimeLabel(this.getLabelForValue(v)); }}
-            },
-            y: {
-                grid: {color: 'rgba(48,54,61,0.5)'},
-                ticks: {color: '#8b949e'},
-                beginAtZero: beginAtZero !== false,
-                title: {display: !!yLabel, text: yLabel || '', color: '#6e7681', font: {size: 11}}
-            }
-        }
-    });
-
-    const lineDataset = (color) => ({
-        borderColor: color.border,
-        backgroundColor: color.bg,
-        borderWidth: 2,
-        pointRadius: 0,
-        pointHitRadius: 10,
-        tension: 0.3,
-        fill: true,
-        spanGaps: true
-    });
-
-    // --- Timezone formatting ---
-    const budaTZ = 'Europe/Budapest';
-    function formatTimestamp(ts) {
-        if (!ts) return '';
-        const d = new Date(typeof ts === 'number' && ts < 1e12 ? ts * 1000 : ts);
-        return d.toLocaleString('hu-HU', {timeZone: budaTZ, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'});
-    }
-    function formatTimeLabel(ts) {
-        if (!ts) return '';
-        const d = new Date(typeof ts === 'number' && ts < 1e12 ? ts * 1000 : ts);
-        return d.toLocaleTimeString('hu-HU', {timeZone: budaTZ, hour: '2-digit', minute: '2-digit'});
-    }
-
-    // --- System charts ---
-    let systemRange = '1h';
-    let chartCPU, chartMem, chartTemp, chartLoad;
-
-    function initSystemCharts() {
-        const mkChart = (id, color, yLabel, beginAtZero) => {
-            return new Chart(document.getElementById(id), {
-                type: 'line',
-                data: {labels: [], datasets: [{data: [], ...lineDataset(color)}]},
-                options: chartOpts(yLabel, beginAtZero)
-            });
-        };
-        chartCPU = mkChart('chart-cpu', colors.cpu, '%', true);
-        chartMem = mkChart('chart-memory', colors.memory, 'GB', true);
-        chartTemp = mkChart('chart-temp', colors.temp, '°C', false);
-        chartLoad = mkChart('chart-load', colors.load, '', true);
-    }
-
-    async function loadSystemMetrics() {
-        try {
-            const resp = await fetch('/api/metrics/system?range=' + systemRange + '&resolution=200');
-            const json = await resp.json();
-            if (!json.ok || !json.data) return;
-            const d = json.data;
-
-            if (!d.labels || d.labels.length === 0) {
-                document.getElementById('system-charts').style.display = 'none';
-                document.getElementById('system-charts-empty').style.display = 'block';
-                return;
-            }
-            document.getElementById('system-charts').style.display = '';
-            document.getElementById('system-charts-empty').style.display = 'none';
-
-            const labels = d.labels.map(ts => ts * 1000); // ms for Date
-
-            function updateChart(chart, labels, data) {
-                chart.data.labels = labels;
-                chart.data.datasets[0].data = data;
-                chart.update('none');
-            }
-
-            updateChart(chartCPU, labels, d.cpu);
-            updateChart(chartMem, labels, d.memory);
-            updateChart(chartTemp, labels, d.temp);
-            updateChart(chartLoad, labels, d.load1);
-        } catch(e) {
-            console.error('Failed to load system metrics:', e);
+    // --- Range helper: returns milliseconds for a range string ---
+    function parseRangeMs(range) {
+        switch (range) {
+            case '1h':  return 3600000;
+            case '6h':  return 21600000;
+            case '24h': return 86400000;
+            case '7d':  return 604800000;
+            case '30d': return 2592000000;
+            default:    return 3600000;
         }
     }
 
-    // Range bar clicks
-    document.getElementById('system-range-bar').addEventListener('click', function(e) {
-        const btn = e.target.closest('.filter-btn');
-        if (!btn) return;
-        this.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        systemRange = btn.dataset.range;
-        loadSystemMetrics();
-    });
+    // --- X-axis tick label format: short time for <=24h, date for longer ---
+    function tickFormatForRange(range) {
+        if (range === '7d' || range === '30d') return 'date';
+        return 'time';
+    }
 
-    // --- Container bar charts ---
-    let chartContainerCPU, chartContainerMem;
-    let containerNames = [];
-
-    function initContainerCharts() {
-        const barOpts = (xLabel) => ({
-            indexAxis: 'y',
+    // --- Chart options for line charts with LINEAR x-axis ---
+    function chartOpts(yLabel, beginAtZero) {
+        return {
             responsive: true,
             maintainAspectRatio: false,
             animation: {duration: 300},
@@ -288,30 +194,210 @@
                     titleColor: '#e6edf3',
                     bodyColor: '#8b949e',
                     borderColor: '#30363d',
-                    borderWidth: 1
+                    borderWidth: 1,
+                    callbacks: {
+                        title: function(items) {
+                            if (!items.length) return '';
+                            // parsed.x is the ms timestamp on a linear axis
+                            return formatTimestamp(items[0].parsed.x);
+                        }
+                    }
                 }
             },
             scales: {
                 x: {
+                    type: 'linear',
                     grid: {color: 'rgba(48,54,61,0.5)'},
-                    ticks: {color: '#8b949e'},
-                    beginAtZero: true,
-                    title: {display: true, text: xLabel, color: '#6e7681', font: {size: 11}}
+                    ticks: {
+                        color: '#8b949e',
+                        maxTicksLimit: 8,
+                        callback: function(v) {
+                            return formatTimeLabel(v);
+                        }
+                    }
                 },
                 y: {
-                    grid: {display: false},
-                    ticks: {color: '#8b949e', font: {size: 12}}
-                }
-            },
-            onClick: function(evt, elements) {
-                if (elements.length > 0) {
-                    const idx = elements[0].index;
-                    if (containerNames[idx]) {
-                        showContainerDetail(containerNames[idx]);
-                    }
+                    grid: {color: 'rgba(48,54,61,0.5)'},
+                    ticks: {color: '#8b949e'},
+                    beginAtZero: beginAtZero !== false,
+                    title: {display: !!yLabel, text: yLabel || '', color: '#6e7681', font: {size: 11}}
                 }
             }
-        });
+        };
+    }
+
+    var lineDataset = function(color) {
+        return {
+            borderColor: color.border,
+            backgroundColor: color.bg,
+            borderWidth: 2,
+            pointRadius: 0,
+            pointHitRadius: 10,
+            tension: 0.3,
+            fill: true,
+            spanGaps: true
+        };
+    };
+
+    // --- Timezone formatting ---
+    var budaTZ = 'Europe/Budapest';
+
+    // Current range for choosing date vs time format in tick labels
+    var currentTickFormat = 'time';
+
+    function formatTimestamp(ts) {
+        if (ts === null || ts === undefined || ts === '') return '';
+        if (typeof ts === 'string') ts = Number(ts);
+        if (isNaN(ts)) return '';
+        // ts should already be in ms (linear axis stores ms values)
+        var d = new Date(ts);
+        return d.toLocaleString('hu-HU', {timeZone: budaTZ, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'});
+    }
+
+    function formatTimeLabel(ts) {
+        if (ts === null || ts === undefined || ts === '') return '';
+        if (typeof ts === 'string') ts = Number(ts);
+        if (isNaN(ts)) return '';
+        var d = new Date(ts);
+        if (currentTickFormat === 'date') {
+            return d.toLocaleDateString('hu-HU', {timeZone: budaTZ, month: '2-digit', day: '2-digit'});
+        }
+        return d.toLocaleTimeString('hu-HU', {timeZone: budaTZ, hour: '2-digit', minute: '2-digit'});
+    }
+
+    // --- Shared: build {x, y} point array from timestamps + values ---
+    function buildXYData(timestamps, values) {
+        var points = [];
+        for (var i = 0; i < timestamps.length; i++) {
+            points.push({x: timestamps[i], y: values[i]});
+        }
+        return points;
+    }
+
+    // --- Shared: set x-axis min/max on a chart based on range ---
+    function setChartXBounds(chart, range) {
+        var now = Date.now();
+        var rangeMs = parseRangeMs(range);
+        chart.options.scales.x.min = now - rangeMs;
+        chart.options.scales.x.max = now;
+    }
+
+    // --- Shared: update a line chart with {x, y} data ---
+    function updateLineChart(chart, timestamps, values) {
+        chart.data.datasets[0].data = buildXYData(timestamps, values);
+        chart.update('none');
+    }
+
+    // =============================================
+    //  SYSTEM CHARTS
+    // =============================================
+    var systemRange = '1h';
+    var chartCPU, chartMem, chartTemp, chartLoad;
+
+    function initSystemCharts() {
+        var mkChart = function(id, color, yLabel, beginAtZero) {
+            return new Chart(document.getElementById(id), {
+                type: 'line',
+                data: {datasets: [{data: [], ...lineDataset(color)}]},
+                options: chartOpts(yLabel, beginAtZero)
+            });
+        };
+        chartCPU  = mkChart('chart-cpu',    colors.cpu,    '%',  true);
+        chartMem  = mkChart('chart-memory', colors.memory, 'GB', true);
+        chartTemp = mkChart('chart-temp',   colors.temp,   '°C', false);
+        chartLoad = mkChart('chart-load',   colors.load,   '',   true);
+    }
+
+    async function loadSystemMetrics() {
+        try {
+            var resp = await fetch('/api/metrics/system?range=' + systemRange + '&resolution=200');
+            var json = await resp.json();
+            if (!json.ok || !json.data) return;
+            var d = json.data;
+
+            if (!d.labels || d.labels.length === 0) {
+                document.getElementById('system-charts').style.display = 'none';
+                document.getElementById('system-charts-empty').style.display = 'block';
+                return;
+            }
+            document.getElementById('system-charts').style.display = '';
+            document.getElementById('system-charts-empty').style.display = 'none';
+
+            // Convert Unix seconds to milliseconds
+            var timestamps = d.labels.map(function(ts) { return ts * 1000; });
+
+            // Update tick label format based on range
+            currentTickFormat = tickFormatForRange(systemRange);
+
+            // Set x-axis bounds to the full requested range
+            var allCharts = [chartCPU, chartMem, chartTemp, chartLoad];
+            allCharts.forEach(function(c) { setChartXBounds(c, systemRange); });
+
+            // Update each chart with {x, y} data
+            updateLineChart(chartCPU,  timestamps, d.cpu);
+            updateLineChart(chartMem,  timestamps, d.memory);
+            updateLineChart(chartTemp, timestamps, d.temp);
+            updateLineChart(chartLoad, timestamps, d.load1);
+        } catch(e) {
+            console.error('Failed to load system metrics:', e);
+        }
+    }
+
+    // Range bar clicks
+    document.getElementById('system-range-bar').addEventListener('click', function(e) {
+        var btn = e.target.closest('.filter-btn');
+        if (!btn) return;
+        this.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); });
+        btn.classList.add('active');
+        systemRange = btn.dataset.range;
+        loadSystemMetrics();
+    });
+
+    // =============================================
+    //  CONTAINER BAR CHARTS
+    // =============================================
+    var chartContainerCPU, chartContainerMem;
+    var containerNames = [];
+
+    function initContainerCharts() {
+        var barOpts = function(xLabel) {
+            return {
+                indexAxis: 'y',
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: {duration: 300},
+                plugins: {
+                    legend: {display: false},
+                    tooltip: {
+                        backgroundColor: '#1c2128',
+                        titleColor: '#e6edf3',
+                        bodyColor: '#8b949e',
+                        borderColor: '#30363d',
+                        borderWidth: 1
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {color: 'rgba(48,54,61,0.5)'},
+                        ticks: {color: '#8b949e'},
+                        beginAtZero: true,
+                        title: {display: true, text: xLabel, color: '#6e7681', font: {size: 11}}
+                    },
+                    y: {
+                        grid: {display: false},
+                        ticks: {color: '#8b949e', font: {size: 12}}
+                    }
+                },
+                onClick: function(evt, elements) {
+                    if (elements.length > 0) {
+                        var idx = elements[0].index;
+                        if (containerNames[idx]) {
+                            showContainerDetail(containerNames[idx]);
+                        }
+                    }
+                }
+            };
+        };
 
         chartContainerCPU = new Chart(document.getElementById('chart-container-cpu'), {
             type: 'bar',
@@ -327,11 +413,11 @@
 
     async function loadContainerSummary() {
         try {
-            const resp = await fetch('/api/metrics/containers/summary');
-            const json = await resp.json();
+            var resp = await fetch('/api/metrics/containers/summary');
+            var json = await resp.json();
             if (!json.ok || !json.data) return;
 
-            const data = json.data;
+            var data = json.data;
             if (!data.length) {
                 document.getElementById('container-charts').style.display = 'none';
                 document.getElementById('container-charts-empty').style.display = 'block';
@@ -340,13 +426,13 @@
             document.getElementById('container-charts').style.display = '';
             document.getElementById('container-charts-empty').style.display = 'none';
 
-            containerNames = data.map(c => c.name);
-            const cpuData = data.map(c => Math.round(c.cpu_percent * 100) / 100);
-            const memData = data.map(c => Math.round(c.mem_usage_mb));
+            containerNames = data.map(function(c) { return c.name; });
+            var cpuData = data.map(function(c) { return Math.round(c.cpu_percent * 100) / 100; });
+            var memData = data.map(function(c) { return Math.round(c.mem_usage_mb); });
 
             // Adjust bar chart height based on container count
-            const h = Math.max(200, data.length * 35 + 60);
-            document.querySelectorAll('.chart-wrap-bar').forEach(el => el.style.height = h + 'px');
+            var h = Math.max(200, data.length * 35 + 60);
+            document.querySelectorAll('.chart-wrap-bar').forEach(function(el) { el.style.height = h + 'px'; });
 
             chartContainerCPU.data.labels = containerNames;
             chartContainerCPU.data.datasets[0].data = cpuData;
@@ -360,16 +446,18 @@
         }
     }
 
-    // --- Container detail ---
-    let detailChartCPU, detailChartMem;
-    let detailContainer = '';
-    let detailRange = '1h';
+    // =============================================
+    //  CONTAINER DETAIL (per-container history)
+    // =============================================
+    var detailChartCPU, detailChartMem;
+    var detailContainer = '';
+    var detailRange = '1h';
 
     function initDetailCharts() {
-        const mkChart = (id, color, yLabel) => {
+        var mkChart = function(id, color, yLabel) {
             return new Chart(document.getElementById(id), {
                 type: 'line',
-                data: {labels: [], datasets: [{data: [], ...lineDataset(color)}]},
+                data: {datasets: [{data: [], ...lineDataset(color)}]},
                 options: chartOpts(yLabel, true)
             });
         };
@@ -393,46 +481,50 @@
     async function loadContainerDetail() {
         if (!detailContainer) return;
         try {
-            const resp = await fetch('/api/metrics/containers/' + encodeURIComponent(detailContainer) + '?range=' + detailRange + '&resolution=150');
-            const json = await resp.json();
+            var resp = await fetch('/api/metrics/containers/' + encodeURIComponent(detailContainer) + '?range=' + detailRange + '&resolution=150');
+            var json = await resp.json();
             if (!json.ok || !json.data) return;
-            const d = json.data;
-            const labels = (d.labels || []).map(ts => ts * 1000);
+            var d = json.data;
 
-            detailChartCPU.data.labels = labels;
-            detailChartCPU.data.datasets[0].data = d.cpu || [];
-            detailChartCPU.update('none');
+            // Convert Unix seconds to milliseconds
+            var timestamps = (d.labels || []).map(function(ts) { return ts * 1000; });
 
-            detailChartMem.data.labels = labels;
-            detailChartMem.data.datasets[0].data = d.memory || [];
-            detailChartMem.update('none');
+            // Set x-axis bounds
+            setChartXBounds(detailChartCPU, detailRange);
+            setChartXBounds(detailChartMem, detailRange);
+
+            // Update with {x, y} data
+            updateLineChart(detailChartCPU, timestamps, d.cpu || []);
+            updateLineChart(detailChartMem, timestamps, d.memory || []);
         } catch(e) {
             console.error('Failed to load container detail:', e);
         }
     }
 
     document.getElementById('container-range-bar').addEventListener('click', function(e) {
-        const btn = e.target.closest('.filter-btn');
+        var btn = e.target.closest('.filter-btn');
         if (!btn) return;
-        this.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        this.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); });
         btn.classList.add('active');
         detailRange = btn.dataset.range;
         loadContainerDetail();
     });
 
-    // --- Static system info ---
+    // =============================================
+    //  STATIC SYSTEM INFO
+    // =============================================
     async function loadSysInfo() {
         try {
-            const resp = await fetch('/api/metrics/sysinfo');
-            const json = await resp.json();
+            var resp = await fetch('/api/metrics/sysinfo');
+            var json = await resp.json();
             if (!json.ok || !json.data) return;
-            const d = json.data;
+            var d = json.data;
 
             document.getElementById('sysinfo-hostname').textContent = d.hostname || '–';
             document.getElementById('sysinfo-os').textContent = d.os || '–';
             document.getElementById('sysinfo-kernel').textContent = d.kernel || '–';
 
-            let cpuText = d.cpu_model || '–';
+            var cpuText = d.cpu_model || '–';
             if (d.cpu_cores > 0) cpuText += ' (' + d.cpu_cores + ' mag)';
             document.getElementById('sysinfo-cpu').textContent = cpuText;
 
@@ -440,7 +532,7 @@
                 document.getElementById('sysinfo-uptime').textContent = formatUptime(d.uptime_seconds);
             }
             if (d.boot_time) {
-                const bt = new Date(d.boot_time);
+                var bt = new Date(d.boot_time);
                 document.getElementById('sysinfo-boot').textContent = bt.toLocaleString('hu-HU', {timeZone: budaTZ, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'});
             }
         } catch(e) {
@@ -449,15 +541,17 @@
     }
 
     function formatUptime(seconds) {
-        const days = Math.floor(seconds / 86400);
-        const hours = Math.floor((seconds % 86400) / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
+        var days = Math.floor(seconds / 86400);
+        var hours = Math.floor((seconds % 86400) / 3600);
+        var minutes = Math.floor((seconds % 3600) / 60);
         if (days > 0) return days + ' nap, ' + hours + ' óra';
         if (hours > 0) return hours + ' óra, ' + minutes + ' perc';
         return minutes + ' perc';
     }
 
-    // --- Init ---
+    // =============================================
+    //  INIT
+    // =============================================
     initSystemCharts();
     initContainerCharts();
     initDetailCharts();
@@ -471,8 +565,9 @@
         loadContainerSummary();
         if (detailContainer) loadContainerDetail();
     }, 60000);
+
 })();
 </script>
 
 {{template "layout_end" .}}
-{{end}}
+{{end}}
\ No newline at end of file