@geekmidas/studio 0.2.0 → 0.4.0

package/ui/src/pages/PerformancePage.tsx

@@ -0,0 +1,307 @@
+import {
+	AreaTimeSeriesChart,
+	Badge,
+	BarListChart,
+	createTimeRange,
+	LatencyPercentilesChart,
+	MetricCard,
+	StatusDistributionChart,
+	type TimeRange,
+	TimeRangeSelector,
+} from '@geekmidas/ui';
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getEndpointMetrics, getMetrics, getStatusDistribution } from '../api';
+import type {
+	EndpointMetrics,
+	RequestMetrics,
+	StatusDistribution,
+} from '../types';
+
+function formatDuration(ms: number): string {
+	if (ms < 1) return '<1ms';
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function formatNumber(n: number): string {
+	if (n < 1000) return String(Math.round(n));
+	if (n < 1000000) return `${(n / 1000).toFixed(1)}k`;
+	return `${(n / 1000000).toFixed(1)}M`;
+}
+
+function formatPercent(p: number): string {
+	return `${p.toFixed(1)}%`;
+}
+
+function formatTimestamp(ts: number): string {
+	return new Date(ts).toLocaleTimeString();
+}
+
+function getMethodColor(
+	method: string,
+): 'default' | 'success' | 'warning' | 'destructive' {
+	switch (method.toUpperCase()) {
+		case 'GET':
+			return 'success';
+		case 'POST':
+			return 'default';
+		case 'PUT':
+		case 'PATCH':
+			return 'warning';
+		case 'DELETE':
+			return 'destructive';
+		default:
+			return 'default';
+	}
+}
+
+export function PerformancePage() {
+	const [metrics, setMetrics] = useState<RequestMetrics | null>(null);
+	const [endpoints, setEndpoints] = useState<EndpointMetrics[]>([]);
+	const [statusDist, setStatusDist] = useState<StatusDistribution | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [timeRange, setTimeRange] = useState<TimeRange>(() =>
+		createTimeRange('1h'),
+	);
+
+	const fetchData = useCallback(async () => {
+		try {
+			setLoading(true);
+			const timeRangeParams = {
+				start: timeRange.start.toISOString(),
+				end: timeRange.end.toISOString(),
+			};
+			const [metricsData, endpointsData, statusData] = await Promise.all([
+				getMetrics(timeRangeParams),
+				getEndpointMetrics({ limit: 10, ...timeRangeParams }),
+				getStatusDistribution(timeRangeParams),
+			]);
+			setMetrics(metricsData);
+			setEndpoints(endpointsData);
+			setStatusDist(statusData);
+			setError(null);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Failed to load metrics');
+		} finally {
+			setLoading(false);
+		}
+	}, [timeRange.start, timeRange.end]);
+
+	useEffect(() => {
+		fetchData();
+
+		// Refresh every 30 seconds
+		const interval = setInterval(fetchData, 30000);
+		return () => clearInterval(interval);
+	}, [fetchData]);
+
+	if (loading && !metrics) {
+		return (
+			<div className="flex-1 flex items-center justify-center text-muted-foreground">
+				Loading performance data...
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex-1 flex items-center justify-center text-red-500">
+				{error}
+			</div>
+		);
+	}
+
+	return (
+		<div className="p-6 space-y-6">
+			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+				<div>
+					<h1 className="text-xl font-semibold">Performance</h1>
+					<p className="text-sm text-muted-foreground mt-1">
+						Endpoint metrics and latency insights
+					</p>
+				</div>
+				<TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+			</div>
+
+			{/* Overview Metrics */}
+			<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+				<MetricCard
+					title="Total Requests"
+					value={formatNumber(metrics?.totalRequests ?? 0)}
+					trend="neutral"
+					trendValue={`${(metrics?.requestsPerSecond ?? 0).toFixed(1)}/s`}
+				/>
+				<MetricCard
+					title="Avg Duration"
+					value={formatDuration(metrics?.avgDuration ?? 0)}
+					trend="neutral"
+					trendValue={`p95: ${formatDuration(metrics?.p95Duration ?? 0)}`}
+				/>
+				<MetricCard
+					title="Success Rate"
+					value={formatPercent(metrics?.successRate ?? 100)}
+					trend={
+						(metrics?.successRate ?? 100) >= 99
+							? 'up'
+							: (metrics?.successRate ?? 100) >= 95
+								? 'neutral'
+								: 'down'
+					}
+				/>
+				<MetricCard
+					title="Error Rate"
+					value={formatPercent(metrics?.errorRate ?? 0)}
+					trend={
+						(metrics?.errorRate ?? 0) <= 1
+							? 'up'
+							: (metrics?.errorRate ?? 0) <= 5
+								? 'neutral'
+								: 'down'
+					}
+				/>
+			</div>
+
+			{/* Charts Row */}
+			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				{/* Status Distribution */}
+				<div className="bg-card rounded-lg border p-4">
+					<h2 className="text-sm font-medium mb-4">Status Distribution</h2>
+					{statusDist ? (
+						<StatusDistributionChart data={statusDist} />
+					) : (
+						<div className="h-48 flex items-center justify-center text-sm text-muted-foreground">
+							No requests recorded yet
+						</div>
+					)}
+				</div>
+
+				{/* Latency Percentiles */}
+				<div className="bg-card rounded-lg border p-4">
+					<h2 className="text-sm font-medium mb-4">Latency Percentiles</h2>
+					{metrics ? (
+						<LatencyPercentilesChart
+							p50={metrics.p50Duration}
+							p95={metrics.p95Duration}
+							p99={metrics.p99Duration}
+						/>
+					) : (
+						<div className="h-48 flex items-center justify-center text-sm text-muted-foreground">
+							No requests recorded yet
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Request Volume Time Series */}
+			<div className="bg-card rounded-lg border p-4">
+				<h2 className="text-sm font-medium mb-4">Request Volume</h2>
+				<AreaTimeSeriesChart
+					data={(metrics?.timeSeries ?? []).map((p) => ({
+						timestamp: p.timestamp,
+						value: p.count,
+						secondaryValue: p.errorCount,
+					}))}
+					primaryLabel="Requests"
+					secondaryLabel="Errors"
+					primaryColor="blue"
+					secondaryColor="red"
+				/>
+			</div>
+
+			{/* Top Endpoints - Chart View */}
+			<div className="bg-card rounded-lg border p-4">
+				<h2 className="text-sm font-medium mb-4">
+					Top Endpoints by Request Count
+				</h2>
+				<BarListChart
+					data={endpoints.map((ep) => ({
+						name: `${ep.method} ${ep.path}`,
+						value: ep.count,
+					}))}
+					emptyMessage="No endpoints recorded yet"
+				/>
+			</div>
+
+			{/* Top Endpoints - Table View */}
+			<div className="bg-card rounded-lg border">
+				<div className="p-4 border-b">
+					<h2 className="text-sm font-medium">Endpoint Details</h2>
+				</div>
+				<div className="overflow-x-auto">
+					<table className="w-full text-sm">
+						<thead className="bg-muted/50">
+							<tr>
+								<th className="text-left px-4 py-2 font-medium">Endpoint</th>
+								<th className="text-right px-4 py-2 font-medium">Requests</th>
+								<th className="text-right px-4 py-2 font-medium">Avg</th>
+								<th className="text-right px-4 py-2 font-medium">p95</th>
+								<th className="text-right px-4 py-2 font-medium">Error Rate</th>
+								<th className="text-right px-4 py-2 font-medium">Last Seen</th>
+							</tr>
+						</thead>
+						<tbody>
+							{endpoints.length === 0 ? (
+								<tr>
+									<td
+										colSpan={6}
+										className="text-center py-8 text-muted-foreground"
+									>
+										No endpoints recorded yet
+									</td>
+								</tr>
+							) : (
+								endpoints.map((ep, i) => (
+									<tr
+										key={i}
+										className="border-t hover:bg-muted/30 cursor-pointer"
+									>
+										<td className="px-4 py-2">
+											<Link
+												to={`/performance/endpoint?method=${encodeURIComponent(ep.method)}&path=${encodeURIComponent(ep.path)}`}
+												className="flex items-center gap-2"
+											>
+												<Badge variant={getMethodColor(ep.method)}>
+													{ep.method}
+												</Badge>
+												<span className="font-mono text-xs hover:underline">
+													{ep.path}
+												</span>
+											</Link>
+										</td>
+										<td className="text-right px-4 py-2 font-mono">
+											{formatNumber(ep.count)}
+										</td>
+										<td className="text-right px-4 py-2 font-mono">
+											{formatDuration(ep.avgDuration)}
+										</td>
+										<td className="text-right px-4 py-2 font-mono">
+											{formatDuration(ep.p95Duration)}
+										</td>
+										<td className="text-right px-4 py-2">
+											<span
+												className={
+													ep.errorRate > 5
+														? 'text-red-500'
+														: ep.errorRate > 1
+															? 'text-yellow-500'
+															: 'text-green-500'
+												}
+											>
+												{formatPercent(ep.errorRate)}
+											</span>
+										</td>
+										<td className="text-right px-4 py-2 text-muted-foreground">
+											{formatTimestamp(ep.lastSeen)}
+										</td>
+									</tr>
+								))
+							)}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	);
+}

package/ui/src/pages/RequestsPage.tsx

@@ -0,0 +1,379 @@
+import { HttpMethodBadge, HttpStatusBadge, NoResults } from '@geekmidas/ui';
+import { ArrowLeft, X } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import * as api from '../api';
+import { useStudio } from '../providers/StudioProvider';
+import type { RequestEntry } from '../types';
+
+interface RequestFilters {
+	search: string;
+	method: string;
+	status: string;
+}
+
+export function RequestsPage() {
+	const { id } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+	const { requests: realtimeRequests } = useStudio();
+
+	const [requests, setRequests] = useState<RequestEntry[]>([]);
+	const [selectedRequest, setSelectedRequest] = useState<RequestEntry | null>(
+		null,
+	);
+	const [loading, setLoading] = useState(true);
+	const [filters, setFilters] = useState<RequestFilters>({
+		search: '',
+		method: '',
+		status: '',
+	});
+
+	// Merge realtime requests with fetched requests
+	useEffect(() => {
+		setRequests((prev) => {
+			const existingIds = new Set(prev.map((r) => r.id));
+			const newRequests = realtimeRequests.filter(
+				(r) => !existingIds.has(r.id),
+			);
+			if (newRequests.length > 0) {
+				return [...newRequests, ...prev].slice(0, 100);
+			}
+			return prev;
+		});
+	}, [realtimeRequests]);
+
+	// Load requests
+	const loadRequests = useCallback(async () => {
+		try {
+			setLoading(true);
+			const data = await api.getRequests({
+				limit: 100,
+				search: filters.search || undefined,
+				method: filters.method || undefined,
+				status: filters.status || undefined,
+			});
+			setRequests(data);
+		} catch (_error) {
+		} finally {
+			setLoading(false);
+		}
+	}, [filters]);
+
+	useEffect(() => {
+		loadRequests();
+	}, [loadRequests]);
+
+	// Load selected request detail
+	useEffect(() => {
+		if (id) {
+			const existing = requests.find((r) => r.id === id);
+			if (existing) {
+				setSelectedRequest(existing);
+			} else {
+				api.getRequest(id).then(setSelectedRequest).catch(console.error);
+			}
+		} else {
+			setSelectedRequest(null);
+		}
+	}, [id, requests]);
+
+	// Filter requests
+	const filteredRequests = useMemo(() => {
+		return requests.filter((request) => {
+			if (
+				filters.search &&
+				!request.path.toLowerCase().includes(filters.search.toLowerCase())
+			) {
+				return false;
+			}
+			if (filters.method && request.method !== filters.method) {
+				return false;
+			}
+			if (filters.status) {
+				const statusCategory = Math.floor(request.status / 100);
+				const filterCategory = parseInt(filters.status[0], 10);
+				if (statusCategory !== filterCategory) {
+					return false;
+				}
+			}
+			return true;
+		});
+	}, [requests, filters]);
+
+	const hasFilters = filters.search || filters.method || filters.status;
+
+	const clearFilters = () => {
+		setFilters({ search: '', method: '', status: '' });
+	};
+
+	return (
+		<div className="flex h-full">
+			{/* Request List */}
+			<div className="flex-1 flex flex-col overflow-hidden">
+				{/* Filter Bar */}
+				<div className="p-4 border-b border-border bg-surface flex items-center gap-4">
+					<input
+						type="text"
+						placeholder="Search paths..."
+						value={filters.search}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, search: e.target.value }))
+						}
+						className="flex-1 bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					/>
+					<select
+						value={filters.method}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, method: e.target.value }))
+						}
+						className="bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					>
+						<option value="">All Methods</option>
+						<option value="GET">GET</option>
+						<option value="POST">POST</option>
+						<option value="PUT">PUT</option>
+						<option value="PATCH">PATCH</option>
+						<option value="DELETE">DELETE</option>
+					</select>
+					<select
+						value={filters.status}
+						onChange={(e) =>
+							setFilters((f) => ({ ...f, status: e.target.value }))
+						}
+						className="bg-background border border-border rounded px-3 py-1.5 text-sm focus:outline-none focus:border-accent"
+					>
+						<option value="">All Status</option>
+						<option value="2xx">2xx Success</option>
+						<option value="3xx">3xx Redirect</option>
+						<option value="4xx">4xx Client Error</option>
+						<option value="5xx">5xx Server Error</option>
+					</select>
+					{hasFilters && (
+						<button
+							onClick={clearFilters}
+							className="text-sm text-muted-foreground hover:text-foreground"
+						>
+							Clear
+						</button>
+					)}
+				</div>
+
+				{/* Request List */}
+				<div className="flex-1 overflow-auto p-4">
+					{loading ? (
+						<div className="flex items-center justify-center py-16 text-muted-foreground">
+							Loading...
+						</div>
+					) : filteredRequests.length === 0 ? (
+						<NoResults
+							title={hasFilters ? 'No matching requests' : 'No requests yet'}
+							description={
+								hasFilters
+									? 'Try adjusting your filters.'
+									: 'Requests will appear here as they are captured.'
+							}
+						/>
+					) : (
+						<div className="flex flex-col gap-2">
+							{filteredRequests.map((request) => (
+								<div
+									key={request.id}
+									className={`bg-surface border rounded-lg p-4 cursor-pointer transition-colors hover:border-accent/50 flex items-center gap-4 ${
+										selectedRequest?.id === request.id
+											? 'border-accent'
+											: 'border-border'
+									}`}
+									onClick={() => navigate(`/monitoring/requests/${request.id}`)}
+								>
+									<HttpMethodBadge method={request.method as any} size="sm" />
+									<span className="flex-1 truncate font-mono text-sm">
+										{request.path}
+									</span>
+									<HttpStatusBadge code={request.status} size="sm" />
+									<span className="text-xs text-muted-foreground min-w-16 text-right">
+										{formatDuration(request.duration)}
+									</span>
+									<span className="text-xs text-muted-foreground min-w-20 text-right">
+										{formatTime(request.timestamp)}
+									</span>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Request Detail Panel */}
+			{selectedRequest && (
+				<RequestDetailPanel
+					request={selectedRequest}
+					onClose={() => navigate('/monitoring/requests')}
+				/>
+			)}
+		</div>
+	);
+}
+
+function RequestDetailPanel({
+	request,
+	onClose,
+}: {
+	request: RequestEntry;
+	onClose: () => void;
+}) {
+	const [activeTab, setActiveTab] = useState<
+		'request' | 'response' | 'headers'
+	>('request');
+
+	return (
+		<div className="w-[500px] border-l border-border bg-surface flex flex-col">
+			{/* Header */}
+			<div className="flex items-center justify-between p-4 border-b border-border">
+				<div className="flex items-center gap-3">
+					<button
+						onClick={onClose}
+						className="p-1 hover:bg-surface-hover rounded"
+					>
+						<ArrowLeft className="h-4 w-4" />
+					</button>
+					<div>
+						<div className="flex items-center gap-2">
+							<HttpMethodBadge method={request.method as any} size="sm" />
+							<HttpStatusBadge code={request.status} size="sm" />
+						</div>
+						<p className="text-sm text-muted-foreground font-mono mt-1 truncate max-w-[350px]">
+							{request.path}
+						</p>
+					</div>
+				</div>
+				<button
+					onClick={onClose}
+					className="p-1 hover:bg-surface-hover rounded"
+				>
+					<X className="h-4 w-4" />
+				</button>
+			</div>
+
+			{/* Tabs */}
+			<div className="flex border-b border-border">
+				{(['request', 'response', 'headers'] as const).map((tab) => (
+					<button
+						key={tab}
+						className={`px-4 py-2 text-sm capitalize border-b-2 transition-colors ${
+							activeTab === tab
+								? 'text-accent border-accent'
+								: 'text-muted-foreground border-transparent hover:text-foreground'
+						}`}
+						onClick={() => setActiveTab(tab)}
+					>
+						{tab}
+					</button>
+				))}
+			</div>
+
+			{/* Content */}
+			<div className="flex-1 overflow-auto p-4">
+				{activeTab === 'request' && (
+					<div className="space-y-4">
+						<InfoRow
+							label="Duration"
+							value={formatDuration(request.duration)}
+						/>
+						<InfoRow label="Time" value={formatTime(request.timestamp)} />
+						{request.ip && <InfoRow label="IP" value={request.ip} />}
+						{request.userAgent && (
+							<InfoRow label="User Agent" value={request.userAgent} />
+						)}
+						{request.requestBody !== undefined &&
+							request.requestBody !== null && (
+								<div>
+									<h4 className="text-sm font-medium mb-2">Request Body</h4>
+									<pre className="bg-background rounded p-3 text-xs overflow-auto max-h-[300px]">
+										{formatBody(request.requestBody)}
+									</pre>
+								</div>
+							)}
+					</div>
+				)}
+
+				{activeTab === 'response' && (
+					<div className="space-y-4">
+						<InfoRow label="Status" value={`${request.status}`} />
+						{request.responseBody !== undefined &&
+							request.responseBody !== null && (
+								<div>
+									<h4 className="text-sm font-medium mb-2">Response Body</h4>
+									<pre className="bg-background rounded p-3 text-xs overflow-auto max-h-[400px]">
+										{formatBody(request.responseBody)}
+									</pre>
+								</div>
+							)}
+					</div>
+				)}
+
+				{activeTab === 'headers' && (
+					<div className="space-y-6">
+						{request.requestHeaders &&
+							Object.keys(request.requestHeaders).length > 0 && (
+								<div>
+									<h4 className="text-sm font-medium mb-2">Request Headers</h4>
+									<div className="bg-background rounded p-3 space-y-1">
+										{Object.entries(request.requestHeaders).map(
+											([key, value]) => (
+												<div key={key} className="text-xs">
+													<span className="text-muted-foreground">{key}:</span>{' '}
+													<span className="font-mono">{String(value)}</span>
+												</div>
+											),
+										)}
+									</div>
+								</div>
+							)}
+						{request.responseHeaders &&
+							Object.keys(request.responseHeaders).length > 0 && (
+								<div>
+									<h4 className="text-sm font-medium mb-2">Response Headers</h4>
+									<div className="bg-background rounded p-3 space-y-1">
+										{Object.entries(request.responseHeaders).map(
+											([key, value]) => (
+												<div key={key} className="text-xs">
+													<span className="text-muted-foreground">{key}:</span>{' '}
+													<span className="font-mono">{String(value)}</span>
+												</div>
+											),
+										)}
+									</div>
+								</div>
+							)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+	return (
+		<div className="flex items-center gap-2">
+			<span className="text-sm text-muted-foreground w-24">{label}</span>
+			<span className="text-sm font-mono">{value}</span>
+		</div>
+	);
+}
+
+function formatDuration(ms: number) {
+	if (ms < 1) return '<1ms';
+	if (ms < 1000) return `${Math.round(ms)}ms`;
+	return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function formatTime(timestamp: string) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+
+function formatBody(body: unknown): string {
+	if (typeof body === 'string') {
+		return body;
+	}
+	return JSON.stringify(body, null, 2);
+}