Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend
This commit is contained in:
seriouselly
@@ -1,241 +0,0 @@
|
||||
name: Telemetry CI/CD — Build & Deploy to Orange VPS
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main, master]
|
||||
paths:
|
||||
- 'telemetry/**'
|
||||
- '.github/workflows/telemetry-ci-cd.yml'
|
||||
workflow_dispatch:
|
||||
|
||||
env:
|
||||
GHCR_REGISTRY: ghcr.io
|
||||
METRIC_INGESTER_IMAGE: mytheclipse/telemetry-metric-ingester
|
||||
QUERY_PROXY_IMAGE: mytheclipse/telemetry-query-proxy
|
||||
|
||||
jobs:
|
||||
##############################################################################
|
||||
# BUILD: Metric Ingester (Go service)
|
||||
##############################################################################
|
||||
build-metric-ingester:
|
||||
name: Build - Metric Ingester
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
|
||||
- uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Log in to GHCR
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ env.GHCR_REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GHCR_PAT }}
|
||||
|
||||
- name: Docker metadata
|
||||
id: meta
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: ${{ env.GHCR_REGISTRY }}/${{ env.METRIC_INGESTER_IMAGE }}
|
||||
tags: |
|
||||
type=sha,prefix=,suffix=,format=short
|
||||
|
||||
- name: Build & push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
push: true
|
||||
file: telemetry/deploy/Dockerfile.metric-ingester
|
||||
context: telemetry
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
##############################################################################
|
||||
# BUILD: Query Proxy (Go service)
|
||||
##############################################################################
|
||||
build-query-proxy:
|
||||
name: Build - Query Proxy
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
|
||||
- uses: docker/setup-buildx-action@v3
|
||||
|
||||
- name: Log in to GHCR
|
||||
uses: docker/login-action@v3
|
||||
with:
|
||||
registry: ${{ env.GHCR_REGISTRY }}
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GHCR_PAT }}
|
||||
|
||||
- name: Docker metadata
|
||||
id: meta
|
||||
uses: docker/metadata-action@v5
|
||||
with:
|
||||
images: ${{ env.GHCR_REGISTRY }}/${{ env.QUERY_PROXY_IMAGE }}
|
||||
tags: |
|
||||
type=sha,prefix=,suffix=,format=short
|
||||
|
||||
- name: Build & push
|
||||
uses: docker/build-push-action@v6
|
||||
with:
|
||||
push: true
|
||||
file: telemetry/deploy/Dockerfile.query-proxy
|
||||
context: telemetry
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
cache-from: type=gha
|
||||
cache-to: type=gha,mode=max
|
||||
|
||||
##############################################################################
|
||||
# BUILD: Telemetry UI (Vue 3 SPA build verification)
|
||||
##############################################################################
|
||||
build-telemetry-ui:
|
||||
name: Build - Telemetry UI SPA
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '22'
|
||||
cache: 'npm'
|
||||
cache-dependency-path: telemetry/telemetry-ui/package-lock.json
|
||||
|
||||
- run: cd telemetry/telemetry-ui && npm ci
|
||||
- run: cd telemetry/telemetry-ui && npm run build
|
||||
- run: echo "Telemetry UI SPA built and verified."
|
||||
|
||||
##############################################################################
|
||||
# DEPLOY: to Orange VPS (100.96.248.86)
|
||||
##############################################################################
|
||||
deploy:
|
||||
name: Deploy to Orange VPS
|
||||
needs:
|
||||
- build-metric-ingester
|
||||
- build-query-proxy
|
||||
- build-telemetry-ui
|
||||
runs-on: ubuntu-latest
|
||||
if: |
|
||||
always()
|
||||
&& !cancelled()
|
||||
&& !contains(needs.*.result, 'failure')
|
||||
&& (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: recursive
|
||||
|
||||
- name: git short-sha
|
||||
id: sha
|
||||
run: echo "sha=$(echo ${{ github.sha }} | cut -c1-7)" >> "$GITHUB_OUTPUT"
|
||||
|
||||
- name: Build Telemetry UI SPA
|
||||
working-directory: telemetry/telemetry-ui
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Deploy via SSH
|
||||
env:
|
||||
VPS_HOST: ${{ secrets.TELEMETRY_VPS_HOST }}
|
||||
VPS_PORT: ${{ secrets.TELEMETRY_VPS_PORT || '22' }}
|
||||
VPS_USER: ${{ secrets.TELEMETRY_VPS_USER }}
|
||||
GHCR_PAT: ${{ secrets.GHCR_PAT }}
|
||||
SHA: ${{ steps.sha.outputs.sha }}
|
||||
run: |
|
||||
# Setup SSH key
|
||||
mkdir -p ~/.ssh
|
||||
echo "${{ secrets.TELEMETRY_VPS_SSH_KEY }}" > ~/.ssh/id_ed25519
|
||||
chmod 600 ~/.ssh/id_ed25519
|
||||
ssh-keyscan -p "$VPS_PORT" "$VPS_HOST" >> ~/.ssh/known_hosts 2>/dev/null
|
||||
|
||||
# Prepare directories on VPS
|
||||
ssh -p "$VPS_PORT" "$VPS_USER@$VPS_HOST" "mkdir -p /opt/telemetry"
|
||||
|
||||
# Sync config files
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/prometheus/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/prometheus/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/metric-ingester/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/metric-ingester/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/vector/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/vector/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/clickhouse/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/clickhouse/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/query-proxy/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/query-proxy/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/telemetry-ui/dist/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/telemetry-ui/dist/"
|
||||
|
||||
rsync -avz --delete -e "ssh -p $VPS_PORT" \
|
||||
telemetry/deploy/nginx/ \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/nginx/"
|
||||
|
||||
# Copy and prepare docker-compose.yml
|
||||
scp -P "$VPS_PORT" telemetry/deploy/docker-compose.yml \
|
||||
"$VPS_USER@$VPS_HOST:/opt/telemetry/docker-compose.yml"
|
||||
|
||||
# Run deploy on VPS
|
||||
ssh -p "$VPS_PORT" "$VPS_USER@$VPS_HOST" bash -s << 'DEPLOYEOF'
|
||||
set -e
|
||||
echo '=== Telemetry Deploy to Orange VPS ==='
|
||||
|
||||
cd /opt/telemetry
|
||||
|
||||
# Create .env with secrets (injected by GHA)
|
||||
cat > .env << ENVEOF
|
||||
CLICKHOUSE_USER=${CLICKHOUSE_USER:-telemetry}
|
||||
CLICKHOUSE_PASSWORD=${CLICKHOUSE_PASSWORD:-telemetry}
|
||||
ENVEOF
|
||||
|
||||
# Login to GHCR
|
||||
echo '${{ secrets.GHCR_PAT }}' | docker login ghcr.io -u '${{ github.actor }}' --password-stdin
|
||||
|
||||
# Rewrite docker-compose to use SHA-tagged images
|
||||
SHA='${{ steps.sha.outputs.sha }}'
|
||||
TMP_FILE=$(mktemp /tmp/telemetry-compose-XXXXXX)
|
||||
awk -v sha="$SHA" '
|
||||
/^[[:space:]]*image:[[:space:]]+ghcr.io\/[Mm]ythe?[Ee]clipse\/telemetry-/ {
|
||||
sub(/:([^:]*)$/, ":" sha)
|
||||
}
|
||||
{ print }
|
||||
' docker-compose.yml > "$TMP_FILE"
|
||||
mv "$TMP_FILE" docker-compose.yml
|
||||
|
||||
# Pull SHA-tagged images
|
||||
docker pull "ghcr.io/mytheclipse/telemetry-metric-ingester:$SHA" || true
|
||||
docker pull "ghcr.io/mytheclipse/telemetry-query-proxy:$SHA" || true
|
||||
|
||||
# Tear down old stack (preserve volumes)
|
||||
docker compose down --remove-orphans --volumes=false 2>/dev/null || true
|
||||
|
||||
# Deploy fresh
|
||||
docker compose up -d --remove-orphans --no-build
|
||||
sleep 5
|
||||
|
||||
# Run ClickHouse schema migration
|
||||
echo '=== Running ClickHouse schema migration ==='
|
||||
bash clickhouse/init.sh 2>&1 || echo '⚠️ Schema migration had issues (non-fatal)'
|
||||
echo '=== Schema migration complete ==='
|
||||
|
||||
docker compose ps
|
||||
echo '=== Deploy Complete ==='
|
||||
DEPLOYEOF
|
||||
@@ -14,7 +14,8 @@ export const env = {
|
||||
port: Number(Bun.env.API_PORT ?? 3000),
|
||||
databaseUrl: Bun.env.DATABASE_URL,
|
||||
sessionSecret: Bun.env.SESSION_SECRET,
|
||||
uploaderBaseUrl: Bun.env.UPLOADER_BASE_URL ?? 'https://upload.asepharyana.tech',
|
||||
uploaderBaseUrl: Bun.env.UPLOADER_BASE_URL ?? 'https://upload.asepharyana.my.id',
|
||||
// Note: was 'https://upload.asepharyana.tech' — .tech domain is dead, changed to .my.id
|
||||
mlServiceUrl: Bun.env.ML_SERVICE_URL ?? 'http://127.0.0.1:8001',
|
||||
uploadMaxBytes: Number(Bun.env.UPLOAD_MAX_BYTES ?? 5 * 1024 * 1024),
|
||||
uploadAllowedMimeTypes,
|
||||
|
||||
@@ -44,6 +44,14 @@ export const diagnosisCounter = new Counter({
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const diagnosisUploadSize = new Histogram({
|
||||
name: 'zeavis_api_diagnosis_upload_bytes',
|
||||
help: 'Distribution of uploaded diagnosis image sizes in bytes',
|
||||
labelNames: ['status'] as const,
|
||||
buckets: [1024, 51200, 102400, 204800, 512000, 1048576, 2097152, 5242880],
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const authCounter = new Counter({
|
||||
name: 'zeavis_api_auth_operations_total',
|
||||
help: 'Total authentication operations (login, register, refresh)',
|
||||
@@ -51,6 +59,43 @@ export const authCounter = new Counter({
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const diseaseCatalogRequests = new Counter({
|
||||
name: 'zeavis_api_disease_catalog_requests_total',
|
||||
help: 'Total disease catalog page views',
|
||||
labelNames: ['type'] as const, // 'list' | 'detail'
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const expertReviewCounter = new Counter({
|
||||
name: 'zeavis_api_expert_reviews_total',
|
||||
help: 'Total expert reviews submitted',
|
||||
labelNames: ['verdict'] as const, // 'verified' | 'corrected'
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const dbQueryDuration = new Histogram({
|
||||
name: 'zeavis_api_db_query_duration_seconds',
|
||||
help: 'Histogram of database query durations',
|
||||
labelNames: ['operation'] as const,
|
||||
buckets: [0.001, 0.005, 0.01, 0.05, 0.1, 0.25, 0.5, 1],
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const imageModelInferenceDuration = new Histogram({
|
||||
name: 'zeavis_api_ml_inference_duration_seconds',
|
||||
help: 'Histogram of ML model inference durations (via API->ML service)',
|
||||
labelNames: ['result'] as const, // 'success' | 'failure'
|
||||
buckets: [0.05, 0.1, 0.25, 0.5, 0.75, 1, 2, 5, 10],
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
export const mlServiceRequests = new Counter({
|
||||
name: 'zeavis_api_ml_service_requests_total',
|
||||
help: 'Total requests forwarded to ML service',
|
||||
labelNames: ['status'] as const, // 'success' | 'error'
|
||||
registers: [registry],
|
||||
});
|
||||
|
||||
// ── Export ──────────────────────────────────────────────
|
||||
|
||||
export function getMetricsContentType(): string {
|
||||
|
||||
@@ -130,18 +130,33 @@ pub async fn predict(
|
||||
};
|
||||
|
||||
// Preprocess the image
|
||||
let preprocess_start = std::time::Instant::now();
|
||||
let input = preprocess_image(&bytes, state.model.input_size())?;
|
||||
|
||||
// Run prediction
|
||||
let prediction = state.model.predict(input)?;
|
||||
// Record image size metric
|
||||
telemetry::image_size_bytes().observe(bytes.len() as f64);
|
||||
|
||||
// Record business and request telemetry
|
||||
// Run prediction with timing
|
||||
let inference_start = std::time::Instant::now();
|
||||
let prediction = state.model.predict(input)?;
|
||||
telemetry::inference_duration_seconds().observe(inference_start.elapsed().as_secs_f64());
|
||||
|
||||
// Record business telemetry
|
||||
telemetry::predictions_total().inc();
|
||||
telemetry::predictions_by_class()
|
||||
.with_label_values(&[&prediction.label])
|
||||
.inc();
|
||||
telemetry::predictions_confidence().observe(prediction.confidence as f64);
|
||||
_guard.finish();
|
||||
|
||||
Ok(Json(prediction_response(prediction)))
|
||||
}
|
||||
|
||||
/// Helper to record errors from route handlers
|
||||
pub fn record_error(kind: &str) {
|
||||
telemetry::errors_total().with_label_values(&[kind]).inc();
|
||||
}
|
||||
|
||||
pub fn router(state: AppState) -> Router {
|
||||
Router::new()
|
||||
.route("/health", get(health))
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
use prometheus::{Counter, Gauge, Histogram, HistogramOpts, Registry, TextEncoder};
|
||||
use prometheus::{Counter, CounterVec, Gauge, Histogram, HistogramOpts, HistogramVec, Opts, Registry, TextEncoder};
|
||||
use std::sync::OnceLock;
|
||||
use std::time::Instant;
|
||||
|
||||
@@ -78,6 +78,76 @@ define_metric!(
|
||||
.expect("create gauge")
|
||||
);
|
||||
|
||||
/// Per-class prediction counter
|
||||
define_metric!(
|
||||
predictions_by_class,
|
||||
CounterVec,
|
||||
CounterVec::new(
|
||||
Opts::new(
|
||||
"zeavis_ml_predictions_by_class_total",
|
||||
"Total predictions by predicted class label",
|
||||
),
|
||||
&["label"],
|
||||
)
|
||||
.expect("create counter_vec")
|
||||
);
|
||||
|
||||
/// Per-class ground-truth counter (for monitoring label distribution)
|
||||
define_metric!(
|
||||
predictions_confidence,
|
||||
Histogram,
|
||||
Histogram::with_opts(
|
||||
HistogramOpts::new(
|
||||
"zeavis_ml_prediction_confidence",
|
||||
"Confidence values of predictions",
|
||||
)
|
||||
.buckets(vec![0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 0.99, 1.0]),
|
||||
)
|
||||
.expect("create histogram")
|
||||
);
|
||||
|
||||
/// Latency of ONNX inference (model.predict call)
|
||||
define_metric!(
|
||||
inference_duration_seconds,
|
||||
Histogram,
|
||||
Histogram::with_opts(
|
||||
HistogramOpts::new(
|
||||
"zeavis_ml_inference_duration_seconds",
|
||||
"ONNX model inference duration in seconds",
|
||||
)
|
||||
.buckets(vec![0.01, 0.025, 0.05, 0.1, 0.2, 0.3, 0.5, 0.75, 1.0, 2.0]),
|
||||
)
|
||||
.expect("create histogram")
|
||||
);
|
||||
|
||||
/// Image size processed by the ML service
|
||||
define_metric!(
|
||||
image_size_bytes,
|
||||
Histogram,
|
||||
Histogram::with_opts(
|
||||
HistogramOpts::new(
|
||||
"zeavis_ml_image_size_bytes",
|
||||
"Size of images sent for prediction in bytes",
|
||||
)
|
||||
.buckets(vec![1024.0, 10240.0, 51200.0, 102400.0, 204800.0, 512000.0, 1048576.0, 2097152.0]),
|
||||
)
|
||||
.expect("create histogram")
|
||||
);
|
||||
|
||||
/// Error counter by error kind (e.g. bad_request, model_error, internal)
|
||||
define_metric!(
|
||||
errors_total,
|
||||
CounterVec,
|
||||
CounterVec::new(
|
||||
Opts::new(
|
||||
"zeavis_ml_errors_total",
|
||||
"Total errors by kind",
|
||||
),
|
||||
&["kind"],
|
||||
)
|
||||
.expect("create counter_vec")
|
||||
);
|
||||
|
||||
// ── Request Guard (Drop-based cleanup for active gauge) ─
|
||||
|
||||
pub struct RequestMetricsGuard {
|
||||
|
||||
+13
-1
@@ -37,7 +37,7 @@ function LogoutProses() {
|
||||
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
import { trackPageView } from "./lib/telemetry";
|
||||
import { trackPageView, trackError } from "./lib/telemetry";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
@@ -149,11 +149,23 @@ function PageViewTracker() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function GlobalErrorTracker() {
|
||||
useEffect(() => {
|
||||
const handler = (event: ErrorEvent) => {
|
||||
trackError(event.filename || "global");
|
||||
};
|
||||
window.addEventListener("error", handler);
|
||||
return () => window.removeEventListener("error", handler);
|
||||
}, []);
|
||||
return null;
|
||||
}
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthInitializer />
|
||||
<PageViewTracker />
|
||||
<GlobalErrorTracker />
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
@@ -12,6 +12,7 @@ import type {
|
||||
ReviewDiagnosisRequest,
|
||||
DashboardSummary,
|
||||
} from '@zeavis/shared';
|
||||
import { recordApiCall } from './telemetry';
|
||||
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? '';
|
||||
|
||||
@@ -21,6 +22,7 @@ export interface ApiError extends Error {
|
||||
}
|
||||
|
||||
async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
|
||||
const start = performance.now();
|
||||
const url = `${apiBaseUrl}${endpoint}`;
|
||||
const response = await fetch(url, {
|
||||
credentials: 'include',
|
||||
@@ -28,6 +30,10 @@ async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T>
|
||||
headers: options?.headers,
|
||||
});
|
||||
|
||||
const duration = performance.now() - start;
|
||||
const method = options?.method ?? 'GET';
|
||||
recordApiCall(method, endpoint, duration, response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `HTTP ${response.status}`;
|
||||
let source: 'uploader' | 'model-service' | 'unknown' | undefined;
|
||||
|
||||
@@ -2,8 +2,10 @@
|
||||
* 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).
|
||||
* via a Vite plugin. In production they are served through the same plugin
|
||||
* (or proxied by nginx in production mode).
|
||||
*
|
||||
* Metric name prefix: zeavis_web_
|
||||
*/
|
||||
|
||||
// ── Web Vitals ──────────────────────────────────────────
|
||||
@@ -18,35 +20,99 @@ 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'})`);
|
||||
if (vitalsBuffer.length > 30) vitalsBuffer.splice(0, vitalsBuffer.length - 30);
|
||||
}
|
||||
|
||||
// ── Page‑view counter ───────────────────────────────────
|
||||
|
||||
let pageViewCount = 0;
|
||||
const routeViews: Record<string, number> = {};
|
||||
|
||||
export function trackPageView(path: string): void {
|
||||
pageViewCount++;
|
||||
console.debug(`[telemetry] pageview: ${path} (total: ${pageViewCount})`);
|
||||
routeViews[path] = (routeViews[path] || 0) + 1;
|
||||
}
|
||||
|
||||
// ── Metrics serialisation (consumed by vite‑plugin) ────
|
||||
// ── API call timing ─────────────────────────────────────
|
||||
// Track how long API calls take from the browser side
|
||||
|
||||
const apiLatencies: number[] = [];
|
||||
const MAX_API_SAMPLES = 100;
|
||||
|
||||
export function recordApiCall(method: string, path: string, durationMs: number, status: number): void {
|
||||
apiLatencies.push(durationMs);
|
||||
if (apiLatencies.length > MAX_API_SAMPLES) apiLatencies.shift();
|
||||
console.debug(`[telemetry] api ${method} ${path} → ${status} (${durationMs.toFixed(0)}ms)`);
|
||||
}
|
||||
|
||||
// ── Error tracking (client-side JS errors) ──────────────
|
||||
|
||||
let errorCount = 0;
|
||||
|
||||
export function trackError(source: string): void {
|
||||
errorCount++;
|
||||
console.debug(`[telemetry] error from ${source} (total: ${errorCount})`);
|
||||
}
|
||||
|
||||
// ── Diagnosis actions ───────────────────────────────────
|
||||
|
||||
let scanCount = 0;
|
||||
let diagnosisSuccess = 0;
|
||||
let diagnosisFailure = 0;
|
||||
|
||||
export function trackScan(): void {
|
||||
scanCount++;
|
||||
}
|
||||
|
||||
export function trackDiagnosisResult(success: boolean): void {
|
||||
if (success) diagnosisSuccess++;
|
||||
else diagnosisFailure++;
|
||||
}
|
||||
|
||||
// ── 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}`);
|
||||
lines.push('# HELP zeavis_web_route_views_total Page views per route');
|
||||
lines.push('# TYPE zeavis_web_route_views_total counter');
|
||||
for (const [route, count] of Object.entries(routeViews)) {
|
||||
lines.push(`zeavis_web_route_views_total{route="${route}"} ${count}`);
|
||||
}
|
||||
|
||||
lines.push('# HELP zeavis_web_vital Web Vitals observed this session');
|
||||
lines.push('# TYPE zeavis_web_vital gauge');
|
||||
for (const v of vitalsBuffer) {
|
||||
lines.push(`zeavis_web_vital{name="${v.name}",rating="${v.rating ?? 'unknown'}"} ${v.value}`);
|
||||
}
|
||||
|
||||
if (apiLatencies.length > 0) {
|
||||
const avg = apiLatencies.reduce((a, b) => a + b, 0) / apiLatencies.length;
|
||||
lines.push('# HELP zeavis_web_api_call_duration_ms Average API call duration from browser');
|
||||
lines.push('# TYPE zeavis_web_api_call_duration_ms gauge');
|
||||
lines.push(`zeavis_web_api_call_duration_ms ${avg.toFixed(2)}`);
|
||||
}
|
||||
|
||||
lines.push('# HELP zeavis_web_client_errors_total Client-side JS errors');
|
||||
lines.push('# TYPE zeavis_web_client_errors_total counter');
|
||||
lines.push(`zeavis_web_client_errors_total ${errorCount}`);
|
||||
|
||||
lines.push('# HELP zeavis_web_scans_total Scan button clicks');
|
||||
lines.push('# TYPE zeavis_web_scans_total counter');
|
||||
lines.push(`zeavis_web_scans_total ${scanCount}`);
|
||||
|
||||
lines.push('# HELP zeavis_web_diagnoses_total Diagnosis results from browser');
|
||||
lines.push('# TYPE zeavis_web_diagnoses_total counter');
|
||||
lines.push(`zeavis_web_diagnoses_total{result="success"} ${diagnosisSuccess}`);
|
||||
lines.push(`zeavis_web_diagnoses_total{result="failure"} ${diagnosisFailure}`);
|
||||
|
||||
lines.push('# HELP zeavis_web_active_users User activity (1 = active this session)');
|
||||
lines.push('# TYPE zeavis_web_active_users gauge');
|
||||
lines.push(`zeavis_web_active_users 1`);
|
||||
|
||||
return lines.join('\n') + '\n';
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import { Modal } from "@/components/ui/modal";
|
||||
import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
|
||||
import type { DiagnosisRecord } from "@zeavis/shared";
|
||||
import { apiClient } from "@/lib/api-client";
|
||||
import { trackScan, trackDiagnosisResult } from "@/lib/telemetry";
|
||||
|
||||
export function ScanPage() {
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
@@ -31,6 +32,7 @@ export function ScanPage() {
|
||||
const mutation = useMutation({
|
||||
mutationFn: (file: File) => apiClient.createDiagnosis(file),
|
||||
onSuccess: (diagnosis) => {
|
||||
trackDiagnosisResult(diagnosis.status !== "failed");
|
||||
queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
|
||||
setDiagnosisPreview(diagnosis);
|
||||
setPreviewOpen(true);
|
||||
@@ -38,6 +40,9 @@ export function ScanPage() {
|
||||
setPreviewUrl(null);
|
||||
if (inputRef.current) inputRef.current.value = "";
|
||||
},
|
||||
onError: () => {
|
||||
trackDiagnosisResult(false);
|
||||
},
|
||||
});
|
||||
|
||||
const handleFile = (f?: File) => {
|
||||
@@ -61,6 +66,7 @@ export function ScanPage() {
|
||||
const handleUpload = () => {
|
||||
const file = inputRef.current?.files?.[0];
|
||||
if (!file) return;
|
||||
trackScan();
|
||||
mutation.mutate(file);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,229 +1,119 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
BarChart3,
|
||||
Activity,
|
||||
Cpu,
|
||||
HardDrive,
|
||||
Database,
|
||||
Layers,
|
||||
RefreshCw,
|
||||
AlertTriangle,
|
||||
BarChart3, Activity, Cpu, HardDrive, Database,
|
||||
RefreshCw, Server, Wifi, Layers,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
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";
|
||||
// ─── Prometheus API ─────────────────────────────────────────────────
|
||||
const PROM = "https://telemetry.imrnes.team/prometheus/api/v1";
|
||||
const INST = "100.96.248.86"; // orange VPS
|
||||
|
||||
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 {
|
||||
interface PromValue {
|
||||
time: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
async function queryRange(query: string, steps = 60): Promise<PromValue[]> {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const start = now - 3600;
|
||||
const q = `query=${encodeURIComponent(query)}&start=${start}&end=${now}&step=${steps}`;
|
||||
const res = await fetch(`${PROM}/query_range?${q}`);
|
||||
if (!res.ok) throw new Error(`Prometheus: ${res.status}`);
|
||||
const data = await res.json();
|
||||
const results = data?.data?.result ?? [];
|
||||
if (results.length === 0) return [];
|
||||
return results[0].values.map((v: [number, string]) => ({
|
||||
time: new Date(v[0] * 1000).toISOString(),
|
||||
value: parseFloat(v[1]),
|
||||
}));
|
||||
}
|
||||
|
||||
async function queryInstant(query: string): Promise<number | null> {
|
||||
const res = await fetch(`${PROM}/query?query=${encodeURIComponent(query)}`);
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json();
|
||||
const results = data?.data?.result ?? [];
|
||||
if (results.length === 0) return null;
|
||||
return parseFloat(results[0].value[1]);
|
||||
}
|
||||
|
||||
// ─── 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) + "%";
|
||||
return v.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;
|
||||
}
|
||||
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";
|
||||
}
|
||||
|
||||
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;
|
||||
// ─── 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">
|
||||
<CardTitle className="text-sm font-medium text-slate-500">
|
||||
{label}
|
||||
</CardTitle>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Metric Card ─────────────────────────────────────────────────────
|
||||
function MetricChart({
|
||||
title,
|
||||
data,
|
||||
loading,
|
||||
color,
|
||||
}: {
|
||||
title: string;
|
||||
data: ChartPoint[];
|
||||
loading: boolean;
|
||||
color: string;
|
||||
function ChartCard({ title, data, color, unit = "", domain, valueFormatter }: {
|
||||
title: string; data: PromValue[]; color: string; unit?: string; domain?: [number, number];
|
||||
valueFormatter?: (v: number) => 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">
|
||||
<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-40 text-slate-400 text-sm">
|
||||
No data available
|
||||
</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={160}>
|
||||
<CardContent className="px-4 pb-3">
|
||||
<ResponsiveContainer width="100%" height={120}>
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient id={`grad-${title}`} 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) => {
|
||||
const d = new Date(v);
|
||||
return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
|
||||
}}
|
||||
/>
|
||||
<YAxis tick={{ fontSize: 10 }} />
|
||||
<XAxis dataKey="time" tick={{ fontSize: 9 }} hide />
|
||||
<YAxis domain={domain ?? ["auto", "auto"]} tick={{ fontSize: 9 }} unit={unit} />
|
||||
<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}
|
||||
formatter={(val: unknown) => {
|
||||
const v = typeof val === "number" ? val : 0;
|
||||
return [valueFormatter ? valueFormatter(v) : v.toFixed(2), title];
|
||||
}}
|
||||
/>
|
||||
<Area type="monotone" dataKey="value" stroke={color}
|
||||
fill={`url(#g-${title.replace(/\s+/g, "")})`} strokeWidth={2} />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</CardContent>
|
||||
@@ -231,76 +121,141 @@ function MetricChart({
|
||||
);
|
||||
}
|
||||
|
||||
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() {
|
||||
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);
|
||||
// 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 [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);
|
||||
const intervalRef = useRef<number | undefined>(undefined);
|
||||
const intRef = useRef<number>(0);
|
||||
|
||||
const fetchData = useCallback(async (isRefresh = false) => {
|
||||
const fetchAll = useCallback(async (isRefresh = false) => {
|
||||
try {
|
||||
if (isRefresh) setRefreshing(true);
|
||||
else setLoading(true);
|
||||
if (isRefresh) setRefreshing(true); else setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const [statsData, discoverData] = await Promise.all([
|
||||
api.stats(),
|
||||
api.discover(),
|
||||
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"}`),
|
||||
]);
|
||||
|
||||
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);
|
||||
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 {
|
||||
@@ -310,57 +265,17 @@ export function TelemetryPage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
intervalRef.current = window.setInterval(() => fetchData(true), 30_000);
|
||||
return () => {
|
||||
if (intervalRef.current) clearInterval(intervalRef.current);
|
||||
};
|
||||
}, [fetchData]);
|
||||
fetchAll();
|
||||
intRef.current = window.setInterval(() => fetchAll(true), 30_000);
|
||||
return () => clearInterval(intRef.current);
|
||||
}, [fetchAll]);
|
||||
|
||||
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) {
|
||||
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>
|
||||
</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 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>
|
||||
);
|
||||
@@ -372,199 +287,82 @@ 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">
|
||||
System metrics from Prometheus pipeline via ClickHouse.
|
||||
{error && (
|
||||
<span className="text-amber-600 ml-2">
|
||||
(partial data — {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={() => 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 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 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"
|
||||
/>
|
||||
{/* ===== 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>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
{/* ===== 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>
|
||||
|
||||
{/* 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>
|
||||
{/* ===== 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>
|
||||
|
||||
{/* 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>
|
||||
{/* ===== 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"
|
||||
valueFormatter={(v) => (v / 1024 / 1024).toFixed(1) + " MiB"} />
|
||||
<ChartCard title="Event Loop Lag" data={elLagData} color="#eab308"
|
||||
valueFormatter={(v) => (v * 1000).toFixed(2) + " ms"} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user