feat(telemetry): add comprehensive Prometheus metrics and expand dashboard with system, API, ML, and Node.js runtime sections
This commit is contained in:
MythEclipse
@@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
BarChart3, Activity, Cpu, HardDrive, Database,
|
||||
RefreshCw, Server,
|
||||
RefreshCw, Server, Wifi, Layers,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
|
||||
@@ -11,10 +11,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
// ─── Prometheus API ─────────────────────────────────────────────────
|
||||
const PROM = "https://telemetry.imrnes.team/prometheus/api/v1";
|
||||
const INSTANCE = '100.96.248.86:9100';
|
||||
const INST = "100.96.248.86"; // orange VPS
|
||||
|
||||
interface PromValue {
|
||||
time: number;
|
||||
time: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
@@ -47,71 +47,69 @@ function fmtPct(v: number): string {
|
||||
return v.toFixed(1) + "%";
|
||||
}
|
||||
|
||||
function shortMetric(name: string): string {
|
||||
return name.replace(/^zeavis_api_/, "").replace(/^zeavis_ml_/, "");
|
||||
function fmtBytes(v: number): string {
|
||||
if (v >= 1 << 30) return (v / (1 << 30)).toFixed(1) + " GiB";
|
||||
if (v >= 1 << 20) return (v / (1 << 20)).toFixed(1) + " MiB";
|
||||
if (v >= 1 << 10) return (v / (1 << 10)).toFixed(1) + " KiB";
|
||||
return v.toFixed(0) + " B";
|
||||
}
|
||||
|
||||
// ─── StatCard ────────────────────────────────────────────────────────
|
||||
// ─── UI Components ──────────────────────────────────────────────────
|
||||
function StatCard({ icon: Icon, label, value, sub, color }: {
|
||||
icon: typeof BarChart3; label: string; value: string; sub?: string; color: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2 pt-4 px-4">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2 pt-3 px-4">
|
||||
<CardTitle className="text-sm font-medium text-slate-500">{label}</CardTitle>
|
||||
<Icon className={`h-4 w-4 ${color}`} />
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<CardContent className="px-4 pb-3">
|
||||
<div className="text-2xl font-bold">{value}</div>
|
||||
{sub && <p className="text-xs text-slate-400 mt-1">{sub}</p>}
|
||||
{sub && <p className="text-xs text-slate-400 mt-0.5">{sub}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Chart ──────────────────────────────────────────────────────────
|
||||
function ChartCard({ title, data, color }: {
|
||||
title: string; data: PromValue[]; color: string;
|
||||
function ChartCard({ title, data, color, unit = "", domain }: {
|
||||
title: string; data: PromValue[]; color: string; unit?: string; domain?: [number, number];
|
||||
}) {
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardHeader className="pb-2 px-4 pt-3">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<div className="flex items-center justify-center h-36 text-slate-400 text-sm">No data</div>
|
||||
<CardContent className="px-4 pb-3">
|
||||
<div className="flex items-center justify-center h-28 text-slate-400 text-xs">No data</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardHeader className="pb-2 px-4 pt-3">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<ResponsiveContainer width="100%" height={140}>
|
||||
<CardContent className="px-4 pb-3">
|
||||
<ResponsiveContainer width="100%" height={120}>
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient id={`g-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<linearGradient id={`g-${title.replace(/\s+/g, "")}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.2} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="time" tick={{ fontSize: 10 }}
|
||||
tickFormatter={(v) => new Date(v).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
|
||||
/>
|
||||
<YAxis domain={[0, 100]} tick={{ fontSize: 10 }} unit="%" />
|
||||
<XAxis dataKey="time" tick={{ fontSize: 9 }} hide />
|
||||
<YAxis domain={domain ?? ["auto", "auto"]} tick={{ fontSize: 9 }} unit={unit} />
|
||||
<Tooltip
|
||||
labelFormatter={(v) => new Date(v).toLocaleTimeString()}
|
||||
formatter={(val: unknown) => [
|
||||
typeof val === "number" ? val.toFixed(1) + "%" : String(val ?? ""), title
|
||||
]}
|
||||
formatter={(val: unknown) => [typeof val === "number" ? val.toFixed(2) : String(val ?? ""), title]}
|
||||
/>
|
||||
<Area type="monotone" dataKey="value" stroke={color}
|
||||
fill={`url(#g-${title.replace(/\s/g, "")})`} strokeWidth={2} />
|
||||
fill={`url(#g-${title.replace(/\s+/g, "")})`} strokeWidth={2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
@@ -119,15 +117,76 @@ function ChartCard({ title, data, color }: {
|
||||
);
|
||||
}
|
||||
|
||||
function GaugeCard({ label, value, max, unit, color }: {
|
||||
label: string; value: number; max: number; unit: string; color: string;
|
||||
}) {
|
||||
const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0;
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-1 px-4 pt-3">
|
||||
<CardTitle className="text-xs font-medium text-slate-500">{label}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-3">
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-xl font-bold">{typeof value === "number" ? value.toFixed(1) : "?"}</span>
|
||||
<span className="text-xs text-slate-400">{unit}</span>
|
||||
</div>
|
||||
<div className="mt-1.5 h-1.5 w-full rounded-full bg-slate-100">
|
||||
<div className="h-1.5 rounded-full transition-all duration-500" style={{ width: `${pct}%`, backgroundColor: color }} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Section Header ─────────────────────────────────────────────────
|
||||
function SectionTitle({ icon: Icon, title, color }: { icon: typeof Layers; title: string; color?: string }) {
|
||||
return (
|
||||
<h3 className="text-base font-semibold text-[#214B11] flex items-center gap-2 border-b border-slate-100 pb-2">
|
||||
<Icon className={`h-4 w-4 ${color ?? "text-[#48A111]"}`} /> {title}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ───────────────────────────────────────────────────────
|
||||
export function TelemetryPage() {
|
||||
// System
|
||||
const [cpuData, setCpuData] = useState<PromValue[]>([]);
|
||||
const [memData, setMemData] = useState<PromValue[]>([]);
|
||||
const [diskData, setDiskData] = useState<PromValue[]>([]);
|
||||
const [cpuNow, setCpuNow] = useState<number | null>(null);
|
||||
const [memNow, setMemNow] = useState<number | null>(null);
|
||||
const [diskNow, setDiskNow] = useState<number | null>(null);
|
||||
const [zeavisMetrics, setZeavisMetrics] = useState<{ name: string; value: string }[]>([]);
|
||||
const [loadNow, setLoadNow] = useState<number | null>(null);
|
||||
const [netRx, setNetRx] = useState<number | null>(null);
|
||||
const [netTx, setNetTx] = useState<number | null>(null);
|
||||
const [netRxData, setNetRxData] = useState<PromValue[]>([]);
|
||||
const [netTxData, setNetTxData] = useState<PromValue[]>([]);
|
||||
|
||||
// ZeaVis API
|
||||
const [apiReqsTotal, setApiReqsTotal] = useState<number | null>(null);
|
||||
const [apiReqsActive, setApiReqsActive] = useState<number | null>(null);
|
||||
const [apiLatency, setApiLatency] = useState<number | null>(null);
|
||||
const [apiReqsData, setApiReqsData] = useState<PromValue[]>([]);
|
||||
const [apiLatencyData, setApiLatencyData] = useState<PromValue[]>([]);
|
||||
|
||||
// ML
|
||||
const [mlModelLoaded, setMlModelLoaded] = useState<number | null>(null);
|
||||
|
||||
// NodeJS
|
||||
const [heapUsed, setHeapUsed] = useState<number | null>(null);
|
||||
const [heapTotal, setHeapTotal] = useState<number | null>(null);
|
||||
const [eventLoopLag, setEventLoopLag] = useState<number | null>(null);
|
||||
const [activeHandles, setActiveHandles] = useState<number | null>(null);
|
||||
const [activeRequests, setActiveRequests] = useState<number | null>(null);
|
||||
const [heapData, setHeapData] = useState<PromValue[]>([]);
|
||||
const [elLagData, setElLagData] = useState<PromValue[]>([]);
|
||||
|
||||
// Process
|
||||
const [procCpu, setProcCpu] = useState<number | null>(null);
|
||||
const [procMem, setProcMem] = useState<number | null>(null);
|
||||
const [procFds, setProcFds] = useState<number | null>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
@@ -138,37 +197,61 @@ export function TelemetryPage() {
|
||||
if (isRefresh) setRefreshing(true); else setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Run all queries in parallel
|
||||
const [cpu, mem, disk, cpuNowVal, memNowVal, diskNowVal, upData] = await Promise.all([
|
||||
queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`, 60),
|
||||
queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`, 60),
|
||||
queryRange(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`, 60),
|
||||
queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INSTANCE}"}[5m])) * 100)`),
|
||||
queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INSTANCE}"} / node_memory_MemTotal_bytes{instance="${INSTANCE}"}) * 100`),
|
||||
queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INSTANCE}",mountpoint="/"} / node_filesystem_size_bytes{instance="${INSTANCE}",mountpoint="/"}) * 100`),
|
||||
// ZeaVis app metrics
|
||||
(async () => {
|
||||
const names = [
|
||||
"zeavis_api_http_requests_total",
|
||||
"zeavis_api_http_requests_active",
|
||||
"zeavis_ml_zeavis_ml_model_load_status",
|
||||
];
|
||||
const results: { name: string; value: string }[] = [];
|
||||
for (const n of names) {
|
||||
const val = await queryInstant(n);
|
||||
if (val !== null) results.push({ name: n, value: val.toFixed(2) });
|
||||
}
|
||||
return results;
|
||||
})(),
|
||||
const [
|
||||
cpuR, memR, diskR,
|
||||
cpuN, memN, diskN, loadN,
|
||||
netRxR, netTxR, netRxN, netTxN,
|
||||
apiReqsN, apiActiveN, apiLatN, apiReqsR, apiLatR,
|
||||
mlN,
|
||||
heapN, heapTN, elN, ahN, arN, heapR, elR,
|
||||
procCpuN, procMemN, procFdsN,
|
||||
] = await Promise.all([
|
||||
// Range queries
|
||||
queryRange(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`, 60),
|
||||
queryRange(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`, 60),
|
||||
queryRange(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`, 60),
|
||||
// Instant queries - system
|
||||
queryInstant(`100 - (avg(rate(node_cpu_seconds_total{mode="idle",instance="${INST}:9100"}[5m])) * 100)`),
|
||||
queryInstant(`(1 - node_memory_MemAvailable_bytes{instance="${INST}:9100"} / node_memory_MemTotal_bytes{instance="${INST}:9100"}) * 100`),
|
||||
queryInstant(`(1 - node_filesystem_avail_bytes{instance="${INST}:9100",mountpoint="/"} / node_filesystem_size_bytes{instance="${INST}:9100",mountpoint="/"}) * 100`),
|
||||
queryInstant(`node_load15{instance="${INST}:9100"}`),
|
||||
// Network
|
||||
queryRange(`rate(node_network_receive_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`, 60),
|
||||
queryRange(`rate(node_network_transmit_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`, 60),
|
||||
queryInstant(`rate(node_network_receive_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`),
|
||||
queryInstant(`rate(node_network_transmit_bytes_total{instance="${INST}:9100",device="eth0"}[5m])`),
|
||||
// API
|
||||
queryInstant(`zeavis_api_http_requests_total{instance="${INST}:3000"}`),
|
||||
queryInstant(`zeavis_api_http_requests_active{instance="${INST}:3000"}`),
|
||||
queryInstant(`zeavis_api_http_request_duration_seconds_sum{instance="${INST}:3000"} / zeavis_api_http_request_duration_seconds_count{instance="${INST}:3000"}`),
|
||||
queryRange(`zeavis_api_http_requests_total{instance="${INST}:3000"}`, 60),
|
||||
queryRange(`zeavis_api_http_request_duration_seconds_sum{instance="${INST}:3000"} / zeavis_api_http_request_duration_seconds_count{instance="${INST}:3000"}`, 60),
|
||||
// ML
|
||||
queryInstant(`zeavis_ml_zeavis_ml_model_load_status{instance="${INST}:8000"}`),
|
||||
// NodeJS
|
||||
queryInstant(`nodejs_heap_size_used_bytes{instance="${INST}:3000"}`),
|
||||
queryInstant(`nodejs_heap_size_total_bytes{instance="${INST}:3000"}`),
|
||||
queryInstant(`nodejs_eventloop_lag_seconds{instance="${INST}:3000"}`),
|
||||
queryInstant(`nodejs_active_handles_total{instance="${INST}:3000"}`),
|
||||
queryInstant(`nodejs_active_requests_total{instance="${INST}:3000"}`),
|
||||
queryRange(`nodejs_heap_size_used_bytes{instance="${INST}:3000"}`, 60),
|
||||
queryRange(`nodejs_eventloop_lag_seconds{instance="${INST}:3000"}`, 60),
|
||||
// Process
|
||||
queryInstant(`rate(process_cpu_seconds_total{instance="${INST}:3000"}[5m])`),
|
||||
queryInstant(`process_resident_memory_bytes{instance="${INST}:3000"}`),
|
||||
queryInstant(`process_open_fds{instance="${INST}:3000"}`),
|
||||
]);
|
||||
|
||||
setCpuData(cpu);
|
||||
setMemData(mem);
|
||||
setDiskData(disk);
|
||||
setCpuNow(cpuNowVal);
|
||||
setMemNow(memNowVal);
|
||||
setDiskNow(diskNowVal);
|
||||
setZeavisMetrics(upData);
|
||||
setCpuData(cpuR); setMemData(memR); setDiskData(diskR);
|
||||
setCpuNow(cpuN); setMemNow(memN); setDiskNow(diskN); setLoadNow(loadN);
|
||||
setNetRx(netRxN); setNetTx(netTxN); setNetRxData(netRxR); setNetTxData(netTxR);
|
||||
setApiReqsTotal(apiReqsN); setApiReqsActive(apiActiveN); setApiLatency(apiLatN);
|
||||
setApiReqsData(apiReqsR); setApiLatencyData(apiLatR);
|
||||
setMlModelLoaded(mlN);
|
||||
setHeapUsed(heapN); setHeapTotal(heapTN); setEventLoopLag(elN);
|
||||
setActiveHandles(ahN); setActiveRequests(arN);
|
||||
setHeapData(heapR); setElLagData(elR);
|
||||
setProcCpu(procCpuN); setProcMem(procMemN); setProcFds(procFdsN);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Unknown error");
|
||||
} finally {
|
||||
@@ -183,14 +266,12 @@ export function TelemetryPage() {
|
||||
return () => clearInterval(intRef.current);
|
||||
}, [fetchAll]);
|
||||
|
||||
if (loading && cpuData.length === 0 && memData.length === 0) {
|
||||
if (loading && cpuNow === null) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center space-y-3">
|
||||
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#48A111] border-r-transparent" />
|
||||
<p className="text-sm text-muted-foreground">Loading telemetry data...</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center space-y-3">
|
||||
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#48A111] border-r-transparent" />
|
||||
<p className="text-sm text-muted-foreground">Loading telemetry data...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -202,68 +283,80 @@ export function TelemetryPage() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-[28px] font-extrabold text-[#214B11] flex items-center gap-3">
|
||||
<BarChart3 className="h-7 w-7 text-[#48A111]" />
|
||||
<Activity className="h-7 w-7 text-[#48A111]" />
|
||||
Telemetry Dashboard
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Metrics from Prometheus — orange VPS ({INSTANCE})
|
||||
{error && <span className="text-amber-600 ml-2">({error})</span>}
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
Real-time metrics from Prometheus
|
||||
{error && <span className="text-amber-600 ml-2">(partial — {error})</span>}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => fetchAll(true)} disabled={refreshing}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-50"
|
||||
><RefreshCw className={`h-4 w-4 ${refreshing ? "animate-spin" : ""}`} /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard icon={Cpu} label="CPU Usage" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
|
||||
<StatCard icon={Database} label="Memory Usage" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-600" />
|
||||
<StatCard icon={HardDrive} label="Disk Usage" value={diskNow !== null ? fmtPct(diskNow) : "N/A"} color="text-amber-600" />
|
||||
<StatCard icon={Activity} label="Status" value={error ? "Degraded" : "Healthy"} sub="via Prometheus API" color={error ? "text-red-600" : "text-green-600"} />
|
||||
{/* ===== SYSTEM ===== */}
|
||||
<SectionTitle icon={Server} title="System" />
|
||||
<div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
|
||||
<StatCard icon={Cpu} label="CPU" value={cpuNow !== null ? fmtPct(cpuNow) : "N/A"} color="text-blue-600" />
|
||||
<StatCard icon={Database} label="Memory" value={memNow !== null ? fmtPct(memNow) : "N/A"} color="text-violet-600" />
|
||||
<StatCard icon={HardDrive} label="Disk" value={diskNow !== null ? fmtPct(diskNow) : "N/A"} color="text-amber-600" />
|
||||
<StatCard icon={Activity} label="Load (15m)" value={loadNow !== null ? loadNow.toFixed(2) : "N/A"} color="text-rose-600" />
|
||||
<StatCard icon={Wifi} label="Net Rx" value={netRx !== null ? fmtBytes(netRx) + "/s" : "N/A"} color="text-cyan-600" />
|
||||
<StatCard icon={Wifi} label="Net Tx" value={netTx !== null ? fmtBytes(netTx) + "/s" : "N/A"} color="text-teal-600" />
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
|
||||
<ChartCard title="CPU %" data={cpuData} color="#2563eb" unit="%" domain={[0, 100]} />
|
||||
<ChartCard title="Memory %" data={memData} color="#8b5cf6" unit="%" domain={[0, 100]} />
|
||||
<ChartCard title="Disk %" data={diskData} color="#f59e0b" unit="%" domain={[0, 100]} />
|
||||
<ChartCard title="Net Rx" data={netRxData} color="#06b6d4" />
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<ChartCard title="Net Tx" data={netTxData} color="#14b8a6" />
|
||||
<ChartCard title="Disk %" data={diskData} color="#f59e0b" unit="%" domain={[0, 100]} />
|
||||
</div>
|
||||
|
||||
{/* System Charts */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<ChartCard title="CPU Usage (last hour)" data={cpuData} color="#2563eb" />
|
||||
<ChartCard title="Memory Usage (last hour)" data={memData} color="#8b5cf6" />
|
||||
<ChartCard title="Disk Usage (last hour)" data={diskData} color="#f59e0b" />
|
||||
{/* ===== APPLICATION ===== */}
|
||||
<SectionTitle icon={Server} title="ZeaVis API" />
|
||||
<div className="grid gap-3 md:grid-cols-4 lg:grid-cols-5">
|
||||
<StatCard icon={Activity} label="Requests Total" value={apiReqsTotal !== null ? apiReqsTotal.toFixed(0) : "N/A"} color="text-emerald-600" />
|
||||
<StatCard icon={Activity} label="Active Reqs" value={apiReqsActive !== null ? apiReqsActive.toFixed(0) : "N/A"} color="text-sky-600" />
|
||||
<StatCard icon={Activity} label="Avg Latency" value={apiLatency !== null ? (apiLatency * 1000).toFixed(1) + "ms" : "N/A"} color="text-orange-600" />
|
||||
<GaugeCard label="Heap Used" value={heapUsed !== null ? heapUsed / 1024 / 1024 : 0} max={heapTotal !== null ? heapTotal / 1024 / 1024 : 100} unit="MiB" color="#8b5cf6" />
|
||||
<GaugeCard label="Event Loop Lag" value={eventLoopLag !== null ? eventLoopLag * 1000 : 0} max={50} unit="ms" color="#f59e0b" />
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-3">
|
||||
<ChartCard title="Requests" data={apiReqsData} color="#10b981" />
|
||||
<ChartCard title="Latency (avg)" data={apiLatencyData} color="#f97316" />
|
||||
<ChartCard title="Event Loop Lag" data={elLagData} color="#eab308" />
|
||||
</div>
|
||||
|
||||
{/* ZeaVis Application Metrics */}
|
||||
{zeavisMetrics.length > 0 && (
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
|
||||
<Server className="h-5 w-5 text-[#48A111]" /> ZeaVis Application Metrics
|
||||
</h3>
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{zeavisMetrics.map((m) => (
|
||||
<Card key={m.name} className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-3">
|
||||
<CardTitle className="text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
{shortMetric(m.name)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-3">
|
||||
<div className="text-2xl font-bold text-[#306D29]">{m.value}</div>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5 font-mono">{m.name}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
{/* ===== ML SERVICE ===== */}
|
||||
<SectionTitle icon={Server} title="ML Service" />
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard icon={Database} label="Model Status" value={mlModelLoaded !== null ? (mlModelLoaded === 1 ? "Loaded" : "Not Loaded") : "N/A"}
|
||||
color={mlModelLoaded === 1 ? "text-green-600" : "text-red-600"} />
|
||||
<GaugeCard label="Process CPU" value={procCpu !== null ? procCpu * 100 : 0} max={100} unit="%" color="#2563eb" />
|
||||
<GaugeCard label="Process Memory" value={procMem !== null ? procMem / 1024 / 1024 : 0} max={500} unit="MiB" color="#8b5cf6" />
|
||||
<StatCard icon={Activity} label="Open FDs" value={procFds !== null ? procFds.toFixed(0) : "N/A"} color="text-amber-600" />
|
||||
</div>
|
||||
|
||||
{/* Raw metric names in Prometheus */}
|
||||
{zeavisMetrics.length === 0 && (
|
||||
<Card className="border-slate-200 shadow-sm bg-slate-50">
|
||||
<CardContent className="px-4 py-6 text-center text-sm text-slate-400">
|
||||
No application metrics available. Prometheus results shown above.
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{/* ===== NODEJS DETAIL ===== */}
|
||||
<SectionTitle icon={Layers} title="Node.js Runtime" />
|
||||
<div className="grid gap-3 md:grid-cols-4 lg:grid-cols-6">
|
||||
<GaugeCard label="Heap Used" value={heapUsed !== null ? heapUsed / 1024 / 1024 : 0} max={heapTotal !== null ? heapTotal / 1024 / 1024 : 200} unit="MiB" color="#8b5cf6" />
|
||||
<StatCard icon={Database} label="Heap Total" value={heapTotal !== null ? fmtBytes(heapTotal) : "N/A"} color="text-violet-600" />
|
||||
<StatCard icon={Activity} label="Active Handles" value={activeHandles !== null ? activeHandles.toFixed(0) : "N/A"} color="text-sky-600" />
|
||||
<StatCard icon={Activity} label="Active Req (Node)" value={activeRequests !== null ? activeRequests.toFixed(0) : "N/A"} color="text-teal-600" />
|
||||
<StatCard icon={Activity} label="Process CPU (api)" value={procCpu !== null ? fmtPct(procCpu * 100) : "N/A"} color="text-blue-600" />
|
||||
<StatCard icon={Activity} label="Process Mem (api)" value={procMem !== null ? fmtBytes(procMem) : "N/A"} color="text-indigo-600" />
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<ChartCard title="Heap Used" data={heapData} color="#8b5cf6" />
|
||||
<ChartCard title="Event Loop Lag" data={elLagData} color="#eab308" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user