web_plsql 1.0.0 → 1.2.0

package/src/admin/style.css

@@ -1,5 +1,6 @@
 :root {
 	/* Material Design 3 inspired tokens - Light Mode */
+	--accent-rgb: 59, 130, 246;
 	--bg-main: #f8fafc;
 	--bg-side: #fff;
 	--bg-card: #fff;
@@ -427,6 +428,50 @@ tr:last-child td {
 	}
 }
 
+/* System View Compact */
+.view-system-compact {
+	padding: 20px 32px;
+}
+
+.view-system-compact .metrics-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 16px;
+	align-items: start;
+	margin-bottom: 24px;
+}
+
+.view-system-compact .card {
+	padding: 16px;
+}
+
+.view-system-compact .stat-row {
+	padding: 4px 0;
+}
+
+.view-system-compact .card-header {
+	margin-bottom: 12px;
+}
+
+.resource-card {
+	display: flex;
+	flex-direction: column;
+	min-height: 350px;
+}
+
+.resource-card .chart-container-mini {
+	margin-top: auto;
+}
+
+.chart-container-mini {
+	height: 100px;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+	border: none;
+	border-radius: 4px;
+}
+
 /* Theme Toggle */
 
 /* Chart Styles */
@@ -1055,6 +1100,13 @@ nav button .material-symbols-rounded {
 	text-align: left;
 }
 
