Spaces:

NathMen12
/

Translator-API

Sleeping

App Files Files Community

NathMen12 commited on 15 days ago

Commit

e29f91d

verified ·

1 Parent(s): af47e71

Update public/admin.html

Browse files

Files changed (1) hide show

public/admin.html +32 -101

public/admin.html CHANGED Viewed

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Panel - Translator API</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; }
@@ -46,6 +45,7 @@
         .auth-box button { width: 100%; padding: 12px; background: #1a73e8; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
         .auth-box button:hover { background: #1557b0; }
         .error-msg { color: #dc3545; margin-bottom: 15px; display: none; }
     </style>
 </head>
 <body>
@@ -129,10 +129,7 @@
         let charts = {};
         let refreshInterval;
-        // Fenêtre d'affichage fixe : 120 secondes
-        const WINDOW_MS = 120_000;
-        const MAX_POINTS = 120; // 1 point/seconde
         window.onload = () => {
             const savedCode = sessionStorage.getItem('adminCode');
             if (savedCode) {
@@ -171,8 +168,6 @@
             sessionStorage.removeItem('adminCode');
             document.getElementById('authModal').classList.remove('hidden');
             if (refreshInterval) clearInterval(refreshInterval);
-            Object.values(charts).forEach(c => c.destroy());
-            charts = {};
         }
         function apiCall(endpoint) {
@@ -184,59 +179,41 @@
         function initDashboard() {
             createCharts();
             loadData();
-            // Rafraîchissement toutes les 1 seconde
-            refreshInterval = setInterval(loadData, 1000);
         }
         function createCharts() {
-            const now = Date.now();
-            // Labels fixes : 120 points, 1 par seconde, du plus ancien au plus récent
-            const initialLabels = Array.from({ length: MAX_POINTS }, (_, i) => now - WINDOW_MS + i * 1000);
-            const emptyData = Array(MAX_POINTS).fill(null);
             const commonOptions = {
                 responsive: true,
                 maintainAspectRatio: false,
-                animation: { duration: 0 }, // Pas d'animation = pas de "saut"
-                interaction: { mode: 'index', intersect: false },
                 scales: {
-                    x: {
-                        type: 'time',
-                        time: {
-                            unit: 'second',
-                            displayFormats: { second: 'HH:mm:ss' },
-                            min: now - WINDOW_MS,
-                            max: now
-                        },
-                        title: { display: true, text: 'Temps' },
-                        ticks: { maxTicksLimit: 10, source: 'auto' }
-                    },
-                    y: { beginAtZero: true }
                 },
-                plugins: { legend: { display: false } },
-                elements: { point: { radius: 0 } }
             };
             charts.cpu = new Chart(document.getElementById('cpuChart'), {
                 type: 'line',
-                data: { labels: initialLabels, datasets: [{ label: 'CPU %', data: emptyData, borderColor: '#1a73e8', backgroundColor: 'rgba(26,115,232,0.1)', fill: true, tension: 0.3 }] },
-                options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, min: 0, max: 100, title: { display: true, text: '% CPU' } } } }
             });
             charts.ram = new Chart(document.getElementById('ramChart'), {
                 type: 'line',
-                data: { labels: initialLabels, datasets: [{ label: 'RAM (MB)', data: emptyData, borderColor: '#34a853', backgroundColor: 'rgba(52,168,83,0.1)', fill: true, tension: 0.3 }] },
-                options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, title: { display: true, text: 'MB' } } } }
             });
             charts.requests = new Chart(document.getElementById('requestsChart'), {
-                type: 'bar', // Barres = plus lisible pour req/min
-                data: { labels: initialLabels, datasets: [{ label: 'Req/min', data: emptyData, backgroundColor: 'rgba(234,67,53,0.6)', borderColor: '#ea4335', borderWidth: 1 }] },
                 options: {
                     ...commonOptions,
                     scales: {
-                        x: { ...commonOptions.scales.x, title: { display: true, text: 'Temps' } },
-                        y: { ...commonOptions.scales.y, beginAtZero: true, title: { display: true, text: 'Requêtes/min' } }
                     }
                 }
             });
