nexo-brain 5.3.26 → 5.3.27

package/src/dashboard/templates/crons 2.html

@@ -1,370 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Crons Control{% endblock %}
-{% block page_title %}Crons Control Center{% endblock %}
-{% block page_subtitle %}
-<span class="text-xs text-slate-500 font-mono ml-2" id="crons-updated">--</span>
-{% endblock %}
-
-{% block header_actions %}
-<div class="flex items-center gap-1.5">
-  <button onclick="setTimeRange('24h')" data-range="24h" class="range-btn active text-[10px] px-2.5 py-1 rounded-md transition-all">24h</button>
-  <button onclick="setTimeRange('48h')" data-range="48h" class="range-btn text-[10px] px-2.5 py-1 rounded-md transition-all">48h</button>
-  <button onclick="setTimeRange('7d')" data-range="7d" class="range-btn text-[10px] px-2.5 py-1 rounded-md transition-all">7d</button>
-</div>
-<button onclick="loadAll()" class="text-xs text-slate-400 hover:text-slate-200 bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 transition-colors flex items-center gap-1.5 ml-2">
-  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
-  Refresh
-</button>
-{% endblock %}
-
-{% block content %}
-<!-- Summary cards -->
-<div class="grid grid-cols-4 gap-4 mb-6">
-  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
-    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Total Runs</div>
-    <div class="text-2xl font-mono font-bold text-slate-200" id="stat-total">--</div>
-    <div class="text-xs text-slate-500 mt-1" id="stat-total-label">last 24h</div>
-  </div>
-  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
-    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Success Rate</div>
-    <div class="text-2xl font-mono font-bold" id="stat-success">--</div>
-    <div class="flex items-center gap-1.5 mt-2">
-      <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
-        <div class="h-full bg-emerald-500 rounded-full transition-all duration-700" id="stat-success-bar" style="width: 0%"></div>
-      </div>
-    </div>
-  </div>
-  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
-    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Avg Duration</div>
-    <div class="text-2xl font-mono font-bold text-slate-200" id="stat-duration">--</div>
-    <div class="text-xs text-slate-500 mt-1">seconds per run</div>
-  </div>
-  <div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5">
-    <div class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-2">Active Crons</div>
-    <div class="text-2xl font-mono font-bold text-nexo-400" id="stat-active">--</div>
-    <div class="flex items-center gap-1.5 mt-2">
-      <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 glow-dot" style="color: #34d399;"></div>
-      <span class="text-[10px] text-slate-500">scheduling active</span>
-    </div>
-  </div>
-</div>
-
-<!-- Timeline visualization -->
-<div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 mb-6">
-  <div class="flex items-center justify-between mb-4">
-    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Timeline</h2>
-    <div class="flex items-center gap-3 text-[10px] text-slate-500">
-      <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-emerald-400 inline-block"></span> success</span>
-      <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-red-400 inline-block"></span> failure</span>
-    </div>
-  </div>
-  <div id="timeline-container" class="space-y-2 min-h-[60px]">
-    <div class="text-xs text-slate-600 text-center py-6">Loading timeline...</div>
-  </div>
-  <!-- Time axis -->
-  <div class="flex justify-between mt-3 text-[9px] text-slate-600 font-mono" id="time-axis">
-    <span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>now</span>
-  </div>
-</div>
-
-<!-- Cron summary table -->
-<div class="card bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden">
-  <div class="px-5 py-4 border-b border-slate-800/50">
-    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Cron Jobs</h2>
-  </div>
-  <div id="cron-table" class="divide-y divide-slate-800/30">
-    <!-- Loading skeleton -->
-    <div id="table-skeleton" class="p-5 space-y-3">
-      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
-      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
-      <div class="h-8 bg-slate-800/30 rounded animate-pulse"></div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .range-btn {
-    background: rgba(30, 41, 59, 0.5);
-    border: 1px solid rgba(51, 65, 85, 0.3);
-    color: #64748b;
-  }
-  .range-btn:hover { color: #e2e8f0; background: rgba(51, 65, 85, 0.5); }
-  .range-btn.active {
-    background: rgba(124, 58, 237, 0.15);
-    border-color: rgba(124, 58, 237, 0.4);
-    color: #a78bfa;
-  }
-
-  .timeline-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .timeline-label {
-    width: 120px;
-    flex-shrink: 0;
-    font-size: 11px;
-    font-family: 'JetBrains Mono', monospace;
-    color: #94a3b8;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .timeline-track {
-    flex: 1;
-    height: 20px;
-    background: rgba(15, 23, 42, 0.5);
-    border-radius: 4px;
-    position: relative;
-    overflow: hidden;
-  }
-  .timeline-dot {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition: transform 0.15s, box-shadow 0.15s;
-    cursor: pointer;
-  }
-  .timeline-dot:hover {
-    transform: translate(-50%, -50%) scale(1.6);
-    box-shadow: 0 0 8px currentColor;
-    z-index: 10;
-  }
-  .timeline-dot.success { background: #34d399; color: #34d399; }
-  .timeline-dot.failure { background: #f87171; color: #f87171; }
-
-  .cron-row {
-    transition: background-color 0.15s;
-  }
-  .cron-row:hover { background: rgba(51, 65, 85, 0.15); }
-
-  .cron-runs {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-  }
-  .cron-runs.open { max-height: 400px; overflow-y: auto; }
-
-  .status-dot {
-    width: 6px; height: 6px; border-radius: 50%;
-  }
-  .status-ok { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
-  .status-warn { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
-  .status-error { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
-
-  @keyframes barGrow {
-    from { transform: scaleX(0); }
-    to { transform: scaleX(1); }
-  }
-</style>
-{% endblock %}
-
-{% block scripts %}
-<script>
-let cronData = null;
-let timelineData = null;
-let currentRange = '24h';
-
-function setTimeRange(range) {
-  currentRange = range;
-  document.querySelectorAll('.range-btn').forEach(b => b.classList.toggle('active', b.dataset.range === range));
-
-  // Update axis labels
-  const axis = document.getElementById('time-axis');
-  if (range === '24h') axis.innerHTML = '<span>-24h</span><span>-18h</span><span>-12h</span><span>-6h</span><span>now</span>';
-  else if (range === '48h') axis.innerHTML = '<span>-48h</span><span>-36h</span><span>-24h</span><span>-12h</span><span>now</span>';
-  else axis.innerHTML = '<span>-7d</span><span>-5d</span><span>-3d</span><span>-1d</span><span>now</span>';
-
-  loadAll();
-}
-
-function getRangeHours() {
-  if (currentRange === '48h') return 48;
-  if (currentRange === '7d') return 168;
-  return 24;
-}
-
-function getStatusClass(successRate) {
-  if (successRate >= 95) return 'status-ok';
-  if (successRate >= 70) return 'status-warn';
-  return 'status-error';
-}
-
-function getSuccessColor(rate) {
-  if (rate >= 95) return 'text-emerald-400';
-  if (rate >= 70) return 'text-amber-400';
-  return 'text-red-400';
-}
-
-function renderSummary(summary) {
-  let totalRuns = 0, totalSuccess = 0, totalFail = 0, totalDuration = 0, cronCount = 0, durationCount = 0;
-
-  for (const [, s] of Object.entries(summary)) {
-    totalRuns += (s.total || 0);
-    totalSuccess += (s.success || 0);
-    totalFail += (s.fail || 0);
-    if (s.avg_duration) { totalDuration += s.avg_duration; durationCount++; }
-    cronCount++;
-  }
-
-  const rate = totalRuns > 0 ? Math.round((totalSuccess / totalRuns) * 100) : 0;
-  const avgDur = durationCount > 0 ? (totalDuration / durationCount).toFixed(1) : '--';
-
-  document.getElementById('stat-total').textContent = formatNumber(totalRuns);
-  document.getElementById('stat-total-label').textContent = `last ${currentRange}`;
-
-  const successEl = document.getElementById('stat-success');
-  successEl.textContent = rate + '%';
-  successEl.className = `text-2xl font-mono font-bold ${getSuccessColor(rate)}`;
-  document.getElementById('stat-success-bar').style.width = rate + '%';
-
-  document.getElementById('stat-duration').textContent = avgDur + 's';
-  document.getElementById('stat-active').textContent = cronCount;
-}
-
-function renderTimeline(timeline) {
-  const container = document.getElementById('timeline-container');
-  if (!timeline || timeline.length === 0) {
-    container.innerHTML = '<div class="text-xs text-slate-600 text-center py-6">No timeline data</div>';
-    return;
-  }
-
-  const rangeHours = getRangeHours();
-  const now = Date.now();
-  const rangeMs = rangeHours * 3600000;
-
-  // Group by cron_id
-  const groups = {};
-  timeline.forEach(t => {
-    if (!groups[t.cron_id]) groups[t.cron_id] = [];
-    groups[t.cron_id].push(t);
-  });
-
-  container.innerHTML = Object.entries(groups).map(([cronId, runs]) => {
-    const dots = runs.map(r => {
-      const ts = new Date(r.started_at).getTime();
-      const pct = Math.max(0, Math.min(100, ((ts - (now - rangeMs)) / rangeMs) * 100));
-      const isSuccess = r.exit_code === 0;
-      const dur = r.duration_secs != null ? r.duration_secs.toFixed(1) + 's' : '?';
-      return `<div class="timeline-dot ${isSuccess ? 'success' : 'failure'}" style="left: ${pct}%" title="${cronId} - ${isSuccess ? 'OK' : 'FAIL'} (${dur}) - ${new Date(r.started_at).toLocaleTimeString('en-GB')}"></div>`;
-    }).join('');
-
-    return `
-      <div class="timeline-row">
-        <div class="timeline-label" title="${escapeHtml(cronId)}">${escapeHtml(cronId)}</div>
-        <div class="timeline-track">${dots}</div>
-      </div>
-    `;
-  }).join('');
-}
-
-function renderTable(summary, runs) {
-  const table = document.getElementById('cron-table');
-  const skeleton = document.getElementById('table-skeleton');
-  if (skeleton) skeleton.remove();
-
-  const entries = Object.entries(summary);
-  if (entries.length === 0) {
-    table.innerHTML = '<div class="p-5 text-xs text-slate-600 text-center">No cron data available</div>';
-    return;
-  }
-
-  // Group runs by cron_id for expandable rows
-  const runsByCron = {};
-  if (runs) {
-    runs.forEach(r => {
-      const key = r.cron_id || r.name || 'unknown';
-      if (!runsByCron[key]) runsByCron[key] = [];
-      runsByCron[key].push(r);
-    });
-  }
-
-  table.innerHTML = `
-    <div class="grid grid-cols-[1fr_80px_120px_90px_120px_40px] gap-2 px-5 py-2.5 text-[10px] uppercase tracking-wider text-slate-600 font-semibold border-b border-slate-800/30">
-      <span>Name</span><span class="text-center">Runs</span><span class="text-center">Success / Fail</span><span class="text-center">Avg Duration</span><span class="text-center">Last Run</span><span></span>
-    </div>
-    ${entries.map(([cronId, s]) => {
-      const rate = s.total > 0 ? Math.round((s.success / s.total) * 100) : 0;
-      const cronRuns = runsByCron[cronId] || [];
-      const lastRun = cronRuns.length > 0 ? relativeTime(cronRuns[0].started_at || cronRuns[0].created_at) : '--';
-      return `
-        <div class="cron-row">
-          <div class="grid grid-cols-[1fr_80px_120px_90px_120px_40px] gap-2 px-5 py-3 items-center cursor-pointer" onclick="toggleCronRuns(this)">
-            <div class="flex items-center gap-2">
-              <div class="status-dot ${getStatusClass(rate)}"></div>
-              <span class="text-sm text-slate-200 font-mono truncate">${escapeHtml(cronId)}</span>
-            </div>
-            <span class="text-center text-xs font-mono text-slate-400">${s.total || 0}</span>
-            <div class="flex items-center justify-center gap-1.5">
-              <span class="text-xs font-mono text-emerald-400">${s.success || 0}</span>
-              <span class="text-slate-700">/</span>
-              <span class="text-xs font-mono ${s.fail > 0 ? 'text-red-400' : 'text-slate-600'}">${s.fail || 0}</span>
-            </div>
-            <span class="text-center text-xs font-mono text-slate-400">${s.avg_duration ? s.avg_duration.toFixed(1) + 's' : '--'}</span>
-            <span class="text-center text-xs text-slate-500">${lastRun}</span>
-            <svg class="w-4 h-4 text-slate-600 mx-auto transition-transform duration-200 expand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
-          </div>
-          <div class="cron-runs">
-            ${cronRuns.length > 0 ? `
-              <div class="px-5 pb-3">
-                <div class="bg-slate-950/50 rounded-lg border border-slate-800/30 overflow-hidden">
-                  <div class="grid grid-cols-[1fr_80px_90px_120px] gap-2 px-4 py-2 text-[9px] uppercase tracking-wider text-slate-600 border-b border-slate-800/30">
-                    <span>Started</span><span>Exit Code</span><span>Duration</span><span>Status</span>
-                  </div>
-                  ${cronRuns.slice(0, 10).map(r => `
-                    <div class="grid grid-cols-[1fr_80px_90px_120px] gap-2 px-4 py-2 text-xs border-b border-slate-800/10 last:border-0">
-                      <span class="font-mono text-slate-400">${r.started_at ? new Date(r.started_at).toLocaleString('en-GB', {month:'short',day:'numeric',hour:'2-digit',minute:'2-digit'}) : '--'}</span>
-                      <span class="font-mono ${r.exit_code === 0 ? 'text-emerald-400' : 'text-red-400'}">${r.exit_code != null ? r.exit_code : '--'}</span>
-                      <span class="font-mono text-slate-400">${r.duration_secs != null ? r.duration_secs.toFixed(1) + 's' : '--'}</span>
-                      <span class="text-[10px] ${r.exit_code === 0 ? 'text-emerald-400' : 'text-red-400'}">${r.exit_code === 0 ? 'Success' : 'Failed'}</span>
-                    </div>
-                  `).join('')}
-                </div>
-              </div>
-            ` : '<div class="px-5 pb-3 text-xs text-slate-600">No recent runs</div>'}
-          </div>
-        </div>
-      `;
-    }).join('')}
-  `;
-}
-
-function toggleCronRuns(el) {
-  const runs = el.nextElementSibling;
-  const icon = el.querySelector('.expand-icon');
-  runs.classList.toggle('open');
-  icon.style.transform = runs.classList.contains('open') ? 'rotate(180deg)' : '';
-}
-
-async function loadAll() {
-  const range = currentRange;
-  const [cronsRes, timelineRes] = await Promise.all([
-    fetchJSON(`/api/crons?range=${range}`),
-    fetchJSON(`/api/crons/timeline?range=${range}`)
-  ]);
-
-  if (cronsRes) {
-    cronData = cronsRes;
-    renderSummary(cronsRes.summary || {});
-    renderTable(cronsRes.summary || {}, cronsRes.runs || []);
-  }
-  if (timelineRes) {
-    timelineData = timelineRes;
-    renderTimeline(timelineRes.timeline || []);
-  }
-
-  document.getElementById('crons-updated').textContent = 'updated ' + new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
-}
-
-// Initial load
-loadAll();
-
-// Auto-refresh every 60s
-setInterval(loadAll, 60000);
-</script>
-{% endblock %}