web_plsql 1.0.0 → 1.3.0

package/src/admin/js/app.ts

@@ -1,306 +0,0 @@
-import {typedApi} from './api.js';
-import {initCharts, updateCharts} from '../client/charts.js';
-import {formatDuration, formatDateTime} from './util/format.js';
-import {initTheme} from './ui/theme.js';
-import {refreshErrors, refreshAccess, refreshConfig, refreshPools, refreshSystem} from './ui/views.js';
-import type {State} from './types.js';
-
-/**
- * View icons mapping.
- */
-const viewIcons: Record<string, string> = {
-	overview: 'dashboard',
-	errors: 'error',
-	access: 'list_alt',
-	cache: 'cached',
-	pools: 'database',
-	config: 'settings',
-	system: 'terminal',
-};
-
-/**
- * Application state.
- */
-const state: State = {
-	currentView: 'overview',
-	status: {},
-	maxHistoryPoints: 30,
-	lastRequestCount: 0,
-	lastErrorCount: 0,
-	lastUpdateTime: Date.now(),
-	refreshTimer: null,
-	history: {
-		labels: [],
-		requests: [],
-		avgResponseTimes: [],
-		poolUsage: {},
-	},
-	charts: {},
-};
-
-/**
- * Clear cache for a pool.
- *
- * @param poolName - The pool name.
- */
-export async function clearCache(poolName: string): Promise<void> {
-	await typedApi.post('api/cache/clear', {poolName});
-	await updateStatus();
-}
-
-/**
- * Update server status.
- */
-async function updateStatus(): Promise<void> {
-	const now = Date.now();
-	const newStatus = await typedApi.getStatus();
-	state.status = newStatus;
-
-	if (!newStatus.metrics || !newStatus.pools) return;
-
-	const deltaSec = (now - state.lastUpdateTime) / 1000;
-	const reqCountDelta = newStatus.metrics.requestCount - state.lastRequestCount;
-
-	const reqPerSec = deltaSec > 0 ? reqCountDelta / deltaSec : 0;
-	const avgResponseTime = newStatus.metrics.avgResponseTime;
-
-	state.lastRequestCount = newStatus.metrics.requestCount;
-	state.lastErrorCount = newStatus.metrics.errorCount;
-	state.lastUpdateTime = now;
-
-	const timeLabel = new Date().toLocaleTimeString();
-	updateCharts(state, timeLabel, reqPerSec, avgResponseTime, newStatus.pools);
-
-	const sidebarVersion = document.getElementById('sidebar-version');
-	if (sidebarVersion) sidebarVersion.textContent = `v${newStatus.version}`;
-
-	const uptimeVal = document.getElementById('uptime-val');
-	if (uptimeVal) uptimeVal.textContent = formatDuration(newStatus.uptime);
-
-	const startTimeVal = document.getElementById('start-time-val');
-	if (startTimeVal) startTimeVal.textContent = `Started: ${formatDateTime(newStatus.startTime)}`;
-
-	const reqCount = document.getElementById('req-count');
-	if (reqCount) reqCount.textContent = newStatus.metrics.requestCount.toLocaleString();
-
-	const reqPerSecVal = document.getElementById('req-per-sec');
-	if (reqPerSecVal) reqPerSecVal.textContent = `${reqPerSec.toFixed(2)} req/s`;
-
-	const avgRespTimeVal = document.getElementById('avg-resp-time');
-	if (avgRespTimeVal) avgRespTimeVal.textContent = `Avg: ${avgResponseTime.toFixed(1)}ms`;
-
-	const errCount = document.getElementById('err-count');
-	if (errCount) errCount.textContent = newStatus.metrics.errorCount.toLocaleString();
-
-	// Update Cache Overview
-	const caches = await typedApi.getCache();
-	let totalHits = 0;
-	let totalMisses = 0;
-	caches.forEach((c) => {
-		totalHits += c.procedureNameCache.stats.hits + c.argumentCache.stats.hits;
-		totalMisses += c.procedureNameCache.stats.misses + c.argumentCache.stats.misses;
-	});
-	const totalRequests = totalHits + totalMisses;
-	const hitRate = totalRequests > 0 ? Math.round((totalHits / totalRequests) * 100) : 0;
-
-	const cacheHitRateVal = document.getElementById('cache-hit-rate-val');
-	if (cacheHitRateVal) {
-		cacheHitRateVal.textContent = `${hitRate}%`;
-		cacheHitRateVal.style.color = hitRate > 80 ? 'var(--success)' : hitRate > 50 ? 'var(--warning)' : 'var(--danger)';
-	}
-	const cacheHitsVal = document.getElementById('cache-hits-val');
-	if (cacheHitsVal) cacheHitsVal.textContent = totalHits.toLocaleString();
-	const cacheMissesVal = document.getElementById('cache-misses-val');
-	if (cacheMissesVal) cacheMissesVal.textContent = totalMisses.toLocaleString();
-
-	const dot = document.getElementById('server-status-dot');
-	const text = document.getElementById('server-status-text');
-	if (dot) dot.className = 'dot ' + newStatus.status;
-	if (text) text.textContent = newStatus.status.toUpperCase();
-
-	const btnPause = document.getElementById('btn-pause');
-	if (btnPause) btnPause.style.display = newStatus.status === 'running' ? 'flex' : 'none';
-
-	const btnResume = document.getElementById('btn-resume');
-	if (btnResume) btnResume.style.display = newStatus.status === 'paused' ? 'flex' : 'none';
-
-	if (state.currentView === 'errors') await refreshErrors();
-	if (state.currentView === 'access') await refreshAccess();
-	if (state.currentView === 'pools') refreshPools(newStatus);
-	if (state.currentView === 'config') refreshConfig(state);
-	if (state.currentView === 'system') refreshSystem(newStatus);
-}
-
-/**
- * Start the refresh timer.
- */
-function startRefreshTimer(): void {
-	stopRefreshTimer();
-	const checkbox = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
-	const intervalSelect = document.getElementById('refresh-interval') as HTMLSelectElement | null;
-	if (checkbox?.checked && intervalSelect) {
-		const interval = parseInt(intervalSelect.value);
-		state.refreshTimer = setInterval(() => {
-			void updateStatus();
-		}, interval);
-	}
-}
-
-/**
- * Stop the refresh timer.
- */
-function stopRefreshTimer(): void {
-	if (state.refreshTimer) {
-		clearInterval(state.refreshTimer);
-		state.refreshTimer = null;
-	}
-}
-
-/**
- * Update history points labels to be time-based.
- */
-function updateHistoryLabels(): void {
-	const intervalSelect = document.getElementById('refresh-interval') as HTMLSelectElement | null;
-	const historySelect = document.getElementById('chart-history-points') as HTMLSelectElement | null;
-	if (!intervalSelect || !historySelect) return;
-
-	const intervalMs = parseInt(intervalSelect.value);
-	const points = [30, 60, 120];
-
-	points.forEach((pts, idx) => {
-		const option = historySelect.options[idx];
-		if (!option) return;
-
-		const totalSeconds = (pts * intervalMs) / 1000;
-		let timeStr = '';
-		if (totalSeconds < 60) {
-			timeStr = `${totalSeconds}s`;
-		} else if (totalSeconds < 3600) {
-			timeStr = `${Math.round(totalSeconds / 60)} min`;
-		} else {
-			const hours = totalSeconds / 3600;
-			timeStr = hours === Math.round(hours) ? `${hours} hours` : `${hours.toFixed(1)} hours`;
-		}
-		option.textContent = `Last ${timeStr}`;
-	});
-}
-
-// Navigation
-document.querySelectorAll('nav button').forEach((btnEl) => {
-	const btn = btnEl as HTMLButtonElement;
-	btn.onclick = async () => {
-		const view = btn.dataset.view;
-		if (!view) return;
-		state.currentView = view;
-		document.querySelectorAll('.view').forEach((vEl) => {
-			const v = vEl as HTMLElement;
-			v.style.display = 'none';
-		});
-		const viewEl = document.getElementById('view-' + view);
-		if (viewEl) viewEl.style.display = 'block';
-		document.querySelectorAll('nav button').forEach((b) => b.classList.remove('active'));
-		btn.classList.add('active');
-		const viewTitleEl = document.getElementById('view-title');
-		if (viewTitleEl) {
-			// Get text content excluding the icon span
-			const textNodes = Array.from(btn.childNodes).filter((node) => node.nodeType === Node.TEXT_NODE);
-			const btnText = textNodes.map((node) => node.textContent?.trim()).join('');
-			const icon = viewIcons[view] || 'chevron_right';
-			viewTitleEl.innerHTML = `<span class="material-symbols-rounded">${icon}</span>${btnText}`;
-		}
-
-		if (view === 'errors') await refreshErrors();
-		if (view === 'access') await refreshAccess();
-		if (view === 'pools') refreshPools(state.status);
-		if (view === 'config') refreshConfig(state);
-		if (view === 'system') refreshSystem(state.status);
-	};
-});
-
-const autoRefreshToggle = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
-if (autoRefreshToggle) {
-	autoRefreshToggle.onchange = (e: Event) => {
-		const target = e.target as HTMLInputElement;
-		if (target.checked) startRefreshTimer();
-		else stopRefreshTimer();
-	};
-}
-
-const refreshIntervalSelect = document.getElementById('refresh-interval') as HTMLSelectElement | null;
-if (refreshIntervalSelect) {
-	refreshIntervalSelect.onchange = () => {
-		startRefreshTimer();
-		updateHistoryLabels();
-		refreshSystem(state.status);
-	};
-}
-
-const chartHistorySelect = document.getElementById('chart-history-points') as HTMLSelectElement | null;
-if (chartHistorySelect) {
-	chartHistorySelect.onchange = () => {
-		state.maxHistoryPoints = parseInt(chartHistorySelect.value);
-		// Trim history if needed
-		while (state.history.labels.length > state.maxHistoryPoints) {
-			state.history.labels.shift();
-			state.history.requests.shift();
-			state.history.avgResponseTimes.shift();
-			Object.values(state.history.poolUsage).forEach((u) => u.shift());
-		}
-		void updateStatus();
-	};
-}
-
-const manualRefreshBtn = document.getElementById('manual-refresh');
-if (manualRefreshBtn) {
-	manualRefreshBtn.onclick = () => {
-		void updateStatus();
-	};
-}
-
-// Server controls
-const btnPause = document.getElementById('btn-pause');
-if (btnPause) {
-	btnPause.onclick = () => {
-		void typedApi.post('api/server/pause').then(() => {
-			void updateStatus();
-		});
-	};
-}
-
-const btnResume = document.getElementById('btn-resume');
-if (btnResume) {
-	btnResume.onclick = () => {
-		void typedApi.post('api/server/resume').then(() => {
-			void updateStatus();
-		});
-	};
-}
-
-const btnStop = document.getElementById('btn-stop');
-if (btnStop) {
-	btnStop.onclick = () => {
-		if (confirm('Stop the server?')) {
-			void typedApi.post('api/server/stop');
-		}
-	};
-}
-
-const btnClearAllCache = document.getElementById('btn-clear-all-cache');
-if (btnClearAllCache) {
-	btnClearAllCache.onclick = async () => {
-		if (confirm('Are you sure you want to clear all caches in all pools? This action cannot be undone.')) {
-			await typedApi.post('api/cache/clear', {});
-			await updateStatus();
-		}
-	};
-}
-
-// Initialize
-initTheme(state);
-initCharts(state);
-updateHistoryLabels();
-void updateStatus()
-	.then(() => {
-		startRefreshTimer();
-	})
-	.catch(console.error);

