rmancinasandClaude Opus 5
66d0d071b0
A REIMPORT takes ~110 seconds and, until now, showed only a scrolling log — there was no way to tell "halfway" from "wedged", which mattered the day one actually did wedge. run_all.py emits "[paso i/N] name" before each step and the API derives progress from the job log. Emitting the marker from the Python rather than having the UI count STEPS itself means the step count is stated in exactly one place; adding a step cannot desync the display. Progress is derived, not stored, for the same reason: the log is already the record of what happened, and a separate counter could contradict it, which is precisely the confusion a progress display exists to remove. While RUNNING, step i is IN PROGRESS rather than finished, so only i-1 count as done. Counting i would show 100% while the final step was still working — and the final step (blob_extract) is the slowest, so the bar would sit at "100%" for the longest stretch of the job. BACKUP and RESTORE are a single mysqldump with no steps and deliberately render no bar; a fabricated percentage would be worse than none. The safety backup that precedes a REIMPORT is likewise named explicitly instead of showing 0%, which reads as stuck. Pinned by job-progress.spec.ts, including the literal line run_all.py emits, so a change to the Python format fails a test rather than silently blanking the panel. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
770 lines
25 KiB
TypeScript
770 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { Fragment, useCallback, useEffect, useRef, useState } from "react";
|
|
import { AppShell } from "@/components/AppShell";
|
|
import { useCan } from "@/lib/abilities";
|
|
import {
|
|
OPS_KIND_LABELS,
|
|
OPS_STATUS_LABELS,
|
|
formatBytes,
|
|
formatDateTime,
|
|
} from "@/lib/labels";
|
|
import {
|
|
backupDownloadUrl,
|
|
deleteBackup,
|
|
deleteIngest,
|
|
getOpsJob,
|
|
getReplicationStatus,
|
|
listBackups,
|
|
listIngest,
|
|
listOpsJobs,
|
|
startOpsJob,
|
|
uploadIngest,
|
|
} from "@/lib/api";
|
|
import type { UploadProgress } from "@/lib/api";
|
|
import type {
|
|
BackupFile,
|
|
IngestFile,
|
|
OpsJob,
|
|
OpsJobKind,
|
|
ReplicationStatus,
|
|
} from "@/lib/types";
|
|
|
|
const INGEST_MAX_BYTES = 2 * 1024 * 1024 * 1024;
|
|
|
|
export default function OperacionesPage() {
|
|
return (
|
|
<AppShell>
|
|
<Operaciones />
|
|
</AppShell>
|
|
);
|
|
}
|
|
|
|
type ConfirmState =
|
|
| { kind: "REIMPORT" }
|
|
| { kind: "SYNC" }
|
|
| { kind: "RESTORE"; file: string }
|
|
| null;
|
|
|
|
function Operaciones() {
|
|
const allowed = useCan("db:manage");
|
|
|
|
const [ingest, setIngest] = useState<IngestFile[] | null>(null);
|
|
const [backups, setBackups] = useState<BackupFile[] | null>(null);
|
|
const [jobs, setJobs] = useState<OpsJob[] | null>(null);
|
|
const [activeJob, setActiveJob] = useState<OpsJob | null>(null);
|
|
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [notice, setNotice] = useState<string | null>(null);
|
|
const [confirm, setConfirm] = useState<ConfirmState>(null);
|
|
const [confirmText, setConfirmText] = useState("");
|
|
const [uploading, setUploading] = useState<string | null>(null);
|
|
const [progress, setProgress] = useState<UploadProgress | null>(null);
|
|
const [starting, setStarting] = useState(false);
|
|
|
|
const fileInputs = useRef<Record<string, HTMLInputElement | null>>({});
|
|
|
|
const refreshLists = useCallback(() => {
|
|
listIngest().then(setIngest).catch(() => setIngest([]));
|
|
listBackups().then(setBackups).catch(() => setBackups([]));
|
|
listOpsJobs()
|
|
.then((rows) => {
|
|
setJobs(rows);
|
|
const running = rows.find((j) => j.status === "RUNNING");
|
|
if (running) setActiveJob(running);
|
|
})
|
|
.catch(() => setJobs([]));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (allowed) refreshLists();
|
|
}, [allowed, refreshLists]);
|
|
|
|
// Poll the active job while it runs; refresh everything when it finishes.
|
|
useEffect(() => {
|
|
if (!activeJob || activeJob.status !== "RUNNING") return;
|
|
const id = activeJob.id;
|
|
const timer = setInterval(() => {
|
|
getOpsJob(id)
|
|
.then((job) => {
|
|
setActiveJob(job);
|
|
if (job.status !== "RUNNING") {
|
|
clearInterval(timer);
|
|
refreshLists();
|
|
setNotice(
|
|
job.status === "SUCCESS"
|
|
? `${OPS_KIND_LABELS[job.kind]} completada.`
|
|
: `${OPS_KIND_LABELS[job.kind]} terminó con error. Revise el registro.`,
|
|
);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
/* transient — keep polling */
|
|
});
|
|
}, 1500);
|
|
return () => clearInterval(timer);
|
|
}, [activeJob, refreshLists]);
|
|
|
|
if (!allowed) {
|
|
return (
|
|
<div className="page-head">
|
|
<h1 className="page-title">Operaciones</h1>
|
|
<div className="state-box state-error">
|
|
No tiene permisos para administrar la base de datos.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const jobRunning = activeJob?.status === "RUNNING";
|
|
|
|
async function handleUpload(name: string, file: File | undefined) {
|
|
if (!file) return;
|
|
setError(null);
|
|
setNotice(null);
|
|
setUploading(name);
|
|
setProgress(null);
|
|
try {
|
|
await uploadIngest(name, file, setProgress);
|
|
setNotice(`${name} cargado.`);
|
|
refreshLists();
|
|
} catch (e) {
|
|
setError((e as Error)?.message ?? "No se pudo cargar el archivo.");
|
|
} finally {
|
|
setUploading(null);
|
|
setProgress(null);
|
|
const input = fileInputs.current[name];
|
|
if (input) input.value = "";
|
|
}
|
|
}
|
|
|
|
async function handleDeleteIngest(name: string) {
|
|
setError(null);
|
|
try {
|
|
await deleteIngest(name);
|
|
refreshLists();
|
|
} catch (e) {
|
|
setError((e as Error)?.message ?? "No se pudo eliminar.");
|
|
}
|
|
}
|
|
|
|
async function handleDeleteBackup(name: string) {
|
|
setError(null);
|
|
try {
|
|
await deleteBackup(name);
|
|
refreshLists();
|
|
} catch (e) {
|
|
setError((e as Error)?.message ?? "No se pudo eliminar el respaldo.");
|
|
}
|
|
}
|
|
|
|
async function start(kind: OpsJobKind, file?: string) {
|
|
setError(null);
|
|
setNotice(null);
|
|
setStarting(true);
|
|
try {
|
|
const job = await startOpsJob(kind, file);
|
|
setActiveJob(job);
|
|
setJobs((prev) => (prev ? [job, ...prev] : [job]));
|
|
} catch (e) {
|
|
setError((e as Error)?.message ?? "No se pudo iniciar la operación.");
|
|
} finally {
|
|
setStarting(false);
|
|
}
|
|
}
|
|
|
|
function askConfirm(state: ConfirmState) {
|
|
setConfirm(state);
|
|
setConfirmText("");
|
|
setError(null);
|
|
setNotice(null);
|
|
}
|
|
|
|
async function runConfirmed() {
|
|
if (!confirm) return;
|
|
const c = confirm;
|
|
setConfirm(null);
|
|
if (c.kind === "REIMPORT") await start("REIMPORT");
|
|
else if (c.kind === "SYNC") await start("SYNC");
|
|
else await start("RESTORE", c.file);
|
|
}
|
|
|
|
const ingestReady = (ingest ?? []).every((f) => f.present);
|
|
|
|
return (
|
|
<>
|
|
<div className="page-head">
|
|
<h1 className="page-title">Operaciones de base de datos</h1>
|
|
</div>
|
|
|
|
{error && <div className="state-box state-error">{error}</div>}
|
|
{notice && <div className="state-box">{notice}</div>}
|
|
|
|
{/* Active / running job with live log */}
|
|
{activeJob && (
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<div className="row-actions" style={{ justifyContent: "space-between" }}>
|
|
<h2 className="section-title" style={{ margin: 0 }}>
|
|
{OPS_KIND_LABELS[activeJob.kind]}{" "}
|
|
<span
|
|
className={`badge ${
|
|
activeJob.status === "SUCCESS"
|
|
? "badge-positive"
|
|
: activeJob.status === "FAILED"
|
|
? "badge-negative"
|
|
: "badge-neutral"
|
|
}`}
|
|
>
|
|
{jobRunning && <span className="spinner" aria-hidden style={{ marginRight: 6 }} />}
|
|
{OPS_STATUS_LABELS[activeJob.status]}
|
|
</span>
|
|
</h2>
|
|
{!jobRunning && (
|
|
<button className="btn btn-ghost" type="button" onClick={() => setActiveJob(null)}>
|
|
Ocultar
|
|
</button>
|
|
)}
|
|
</div>
|
|
<JobProgressBar job={activeJob} />
|
|
<pre className="ops-log">{activeJob.log || "Iniciando…"}</pre>
|
|
</div>
|
|
)}
|
|
|
|
<ReplicationCard />
|
|
|
|
{/* Ingest folder */}
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<h2 className="section-title">Carpeta de ingesta</h2>
|
|
<p className="inline-form-note">
|
|
Los cuatro archivos originales de Access. La reimportación y la
|
|
sincronización leen de aquí. Tamaño máximo por archivo: {formatBytes(INGEST_MAX_BYTES)}.
|
|
</p>
|
|
<div className="tx-scroll">
|
|
<table className="tx-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Archivo</th>
|
|
<th>Estado</th>
|
|
<th className="num">Tamaño</th>
|
|
<th>Modificado</th>
|
|
<th className="num">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(ingest ?? []).map((f) => (
|
|
<Fragment key={f.name}>
|
|
<tr>
|
|
<td className="mono">{f.name}</td>
|
|
<td>
|
|
<span className={`badge ${f.present ? "badge-positive" : "badge-negative"}`}>
|
|
{f.present ? "Presente" : "Falta"}
|
|
</span>
|
|
</td>
|
|
<td className="num">{formatBytes(f.size)}</td>
|
|
<td>{formatDateTime(f.modifiedAt)}</td>
|
|
<td>
|
|
<div className="row-actions">
|
|
<input
|
|
ref={(el) => {
|
|
fileInputs.current[f.name] = el;
|
|
}}
|
|
type="file"
|
|
style={{ display: "none" }}
|
|
onChange={(e) => handleUpload(f.name, e.target.files?.[0])}
|
|
/>
|
|
<button
|
|
className="btn btn-outline"
|
|
type="button"
|
|
disabled={uploading === f.name}
|
|
onClick={() => fileInputs.current[f.name]?.click()}
|
|
>
|
|
{uploading === f.name ? "Cargando…" : f.present ? "Reemplazar" : "Cargar"}
|
|
</button>
|
|
{f.present && (
|
|
<button
|
|
className="btn btn-ghost"
|
|
type="button"
|
|
disabled={uploading === f.name}
|
|
onClick={() => handleDeleteIngest(f.name)}
|
|
>
|
|
Eliminar
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{uploading === f.name && (
|
|
<tr>
|
|
<td colSpan={5}>
|
|
<UploadProgressBar progress={progress} />
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Operations */}
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<h2 className="section-title">Operaciones</h2>
|
|
<div className="form-grid">
|
|
<OpTile
|
|
title="Respaldo"
|
|
desc="Genera un volcado comprimido de la base de datos actual."
|
|
action="Crear respaldo"
|
|
tone="primary"
|
|
disabled={jobRunning || starting}
|
|
onClick={() => start("BACKUP")}
|
|
/>
|
|
<OpTile
|
|
title="Reimportar (purga)"
|
|
desc="Respalda, borra TODO y reconstruye desde los archivos de ingesta. Se pierden los datos capturados manualmente."
|
|
action="Reimportar"
|
|
tone="danger"
|
|
disabled={jobRunning || starting || !ingestReady}
|
|
onClick={() => askConfirm({ kind: "REIMPORT" })}
|
|
/>
|
|
<OpTile
|
|
title="Sincronizar"
|
|
desc="Respalda, luego importa lo nuevo del legado. Borra del sistema los registros del legado que ya no aparecen en los archivos de ingesta. Se conservan los datos capturados a mano."
|
|
action="Sincronizar"
|
|
tone="primary"
|
|
disabled={jobRunning || starting || !ingestReady}
|
|
onClick={() => askConfirm({ kind: "SYNC" })}
|
|
/>
|
|
</div>
|
|
{!ingestReady && (
|
|
<p className="inline-form-note" style={{ marginTop: 12 }}>
|
|
La reimportación requiere que los cuatro archivos estén presentes.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Backups */}
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<h2 className="section-title">Respaldos</h2>
|
|
<p className="inline-form-note">
|
|
Restaurar sobreescribe la base de datos completa con el respaldo elegido.
|
|
</p>
|
|
<div className="tx-scroll">
|
|
<table className="tx-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Archivo</th>
|
|
<th className="num">Tamaño</th>
|
|
<th>Creado</th>
|
|
<th className="num">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{backups === null ? (
|
|
<tr>
|
|
<td colSpan={4}>
|
|
<span className="spinner" aria-label="Cargando" />
|
|
</td>
|
|
</tr>
|
|
) : backups.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={4} className="muted">
|
|
Sin respaldos.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
backups.map((b) => (
|
|
<tr key={b.name}>
|
|
<td className="mono">{b.name}</td>
|
|
<td className="num">{formatBytes(b.size)}</td>
|
|
<td>{formatDateTime(b.createdAt)}</td>
|
|
<td>
|
|
<div className="row-actions">
|
|
<a className="btn btn-outline" href={backupDownloadUrl(b.name)}>
|
|
Descargar
|
|
</a>
|
|
<button
|
|
className="btn btn-outline"
|
|
type="button"
|
|
disabled={jobRunning || starting}
|
|
onClick={() => askConfirm({ kind: "RESTORE", file: b.name })}
|
|
>
|
|
Restaurar
|
|
</button>
|
|
<button
|
|
className="btn btn-ghost"
|
|
type="button"
|
|
onClick={() => handleDeleteBackup(b.name)}
|
|
>
|
|
Eliminar
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recent jobs */}
|
|
<div className="card" style={{ padding: 20 }}>
|
|
<h2 className="section-title">Historial</h2>
|
|
<div className="tx-scroll">
|
|
<table className="tx-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Operación</th>
|
|
<th>Estado</th>
|
|
<th>Inicio</th>
|
|
<th>Fin</th>
|
|
<th className="num"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{(jobs ?? []).map((j) => (
|
|
<tr key={j.id}>
|
|
<td>{OPS_KIND_LABELS[j.kind]}</td>
|
|
<td>
|
|
<span
|
|
className={`badge ${
|
|
j.status === "SUCCESS"
|
|
? "badge-positive"
|
|
: j.status === "FAILED"
|
|
? "badge-negative"
|
|
: "badge-neutral"
|
|
}`}
|
|
>
|
|
{OPS_STATUS_LABELS[j.status]}
|
|
</span>
|
|
</td>
|
|
<td>{formatDateTime(j.startedAt)}</td>
|
|
<td>{formatDateTime(j.finishedAt)}</td>
|
|
<td className="num">
|
|
<button
|
|
className="btn btn-ghost"
|
|
type="button"
|
|
onClick={() => setActiveJob(j)}
|
|
>
|
|
Ver registro
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
{jobs && jobs.length === 0 && (
|
|
<tr>
|
|
<td colSpan={5} className="muted">
|
|
Sin operaciones registradas.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Destructive-op confirm */}
|
|
{confirm && (
|
|
<div className="modal-backdrop" role="dialog" aria-modal="true">
|
|
<div className="card" style={{ padding: 24, maxWidth: 480 }}>
|
|
<h2 className="section-title" style={{ marginTop: 0 }}>
|
|
{confirm.kind === "REIMPORT"
|
|
? "Confirmar reimportación"
|
|
: confirm.kind === "SYNC"
|
|
? "Confirmar sincronización"
|
|
: "Confirmar restauración"}
|
|
</h2>
|
|
<p className="inline-form-note">
|
|
{confirm.kind === "REIMPORT"
|
|
? "Esto BORRA todos los datos actuales (incluidos los capturados a mano) y reconstruye desde los archivos de ingesta. Se creará un respaldo previo automático."
|
|
: confirm.kind === "SYNC"
|
|
? "Se creará un respaldo previo automático. Luego se importarán al sistema los registros nuevos del legado y se eliminarán los del legado que ya no aparezcan en los archivos de ingesta. Los datos capturados a mano NO se borran."
|
|
: `Esto sobreescribe la base de datos completa con “${confirm.file}”. Se recomienda crear un respaldo antes.`}
|
|
</p>
|
|
<label className="field">
|
|
<span className="field-label">Escriba CONFIRMAR para continuar</span>
|
|
<input
|
|
className="input"
|
|
value={confirmText}
|
|
onChange={(e) => setConfirmText(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</label>
|
|
<div className="form-actions">
|
|
<button
|
|
className={confirm.kind === "SYNC" ? "btn btn-primary" : "btn btn-danger"}
|
|
type="button"
|
|
disabled={confirmText !== "CONFIRMAR" || starting}
|
|
onClick={runConfirmed}
|
|
>
|
|
{confirm.kind === "REIMPORT"
|
|
? "Reimportar"
|
|
: confirm.kind === "SYNC"
|
|
? "Sincronizar"
|
|
: "Restaurar"}
|
|
</button>
|
|
<button className="btn btn-outline" type="button" onClick={() => setConfirm(null)}>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/** "1:05" / "0:09" — remaining time, coarse on purpose. */
|
|
function formatEta(seconds: number): string {
|
|
const s = Math.max(0, Math.round(seconds));
|
|
if (s >= 3600) {
|
|
const h = Math.floor(s / 3600);
|
|
const m = Math.round((s % 3600) / 60);
|
|
return `${h} h ${m} min`;
|
|
}
|
|
return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
|
|
}
|
|
|
|
/**
|
|
* Live upload readout. The bar tracks bytes handed to the network; once those
|
|
* are all sent the server still has to write the file, so the tail of the
|
|
* upload reads "Procesando…" instead of sitting at 100%.
|
|
*/
|
|
function UploadProgressBar({ progress }: { progress: UploadProgress | null }) {
|
|
const pct = progress?.fraction != null ? Math.round(progress.fraction * 100) : null;
|
|
return (
|
|
<div className="upload-progress">
|
|
<div
|
|
className={`progress-track${pct === null ? " progress-indeterminate" : ""}`}
|
|
role="progressbar"
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
aria-valuenow={pct ?? undefined}
|
|
>
|
|
<div className="progress-fill" style={{ width: `${pct ?? 100}%` }} />
|
|
</div>
|
|
<div className="upload-progress-stats mono">
|
|
{progress === null ? (
|
|
"Preparando…"
|
|
) : progress.finishing ? (
|
|
`Procesando en el servidor… (${formatBytes(progress.total)} enviados)`
|
|
) : (
|
|
<>
|
|
{pct !== null && <strong>{pct}%</strong>}
|
|
{progress.total > 0 && (
|
|
<span>
|
|
{formatBytes(progress.loaded)} / {formatBytes(progress.total)}
|
|
</span>
|
|
)}
|
|
{progress.bytesPerSecond > 0 && (
|
|
<span>{formatBytes(progress.bytesPerSecond)}/s</span>
|
|
)}
|
|
{progress.secondsRemaining !== null && progress.bytesPerSecond > 0 && (
|
|
<span>faltan {formatEta(progress.secondsRemaining)}</span>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OpTile({
|
|
title,
|
|
desc,
|
|
action,
|
|
tone,
|
|
disabled,
|
|
onClick,
|
|
}: {
|
|
title: string;
|
|
desc: string;
|
|
action: string;
|
|
tone: "primary" | "danger" | "muted";
|
|
disabled: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
const btnClass =
|
|
tone === "danger" ? "btn btn-danger" : tone === "muted" ? "btn btn-outline" : "btn btn-primary";
|
|
return (
|
|
<div className="card" style={{ padding: 16 }}>
|
|
<h3 className="section-title" style={{ fontSize: 15, margin: "0 0 4px" }}>
|
|
{title}
|
|
</h3>
|
|
<p className="inline-form-note" style={{ minHeight: 48 }}>
|
|
{desc}
|
|
</p>
|
|
<button className={btnClass} type="button" disabled={disabled} onClick={onClick}>
|
|
{action}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Health of the read replica behind my.jorgecuadros.com.
|
|
*
|
|
* Worth a panel because the failure mode is silent: a replica whose SQL thread
|
|
* has stopped keeps answering queries, just with data frozen at the moment it
|
|
* stopped. Nothing on the customer site looks wrong — the balances are simply
|
|
* out of date — so without this the only signal is a customer complaining.
|
|
*/
|
|
function ReplicationCard() {
|
|
const [status, setStatus] = useState<ReplicationStatus | null>(null);
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
const load = useCallback(() => {
|
|
getReplicationStatus()
|
|
.then((s) => {
|
|
setStatus(s);
|
|
setFailed(false);
|
|
})
|
|
.catch(() => setFailed(true));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
const t = setInterval(load, 30_000);
|
|
return () => clearInterval(t);
|
|
}, [load]);
|
|
|
|
// Not configured is the normal state in dev and before cutover, so it is a
|
|
// quiet note rather than an alarm — showing red here would train people to
|
|
// ignore the card.
|
|
if (failed || (status && !status.configured)) {
|
|
return (
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<h2 className="section-title">Réplica del sitio de clientes</h2>
|
|
<p className="inline-form-note">
|
|
{failed
|
|
? "No se pudo consultar el estado de la réplica."
|
|
: "No configurada en este entorno."}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!status) {
|
|
return (
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<h2 className="section-title">Réplica del sitio de clientes</h2>
|
|
<p className="inline-form-note">Consultando…</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
|
<div className="row-actions" style={{ justifyContent: "space-between" }}>
|
|
<h2 className="section-title" style={{ margin: 0 }}>
|
|
Réplica del sitio de clientes{" "}
|
|
<span className={`badge ${status.healthy ? "badge-positive" : "badge-negative"}`}>
|
|
{status.healthy ? "Replicando" : "Detenida"}
|
|
</span>
|
|
</h2>
|
|
<button className="btn btn-ghost" type="button" onClick={load}>
|
|
Actualizar
|
|
</button>
|
|
</div>
|
|
|
|
{status.problem && (
|
|
<div className="state-box state-error" style={{ marginTop: 12 }}>
|
|
{status.problem}
|
|
</div>
|
|
)}
|
|
|
|
<div className="kv-grid" style={{ paddingLeft: 0, paddingRight: 0 }}>
|
|
<KV label="Servidor" value={status.host} />
|
|
<KV label="Origen" value={status.sourceHost} />
|
|
<KV label="Hilo de E/S" value={status.ioRunning} />
|
|
<KV label="Hilo SQL" value={status.sqlRunning} />
|
|
{/* Never render a null lag as "0 s": MySQL reports NULL whenever a
|
|
thread is down, so the honest word is "unknown", not "up to date". */}
|
|
<KV
|
|
label="Retraso"
|
|
value={status.secondsBehind === null ? "sin dato" : `${status.secondsBehind} s`}
|
|
/>
|
|
<KV label="Consultado" value={formatDateTime(status.checkedAt)} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Matches the KV in the clientes/polizas/servicios detail pages. */
|
|
function KV({ label, value }: { label: string; value: string | null | undefined }) {
|
|
return (
|
|
<div>
|
|
<div className="kv-label">{label}</div>
|
|
<div className="kv-value">{value || "—"}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Step progress for a running migration.
|
|
*
|
|
* Only REIMPORT and SYNC report steps; BACKUP and RESTORE are a single
|
|
* mysqldump, so they render nothing here rather than a made-up bar — the
|
|
* spinner in the heading already says "working".
|
|
*
|
|
* The safety backup runs before the migration, so `progress` is null for the
|
|
* first stretch of every REIMPORT. That phase is named explicitly instead of
|
|
* showing 0%, which would read as "stuck".
|
|
*/
|
|
function JobProgressBar({ job }: { job: OpsJob }) {
|
|
const running = job.status === "RUNNING";
|
|
const p = job.progress;
|
|
|
|
if (!p) {
|
|
if (!running) return null;
|
|
return (
|
|
<p className="inline-form-note" style={{ marginTop: 8 }}>
|
|
Respaldo de seguridad previo…
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ marginTop: 10, marginBottom: 4 }}>
|
|
<div
|
|
className="row-actions"
|
|
style={{ justifyContent: "space-between", marginBottom: 6 }}
|
|
>
|
|
<span className="inline-form-note" style={{ margin: 0 }}>
|
|
Paso {p.step} de {p.total} — {p.name}
|
|
</span>
|
|
<span className="inline-form-note" style={{ margin: 0 }}>
|
|
{p.percent}%
|
|
</span>
|
|
</div>
|
|
<div
|
|
role="progressbar"
|
|
aria-valuenow={p.percent}
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
aria-label={`Paso ${p.step} de ${p.total}`}
|
|
style={{
|
|
height: 6,
|
|
borderRadius: 999,
|
|
background: "var(--line)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: `${p.percent}%`,
|
|
height: "100%",
|
|
borderRadius: 999,
|
|
transition: "width 400ms ease",
|
|
background:
|
|
job.status === "FAILED"
|
|
? "var(--negative)"
|
|
: "var(--positive)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|