@@ -254,47 +231,17 @@
         }
         function updateMachinesTab(data) {
-            const now = Date.now();
-            const windowStart = now - WINDOW_MS;
-            // --- CPU : fusionner l'historique + point actuel, garder fenêtre 120s ---
-            const cpuMap = new Map();
-            data.cpuHistory.forEach(m => cpuMap.set(m.timestamp, m.cpu));
-            // Ajouter le point actuel (currentCpu) si dispo
-            if (data.currentCpu !== undefined) cpuMap.set(now, data.currentCpu);
-            const cpuLabels = [];
-            const cpuValues = [];
-            for (let t = windowStart; t <= now; t += 1000) {
-                cpuLabels.push(t);
-                cpuValues.push(cpuMap.has(t) ? cpuMap.get(t) : null); // null = gap dans la courbe
-            }
-            charts.cpu.data.labels = cpuLabels;
-            charts.cpu.data.datasets[0].data = cpuValues;
-            charts.cpu.options.scales.x.min = windowStart;
-            charts.cpu.options.scales.x.max = now;
             charts.cpu.update('none');
-            // --- RAM : même logique ---
-            const ramMap = new Map();
-            data.ramHistory.forEach(m => ramMap.set(m.timestamp, (m.used / 1024 / 1024).toFixed(1)));
-            if (data.currentRam !== undefined) ramMap.set(now, (data.currentRam / 1024 / 1024).toFixed(1));
-            const ramLabels = [];
-            const ramValues = [];
-            for (let t = windowStart; t <= now; t += 1000) {
-                ramLabels.push(t);
-                ramValues.push(ramMap.has(t) ? ramMap.get(t) : null);
-            }
-            charts.ram.data.labels = ramLabels;
-            charts.ram.data.datasets[0].data = ramValues;
-            charts.ram.options.scales.x.min = windowStart;
-            charts.ram.options.scales.x.max = now;
             charts.ram.update('none');
-            // --- Workers ---
             const workersList = document.getElementById('workersList');
             if (data.workers.length === 0) {
                 workersList.innerHTML = '<div class="loading">Aucun worker connecté</div>';
@@ -312,34 +259,18 @@
         }
         function updateRequestsTab(data) {
             const now = Date.now();
-            const windowStart = now - WINDOW_MS;
-            // Compter requêtes par seconde (fenêtre glissante 60s pour req/min)
-            const reqPerSec = new Map();
-            data.requests.forEach(r => {
-                if (r.timestamp >= windowStart) {
-                    const sec = Math.floor(r.timestamp / 1000) * 1000;
-                    reqPerSec.set(sec, (reqPerSec.get(sec) || 0) + 1);
-                }
-            });
-            // Calculer req/min = somme des 60 dernières secondes pour chaque seconde
-            const labels = [];
-            const values = [];
-            for (let t = windowStart; t <= now; t += 1000) {
-                labels.push(t);
-                let sum = 0;
-                for (let i = 0; i < 60; i++) {
-                    sum += reqPerSec.get(t - i * 1000) || 0;
-                }
-                values.push(sum);
             }
-            charts.requests.data.labels = labels;
-            charts.requests.data.datasets[0].data = values;
-            charts.requests.options.scales.x.min = windowStart;
-            charts.requests.options.scales.x.max = now;
             charts.requests.update('none');
             // Stats
@@ -350,7 +281,7 @@
                 <div class="metric"><span class="metric-label">Total requêtes (2 min)</span><span class="metric-value">${totalLast2min}</span></div>
                 <div class="metric"><span class="metric-label">Durée moyenne</span><span class="metric-value">${avgDuration} ms</span></div>
                 <div class="metric"><span class="metric-label">Workers actifs</span><span class="metric-value">${data.workers.filter(w => w.jobsActive > 0).length}</span></div>
-                <div class="metric"><span class="metric-label">Taux actuel</span><span class="metric-value">${values[values.length-1] || 0} req/min</span></div>
             `;
         }

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Panel - Translator API</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
         body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; min-height: 100vh; }
         .auth-box button { width: 100%; padding: 12px; background: #1a73e8; color: white; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; }
         .auth-box button:hover { background: #1557b0; }
         .error-msg { color: #dc3545; margin-bottom: 15px; display: none; }
+        .refresh-info { font-size: 12px; color: #999; margin-left: 10px; }
     </style>
 </head>
 <body>
         let charts = {};
         let refreshInterval;
+        // Check auth on load
         window.onload = () => {
             const savedCode = sessionStorage.getItem('adminCode');
             if (savedCode) {
             sessionStorage.removeItem('adminCode');
             document.getElementById('authModal').classList.remove('hidden');
             if (refreshInterval) clearInterval(refreshInterval);
         }
         function apiCall(endpoint) {
         function initDashboard() {
             createCharts();
             loadData();
+            refreshInterval = setInterval(loadData, 5000);
         }
         function createCharts() {
             const commonOptions = {
                 responsive: true,
                 maintainAspectRatio: false,
+                animation: { duration: 300 },
                 scales: {
+                    x: { type: 'time', time: { unit: 'second', displayFormats: { second: 'HH:mm:ss' } }, title: { display: true, text: 'Temps' } },
+                    y: { beginAtZero: true, title: { display: true } }
                 },
+                plugins: { legend: { display: false } }
             };
             charts.cpu = new Chart(document.getElementById('cpuChart'), {
                 type: 'line',
+                data: { datasets: [{ label: 'CPU %', data: [], borderColor: '#1a73e8', backgroundColor: 'rgba(26,115,232,0.1)', fill: true, tension: 0.3 }] },
+                options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, max: 100, title: { display: true, text: '% CPU' } } } }
             });
             charts.ram = new Chart(document.getElementById('ramChart'), {
                 type: 'line',
+                data: { datasets: [{ label: 'RAM Used (GB)', data: [], borderColor: '#34a853', backgroundColor: 'rgba(52,168,83,0.1)', fill: true, tension: 0.3 }] },
+                options: { ...commonOptions, scales: { ...commonOptions.scales, y: { ...commonOptions.scales.y, title: { display: true, text: 'GB' } } } }
             });
             charts.requests = new Chart(document.getElementById('requestsChart'), {
+                type: 'bar',
+                data: { labels: [], datasets: [{ label: 'Req/min', data: [], backgroundColor: '#ea4335' }] },
                 options: {
                     ...commonOptions,
                     scales: {
+                        x: { type: 'time', time: { unit: 'second', displayFormats: { second: 'HH:mm:ss' } }, title: { display: true, text: 'Temps' } },
+                        y: { beginAtZero: true, title: { display: true, text: 'Requêtes/min' } }
                     }
                 }
             });
         }
         function updateMachinesTab(data) {
+            // Update CPU chart
+            const cpuData = data.cpuHistory.map(m => ({ x: new Date(m.timestamp), y: (m.cpu / 1000000).toFixed(1) })).slice(-60);
+            charts.cpu.data.datasets[0].data = cpuData;
             charts.cpu.update('none');
+            // Update RAM chart
+            const ramData = data.ramHistory.map(m => ({ x: new Date(m.timestamp), y: (m.used / 1024 / 1024 / 1024).toFixed(2) })).slice(-60);
+            charts.ram.data.datasets[0].data = ramData;
             charts.ram.update('none');
+            // Update workers list
             const workersList = document.getElementById('workersList');
             if (data.workers.length === 0) {
                 workersList.innerHTML = '<div class="loading">Aucun worker connecté</div>';
         }
         function updateRequestsTab(data) {
+            // Group requests by 10-second intervals
             const now = Date.now();
+            const intervals = [];
+            for (let i = 11; i >= 0; i--) {
+                const start = now - (i + 1) * 10000;
+                const end = now - i * 10000;
+                const count = data.requests.filter(r => r.timestamp >= start && r.timestamp < end).length * 6; // project to per minute
+                intervals.push({ time: new Date(start), count });
             }
+            charts.requests.data.labels = intervals.map(i => i.time);
+            charts.requests.data.datasets[0].data = intervals.map(i => i.count);
             charts.requests.update('none');
             // Stats
                 <div class="metric"><span class="metric-label">Total requêtes (2 min)</span><span class="metric-value">${totalLast2min}</span></div>
                 <div class="metric"><span class="metric-label">Durée moyenne</span><span class="metric-value">${avgDuration} ms</span></div>
                 <div class="metric"><span class="metric-label">Workers actifs</span><span class="metric-value">${data.workers.filter(w => w.jobsActive > 0).length}</span></div>
+                <div class="metric"><span class="metric-label">Taux actuel</span><span class="metric-value">${data.requestRate} req/min</span></div>
             `;
         }