web_plsql 0.18.0 → 1.2.0

package/src/admin/client/charts.ts

@@ -0,0 +1,598 @@
+import {Chart, registerables} from 'chart.js';
+import type {State, ChartInstance, HistoryBucket} from '../js/types.js';
+import type {StatusResponse} from '../js/schemas.js';
+
+// Register Chart.js components
+Chart.register(...registerables);
+
+/**
+ * Cache pie chart instances.
+ */
+const cachePieInstances = new Map<HTMLCanvasElement, Chart>();
+
+type PoolInfo = StatusResponse['pools'][number];
+
+/**
+ * Chart colors based on theme mode.
+ */
+type 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',
+	};
+}
+
+/**
+ * Initialize charts.
+ * @param state - Application state.
+ */
+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 = {
+			labels: [],
+			datasets: [
+				{
+					label: 'Requests/s',
+					data: [],
+					borderColor: '#3b82f6',
+					backgroundColor: 'rgba(59, 130, 246, 0.1)',
+					fill: true,
+					tension: 0.4,
+					yAxisID: 'y',
+				},
+				{
+					label: 'Avg Response Time (ms)',
+					data: [],
+					borderColor: '#10b981',
+					backgroundColor: 'rgba(16, 185, 129, 0.1)',
+					fill: true,
+					tension: 0.4,
+					yAxisID: 'y1',
+				},
+			],
+		};
+
+		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: true,
+						text: 'Time',
+						color: colors.textColor,
+					},
+				},
+				y: {
+					type: 'linear' as const,
+					display: true,
+					position: 'left' as const,
+					grid: {color: colors.gridColor},
+					ticks: {color: colors.textColor},
+					beginAtZero: true,
+					title: {
+						display: true,
+						text: 'Requests/s',
+						color: colors.textColor,
+					},
+				},
+				y1: {
+					type: 'linear' as const,
+					display: true,
+					position: 'right' as const,
+					grid: {drawOnChartArea: false, color: colors.gridColor},
+					ticks: {color: '#10b981'},
+					beginAtZero: true,
+					title: {
+						display: true,
+						text: 'Avg Response Time (ms)',
+						color: '#10b981',
+					},
+				},
+			},
+			plugins: {
+				legend: {
+					labels: {color: colors.textColor},
+				},
+			},
+		};
+
+		const chart = new Chart(trafficEl, {
+			type: 'line',
+			data: chartData,
+			options: chartOptions,
+		});
+
+		state.charts.traffic = {
+			data: chartData,
+			options: chartOptions,
+			update: () => chart.update(),
+		} as ChartInstance;
+	}
+
+	const poolEl = document.getElementById('pool-chart') as HTMLCanvasElement | null;
+	if (poolEl) {
+		const chartData = {
+			labels: [],
+			datasets: [],
+		};
+
+		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: true,
+						text: 'Time',
+						color: colors.textColor,
+					},
+				},
+				y: {
+					grid: {color: colors.gridColor},
+					ticks: {color: colors.textColor},
+					beginAtZero: true,
+					title: {
+						display: true,
+						text: 'Connections',
+						color: colors.textColor,
+					},
+				},
+			},
+			plugins: {
+				legend: {
+					labels: {color: colors.textColor},
+				},
+			},
+		};
+
+		const chart = new Chart(poolEl, {
+			type: 'line',
+			data: chartData,
+			options: chartOptions,
+		});
+
+		state.charts.pool = {
+			data: chartData,
+			options: chartOptions,
+			update: () => chart.update(),
+		} as ChartInstance;
+	}
+}
+
+/**
+ * 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.
+ * @param timeLabel - Time label for the data point.
+ * @param reqPerSec - Requests per second.
+ * @param avgResponseTime - Average response time in ms.
+ * @param pools - Pool information.
+ */
+export function updateCharts(state: State, timeLabel: string, reqPerSec: number, avgResponseTime: number, pools: PoolInfo[]): void {
+	const maxPoints = state.maxHistoryPoints;
+
+	state.history.labels.push(timeLabel);
+	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;
+	if (trafficChart?.data.datasets[0] && trafficChart.data.datasets[1]) {
+		trafficChart.data.labels = state.history.labels;
+		trafficChart.data.datasets[0].data = state.history.requests;
+		trafficChart.data.datasets[1].data = state.history.avgResponseTimes;
+		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;
+		pools.forEach((p, i) => {
+			const poolName = p.name;
+			const history = state.history;
+			let usage = history.poolUsage[poolName];
+			if (!usage) {
+				usage = [];
+				history.poolUsage[poolName] = usage;
+				const colors = ['#10b981', '#f59e0b', '#3b82f6', '#8b5cf6', '#ec4899'];
+				const color = colors[i % colors.length] ?? '#3b82f6';
+				if (color) {
+					poolChart.data.datasets.push({
+						label: poolName,
+						data: usage,
+						borderColor: color,
+						backgroundColor: undefined,
+						fill: undefined,
+						tension: 0.4,
+					});
+				}
+			}
+			usage.push(p.connectionsInUse);
+			if (usage.length > maxPoints) {
+				usage.shift();
+			}
+		});
+		poolChart.update();
+	}
+}
+
+/**
+ * Render a cache statistics pie chart.
+ *
+ * @param canvas - The canvas element.
+ */
+export function renderCachePie(canvas: HTMLCanvasElement): void {
+	const hits = parseInt(canvas.dataset.hits ?? '0');
+	const misses = parseInt(canvas.dataset.misses ?? '0');
+
+	const existingChart = cachePieInstances.get(canvas);
+	if (existingChart?.data.datasets[0]) {
+		existingChart.data.datasets[0].data = [hits, misses];
+		existingChart.update();
+		return;
+	}
+
+	const chart = new Chart(canvas, {
+		type: 'pie',
+		data: {
+			labels: ['Hits', 'Misses'],
+			datasets: [
+				{
+					data: [hits, misses],
+					backgroundColor: ['#10b981', '#ef4444'],
+					borderColor: 'transparent',
+				},
+			],
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: true,
+			plugins: {
+				legend: {display: false},
+				tooltip: {
+					callbacks: {
+						label: (context) => {
+							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}%)`;
+						},
+					},
+				},
+			},
+		},
+	});
+
+	cachePieInstances.set(canvas, chart);
+}

package/src/admin/client/main.js

@@ -0,0 +1,3 @@
+import '../js/api.js';
+import '../js/app.js';
+import './tailwind.css';

package/src/admin/client/tailwind.css

@@ -0,0 +1,41 @@
+@import 'tailwindcss';
+
+@theme {
+	--color-primary: #3b82f6;
+	--color-success: #10b981;
+	--color-warning: #f59e0b;
+	--color-danger: #ef4444;
+}
+
+body {
+	font-family:
+		'Inter',
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Helvetica,
+		Arial,
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+}
+
+body.dark {
+	--bg-main: #0f172a;
+	--bg-side: #1e293b;
+	--bg-card: #1e293b;
+	--bg-hover: #334155;
+	--text-main: #94a3b8;
+	--text-bright: #f8fafc;
+	--border: #334155;
+}
+
+body:not(.dark) {
+	--bg-main: #f8fafc;
+	--bg-side: #ffffff;
+	--bg-card: #ffffff;
+	--bg-hover: #f1f5f9;
+	--text-main: #475569;
+	--text-bright: #0f172a;
+	--border: #e2e8f0;
+}

package/src/admin/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3b82f6">
+  <path d="M12 2C6.48 2 2 4.02 2 6.5s4.48 4.5 10 4.5 10-2.02 10-4.5S17.52 2 12 2zm0 13c-5.52 0-10-2.02-10-4.5V14c0 2.48 4.48 4.5 10 4.5s10-2.02 10-4.5v-3.5c0 2.48-4.48 4.5-10 4.5zm0 4.5c-5.52 0-10-2.02-10-4.5V19c0 2.48 4.48 4.5 10 4.5s10-2.02 10-4.5v-2.5c0 2.48-4.48 4.5-10 4.5z"/>
+</svg>