feat(monitor): add eTerra session indicator + login form

The eTerra connect/disconnect UI and session status were missing from the
deployed monitor page. Also, since ETERRA env vars are empty in the
container, the connect flow now accepts username/password from the UI.
This unblocks county sync which requires an active eTerra session.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude VM
2026-04-08 10:40:31 +03:00
parent 93b3904755
commit 7bc9e67e96
+137
View File
@@ -11,6 +11,16 @@ type MonitorData = {
config?: { martinUrl?: string; pmtilesUrl?: string; n8nWebhook?: string }; config?: { martinUrl?: string; pmtilesUrl?: string; n8nWebhook?: string };
}; };
type EterraSessionStatus = {
connected: boolean;
username?: string;
connectedAt?: string;
activeJobCount: number;
eterraAvailable?: boolean;
eterraMaintenance?: boolean;
eterraHealthMessage?: string;
};
export default function MonitorPage() { export default function MonitorPage() {
const [data, setData] = useState<MonitorData | null>(null); const [data, setData] = useState<MonitorData | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -18,6 +28,11 @@ export default function MonitorPage() {
const [logs, setLogs] = useState<{ time: string; type: "info" | "ok" | "error" | "wait"; msg: string }[]>([]); const [logs, setLogs] = useState<{ time: string; type: "info" | "ok" | "error" | "wait"; msg: string }[]>([]);
const [counties, setCounties] = useState<string[]>([]); const [counties, setCounties] = useState<string[]>([]);
const [selectedCounty, setSelectedCounty] = useState(""); const [selectedCounty, setSelectedCounty] = useState("");
const [eterraSession, setEterraSession] = useState<EterraSessionStatus>({ connected: false, activeJobCount: 0 });
const [eterraConnecting, setEterraConnecting] = useState(false);
const [showLoginForm, setShowLoginForm] = useState(false);
const [eterraUser, setEterraUser] = useState("");
const [eterraPwd, setEterraPwd] = useState("");
const rebuildPrevRef = useRef<string | null>(null); const rebuildPrevRef = useRef<string | null>(null);
const pollRef = useRef<ReturnType<typeof setInterval> | null>(null); const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -50,6 +65,61 @@ export default function MonitorPage() {
.catch(() => {}); .catch(() => {});
}, []); }, []);
// eTerra session status — poll every 30s
const fetchEterraSession = useCallback(async () => {
try {
const res = await fetch("/api/eterra/session");
if (res.ok) setEterraSession(await res.json() as EterraSessionStatus);
} catch { /* noop */ }
}, []);
useEffect(() => {
void fetchEterraSession();
const interval = setInterval(() => void fetchEterraSession(), 30_000);
return () => clearInterval(interval);
}, [fetchEterraSession]);
const handleEterraConnect = async () => {
setEterraConnecting(true);
try {
const payload: Record<string, string> = { action: "connect" };
if (eterraUser.trim()) payload.username = eterraUser.trim();
if (eterraPwd.trim()) payload.password = eterraPwd.trim();
const res = await fetch("/api/eterra/session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
const d = await res.json() as { success?: boolean; error?: string };
if (d.success) {
await fetchEterraSession();
addLog("ok", "eTerra conectat");
setShowLoginForm(false);
setEterraPwd("");
} else {
addLog("error", `eTerra: ${d.error ?? "Eroare conectare"}`);
}
} catch {
addLog("error", "eTerra: eroare retea");
}
setEterraConnecting(false);
};
const handleEterraDisconnect = async () => {
const res = await fetch("/api/eterra/session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ action: "disconnect" }),
});
const d = await res.json() as { success?: boolean; error?: string };
if (d.success) {
setEterraSession({ connected: false, activeJobCount: 0 });
addLog("info", "eTerra deconectat");
} else {
addLog("error", `Deconectare: ${d.error ?? "Eroare"}`);
}
};
// Cleanup poll on unmount // Cleanup poll on unmount
useEffect(() => { useEffect(() => {
return () => { if (pollRef.current) clearInterval(pollRef.current); }; return () => { if (pollRef.current) clearInterval(pollRef.current); };
@@ -232,6 +302,73 @@ export default function MonitorPage() {
{/* Actions + Log */} {/* Actions + Log */}
<Card title="Actiuni"> <Card title="Actiuni">
{/* eTerra session indicator */}
<div className="mb-4 pb-3 border-b border-border/50 space-y-2">
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<span className={`w-2 h-2 rounded-full ${eterraSession.connected ? "bg-green-400" : "bg-red-400"}`} />
<span className="text-sm">
{eterraSession.connected
? `eTerra: ${eterraSession.username}`
: "eTerra: deconectat"}
</span>
{eterraSession.connected && eterraSession.activeJobCount > 0 && (
<span className="text-xs text-muted-foreground">({eterraSession.activeJobCount} job activ)</span>
)}
</div>
{eterraSession.connected ? (
<button
onClick={handleEterraDisconnect}
className="text-xs px-2 py-1 rounded border border-border hover:bg-destructive/10 hover:text-destructive transition-colors"
>
Deconecteaza
</button>
) : (
<button
onClick={() => setShowLoginForm((v) => !v)}
className="text-xs px-2 py-1 rounded border border-border hover:border-primary/50 hover:bg-primary/10 transition-colors"
>
Conecteaza
</button>
)}
{eterraSession.eterraMaintenance && (
<span className="text-xs text-yellow-400">Mentenanta</span>
)}
</div>
{showLoginForm && !eterraSession.connected && (
<div className="flex items-end gap-2">
<div className="flex flex-col gap-1">
<label className="text-xs text-muted-foreground">Utilizator eTerra</label>
<input
type="text"
value={eterraUser}
onChange={(e) => setEterraUser(e.target.value)}
className="h-8 w-40 rounded-md border border-border bg-background px-2 text-sm"
placeholder="user@ancpi"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs text-muted-foreground">Parola</label>
<input
type="password"
value={eterraPwd}
onChange={(e) => setEterraPwd(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") handleEterraConnect(); }}
className="h-8 w-40 rounded-md border border-border bg-background px-2 text-sm"
placeholder="parola"
/>
</div>
<button
onClick={handleEterraConnect}
disabled={eterraConnecting || !eterraUser.trim() || !eterraPwd.trim()}
className="h-8 px-3 rounded-md bg-primary text-primary-foreground text-xs hover:bg-primary/90 disabled:opacity-50"
>
{eterraConnecting ? "..." : "Login"}
</button>
</div>
)}
</div>
<div className="flex flex-wrap gap-3 mb-4"> <div className="flex flex-wrap gap-3 mb-4">
<ActionButton <ActionButton
label="Rebuild PMTiles" label="Rebuild PMTiles"