mirror of
https://github.com/praveentcom/openproxy.git
synced 2026-06-06 14:43:58 +02:00
feat: add Next.js metrics dashboard for real-time visualization
Add a lightweight Next.js dashboard to visualize OpenProxy metrics in real-time. The dashboard provides comprehensive insights into LLM API usage, costs, and performance. Features: - Real-time metrics overview (requests, tokens, costs, response times) - Model breakdown with usage statistics - Hourly trends visualization with charts - Recent requests table with detailed information - Auto-refresh every 30 seconds - Configurable time ranges (1h, 6h, 24h, 7d) Technical details: - Built with Next.js 14 and React 18 - Uses Recharts for data visualization - Connects directly to PostgreSQL database - Runs on port 3008 by default - TypeScript for type safety - Minimal dependencies for lightweight deployment The dashboard complements the proxy server by providing a user-friendly interface for monitoring and analyzing LLM API usage patterns.
This commit is contained in:
Claude
@@ -0,0 +1,119 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { Pool } from 'pg';
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL,
|
||||
});
|
||||
|
||||
const TABLE_NAME = process.env.DATABASE_TABLE || 'llm_proxy';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const hours = parseInt(searchParams.get('hours') || '24', 10);
|
||||
const limit = parseInt(searchParams.get('limit') || '100', 10);
|
||||
|
||||
try {
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
// Get summary statistics
|
||||
const summaryQuery = `
|
||||
SELECT
|
||||
COUNT(*) as total_requests,
|
||||
SUM(total_tokens) as total_tokens_used,
|
||||
SUM(total_cost) as total_cost,
|
||||
AVG(response_time) as avg_response_time,
|
||||
COUNT(DISTINCT model) as unique_models,
|
||||
COUNT(DISTINCT client_ip) as unique_clients
|
||||
FROM ${TABLE_NAME}
|
||||
WHERE timestamp >= NOW() - INTERVAL '${hours} hours'
|
||||
`;
|
||||
const summaryResult = await client.query(summaryQuery);
|
||||
const summary = summaryResult.rows[0];
|
||||
|
||||
// Get recent requests
|
||||
const recentQuery = `
|
||||
SELECT
|
||||
request_id,
|
||||
timestamp,
|
||||
model,
|
||||
prompt_tokens,
|
||||
completion_tokens,
|
||||
total_tokens,
|
||||
total_cost,
|
||||
response_time,
|
||||
response_status,
|
||||
client_ip,
|
||||
stream
|
||||
FROM ${TABLE_NAME}
|
||||
WHERE timestamp >= NOW() - INTERVAL '${hours} hours'
|
||||
ORDER BY timestamp DESC
|
||||
LIMIT ${limit}
|
||||
`;
|
||||
const recentResult = await client.query(recentQuery);
|
||||
const recentRequests = recentResult.rows;
|
||||
|
||||
// Get model breakdown
|
||||
const modelQuery = `
|
||||
SELECT
|
||||
model,
|
||||
COUNT(*) as request_count,
|
||||
SUM(total_tokens) as total_tokens,
|
||||
SUM(total_cost) as total_cost,
|
||||
AVG(response_time) as avg_response_time
|
||||
FROM ${TABLE_NAME}
|
||||
WHERE timestamp >= NOW() - INTERVAL '${hours} hours'
|
||||
GROUP BY model
|
||||
ORDER BY request_count DESC
|
||||
`;
|
||||
const modelResult = await client.query(modelQuery);
|
||||
const modelBreakdown = modelResult.rows;
|
||||
|
||||
// Get hourly trends
|
||||
const trendsQuery = `
|
||||
SELECT
|
||||
DATE_TRUNC('hour', timestamp) as hour,
|
||||
COUNT(*) as requests,
|
||||
SUM(total_tokens) as tokens,
|
||||
SUM(total_cost) as cost,
|
||||
AVG(response_time) as avg_response_time
|
||||
FROM ${TABLE_NAME}
|
||||
WHERE timestamp >= NOW() - INTERVAL '${hours} hours'
|
||||
GROUP BY hour
|
||||
ORDER BY hour ASC
|
||||
`;
|
||||
const trendsResult = await client.query(trendsQuery);
|
||||
const hourlyTrends = trendsResult.rows;
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
data: {
|
||||
summary: {
|
||||
totalRequests: parseInt(summary.total_requests || '0'),
|
||||
totalTokens: parseInt(summary.total_tokens_used || '0'),
|
||||
totalCost: parseFloat(summary.total_cost || '0'),
|
||||
avgResponseTime: parseFloat(summary.avg_response_time || '0'),
|
||||
uniqueModels: parseInt(summary.unique_models || '0'),
|
||||
uniqueClients: parseInt(summary.unique_clients || '0'),
|
||||
},
|
||||
recentRequests,
|
||||
modelBreakdown,
|
||||
hourlyTrends,
|
||||
},
|
||||
timeRange: `${hours} hours`,
|
||||
});
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Database error:', error);
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Failed to fetch metrics',
|
||||
details: error instanceof Error ? error.message : 'Unknown error'
|
||||
},
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'OpenProxy Metrics Dashboard',
|
||||
description: 'Real-time metrics and analytics for OpenProxy LLM requests',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style>{`
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
color: #2c3e50;
|
||||
line-height: 1.6;
|
||||
}
|
||||
`}</style>
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import MetricsOverview from '@/components/MetricsOverview';
|
||||
import ModelBreakdown from '@/components/ModelBreakdown';
|
||||
import RecentRequests from '@/components/RecentRequests';
|
||||
import TrendsChart from '@/components/TrendsChart';
|
||||
|
||||
interface MetricsData {
|
||||
summary: {
|
||||
totalRequests: number;
|
||||
totalTokens: number;
|
||||
totalCost: number;
|
||||
avgResponseTime: number;
|
||||
uniqueModels: number;
|
||||
uniqueClients: number;
|
||||
};
|
||||
recentRequests: any[];
|
||||
modelBreakdown: any[];
|
||||
hourlyTrends: any[];
|
||||
}
|
||||
|
||||
export default function Dashboard() {
|
||||
const [data, setData] = useState<MetricsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [timeRange, setTimeRange] = useState(24);
|
||||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||||
|
||||
const fetchMetrics = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/metrics?hours=${timeRange}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
setData(result.data);
|
||||
setError(null);
|
||||
} else {
|
||||
setError(result.error || 'Failed to fetch metrics');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Network error: Unable to fetch metrics');
|
||||
console.error('Fetch error:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchMetrics();
|
||||
}, [timeRange]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoRefresh) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
fetchMetrics();
|
||||
}, 30000); // Refresh every 30 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [autoRefresh, timeRange]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.loading}>Loading metrics...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.error}>
|
||||
<h2>Error</h2>
|
||||
<p>{error}</p>
|
||||
<button onClick={fetchMetrics} style={styles.retryButton}>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.error}>No data available</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<header style={styles.header}>
|
||||
<h1 style={styles.title}>OpenProxy Metrics Dashboard</h1>
|
||||
<div style={styles.controls}>
|
||||
<select
|
||||
value={timeRange}
|
||||
onChange={(e) => setTimeRange(parseInt(e.target.value))}
|
||||
style={styles.select}
|
||||
>
|
||||
<option value={1}>Last Hour</option>
|
||||
<option value={6}>Last 6 Hours</option>
|
||||
<option value={24}>Last 24 Hours</option>
|
||||
<option value={168}>Last 7 Days</option>
|
||||
</select>
|
||||
<label style={styles.checkboxLabel}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRefresh}
|
||||
onChange={(e) => setAutoRefresh(e.target.checked)}
|
||||
/>
|
||||
Auto-refresh (30s)
|
||||
</label>
|
||||
<button onClick={fetchMetrics} style={styles.refreshButton}>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main style={styles.main}>
|
||||
<MetricsOverview summary={data.summary} />
|
||||
<TrendsChart trends={data.hourlyTrends} />
|
||||
<ModelBreakdown models={data.modelBreakdown} />
|
||||
<RecentRequests requests={data.recentRequests} />
|
||||
</main>
|
||||
|
||||
<footer style={styles.footer}>
|
||||
<p>Last updated: {new Date().toLocaleString()}</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#f5f7fa',
|
||||
},
|
||||
header: {
|
||||
backgroundColor: '#fff',
|
||||
padding: '1.5rem 2rem',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap' as const,
|
||||
gap: '1rem',
|
||||
},
|
||||
title: {
|
||||
fontSize: '1.8rem',
|
||||
color: '#2c3e50',
|
||||
fontWeight: 600,
|
||||
},
|
||||
controls: {
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
alignItems: 'center',
|
||||
},
|
||||
select: {
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #ddd',
|
||||
fontSize: '0.9rem',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
checkboxLabel: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
fontSize: '0.9rem',
|
||||
},
|
||||
refreshButton: {
|
||||
padding: '0.5rem 1.5rem',
|
||||
backgroundColor: '#3498db',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: 500,
|
||||
},
|
||||
main: {
|
||||
maxWidth: '1400px',
|
||||
margin: '0 auto',
|
||||
padding: '2rem',
|
||||
},
|
||||
loading: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
fontSize: '1.2rem',
|
||||
color: '#7f8c8d',
|
||||
},
|
||||
error: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
gap: '1rem',
|
||||
color: '#e74c3c',
|
||||
},
|
||||
retryButton: {
|
||||
padding: '0.5rem 1.5rem',
|
||||
backgroundColor: '#e74c3c',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
},
|
||||
footer: {
|
||||
textAlign: 'center' as const,
|
||||
padding: '2rem',
|
||||
color: '#7f8c8d',
|
||||
fontSize: '0.9rem',
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user