zibri-cli 2.2.0 → 2.2.1

package/templates/pages/metrics.hbs

@@ -1,443 +0,0 @@
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
-
-<div style="height: 100%; width: 100%; color: whitesmoke; padding-left: 40px; padding-right: 40px;">
-    <h1 style="margin-top: 20px; margin-bottom: 20px;">{{name}} Metrics</h1>
-    <div style="display: grid; 	grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; grid-auto-rows: 1fr;">
-        <div style="grid-column: span 2; display: flex; flex-direction: column; gap: 20px;">
-            <div style="display: flex; gap: 20px;">
-                <div class="metrics-container" style="flex: 1; display: flex; justify-content: center; align-items: center;">
-                    <a href="/"><img src="/assets/logo.jpg" width="100" height="100"></a>
-                    <a href="/" style="margin-left: auto; margin-right: auto;"><h2>{{name}}</h2></a>
-                </div>
-                <div class="metrics-container" style="flex: 1;">
-                    <h2>Status</h2>
-                    
-                    <div style="display: flex; justify-content: center; align-items: center; gap: 5px;">
-                        <input id="automaticReload"
-                            type="checkbox"
-                            checked="true"
-                            onchange="updateAutomaticReload(event)"
-                        >
-                        <label style="cursor: pointer;" for="automaticReload">Automatic reload</label>
-                    </div>
-
-                    <div style="width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px;">
-                        <div style="display: flex; justify-content: space-between; gap: 40px;">
-                            <div>Version:</div>
-                            <div>{{version}}</div>
-                        </div>
-                        <div style="display: flex; justify-content: space-between; gap: 40px;">
-                            <div>Uptime:</div>
-                            <div id="uptimeInfo">...</div>
-                        </div>
-                        <div style="display: flex; justify-content: space-between; gap: 40px;">
-                            <div>Since:</div>
-                            <div id="uptimeInfoSince">...</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="metrics-container" style="flex: 1;">
-                <h2 style="margin-bottom: 10px;">Request duration</h2>
-                <canvas id="requestDurationChart"></canvas>
-            </div>
-        </div>
-        
-        <div class="metrics-container" style="grid-column: span 3;">
-            <h2>Requests per second</h2>
-            <canvas id="rpsChart"></canvas>
-        </div>
-    </div>
-    <div style="display: grid; 	grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;">
-        <div class="metrics-container" style="margin-bottom: 40px;">
-            <h2>Resource Usage</h2>
-            <canvas id="resourceChart"></canvas>
-        </div>
-        <div class="metrics-container" style="margin-bottom: 40px;">
-            <h2>Network</h2>
-            <canvas id="networkChart"></canvas>
-        </div>
-    </div>
-</div>
-
-<script>
-    const primary = '#0e456f';
-    const secondary = '#00b4d8';
-    Chart.defaults.color = 'whitesmoke';
-    Chart.defaults.borderColor = 'whitesmoke';
-    Chart.defaults.backgroundColor = secondary;
-    Chart.defaults.scale.grid.color = 'rgba(200, 200, 200, 0.3)';
-
-    let automaticReload = true; 
-    let snaps = [];
-    let rpsChart;
-    let requestDurationChart;
-    let resourceChart;
-    let networkChart;
-
-    window.addEventListener('load', () => {
-        loadSnapshots();
-        setInterval(loadSnapshots, 1000);
-    });
-
-    async function loadSnapshots() {
-        if (!automaticReload) {
-            return;
-        }
-        try {
-            const resp = await fetch('/metrics');
-            snaps = await resp.json();
-            updateData();
-        } 
-        catch (err) {
-            console.error('failed to load metrics', err);
-        }
-    }
-
-    function updateData() {
-        renderRequestDurationChart();
-        renderRequestsPerSecondChart();
-        renderMemoryChart();
-        renderNetworkChart();
-        renderUptime();
-    }
-
-    function updateAutomaticReload(event) {
-        automaticReload = !automaticReload;
-    }
-
-    function renderUptime() {
-        const latest = snaps[snaps.length - 1];
-        if (!latest) return;
-
-        const startTimeMetric = latest.metrics.find(m => m.name === 'process_start_time_seconds');
-        if (!startTimeMetric) return;
-
-        const start = startTimeMetric.value * 1000;
-        const diffMs = Date.now() - start;
-        const diff = {
-            days: Math.floor(diffMs / 86400000),
-            hours: Math.floor((diffMs % 86400000) / 3600000),
-            minutes: Math.floor((diffMs % 3600000) / 60000),
-            seconds: Math.floor((diffMs % 60000) / 1000)
-        };
-
-        const text = `${diff.days}d ${diff.hours}h ${diff.minutes}m ${diff.seconds}s`;
-        const sinceText = `${new Date(start).toLocaleDateString('de', { year: 'numeric', day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}`;
-        document.getElementById('uptimeInfo').textContent = text;
-        document.getElementById('uptimeInfoSince').textContent = sinceText;
-    }
-
-    function renderRequestsPerSecondChart() {
-        // 1) Build per‐snapshot RPS deltas by status class
-        const intervalSec = 5;
-        const seriesSuccess = [];
-        const seriesClientError = [];
-        const seriesServerError = [];
-
-        snaps.forEach((snap, i, all) => {
-            const t = new Date(snap.timestamp);
-            if (i === 0) {
-                seriesSuccess.push({ x: t, y: 0 });
-                seriesClientError.push({ x: t, y: 0 });
-                seriesServerError.push({ x: t, y: 0 });
-                return;
-            }
-            const prev = all[i - 1].metrics;
-            const curr = snap.metrics;
-            // sum counts by class
-            const sumFor = (codeRx) => {
-                const sum = (metrics) =>
-                    metrics
-                        .filter(m => {
-                            if (m.name !== 'http_requests_total') {
-                                return false;
-                            }
-                            switch (codeRx) {
-                                case 'success': {
-                                    return !m.labels.status_code.startsWith('5') && !m.labels.status_code.startsWith('4')
-                                }
-                                case 'client': {
-                                    return m.labels.status_code.startsWith('4');
-                                }
-                                case 'server': {
-                                    return m.labels.status_code.startsWith('5');
-                                }
-                            }
-                        })
-                        .reduce((acc, m) => acc + m.value, 0);
-                return (sum(curr) - sum(prev)) / intervalSec;
-            };
-            seriesSuccess.push({ x: t, y: sumFor('success') });
-            seriesClientError.push({ x: t, y: sumFor('client') });
-            seriesServerError.push({ x: t, y: sumFor('server') });
-        });
-
-        // build event‑loop lag series (in ms)
-        const lagSeries = snaps.map(snap => {
-            const m = snap.metrics.find(m => m.name === 'nodejs_eventloop_lag_seconds');
-            return {
-                x: new Date(snap.timestamp),
-                y: m ? m.value * 1000 : 0
-            };
-        });
-
-        const datasets = [
-            {
-                label: 'Event Loop Lag',
-                data: lagSeries,
-                fill: false,
-                yAxisID: 'y1',
-                backgroundColor: 'purple',
-                borderColor: 'purple'
-            },
-            {
-                label: 'Server Error',
-                data: seriesServerError,
-                fill: true,
-                backgroundColor: 'red',
-                borderColor: 'red'
-            },
-            {
-                label: 'Client Error',
-                data: seriesClientError,
-                fill: true,
-                borderColor: secondary
-            },
-            {
-                label: 'Success',
-                data: seriesSuccess,
-                fill: true,
-                backgroundColor: 'green',
-                borderColor: 'green'
-            }
-        ];
-
-        if (rpsChart) {
-            rpsChart.data.datasets[0].data = datasets[0].data;
-            rpsChart.data.datasets[1].data = datasets[1].data;
-            rpsChart.data.datasets[2].data = datasets[2].data;
-            rpsChart.data.datasets[3].data = datasets[3].data;
-            rpsChart.update();
-            return;
-        }
-
-        // render RPS chart
-        rpsChart = new Chart(document.getElementById('rpsChart'), {
-            type: 'line',
-            data: { datasets },
-            options: {
-                scales: { 
-                    x: {
-                        type: 'time', 
-                        time: { 
-                            unit: 'second', 
-                            displayFormats: {
-                                second: 'HH:mm:ss'
-                            }
-                        },
-                        grid: { display: false }
-                    },
-                    y: {
-                        stacked: true,
-                        beginAtZero: true,
-                        title: { display: true, text: 'Requests/sec' },
-                        grid: { display: true }
-                    },
-                    y1: {
-                        position: 'right',
-                        title: { display: true, text: 'Lag (ms)' },
-                        ticks: { callback: v => `${v} ms` }
-                    }
-                },
-                ticks: {
-                    stepSize: 5,
-                    source: 'auto'
-                }
-            }
-        });
-    }
-
-    function renderRequestDurationChart() {
-        // Build histogram from the *latest* snapshot only
-        const latest = snaps[snaps.length - 1]?.metrics ?? [];
-        const sumsByLe = latest
-            .filter(m => m.name === 'http_request_duration_ms' && m.labels.le !== undefined)
-            .reduce((map,m) => {
-                const le = m.labels.le;
-                map[le] = (map[le] || 0) + m.value;
-                return map;
-            }, {});
-        const sorted = Object.entries(sumsByLe)
-            .map(([le,v]) => ({ le, v }))
-            .sort((a,b) => {
-                const na = a.le==='+Inf'? Infinity: +a.le;
-                const nb = b.le==='+Inf'? Infinity: +b.le;
-                return na-nb;
-            });
-        const perBucket = sorted.map((cur, i) => {
-            const prev = i > 0 ? sorted[i - 1].v : 0;
-            return { le: cur.le, v: cur.v - prev };
-        });
-        const hist = perBucket.reduce(
-            (acc,m) => {
-                acc.labels.push(`${m.le} ms`);
-                acc.values.push(m.v);
-                return acc;
-            },
-            { labels:[], values:[] }
-        );
-
-        if (requestDurationChart) {
-            requestDurationChart.data.labels = hist.labels;
-            requestDurationChart.data.datasets[0].data = hist.values;
-            requestDurationChart.update();
-            return;
-        }
-
-        // render latency histogram
-        requestDurationChart = new Chart(document.getElementById('requestDurationChart'), {
-            type: 'bar',
-            data: { labels: hist.labels, datasets: [{ label: 'Count', data: hist.values }] }
-        });
-    }
-
-    function renderMemoryChart() {
-        const data = snaps.map(snap => {
-            const mem = snap.metrics.find(m => m.name === 'process_resident_memory_bytes');
-            return {
-                x: new Date(snap.timestamp),
-                y: mem ? mem.value / 1024 / 1024 : 0 // MB
-            };
-        });
-
-        const userSeries = snaps.map(s => s.metrics.find(m => m.name==='process_cpu_user_seconds_total')?.value  || 0);
-        const systemSeries = snaps.map(s => s.metrics.find(m => m.name==='process_cpu_system_seconds_total')?.value|| 0);
-        const times = snaps.map(s => new Date(s.timestamp).getTime()/1000);  // seconds
-        const cpuSeries = times.map((t,i) => {
-            if (i === 0) {
-                return { t, pct: 0 };
-            }
-            const dt = t - times[i-1]; // interval in seconds (should be ~5)
-            const du = userSeries[i] - userSeries[i-1];
-            const ds = systemSeries[i] - systemSeries[i-1];
-            const usedSec = du + ds; // total CPU seconds used in that interval
-            const cores = navigator.hardwareConcurrency || 1;
-            const pct = (usedSec / dt / cores) * 100; // CPU% across all cores
-            return { x: new Date(t*1000), y: pct };
-        });
-
-        if (resourceChart) {
-            resourceChart.data.datasets[0].data = data;
-            resourceChart.data.datasets[1].data = cpuSeries;
-            resourceChart.update();
-            return;
-        }
-
-        resourceChart = new Chart(document.getElementById('resourceChart'), {
-            type: 'line',
-            data: {
-                datasets: [
-                    {
-                        label: 'RAM (MB)',
-                        data,
-                        yAxisID: 'y',
-                        borderColor: secondary,
-                    },
-                    {
-                        label: 'CPU (%)',
-                        data: cpuSeries,
-                        yAxisID: 'yCPU',
-                        borderColor: primary,
-                        backgroundColor: primary
-                    }
-                ]
-            },
-            options: {
-                scales: {
-                    x: {
-                        type: 'time', 
-                        time: { 
-                            unit: 'second', 
-                            displayFormats: {
-                                second: 'HH:mm:ss'
-                            }
-                        },
-                        grid: {display: false }
-                    },
-                    y: {
-                        ticks: {
-                            callback: v => `${v} MB`
-                        },
-                        beginAtZero: true,
-                    },
-                    yCPU: {
-                        position: 'right',
-                        grid: { drawOnChartArea: false }, // don't duplicate grid lines
-                        ticks: {
-                            callback: v => `${v}%`
-                        }
-                    }
-                }
-            }
-        });
-    }
-
-    function renderNetworkChart() {
-        if (snaps.length < 2) {
-            return;
-        }
-        const intervalSec = 5;
-
-        // extract series of cumulative values
-        const rxSeries = snaps.map(s => s.metrics.find(m => m.name==='network_bytes_received_total')?.value||0);
-        const txSeries = snaps.map(s => s.metrics.find(m => m.name==='network_bytes_transmitted_total')?.value||0);
-        const times = snaps.map(s => new Date(s.timestamp));
-
-        // build bytes/sec points
-        const dataRx = times.map((t,i) => {
-            if (i===0) return { x:t, y:0 };
-            return { x:t, y:(rxSeries[i]-rxSeries[i-1])/intervalSec };
-        });
-        const dataTx = times.map((t,i) => {
-            if (i===0) return { x:t, y:0 };
-            return { x:t, y:(txSeries[i]-txSeries[i-1])/intervalSec };
-        });
-
-        const datasets = [
-            { label:'bytes received', data: dataRx, borderColor: secondary },
-            { label:'bytes sent', data: dataTx, backgroundColor: primary, borderColor: primary },
-        ];
-
-        if (networkChart) {
-            networkChart.data.datasets[0].data = datasets[0].data;
-            networkChart.data.datasets[1].data = datasets[1].data;
-            networkChart.update();
-            return;
-        }
-
-        networkChart = new Chart(document.getElementById('networkChart'), {
-            type: 'line',
-            data: { datasets },
-            options: {
-                scales: {
-                    x: {
-                        type: 'time',
-                        time: { unit:'second', displayFormats: { second:'HH:mm:ss' } },
-                        grid: { display: false }
-                    },
-                    y: {
-                        beginAtZero: true,
-                        ticks: {
-                            callback: v => `${v/1000} KB`
-                        },
-                    }
-                },
-                plugins:{ legend: { position:'top' } }
-            }
-        });
-    }
-
-</script>