web_plsql 1.0.0 → 1.2.0

package/README.md

@@ -1,7 +1,6 @@
   [![NPM Version][npm-image]][npm-url]
   [![NPM Downloads][downloads-image]][downloads-url]
-  [![Linux Build](https://travis-ci.org/doberkofler/web_plsql.svg?branch=master)](https://travis-ci.org/doberkofler/web_plsql)
-  [![Build status][appveyor-image]][appveyor-url]
+  [![Node.js CI](https://github.com/doberkofler/web_plsql/actions/workflows/node.js.yml/badge.svg)](https://github.com/doberkofler/web_plsql/actions/workflows/node.js.yml)
   [![Coverage Status](https://coveralls.io/repos/github/doberkofler/web_plsql/badge.svg?branch=master)](https://coveralls.io/github/doberkofler/web_plsql?branch=master)
 
 # Oracle PL/SQL Gateway Middleware for the Express web framework for Node.js
@@ -12,6 +11,8 @@ and serve the content using the Express web framework for Node.js.
 
 Please feel free to try and suggest any improvements. Your thoughts and ideas are most welcome.
 
+![Dashboard](docs/images/admin_console.png)
+
 # Release History
 See the [changelog](https://github.com/doberkofler/web_plsql/blob/master/CHANGELOG.md).
 
@@ -200,6 +201,8 @@ The following mod_plsql DAD configuration translates to the configuration option
 - PlsqlRequestValidationFunction -> routePlSql[].pathAliasProcedure
 - PlsqlExclusionList
 - Basic and custom authentication methods, based on the OWA_SEC package and custom packages.
+- Caching of procedure metadata and validation results for high performance.
+- Real-time monitoring and management via a built-in Admin Console.
 
 ## Features that are only available in web_plsql
 - The option `transactionModeType` specifies an optional transaction mode.
@@ -233,6 +236,3 @@ The following mod_plsql DAD configuration translates to the configuration option
 
 [downloads-image]: https://img.shields.io/npm/dm/web_plsql.svg
 [downloads-url]: https://npmjs.org/package/web_plsql
-
-[appveyor-image]: https://ci.appveyor.com/api/projects/status/github/doberkofler/web_plsql?branch=master&svg=true
-[appveyor-url]: https://ci.appveyor.com/project/doberkofler/web-plsql

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web_plsql",
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"author": "Dieter Oberkofler <dieter.oberkofler@gmail.com>",
 	"license": "MIT",
 	"description": "The Express Middleware for Oracle PL/SQL",
@@ -47,14 +47,14 @@
 		"build:admin": "vite build",
 		"lint": "prettier --check --experimental-cli . && eslint . && tsc --noEmit && eslint src/admin --config src/admin/js/eslint.config.js",
 		"test": "vitest run",
+		"test:perf": "vitest run tests/performance.test.js",
 		"test:coverage": "vitest run --coverage",
 		"stylelint": "stylelint \"src/admin/**/*.css\"",
 		"types": "rm -rf types && tsc  --noEmit false --declaration true --declarationDir types --emitDeclarationOnly true --allowJs true --target es2020 --module es2020 --moduleResolution node --allowSyntheticDefaultImports true src/*.js",
 		"clean": "shx rm -f *.tgz && shx rm -f *.log",
 		"version": "node update-version.js",
-		"prepack": "npm run ci",
 		"ci": "npm run clean && npm run version && npm run types && npm run build && npm run lint && npm run stylelint && npm run test:coverage",
-		"create-package": "shx rm -f *.tgz && npm pack",
+		"create-package": "npm run ci && shx rm -f *.tgz && npm pack",
 		"image-build": "docker build --no-cache --progress=plain --tag=web_plsql .",
 		"image-save": "docker save web_plsql | gzip > web_plsql.tar.gz"
 	},
@@ -80,12 +80,12 @@
 		"@types/debug": "4.1.12",
 		"@types/morgan": "1.9.10",
 		"@types/multer": "2.0.0",
-		"@types/node": "25.2.1",
+		"@types/node": "25.2.2",
 		"@types/oracledb": "6.10.1",
 		"@types/supertest": "6.0.3",
 		"@vitest/coverage-v8": "^4.0.18",
 		"eslint": "9.39.2",
-		"eslint-plugin-jsdoc": "62.5.3",
+		"eslint-plugin-jsdoc": "62.5.4",
 		"oracledb": "6.10.0",
 		"prettier": "3.8.1",
 		"shx": "0.4.0",

package/src/admin/client/charts.ts

@@ -1,5 +1,5 @@
 import {Chart, registerables} from 'chart.js';
-import type {State, ChartInstance} from '../js/types.js';
+import type {State, ChartInstance, HistoryBucket} from '../js/types.js';
 import type {StatusResponse} from '../js/schemas.js';
 
 // Register Chart.js components
@@ -40,6 +40,182 @@ export function initCharts(state: State): void {
 	const isDark = document.body.classList.contains('dark');
 	const colors = getChartColors(isDark);
 
+	const memoryEl = document.getElementById('memory-chart') as HTMLCanvasElement | null;
+	if (memoryEl) {
+		const chartData = {
+			labels: [],
+			datasets: [
+				{
+					label: 'Memory Usage (%)',
+					data: [],
+					backgroundColor: 'rgba(16, 185, 129, 0.1)',
+					borderColor: '#10b981',
+					borderWidth: 2,
+					fill: true,
+					tension: 0.4,
+				},
+			],
+		};
+
+		const chartOptions = {
+			responsive: true,
+			maintainAspectRatio: false,
+			scales: {
+				x: {
+					grid: {color: colors.gridColor},
+					ticks: {
+						display: false,
+						color: colors.textColor,
+						maxRotation: 0,
+						autoSkip: true,
+						maxTicksLimit: 10,
+					},
+					title: {
+						display: false,
+						text: 'Time',
+						color: colors.textColor,
+					},
+				},
+				y: {
+					display: true,
+					beginAtZero: true,
+					max: 100,
+					grid: {
+						color: colors.gridColor,
+					},
+					border: {
+						display: true,
+						color: colors.gridColor,
+					},
+					ticks: {
+						display: true,
+						color: colors.textColor,
+						stepSize: 25,
+						callback: function (value: number | string) {
+							return String(value) + '%';
+						},
+					},
+					title: {
+						display: false,
+						text: 'Memory %',
+						color: colors.textColor,
+					},
+				},
+			},
+			layout: {
+				padding: 0,
+			},
+			plugins: {
+				legend: {display: false},
+				tooltip: {
+					enabled: true,
+					position: 'nearest' as const,
+					intersect: false,
+				},
+			},
+		};
+
+		const chart = new Chart(memoryEl, {
+			type: 'line',
+			data: chartData,
+			options: chartOptions,
+		});
+
+		state.charts.memory = {
+			data: chartData,
+			options: chartOptions,
+			update: () => chart.update(),
+		} as ChartInstance;
+	}
+
+	const cpuEl = document.getElementById('cpu-chart') as HTMLCanvasElement | null;
+	if (cpuEl) {
+		const chartData = {
+			labels: [],
+			datasets: [
+				{
+					label: 'CPU Usage (%)',
+					data: [],
+					backgroundColor: 'rgba(16, 185, 129, 0.1)',
+					borderColor: '#10b981',
+					borderWidth: 2,
+					fill: true,
+					tension: 0.4,
+				},
+			],
+		};
+
+		const chartOptions = {
+			responsive: true,
+			maintainAspectRatio: false,
+			scales: {
+				x: {
+					grid: {color: colors.gridColor},
+					ticks: {
+						display: false,
+						color: colors.textColor,
+						maxRotation: 0,
+						autoSkip: true,
+						maxTicksLimit: 10,
+					},
+					title: {
+						display: false,
+						text: 'Time',
+						color: colors.textColor,
+					},
+				},
+				y: {
+					display: true,
+					beginAtZero: true,
+					max: 100,
+					grid: {
+						color: colors.gridColor,
+					},
+					border: {
+						display: true,
+						color: colors.gridColor,
+					},
+					ticks: {
+						display: true,
+						color: colors.textColor,
+						stepSize: 25,
+						callback: function (value: number | string) {
+							return String(value) + '%';
+						},
+					},
+					title: {
+						display: false,
+						text: 'Cpu %',
+						color: colors.textColor,
+					},
+				},
+			},
+			layout: {
+				padding: 0,
+			},
+			plugins: {
+				legend: {display: false},
+				tooltip: {
+					enabled: true,
+					position: 'nearest' as const,
+					intersect: false,
+				},
+			},
+		};
+
+		const chart = new Chart(cpuEl, {
+			type: 'line',
+			data: chartData,
+			options: chartOptions,
+		});
+
+		state.charts.cpu = {
+			data: chartData,
+			options: chartOptions,
+			update: () => chart.update(),
+		} as ChartInstance;
+	}
+
 	const trafficEl = document.getElementById('traffic-chart') as HTMLCanvasElement | null;
 	if (trafficEl) {
 		const chartData = {
@@ -73,6 +249,7 @@ export function initCharts(state: State): void {
 				x: {
 					grid: {color: colors.gridColor},
 					ticks: {
+						display: false,
 						color: colors.textColor,
 						maxRotation: 0,
 						autoSkip: true,
@@ -145,6 +322,7 @@ export function initCharts(state: State): void {
 				x: {
 					grid: {color: colors.gridColor},
 					ticks: {
+						display: false,
 						color: colors.textColor,
 						maxRotation: 0,
 						autoSkip: true,
@@ -188,6 +366,99 @@ export function initCharts(state: State): void {
 	}
 }
 
+/**
+ * Hydrate charts and state from server history.
+ * @param state - Application state.
+ * @param history - Server history buffer.
+ */
+export function hydrateHistory(state: State, history: HistoryBucket[]): void {
+	state.history.labels = [];
+	state.history.requests = [];
+	state.history.avgResponseTimes = [];
+	state.history.p95ResponseTimes = [];
+	state.history.p99ResponseTimes = [];
+	state.history.cpuUsage = [];
+	state.history.memoryUsage = [];
+	state.history.poolUsage = {};
+
+	const maxPoints = state.maxHistoryPoints;
+	const recentHistory = history.slice(-maxPoints);
+	const intervalSec = (state.status.intervalMs ?? 5000) / 1000;
+
+	recentHistory.forEach((b) => {
+		const timeLabel = new Date(b.timestamp).toLocaleTimeString();
+		state.history.labels.push(timeLabel);
+		state.history.requests.push(b.requests / intervalSec); // Requests per second
+		state.history.avgResponseTimes.push(b.durationAvg);
+		state.history.p95ResponseTimes ??= [];
+		state.history.p95ResponseTimes.push(b.durationP95);
+		state.history.p99ResponseTimes ??= [];
+		state.history.p99ResponseTimes.push(b.durationP99);
+
+		// Resource usage percentage
+		const totalMem = state.status.system?.memory.totalMemory ?? 0;
+		state.history.cpuUsage.push(b.system.cpu);
+		state.history.memoryUsage.push(totalMem > 0 ? (b.system.rss / totalMem) * 100 : 0);
+
+		b.pools.forEach((p) => {
+			state.history.poolUsage[p.name] ??= [];
+			state.history.poolUsage[p.name]?.push(p.connectionsInUse);
+		});
+	});
+
+	const trafficChart = state.charts.traffic;
+	if (trafficChart) {
+		trafficChart.data.labels = state.history.labels;
+		const ds0 = trafficChart.data.datasets[0];
+		const ds1 = trafficChart.data.datasets[1];
+		if (ds0) ds0.data = state.history.requests;
+		if (ds1) ds1.data = state.history.avgResponseTimes;
+		trafficChart.update();
+	}
+
+	const poolChart = state.charts.pool;
+	if (poolChart) {
+		poolChart.data.labels = state.history.labels;
+		Object.entries(state.history.poolUsage).forEach(([name, usage], i) => {
+			let dataset = poolChart.data.datasets.find((ds) => ds.label === name);
+			if (!dataset) {
+				const colors = ['#10b981', '#f59e0b', '#3b82f6', '#8b5cf6', '#ec4899'];
+				const color = colors[i % colors.length] ?? '#3b82f6';
+				dataset = {
+					label: name,
+					data: usage,
+					borderColor: color,
+					backgroundColor: undefined,
+					fill: undefined,
+					tension: 0.4,
+				};
+				poolChart.data.datasets.push(dataset);
+			} else {
+				dataset.data = usage;
+			}
+		});
+		poolChart.update();
+	}
+
+	const memoryChart = state.charts.memory;
+	if (memoryChart) {
+		memoryChart.data.labels = state.history.labels;
+		if (memoryChart.data.datasets[0]) {
+			memoryChart.data.datasets[0].data = state.history.memoryUsage;
+		}
+		memoryChart.update();
+	}
+
+	const cpuChart = state.charts.cpu;
+	if (cpuChart) {
+		cpuChart.data.labels = state.history.labels;
+		if (cpuChart.data.datasets[0]) {
+			cpuChart.data.datasets[0].data = state.history.cpuUsage;
+		}
+		cpuChart.update();
+	}
+}
+
 /**
  * Update charts with new data.
  * @param state - Application state.
@@ -203,10 +474,23 @@ export function updateCharts(state: State, timeLabel: string, reqPerSec: number,
 	state.history.requests.push(reqPerSec);
 	state.history.avgResponseTimes.push(avgResponseTime);
 
+	// Resource usage percentage
+	const totalMem = state.status.system?.memory.totalMemory ?? 0;
+	const latestBucket = state.status.history?.[state.status.history.length - 1];
+	if (latestBucket) {
+		state.history.cpuUsage.push(latestBucket.system.cpu);
+		state.history.memoryUsage.push(totalMem > 0 ? (latestBucket.system.rss / totalMem) * 100 : 0);
+	} else {
+		state.history.cpuUsage.push(0);
+		state.history.memoryUsage.push(0);
+	}
+
 	if (state.history.labels.length > maxPoints) {
 		state.history.labels.shift();
 		state.history.requests.shift();
 		state.history.avgResponseTimes.shift();
+		state.history.cpuUsage.shift();
+		state.history.memoryUsage.shift();
 	}
 
 	const trafficChart = state.charts.traffic;
@@ -217,6 +501,20 @@ export function updateCharts(state: State, timeLabel: string, reqPerSec: number,
 		trafficChart.update();
 	}
 
+	const memoryChart = state.charts.memory;
+	if (memoryChart?.data.datasets[0]) {
+		memoryChart.data.labels = state.history.labels;
+		memoryChart.data.datasets[0].data = state.history.memoryUsage;
+		memoryChart.update();
+	}
+
+	const cpuChart = state.charts.cpu;
+	if (cpuChart?.data.datasets[0]) {
+		cpuChart.data.labels = state.history.labels;
+		cpuChart.data.datasets[0].data = state.history.cpuUsage;
+		cpuChart.update();
+	}
+
 	const poolChart = state.charts.pool;
 	if (poolChart) {
 		poolChart.data.labels = state.history.labels;
@@ -228,7 +526,7 @@ export function updateCharts(state: State, timeLabel: string, reqPerSec: number,
 				usage = [];
 				history.poolUsage[poolName] = usage;
 				const colors = ['#10b981', '#f59e0b', '#3b82f6', '#8b5cf6', '#ec4899'];
-				const color = colors[i % colors.length];
+				const color = colors[i % colors.length] ?? '#3b82f6';
 				if (color) {
 					poolChart.data.datasets.push({
 						label: poolName,
@@ -250,7 +548,8 @@ export function updateCharts(state: State, timeLabel: string, reqPerSec: number,
 }
 
 /**
- * Create or update a pie chart for cache statistics.
+ * Render a cache statistics pie chart.
+ *
  * @param canvas - The canvas element.
  */
 export function renderCachePie(canvas: HTMLCanvasElement): void {
@@ -287,7 +586,7 @@ export function renderCachePie(canvas: HTMLCanvasElement): void {
 							const value = context.raw as number;
 							const total = hits + misses;
 							const pct = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
-							return `${context.label}: ${value} (${pct}%)`;
+							return `${context.label ?? ''}: ${value} (${pct}%)`;
 						},
 					},
 				},