package/src/admin/js/eslint.config.js

@@ -1,74 +0,0 @@
-// @ts-check
-
-import eslint from '@eslint/js';
-import {defineConfig} from 'eslint/config';
-import tseslint from 'typescript-eslint';
-import globals from 'globals';
-
-export default defineConfig([
-	{
-		ignores: ['**/.*', 'lib/**', 'node_modules/**', '**/lib/**'],
-	},
-
-	{
-		linterOptions: {
-			reportUnusedDisableDirectives: 'error',
-			reportUnusedInlineConfigs: 'error',
-		},
-	},
-
-	eslint.configs.recommended,
-	...tseslint.configs.strictTypeChecked,
-	...tseslint.configs.stylisticTypeChecked,
-
-	{
-		languageOptions: {
-			globals: {
-				...globals.browser,
-			},
-			parserOptions: {
-				projectService: true,
-				tsconfigRootDir: import.meta.dirname,
-			},
-		},
-		rules: {
-			// Allow empty functions for chart update stubs
-			'@typescript-eslint/no-empty-function': 'off',
-
-			// Disable JSDoc requirements in TypeScript files
-			'jsdoc/require-param': 'off',
-			'jsdoc/require-param-type': 'off',
-			'jsdoc/require-returns-type': 'off',
-			'jsdoc/require-param-description': 'off',
-			'jsdoc/require-property-description': 'off',
-			'jsdoc/require-returns-description': 'off',
-
-			// Allow toString() for logging/debugging
-			'@typescript-eslint/no-base-to-string': 'off',
-
-			// Relaxed rules for template literals
-			'@typescript-eslint/restrict-template-expressions': 'off',
-
-			// Consistent type definitions
-			'@typescript-eslint/consistent-type-definitions': 'off',
-
-			// Unused vars
-			'@typescript-eslint/no-unused-vars': [
-				'warn',
-				{
-					caughtErrors: 'none',
-					argsIgnorePattern: '^_',
-				},
-			],
-
-			// Deprecation warnings
-			'@typescript-eslint/no-deprecated': 'warn',
-
-			// Void expression
-			'@typescript-eslint/no-confusing-void-expression': 'off',
-
-			// Unnecessary conditions
-			'@typescript-eslint/no-unnecessary-condition': 'off',
-		},
-	},
-]);

