web_plsql 0.18.0 → 1.2.0

package/src/admin/js/types.ts

@@ -0,0 +1,336 @@
+/**
+ * Cache statistics for a cache type.
+ */
+export type CacheStats = {
+	hits: number;
+	misses: number;
+};
+
+/**
+ * Cache information for a specific cache type.
+ */
+export type CacheInfo = {
+	size: number;
+	stats: CacheStats;
+};
+
+/**
+ * Cache data for a connection pool.
+ */
+export type CacheData = {
+	poolName: string;
+	procedureNameCache: CacheInfo;
+	argumentCache: CacheInfo;
+};
+
+/**
+ * Pool statistics.
+ */
+export type PoolStats = {
+	totalRequests: number;
+	totalTimeouts: number;
+	totalRequestsEnqueued: number | undefined;
+	totalRequestsDequeued: number | undefined;
+	totalRequestsFailed: number | undefined;
+};
+
+/**
+ * Pool information.
+ */
+export type PoolInfo = {
+	name: string;
+	connectionsInUse: number;
+	connectionsOpen: number;
+	stats: PoolStats | null;
+};
+
+/**
+ * Server metrics.
+ */
+export type Metrics = {
+	requestCount: number;
+	errorCount: number;
+	avgResponseTime: number;
+	minResponseTime: number;
+	maxResponseTime: number;
+	maxRequestsPerSecond: number;
+};
+
+/**
+ * Server configuration - route.
+ */
+export type RouteConfig = {
+	route: string;
+	// PL/SQL specific
+	user?: string;
+	password?: string;
+	connectString?: string;
+	defaultPage?: string;
+	pathAlias?: string;
+	pathAliasProcedure?: string;
+	documentTable?: string;
+	exclusionList?: string[];
+	requestValidationFunction?: string;
+	transactionMode?: unknown;
+	errorStyle?: string;
+	// Static specific
+	directoryPath?: string;
+};
+
+/**
+ * Server configuration.
+ */
+export type ServerConfig = {
+	port: number;
+	adminRoute?: string;
+	adminUser?: string;
+	adminPassword?: string;
+	loggerFilename: string;
+	uploadFileSizeLimit?: number;
+	routePlSql: RouteConfig[];
+	routeStatic: RouteConfig[];
+};
+
+/**
+ * Server status response.
+ */
+export type Status = {
+	version: string;
+	status: 'running' | 'paused' | 'stopped';
+	uptime: number;
+	startTime: string;
+	intervalMs?: number;
+	metrics: Metrics;
+	pools: PoolInfo[];
+	config: Partial<ServerConfig>;
+};
+
+/**
+ * Resident Set Size - total memory used by the process
+ */
+export type HistoryBucket = {
+	timestamp: number;
+	requests: number;
+	errors: number;
+	durationMin: number;
+	durationMax: number;
+	durationAvg: number;
+	durationP95: number;
+	durationP99: number;
+	system: {
+		cpu: number;
+		heapUsed: number;
+		heapTotal: number;
+		rss: number;
+		external: number;
+	};
+	pools: {
+		name: string;
+		connectionsInUse: number;
+		connectionsOpen: number;
+	}[];
+};
+
+/**
+ * Historical data for charts.
+ */
+export type HistoryData = {
+	labels: string[];
+	requests: number[];
+	avgResponseTimes: number[];
+	p95ResponseTimes?: number[];
+	p99ResponseTimes?: number[];
+	poolUsage: Record<string, number[]>;
+};
+
+/**
+ * Chart grid options.
+ */
+export type ChartGridOptions = {
+	color?: string;
+	display?: boolean;
+	drawBorder?: boolean;
+	drawOnChartArea?: boolean;
+};
+
+/**
+ * Chart ticks options.
+ */
+export type ChartTicksOptions = {
+	color?: string;
+	display?: boolean;
+	stepSize?: number;
+	maxRotation?: number;
+	autoSkip?: boolean;
+	maxTicksLimit?: number;
+	callback?: (value: number | string) => string;
+};
+
+/**
+ * Chart scale options.
+ */
+export type ChartScaleOptions = {
+	display?: boolean;
+	grid?: ChartGridOptions;
+	ticks?: ChartTicksOptions;
+	border?: {
+		display?: boolean;
+		color?: string;
+	};
+	title?: {
+		display: boolean;
+		text: string;
+		color: string;
+	};
+	type?: string;
+	position?: string;
+	beginAtZero?: boolean;
+	max?: number;
+};
+
+/**
+ * Chart options.
+ */
+export type ChartOptions = {
+	responsive?: boolean;
+	maintainAspectRatio?: boolean;
+	scales?: {
+		x?: ChartScaleOptions;
+		y?: ChartScaleOptions;
+		y1?: ChartScaleOptions;
+	};
+	layout?: {
+		padding?: number;
+	};
+	plugins?: {
+		legend?: {
+			display?: boolean;
+			labels?: {
+				color?: string;
+			};
+		};
+		tooltip?: {
+			enabled?: boolean;
+			position?: string;
+			intersect?: boolean;
+			callbacks?: Record<string, unknown>;
+		};
+	};
+	elements?: {
+		point?: {
+			radius?: number;
+		};
+		line?: {
+			borderWidth?: number;
+		};
+		bar?: {
+			borderWidth?: number;
+		};
+	};
+};
+
+/**
+ * Chart dataset.
+ */
+export type ChartDataset = {
+	label: string;
+	data: number[];
+	borderColor: string;
+	backgroundColor: string | undefined;
+	fill?: boolean | undefined;
+	tension?: number | undefined;
+	barThickness?: number;
+	categoryPercentage?: number;
+	barPercentage?: number;
+	borderWidth?: number;
+	yAxisID?: string;
+};
+
+/**
+ * Chart data.
+ */
+export type ChartData = {
+	labels: string[];
+	datasets: ChartDataset[];
+};
+
+/**
+ * Chart instance interface.
+ */
+export type ChartInstance = {
+	data: ChartData;
+	options: ChartOptions;
+	update: () => void;
+};
+
+/**
+ * Trace entry.
+ */
+export type TraceEntry = {
+	id: string;
+	timestamp: string;
+	source: string;
+	url: string;
+	method: string;
+	status: string;
+	duration: number;
+	procedure?: string | undefined;
+	parameters?: Record<string, unknown> | undefined;
+	uploads?: {originalname: string; mimetype: string; size: number}[] | undefined;
+	downloads?:
+		| {
+				fileType: string;
+				fileSize: number;
+		  }
+		| undefined;
+	html?: string | undefined;
+	cookies?: Record<string, string> | undefined;
+	headers?: Record<string, string> | undefined;
+	cgi?: Record<string, string> | undefined;
+	error?: string | undefined;
+};
+
+import type {StatusResponse, ErrorLogResponse, AccessLogResponse} from './schemas.js';
+
+// Re-export types from schemas
+export type {StatusResponse, ErrorLogResponse, AccessLogResponse};
+
+/**
+ * System metrics for tracking min/max.
+ */
+export type SystemMetrics = {
+	heapUsed: number;
+	heapTotal: number;
+	rss: number;
+	external: number;
+	cpuUser: number;
+	cpuSystem: number;
+};
+
+/**
+ * Application state.
+ */
+export type State = {
+	currentView: string;
+	status: Partial<StatusResponse>;
+	maxHistoryPoints: number;
+	lastRequestCount: number;
+	lastErrorCount: number;
+	lastUpdateTime: number;
+	lastBucketTimestamp: number;
+	nextRefreshTimeout: ReturnType<typeof setTimeout> | null;
+	nextRefreshTime: number;
+	countdownInterval: ReturnType<typeof setInterval> | null;
+	history: HistoryData & {
+		cpuUsage: number[];
+		memoryUsage: number[];
+	};
+	charts: Record<string, ChartInstance>;
+	metricsMin: Partial<SystemMetrics>;
+	metricsMax: Partial<SystemMetrics>;
+};
+
+declare global {
+	/** Injected by Vite during build */
+	const __BUILD_TIME__: string;
+}

