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:
@@ -11,6 +11,16 @@ type MonitorData = {
|
||||
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() {
|
||||
const [data, setData] = useState<MonitorData | null>(null);
|
||||
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 [counties, setCounties] = useState<string[]>([]);
|
||||
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 pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
@@ -50,6 +65,61 @@ export default function MonitorPage() {
|
||||
.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
|
||||
useEffect(() => {
|
||||
return () => { if (pollRef.current) clearInterval(pollRef.current); };
|
||||
@@ -232,6 +302,73 @@ export default function MonitorPage() {
|
||||
|
||||
{/* Actions + Log */}
|
||||
<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">
|
||||
<ActionButton
|
||||
label="Rebuild PMTiles"
|
||||
|
||||
Reference in New Issue
Block a user