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 };
|
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"
|
||||||
|
|||||||
Reference in New Issue
Block a user