Spaces:

infinityonline
/

dz

Running

App Files Files Community

infinityonline commited on 2 days ago

Commit

4355a9a

verified ·

1 Parent(s): 86a6197

Update dashboard.html

Browse files

Files changed (1) hide show

dashboard.html +170 -34

dashboard.html CHANGED Viewed

@@ -37,10 +37,72 @@
   .refresh-badge { text-align: center; color: #555; font-size: 0.75rem; margin-top: 10px; }
   .chart-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
   canvas { background: #141720; border-radius: 8px; border: 1px solid #2a2d3e; }
 </style>
 </head>
 <body>
 <h1>🦆 Duck.ai API — لوحة المراقبة</h1>
 <!-- KPI Cards -->
@@ -114,44 +176,110 @@
   <div class="log-box" id="log_box"></div>
 </div>
-<div class="refresh-badge">يتجدد كل <span id="interval_val">5</span> ثوان • آخر تحديث: <span id="last_update">—</span></div>
 <script>
 const REFRESH = 5000;
 let reqHistory = Array(60).fill(0);
 let ramHistory = Array(60).fill(0);
-let logs = [];
-let lastTotal = 0;
-const todayKey = () => new Date().toISOString().slice(0,10);
-let todayCount = parseInt(localStorage.getItem('today_' + todayKey()) || '0');
-let lastDay = localStorage.getItem('last_day') || todayKey();
 async function fetchData() {
   try {
-    const r = await fetch('/health');
     const d = await r.json();
-    // KPIs
-    document.getElementById('total_req').textContent    = d.total_requests ?? '—';
     document.getElementById('rejected').textContent     = d.rejected_requests ?? 0;
-    document.getElementById('workers_free').textContent = d.workers_free ?? '—';
-    document.getElementById('workers_busy').textContent = d.workers_busy ?? '—';
     if (d.ram) {
-      document.getElementById('ram_used').textContent  = d.ram.used_gb + ' GB';
       document.getElementById('ram_total').textContent = d.ram.total_gb + ' GB';
     }
     if (d.cpu !== undefined) {
       document.getElementById('cpu').textContent = d.cpu + '%';
     }
-    // Today counter
     const diff = (d.total_requests ?? 0) - lastTotal;
     if (diff > 0) {
       if (lastDay !== todayKey()) {
         todayCount = 0;
-        lastDay = todayKey();
         localStorage.setItem('last_day', lastDay);
       }
       todayCount += diff;
@@ -160,11 +288,13 @@ async function fetchData() {
     }
     document.getElementById('today_req').textContent = todayCount;
-    // Workers table
     const tbody = document.getElementById('workers_table');
     tbody.innerHTML = '';
     (d.workers || []).forEach(w => {
-      const pct = Math.round(((30 - w.requests_until_rotation) / 30) * 100);
       const warn = pct > 80 ? 'warn' : '';
       tbody.innerHTML += `
         <tr>
@@ -173,29 +303,34 @@ async function fetchData() {
           <td>${w.total_requests}</td>
           <td>${w.requests_until_rotation}</td>
           <td style="width:160px">
-            <div class="bar-wrap"><div class="bar ${warn}" style="width:${pct}%"></div></div>
           </td>
         </tr>`;
     });
-    // History
     reqHistory.push(diff > 0 ? diff : 0); reqHistory.shift();
     if (d.ram) { ramHistory.push(d.ram.percent); ramHistory.shift(); }
     drawChart('reqChart', reqHistory, '#4fc3f7');
     drawChart('ramChart', ramHistory, '#ce93d8', 100);
-    // Log
-    addLog(`✓ total=${d.total_requests} | free=${d.workers_free} | busy=${d.workers_busy}`, 'ok');
-    document.getElementById('last_update').textContent = new Date().toLocaleTimeString('ar-EG');
-  } catch(e) {
     addLog('❌ فشل الاتصال: ' + e.message, 'err');
   }
 }
-function addLog(msg, cls='info') {
   const now = new Date().toLocaleTimeString('ar-EG');
   logs.unshift(`<span class="${cls}">[${now}] ${msg}</span>`);
   if (logs.length > 80) logs.pop();
@@ -204,34 +339,35 @@ function addLog(msg, cls='info') {
 function drawChart(id, data, color, maxVal = null) {
   const canvas = document.getElementById(id);
-  const ctx = canvas.getContext('2d');
-  canvas.width = canvas.offsetWidth;
   canvas.height = 120;
   const W = canvas.width, H = canvas.height;
-  const max = maxVal ?? (Math.max(...data, 1));
-  ctx.clearRect(0,0,W,H);
-  // grid lines
   ctx.strokeStyle = '#2a2d3e'; ctx.lineWidth = 1;
   [0.25, 0.5, 0.75].forEach(f => {
-    ctx.beginPath(); ctx.moveTo(0, H*f); ctx.lineTo(W, H*f); ctx.stroke();
   });
-  // area
   const step = W / (data.length - 1);
   ctx.beginPath();
   data.forEach((v, i) => {
-    const x = i * step, y = H - (v / max) * (H - 10) - 5;
     i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
   });
   ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke();
   ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath();
   ctx.fillStyle = color + '22'; ctx.fill();
 }
 document.getElementById('interval_val').textContent = REFRESH / 1000;
-fetchData();
 setInterval(fetchData, REFRESH);
 </script>
 </body>

   .refresh-badge { text-align: center; color: #555; font-size: 0.75rem; margin-top: 10px; }
   .chart-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
   canvas { background: #141720; border-radius: 8px; border: 1px solid #2a2d3e; }
+  /* ── Login Overlay ── */
+  #login-overlay {
+    display: none;
+    position: fixed; inset: 0;
+    background: #0f1117ee;
+    z-index: 999;
+    align-items: center;
+    justify-content: center;
+  }
+  #login-overlay.show { display: flex; }
+  .login-box {
+    background: #1e2130;
+    border: 1px solid #2a2d3e;
+    border-radius: 16px;
+    padding: 40px;
+    width: 360px;
+    text-align: center;
+  }
+  .login-box h2 { color: #4fc3f7; margin-bottom: 8px; font-size: 1.3rem; }
+  .login-box p  { color: #888; font-size: 0.85rem; margin-bottom: 24px; }
+  .login-box input {
+    width: 100%; padding: 12px 16px;
+    background: #0d1117; border: 1px solid #2a2d3e;
+    border-radius: 8px; color: #e0e0e0;
+    font-size: 0.95rem; margin-bottom: 16px;
+    outline: none; direction: ltr;
+  }
+  .login-box input:focus { border-color: #4fc3f7; }
+  .login-box button {
+    width: 100%; padding: 12px;
+    background: linear-gradient(90deg, #4fc3f7, #69f0ae);
+    border: none; border-radius: 8px;
+    color: #0f1117; font-weight: bold;
+    font-size: 1rem; cursor: pointer;
+  }
+  .login-box button:hover { opacity: 0.9; }
+  .login-err { color: #ef5350; font-size: 0.82rem; margin-top: 10px; display: none; }
+  /* ── Logout btn ── */
+  #logout-btn {
+    position: fixed; top: 16px; left: 16px;
+    background: #1e2130; border: 1px solid #2a2d3e;
+    color: #888; padding: 6px 14px;
+    border-radius: 8px; cursor: pointer;
+    font-size: 0.8rem; z-index: 100;
+  }
+  #logout-btn:hover { color: #ef5350; border-color: #ef535050; }
 </style>
 </head>
 <body>
+<!-- Login Overlay -->
+<div id="login-overlay" class="show">
+  <div class="login-box">
+    <h2>🦆 Duck.ai Dashboard</h2>
+    <p>أدخل API Key للدخول</p>
+    <input type="password" id="key-input" placeholder="API Key..." />
+    <button onclick="doLogin()">دخول ←</button>
+    <div class="login-err" id="login-err">❌ مفتاح خاطئ، حاول مجدداً</div>
+  </div>
+</div>
+<!-- Logout -->
+<button id="logout-btn" onclick="doLogout()">🔓 خروج</button>
 <h1>🦆 Duck.ai API — لوحة المراقبة</h1>
 <!-- KPI Cards -->
   <div class="log-box" id="log_box"></div>
 </div>
+<div class="refresh-badge">
+  يتجدد كل <span id="interval_val">5</span> ثوان •
+  آخر تحديث: <span id="last_update">—</span>
+</div>
 <script>
+// ====================================================================
+// Auth
+// ====================================================================
+const urlToken = new URLSearchParams(window.location.search).get('token');
+if (urlToken) {
+  localStorage.setItem('duck_token', urlToken);
+  // أزل token من الـ URL بعد حفظه
+  window.history.replaceState({}, '', window.location.pathname);
+}
+let TOKEN = localStorage.getItem('duck_token') || '';
+function doLogin() {
+  const val = document.getElementById('key-input').value.trim();
+  if (!val) return;
+  TOKEN = val;
+  localStorage.setItem('duck_token', TOKEN);
+  document.getElementById('login-err').style.display = 'none';
+  fetchData(); // جرب مباشرة
+}
+function doLogout() {
+  localStorage.removeItem('duck_token');
+  TOKEN = '';
+  document.getElementById('login-overlay').classList.add('show');
+  document.getElementById('key-input').value = '';
+}
+function showLogin(msg) {
+  document.getElementById('login-overlay').classList.add('show');
+  if (msg) {
+    const err = document.getElementById('login-err');
+    err.textContent = msg;
+    err.style.display = 'block';
+  }
+}
+// Enter key في input
+document.getElementById('key-input').addEventListener('keydown', e => {
+  if (e.key === 'Enter') doLogin();
+});
+// إذا عنده token محفوظ ابدأ مباشرة
+if (TOKEN) {
+  document.getElementById('login-overlay').classList.remove('show');
+}
+// ====================================================================
+// Data & Charts
+// ====================================================================
 const REFRESH = 5000;
 let reqHistory = Array(60).fill(0);
 let ramHistory = Array(60).fill(0);
+let logs       = [];
+let lastTotal  = 0;
+let fetchTimer = null;
+const todayKey  = () => new Date().toISOString().slice(0, 10);
+let todayCount  = parseInt(localStorage.getItem('today_' + todayKey()) || '0');
+let lastDay     = localStorage.getItem('last_day') || todayKey();
 async function fetchData() {
+  if (!TOKEN) return;
   try {
+    const r = await fetch('/health', {
+      headers: { 'Authorization': 'Bearer ' + TOKEN }
+    });
+    if (r.status === 401) {
+      showLogin('❌ مفتاح خاطئ، حاول مجدداً');
+      TOKEN = '';
+      localStorage.removeItem('duck_token');
+      return;
+    }
     const d = await r.json();
+    document.getElementById('login-overlay').classList.remove('show');
+    // ── KPIs ─────────────────────────────────────────────
+    document.getElementById('total_req').textContent    = d.total_requests    ?? '—';
     document.getElementById('rejected').textContent     = d.rejected_requests ?? 0;
+    document.getElementById('workers_free').textContent = d.workers_free      ?? '—';
+    document.getElementById('workers_busy').textContent = d.workers_busy      ?? '—';
     if (d.ram) {
+      document.getElementById('ram_used').textContent  = d.ram.used_gb  + ' GB';
       document.getElementById('ram_total').textContent = d.ram.total_gb + ' GB';
     }
     if (d.cpu !== undefined) {
       document.getElementById('cpu').textContent = d.cpu + '%';
     }
+    // ── Today counter ─────────────────────────────────────
     const diff = (d.total_requests ?? 0) - lastTotal;
     if (diff > 0) {
       if (lastDay !== todayKey()) {
         todayCount = 0;
+        lastDay    = todayKey();
         localStorage.setItem('last_day', lastDay);
       }
       todayCount += diff;
     }
     document.getElementById('today_req').textContent = todayCount;
+    // ── Workers table ─────────────────────────────────────
     const tbody = document.getElementById('workers_table');
     tbody.innerHTML = '';
     (d.workers || []).forEach(w => {
+      const used = (parseInt(d.pool_size) || 30) - w.requests_until_rotation;
+      const max  = parseInt(d.pool_size) || 30;
+      const pct  = Math.round((used / max) * 100);
       const warn = pct > 80 ? 'warn' : '';
       tbody.innerHTML += `
         <tr>
           <td>${w.total_requests}</td>
           <td>${w.requests_until_rotation}</td>
           <td style="width:160px">
+            <div class="bar-wrap">
+              <div class="bar ${warn}" style="width:${pct}%"></div>
+            </div>
           </td>
         </tr>`;
     });
+    // ── History charts ────────────────────────────────────
     reqHistory.push(diff > 0 ? diff : 0); reqHistory.shift();
     if (d.ram) { ramHistory.push(d.ram.percent); ramHistory.shift(); }
     drawChart('reqChart', reqHistory, '#4fc3f7');
     drawChart('ramChart', ramHistory, '#ce93d8', 100);
+    // ── Log ───────────────────────────────────────────────
+    addLog(
+      `✓ total=${d.total_requests} | free=${d.workers_free} | busy=${d.workers_busy} | RAM=${d.ram?.percent ?? '?'}% | CPU=${d.cpu ?? '?'}%`,
+      'ok'
+    );
+    document.getElementById('last_update').textContent =
+      new Date().toLocaleTimeString('ar-EG');
+  } catch (e) {
     addLog('❌ فشل الاتصال: ' + e.message, 'err');
   }
 }
+function addLog(msg, cls = 'info') {
   const now = new Date().toLocaleTimeString('ar-EG');
   logs.unshift(`<span class="${cls}">[${now}] ${msg}</span>`);
   if (logs.length > 80) logs.pop();
 function drawChart(id, data, color, maxVal = null) {
   const canvas = document.getElementById(id);
+  const ctx    = canvas.getContext('2d');
+  canvas.width  = canvas.offsetWidth;
   canvas.height = 120;
   const W = canvas.width, H = canvas.height;
+  const max = maxVal ?? Math.max(...data, 1);
+  ctx.clearRect(0, 0, W, H);
   ctx.strokeStyle = '#2a2d3e'; ctx.lineWidth = 1;
   [0.25, 0.5, 0.75].forEach(f => {
+    ctx.beginPath(); ctx.moveTo(0, H * f); ctx.lineTo(W, H * f); ctx.stroke();
   });
   const step = W / (data.length - 1);
   ctx.beginPath();
   data.forEach((v, i) => {
+    const x = i * step;
+    const y = H - (v / max) * (H - 10) - 5;
     i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
   });
   ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.stroke();
   ctx.lineTo(W, H); ctx.lineTo(0, H); ctx.closePath();
   ctx.fillStyle = color + '22'; ctx.fill();
 }
+// ====================================================================
+// Start
+// ====================================================================
 document.getElementById('interval_val').textContent = REFRESH / 1000;
+if (TOKEN) fetchData();
 setInterval(fetchData, REFRESH);
 </script>
 </body>