Something went wrong. Try again.
An easy to set up and operate PDS admin panel.
Something went wrong. Try again.
2.9 kB · 93 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394import { useEffect, useState, useCallback } from "react";import { api, type CursorStatus } from "./api.js";import { RequestCrawl } from "./RequestCrawl.js";
export function StatusPanel({ onLastSync,}: { onLastSync?: (iso: string | null) => void;}) { const [status, setStatus] = useState<CursorStatus | null>(null); const [error, setError] = useState<string | null>(null);
const refresh = useCallback(() => { api .cursorStatus() .then((s) => { setStatus(s); onLastSync?.(s.lastFullSync); }) .catch((e) => setError(e.message)); }, [onLastSync]);
useEffect(() => { refresh(); const id = setInterval(refresh, 15_000); return () => clearInterval(id); }, [refresh]);
const gap = status?.gap; const gapClass = gap == null ? "warn" : gap < 500 ? "ok" : gap < 5000 ? "warn" : "error"; const statusClass = status == null ? "" : status.relayStatus === "active" || status.relayStatus === "idle" ? "ok" : status.relayStatus === "throttled" ? "warn" : "error";
// pulsing skeleton while the first fetch is in flight; static dash once it has failed const placeholder = error ? ( <span className="value mono-dim">—</span> ) : ( <span className="value skeleton" aria-hidden="true" /> );
return ( <div className="status-panel"> {error && ( <div className="error-text" style={{ marginBottom: 12 }}> {error} </div> )} <div className="status-grid"> <div className="stat kv"> <span className="label">Relay Seq</span> {status ? ( <span className="value">{status.relaySeq.toLocaleString()}</span> ) : ( placeholder )} </div> <div className="stat kv"> <span className="label">PDS Head</span> {status ? ( <span className="value">{status.pdsHeadSeqApprox?.toLocaleString() ?? "—"}</span> ) : ( placeholder )} </div> <div className="stat kv"> <span className="label">Gap</span> {status ? ( <span className={`value ${gapClass}`}> {gap != null ? gap.toLocaleString() : "unknown"} </span> ) : ( placeholder )} </div> <div className="stat kv"> <span className="label">Relay Status</span> {status ? <span className={`value ${statusClass}`}>{status.relayStatus}</span> : placeholder} </div> <div className="stat kv"> <span className="label">Relay Accounts</span> {status ? <span className="value">{status.accountCount.toLocaleString()}</span> : placeholder} </div> </div> <RequestCrawl className="panel-crawl" onRequested={() => setTimeout(refresh, 2000)} /> </div> );}