@geekmidas/studio 0.1.0 → 0.4.0

package/ui/src/api.ts

@@ -1,71 +1,213 @@
 import type {
-  FilterConfig,
-  QueryResult,
-  SchemaInfo,
-  SortConfig,
-  TableInfo,
-  TableSummary,
+	EndpointDetails,
+	EndpointMetrics,
+	ExceptionEntry,
+	FilterConfig,
+	LogEntry,
+	QueryResult,
+	RequestEntry,
+	RequestMetrics,
+	SchemaInfo,
+	SortConfig,
+	StatusDistribution,
+	StudioStats,
+	TableInfo,
+	TableSummary,
 } from './types';
 
 const BASE_URL = '/__studio';
 
 async function fetchJson<T>(url: string): Promise<T> {
-  const res = await fetch(`${BASE_URL}${url}`);
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status}: ${res.statusText}`);
-  }
-  return res.json();
+	const res = await fetch(`${BASE_URL}${url}`);
+	if (!res.ok) {
+		throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+	}
+	return res.json();
 }
 
+// ============================================================================
+// Database API
+// ============================================================================
+
 export async function getSchema(refresh = false): Promise<SchemaInfo> {
-  const url = refresh ? '/api/schema?refresh=true' : '/api/schema';
-  return fetchJson(url);
+	const url = refresh ? '/api/schema?refresh=true' : '/api/schema';
+	return fetchJson(url);
 }
 
 export async function getTables(): Promise<{ tables: TableSummary[] }> {
-  return fetchJson('/api/tables');
+	return fetchJson('/api/tables');
 }
 
 export async function getTableInfo(tableName: string): Promise<TableInfo> {
-  return fetchJson(`/api/tables/${encodeURIComponent(tableName)}`);
+	return fetchJson(`/api/tables/${encodeURIComponent(tableName)}`);
 }
 
 export interface QueryOptions {
-  pageSize?: number;
-  cursor?: string;
-  filters?: FilterConfig[];
-  sort?: SortConfig[];
+	pageSize?: number;
+	cursor?: string;
+	filters?: FilterConfig[];
+	sort?: SortConfig[];
 }
 
 export async function queryTable(
-  tableName: string,
-  options: QueryOptions = {},
+	tableName: string,
+	options: QueryOptions = {},
 ): Promise<QueryResult> {
-  const params = new URLSearchParams();
+	const params = new URLSearchParams();
+
+	if (options.pageSize) {
+		params.set('pageSize', String(options.pageSize));
+	}
+
+	if (options.cursor) {
+		params.set('cursor', options.cursor);
+	}
+
+	if (options.filters) {
+		for (const filter of options.filters) {
+			params.set(`filter[${filter.column}][${filter.operator}]`, filter.value);
+		}
+	}
+
+	if (options.sort && options.sort.length > 0) {
+		const sortStr = options.sort
+			.map((s) => `${s.column}:${s.direction}`)
+			.join(',');
+		params.set('sort', sortStr);
+	}
 
-  if (options.pageSize) {
-    params.set('pageSize', String(options.pageSize));
-  }
+	const queryStr = params.toString();
+	const url = `/api/tables/${encodeURIComponent(tableName)}/rows${queryStr ? `?${queryStr}` : ''}`;
 
-  if (options.cursor) {
-    params.set('cursor', options.cursor);
-  }
+	return fetchJson(url);
+}
+
+// ============================================================================
+// Monitoring API (from Telescope)
+// ============================================================================
 
-  if (options.filters) {
-    for (const filter of options.filters) {
-      params.set(`filter[${filter.column}][${filter.operator}]`, filter.value);
-    }
-  }
+export async function getStats(): Promise<StudioStats> {
+	return fetchJson('/api/stats');
+}
+
+export interface MonitoringQueryOptions {
+	limit?: number;
+	search?: string;
+	method?: string;
+	status?: string;
+	level?: string;
+}
 
-  if (options.sort && options.sort.length > 0) {
-    const sortStr = options.sort
-      .map((s) => `${s.column}:${s.direction}`)
-      .join(',');
-    params.set('sort', sortStr);
-  }
+export async function getRequests(
+	options: MonitoringQueryOptions = {},
+): Promise<RequestEntry[]> {
+	const params = new URLSearchParams();
+	if (options.limit) params.set('limit', String(options.limit));
+	if (options.search) params.set('search', options.search);
+	if (options.method) params.set('method', options.method);
+	if (options.status) params.set('status', options.status);
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/requests${queryStr ? `?${queryStr}` : ''}`);
+}
+
+export async function getRequest(id: string): Promise<RequestEntry> {
+	return fetchJson(`/api/requests/${encodeURIComponent(id)}`);
+}
+
+export async function getExceptions(
+	options: MonitoringQueryOptions = {},
+): Promise<ExceptionEntry[]> {
+	const params = new URLSearchParams();
+	if (options.limit) params.set('limit', String(options.limit));
+	if (options.search) params.set('search', options.search);
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/exceptions${queryStr ? `?${queryStr}` : ''}`);
+}
+
+export async function getException(id: string): Promise<ExceptionEntry> {
+	return fetchJson(`/api/exceptions/${encodeURIComponent(id)}`);
+}
+
+export async function getLogs(
+	options: MonitoringQueryOptions = {},
+): Promise<LogEntry[]> {
+	const params = new URLSearchParams();
+	if (options.limit) params.set('limit', String(options.limit));
+	if (options.search) params.set('search', options.search);
+	if (options.level) params.set('level', options.level);
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/logs${queryStr ? `?${queryStr}` : ''}`);
+}
+
+// ============================================================================
+// Metrics API
+// ============================================================================
+
+export interface MetricsQueryOptions {
+	start?: string;
+	end?: string;
+	bucketSize?: number;
+	limit?: number;
+}
+
+export async function getMetrics(
+	options: MetricsQueryOptions = {},
+): Promise<RequestMetrics> {
+	const params = new URLSearchParams();
+	if (options.start) params.set('start', options.start);
+	if (options.end) params.set('end', options.end);
+	if (options.bucketSize) params.set('bucketSize', String(options.bucketSize));
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/metrics${queryStr ? `?${queryStr}` : ''}`);
+}
+
+export async function getEndpointMetrics(
+	options: MetricsQueryOptions = {},
+): Promise<EndpointMetrics[]> {
+	const params = new URLSearchParams();
+	if (options.start) params.set('start', options.start);
+	if (options.end) params.set('end', options.end);
+	if (options.limit) params.set('limit', String(options.limit));
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/metrics/endpoints${queryStr ? `?${queryStr}` : ''}`);
+}
+
+export async function getEndpointDetails(
+	method: string,
+	path: string,
+	options: MetricsQueryOptions = {},
+): Promise<EndpointDetails> {
+	const params = new URLSearchParams();
+	params.set('method', method);
+	params.set('path', path);
+	if (options.start) params.set('start', options.start);
+	if (options.end) params.set('end', options.end);
+
+	return fetchJson(`/api/metrics/endpoint?${params.toString()}`);
+}
+
+export async function getStatusDistribution(
+	options: MetricsQueryOptions = {},
+): Promise<StatusDistribution> {
+	const params = new URLSearchParams();
+	if (options.start) params.set('start', options.start);
+	if (options.end) params.set('end', options.end);
+
+	const queryStr = params.toString();
+	return fetchJson(`/api/metrics/status${queryStr ? `?${queryStr}` : ''}`);
+}
 