package/src/admin/js/ui/components.ts

@@ -0,0 +1,44 @@
+/**
+ * Enhances a button with loading state logic.
+ *
+ * @param btn - The button element to enhance.
+ * @param action - The async function to execute when the button is clicked.
+ * @returns The result of the action.
+ */
+export async function withLoading<T>(btn: HTMLButtonElement, action: () => Promise<T>): Promise<T> {
+	const iconSpan = btn.querySelector('.material-symbols-rounded');
+	const originalIcon = iconSpan?.textContent;
+
+	btn.disabled = true;
+	btn.classList.add('loading');
+	if (iconSpan) {
+		iconSpan.textContent = 'sync';
+		iconSpan.classList.add('animate-spin');
+	}
+
+	try {
+		return await action();
+	} finally {
+		btn.disabled = false;
+		btn.classList.remove('loading');
+		if (iconSpan) {
+			iconSpan.textContent = originalIcon ?? '';
+			iconSpan.classList.remove('animate-spin');
+		}
+	}
+}
+
+/**
+ * Binds an async action to a button with standardized loading feedback.
+ *
+ * @param id - The ID of the button element.
+ * @param action - The async action to perform.
+ * @returns The button element or null if not found.
+ */
+export function bindLoadingButton(id: string, action: () => Promise<void>): HTMLButtonElement | null {
+	const btn = document.getElementById(id) as HTMLButtonElement | null;
+	if (btn) {
+		btn.onclick = () => void withLoading(btn, action);
+	}
+	return btn;
+}