package/src/admin/js/schemas.ts

@@ -1,153 +0,0 @@
-import {z} from 'zod';
-
-/**
- * Cache statistics schema.
- */
-export const cacheStatsSchema = z.object({
-	hits: z.number(),
-	misses: z.number(),
-});
-
-/**
- * Cache information schema.
- */
-export const cacheInfoSchema = z.object({
-	size: z.number(),
-	stats: cacheStatsSchema,
-});
-
-/**
- * Cache data schema for a connection pool.
- */
-export const cacheDataSchema = z.object({
-	poolName: z.string(),
-	procedureNameCache: cacheInfoSchema,
-	argumentCache: cacheInfoSchema,
-});
-
-/**
- * Pool statistics schema.
- */
-export const poolStatsSchema = z.object({
-	totalRequests: z.number(),
-	totalTimeouts: z.number(),
-	totalRequestsEnqueued: z.number().optional(),
-	totalRequestsDequeued: z.number().optional(),
-	totalRequestsFailed: z.number().optional(),
-});
-
-/**
- * Pool information schema.
- */
-export const poolInfoSchema = z.object({
-	name: z.string(),
-	connectionsInUse: z.number(),
-	connectionsOpen: z.number(),
-	stats: poolStatsSchema.nullable(),
-});
-
-/**
- * Server metrics schema.
- */
-export const metricsSchema = z.object({
-	requestCount: z.number(),
-	errorCount: z.number(),
-	avgResponseTime: z.number(),
-});
-
-/**
- * Route configuration schema.
- */
-export const routeConfigSchema = z.object({
-	route: z.string(),
-	// PL/SQL specific
-	user: z.string().optional(),
-	password: z.string().optional(),
-	connectString: z.string().optional(),
-	defaultPage: z.string().optional(),
-	pathAlias: z.string().optional(),
-	pathAliasProcedure: z.string().optional(),
-	documentTable: z.string().optional(),
-	exclusionList: z.array(z.string()).optional(),
-	requestValidationFunction: z.string().optional(),
-	transactionMode: z.unknown().optional(),
-	errorStyle: z.string().optional(),
-	// Static specific
-	directoryPath: z.string().optional(),
-});
-
-/**
- * Server configuration schema.
- */
-export const serverConfigSchema = z.object({
-	port: z.number(),
-	adminRoute: z.string().optional(),
-	adminUser: z.string().optional(),
-	adminPassword: z.string().optional(),
-	loggerFilename: z.string(),
-	uploadFileSizeLimit: z.number().optional(),
-	routePlSql: z.array(routeConfigSchema),
-	routeStatic: z.array(routeConfigSchema),
-});
-
-/**
- * System information schema.
- */
-export const systemInfoSchema = z.object({
-	nodeVersion: z.string(),
-	platform: z.string(),
-	arch: z.string(),
-	memory: z.object({
-		rss: z.number(),
-		heapTotal: z.number(),
-		heapUsed: z.number(),
-		external: z.number(),
-	}),
-	cpu: z.object({
-		user: z.number(),
-		system: z.number(),
-	}),
-});
-
-/**
- * Server status response schema.
- */
-export const statusSchema = z.object({
-	version: z.string(),
-	status: z.enum(['running', 'paused', 'stopped']),
-	uptime: z.number(),
-	startTime: z.string(),
-	metrics: metricsSchema,
-	pools: z.array(poolInfoSchema),
-	system: systemInfoSchema,
-	config: serverConfigSchema.partial(),
-});
-
-/**
- * Error log entry schema.
- */
-export const errorLogSchema = z.object({
-	timestamp: z.string(),
-	req: z
-		.object({
-			method: z.string().optional(),
-			url: z.string().optional(),
-		})
-		.optional(),
-	message: z.string(),
-	details: z
-		.object({
-			fullMessage: z.string().optional(),
-		})
-		.optional(),
-});
-
-export const accessLogResponseSchema = z.union([z.array(z.string()), z.object({message: z.string()})]);
-
-/**
- * API response type helpers.
- */
-export type StatusResponse = z.infer<typeof statusSchema>;
-export type CacheDataResponse = z.infer<typeof cacheDataSchema>;
-export type ErrorLogResponse = z.infer<typeof errorLogSchema>;
-export type AccessLogResponse = z.infer<typeof accessLogResponseSchema>;