-  const queryStr = params.toString();
-  const url = `/api/tables/${encodeURIComponent(tableName)}/rows${queryStr ? `?${queryStr}` : ''}`;
+// ============================================================================
+// WebSocket
+// ============================================================================
 
-  return fetchJson(url);
+export function createWebSocket(): WebSocket {
+	const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+	const wsUrl = `${protocol}//${window.location.host}${BASE_URL}/ws`;
+	return new WebSocket(wsUrl);
 }

package/ui/src/components/FilterPanel.tsx

@@ -2,212 +2,212 @@ import { useCallback } from 'react';
 import type { ColumnInfo, FilterConfig } from '../types';
 
 interface FilterPanelProps {
-  columns: ColumnInfo[];
-  filters: FilterConfig[];
-  onFiltersChange: (filters: FilterConfig[]) => void;
-  onClose: () => void;
+	columns: ColumnInfo[];
+	filters: FilterConfig[];
+	onFiltersChange: (filters: FilterConfig[]) => void;
+	onClose: () => void;
 }
 
 const OPERATORS: { value: string; label: string; types?: string[] }[] = [
-  { value: 'eq', label: 'equals' },
-  { value: 'neq', label: 'not equals' },
-  { value: 'gt', label: 'greater than', types: ['number', 'date', 'datetime'] },
-  {
-    value: 'gte',
-    label: 'greater than or equal',
-    types: ['number', 'date', 'datetime'],
-  },
-  { value: 'lt', label: 'less than', types: ['number', 'date', 'datetime'] },
-  {
-    value: 'lte',
-    label: 'less than or equal',
-    types: ['number', 'date', 'datetime'],
-  },
-  { value: 'like', label: 'contains', types: ['string'] },
-  { value: 'ilike', label: 'contains (case insensitive)', types: ['string'] },
-  { value: 'is_null', label: 'is null' },
-  { value: 'is_not_null', label: 'is not null' },
+	{ value: 'eq', label: 'equals' },
+	{ value: 'neq', label: 'not equals' },
+	{ value: 'gt', label: 'greater than', types: ['number', 'date', 'datetime'] },
+	{
+		value: 'gte',
+		label: 'greater than or equal',
+		types: ['number', 'date', 'datetime'],
+	},
+	{ value: 'lt', label: 'less than', types: ['number', 'date', 'datetime'] },
+	{
+		value: 'lte',
+		label: 'less than or equal',
+		types: ['number', 'date', 'datetime'],
+	},
+	{ value: 'like', label: 'contains', types: ['string'] },
+	{ value: 'ilike', label: 'contains (case insensitive)', types: ['string'] },
+	{ value: 'is_null', label: 'is null' },
+	{ value: 'is_not_null', label: 'is not null' },
 ];
 
 function getOperatorsForColumn(column: ColumnInfo) {
-  return OPERATORS.filter(
-    (op) => !op.types || op.types.includes(column.type || 'string'),
-  );
+	return OPERATORS.filter(
+		(op) => !op.types || op.types.includes(column.type || 'string'),
+	);
 }
 
 export function FilterPanel({
-  columns,
-  filters,
-  onFiltersChange,
-  onClose,
+	columns,
+	filters,
+	onFiltersChange,
+	onClose,
 }: FilterPanelProps) {
-  const addFilter = useCallback(() => {
-    const firstColumn = columns[0];
-    if (!firstColumn) return;
-
-    onFiltersChange([
-      ...filters,
-      { column: firstColumn.name, operator: 'eq', value: '' },
-    ]);
-  }, [columns, filters, onFiltersChange]);
-
-  const updateFilter = useCallback(
-    (index: number, updates: Partial<FilterConfig>) => {
-      const newFilters = [...filters];
-      newFilters[index] = { ...newFilters[index], ...updates };
-      onFiltersChange(newFilters);
-    },
-    [filters, onFiltersChange],
-  );
-
-  const removeFilter = useCallback(
-    (index: number) => {
-      onFiltersChange(filters.filter((_, i) => i !== index));
-    },
-    [filters, onFiltersChange],
-  );
-
-  const clearAll = useCallback(() => {
-    onFiltersChange([]);
-  }, [onFiltersChange]);
-
-  return (
-    <div className="filter-panel bg-studio-surface border-b border-studio-border p-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-medium text-slate-300">Filters</h3>
-        <div className="flex items-center gap-2">
-          {filters.length > 0 && (
-            <button
-              onClick={clearAll}
-              className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
-            >
-              Clear all
-            </button>
-          )}
-          <button
-            onClick={onClose}
-            className="p-1 hover:bg-studio-hover rounded transition-colors"
-          >
-            <svg
-              className="w-4 h-4 text-slate-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        {filters.map((filter, index) => {
-          const column = columns.find((c) => c.name === filter.column);
-          const operators = column ? getOperatorsForColumn(column) : OPERATORS;
-          const needsValue = !['is_null', 'is_not_null'].includes(
-            filter.operator,
-          );
-
-          return (
-            <div key={index} className="flex items-center gap-2">
-              {index > 0 && (
-                <span className="text-xs text-slate-500 w-8">and</span>
-              )}
-              {index === 0 && (
-                <span className="text-xs text-slate-500 w-8">Where</span>
-              )}
-
-              {/* Column select */}
-              <select
-                value={filter.column}
-                onChange={(e) =>
-                  updateFilter(index, { column: e.target.value })
-                }
-                className="select flex-1 min-w-0"
-              >
-                {columns.map((col) => (
-                  <option key={col.name} value={col.name}>
-                    {col.name}
-                  </option>
-                ))}
-              </select>
-
-              {/* Operator select */}
-              <select
-                value={filter.operator}
-                onChange={(e) =>
-                  updateFilter(index, { operator: e.target.value })
-                }
-                className="select w-48"
-              >
-                {operators.map((op) => (
-                  <option key={op.value} value={op.value}>
-                    {op.label}
-                  </option>
-                ))}
-              </select>
-
-              {/* Value input */}
-              {needsValue && (
-                <input
-                  type="text"
-                  value={filter.value}
-                  onChange={(e) =>
-                    updateFilter(index, { value: e.target.value })
-                  }
-                  placeholder="Enter value..."
-                  className="input flex-1 min-w-0"
-                />
-              )}
-
-              {/* Remove button */}
-              <button
-                onClick={() => removeFilter(index)}
-                className="p-1.5 hover:bg-studio-hover rounded transition-colors text-slate-500 hover:text-slate-300"
-              >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-          );
-        })}
-      </div>
-
-      <button
-        onClick={addFilter}
-        className="mt-3 flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
-      >
-        <svg
-          className="w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Add filter
-      </button>
-    </div>
-  );
+	const addFilter = useCallback(() => {
+		const firstColumn = columns[0];
+		if (!firstColumn) return;
+
+		onFiltersChange([
+			...filters,
+			{ column: firstColumn.name, operator: 'eq', value: '' },
+		]);
+	}, [columns, filters, onFiltersChange]);
+
+	const updateFilter = useCallback(
+		(index: number, updates: Partial<FilterConfig>) => {
+			const newFilters = [...filters];
+			newFilters[index] = { ...newFilters[index], ...updates };
+			onFiltersChange(newFilters);
+		},
+		[filters, onFiltersChange],
+	);
+
+	const removeFilter = useCallback(
+		(index: number) => {
+			onFiltersChange(filters.filter((_, i) => i !== index));
+		},
+		[filters, onFiltersChange],
+	);
+
+	const clearAll = useCallback(() => {
+		onFiltersChange([]);
+	}, [onFiltersChange]);
+
+	return (
+		<div className="filter-panel bg-studio-surface border-b border-studio-border p-4">
+			<div className="flex items-center justify-between mb-3">
+				<h3 className="text-sm font-medium text-slate-300">Filters</h3>
+				<div className="flex items-center gap-2">
+					{filters.length > 0 && (
+						<button
+							onClick={clearAll}
+							className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+						>
+							Clear all
+						</button>
+					)}
+					<button
+						onClick={onClose}
+						className="p-1 hover:bg-studio-hover rounded transition-colors"
+					>
+						<svg
+							className="w-4 h-4 text-slate-400"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<div className="space-y-2">
+				{filters.map((filter, index) => {
+					const column = columns.find((c) => c.name === filter.column);
+					const operators = column ? getOperatorsForColumn(column) : OPERATORS;
+					const needsValue = !['is_null', 'is_not_null'].includes(
+						filter.operator,
+					);
+
+					return (
+						<div key={index} className="flex items-center gap-2">
+							{index > 0 && (
+								<span className="text-xs text-slate-500 w-8">and</span>
+							)}
+							{index === 0 && (
+								<span className="text-xs text-slate-500 w-8">Where</span>
+							)}
+
+							{/* Column select */}
+							<select
+								value={filter.column}
+								onChange={(e) =>
+									updateFilter(index, { column: e.target.value })
+								}
+								className="select flex-1 min-w-0"
+							>
+								{columns.map((col) => (
+									<option key={col.name} value={col.name}>
+										{col.name}
+									</option>
+								))}
+							</select>
+
+							{/* Operator select */}
+							<select
+								value={filter.operator}
+								onChange={(e) =>
+									updateFilter(index, { operator: e.target.value })
+								}
+								className="select w-48"
+							>
+								{operators.map((op) => (
+									<option key={op.value} value={op.value}>
+										{op.label}
+									</option>
+								))}
+							</select>
+
+							{/* Value input */}
+							{needsValue && (
+								<input
+									type="text"
+									value={filter.value}
+									onChange={(e) =>
+										updateFilter(index, { value: e.target.value })
+									}
+									placeholder="Enter value..."
+									className="input flex-1 min-w-0"
+								/>
+							)}
+
+							{/* Remove button */}
+							<button
+								onClick={() => removeFilter(index)}
+								className="p-1.5 hover:bg-studio-hover rounded transition-colors text-slate-500 hover:text-slate-300"
+							>
+								<svg
+									className="w-4 h-4"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+					);
+				})}
+			</div>
+
+			<button
+				onClick={addFilter}
+				className="mt-3 flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
+			>
+				<svg
+					className="w-4 h-4"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth={2}
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Add filter
+			</button>
+		</div>
+	);
 }