Spaces:

infinityonline
/

dz

Running

App Files Files Community

infinityonline commited on 2 days ago

Commit

ff8ca6f

verified ·

1 Parent(s): 9baa398

Create dashboard.html

Browse files

Files changed (1) hide show

dashboard.html +238 -0

dashboard.html ADDED Viewed

	@@ -0,0 +1,238 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Duck.ai API Dashboard</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #0f1117; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; padding: 20px; }
+  h1 { text-align: center; color: #4fc3f7; margin-bottom: 24px; font-size: 1.6rem; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
+  .card { background: #1e2130; border-radius: 12px; padding: 20px; border: 1px solid #2a2d3e; }
+  .card .label { font-size: 0.8rem; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
+  .card .value { font-size: 2rem; font-weight: bold; }
+  .card .value.green  { color: #69f0ae; }
+  .card .value.blue   { color: #4fc3f7; }
+  .card .value.orange { color: #ffb74d; }
+  .card .value.red    { color: #ef5350; }
+  .card .value.purple { color: #ce93d8; }
+  .section { background: #1e2130; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #2a2d3e; }
+  .section h2 { color: #4fc3f7; margin-bottom: 16px; font-size: 1rem; }
+  table { width: 100%; border-collapse: collapse; }
+  th { text-align: right; padding: 10px; background: #252840; color: #aaa; font-size: 0.8rem; }
+  td { padding: 10px; border-bottom: 1px solid #2a2d3e; font-size: 0.9rem; }
+  .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; }
+  .badge.busy { background: #ef535020; color: #ef5350; border: 1px solid #ef535050; }
+  .badge.free { background: #69f0ae20; color: #69f0ae; border: 1px solid #69f0ae50; }
+  .bar-wrap { background: #252840; border-radius: 20px; height: 10px; overflow: hidden; margin-top: 6px; }
+  .bar { height: 100%; border-radius: 20px; transition: width 0.5s; background: linear-gradient(90deg, #4fc3f7, #69f0ae); }
+  .bar.warn { background: linear-gradient(90deg, #ffb74d, #ef5350); }
+  .log-box { background: #0d1117; border-radius: 8px; padding: 14px; font-family: monospace; font-size: 0.8rem;
+             height: 220px; overflow-y: auto; color: #ccc; border: 1px solid #2a2d3e; }
+  .log-box .ok   { color: #69f0ae; }
+  .log-box .err  { color: #ef5350; }
+  .log-box .info { color: #4fc3f7; }
+  .log-box .warn { color: #ffb74d; }
+  .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 -->
+<div class="grid">
+  <div class="card">
+    <div class="label">إجمالي الطلبات</div>
+    <div class="value blue" id="total_req">—</div>
+  </div>
+  <div class="card">
+    <div class="label">طلبات اليوم</div>
+    <div class="value green" id="today_req">—</div>
+  </div>
+  <div class="card">
+    <div class="label">مرفوضة (Queue Full)</div>
+    <div class="value red" id="rejected">—</div>
+  </div>
+  <div class="card">
+    <div class="label">Workers حرة</div>
+    <div class="value green" id="workers_free">—</div>
+  </div>
+  <div class="card">
+    <div class="label">Workers مشغولة</div>
+    <div class="value orange" id="workers_busy">—</div>
+  </div>
+  <div class="card">
+    <div class="label">RAM المستخدم</div>
+    <div class="value purple" id="ram_used">—</div>
+  </div>
+  <div class="card">
+    <div class="label">RAM الكلي</div>
+    <div class="value blue" id="ram_total">—</div>
+  </div>
+  <div class="card">
+    <div class="label">CPU %</div>
+    <div class="value orange" id="cpu">—</div>
+  </div>
+</div>
+<!-- Workers Table -->
+<div class="section">
+  <h2>⚙️ حالة Workers</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Worker</th>
+        <th>الحالة</th>
+        <th>إجمالي الطلبات</th>
+        <th>حتى التجديد</th>
+        <th>شريط التقدم</th>
+      </tr>
+    </thead>
+    <tbody id="workers_table"></tbody>
+  </table>
+</div>
+<!-- Charts -->
+<div class="chart-wrap" style="margin-bottom:20px;">
+  <div class="section" style="margin:0;">
+    <h2>📈 الطلبات (آخر 60 دقيقة)</h2>
+    <canvas id="reqChart" height="120"></canvas>
+  </div>
+  <div class="section" style="margin:0;">
+    <h2>💾 RAM % (آخر 60 دقيقة)</h2>
+    <canvas id="ramChart" height="120"></canvas>
+  </div>
+</div>
+<!-- Live Log -->
+<div class="section">
+  <h2>📋 السجل المباشر</h2>
+  <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;
+      localStorage.setItem('today_' + todayKey(), todayCount);
+      lastTotal = d.total_requests ?? 0;
+    }
+    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>
+          <td>W${w.id}</td>
+          <td><span class="badge ${w.busy ? 'busy' : 'free'}">${w.busy ? '🔴 مشغول' : '🟢 حر'}</span></td>
+          <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();
+  document.getElementById('log_box').innerHTML = logs.join('<br>');
+}
+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>
+</html>