shokupan 0.10.5 → 0.12.0

package/dist/plugins/application/dashboard/static/charts.js

@@ -252,77 +252,142 @@ const errorRateChart = new Chart(errorRateCtx, {
     options: commonOptions
 });
 
-async function updateCharts() {
-    const period = document.getElementById('time-range-selector').value || '1m';
-    try {
-        const res = await fetch(`${url}metrics/history?interval=${period}`, { headers });
-        const data = await res.json();
-        const metrics = data.metrics || [];
+// Helper to update a chart with a new data point
+function pushData(chart, label, datasetValues) {
+    if (!chart.data.labels) chart.data.labels = [];
+    chart.data.labels.push(label);
+    if (chart.data.labels.length > 60) chart.data.labels.shift();
 
-        const labels = metrics.map(m => new Date(m.timestamp).toLocaleTimeString());
-
-        // Latency
-        latencyChart.data.labels = labels;
-        latencyChart.data.datasets[0].data = metrics.map(m => m.responseTime.avg);
-        latencyChart.data.datasets[1].data = metrics.map(m => m.responseTime.p95);
-        latencyChart.data.datasets[2].data = metrics.map(m => m.responseTime.p99);
-        latencyChart.update();
-
-        // RPS
-        rpsChart.data.labels = labels;
-        rpsChart.data.datasets[0].data = metrics.map(m => m.requests.total);
-        rpsChart.data.datasets[1].data = metrics.map(m => m.requests.error);
-        rpsChart.update();
-
-        // CPU
-        cpuChart.data.labels = labels;
-        cpuChart.data.datasets[0].data = metrics.map(m => m.cpu);
-        cpuChart.update();
-
-        // Memory
-        memoryChart.data.labels = labels;
-        memoryChart.data.datasets[0].data = metrics.map(m => (m.memory.heapUsed / 1024 / 1024).toFixed(2));
-        memoryChart.data.datasets[1].data = metrics.map(m => (m.memory.used / 1024 / 1024).toFixed(2));
-        memoryChart.update();
-
-        // Heap
-        heapChart.data.labels = labels;
-        heapChart.data.datasets[0].data = metrics.map(m => (m.memory.heapUsed / 1024 / 1024).toFixed(2));
-        heapChart.data.datasets[1].data = metrics.map(m => (m.memory.heapTotal / 1024 / 1024).toFixed(2));
-        heapChart.update();
-
-        // Event Loop Latency
-        eventLoopChart.data.labels = labels;
-        eventLoopChart.data.datasets[0].data = metrics.map(m => m.eventLoopLatency.mean);
-        eventLoopChart.data.datasets[1].data = metrics.map(m => m.eventLoopLatency.p95);
-        eventLoopChart.data.datasets[2].data = metrics.map(m => m.eventLoopLatency.p99);
-        eventLoopChart.update();
-
-        // Error Rate
-        errorRateChart.data.labels = labels;
-        errorRateChart.data.datasets[0].data = metrics.map(m => {
+    datasetValues.forEach((val, idx) => {
+        if (!chart.data.datasets[idx]) return;
+        chart.data.datasets[idx].data.push(val);
+        if (chart.data.datasets[idx].data.length > 60) chart.data.datasets[idx].data.shift();
+    });
+    chart.update('none'); // 'none' for smooth animation
+}
+
+// Initialize charts with history
+window.initCharts = function (history) {
+    if (!history || !Array.isArray(history)) return;
+
+    // Sort by timestamp just in case
+    history.sort((a, b) => a.timestamp - b.timestamp);
+
+    const labels = history.map(m => new Date(m.timestamp).toLocaleTimeString());
+
+    // Helper to batch set data
+    const setChartData = (chart, dataExtractors) => {
+        chart.data.labels = [...labels];
+        dataExtractors.forEach((extractor, idx) => {
+            if (chart.data.datasets[idx]) {
+                chart.data.datasets[idx].data = history.map(extractor);
+            }
+        });
+        chart.update();
+    };
+
+    setChartData(latencyChart, [
+        m => m.responseTime.avg,
+        m => m.responseTime.p95,
+        m => m.responseTime.p99
+    ]);
+
+    setChartData(rpsChart, [
+        m => m.requests.total,
+        m => m.requests.error
+    ]);
+
+    setChartData(cpuChart, [
+        m => m.cpu
+    ]);
+
+    setChartData(memoryChart, [
+        m => (m.memory.heapUsed / 1024 / 1024).toFixed(2),
+        m => (m.memory.used / 1024 / 1024).toFixed(2)
+    ]);
+
+    setChartData(heapChart, [
+        m => (m.memory.heapUsed / 1024 / 1024).toFixed(2),
+        m => (m.memory.heapTotal / 1024 / 1024).toFixed(2)
+    ]);
+
+    setChartData(eventLoopChart, [
+        m => m.eventLoopLatency.mean,
+        m => m.eventLoopLatency.p95,
+        m => m.eventLoopLatency.p99
+    ]);
+
+    setChartData(errorRateChart, [
+        m => {
             const total = m.requests.success + m.requests.error;
             return total > 0 ? ((m.requests.success / total) * 100).toFixed(2) : 100;
-        });
-        errorRateChart.data.datasets[1].data = metrics.map(m => {
+        },
+        m => {
             const total = m.requests.success + m.requests.error;
             return total > 0 ? ((m.requests.error / total) * 100).toFixed(2) : 0;
-        });
-        errorRateChart.update();
+        }
+    ]);
+};
+
+// Push a single metric update
+window.pushChartData = function (metric) {
+    if (!metric) return;
+    const label = new Date(metric.timestamp).toLocaleTimeString();
+
+    pushData(latencyChart, label, [
+        metric.responseTime.avg,
+        metric.responseTime.p95,
+        metric.responseTime.p99
+    ]);
+
+    pushData(rpsChart, label, [
+        metric.requests.total,
+        metric.requests.error
+    ]);
 
+    pushData(cpuChart, label, [
+        metric.cpu
+    ]);
+
+    pushData(memoryChart, label, [
+        (metric.memory.heapUsed / 1024 / 1024).toFixed(2),
+        (metric.memory.used / 1024 / 1024).toFixed(2)
+    ]);
+
+    pushData(heapChart, label, [
+        (metric.memory.heapUsed / 1024 / 1024).toFixed(2),
+        (metric.memory.heapTotal / 1024 / 1024).toFixed(2)
+    ]);
+
+    pushData(eventLoopChart, label, [
+        metric.eventLoopLatency.mean,
+        metric.eventLoopLatency.p95,
+        metric.eventLoopLatency.p99
+    ]);
+
+    const total = metric.requests.success + metric.requests.error;
+    pushData(errorRateChart, label, [
+        total > 0 ? ((metric.requests.success / total) * 100).toFixed(2) : 100,
+        total > 0 ? ((metric.requests.error / total) * 100).toFixed(2) : 0
+    ]);
+};
+
+
+// Old updateCharts exposed for manual refresh if needed (e.g. changing time range)
+window.refreshCharts = async function () {
+    const period = document.getElementById('time-range-selector').value || '1m';
+    try {
+        const res = await fetch(`${url}metrics/history?interval=${period}`, { headers });
+        const data = await res.json();
+        const metrics = data.metrics || [];
+        window.initCharts(metrics);
     } catch (e) {
         console.error("Failed to fetch metrics", e);
     }
-}
+};
 
-// Initial load
+// Initial load listener - removed polling
 document.addEventListener("DOMContentLoaded", () => {
-    updateCharts();
-    // Poll every 10s for short intervals
-    setInterval(() => {
-        const period = document.getElementById('time-range-selector').value;
-        if (['1m', '5m', '30m', '1h', '2h'].includes(period)) {
-            updateCharts();
-        }
-    }, 10000);
+    // window.refreshCharts(); 
+    // Wait for WS init instead
 });

package/dist/plugins/application/dashboard/static/client.js

@@ -0,0 +1,160 @@
+
+(function () {
+    let ws;
+    let reconnectTimer;
+    let initialConnection = true;
+
+    function formatDuration(deltaMs) {
+        if (deltaMs > (7 * 24 * 60 * 60 * 1000)) return (deltaMs / (7 * 24 * 60 * 60 * 1000)).toFixed(0) + " weeks";
+        if (deltaMs > (24 * 60 * 60 * 1000)) return (deltaMs / (24 * 60 * 60 * 1000)).toFixed(0) + " days";
+        if (deltaMs > (60 * 60 * 1000)) return (deltaMs / (60 * 60 * 1000)).toFixed(0) + " hours";
+        if (deltaMs > 60 * 1000) return (deltaMs / (60 * 1000)).toFixed(0) + " minutes";
+        if (deltaMs > 1000) return (deltaMs / 1000).toFixed(2) + " seconds";
+        return deltaMs.toFixed(0) + " ms";
+    }
+
+    function updateDOM(data) {
+        if (!data) return;
+        const metrics = data.metrics;
+        const uptime = data.uptime;
+
+        if (metrics) {
+            window.metrics = metrics; // Update global metrics for any other scripts using it
+
+            setSafeText('total-requests', metrics.totalRequests);
+            setSafeText('active-requests', metrics.activeRequests);
+            setSafeText('successful-requests', metrics.successfulRequests);
+            setSafeText('failed-requests', metrics.failedRequests);
+
+            if (metrics.averageTotalTime_ms !== undefined) {
+                setSafeText('avg-latency', metrics.averageTotalTime_ms.toFixed(2));
+            }
+
+            // Recalc rates
+            const finishedRequests = metrics.totalRequests - metrics.activeRequests;
+            const successRate = finishedRequests ? Math.round((metrics.successfulRequests / finishedRequests) * 100) : 100;
+            const failRate = finishedRequests ? Math.round((metrics.failedRequests / finishedRequests) * 100) : 0;
+
+            setSafeText('success-rate', successRate + '%');
+            setSafeText('fail-rate', failRate + '%');
+        }
+
+        if (uptime) {
+            setSafeText('uptime', uptime);
+        }
+
+        // Charts are now updated via specific 'metric-update' events or 'init' history
+    }
+
+    function setSafeText(id, text) {
+        const el = document.getElementById(id);
+        if (el) el.innerText = text;
+    }
+
+    function connect() {
+        // Determine WS URL
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        // Handle relative path for dashboard mount
+        let path = window.location.pathname;
+        if (!path.endsWith('/')) path += '/';
+        // remove "dashboard/" or "dashboard" from end if present to get root? 
+        // No, the plugin mounted the router at /dashboard usually. 
+        // But the WS route is on the SAME router.
+        // So if dashboard is at /dashboard, ws is at /dashboard/ws.
+
+        // Actually, window.location.pathname includes the mount path. 
+        // If we are at /dashboard/, we want /dashboard/ws.
+        // If we are at /admin/dashboard/, we want /admin/dashboard/ws.
+        const wsUrl = protocol + '//' + window.location.host + path + 'ws';
+
+        console.log("Connecting to WebSocket:", wsUrl);
+        ws = new WebSocket(wsUrl);
+
+        ws.onopen = () => {
+            console.log("Connected to Dashboard WebSocket");
+            const statusEl = document.getElementById('ws-status');
+            if (statusEl) {
+                statusEl.style.background = '#10b981'; // green
+                statusEl.title = 'WebSocket: Connected';
+            }
+
+            if (reconnectTimer) {
+                clearTimeout(reconnectTimer);
+                reconnectTimer = null;
+            }
+            // Request initial data? The server sends it on open.
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+                if (msg.type === 'init') {
+                    updateDOM(msg);
+                    if (msg.history && window.initCharts) {
+                        window.initCharts(msg.history);
+                    }
+                } else if (msg.type === 'metric-update') {
+                    // Push single metric update to charts
+                    if (window.pushChartData && msg.metric) {
+                        window.pushChartData(msg.metric);
+                    }
+                } else if (msg.type === 'requests-update') {
+                    console.log('[Dashboard Client] Received requests update', msg.requests);
+                    if (window.updateRequestsList && msg.requests) {
+                        window.updateRequestsList(msg.requests);
+                    }
+                } else if (msg.type === 'metrics') {
+                    // Standard live update (text metrics)
+                    updateDOM(msg);
+                }
+            } catch (e) {
+                console.error("Failed to parse WebSocket message", e);
+            }
+        };
+
+        ws.onclose = () => {
+            console.log("Dashboard WebSocket disconnected");
+            const statusEl = document.getElementById('ws-status');
+            if (statusEl) {
+                statusEl.style.background = '#ef4444'; // red
+                statusEl.title = 'WebSocket: Disconnected';
+            }
+            ws = null;
+            scheduleReconnect();
+        };
+
+        ws.onerror = (err) => {
+            console.error("WebSocket error:", err);
+            ws = null;
+            // onclose will be called
+        };
+    }
+
+    function scheduleReconnect() {
+        if (reconnectTimer) return;
+        console.log("Scheduling reconnect in 2s...");
+        reconnectTimer = setTimeout(() => {
+            reconnectTimer = null;
+            connect();
+        }, 2000);
+    }
+
+    // Expose printDuration for other scripts if needed (poll.js did this)
+    window.printDuration = formatDuration;
+
+    // Start connection
+    connect();
+
+    // Listen for time range changes
+    const timeSelector = document.getElementById('time-range-selector');
+    if (timeSelector) {
+        timeSelector.addEventListener('change', (e) => {
+            const interval = e.target.value;
+            console.log("Time range changed to:", interval);
+            if (ws && ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'get-history', interval }));
+            }
+        });
+    }
+
+})();