Batch Run
- Launch many parallel crawler sessions using the active flow config.
+ Launch many parallel crawler sessions using a selected flow config.
-
+
+
+
+
-
+
+
+
+
+
+
+
- Configuration
+
+
+
+
@@ -398,20 +402,37 @@
-
+
+
+
+
+
+ Pending Queue
+
+
+
+ Queue is empty.
+
+
+
+
+ Live Status
No batch running.
+
+
+Run History
+
+
+
+
+
+ | # | +Started | +Config | +Workers | +Total | +Succeeded | +Failed | +Duration | +Status | +
|---|---|---|---|---|---|---|---|---|
| No batch runs yet. | ||||||||
+
+
@@ -548,7 +631,9 @@ document.querySelectorAll('.tab').forEach(tab => {
tab.classList.add('active');
document.getElementById(`tab-${tab.dataset.tab}`).classList.add('active');
if (tab.dataset.tab === 'flows') loadConfigs();
- if (tab.dataset.tab === 'batch') pollBatchStatus();
+ if (tab.dataset.tab === 'batch') { loadConfigs(); pollBatchStatus(); loadBatchHistory(); }
+ if (tab.dataset.tab === 'logs') { loadLogs(); _startLogPoll(); }
+ else _stopLogPoll();
});
});
@@ -616,6 +701,7 @@ async function loadConfigs() {
if (!res || !res.ok) return;
_configs = await res.json();
renderConfigs();
+ _refreshBatchConfigSelect();
}
function renderConfigs() {
@@ -625,11 +711,11 @@ function renderConfigs() {
return;
}
el.innerHTML = _configs.map(c => `
-
+
+ Log Viewer
+
+
+
+
+
+
+
+
+ Loading…
+
+
+
${esc(c.name)}
- ${c.is_active ? 'ACTIVE' : ''}
+ #${c.id}
- ${!c.is_active ? `` : ''}
@@ -654,9 +739,11 @@ function renderConfigs() {
`).join('');
}
-async function activateConfig(id) {
- const res = await apiFetch(`/api/flow-configs/${id}/activate`, { method: 'POST' });
- if (res && res.ok) await loadConfigs();
+function _refreshBatchConfigSelect() {
+ const sel = document.getElementById('batch-config-select');
+ const cur = sel.value;
+ sel.innerHTML = '' +
+ _configs.map(c => ``).join('');
}
async function deleteConfig(id) {
@@ -705,7 +792,6 @@ async function duplicateConfig(id) {
if (!c) return;
const body = {
name: c.name + ' (copy)',
- is_active: false,
search_texts: c.search_texts_json || [],
search_box_selector: c.search_box_selector || '',
search_box_selector_type: c.search_box_selector_type || 'css',
@@ -743,7 +829,6 @@ document.getElementById('import-file-input').addEventListener('change', async (e
try { data = JSON.parse(await file.text()); } catch { alert('Invalid JSON file'); return; }
const body = {
name: data.name || file.name.replace(/\.json$/, ''),
- is_active: false,
search_texts: data.search_texts || [],
search_box_selector: data.search_box_selector || '',
search_box_selector_type: data.search_box_selector_type || 'css',
@@ -772,7 +857,6 @@ document.getElementById('import-file-input').addEventListener('change', async (e
/* ─── Form ─── */
function _resetAdvanced() {
- document.getElementById('cfg-active').checked = false;
document.getElementById('cfg-search-sel').value = '';
document.getElementById('cfg-search-sel-type').value = 'css';
document.getElementById('cfg-submit-sel').value = '';
@@ -815,7 +899,6 @@ function openEditForm(id) {
document.getElementById('cfg-target-url').value = c.target_url || '';
document.getElementById('cfg-search-texts').value = (c.search_texts_json || []).join('\n');
document.getElementById('cfg-item-ids').value = (c.target_item_ids_json || []).join('\n');
- document.getElementById('cfg-active').checked = !!c.is_active;
document.getElementById('cfg-search-sel').value = c.search_box_selector || '';
document.getElementById('cfg-search-sel-type').value = c.search_box_selector_type || 'css';
document.getElementById('cfg-submit-sel').value = c.search_submit_selector || '';
@@ -847,7 +930,6 @@ function closeForm() {
function collectForm() {
return {
name: document.getElementById('cfg-name').value.trim(),
- is_active: document.getElementById('cfg-active').checked,
search_texts: document.getElementById('cfg-search-texts').value.split('\n').map(s => s.trim()).filter(Boolean),
search_box_selector: document.getElementById('cfg-search-sel').value.trim(),
search_box_selector_type: document.getElementById('cfg-search-sel-type').value,
@@ -939,14 +1021,16 @@ function renderBatchStatus(s) {
const idle = document.getElementById('batch-idle-msg');
const body = document.getElementById('batch-status-body');
const errEl = document.getElementById('batch-error');
- const startBtn = document.getElementById('batch-start-btn');
const stopBtn = document.getElementById('batch-stop-btn');
const badge = document.getElementById('bs-active-badge');
+ const banner = document.getElementById('bs-completion-banner');
+
+ // Always render queue
+ renderQueue(s.queue || []);
if (!s.batch_id) {
idle.style.display = '';
body.style.display = 'none';
- startBtn.style.display = '';
stopBtn.style.display = 'none';
badge.style.display = 'none';
return;
@@ -956,11 +1040,16 @@ function renderBatchStatus(s) {
body.style.display = '';
const pct = s.total ? Math.round(s.completed / s.total * 100) : 0;
+ const barColor = !s.running
+ ? (s.stopping ? 'var(--yellow)' : s.error ? 'var(--red)' : 'var(--green)')
+ : 'var(--accent)';
+ document.getElementById('batch-progress-bar').style.background = barColor;
document.getElementById('batch-progress-bar').style.width = pct + '%';
document.getElementById('batch-progress-label').textContent = `${s.completed} / ${s.total}`;
document.getElementById('bs-completed').textContent = s.completed ?? 0;
document.getElementById('bs-succeeded').textContent = s.succeeded ?? 0;
document.getElementById('bs-failed').textContent = s.failed ?? 0;
+ document.getElementById('bs-config-name').textContent = s.config_name || '–';
document.getElementById('bs-workers').textContent = s.configured_workers ?? '–';
document.getElementById('bs-started').textContent = fmtTs(s.started_at);
@@ -972,6 +1061,23 @@ function renderBatchStatus(s) {
finRow.style.display = 'none';
}
+ // Completion banner
+ if (!s.running && s.finished_at) {
+ let msg, bg, color;
+ if (s.stopping) {
+ msg = '■ Stopped'; bg = 'rgba(234,179,8,.15)'; color = 'var(--yellow)';
+ } else if (s.error) {
+ msg = '✕ Error: ' + s.error; bg = 'rgba(239,68,68,.12)'; color = 'var(--red)';
+ } else {
+ msg = `✓ Batch complete — ${s.succeeded ?? 0} succeeded, ${s.failed ?? 0} failed`;
+ bg = 'rgba(34,197,94,.12)'; color = 'var(--green)';
+ }
+ banner.textContent = msg;
+ banner.style.cssText = `display:block;border-radius:7px;padding:8px 12px;font-size:12px;font-weight:600;margin-bottom:14px;background:${bg};color:${color}`;
+ } else {
+ banner.style.display = 'none';
+ }
+
// Active worker badge
const active = s.active_workers ?? 0;
if (s.running && active > 0) {
@@ -992,7 +1098,7 @@ function renderBatchStatus(s) {
${w.slot}
${label}
${fmtDuration(w.duration_ms)}
-
+
`;
}).join('');
@@ -1004,16 +1110,52 @@ function renderBatchStatus(s) {
}
if (s.running) {
- startBtn.style.display = 'none';
stopBtn.style.display = '';
stopBtn.disabled = s.stopping || false;
stopBtn.textContent = s.stopping ? '■ Stopping…' : '■ Stop';
} else {
- startBtn.style.display = '';
stopBtn.style.display = 'none';
}
}
+function renderQueue(queue) {
+ const list = document.getElementById('queue-list');
+ const badge = document.getElementById('queue-count-badge');
+ const clearBtn = document.getElementById('queue-clear-btn');
+
+ if (!queue.length) {
+ list.innerHTML = ']*>.*?<\/div>\s*$/, s => s.replace('border-bottom:1px solid var(--border)', ''));
+}
+
+async function removeQueueItem(queueId) {
+ const res = await apiFetch(`/api/batch-queue/${queueId}`, { method: 'DELETE' });
+ if (res && res.ok) await pollBatchStatus();
+}
+
+document.getElementById('queue-clear-btn').addEventListener('click', async () => {
+ const res = await apiFetch('/api/batch-queue/clear', { method: 'POST' });
+ if (res && res.ok) await pollBatchStatus();
+});
+
async function pollBatchStatus() {
const res = await apiFetch('/api/batch-status');
if (!res || !res.ok) return;
@@ -1032,27 +1174,31 @@ function startBatchPoll() {
if (!st.running) {
clearInterval(_batchPollTimer);
_batchPollTimer = null;
+ // Delay history reload to allow the DB finish() write to complete
+ setTimeout(loadBatchHistory, 2000);
}
}, 1500);
}
document.getElementById('batch-start-btn').addEventListener('click', async () => {
+ const configId = parseInt(document.getElementById('batch-config-select').value);
+ if (!configId) { alert('Please select a flow config.'); return; }
const workers = parseInt(document.getElementById('batch-workers').value) || 3;
const runs = parseInt(document.getElementById('batch-runs').value) || 10;
const stagger = parseInt(document.getElementById('batch-stagger').value) || 0;
const headless = document.getElementById('batch-headless').checked;
- const res = await apiFetch('/api/run-batch', {
+ const res = await apiFetch('/api/batch-queue', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workers, total_runs: runs, stagger_ms: stagger, headless }),
+ body: JSON.stringify({ config_id: configId, workers, total_runs: runs, stagger_ms: stagger, headless }),
});
if (!res) return;
- if (res.status === 409) { alert('A batch is already running.'); return; }
- if (res.status === 422) { const d = await res.json(); alert(d.detail || 'No active flow config.'); return; }
- if (!res.ok) { alert('Failed to start batch.'); return; }
+ if (res.status === 404) { const d = await res.json(); alert(d.detail || 'Flow config not found.'); return; }
+ if (!res.ok) { alert('Failed to add task.'); return; }
+ const data = await res.json();
await pollBatchStatus();
startBatchPoll();
});
@@ -1067,6 +1213,115 @@ document.getElementById('batch-stop-btn').addEventListener('click', async () =>
btn.textContent = '■ Stop';
}
});
+
+/* ──────────────────────── Batch Run History ────────────────────── */
+async function loadBatchHistory() {
+ const res = await apiFetch('/api/batch-runs');
+ if (!res || !res.ok) return;
+ renderBatchHistory(await res.json());
+}
+
+/* ─────────────────────────── Logs ──────────────────────────── */
+let _logPollTimer = null;
+
+const _LEVEL_COLORS = {
+ DEBUG: '#8892a4',
+ INFO: '#6ee7b7',
+ WARNING: '#eab308',
+ ERROR: '#ef4444',
+ CRITICAL: '#f97316',
+};
+
+function _colorLine(line) {
+ for (const [lvl, col] of Object.entries(_LEVEL_COLORS)) {
+ if (line.includes(lvl)) {
+ return `${esc(line)}`;
+ }
+ }
+ return `${esc(line)}`;
+}
+
+async function loadLogs() {
+ const level = document.getElementById('log-level').value;
+ const q = document.getElementById('log-search').value;
+ const n = document.getElementById('log-n').value;
+ const params = new URLSearchParams({ n, level, q });
+ const res = await apiFetch(`/api/logs?${params}`);
+ if (!res || !res.ok) return;
+ const data = await res.json();
+ document.getElementById('log-file').textContent = data.file || '';
+ const out = document.getElementById('log-output');
+ if (!data.lines.length) {
+ out.innerHTML = 'No log entries.';
+ return;
+ }
+ out.innerHTML = data.lines.map(_colorLine).join('\n');
+}
+
+function _startLogPoll() {
+ _stopLogPoll();
+ _logPollTimer = setInterval(() => {
+ if (document.getElementById('log-tail').checked) loadLogs();
+ }, 5000);
+}
+
+function _stopLogPoll() {
+ if (_logPollTimer) { clearInterval(_logPollTimer); _logPollTimer = null; }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ document.getElementById('log-tail').addEventListener('change', e => {
+ if (e.target.checked) _startLogPoll(); else _stopLogPoll();
+ });
+ ['log-level', 'log-n'].forEach(id =>
+ document.getElementById(id).addEventListener('change', loadLogs)
+ );
+ let _debounce;
+ document.getElementById('log-search').addEventListener('input', () => {
+ clearTimeout(_debounce);
+ _debounce = setTimeout(loadLogs, 300);
+ });
+});
+
+/* ──────────────────────── Batch Run History ────────────────────── */
+function renderBatchHistory(rows) {
+ const tbody = document.getElementById('batch-history-tbody');
+ if (!rows.length) {
+ tbody.innerHTML = 'No batch runs yet.
+ ${r.batch_id.slice(0,8)}
+ ${fmtTime(r.started_at)}
+ ${configLabel}
+ ${r.workers}
+ ${r.total_runs}
+ ${r.succeeded}
+ ${r.failed}
+ ${dur}
+ ${statusLabel}
+ `;
+ }).join('');
+}
Queue is empty.
'; + badge.style.display = 'none'; + clearBtn.style.display = 'none'; + return; + } + + badge.textContent = queue.length; + badge.style.display = ''; + clearBtn.style.display = ''; + + list.innerHTML = queue.map((t, i) => ` +
+ ${i + 1}
+
+ `).join('').replace(/
+
+
+
+ ${t.workers}w · ${t.total_runs} runs · ${t.stagger_ms}ms stagger
+