ad73c824d3
Drei Mitigations: 1) Admin-Queue-Polling 5s → 15s. Die Queue ändert sich pro Sekunde ohnehin nicht spürbar; senkt CPU + Network ohne UX-Verlust. 2) ``pagehide``-Listener in admin_queue.html, admin_stand.html und auswertungen.html. Zerstört Chart.js-Instanzen + cleart setInterval- Handles, sobald die Page in den Back/Forward-Cache geht oder geschlossen wird. Bisher hingen sie bis Browser-GC. 3) /auswertungen: zentrales Cleanup für ``_histChart``, alle ``_svCharts.*`` und ``window._zeitreiheModalChart`` beim pagehide. Bisher zerstört nur die einzelnen Render-Funktionen ihre Vorgänger; beim Page-Verlassen blieben sie alle stehen. Was nicht abgedeckt ist (für eventuelle Folge-Iteration mit konkretem Heap-Snapshot): - Lazy-Render lange News-/Drucksachen-Listen via IntersectionObserver - Detaillierte Detached-DOM-Untersuchung pro Seite Bestehende Maßnahmen (bereits da, hier nicht angefasst): chart.destroy() vor jedem neuen Chart, sim.stop() in cluster.html, visibilitychange- Pause für Polling.
238 lines
10 KiB
HTML
238 lines
10 KiB
HTML
{% extends "v2/base.html" %}
|
|
|
|
{% block title %}Queue-Status — GWÖ-Antragsprüfer{% endblock %}
|
|
|
|
{% set v2_active_nav = "admin_queue" %}
|
|
|
|
{% block main %}
|
|
<div style="padding:0 0 1.5rem;display:flex;align-items:baseline;gap:16px;">
|
|
<div>
|
|
<h1 style="font-family:var(--font-display);font-size:22px;color:var(--ecg-teal);margin:0 0 4px;">Queue-Status</h1>
|
|
<p style="font-size:12px;font-family:var(--font-mono);color:var(--ecg-dark);opacity:0.6;">
|
|
Analyse-Jobs · automatische Aktualisierung alle 5 s
|
|
</p>
|
|
</div>
|
|
<span id="refresh-indicator" style="font-family:var(--font-mono);font-size:11px;opacity:0.4;margin-left:auto;">—</span>
|
|
</div>
|
|
|
|
<div id="loading" style="font-family:var(--font-mono);font-size:12px;opacity:0.5;padding:16px 0;">
|
|
Lade Queue …
|
|
</div>
|
|
|
|
<div id="error" class="v2-kasten outline-blue" style="display:none;">
|
|
<h4>Fehler beim Laden</h4>
|
|
<p id="error-msg"></p>
|
|
</div>
|
|
|
|
<div id="content" style="display:none;">
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px;">
|
|
<div class="v2-kasten" style="text-align:center;">
|
|
<div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-teal);" id="stat-running">—</div>
|
|
<div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Läuft</div>
|
|
</div>
|
|
<div class="v2-kasten" style="text-align:center;">
|
|
<div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-blue);" id="stat-queued">—</div>
|
|
<div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Wartend</div>
|
|
</div>
|
|
<div class="v2-kasten" style="text-align:center;">
|
|
<div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-green);" id="stat-completed">—</div>
|
|
<div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Abgeschlossen (Total)</div>
|
|
</div>
|
|
<div class="v2-kasten" style="text-align:center;">
|
|
<div style="font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--ecg-dark);opacity:0.5;" id="stat-failed">—</div>
|
|
<div style="font-family:var(--font-mono);font-size:11px;opacity:0.6;margin-top:4px;">Fehlgeschlagen</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Konfig-Info -->
|
|
<div style="font-family:var(--font-mono);font-size:11px;opacity:0.65;margin-bottom:18px;">
|
|
Worker: <strong id="cfg-workers">—</strong> · Max-Queue: <strong id="cfg-maxsize">—</strong> ·
|
|
Ø Job-Dauer: <strong id="cfg-avg">—</strong> · Geschätzte Wartezeit: <strong id="cfg-wait">—</strong>
|
|
</div>
|
|
|
|
<!-- Laufende Jobs -->
|
|
<div style="margin-bottom:24px;">
|
|
<div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Laufende Jobs</div>
|
|
<div id="running-empty" class="v2-kasten outline-green" style="display:none;">
|
|
<p>Keine laufenden Jobs.</p>
|
|
</div>
|
|
<table id="running-table" class="v2-admin-table" style="display:none;">
|
|
<thead>
|
|
<tr><th>Drucksache</th><th>Status</th><th>Dauer (s)</th></tr>
|
|
</thead>
|
|
<tbody id="running-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Wartende Jobs -->
|
|
<div style="margin-bottom:24px;">
|
|
<div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Wartende Jobs</div>
|
|
<div id="queued-empty" class="v2-kasten outline-green" style="display:none;">
|
|
<p>Keine wartenden Jobs.</p>
|
|
</div>
|
|
<table id="queued-table" class="v2-admin-table" style="display:none;">
|
|
<thead>
|
|
<tr><th>Drucksache</th><th>Job-ID</th></tr>
|
|
</thead>
|
|
<tbody id="queued-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Abgeschlossene Jobs (Recent) -->
|
|
<div style="margin-bottom:24px;">
|
|
<div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Zuletzt abgeschlossen</div>
|
|
<div id="completed-empty" class="v2-kasten outline-blue" style="display:none;">
|
|
<p>Noch keine abgeschlossenen Jobs.</p>
|
|
</div>
|
|
<table id="completed-table" class="v2-admin-table" style="display:none;">
|
|
<thead>
|
|
<tr><th>Drucksache</th><th>Status</th><th>Dauer (s)</th></tr>
|
|
</thead>
|
|
<tbody id="completed-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Fehlgeschlagene Jobs -->
|
|
<div>
|
|
<div style="font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;opacity:0.5;margin-bottom:8px;text-transform:uppercase;">Fehlgeschlagene Jobs</div>
|
|
<div id="failed-empty" class="v2-kasten outline-green" style="display:none;">
|
|
<p>Keine fehlgeschlagenen Jobs.</p>
|
|
</div>
|
|
<table id="failed-table" class="v2-admin-table" style="display:none;">
|
|
<thead>
|
|
<tr><th>Drucksache</th><th>Fehler</th><th>Dauer (s)</th></tr>
|
|
</thead>
|
|
<tbody id="failed-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block body_scripts %}
|
|
<script>
|
|
let firstLoad = true;
|
|
|
|
function fmtTime(ts) {
|
|
if (!ts) return '—';
|
|
try { return new Date(ts).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); }
|
|
catch (_) { return ts; }
|
|
}
|
|
|
|
function renderTable(tbodyId, tableId, emptyId, rows, renderRow) {
|
|
const tbody = document.getElementById(tbodyId);
|
|
const table = document.getElementById(tableId);
|
|
const emptyEl = document.getElementById(emptyId);
|
|
if (!rows || !rows.length) {
|
|
table.style.display = 'none';
|
|
emptyEl.style.display = '';
|
|
} else {
|
|
emptyEl.style.display = 'none';
|
|
tbody.innerHTML = rows.map(renderRow).join('');
|
|
table.style.display = '';
|
|
}
|
|
}
|
|
|
|
function fmtDuration(seconds) {
|
|
if (seconds == null) return '—';
|
|
return Number(seconds).toFixed(1);
|
|
}
|
|
|
|
async function refresh() {
|
|
try {
|
|
const resp = await fetch('/api/queue/status');
|
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
|
const data = await resp.json();
|
|
|
|
if (firstLoad) {
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('content').style.display = '';
|
|
firstLoad = false;
|
|
}
|
|
|
|
// API-Format: { jobs: [{job_id, drucksache, status, duration, error}], pending, ... }
|
|
// Status-Werte: queued | running | completed | failed
|
|
const jobs = data.jobs || [];
|
|
const running = jobs.filter(j => j.status === 'running');
|
|
const queued = jobs.filter(j => j.status === 'queued' || j.status === 'pending');
|
|
const completed = jobs.filter(j => j.status === 'completed');
|
|
const failed = jobs.filter(j => j.status === 'failed');
|
|
|
|
// Statistik-Kacheln
|
|
document.getElementById('stat-running').textContent = running.length;
|
|
document.getElementById('stat-queued').textContent = queued.length || data.pending || 0;
|
|
document.getElementById('stat-completed').textContent = data.processed_total != null ? data.processed_total : completed.length;
|
|
document.getElementById('stat-failed').textContent = data.failed_total != null ? data.failed_total : failed.length;
|
|
|
|
// Konfig-Info
|
|
document.getElementById('cfg-workers').textContent = data.workers_running != null ? data.workers_running : (data.concurrency || '—');
|
|
document.getElementById('cfg-maxsize').textContent = data.max_size != null ? data.max_size : '—';
|
|
document.getElementById('cfg-avg').textContent = data.avg_job_duration_seconds != null ? data.avg_job_duration_seconds.toFixed(1) + ' s' : '—';
|
|
document.getElementById('cfg-wait').textContent = data.estimated_wait_seconds != null ? data.estimated_wait_seconds.toFixed(0) + ' s' : '—';
|
|
|
|
// Laufende Jobs
|
|
renderTable('running-rows', 'running-table', 'running-empty', running, j => `
|
|
<tr>
|
|
<td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || '—'}</td>
|
|
<td><span class="v2-admin-badge running">${j.status || 'running'}</span></td>
|
|
<td style="font-family:var(--font-mono);font-size:11px;">${fmtDuration(j.duration)}</td>
|
|
</tr>`);
|
|
|
|
// Wartende Jobs
|
|
renderTable('queued-rows', 'queued-table', 'queued-empty', queued, j => `
|
|
<tr>
|
|
<td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || '—'}</td>
|
|
<td style="font-family:var(--font-mono);font-size:10px;opacity:0.5;">${(j.job_id || '').slice(0, 8)}</td>
|
|
</tr>`);
|
|
|
|
// Abgeschlossene Jobs (recent)
|
|
renderTable('completed-rows', 'completed-table', 'completed-empty', completed, j => `
|
|
<tr>
|
|
<td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || '—'}</td>
|
|
<td><span class="v2-admin-badge done">${j.status || 'completed'}</span></td>
|
|
<td style="font-family:var(--font-mono);font-size:11px;">${fmtDuration(j.duration)}</td>
|
|
</tr>`);
|
|
|
|
// Fehlgeschlagene Jobs
|
|
renderTable('failed-rows', 'failed-table', 'failed-empty', failed, j => `
|
|
<tr>
|
|
<td style="font-family:var(--font-mono);font-size:12px;">${j.drucksache || '—'}</td>
|
|
<td style="font-size:11px;color:var(--ecg-blue);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
|
|
title="${(j.error || '').replace(/"/g,'"')}">${j.error || '—'}</td>
|
|
<td style="font-family:var(--font-mono);font-size:11px;">${fmtDuration(j.duration)}</td>
|
|
</tr>`);
|
|
|
|
document.getElementById('refresh-indicator').textContent =
|
|
'Aktualisiert ' + new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
|
|
|
} catch (e) {
|
|
if (firstLoad) {
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('error-msg').textContent = e.message;
|
|
document.getElementById('error').style.display = '';
|
|
firstLoad = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Polling-Frequenz: 15s (vorher 5s) — die Queue ändert sich pro Sekunde
|
|
// ohnehin nicht spürbar, das senkt CPU + Network ohne UX-Verlust (#183).
|
|
var _queuePollMs = 15000;
|
|
refresh();
|
|
let _queueInterval = setInterval(refresh, _queuePollMs);
|
|
// Pause-Polling wenn Tab versteckt + beim Verlassen der Page (#183).
|
|
document.addEventListener('visibilitychange', function () {
|
|
if (document.hidden) {
|
|
if (_queueInterval) { clearInterval(_queueInterval); _queueInterval = null; }
|
|
} else if (!_queueInterval) {
|
|
refresh();
|
|
_queueInterval = setInterval(refresh, _queuePollMs);
|
|
}
|
|
});
|
|
window.addEventListener('pagehide', function () {
|
|
if (_queueInterval) { clearInterval(_queueInterval); _queueInterval = null; }
|
|
});
|
|
</script>
|
|
{% endblock %}
|