Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend
This commit is contained in:
seriouselly
@@ -0,0 +1,4 @@
|
||||
|
||||
.claude/
|
||||
|
||||
.codegraph/
|
||||
+10
-3
@@ -14,8 +14,15 @@ ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
|
||||
RUN bun run --cwd packages/shared build
|
||||
RUN bun run --cwd apps/web build
|
||||
|
||||
FROM nginx:1.27-alpine AS runner
|
||||
COPY apps/web/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=builder /app/apps/web/dist /usr/share/nginx/html
|
||||
# =============================================================================
|
||||
# Stage 2: nginx (Alpine package — includes sub_filter module)
|
||||
# Alpine's nginx package is built with --with-http_sub_module
|
||||
# =============================================================================
|
||||
FROM alpine:3.20 AS runner
|
||||
RUN apk add --no-cache nginx
|
||||
|
||||
COPY apps/web/nginx.conf /etc/nginx/http.d/default.conf
|
||||
COPY --from=builder /app/apps/web/dist /var/lib/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
+10
-1
@@ -1,7 +1,7 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
root /var/lib/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location /api/ {
|
||||
@@ -12,6 +12,15 @@ server {
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Expose API metrics through the web endpoint (Prometheus scrape target)
|
||||
location /metrics {
|
||||
proxy_pass http://zeavis-api:3000/metrics;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,9 @@
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-router-dom": "^7.15.1",
|
||||
"recharts": "3.8.1",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"web-vitals": "5.3.0",
|
||||
"zustand": "^5.0.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -14,6 +14,7 @@ import { DiseaseDetailPage } from "@/pages/disease-detail-page";
|
||||
import { DiagnosisDetailPage } from "@/pages/diagnosis-detail-page";
|
||||
import { ExpertReviewsPage } from "@/pages/expert-reviews-page";
|
||||
import { DiagnosesPage } from "@/pages/diagnoses-page";
|
||||
import { TelemetryPage } from "@/pages/telemetry-page";
|
||||
import { LoginPage } from "@/pages/login-page";
|
||||
import { RegisterPage } from "@/pages/register-page";
|
||||
import { MainLayout } from "@/components/layout/main-layout";
|
||||
@@ -36,6 +37,7 @@ function LogoutProses() {
|
||||
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
import { trackPageView } from "./lib/telemetry";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
@@ -129,12 +131,29 @@ const router = createBrowserRouter([
|
||||
<LogoutProses />
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/telemetry",
|
||||
element: (
|
||||
<MainLayout>
|
||||
<TelemetryPage />
|
||||
</MainLayout>
|
||||
),
|
||||
},
|
||||
]);
|
||||
|
||||
function PageViewTracker() {
|
||||
const location = window.location;
|
||||
useEffect(() => {
|
||||
trackPageView(location.pathname + location.search);
|
||||
}, [location.pathname, location.search]);
|
||||
return null;
|
||||
}
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthInitializer />
|
||||
<PageViewTracker />
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
@@ -13,6 +13,7 @@ const NAV_ITEMS = [
|
||||
{ path: "/diagnoses", label: "Diagnosa" },
|
||||
{ path: "/catalog", label: "Pustaka", altPath: "/library" },
|
||||
{ path: "/expert/reviews", label: "Review" },
|
||||
{ path: "/telemetry", label: "Telemetry" },
|
||||
];
|
||||
|
||||
export function MobileNav({ open, onClose }: Props) {
|
||||
|
||||
@@ -71,6 +71,12 @@ export function Navbar() {
|
||||
>
|
||||
Keluar <LogOut className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/telemetry"
|
||||
className={navLinkClassName(isActive("/telemetry"))}
|
||||
>
|
||||
Telemetry
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Client‑side telemetry for the ZeaVis Edu web app.
|
||||
*
|
||||
* In development, metrics are collected in‑memory and exposed at /metrics
|
||||
* via a Vite plugin. In production they are sent as HTTP beacons to the
|
||||
* Telemetry pipeline (see METRICS.md).
|
||||
*/
|
||||
|
||||
// ── Web Vitals ──────────────────────────────────────────
|
||||
|
||||
export type MetricEntry = {
|
||||
name: string;
|
||||
value: number;
|
||||
rating?: string;
|
||||
};
|
||||
|
||||
const vitalsBuffer: MetricEntry[] = [];
|
||||
|
||||
export function reportWebVitals(metric: MetricEntry): void {
|
||||
vitalsBuffer.push(metric);
|
||||
// Keep last 20 entries in memory for the /metrics endpoint
|
||||
if (vitalsBuffer.length > 20) vitalsBuffer.shift();
|
||||
console.debug(`[telemetry] ${metric.name}: ${metric.value} (${metric.rating ?? 'n/a'})`);
|
||||
}
|
||||
|
||||
// ── Page‑view counter ───────────────────────────────────
|
||||
|
||||
let pageViewCount = 0;
|
||||
|
||||
export function trackPageView(path: string): void {
|
||||
pageViewCount++;
|
||||
console.debug(`[telemetry] pageview: ${path} (total: ${pageViewCount})`);
|
||||
}
|
||||
|
||||
// ── Metrics serialisation (consumed by vite‑plugin) ────
|
||||
|
||||
export function collectMetrics(): string {
|
||||
const lines: string[] = [];
|
||||
|
||||
// ── Default process‑like metrics ──────────────────────
|
||||
lines.push('# HELP zeavis_web_page_views_total Total page views');
|
||||
lines.push('# TYPE zeavis_web_page_views_total counter');
|
||||
lines.push(`zeavis_web_page_views_total ${pageViewCount}`);
|
||||
|
||||
lines.push('# HELP zeavis_web_vital_bucket Web Vitals observed this session');
|
||||
lines.push('# TYPE zeavis_web_vital_bucket gauge');
|
||||
for (const v of vitalsBuffer) {
|
||||
lines.push(`zeavis_web_vital_bucket{name="${v.name}",rating="${v.rating ?? 'unknown'}"} ${v.value}`);
|
||||
}
|
||||
|
||||
return lines.join('\n') + '\n';
|
||||
}
|
||||
@@ -2,6 +2,15 @@ import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { App } from "./app";
|
||||
import "./index.css";
|
||||
import { reportWebVitals } from "./lib/telemetry";
|
||||
import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";
|
||||
|
||||
// Report Web Vitals to our in-memory telemetry store
|
||||
onCLS((m) => reportWebVitals({ name: "CLS", value: m.value, rating: m.rating }));
|
||||
onFCP((m) => reportWebVitals({ name: "FCP", value: m.value, rating: m.rating }));
|
||||
onINP((m) => reportWebVitals({ name: "INP", value: m.value, rating: m.rating }));
|
||||
onLCP((m) => reportWebVitals({ name: "LCP", value: m.value, rating: m.rating }));
|
||||
onTTFB((m) => reportWebVitals({ name: "TTFB", value: m.value, rating: m.rating }));
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
|
||||
@@ -0,0 +1,570 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
BarChart3,
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Database,
|
||||
Layers,
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
BarChart,
|
||||
Bar,
|
||||
} from "recharts";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────────
|
||||
const API_BASE = "https://telemetry.imrnes.team/proxy/dashboard";
|
||||
|
||||
interface DashboardStats {
|
||||
cpu_usage: number;
|
||||
disk_usage: number;
|
||||
total_metrics: number;
|
||||
active_services: number;
|
||||
uptime_seconds: number;
|
||||
health: { disk_readonly: boolean; errors: number };
|
||||
}
|
||||
|
||||
interface DiscoveredMetric {
|
||||
metric_name: string;
|
||||
service: string;
|
||||
sample_count: number;
|
||||
latest_value: number;
|
||||
}
|
||||
|
||||
interface ChartPoint {
|
||||
time: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────
|
||||
function fmt(n: number): string {
|
||||
if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
|
||||
if (n >= 1_000) return (n / 1_000).toFixed(1) + "K";
|
||||
return n.toFixed(1);
|
||||
}
|
||||
|
||||
function fmtDuration(s: number): string {
|
||||
const d = Math.floor(s / 86400);
|
||||
const h = Math.floor((s % 86400) / 3600);
|
||||
if (d > 0) return `${d}d ${h}h`;
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
function fmtPct(v: number): string {
|
||||
return (v * 100).toFixed(1) + "%";
|
||||
}
|
||||
|
||||
// ─── API Client ──────────────────────────────────────────────────────
|
||||
class TelemetryAPI {
|
||||
private base: string;
|
||||
constructor(base: string) {
|
||||
this.base = base;
|
||||
}
|
||||
|
||||
async stats(): Promise<DashboardStats> {
|
||||
const res = await fetch(`${this.base}/stats`);
|
||||
if (!res.ok) throw new Error(`Stats API: ${res.status}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async discover(): Promise<DiscoveredMetric[]> {
|
||||
const res = await fetch(`${this.base}/discover`);
|
||||
if (!res.ok) throw new Error(`Discover API: ${res.status}`);
|
||||
const data = await res.json();
|
||||
return data.metrics ?? [];
|
||||
}
|
||||
|
||||
async charts(
|
||||
panels: { key: string; metric: string; aggregation?: string }[],
|
||||
): Promise<Map<string, ChartPoint[]>> {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const oneHourAgo = now - 3600;
|
||||
const res = await fetch(`${this.base}/charts`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
panels: panels.map((p) => ({
|
||||
key: p.key,
|
||||
metric: p.metric,
|
||||
start: oneHourAgo,
|
||||
end: now,
|
||||
aggregation: p.aggregation ?? "avg",
|
||||
})),
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error(`Charts API: ${res.status}`);
|
||||
const data = await res.json();
|
||||
const map = new Map<string, ChartPoint[]>();
|
||||
for (const r of data.results ?? []) {
|
||||
map.set(r.key, r.data ?? []);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
}
|
||||
|
||||
const api = new TelemetryAPI(API_BASE);
|
||||
|
||||
// ─── Stat Card ───────────────────────────────────────────────────────
|
||||
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">
|
||||
<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">
|
||||
<div className="text-2xl font-bold">{value}</div>
|
||||
{sub && <p className="text-xs text-slate-400 mt-1">{sub}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Metric Card ─────────────────────────────────────────────────────
|
||||
function MetricChart({
|
||||
title,
|
||||
data,
|
||||
loading,
|
||||
color,
|
||||
}: {
|
||||
title: string;
|
||||
data: ChartPoint[];
|
||||
loading: boolean;
|
||||
color: string;
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<div className="flex items-center justify-center h-40 text-slate-400 text-sm">
|
||||
Loading...
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<div className="flex items-center justify-center h-40 text-slate-400 text-sm">
|
||||
No data available
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardTitle className="text-sm font-medium">{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
<ResponsiveContainer width="100%" height={160}>
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient id={`grad-${title}`} 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) => {
|
||||
const d = new Date(v);
|
||||
return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
|
||||
}}
|
||||
/>
|
||||
<YAxis tick={{ fontSize: 10 }} />
|
||||
<Tooltip
|
||||
labelFormatter={(v) => new Date(v).toLocaleTimeString()}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
formatter={(val: any) => [typeof val === "number" ? val.toFixed(2) : String(val ?? ""), title]}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke={color}
|
||||
fill={`url(#grad-${title})`}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ───────────────────────────────────────────────────────
|
||||
export function TelemetryPage() {
|
||||
const [stats, setStats] = useState<DashboardStats | null>(null);
|
||||
const [metrics, setMetrics] = useState<DiscoveredMetric[]>([]);
|
||||
const [chartMap, setChartMap] = useState<Map<string, ChartPoint[]>>(new Map());
|
||||
const [memChartData, setMemChartData] = useState<ChartPoint[] | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const intervalRef = useRef<number | undefined>(undefined);
|
||||
|
||||
const fetchData = useCallback(async (isRefresh = false) => {
|
||||
try {
|
||||
if (isRefresh) setRefreshing(true);
|
||||
else setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const [statsData, discoverData] = await Promise.all([
|
||||
api.stats(),
|
||||
api.discover(),
|
||||
]);
|
||||
|
||||
setStats(statsData);
|
||||
setMetrics(discoverData);
|
||||
|
||||
// Fetch charts for top metrics (excluding prometheus noise)
|
||||
const topMetrics = discoverData
|
||||
.filter((m) => !m.metric_name.startsWith("prometheus_") && m.service !== "prometheus")
|
||||
.slice(0, 4);
|
||||
|
||||
const chartPanels = topMetrics.map((m) => ({
|
||||
key: m.metric_name,
|
||||
metric: m.metric_name,
|
||||
}));
|
||||
|
||||
// Built-in computations + app metrics
|
||||
chartPanels.unshift({ key: "_cpu_usage_pct", metric: "_cpu_usage_pct" });
|
||||
chartPanels.unshift({ key: "_disk_usage_pct", metric: "_disk_usage_pct" });
|
||||
|
||||
// Memory charts (raw values, % computed client-side)
|
||||
chartPanels.push({ key: "node_memory_MemTotal_bytes", metric: "node_memory_MemTotal_bytes" });
|
||||
chartPanels.push({ key: "node_memory_MemAvailable_bytes", metric: "node_memory_MemAvailable_bytes" });
|
||||
|
||||
// App-specific metrics
|
||||
for (const appMetric of ["zeavis_api_http_requests_total", "zeavis_api_http_requests_active"]) {
|
||||
if (discoverData.find((m) => m.metric_name === appMetric)) {
|
||||
chartPanels.push({ key: appMetric, metric: appMetric });
|
||||
}
|
||||
}
|
||||
|
||||
const charts = await api.charts(chartPanels);
|
||||
setChartMap(charts);
|
||||
|
||||
// Compute memory usage % = (total - available) / total
|
||||
const memTotalData = charts.get("node_memory_MemTotal_bytes");
|
||||
const memAvailData = charts.get("node_memory_MemAvailable_bytes");
|
||||
if (memTotalData && memAvailData && memTotalData.length > 0 && memAvailData.length > 0) {
|
||||
const merged: ChartPoint[] = [];
|
||||
for (let i = 0; i < Math.min(memTotalData.length, memAvailData.length); i++) {
|
||||
const total = memTotalData[i].value;
|
||||
const avail = memAvailData[i].value;
|
||||
if (total > 0) {
|
||||
merged.push({ time: memTotalData[i].time, value: 1 - avail / total });
|
||||
}
|
||||
}
|
||||
setMemChartData(merged);
|
||||
} else {
|
||||
setMemChartData([]);
|
||||
}
|
||||
setChartMap(charts);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Unknown error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
intervalRef.current = window.setInterval(() => fetchData(true), 30_000);
|
||||
return () => {
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
};
|
||||
}, [fetchData]);
|
||||
|
||||
const serviceCounts = useMemo(() => {
|
||||
const counts = new Map<string, number>();
|
||||
for (const m of metrics) {
|
||||
counts.set(m.service, (counts.get(m.service) ?? 0) + 1);
|
||||
}
|
||||
return Array.from(counts.entries()).sort((a, b) => b[1] - a[1]);
|
||||
}, [metrics]);
|
||||
|
||||
const topMetrics = useMemo(() => {
|
||||
return metrics.slice(0, 10);
|
||||
}, [metrics]);
|
||||
|
||||
if (loading && !stats) {
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !stats) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-center space-y-3 max-w-md">
|
||||
<AlertTriangle className="h-10 w-10 text-red-500 mx-auto" />
|
||||
<p className="text-sm font-semibold text-red-600">
|
||||
Failed to load telemetry data
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{error}</p>
|
||||
<button
|
||||
onClick={() => fetchData()}
|
||||
className="inline-flex items-center gap-1 rounded-full bg-[#48A111] px-4 py-2 text-sm font-semibold text-white hover:bg-[#306D29]"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<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]" />
|
||||
Telemetry Dashboard
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
System metrics from Prometheus pipeline via ClickHouse.
|
||||
{error && (
|
||||
<span className="text-amber-600 ml-2">
|
||||
(partial data — {error})
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => fetchData(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
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
{stats && (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
icon={Cpu}
|
||||
label="CPU Usage"
|
||||
value={fmtPct(stats.cpu_usage)}
|
||||
color="text-blue-600"
|
||||
/>
|
||||
<StatCard
|
||||
icon={HardDrive}
|
||||
label="Disk Usage"
|
||||
value={fmtPct(stats.disk_usage)}
|
||||
color="text-amber-600"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Database}
|
||||
label="Total Metrics"
|
||||
value={fmt(stats.total_metrics)}
|
||||
sub={`${stats.active_services} active services`}
|
||||
color="text-green-600"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Activity}
|
||||
label="Uptime"
|
||||
value={fmtDuration(stats.uptime_seconds)}
|
||||
sub={
|
||||
stats.health.errors > 0
|
||||
? `${stats.health.errors} errors`
|
||||
: "All healthy"
|
||||
}
|
||||
color={stats.health.errors > 0 ? "text-red-600" : "text-green-600"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CPU, Memory, Disk charts */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<MetricChart
|
||||
title="CPU Usage (last hour)"
|
||||
data={chartMap.get("_cpu_usage_pct") ?? []}
|
||||
loading={loading}
|
||||
color="#2563eb"
|
||||
/>
|
||||
<MetricChart
|
||||
title="Memory Usage (last hour)"
|
||||
data={memChartData ?? []}
|
||||
loading={loading}
|
||||
color="#8b5cf6"
|
||||
/>
|
||||
<MetricChart
|
||||
title="Disk Usage (last hour)"
|
||||
data={chartMap.get("_disk_usage_pct") ?? []}
|
||||
loading={loading}
|
||||
color="#f59e0b"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Application Metrics */}
|
||||
{(chartMap.has("zeavis_api_http_requests_total") || chartMap.has("zeavis_api_http_requests_active")) && (
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-[#214B11]">Application Metrics</h3>
|
||||
<div className="grid gap-4 md:grid-cols-1 lg:grid-cols-2">
|
||||
{chartMap.has("zeavis_api_http_requests_total") && (
|
||||
<MetricChart
|
||||
title="HTTP Requests Total (API)"
|
||||
data={chartMap.get("zeavis_api_http_requests_total") ?? []}
|
||||
loading={loading}
|
||||
color="#ec4899"
|
||||
/>
|
||||
)}
|
||||
{chartMap.has("zeavis_api_http_requests_active") && (
|
||||
<MetricChart
|
||||
title="Active HTTP Requests (API)"
|
||||
data={chartMap.get("zeavis_api_http_requests_active") ?? []}
|
||||
loading={loading}
|
||||
color="#14b8a6"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Top Metrics */}
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardTitle className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
|
||||
<Layers className="h-5 w-5 text-[#48A111]" />
|
||||
Top Metrics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
{topMetrics.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-400 text-sm">
|
||||
No metrics discovered yet
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-200">
|
||||
<th className="text-left py-2 px-2 font-medium text-slate-500">
|
||||
Metric
|
||||
</th>
|
||||
<th className="text-left py-2 px-2 font-medium text-slate-500">
|
||||
Service
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 font-medium text-slate-500">
|
||||
Samples
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 font-medium text-slate-500">
|
||||
Latest Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{topMetrics.map((m) => (
|
||||
<tr key={m.metric_name} className="border-b border-slate-100 hover:bg-slate-50">
|
||||
<td className="py-2 px-2 font-mono text-xs text-slate-700 max-w-[300px] truncate">
|
||||
{m.metric_name}
|
||||
</td>
|
||||
<td className="py-2 px-2">
|
||||
<span className="inline-flex items-center rounded-full bg-[#EFF6E8] px-2 py-0.5 text-xs font-medium text-[#48A111]">
|
||||
{m.service}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right text-slate-600">
|
||||
{fmt(m.sample_count)}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right font-mono text-xs text-slate-600">
|
||||
{typeof m.latest_value === "number"
|
||||
? m.latest_value.toFixed(4)
|
||||
: String(m.latest_value)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Service Distribution */}
|
||||
<Card className="border-slate-200 shadow-sm">
|
||||
<CardHeader className="pb-2 px-4 pt-4">
|
||||
<CardTitle className="text-lg font-semibold text-[#214B11] flex items-center gap-2">
|
||||
<Layers className="h-5 w-5 text-[#48A111]" />
|
||||
Services
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="px-4 pb-4">
|
||||
{serviceCounts.length === 0 ? (
|
||||
<div className="text-center py-8 text-slate-400 text-sm">
|
||||
No services discovered
|
||||
</div>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<BarChart data={serviceCounts.map(([name, count]) => ({ name, count }))}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
|
||||
<XAxis dataKey="name" tick={{ fontSize: 12 }} />
|
||||
<YAxis tick={{ fontSize: 12 }} />
|
||||
<Tooltip />
|
||||
<Bar dataKey="count" fill="#48A111" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,5 +7,5 @@
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["vite.config.ts", "tailwind.config.ts"]
|
||||
"include": ["vite.config.ts", "tailwind.config.ts", "vite-plugin-metrics.ts"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { Plugin } from 'vite';
|
||||
|
||||
/**
|
||||
* Vite plugin that exposes a /metrics endpoint during development.
|
||||
*
|
||||
* The endpoint returns Prometheus‑text metrics collected in
|
||||
* src/lib/telemetry.ts.
|
||||
*/
|
||||
export function metricsPlugin(): Plugin {
|
||||
let telemetryModule: typeof import('./src/lib/telemetry') | null = null;
|
||||
|
||||
return {
|
||||
name: 'zeavis-metrics',
|
||||
|
||||
configureServer(server) {
|
||||
server.middlewares.use(async (req, res, next) => {
|
||||
// Only handle GET /metrics
|
||||
if (req.method !== 'GET' || !req.url?.startsWith('/metrics')) {
|
||||
return next();
|
||||
}
|
||||
|
||||
// Lazy‑load the telemetry module (ensures the app is bootstrapped first)
|
||||
if (!telemetryModule) {
|
||||
try {
|
||||
telemetryModule = await server.ssrLoadModule('./src/lib/telemetry.ts') as typeof import('./src/lib/telemetry');
|
||||
} catch {
|
||||
// If the module isn't ready yet, return an empty body
|
||||
res.statusCode = 200;
|
||||
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
|
||||
res.end('# telemetry module not yet loaded\n');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const body = telemetryModule.collectMetrics();
|
||||
res.statusCode = 200;
|
||||
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
|
||||
res.end(body);
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -2,13 +2,14 @@ import react from '@vitejs/plugin-react';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import path from 'node:path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import { metricsPlugin } from './vite-plugin-metrics';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '');
|
||||
const apiProxyTarget = env.VITE_API_PROXY_TARGET || 'http://localhost:3000';
|
||||
|
||||
return {
|
||||
plugins: [react(), tsconfigPaths()],
|
||||
plugins: [react(), tsconfigPaths(), metricsPlugin()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': apiProxyTarget,
|
||||
|
||||
Reference in New Issue
Block a user