@geekmidas/studio 0.2.0 → 0.4.0

package/ui/src/pages/DatabasePage.tsx

@@ -0,0 +1,226 @@
+import { NoData } from '@geekmidas/ui';
+import { Database, Search } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import * as api from '../api';
+import { RowDetail } from '../components/RowDetail';
+import type { ForeignKeyClickInfo } from '../components/TableView';
+import { TableView } from '../components/TableView';
+import type { FilterConfig, TableInfo, TableSummary } from '../types';
+
+export function DatabasePage() {
+	const { table: tableParam } = useParams<{ table: string }>();
+	const [searchParams] = useSearchParams();
+	const navigate = useNavigate();
+
+	const [tables, setTables] = useState<TableSummary[]>([]);
+	const [selectedTable, setSelectedTable] = useState<string | null>(
+		tableParam || null,
+	);
+	const [tableInfo, setTableInfo] = useState<TableInfo | null>(null);
+	const [selectedRow, setSelectedRow] = useState<Record<
+		string,
+		unknown
+	> | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [searchTerm, setSearchTerm] = useState('');
+	const [initialFilters, setInitialFilters] = useState<FilterConfig[]>([]);
+
+	// Parse filter from URL query params
+	useEffect(() => {
+		const filterColumn = searchParams.get('filterColumn');
+		const filterValue = searchParams.get('filterValue');
+
+		if (filterColumn && filterValue) {
+			setInitialFilters([
+				{
+					column: filterColumn,
+					operator: 'eq',
+					value: filterValue,
+				},
+			]);
+		} else {
+			setInitialFilters([]);
+		}
+	}, [searchParams]);
+
+	// Update selected table when URL param changes
+	useEffect(() => {
+		if (tableParam) {
+			setSelectedTable(tableParam);
+		}
+	}, [tableParam]);
+
+	// Load tables on mount
+	useEffect(() => {
+		async function loadTables() {
+			try {
+				const data = await api.getTables();
+				setTables(data.tables);
+				// Auto-select first table if none selected
+				if (data.tables.length > 0 && !selectedTable) {
+					const firstTable = data.tables[0].name;
+					setSelectedTable(firstTable);
+					navigate(`/database/${firstTable}`, { replace: true });
+				}
+			} catch (err) {
+				setError(err instanceof Error ? err.message : 'Failed to load tables');
+			} finally {
+				setLoading(false);
+			}
+		}
+		loadTables();
+	}, [navigate, selectedTable]);
+
+	// Load table info when selected
+	useEffect(() => {
+		if (!selectedTable) {
+			setTableInfo(null);
+			return;
+		}
+
+		async function loadTableInfo() {
+			try {
+				const info = await api.getTableInfo(selectedTable!);
+				setTableInfo(info);
+			} catch (err) {
+				setError(
+					err instanceof Error ? err.message : 'Failed to load table info',
+				);
+			}
+		}
+		loadTableInfo();
+	}, [selectedTable]);
+
+	const handleRefresh = useCallback(async () => {
+		setLoading(true);
+		try {
+			await api.getSchema(true);
+			const data = await api.getTables();
+			setTables(data.tables);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Failed to refresh');
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	const handleSelectTable = useCallback(
+		(tableName: string) => {
+			setSelectedTable(tableName);
+			setSelectedRow(null);
+			navigate(`/database/${tableName}`);
+		},
+		[navigate],
+	);
+
+	const handleForeignKeyClick = useCallback(
+		(info: ForeignKeyClickInfo) => {
+			const valueStr = String(info.value);
+			navigate(
+				`/database/${info.targetTable}?filterColumn=${encodeURIComponent(info.targetColumn)}&filterValue=${encodeURIComponent(valueStr)}`,
+			);
+		},
+		[navigate],
+	);
+
+	// Filter tables by search term
+	const filteredTables = tables.filter((t) =>
+		t.name.toLowerCase().includes(searchTerm.toLowerCase()),
+	);
+
+	return (
+		<div className="flex h-full">
+			{/* Table Sidebar */}
+			<aside className="w-64 bg-surface border-r border-border flex flex-col shrink-0">
+				<div className="p-3 border-b border-border">
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+						<input
+							type="text"
+							placeholder="Search tables..."
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							className="w-full bg-background border border-border rounded px-3 py-1.5 pl-9 text-sm placeholder-muted-foreground focus:outline-none focus:border-accent"
+						/>
+					</div>
+				</div>
+
+				<div className="flex-1 overflow-auto">
+					{loading && tables.length === 0 ? (
+						<div className="p-4 text-center text-muted-foreground text-sm">
+							Loading...
+						</div>
+					) : (
+						<div className="py-1">
+							{filteredTables.map((table) => (
+								<button
+									key={table.name}
+									onClick={() => handleSelectTable(table.name)}
+									className={`w-full flex items-center gap-2 px-3 py-2 text-sm transition-colors ${
+										selectedTable === table.name
+											? 'bg-accent/10 text-accent'
+											: 'text-foreground hover:bg-surface-hover'
+									}`}
+								>
+									<Database className="h-4 w-4 shrink-0" />
+									<span className="truncate">{table.name}</span>
+									{table.estimatedRowCount !== undefined && (
+										<span className="ml-auto text-xs text-muted-foreground">
+											{table.estimatedRowCount.toLocaleString()}
+										</span>
+									)}
+								</button>
+							))}
+						</div>
+					)}
+				</div>
+
+				<div className="p-3 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
+					<span>{tables.length} tables</span>
+					<button
+						onClick={handleRefresh}
+						disabled={loading}
+						className="hover:text-foreground transition-colors"
+					>
+						Refresh
+					</button>
+				</div>
+			</aside>
+
+			{/* Main Area */}
+			<div className="flex-1 flex flex-col overflow-hidden">
+				{error ? (
+					<div className="flex-1 flex items-center justify-center text-red-400">
+						<div className="text-center">
+							<p>{error}</p>
+						</div>
+					</div>
+				) : !selectedTable ? (
+					<NoData
+						title="Select a table"
+						description="Choose a table from the sidebar to view its data."
+					/>
+				) : (
+					<TableView
+						tableName={selectedTable}
+						tableInfo={tableInfo}
+						onRowSelect={setSelectedRow}
+						onForeignKeyClick={handleForeignKeyClick}
+						initialFilters={initialFilters}
+					/>
+				)}
+			</div>
+
+			{/* Row Detail Panel */}
+			{selectedRow && tableInfo && (
+				<RowDetail
+					row={selectedRow}
+					columns={tableInfo.columns}
+					onClose={() => setSelectedRow(null)}
+				/>
+			)}
+		</div>
+	);
+}

package/ui/src/pages/EndpointDetailsPage.tsx

@@ -0,0 +1,288 @@
+import {
+	AreaTimeSeriesChart,
+	Badge,
+	createTimeRange,
+	LatencyPercentilesChart,
+	MetricCard,
+	StatusDistributionChart,
+	type TimeRange,
+	TimeRangeSelector,
+} from '@geekmidas/ui';
+import { ArrowLeft } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { getEndpointDetails, getRequests } from '../api';
+import type { EndpointDetails, RequestEntry } 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): string {
+	return new Date(ts).toLocaleString();
+}
+
+function getMethodVariant(
+	method: string,
+): 'get' | 'post' | 'put' | 'patch' | 'delete' | 'default' {
+	const m = method.toLowerCase();
+	if (
+		m === 'get' ||
+		m === 'post' ||
+		m === 'put' ||
+		m === 'patch' ||
+		m === 'delete'
+	) {
+		return m;
+	}
+	return 'default';
+}
+
+function getStatusColor(status: number): string {
+	if (status >= 200 && status < 300) return 'text-green-500';
+	if (status >= 300 && status < 400) return 'text-blue-500';
+	if (status >= 400 && status < 500) return 'text-amber-500';
+	return 'text-red-500';
+}
+
+export function EndpointDetailsPage() {
+	const [searchParams] = useSearchParams();
+	const method = searchParams.get('method') ?? '';
+	const path = searchParams.get('path') ?? '';
+
+	const [details, setDetails] = useState<EndpointDetails | null>(null);
+	const [recentRequests, setRecentRequests] = useState<RequestEntry[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [timeRange, setTimeRange] = useState<TimeRange>(() =>
+		createTimeRange('1h'),
+	);
+
+	const fetchData = useCallback(async () => {
+		if (!method || !path) {
+			setError('Missing method or path');
+			setLoading(false);
+			return;
+		}
+
+		try {
+			setLoading(true);
+			const timeRangeParams = {
+				start: timeRange.start.toISOString(),
+				end: timeRange.end.toISOString(),
+			};
+
+			const [detailsData, requestsData] = await Promise.all([
+				getEndpointDetails(method, path, timeRangeParams),
+				getRequests({ method, search: path, limit: 20 }),
+			]);
+
+			setDetails(detailsData);
+			setRecentRequests(requestsData);
+			setError(null);
+		} catch (err) {
+			setError(
+				err instanceof Error ? err.message : 'Failed to load endpoint details',
+			);
+		} finally {
+			setLoading(false);
+		}
+	}, [method, path, timeRange.start, timeRange.end]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+
+	if (!method || !path) {
+		return (
+			<div className="flex-1 flex items-center justify-center text-muted-foreground">
+				Missing endpoint method or path
+			</div>
+		);
+	}
+
+	if (loading && !details) {
+		return (
+			<div className="flex-1 flex items-center justify-center text-muted-foreground">
+				Loading endpoint details...
+			</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">
+			{/* Header */}
+			<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+				<div className="flex items-center gap-4">
+					<Link
+						to="/performance"
+						className="p-2 rounded-md hover:bg-muted transition-colors"
+					>
+						<ArrowLeft className="w-5 h-5" />
+					</Link>
+					<div>
+						<div className="flex items-center gap-2">
+							<Badge variant={getMethodVariant(method)}>{method}</Badge>
+							<h1 className="text-xl font-semibold font-mono">{path}</h1>
+						</div>
+						<p className="text-sm text-muted-foreground mt-1">
+							Last seen: {details ? formatTimestamp(details.lastSeen) : 'N/A'}
+						</p>
+					</div>
+				</div>
+				<TimeRangeSelector value={timeRange} onChange={setTimeRange} />
+			</div>
+
+			{details && (
+				<>
+					{/* Key Metrics */}
+					<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+						<MetricCard
+							title="Total Requests"
+							value={formatNumber(details.count)}
+							trend="neutral"
+						/>
+						<MetricCard
+							title="Avg Duration"
+							value={formatDuration(details.avgDuration)}
+							trend="neutral"
+							trendValue={`p95: ${formatDuration(details.p95Duration)}`}
+						/>
+						<MetricCard
+							title="Success Rate"
+							value={formatPercent(details.successRate)}
+							trend={
+								details.successRate >= 99
+									? 'up'
+									: details.successRate >= 95
+										? 'neutral'
+										: 'down'
+							}
+						/>
+						<MetricCard
+							title="Error Rate"
+							value={formatPercent(details.errorRate)}
+							trend={
+								details.errorRate <= 1
+									? 'up'
+									: details.errorRate <= 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>
+							<StatusDistributionChart data={details.statusDistribution} />
+						</div>
+
+						{/* Latency Percentiles */}
+						<div className="bg-card rounded-lg border p-4">
+							<h2 className="text-sm font-medium mb-4">Latency Percentiles</h2>
+							<LatencyPercentilesChart
+								p50={details.p50Duration}
+								p95={details.p95Duration}
+								p99={details.p99Duration}
+							/>
+						</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={details.timeSeries.map((p) => ({
+								timestamp: p.timestamp,
+								value: p.count,
+								secondaryValue: p.errorCount,
+							}))}
+							primaryLabel="Requests"
+							secondaryLabel="Errors"
+							primaryColor="blue"
+							secondaryColor="red"
+						/>
+					</div>
+				</>
+			)}
+
+			{/* Recent Requests */}
+			<div className="bg-card rounded-lg border">
+				<div className="p-4 border-b">
+					<h2 className="text-sm font-medium">Recent Requests</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">Status</th>
+								<th className="text-left px-4 py-2 font-medium">Duration</th>
+								<th className="text-left px-4 py-2 font-medium">Timestamp</th>
+								<th className="text-left px-4 py-2 font-medium">ID</th>
+							</tr>
+						</thead>
+						<tbody>
+							{recentRequests.length === 0 ? (
+								<tr>
+									<td
+										colSpan={4}
+										className="text-center py-8 text-muted-foreground"
+									>
+										No recent requests
+									</td>
+								</tr>
+							) : (
+								recentRequests.map((req) => (
+									<tr key={req.id} className="border-t hover:bg-muted/30">
+										<td className="px-4 py-2">
+											<span className={getStatusColor(req.status)}>
+												{req.status}
+											</span>
+										</td>
+										<td className="px-4 py-2 font-mono">
+											{formatDuration(req.duration)}
+										</td>
+										<td className="px-4 py-2 text-muted-foreground">
+											{formatTimestamp(req.timestamp)}
+										</td>
+										<td className="px-4 py-2">
+											<Link
+												to={`/monitoring/requests/${req.id}`}
+												className="font-mono text-xs text-primary hover:underline"
+											>
+												{req.id.slice(0, 8)}...
+											</Link>
+										</td>
+									</tr>
+								))
+							)}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	);
+}