package/src/admin/js/ui/table.ts

@@ -0,0 +1,173 @@
+/**
+ * Column configuration for the DataTable.
+ */
+export type TableColumn<T> = {
+	/** Unique identifier for the column */
+	id: string;
+	/** Header text to display */
+	header: string;
+	/** Tooltip for the column header */
+	headerTitle?: string;
+	/** Optional fixed width (e.g., '80px') */
+	width?: string;
+	/** Text alignment */
+	align?: 'left' | 'center' | 'right';
+	/** Custom CSS classes for the cell */
+	className?: string | ((row: T) => string);
+	/** Function to get the cell content (HTML string) */
+	render?: (row: T) => string;
+	/** Function to get the raw value (text content) */
+	accessor?: (row: T) => string | number | undefined | null;
+	/** Tooltip for the data cell */
+	cellTitle?: (row: T) => string;
+};
+
+/**
+ * Options for the DataTable.
+ */
+export type TableOptions<T> = {
+	/** Array of column definitions */
+	columns: TableColumn<T>[];
+	/** Enable compact/dense layout */
+	dense?: boolean;
+	/** Callback when a row is clicked */
+	onRowClick?: (row: T) => void;
+};
+
+/**
+ * A reusable, configuration-driven data table component.
+ */
+export class DataTable<T> {
+	private element: HTMLTableElement | null = null;
+
+	/**
+	 * Creates a new DataTable instance.
+	 *
+	 * @param elementId - The ID of the table element in the DOM.
+	 * @param options - Configuration options for the table.
+	 */
+	constructor(
+		private elementId: string,
+		private options: TableOptions<T>,
+	) {}
+
+	/**
+	 * Mounts the table to the DOM and renders the provided data.
+	 *
+	 * @param data - The array of data to display.
+	 */
+	render(data: T[]): void {
+		this.element = document.getElementById(this.elementId) as HTMLTableElement;
+		if (!this.element) return;
+
+		// Apply dense class if enabled
+		if (this.options.dense) {
+			this.element.classList.add('dense-table');
+		} else {
+			this.element.classList.remove('dense-table');
+		}
+
+		this.renderHeader();
+		this.renderBody(data);
+	}
+
+	/**
+	 * Renders the table header.
+	 */
+	private renderHeader(): void {
+		if (!this.element) return;
+
+		let thead = this.element.querySelector('thead');
+		if (!thead) {
+			thead = document.createElement('thead');
+			this.element.appendChild(thead);
+		}
+
+		thead.innerHTML = '';
+		const tr = document.createElement('tr');
+
+		this.options.columns.forEach((col) => {
+			const th = document.createElement('th');
+			th.textContent = col.header;
+			if (col.headerTitle) {
+				th.title = col.headerTitle;
+			}
+			if (col.width) {
+				th.style.width = col.width;
+			}
+			if (col.align) {
+				th.style.textAlign = col.align;
+			}
+			tr.appendChild(th);
+		});
+
+		thead.appendChild(tr);
+	}
+
+	/**
+	 * Renders the table body.
+	 *
+	 * @param data - The data to render.
+	 */
+	private renderBody(data: T[]): void {
+		if (!this.element) return;
+
+		let tbody = this.element.querySelector('tbody');
+		if (!tbody) {
+			tbody = document.createElement('tbody');
+			this.element.appendChild(tbody);
+		}
+
+		tbody.innerHTML = '';
+
+		data.forEach((row) => {
+			const tr = document.createElement('tr');
+
+			// Add row click handler if provided
+			if (this.options.onRowClick) {
+				tr.style.cursor = 'pointer';
+				tr.addEventListener('click', () => {
+					if (this.options.onRowClick) {
+						this.options.onRowClick(row);
+					}
+				});
+				// Add hover effect class usually handled by CSS, but good to ensure
+				tr.classList.add('table-row-hover');
+			}
+
+			this.options.columns.forEach((col) => {
+				const td = document.createElement('td');
+
+				// Content
+				if (col.render) {
+					td.innerHTML = col.render(row);
+				} else if (col.accessor) {
+					const val = col.accessor(row);
+					td.textContent = val !== undefined && val !== null ? String(val) : '';
+				}
+
+				// Styling
+				if (col.className) {
+					const className = typeof col.className === 'function' ? col.className(row) : col.className;
+					if (className) {
+						td.className = className;
+					}
+				}
+
+				// Alignment
+				if (col.align) {
+					td.style.textAlign = col.align;
+				}
+
+				// Tooltip
+				if (col.cellTitle) {
+					td.title = col.cellTitle(row);
+				}
+
+				tr.appendChild(td);
+			});
+
+			tbody.appendChild(tr);
+		});
+	}
+}