+/* Dense table variant */
+.dense-table th,
+.dense-table td {
+	padding: 6px 12px;
+	font-size: 0.8125rem;
+}
+
 /* Code style */
 .code {
 	font-family: 'JetBrains Mono', 'Fira Code', monospace;
@@ -1138,45 +1190,95 @@ nav button .material-symbols-rounded {
 	font-size: 28px;
 }
 
-/* Overlay */
-.overlay {
+/* Modal */
+.modal {
 	position: fixed;
 	inset: 0;
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: rgba(0, 0, 0, 0.7);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	z-index: 100;
+	z-index: 1000;
+	padding: 20px;
 }
 
-.modal {
+.modal-content {
 	background-color: var(--bg-card);
 	border-radius: 12px;
-	padding: 24px;
-	max-width: 400px;
-	width: 90%;
-	box-shadow:
-		0 20px 25px -5px rgb(0 0 0 / 0.1),
-		0 8px 10px -6px rgb(0 0 0 / 0.1);
+	width: 100%;
+	max-width: 900px;
+	box-shadow: var(--shadow);
+	display: flex;
+	flex-direction: column;
+	max-height: 90vh;
 }
 
-.modal-title {
+.modal-header {
+	padding: 16px 24px;
+	border-bottom: 1px solid var(--border);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.modal-header h3 {
+	margin: 0;
 	font-size: 1.125rem;
-	font-weight: 600;
 	color: var(--text-bright);
-	margin-bottom: 8px;
 }
 
-.modal-text {
-	color: var(--text-main);
-	font-size: 0.875rem;
-	margin-bottom: 24px;
+.modal-body {
+	padding: 24px;
+	overflow-y: auto;
 }
 
-.modal-actions {
+.stat-values-inline {
 	display: flex;
-	gap: 12px;
-	justify-content: flex-end;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Stat values for min/max */
+.stat-values {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+
+.min-max {
+	font-size: 0.7rem;
+	opacity: 0.7;
+	margin-top: 2px;
+}
+
+/* Search Group */
+.search-group {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.input-sm {
+	background-color: var(--bg-side);
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	color: var(--text-bright);
+	padding: 6px 12px;
+	font-size: 0.875rem;
+}
+
+.input-sm:focus {
+	border-color: var(--accent);
+	outline: none;
+}
+
+.errors-table-row {
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.errors-table-row:hover {
+	background-color: rgba(var(--accent-rgb), 0.08);
 }
 
 /* Server status indicator enhanced */
@@ -1238,12 +1340,6 @@ nav button .material-symbols-rounded {
 	margin-bottom: 8px;
 }
 
-.danger-zone-text {
-	color: var(--text-main);
-	font-size: 0.875rem;
-	margin-bottom: 16px;
-}
-
 /* Empty state */
 .empty-state {
 	text-align: center;
@@ -1319,3 +1415,23 @@ select {
 	accent-color: var(--accent);
 	cursor: pointer;
 }
+
+/* Animations */
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.animate-spin {
+	animation: spin 1s linear infinite;
+	display: inline-block;
+}
+
+.btn.loading {
+	pointer-events: none;
+	opacity: 0.8;
+}

package/src/handler/handlerAdmin.js

@@ -1,7 +1,9 @@
 import express from 'express';
 import fs from 'node:fs';
+import os from 'node:os';
 import readline from 'node:readline';
-import {AdminContext} from '../server/server.js';
+import {AdminContext} from '../server/adminContext.js';
+import {traceManager} from '../util/traceManager.js';
 import {getVersion} from '../version.js';
 
 const version = getVersion();
@@ -13,15 +15,40 @@ import {forceShutdown} from '../util/shutdown.js';
  * @typedef {import('express').NextFunction} NextFunction
  */
 
+/**
+ * @typedef {import('../util/statsManager.js').Bucket} Bucket
+ */
+
+/**
+ * @typedef {object} StatsSummary
+ * @property {Date} startTime - Server start time.
+ * @property {number} totalRequests - Total requests handled.
+ * @property {number} totalErrors - Total errors encountered.
+ * @property {number} avgResponseTime - Lifetime average response time.
+ * @property {number} minResponseTime - Lifetime minimum response time.
+ * @property {number} maxResponseTime - Lifetime maximum response time.
+ * @property {number} maxRequestsPerSecond - Lifetime maximum requests per second.
+ * @property {object} maxMemory - Lifetime memory extremes.
+ * @property {number} maxMemory.heapUsedMax - Maximum heap used.
+ * @property {number} maxMemory.heapTotalMax - Maximum heap total.
+ * @property {number} maxMemory.rssMax - Maximum RSS.
+ * @property {number} maxMemory.externalMax - Maximum external memory.
+ * @property {object} cpu - Lifetime CPU extremes.
+ * @property {number} cpu.max - Max CPU.
+ * @property {number} cpu.userMax - Max user CPU.
+ * @property {number} cpu.systemMax - Max system CPU.
+ */
+
 export const handlerAdmin = express.Router();
 
 /**
  * Helper to read last N lines of a file
  * @param {string} filePath - Path to file
  * @param {number} n - Number of lines
+ * @param {string} [filter] - Optional filter string
  * @returns {Promise<string[]>} - The lines
  */
-const readLastLines = async (filePath, n = 100) => {
+const readLastLines = async (filePath, n = 100, filter = '') => {
 	if (!fs.existsSync(filePath)) {
 		return [];
 	}
@@ -32,12 +59,16 @@ const readLastLines = async (filePath, n = 100) => {
 		crlfDelay: Infinity,
 	});
 
+	const filterLower = filter.toLowerCase();
+
 	/** @type {string[]} */
 	const lines = [];
 	for await (const line of rl) {
-		lines.push(line);
-		if (lines.length > n) {
-			lines.shift();
+		if (!filter || line.toLowerCase().includes(filterLower)) {
+			lines.push(line);
+			if (lines.length > n) {
+				lines.shift();
+			}
 		}
 	}
 	return lines;
@@ -48,42 +79,72 @@ handlerAdmin.get('/api/status', (_req, res) => {
 	const uptime = (new Date().getTime() - AdminContext.startTime.getTime()) / 1000;
 
 	const poolStats = AdminContext.pools.map((pool, index) => {
-		const name = AdminContext.caches[index]?.poolName ?? `pool-${index}`;
+		const cache = AdminContext.caches[index];
+		const name = cache?.poolName ?? `pool-${index}`;
 		const p = /** @type {import('oracledb').Pool & {getStatistics?: () => Record<string, unknown>}} */ (pool);
+		const procStats = cache?.procedureNameCache.getStats();
+		const argStats = cache?.argumentCache.getStats();
+
 		return {
 			name,
 			stats: typeof p.getStatistics === 'function' ? p.getStatistics() : null,
 			connectionsOpen: pool.connectionsOpen,
 			connectionsInUse: pool.connectionsInUse,
+			cache: {
+				procedureName: {
+					size: cache?.procedureNameCache.keys().length ?? 0,
+					hits: procStats?.hits ?? 0,
+					misses: procStats?.misses ?? 0,
+				},
+				argument: {
+					size: cache?.argumentCache.keys().length ?? 0,
+					hits: argStats?.hits ?? 0,
+					misses: argStats?.misses ?? 0,
+				},
+			},
 		};
 	});
 
 	const memUsage = process.memoryUsage();
+	const systemMemoryUsed = os.totalmem() - os.freemem();
 	const cpuUsage = process.cpuUsage();
+	const summary = /** @type {StatsSummary} */ (AdminContext.statsManager.getSummary());
 
 	res.json({
 		version,
 		status: AdminContext.paused ? 'paused' : 'running',
 		uptime,
 		startTime: AdminContext.startTime,
+		intervalMs: AdminContext.statsManager.config.intervalMs,
 		metrics: {
-			...AdminContext.metrics,
-			avgResponseTime: AdminContext.metrics.requestCount > 0 ? AdminContext.metrics.totalDuration / AdminContext.metrics.requestCount : 0,
+			requestCount: summary.totalRequests,
+			errorCount: summary.totalErrors,
+			avgResponseTime: summary.avgResponseTime,
+			minResponseTime: summary.minResponseTime,
+			maxResponseTime: summary.maxResponseTime,
+			maxRequestsPerSecond: summary.maxRequestsPerSecond,
 		},
+		history: AdminContext.statsManager.getHistory(),
 		pools: poolStats,
 		system: {
 			nodeVersion: process.version,
 			platform: process.platform,
 			arch: process.arch,
+			cpuCores: os.cpus().length,
 			memory: {
-				rss: memUsage.rss,
+				rss: systemMemoryUsed,
 				heapTotal: memUsage.heapTotal,
 				heapUsed: memUsage.heapUsed,
 				external: memUsage.external,
+				totalMemory: os.totalmem(),
+				...summary.maxMemory,
 			},
 			cpu: {
 				user: cpuUsage.user,
 				system: cpuUsage.system,
+				max: summary.cpu.max,
+				userMax: summary.cpu.userMax,
+				systemMax: summary.cpu.systemMax,
 			},
 		},
 		config: AdminContext.config
@@ -103,8 +164,9 @@ handlerAdmin.get('/api/status', (_req, res) => {
 handlerAdmin.get('/api/logs/error', async (req, res) => {
 	try {
 		const limit = Number(req.query.limit) || 100;
+		const filter = typeof req.query.filter === 'string' ? req.query.filter : '';
 		const logFile = 'error.json.log';
-		const lines = await readLastLines(logFile, limit);
+		const lines = await readLastLines(logFile, limit, filter);
 
 		/** @type {Record<string, unknown>[]} */
 		const logs = [];
@@ -129,6 +191,7 @@ handlerAdmin.get('/api/logs/error', async (req, res) => {
 handlerAdmin.get('/api/logs/access', async (req, res) => {
 	try {
 		const limit = Number(req.query.limit) || 100;
+		const filter = typeof req.query.filter === 'string' ? req.query.filter : '';
 		const logFile = AdminContext.config?.loggerFilename ?? 'access.log';
 
 		if (!AdminContext.config?.loggerFilename) {
@@ -136,28 +199,14 @@ handlerAdmin.get('/api/logs/access', async (req, res) => {
 			return;
 		}
 
-		const lines = await readLastLines(logFile, limit);
+		const lines = await readLastLines(logFile, limit, filter);
 		res.json(lines.reverse());
 	} catch (err) {
 		res.status(500).json({error: String(err)});
 	}
 });
 
-// GET /api/cache
-handlerAdmin.get('/api/cache', (_req, res) => {
-	const caches = AdminContext.caches.map((c) => ({
-		poolName: c.poolName,
-		procedureNameCache: {
-			size: c.procedureNameCache.keys().length,
-			stats: c.procedureNameCache.getStats(),
-		},
-		argumentCache: {
-			size: c.argumentCache.keys().length,
-			stats: c.argumentCache.getStats(),
-		},
-	}));
-	res.json(caches);
-});
+// GET /api/cache - REMOVED (Merged into /api/status)
 
 // POST /api/cache/clear
 handlerAdmin.post('/api/cache/clear', (req, res) => {
@@ -196,3 +245,49 @@ handlerAdmin.post('/api/server/:action', (req, res) => {
 		res.status(400).json({error: 'Invalid action'});
 	}
 });
+
+// GET /api/trace/status
+handlerAdmin.get('/api/trace/status', (_req, res) => {
+	res.json({enabled: traceManager.isEnabled()});
+});
+
+// POST /api/trace/toggle
+handlerAdmin.post('/api/trace/toggle', (req, res) => {
+	const body = /** @type {unknown} */ (req.body);
+	const enabled = body && typeof body === 'object' && 'enabled' in body && typeof body.enabled === 'boolean' ? body.enabled : false;
+	traceManager.setEnabled(enabled);
+	res.json({enabled: traceManager.isEnabled()});
+});
+
+// GET /api/trace/logs
+handlerAdmin.get('/api/trace/logs', async (req, res) => {
+	try {
+		const limit = Number(req.query.limit) || 100;
+		const filter = typeof req.query.filter === 'string' ? req.query.filter : '';
+		const logFile = traceManager.getFilePath();
+		const lines = await readLastLines(logFile, limit, filter);
+
+		/** @type {Record<string, unknown>[]} */
+		const logs = [];
+		for (const line of lines) {
+			try {
+				const parsed = /** @type {unknown} */ (JSON.parse(line));
+				if (parsed && typeof parsed === 'object') {
+					logs.push(/** @type {Record<string, unknown>} */ (parsed));
+				}
+			} catch (e) {
+				// ignore
+			}
+		}
+
+		res.json(logs.reverse());
+	} catch (err) {
+		res.status(500).json({error: String(err)});
+	}
+});
+
+// POST /api/trace/clear
+handlerAdmin.post('/api/trace/clear', (_req, res) => {
+	traceManager.clear();
+	res.json({message: 'Traces cleared'});
+});

package/src/handler/plsql/errorPage.js

@@ -8,7 +8,6 @@ import {getFormattedMessage, logToFile} from '../../util/trace.js';
 import {errorToString} from '../../util/errorToString.js';
 import {getHtmlPage} from '../../util/html.js';
 import {jsonLogger} from '../../util/jsonLogger.js';
-import {AdminContext} from '../../server/server.js';
 
 /**
  * @typedef {import('express').Request} Request
@@ -76,9 +75,6 @@ export const errorPage = (req, res, options, error) => {
 	// get error data
 	const errorData = getErrorData(req, error);
 
-	// Update metrics
-	AdminContext.metrics.errorCount++;
-
 	// get formatted message
 	const {html, text} = getFormattedMessage(errorData);
 

package/src/handler/plsql/owaPageStream.js

@@ -0,0 +1,93 @@
+import {Readable} from 'node:stream';
+import oracledb from 'oracledb';
+import z from 'zod';
+import debugModule from 'debug';
+import {ProcedureError} from './procedureError.js';
+import {errorToString} from '../../util/errorToString.js';
+
+const debug = debugModule('webplsql:owaPageStream');
+
+/**
+ * @typedef {import('oracledb').Connection} Connection
+ * @typedef {import('../../types.js').BindParameterConfig} BindParameterConfig
+ */
+
+export class OWAPageStream extends Readable {
+	/**
+	 * @param {Connection} databaseConnection - The database connection.
+	 */
+	constructor(databaseConnection) {
+		super({highWaterMark: 16384}); // 16KB buffer
+		this.databaseConnection = databaseConnection;
+		this.chunkSize = 1000;
+		this.isDone = false;
+	}
+
+	/**
+	 * Fetch a chunk of the page from the database.
+	 * @returns {Promise<string[]>} The array of lines fetched.
+	 */
+	async fetchChunk() {
+		if (this.isDone) return [];
+
+		/** @type {BindParameterConfig} */
+		const bindParameter = {
+			lines: {dir: oracledb.BIND_OUT, type: oracledb.STRING, maxArraySize: this.chunkSize},
+			irows: {dir: oracledb.BIND_INOUT, type: oracledb.NUMBER, val: this.chunkSize},
+		};
+
+		const sqlStatement = 'BEGIN owa.get_page(thepage=>:lines, irows=>:irows); END;';
+
+		try {
+			const result = await this.databaseConnection.execute(sqlStatement, bindParameter);
+			const {lines, irows} = z.object({irows: z.number(), lines: z.array(z.string())}).parse(result.outBinds);
+
+			debug(`fetched ${lines.length} lines (irows=${irows})`);
+
+			// If we got fewer lines than requested, OR if we got 0 lines, we are done
+			if (lines.length < this.chunkSize) {
+				this.isDone = true;
+			}
+
+			return lines;
+		} catch (err) {
+			if (err instanceof ProcedureError) {
+				throw err;
+			}
+			throw new ProcedureError(`OWAPageStream: error when getting page\n${errorToString(err)}`, {}, sqlStatement, bindParameter);
+		}
+	}
+
+	/**
+	 * @override
+	 * @param {number} _size - The size hint (unused).
+	 * @returns {void}
+	 */
+	_read(_size) {
+		this.fetchChunk()
+			.then((lines) => {
+				if (lines.length > 0) {
+					this.push(lines.join(''));
+				}
+
+				// After fetching, check if we're done
+				if (this.isDone) {
+					this.push(null);
+				}
+			})
+			.catch((/** @type {unknown} */ err) => {
+				this.destroy(err instanceof Error ? err : new Error(String(err)));
+			});
+	}
+
+	/**
+	 * Add initial body content to the stream.
+	 * @param {string} content - The initial content to prepend.
+	 * @returns {void}
+	 */
+	addBody(content) {
+		if (content && content.length > 0) {
+			this.push(content);
+		}
+	}
+}