feat(geoportal): live tile infrastructure monitor at /monitor
Dashboard page showing: - nginx tile-cache status (connections, requests) - Martin tile server sources - PMTiles file info (size, last modified) - Cache HIT/MISS test on sample tiles - Configuration summary Action buttons: - Rebuild PMTiles (triggers N8N webhook) - Warm Cache (fetches common tiles from container) Auto-refreshes every 30 seconds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
AI Assistant
@@ -0,0 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
|
||||
type MonitorData = {
|
||||
timestamp: string;
|
||||
nginx?: { activeConnections?: number; requests?: number; reading?: number; writing?: number; waiting?: number; error?: string };
|
||||
martin?: { status?: string; sources?: string[]; sourceCount?: number; error?: string };
|
||||
pmtiles?: { url?: string; status?: string; size?: string; lastModified?: string; error?: string };
|
||||
cacheTests?: { tile: string; status: string; cache: string }[];
|
||||
config?: { martinUrl?: string; pmtilesUrl?: string; n8nWebhook?: string };
|
||||
};
|
||||
|
||||
export default function MonitorPage() {
|
||||
const [data, setData] = useState<MonitorData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionMsg, setActionMsg] = useState("");
|
||||
const [actionLoading, setActionLoading] = useState("");
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/geoportal/monitor");
|
||||
if (res.ok) setData(await res.json());
|
||||
} catch { /* noop */ }
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => { refresh(); }, [refresh]);
|
||||
|
||||
// Auto-refresh every 30s
|
||||
useEffect(() => {
|
||||
const interval = setInterval(refresh, 30_000);
|
||||
return () => clearInterval(interval);
|
||||
}, [refresh]);
|
||||
|
||||
const triggerAction = async (action: string) => {
|
||||
setActionLoading(action);
|
||||
setActionMsg("");
|
||||
try {
|
||||
const res = await fetch("/api/geoportal/monitor", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action }),
|
||||
});
|
||||
const result = await res.json() as { message?: string; error?: string };
|
||||
setActionMsg(result.message ?? result.error ?? "Done");
|
||||
} catch {
|
||||
setActionMsg("Eroare la trimitere");
|
||||
}
|
||||
setActionLoading("");
|
||||
setTimeout(refresh, 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-5xl p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Tile Infrastructure Monitor</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{data?.timestamp ? `Ultima actualizare: ${new Date(data.timestamp).toLocaleTimeString("ro-RO")}` : "Se incarca..."}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 rounded bg-primary text-primary-foreground text-sm hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{loading ? "..." : "Reincarca"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Nginx Card */}
|
||||
<Card title="nginx Tile Cache">
|
||||
{data?.nginx?.error ? (
|
||||
<StatusBadge status="error" label={data.nginx.error} />
|
||||
) : data?.nginx ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatusBadge status="ok" label="Online" />
|
||||
<div className="grid grid-cols-2 gap-1 mt-2">
|
||||
<Stat label="Conexiuni active" value={data.nginx.activeConnections} />
|
||||
<Stat label="Total requests" value={data.nginx.requests?.toLocaleString()} />
|
||||
<Stat label="Reading" value={data.nginx.reading} />
|
||||
<Stat label="Writing" value={data.nginx.writing} />
|
||||
<Stat label="Waiting" value={data.nginx.waiting} />
|
||||
</div>
|
||||
</div>
|
||||
) : <Skeleton />}
|
||||
</Card>
|
||||
|
||||
{/* Martin Card */}
|
||||
<Card title="Martin Tile Server">
|
||||
{data?.martin?.error ? (
|
||||
<StatusBadge status="error" label={data.martin.error} />
|
||||
) : data?.martin ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatusBadge status="ok" label={`${data.martin.sourceCount} surse active`} />
|
||||
<div className="mt-2 space-y-1">
|
||||
{data.martin.sources?.map((s) => (
|
||||
<span key={s} className="inline-block mr-1 mb-1 px-2 py-0.5 rounded bg-muted text-xs">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : <Skeleton />}
|
||||
</Card>
|
||||
|
||||
{/* PMTiles Card */}
|
||||
<Card title="PMTiles Overview">
|
||||
{data?.pmtiles?.error ? (
|
||||
<StatusBadge status="error" label={data.pmtiles.error} />
|
||||
) : data?.pmtiles?.status === "not configured" ? (
|
||||
<StatusBadge status="warn" label="Nu e configurat" />
|
||||
) : data?.pmtiles ? (
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatusBadge status="ok" label={data.pmtiles.size ?? "OK"} />
|
||||
<Stat label="Ultima modificare" value={data.pmtiles.lastModified} />
|
||||
</div>
|
||||
) : <Skeleton />}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Cache Test Results */}
|
||||
<Card title="Cache Test">
|
||||
{data?.cacheTests ? (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-left">
|
||||
<th className="py-2 pr-4">Tile</th>
|
||||
<th className="py-2 pr-4">HTTP</th>
|
||||
<th className="py-2">Cache</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.cacheTests.map((t, i) => (
|
||||
<tr key={i} className="border-b border-border/50">
|
||||
<td className="py-2 pr-4 font-mono text-xs">{t.tile}</td>
|
||||
<td className="py-2 pr-4">{t.status}</td>
|
||||
<td className="py-2">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
||||
t.cache === "HIT" ? "bg-green-500/20 text-green-400" :
|
||||
t.cache === "MISS" ? "bg-yellow-500/20 text-yellow-400" :
|
||||
"bg-red-500/20 text-red-400"
|
||||
}`}>
|
||||
{t.cache}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : <Skeleton />}
|
||||
</Card>
|
||||
|
||||
{/* Actions */}
|
||||
<Card title="Actiuni">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<ActionButton
|
||||
label="Rebuild PMTiles"
|
||||
description="Regenereaza tile-urile overview din PostGIS"
|
||||
loading={actionLoading === "rebuild"}
|
||||
onClick={() => triggerAction("rebuild")}
|
||||
/>
|
||||
<ActionButton
|
||||
label="Warm Cache"
|
||||
description="Pre-incarca tile-uri frecvente in nginx cache"
|
||||
loading={actionLoading === "warm-cache"}
|
||||
onClick={() => triggerAction("warm-cache")}
|
||||
/>
|
||||
</div>
|
||||
{actionMsg && (
|
||||
<p className="mt-3 text-sm px-3 py-2 rounded bg-muted">{actionMsg}</p>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Config */}
|
||||
<Card title="Configuratie">
|
||||
{data?.config ? (
|
||||
<div className="space-y-1 text-sm font-mono">
|
||||
<div><span className="text-muted-foreground">MARTIN_URL:</span> {data.config.martinUrl}</div>
|
||||
<div><span className="text-muted-foreground">PMTILES_URL:</span> {data.config.pmtilesUrl}</div>
|
||||
<div><span className="text-muted-foreground">N8N_WEBHOOK:</span> {data.config.n8nWebhook}</div>
|
||||
</div>
|
||||
) : <Skeleton />}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---- Sub-components ---- */
|
||||
|
||||
function Card({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card p-4">
|
||||
<h2 className="text-sm font-semibold text-muted-foreground mb-3">{title}</h2>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ status, label }: { status: "ok" | "error" | "warn"; label: string }) {
|
||||
const colors = {
|
||||
ok: "bg-green-500/20 text-green-400",
|
||||
error: "bg-red-500/20 text-red-400",
|
||||
warn: "bg-yellow-500/20 text-yellow-400",
|
||||
};
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${colors[status]}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${status === "ok" ? "bg-green-400" : status === "error" ? "bg-red-400" : "bg-yellow-400"}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ label, value }: { label: string; value?: string | number | null }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="text-muted-foreground text-xs">{label}</div>
|
||||
<div className="font-medium">{value ?? "-"}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return <div className="h-16 rounded bg-muted/50 animate-pulse" />;
|
||||
}
|
||||
|
||||
function ActionButton({ label, description, loading, onClick }: {
|
||||
label: string; description: string; loading: boolean; onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={loading}
|
||||
className="flex flex-col items-start px-4 py-3 rounded-lg border border-border hover:border-primary/50 hover:bg-primary/5 transition-colors disabled:opacity-50 text-left"
|
||||
>
|
||||
<span className="font-medium text-sm">{loading ? "Se ruleaza..." : label}</span>
|
||||
<span className="text-xs text-muted-foreground">{description}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user