package/src/admin/js/ui/theme.ts

@@ -0,0 +1,93 @@
+import type {State, ChartInstance} from '../types.js';
+
+/**
+ * Theme colors for charts based on theme mode.
+ */
+interface ChartColors {
+	gridColor: string;
+	textColor: string;
+}
+
+/**
+ * Get chart colors for the current theme.
+ * @param isDark - Whether dark mode is active.
+ * @returns Chart color configuration.
+ */
+function getChartColors(isDark: boolean): ChartColors {
+	return {
+		gridColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+		textColor: isDark ? '#94a3b8' : '#475569',
+	};
+}
+
+/**
+ * Update chart options for theme change.
+ * @param chart - Chart instance to update.
+ * @param colors - Chart colors for the current theme.
+ */
+function updateChartForTheme(chart: ChartInstance, colors: ChartColors): void {
+	if (!chart.options.scales) return;
+
+	const scales = chart.options.scales;
+
+	if (scales.x) {
+		if (scales.x.grid) scales.x.grid.color = colors.gridColor;
+		if (scales.x.ticks) scales.x.ticks.color = colors.textColor;
+	}
+
+	if (scales.y?.grid) {
+		scales.y.grid.color = colors.gridColor;
+	}
+	if (scales.y?.ticks) {
+		scales.y.ticks.color = colors.textColor;
+	}
+
+	if (scales.y1?.grid) {
+		scales.y1.grid.color = colors.gridColor;
+	}
+	if (scales.y1?.ticks) {
+		scales.y1.ticks.color = colors.textColor;
+	}
+
+	if (scales.y?.title) {
+		scales.y.title.color = colors.textColor;
+	}
+
+	if (scales.y1?.title) {
+		scales.y1.title.color = colors.textColor;
+	}
+
+	if (chart.options.plugins?.legend?.labels) {
+		chart.options.plugins.legend.labels.color = colors.textColor;
+	}
+
+	chart.update();
+}
+
+/**
+ * Initialize theme management.
+ * @param state - Application state containing chart instances.
+ */
+export function initTheme(state: State): void {
+	const theme = localStorage.getItem('theme') ?? 'dark';
+	const btn = document.getElementById('theme-toggle-btn');
+	if (!btn) return;
+
+	document.body.className = theme;
+
+	btn.onclick = (): void => {
+		const isDark = document.body.classList.contains('dark');
+		const newTheme = isDark ? 'light' : 'dark';
+		document.body.className = newTheme;
+		localStorage.setItem('theme', newTheme);
+
+		const colors = getChartColors(newTheme === 'dark');
+
+		Object.values(state.charts).forEach((chartInstance): void => {
+			const chart = chartInstance;
+			if (chart?.options) {
+				updateChartForTheme(chart, colors);
+			}
+		});
+	};
+}