package/src/admin/js/templates/config.ts

@@ -1,146 +0,0 @@
-import type {ServerConfig, RouteConfig} from '../types.js';
-
-/**
- * Render a stat row using the standardized format.
- * @param label - The field label.
- * @param value - The value to display.
- * @param isMono - Whether to use monospaced font.
- * @param colorClass - The CSS class for coloring the value.
- * @returns HTML string.
- */
-function renderStatRow(label: string, value: string | number, isMono = true, colorClass = 'text-accent'): string {
-	const valClass = `${isMono ? 'font-mono' : ''} ${colorClass} font-bold break-all`.trim();
-	return `
-		<div class="stat-row text-sm">
-			<span>${label}</span>
-			<span class="${valClass}">${value}</span>
-		</div>
-	`;
-}
-
-/**
- * Render a configuration section header.
- * @param title - The section title.
- * @param icon - The Material icon name.
- * @returns HTML string.
- */
-function renderSectionTitle(title: string, icon: string): string {
-	return `
-		<div class="card-header mt-6 mb-2">
-			<span class="material-symbols-rounded icon-sm">${icon}</span>
-			<h3 class="text-xs uppercase tracking-wider font-bold text-accent">${title}</h3>
-		</div>
-	`;
-}
-
-/**
- * Render a PL/SQL route card.
- * @param r - The route configuration.
- * @param index - The index of the route.
- * @returns HTML string.
- */
-function renderPlSqlRoute(r: RouteConfig, index: number): string {
-	const exclusionList = r.exclusionList?.length ? r.exclusionList.join(', ') : '(None)';
-	const transactionMode = typeof r.transactionMode === 'string' ? r.transactionMode : r.transactionMode ? 'Custom' : 'commit';
-
-	return `
-		<div class="card mb-6">
-			<div class="flex justify-between items-center mb-4">
-				<div class="flex items-center gap-3">
-					<span class="badge badge-info">PL/SQL Route #${index + 1}</span>
-					<code class="text-lg font-bold text-bright">${r.route}</code>
-				</div>
-			</div>
-
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-				<div>
-					<h4 class="text-xs font-bold text-main uppercase mb-3 opacity-75">Database Connection</h4>
-					${renderStatRow('Oracle User', r.user ?? '(Not set)')}
-					${renderStatRow('Connect String', r.connectString ?? '(Not set)')}
-					${renderStatRow('Password', r.password ?? '(None)')}
-				</div>
-				<div>
-					<h4 class="text-xs font-bold text-main uppercase mb-3 opacity-75">Request Handler</h4>
-					${renderStatRow('Default Page', r.defaultPage ?? 'index')}
-					${renderStatRow('Document Table', r.documentTable ?? '(None)')}
-					${renderStatRow('Error Style', r.errorStyle ?? 'table')}
-					${renderStatRow('Transaction Mode', transactionMode)}
-				</div>
-			</div>
-
-			<div class="mt-4 pt-4 border-t">
-				<h4 class="text-xs font-bold text-main uppercase mb-3 opacity-75">Path & Validation</h4>
-				${renderStatRow('Path Alias', r.pathAlias ?? '(None)')}
-				${renderStatRow('Path Alias Proc', r.pathAliasProcedure ?? '(None)')}
-				${renderStatRow('Exclusion List', exclusionList)}
-				${renderStatRow('Validation Func', r.requestValidationFunction ?? '(None)')}
-			</div>
-		</div>
-	`;
-}
-
-/**
- * Render a Static route card.
- * @param r - The route configuration.
- * @param index - The index of the route.
- * @returns HTML string.
- */
-function renderStaticRoute(r: RouteConfig, index: number): string {
-	return `
-		<div class="card mb-4">
-			<div class="flex items-center gap-3 mb-4">
-				<span class="badge badge-success">Static Route #${index + 1}</span>
-				<code class="text-lg font-bold text-bright">${r.route}</code>
-			</div>
-			${renderStatRow('Directory Path', r.directoryPath ?? '(Not set)')}
-		</div>
-	`;
-}
-
-/**
- * Render the full server configuration.
- * @param config - The server configuration.
- * @returns HTML string.
- */
-export function renderConfig(config: Partial<ServerConfig>): string {
-	let html = '<div class="config-view-content">';
-
-	// Global Server Section
-	html += '<div class="card mb-8">';
-	html += '<div class="card-header"><span class="material-symbols-rounded">dns</span><h3>Server Settings</h3></div>';
-	if (typeof config.port === 'number') {
-		html += renderStatRow('Port', config.port);
-	}
-	html += renderStatRow('Admin Route', config.adminRoute ?? '/admin');
-	html += renderStatRow('Admin User', config.adminUser ?? '(Not authenticated)');
-	html += renderStatRow('Admin Password', config.adminPassword ?? '(None)');
-	html += renderStatRow('Logger Filename', config.loggerFilename ?? '(Logging disabled)');
-
-	if (typeof config.uploadFileSizeLimit === 'number') {
-		const limit = config.uploadFileSizeLimit;
-		const mb = (limit / (1024 * 1024)).toFixed(2);
-		html += renderStatRow('Upload Size Limit', `${mb} MB (${limit.toLocaleString()} bytes)`);
-	} else {
-		html += renderStatRow('Upload Size Limit', 'No limit');
-	}
-	html += '</div>';
-
-	// PL/SQL Routes
-	html += renderSectionTitle('PL/SQL Routes', 'database');
-	if (config.routePlSql?.length) {
-		html += config.routePlSql.map((r, i) => renderPlSqlRoute(r, i)).join('');
-	} else {
-		html += '<div class="empty-state">No PL/SQL routes configured</div>';
-	}
-
-	// Static Routes
-	html += renderSectionTitle('Static Routes', 'folder_shared');
-	if (config.routeStatic?.length) {
-		html += config.routeStatic.map((r, i) => renderStaticRoute(r, i)).join('');
-	} else {
-		html += '<div class="empty-state">No static routes configured</div>';
-	}
-
-	html += '</div>';
-	return html;
-}

package/src/admin/js/templates/errorRow.ts

@@ -1,18 +0,0 @@
-import type {ErrorLogResponse} from '../schemas.js';
-
-/**
- * Error log row template.
- *
- * @param l - The error log entry.
- * @returns HTML string for the error row.
- */
-export function errorRow(l: ErrorLogResponse): string {
-	return `
-        <tr>
-            <td>${new Date(l.timestamp).toLocaleString()}</td>
-            <td><code>${l.req?.method ?? '-'}</code></td>
-            <td>${l.req?.url ?? '-'}</td>
-            <td title="${l.details?.fullMessage ?? ''}">${l.message}</td>
-        </tr>
-    `;
-}

package/src/admin/js/templates/index.ts

@@ -1,3 +0,0 @@
-export {errorRow} from './errorRow.js';
-export {poolCard} from './poolCard.js';
-export {renderConfig} from './config.js';