/* UPCOZ Migration Console — frontend. Wired to the FastAPI backend in /backend. The mockup's simulated phase data is gone; everything reads from the real API. Visual design is the same as the original mockup with three substantive corrections: • DB is Aurora MySQL, not Postgres. • Phase names match the real pipeline (1 / 2 / 2b / 3 / 4 / 5 / 5b / 5c / 6). • Run history shows real rows, not fake script stats. */ const { useState, useEffect, useRef, useCallback } = React; /* ───────────────────────────────────────────────────────── Pipeline metadata — must stay in sync with the backend and run_incremental_pipeline.py. ───────────────────────────────────────────────────────── */ const TIERS = [ { id: '1', name: 'Tier 1', desc: 'Critical only', etaH: 5 }, { id: '2', name: 'Tier 2', desc: '+ Tags & Deposits', etaH: 5 }, { id: '3', name: 'Tier 3', desc: '+ Racing Domain', etaH: 7.5 }, { id: 'all', name: 'All', desc: 'Full pipeline', etaH: 7.5 }, ]; const TIER_LABEL = id => (TIERS.find(t => t.id === id) || {}).name || id; const TIER_DESC = id => (TIERS.find(t => t.id === id) || {}).desc || ''; /* Real phase set as run by run_incremental_pipeline.py. The "tier" column is what the orchestrator gates each phase on. */ const PHASES = [ { num: '1', label: 'New user discovery', tier: 1 }, { num: '2', label: 'New user data migration', tier: 1 }, { num: '3', label: 'Transactions + betslips', tier: 1 }, { num: '4', label: 'Wallet + bonus balances', tier: 1 }, { num: '4b', label: 'Tag + template sync', tier: 1 }, { num: '5', label: 'User status + blocks', tier: 1 }, { num: '5b', label: 'Type / category safety fix', tier: 1 }, { num: '5c', label: 'Racing domain (UI tables)', tier: 3 }, { num: '6', label: 'Final counts + SMS', tier: 1 }, ]; const SUMMARY_METRICS = [ 'Users', 'Transactions', 'Betslips', 'Wallets', 'Blocked users', 'Deposit limits', 'Tags', ]; /* ───────────────────────────────────────────────────────── API helpers ───────────────────────────────────────────────────────── */ const api = async (path, opts = {}) => { const res = await fetch(path, { credentials: 'include', headers: { 'Content-Type': 'application/json', ...(opts.headers || {}) }, ...opts, }); if (res.status === 401) { location.href = '/login'; throw new Error('Not authenticated'); } if (!res.ok) { let detail = `${res.status} ${res.statusText}`; try { const j = await res.json(); if (j.detail) detail = j.detail; } catch {} throw new Error(detail); } if (res.status === 204) return null; return res.json(); }; const fmtNum = n => (n == null ? '—' : Number(n).toLocaleString('en-AU')); const fmtDateTime = iso => { if (!iso) return '—'; const d = new Date(iso); if (isNaN(d.getTime())) return iso; const pad = n => String(n).padStart(2, '0'); return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`; }; const fmtDuration = (startIso, endIso) => { if (!startIso) return '—'; const start = new Date(startIso).getTime(); const end = endIso ? new Date(endIso).getTime() : Date.now(); const sec = Math.max(0, Math.floor((end - start) / 1000)); const h = Math.floor(sec / 3600); const m = Math.floor((sec % 3600) / 60); const s = sec % 60; if (h > 0) return `${h}h ${m}m`; if (m > 0) return `${m}m ${s}s`; return `${s}s`; }; /* ───────────────────────────────────────────────────────── UI primitives (unchanged from mockup) ───────────────────────────────────────────────────────── */ const Card = ({ title, subtitle, right, children, padded = true, style }) => (
{(title || right) && (
{title}
{subtitle &&
{subtitle}
}
{right}
)}
{children}
); const Badge = ({ kind = 'neutral', children, large = false }) => { const styles = { idle: { bg:'#e5e7eb', fg:'#374151' }, running: { bg:'var(--green)', fg:'#fff' }, complete: { bg:'var(--green)', fg:'#fff' }, failed: { bg:'var(--red)', fg:'#fff' }, stopped: { bg:'var(--text-3)', fg:'#fff' }, warnings: { bg:'var(--amber)', fg:'#fff' }, neutral: { bg:'#e5e7eb', fg:'#374151' }, }[kind] || { bg:'#e5e7eb', fg:'#374151' }; return ( {children} ); }; const Toggle = ({ checked, onChange, leftLabel, rightLabel, disabled }) => (
{leftLabel && {leftLabel}} {rightLabel && {rightLabel}}
); const TextInput = (props) => ( e.target.style.borderColor='var(--blue)'} onBlur={e => e.target.style.borderColor='var(--border-strong)'}/> ); const Select = ({ value, onChange, options, style, disabled }) => ( ); const IconBtn = ({ children, onClick, danger, title, disabled }) => ( ); /* ───────────────────────────────────────────────────────── Top header — standalone ops tool (no fake main-product nav tabs). ───────────────────────────────────────────────────────── */ const TopNav = ({ onLogout }) => (
Betcore Migrate e.target.style.display='none'}/>
Migration Console
); const StatusBanner = ({ run, lastRun }) => { const status = run ? 'running' : (lastRun ? lastRun.status : 'idle'); const meta = ({ idle: { dot:'#9ca3af', text:'Pipeline is idle. Ready to start a new run.' }, running: { dot:'#22c55e', text:'A pipeline run is in progress.' }, complete: { dot:'#16a34a', text:'Most recent run completed successfully.' }, warnings: { dot:'#f59e0b', text:'Most recent run completed with warnings.' }, failed: { dot:'#dc2626', text:'Most recent run failed. See log for details.' }, stopped: { dot:'#6b7280', text:'Most recent run was stopped manually.' }, })[status] || { dot:'#9ca3af', text:'' }; const dur = run ? fmtDuration(run.started_at) : (lastRun ? fmtDuration(lastRun.started_at, lastRun.finished_at) : ''); return (
Pipeline
Betcore → Aurora MySQL Migration
{meta.text}
{run && !run.process_paused && (
⚠ Pipeline is running — do not restart the console service (deploy.sh / systemctl restart) until this run finishes. Doing so will kill the pipeline mid-run.
)} {run && run.process_paused && (
Runner is paused (SIGSTOP): the subprocess is frozen — the live log will not advance until you press Resume.
)} {run?.started_by && (
{String(run.started_by).startsWith('schedule:') ? <>Triggered by schedule ({run.started_by.replace(/^schedule:/, '').trim()}) : <>Started by {run.started_by}}
)}
{run && (
{TIER_LABEL(run.tier)} · {run.mode} mode elapsed {dur}
)}
{status}
{run ? <>Started {fmtDateTime(run.started_at)} : (lastRun ? <>Last run · {fmtDateTime(lastRun.started_at)} · {dur} : 'No previous runs recorded')}
); }; /* ───────────────────────────────────────────────────────── Start a Run ───────────────────────────────────────────────────────── */ const StartRun = ({ mode, setMode, bankMode, setBankMode, running, procPaused, busy, onStart, onStop, onPauseProcess, onResumeProcess }) => { const fullModeWarn = mode === 'full'; return (
Mode
Full mode is for clean-DB repopulation only
setMode(v ? 'full' : 'incremental')} leftLabel="Incremental" rightLabel="Full" disabled={running || busy} />
Bank scan mode
Full reconciles all users (slow)
setBankMode(v ? 'full' : 'new_only')} leftLabel="New only" rightLabel="Full reconcile" disabled={running || busy} />
{fullModeWarn && (
⚠ Full mode pages every transaction for every user — expect ~20+ hours and only use after clearing the DB.
)}
{running ? (
Pause freezes the runner (SIGSTOP). Stop aborts with SIGTERM. Close the browser anytime — runner stays on EC2.
) : ( )}
); }; /* ───────────────────────────────────────────────────────── Scheduled runs ───────────────────────────────────────────────────────── */ const Scheduler = ({ schedules, onAdd, onRemove, busy }) => { const [time, setTime] = useState('02:00'); const [days, setDays] = useState('Daily'); const [adding, setAdding] = useState(false); const submit = async () => { setAdding(true); try { await onAdd({ time, days, tier: 'all' }); } finally { setAdding(false); } }; return (
{schedules.map(s => (
{s.time_hhmm} · {s.days}
Full pipeline (incremental), tier All {s.created_at ? <> · added {fmtDateTime(s.created_at)} : null} {s.last_run_at ? <> · last fired {fmtDateTime(s.last_run_at)} : null}
onRemove(s.id)} title="Remove" disabled={busy}>
))} {schedules.length === 0 && (
No schedules configured
)}
setTime(e.target.value)} /> onToggleSms()} style={{ marginTop:3 }} /> Send SMS when the pipeline starts / completes / fails {!smsEnabled && ( Muted — recipients stay listed but receive nothing until re-enabled. )}
{recipients.length === 0 && (
No recipients yet — add one below.
)} {recipients.map(r => (
{r.name.split(' ').map(p=>p[0]).slice(0,2).join('').toUpperCase()}
{r.name}
{r.phone}
{!r.sms_enabled && (
SMS paused for this number
)}
onRemove(r.id)} title="Remove" disabled={busy}>
))}
setName(e.target.value)} style={{ flex:1 }}/> setPhone(e.target.value)} style={{ flex:1 }}/>
); }; /* ───────────────────────────────────────────────────────── Live log (real terminal — fed by SSE or full-log fetch) ───────────────────────────────────────────────────────── */ const classifyLine = (line) => { if (/^PHASE\s/i.test(line) || /^==+/.test(line)) return 'phase'; if (/^\[?[\d:]*\]?\s*PHASE\s/i.test(line)) return 'phase'; if (/ERROR/.test(line) || /FAILED/.test(line) || /ABORTING/.test(line)) return 'error'; if (/WARN/i.test(line)) return 'warn'; if (/COMPLETE/i.test(line) || /✓|✔/.test(line) || /\bOK\b/.test(line)) return 'ok'; return 'normal'; }; const LiveLog = ({ lines, paused, setPaused, onClear, status }) => { const ref = useRef(null); useEffect(() => { if (!ref.current || paused) return; ref.current.scrollTop = ref.current.scrollHeight; }, [lines, paused]); const live = status === 'running'; return (
{live ? (paused ? 'Paused' : 'Live') : 'Idle'}
} padded={false} style={{ minHeight: 0 }} >
{lines.length === 0 && (
$ Waiting for pipeline activity…
)} {lines.map((l, i) => { const kind = l.kind || classifyLine(l.text); let color = 'var(--term-text)'; let weight = 400; if (kind === 'phase') { color = 'var(--term-cyan)'; weight = 700; } if (kind === 'error') { color = 'var(--term-red)'; weight = 600; } if (kind === 'warn') { color = 'var(--term-amber)';} if (kind === 'ok') { color = 'var(--term-green)';} return (
{l.text}
); })}
); }; /* ───────────────────────────────────────────────────────── Run Summary (before vs after) + Live DB counts ───────────────────────────────────────────────────────── */ const RunSummary = ({ run, currentCounts }) => { const hasBeforeAfter = run && run.before_counts && run.after_counts; const subtitle = hasBeforeAfter ? `Database state for the most recent completed run (${fmtDateTime(run.started_at)})` : 'No completed run yet — showing current DB state'; return ( {hasBeforeAfter ? <> : } {SUMMARY_METRICS.map(metric => { const before = hasBeforeAfter ? run.before_counts[metric] : null; const after = hasBeforeAfter ? run.after_counts[metric] : (currentCounts ? currentCounts[metric] : null); const diff = (before != null && after != null) ? Number(after) - Number(before) : null; const positive = diff != null && diff >= 0; return ( {hasBeforeAfter && ( )} {hasBeforeAfter && ( )} ); })}
MetricBefore After ChangeCurrent
{metric}{fmtNum(before)}{fmtNum(after)} {diff == null ? — : ( {diff === 0 ? '—' : (positive ? `+${fmtNum(diff)}` : fmtNum(diff))} )}
); }; /* ───────────────────────────────────────────────────────── Run history — transposed column-per-run layout with per-phase script breakdown (matching design template) ───────────────────────────────────────────────────────── */ const SCRIPT_ROWS = [ { num: '01', name: 'user-discovery', phase: '1' }, { num: '02', name: 'user-migration', phase: '2' }, { num: '4b', name: 'tags-templates', phase: '4b' }, { num: '03', name: 'txn-betslip-sync', phase: '3' }, { num: '04', name: 'balance-refresh', phase: '4' }, { num: '05', name: 'status-blocks', phase: '5' }, { num: '5b', name: 'type-category-fix', phase: '5b' }, { num: '5c', name: 'racing-domain', phase: '5c' }, { num: '06', name: 'counts-sms', phase: '6' }, ]; const runRowsTotal = (r) => { if (!r.before_counts || !r.after_counts) return null; let total = 0; for (const k of SUMMARY_METRICS) { const before = Number(r.before_counts[k]); const after = Number(r.after_counts[k]); if (Number.isFinite(before) && Number.isFinite(after)) { total += Math.abs(after - before); } } return total > 0 ? total : 0; }; const runWarnings = (r) => { if (r.status === 'warnings') return r.exit_code != null ? Math.max(1, Math.abs(r.exit_code)) : 1; return 0; }; const runErrors = (r) => { if (r.status === 'failed') return r.exit_code != null ? Math.max(1, Math.abs(r.exit_code)) : 1; return 0; }; const RunHistory = ({ runs, onView }) => { const cell = { padding: '12px 14px', borderBottom: '1px solid var(--border)', whiteSpace: 'nowrap' }; const labelCell = { ...cell, position:'sticky', left:0, background:'#fff', fontWeight:600, color:'var(--text-2)', fontSize:12, textTransform:'uppercase', letterSpacing:.5, borderRight:'1px solid var(--border)', zIndex:1 }; const dataCell = { ...cell, textAlign:'right', fontVariantNumeric:'tabular-nums' }; const dateLine = (iso) => { const d = new Date(iso); if (isNaN(d.getTime())) return
{iso}
; const pad = n => String(n).padStart(2,'0'); const date = `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()}`; const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`; return (
{date}
{time}
); }; const statusBadge = (s) => ( {s === 'complete' && '✓'} {s === 'failed' && '✗'} {s === 'warnings' && '!'} {s === 'stopped' && '■'} {s === 'running' && '●'}  {s === 'complete' ? 'Complete' : s === 'failed' ? 'Failed' : s === 'warnings' ? 'Warnings' : s === 'stopped' ? 'Stopped' : s === 'running' ? 'Running' : s} ); if (runs.length === 0) { return (
No runs yet — start one from the Start a run card above.
); } return (
{runs.map(r => ( ))} {runs.map(r => )} {runs.map(r => ( ))} {runs.map(r => )} {runs.map(r => { const total = runRowsTotal(r); return ( ); })} {runs.map(r => { const w = runWarnings(r); return ( ); })} {runs.map(r => { const e = runErrors(r); return ( ); })} {runs.map(r => )} {/* Scripts / phases section header */} {SCRIPT_ROWS.map(s => ( {runs.map(r => { const tierNum = r.tier === 'all' ? 99 : parseInt(r.tier, 10) || 1; const isRacing = s.phase === '5c'; const skippedRacing = isRacing && r.skip_racing; const ps = r.phase_stats && r.phase_stats[s.phase]; const rowHint = ps && ps.rows ? ps.rows : null; const durHint = ps && ps.duration ? ps.duration : null; if (skippedRacing) { return ( ); } if (isRacing && tierNum < 3) { return ; } const isFailed = r.status === 'failed'; const isWarn = r.status === 'warnings'; const tint = isFailed ? 'var(--red)' : isWarn ? 'var(--amber)' : 'var(--green)'; const icon = isFailed ? '✗' : isWarn ? '!' : '✓'; return ( ); })} ))} {runs.map(r => ( ))}
Run {dateLine(r.started_at)}
Status{statusBadge(r.status)}
Tier
{TIER_LABEL(r.tier)}
{TIER_DESC(r.tier)}
Duration{fmtDuration(r.started_at, r.finished_at)}
Summary activity total
{total != null ? fmtNum(total) : '—'}
Official net movement in the database for this run (before → after). Smaller numbers in “Scripts” logs do not mean failure — they measure different steps (see Scripts note).
Warnings 0 ? 'var(--amber-text)' : 'var(--text-3)', fontWeight: w > 0 ? 600 : 400 }}>{w}
Errors 0 ? 'var(--red-text)' : 'var(--text-3)', fontWeight: e > 0 ? 600 : 400 }}>{e}
Started by{r.started_by || '—'}
Scripts
For managers: the green check is what matters — it means that phase finished without aborting the pipeline. The text beside each script comes from engineering logs (counts of “walked” users or queued inserts); those totals often differ from the summary table above. That mismatch is normal and is not missing data unless Status shows Failed. Where shown, “Net DB change … matches summary card” is the plain-English reconciliation with the table.
{s.num} {s.name}
skipped —
Log detail
{rowHint || '—'}
Duration
{durHint || '—'}
{icon}
); }; /* ───────────────────────────────────────────────────────── Toast / error banner ───────────────────────────────────────────────────────── */ const Toast = ({ msg, kind = 'error', onClose }) => { if (!msg) return null; const colors = { error: { bg: '#fee2e2', fg: '#991b1b', border: '#fca5a5' }, info: { bg: '#eff6ff', fg: '#1d4ed8', border: '#93c5fd' }, ok: { bg: '#dcfce7', fg: '#166534', border: '#86efac' }, }[kind]; return (
{msg}
); }; /* ───────────────────────────────────────────────────────── App ───────────────────────────────────────────────────────── */ const App = () => { // Run config (form state — tier is always 'all', no skip-racing) const [mode, setMode] = useState('incremental'); const [bankMode, setBankMode] = useState('new_only'); // Live state const [currentRun, setCurrentRun] = useState(null); const [history, setHistory] = useState([]); const [counts, setCounts] = useState(null); const [recipients, setRecipients] = useState([]); const [schedules, setSchedules] = useState([]); // Log buffer const [lines, setLines] = useState([]); const [paused, setPaused] = useState(false); const [viewingLogOf, setViewingLogOf] = useState(null); // null = current/latest; else a run object // Misc const [busy, setBusy] = useState(false); const [toast, setToast] = useState(null); const [smsEnabled, setSmsEnabled] = useState(true); const [smsBusy, setSmsBusy] = useState(false); const [recipientSmsBusyId, setRecipientSmsBusyId] = useState(null); const esRef = useRef(null); const showError = (msg) => setToast({ kind:'error', msg }); const showInfo = (msg) => setToast({ kind:'info', msg }); // ---- Data loaders ---------------------------------------------------- const refreshStatus = useCallback(async () => { try { const s = await api('/api/status'); setCurrentRun(s.current_run); } catch (e) { /* ignore — toast already handled by api wrapper */ } }, []); const refreshHistory = useCallback(async () => { try { const r = await api('/api/runs?limit=20'); setHistory(r.runs); } catch {} }, []); const refreshCounts = useCallback(async () => { try { const r = await api('/api/db-counts'); setCounts(r.counts); } catch {} }, []); const refreshRecipients = useCallback(async () => { try { const r = await api('/api/recipients'); setRecipients(r.recipients); } catch {} }, []); const refreshSchedules = useCallback(async () => { try { const r = await api('/api/schedules'); setSchedules(r.schedules); } catch {} }, []); const refreshAll = useCallback(async () => { await Promise.all([refreshStatus(), refreshHistory(), refreshRecipients(), refreshSchedules()]); }, [refreshStatus, refreshHistory, refreshRecipients, refreshSchedules]); // Initial load + DB counts (counts are slow so do them separately) useEffect(() => { refreshAll(); refreshCounts(); }, [refreshAll, refreshCounts]); useEffect(() => { api('/api/settings') .then((s) => setSmsEnabled(!!s.sms_notifications_enabled)) .catch(() => {}); }, []); // Keep log viewer's selected run in sync with poll (status / finished_at) without needless rerenders. useEffect(() => { setViewingLogOf((prev) => { if (!prev?.id) return prev; const fresh = history.find((h) => h.id === prev.id); if (!fresh) return prev; if (fresh.status !== prev.status || fresh.finished_at !== prev.finished_at) return fresh; return prev; }); }, [history]); // Periodic poll of status + history (cheap) every 6 s useEffect(() => { const t = setInterval(() => { refreshStatus(); refreshHistory(); }, 6000); return () => clearInterval(t); }, [refreshStatus, refreshHistory]); // ---- SSE log streaming ---------------------------------------------- const closeStream = useCallback(() => { if (esRef.current) { esRef.current.close(); esRef.current = null; } }, []); useEffect(() => { closeStream(); const target = viewingLogOf || currentRun; if (!target) return; if (target.status !== 'running') { setLines([]); fetch(`/api/runs/${target.id}/log`, { credentials:'include' }) .then(r => r.text()) .then(text => { const ls = text.split('\n').filter(l => l.length).map(t => ({ text: t })); setLines(ls); }) .catch(e => showError(`Could not fetch log: ${e.message}`)); return undefined; } setLines([]); let reconnectTimer = null; let cancelled = false; const connect = () => { if (cancelled) return; closeStream(); const es = new EventSource(`/api/runs/${target.id}/stream`); esRef.current = es; es.onmessage = (e) => { try { const data = JSON.parse(e.data); if (data.text != null) { setLines(prev => [...prev.slice(-2999), { text: data.text }]); } } catch {} }; es.addEventListener('end', () => { cancelled = true; if (reconnectTimer) clearTimeout(reconnectTimer); refreshStatus(); refreshHistory(); refreshCounts(); closeStream(); }); es.onerror = () => { if (cancelled) return; try { es.close(); } catch {} if (cancelled) return; reconnectTimer = setTimeout(connect, 2500); }; }; connect(); return () => { cancelled = true; if (reconnectTimer) clearTimeout(reconnectTimer); closeStream(); }; }, [ currentRun?.id, currentRun?.status, viewingLogOf?.id, viewingLogOf?.status, closeStream, refreshStatus, refreshHistory, refreshCounts, ]); // ---- Actions -------------------------------------------------------- const onStart = async () => { setBusy(true); try { const run = await api('/api/runs', { method: 'POST', body: JSON.stringify({ tier: 'all', mode, bank_mode: bankMode, skip_racing: false }), }); setCurrentRun(run); setViewingLogOf(null); setLines([]); showInfo(`Pipeline started — Run #${run.id}`); refreshHistory(); } catch (e) { showError(`Could not start: ${e.message}`); } finally { setBusy(false); } }; const onStop = async () => { if (!currentRun) return; if (!confirm('Stop the running pipeline with SIGTERM? You can start again later.')) return; setBusy(true); try { await api(`/api/runs/${currentRun.id}/stop`, { method: 'POST' }); showInfo('Stop signal sent'); } catch (e) { showError(`Could not stop: ${e.message}`); } finally { setBusy(false); } }; const onPauseProcess = async () => { if (!currentRun) return; setBusy(true); try { await api(`/api/runs/${currentRun.id}/pause`, { method: 'POST' }); showInfo('Pause sent — runner frozen with SIGSTOP'); await refreshStatus(); } catch (e) { showError(`Could not pause: ${e.message}`); } finally { setBusy(false); } }; const onResumeProcess = async () => { if (!currentRun) return; setBusy(true); try { await api(`/api/runs/${currentRun.id}/resume`, { method: 'POST' }); showInfo('Resume sent — SIGCONT'); await refreshStatus(); } catch (e) { showError(`Could not resume: ${e.message}`); } finally { setBusy(false); } }; const onAddRecipient = async ({ name, phone }) => { try { await api('/api/recipients', { method:'POST', body: JSON.stringify({ name, phone }) }); refreshRecipients(); } catch (e) { showError(`Could not add: ${e.message}`); throw e; } }; const onRemoveRecipient = async (rid) => { if (!confirm('Remove this recipient?')) return; try { await api(`/api/recipients/${rid}`, { method:'DELETE' }); refreshRecipients(); } catch (e) { showError(`Could not remove: ${e.message}`); } }; const onToggleSmsNotifications = async () => { setSmsBusy(true); try { const s = await api('/api/settings', { method: 'PATCH', body: JSON.stringify({ sms_notifications_enabled: !smsEnabled }), }); setSmsEnabled(!!s.sms_notifications_enabled); showInfo( s.sms_notifications_enabled ? 'SMS alerts enabled for manual and scheduled runs' : 'SMS muted — pipeline still runs; nobody is paged until you turn this back on', ); } catch (e) { showError(`Could not update SMS setting: ${e.message}`); } finally { setSmsBusy(false); } }; const onPatchRecipientSms = async (rid, enabled) => { setRecipientSmsBusyId(rid); try { await api(`/api/recipients/${rid}`, { method: 'PATCH', body: JSON.stringify({ sms_enabled: enabled }), }); await refreshRecipients(); showInfo(enabled ? 'Recipient will receive pipeline SMS' : 'Recipient muted — others unchanged'); } catch (e) { showError(`Could not update recipient: ${e.message}`); } finally { setRecipientSmsBusyId(null); } }; const onAddSchedule = async ({ time, days, tier }) => { try { await api('/api/schedules', { method:'POST', body: JSON.stringify({ time, days, tier }) }); refreshSchedules(); } catch (e) { showError(`Could not add: ${e.message}`); throw e; } }; const onRemoveSchedule = async (sid) => { if (!confirm('Remove this schedule?')) return; try { await api(`/api/schedules/${sid}`, { method:'DELETE' }); refreshSchedules(); } catch (e) { showError(`Could not remove: ${e.message}`); } }; const onLogout = async () => { try { await api('/api/auth/logout', { method:'POST' }); } catch {} location.href = '/login'; }; const onViewLog = (run) => { setViewingLogOf(run); requestAnimationFrame(() => { document.getElementById('live-log-anchor')?.scrollIntoView({ behavior: 'smooth', block: 'nearest', }); }); }; const onCloseViewLog = () => { setViewingLogOf(null); }; // Find the most recent finished run for the summary card const lastRun = history.find(r => r.status !== 'running') || null; const summaryRun = lastRun; const showingHistoricalLog = !!viewingLogOf && viewingLogOf.id !== currentRun?.id; const logSubject = viewingLogOf || currentRun; const streamActive = !!(logSubject && logSubject.status === 'running'); return (

Migration Console

Legacy → Aurora MySQL · runner v2.14.4
{showingHistoricalLog && (
Saved log for run #{viewingLogOf.id} ({fmtDateTime(viewingLogOf.started_at)}). This pane follows whichever run you chose — not necessarily the currently running job. {currentRun && viewingLogOf.id !== currentRun.id && ( Another run may be live; press Back to live to attach to run #{currentRun.id}. )}
)} setLines([])} status={streamActive ? 'running' : 'idle'} />
Betcore Migrate · build 2026.05.15 · runner connected to migrate.upcoz.internal
setToast(null)}/>
); }; /* On boot, check auth status. If not authed, bounce to /login. */ (async () => { try { const s = await fetch('/api/auth/status', { credentials:'include' }).then(r => r.json()); if (!s.authed) { location.href = '/login'; return; } if (!s.password_set) { document.getElementById('root').innerHTML = '
' + '

Console password not set

' + '

Run python3 -m backend.set_password on the server, then refresh.

'; return; } ReactDOM.createRoot(document.getElementById('root')).render(); } catch (e) { document.getElementById('root').innerHTML = '
' + 'Could not contact backend. Is the console service running?
'; } })();