Healthcheck.

<section class="ui-sample ui-service" data-health-check="true"><header><strong>Healthcheck HTTP</strong><span class="badge badge--ok">Operativo</span></header><pre><code>GET https://datos.cochid.cl/healthz
HTTP 200 · 184 ms</code></pre><p>Refresco activo · 18:24:40 CLT</p><button class="btn btn--secondary" type="button">Ejecutar otra vez</button></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-health-check="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Healthcheck HTTP</strong><span class="badge badge--ok">Operativo</span></header><pre class="overflow-x-auto border border-slate-300 bg-slate-50 p-3"><code>GET https://datos.cochid.cl/healthz
HTTP 200 · 184 ms</code></pre><p>Refresco activo · 18:24:40 CLT</p><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Ejecutar otra vez</button></section>

import type { MouseEventHandler } from "react";

export interface HealthCheckProps {
  /** Nombre de la verificación. */
  title?: string;
  /** Resultado visible como etiqueta; por defecto se deduce del código HTTP: «Operativo» con 2xx, «Redirige» con 3xx y «Falló» con cualquier otro. */
  status?: string;
  /** Tono de la etiqueta del resultado; por defecto se deduce del código HTTP (2xx: `ok`; 3xx: `warn`; otro: `err`), igual que el texto. */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Método HTTP de la solicitud. */
  method?: string;
  /** URL que se consulta. */
  url?: string;
  /** Código HTTP de la respuesta. */
  httpStatus?: number;
  /** Tiempo de respuesta con su unidad («184 ms»). */
  duration?: string;
  /** Línea de frescura: si fue refresco activo o caché, y la hora de la medición. */
  freshness?: string;
  /** Texto del botón que repite la verificación; vacío oculta el botón. */
  retryLabel?: string;
  onRetry?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Resultado de un healthcheck HTTP con la solicitud, el código y el tiempo de respuesta, y un botón para repetirlo; se usa en tableros de operación y fichas de servicio.
 *
 * La solicitud y la respuesta van en `<pre>`, una por línea. El resultado se deriva del código HTTP salvo que pases `status`, y va en texto dentro de una etiqueta con tono (`badge`), no sólo en color. Repetir la verificación es una acción secundaria (`btn--secondary`).
 *
 * @example <HealthCheck url="https://datos.cochid.cl/healthz" httpStatus={200} duration="184 ms" onRetry={verificar} />
 * @example <HealthCheck httpStatus={503} duration="3.240 ms" freshness="Caché · 18:20:02 CLT" />
 */
export function HealthCheck({
  title = "Healthcheck HTTP",
  status,
  statusTone,
  method = "GET",
  url = "https://datos.cochid.cl/healthz",
  httpStatus = 200,
  duration = "184 ms",
  freshness = "Refresco activo · 18:24:40 CLT",
  retryLabel = "Ejecutar otra vez",
  onRetry,
  className,
}: HealthCheckProps) {
  const deducido = httpStatus >= 200 && httpStatus < 300 ? "ok" : httpStatus >= 300 && httpStatus < 400 ? "warn" : "err";
  const resultado = status ?? (deducido === "ok" ? "Operativo" : deducido === "warn" ? "Redirige" : "Falló");
  const tono = statusTone ?? deducido;
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-health-check>
      <header>
        <strong>{title}</strong>
        {resultado ? <span className={tono === "neutral" ? "badge" : `badge badge--${tono}`}>{resultado}</span> : null}
      </header>
      <pre><code>{`${method} ${url}\nHTTP ${httpStatus} · ${duration}`}</code></pre>
      {freshness ? <p>{freshness}</p> : null}
      {retryLabel ? <button className="btn btn--secondary" type="button" onClick={onRetry}>{retryLabel}</button> : null}
    </section>
  );
}