web_plsql 1.0.0 → 1.2.0

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/views.ts

@@ -1,34 +1,159 @@
 import {typedApi} from '../api.js';
-import {formatDuration, formatDateTime} from '../util/format.js';
-import {errorRow, poolCard} from '../templates/index.js';
+import {formatDuration, formatDateTime, formatMs} from '../util/format.js';
+import {poolCard} from '../templates/index.js';
 import {renderConfig} from '../templates/config.js';
-import type {State, ServerConfig} from '../types.js';
+import type {State, ServerConfig, SystemMetrics, ErrorLogResponse, TraceEntry} from '../types.js';
+import {DataTable, type TableColumn} from './table.js';
 
 /**
  * Refresh the error logs view.
  */
 export async function refreshErrors(): Promise<void> {
-	const logs = await typedApi.getErrorLogs();
+	const filterInput = document.getElementById('error-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('error-limit') as HTMLInputElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	const logs = await typedApi.getErrorLogs(limit, filter);
+
+	const columns: TableColumn<ErrorLogResponse>[] = [
+		{
+			id: 'timestamp',
+			header: 'Timestamp',
+			headerTitle: 'When the error occurred',
+			accessor: (l) => new Date(l.timestamp).toLocaleString(),
+			cellTitle: (l) => new Date(l.timestamp).toLocaleString(),
+		},
+		{
+			id: 'method',
+			header: 'Method',
+			headerTitle: 'HTTP method used',
+			render: (l) => `<code>${l.req?.method ?? '-'}</code>`,
+			cellTitle: (l) => `Method: ${l.req?.method ?? '-'}`,
+		},
+		{
+			id: 'url',
+			header: 'URL',
+			headerTitle: 'Requested URL',
+			accessor: (l) => l.req?.url ?? '-',
+			cellTitle: (l) => `URL: ${l.req?.url ?? '-'}`,
+		},
+		{
+			id: 'message',
+			header: 'Message',
+			headerTitle: 'Error message summary',
+			accessor: (l) => l.message,
+			className: 'break-all',
+			cellTitle: (l) => `Click for details: ${l.details?.fullMessage ?? ''}`,
+		},
+		{
+			id: 'action',
+			header: '',
+			width: '40px',
+			align: 'center',
+			render: () => '<span class="material-symbols-rounded">chevron_right</span>',
+			className: 'text-center text-accent opacity-70',
+		},
+	];
+
+	const table = new DataTable<ErrorLogResponse>('errors-table', {
+		columns,
+		dense: true,
+		onRowClick: (log) => {
+			const modal = document.getElementById('error-modal');
+			const content = document.getElementById('error-detail-content');
+			if (modal && content) {
+				content.textContent = JSON.stringify(log, null, 2);
+				modal.style.display = 'flex';
+			}
+		},
+	});
+
+	table.render(logs);
+
+	// Add class to rows for styling (legacy support if needed, or handled by table component)
 	const tbody = document.querySelector('#errors-table tbody');
-	if (!tbody) return;
+	if (tbody) {
+		tbody.querySelectorAll('tr').forEach((row) => {
+			row.classList.add('errors-table-row');
+		});
+	}
+}
+
+/**
+ * Refresh the statistical history view.
+ *
+ * @param status - The status data.
+ */
+export function refreshStats(status: Partial<State['status']>): void {
+	const tbody = document.querySelector('#stats-table tbody');
+	const limitSelect = document.getElementById('stats-row-limit') as HTMLSelectElement | null;
+	const infoEl = document.getElementById('stats-history-info');
+	if (!tbody || !status.history) return;
+
+	const limit = limitSelect ? parseInt(limitSelect.value) : 50;
+	const history = [...status.history].reverse();
+	const displayed = limit > 0 ? history.slice(0, limit) : history;
+
+	if (infoEl) {
+		infoEl.textContent = `Showing latest ${displayed.length} of ${history.length} data points`;
+	}
+
+	tbody.innerHTML = displayed
+		.map((b) => {
+			const time = new Date(b.timestamp).toLocaleTimeString();
+			const rss = (b.system.rss / 1024 / 1024).toFixed(1);
+			const heap = (b.system.heapUsed / 1024 / 1024).toFixed(1);
 
-	tbody.innerHTML = logs.map((l) => errorRow(l)).join('');
+			return `
+			<tr>
+				<td class="font-mono text-xs">${time}</td>
+				<td class="text-center font-bold text-bright">${b.requests}</td>
+				<td class="text-center font-bold ${b.errors > 0 ? 'text-danger' : 'text-success'}">${b.errors}</td>
+				<td class="text-right font-mono">${b.durationMin.toFixed(1)}</td>
+				<td class="text-right font-mono text-accent font-bold">${b.durationAvg.toFixed(1)}</td>
+				<td class="text-right font-mono text-warning">${b.durationP95.toFixed(1)}</td>
+				<td class="text-right font-mono text-danger">${b.durationP99.toFixed(1)}</td>
+				<td class="text-right font-mono">${b.durationMax.toFixed(1)}</td>
+				<td class="text-right font-mono">${b.system.cpu.toFixed(1)}%</td>
+				<td class="text-right font-mono">${rss}</td>
+				<td class="text-right font-mono">${heap}</td>
+			</tr>
+		`;
+		})
+		.join('');
 }
 
 /**
  * Refresh the access logs view.
  */
 export async function refreshAccess(): Promise<void> {
-	const result = await typedApi.getAccessLogs();
+	const filterInput = document.getElementById('access-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('access-limit') as HTMLInputElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	const result = await typedApi.getAccessLogs(limit, filter);
 	const el = document.getElementById('access-log-view');
+	const rangeEl = document.getElementById('access-log-range');
 	if (!el) return;
 
+	let logCount = 0;
 	if (Array.isArray(result)) {
 		el.textContent = result.join('\n');
+		logCount = result.length;
 	} else if (result && typeof result === 'object' && 'message' in result) {
 		el.textContent = result.message;
+		logCount = 0;
 	} else {
 		el.textContent = 'No logs available';
+		logCount = 0;
+	}
+
+	if (rangeEl) {
+		rangeEl.textContent = logCount > 0 ? `Showing last ${logCount} log entries` : 'No logs available';
 	}
 
 	if (el.parentElement) {
@@ -36,6 +161,106 @@ export async function refreshAccess(): Promise<void> {
 	}
 }
 
+/**
+ * Refresh the trace logs view.
+ */
+export async function refreshTrace(): Promise<void> {
+	const filterInput = document.getElementById('trace-filter') as HTMLInputElement | null;
+	const limitInput = document.getElementById('trace-limit') as HTMLInputElement | null;
+	const statusToggle = document.getElementById('trace-status-toggle') as HTMLButtonElement | null;
+
+	const filter = filterInput?.value ?? '';
+	const limit = limitInput ? parseInt(limitInput.value) : 100;
+
+	// Update status toggle
+	try {
+		const {enabled} = await typedApi.getTraceStatus();
+		if (statusToggle) {
+			statusToggle.textContent = enabled ? 'Tracing: ON' : 'Tracing: OFF';
+			statusToggle.dataset.enabled = String(enabled);
+			statusToggle.className = `px-4 py-2 rounded-lg text-sm font-bold transition-colors ${
+				enabled ? 'bg-success text-black hover:bg-success/80' : 'bg-white/10 text-white hover:bg-white/20'
+			}`;
+		}
+	} catch (err) {
+		console.error('Failed to get trace status', err);
+	}
+
+	const logs = await typedApi.getTraceLogs(limit, filter);
+
+	const columns: TableColumn<TraceEntry>[] = [
+		{
+			id: 'timestamp',
+			header: 'Timestamp',
+			headerTitle: 'Time of request',
+			accessor: (l) => new Date(l.timestamp).toLocaleString(),
+			className: 'font-mono text-xs text-dim',
+		},
+		{
+			id: 'source',
+			header: 'Source',
+			headerTitle: 'Request source (IP/User)',
+			accessor: (l) => l.source,
+			className: 'text-dim text-xs truncate max-w-[150px]',
+			cellTitle: (l) => l.source,
+		},
+		{
+			id: 'method',
+			header: 'Method',
+			headerTitle: 'HTTP Method',
+			accessor: (l) => l.method,
+			className: 'font-mono text-xs',
+		},
+		{
+			id: 'url',
+			header: 'Request URL',
+			headerTitle: 'Request URL',
+			accessor: (l) => l.url,
+			className: 'text-bright font-mono text-xs truncate max-w-[300px]',
+			cellTitle: (l) => l.url,
+		},
+		{
+			id: 'status',
+			header: 'Status',
+			headerTitle: 'HTTP Status Code',
+			width: '80px',
+			accessor: (l) => l.status,
+			className: (l) => `font-bold text-xs uppercase ${l.status === 'success' ? 'text-success' : 'text-danger'}`,
+		},
+		{
+			id: 'duration',
+			header: 'Duration',
+			headerTitle: 'Execution time in ms',
+			align: 'right',
+			accessor: (l) => formatMs(l.duration),
+			className: 'font-mono text-xs text-dim',
+		},
+		{
+			id: 'procedure',
+			header: 'Procedure',
+			headerTitle: 'Executed PL/SQL procedure',
+			accessor: (l) => l.procedure ?? '-',
+			className: 'text-dim text-xs truncate max-w-[200px]',
+			cellTitle: (l) => l.procedure ?? '',
+		},
+	];
+
+	const table = new DataTable<TraceEntry>('trace-table', {
+		columns,
+		dense: true,
+		onRowClick: (log) => {
+			const modal = document.getElementById('trace-modal');
+			const content = document.getElementById('trace-detail-content');
+			if (modal && content) {
+				content.textContent = JSON.stringify(log, null, 2);
+				modal.style.display = 'flex';
+			}
+		},
+	});
+
+	table.render(logs);
+}
+
 /**
  * Refresh the pools view.
  *
@@ -79,30 +304,39 @@ function formatBytes(bytes: number): string {
 }
 
 /**
- * Format microseconds to milliseconds.
+ * Format microseconds to a human-readable duration.
  *
  * @param microseconds - CPU time in microseconds.
  * @returns Formatted string.
  */
 function formatCpuTime(microseconds: number): string {
-	const milliseconds = microseconds / 1000;
-	return `${milliseconds.toFixed(2)} ms`;
+	return formatMs(microseconds / 1000);
 }
 
 /**
  * Refresh the system info view.
  *
  * @param status - The status data.
+ * @param _state - The application state.
  */
-export function refreshSystem(status: Partial<State['status']>): void {
+export function refreshSystem(status: Partial<State['status']>, _state?: State): void {
 	const middlewareVersion = document.getElementById('middleware-version');
-	if (middlewareVersion && status.version) middlewareVersion.textContent = status.version;
+	if (middlewareVersion && status.version) {
+		middlewareVersion.textContent = `${status.version} (${__BUILD_TIME__})`;
+		middlewareVersion.title = 'The version of the web_plsql gateway and admin console build time';
+	}
 
 	const nodeVersion = document.getElementById('node-version');
-	if (nodeVersion && status.system) nodeVersion.textContent = status.system.nodeVersion;
+	if (nodeVersion && status.system) {
+		nodeVersion.textContent = status.system.nodeVersion;
+		nodeVersion.title = 'The version of the Node.js runtime';
+	}
 
 	const platform = document.getElementById('platform-info');
-	if (platform && status.system) platform.textContent = `${status.system.platform} (${status.system.arch})`;
+	if (platform && status.system) {
+		platform.textContent = `${status.system.platform} (${status.system.arch})`;
+		platform.title = 'The operating system and architecture';
+	}
 
 	const systemUptime = document.getElementById('system-uptime');
 	if (systemUptime && status.uptime) systemUptime.textContent = formatDuration(status.uptime);
@@ -114,51 +348,80 @@ export function refreshSystem(status: Partial<State['status']>): void {
 	if (systemStatusText) systemStatusText.textContent = status.status?.toUpperCase() ?? '-';
 
 	const totalRequests = document.getElementById('total-requests');
-	if (totalRequests && status.metrics) totalRequests.textContent = status.metrics.requestCount.toLocaleString();
+	if (totalRequests && status.metrics) {
+		totalRequests.textContent = status.metrics.requestCount.toLocaleString();
+		totalRequests.title = 'Cumulative number of requests handled by the server';
+	}
 
 	const totalErrors = document.getElementById('total-errors');
-	if (totalErrors && status.metrics) totalErrors.textContent = status.metrics.errorCount.toLocaleString();
+	if (totalErrors && status.metrics) {
+		totalErrors.textContent = status.metrics.errorCount.toLocaleString();
+		totalErrors.title = 'Cumulative number of failed requests';
+	}
 
 	const activePools = document.getElementById('active-pools');
-	if (activePools && status.pools) activePools.textContent = status.pools.length.toString();
+	if (activePools && status.pools) {
+		activePools.textContent = status.pools.length.toString();
+		activePools.title = 'Number of database connection pools currently active';
+	}
 
-	// Memory usage
-	if (status.system?.memory) {
-		const memHeapUsed = document.getElementById('memory-heap-used');
-		if (memHeapUsed) memHeapUsed.textContent = formatBytes(status.system.memory.heapUsed);
+	// Memory and CPU usage with Server-provided Min/Max
+	if (status.system) {
+		const system = status.system;
+		const metrics = {
+			heapUsed: system.memory.heapUsed,
+			heapTotal: system.memory.heapTotal,
+			rss: system.memory.rss,
+			external: system.memory.external,
+			cpuUser: system.cpu.user,
+			cpuSystem: system.cpu.system,
+		};
 
-		const memHeapTotal = document.getElementById('memory-heap-total');
-		if (memHeapTotal) memHeapTotal.textContent = formatBytes(status.system.memory.heapTotal);
+		const updateMem = (id: string, key: keyof SystemMetrics, maxKey: keyof typeof system.memory) => {
+			const val = metrics[key];
+			const max = system.memory[maxKey];
+			const el = document.getElementById(id);
+			const maxEl = document.getElementById(`${id}-max`);
+			if (el) el.textContent = formatBytes(val);
+			if (maxEl && typeof max === 'number') maxEl.textContent = formatBytes(max);
+		};
 
-		const memRss = document.getElementById('memory-rss');
-		if (memRss) memRss.textContent = formatBytes(status.system.memory.rss);
+		const updateCpu = (id: string, key: keyof SystemMetrics, maxKey?: 'userMax' | 'systemMax') => {
+			const val = metrics[key];
+			const el = document.getElementById(id);
+			if (el) el.textContent = formatCpuTime(val);
 
-		const memExternal = document.getElementById('memory-external');
-		if (memExternal) memExternal.textContent = formatBytes(status.system.memory.external);
-	}
+			if (maxKey) {
+				const max = system.cpu[maxKey];
+				const maxEl = document.getElementById(`${id}-max`);
+				if (maxEl && typeof max === 'number') maxEl.textContent = formatCpuTime(max);
+			}
+		};
 
-	// CPU usage
-	if (status.system?.cpu) {
-		const cpuUser = document.getElementById('cpu-user');
-		if (cpuUser) cpuUser.textContent = formatCpuTime(status.system.cpu.user);
+		updateMem('memory-heap-used', 'heapUsed', 'heapUsedMax');
+		updateMem('memory-heap-total', 'heapTotal', 'heapTotalMax');
+		updateMem('memory-rss', 'rss', 'rssMax');
+		updateMem('memory-external', 'external', 'externalMax');
+		updateCpu('cpu-user', 'cpuUser', 'userMax');
+		updateCpu('cpu-system', 'cpuSystem', 'systemMax');
 
-		const cpuSystem = document.getElementById('cpu-system');
-		if (cpuSystem) cpuSystem.textContent = formatCpuTime(status.system.cpu.system);
-	}
+		const cpuPercentEl = document.getElementById('cpu-percent');
+		if (cpuPercentEl && system.cpu.max !== undefined) {
+			const totalPercent = system.cpu.max;
+			cpuPercentEl.textContent = `${totalPercent.toFixed(1)}%`;
+			cpuPercentEl.title = `Max System CPU usage`;
+		}
+
+		const memoryPercentEl = document.getElementById('memory-percent');
+		if (memoryPercentEl && system.memory.totalMemory) {
+			const pct = (system.memory.rss / system.memory.totalMemory) * 100;
+			memoryPercentEl.textContent = `${pct.toFixed(1)}%`;
+			memoryPercentEl.title = `System Memory Used relative to Total (${formatBytes(system.memory.totalMemory)})`;
+		}
 
-	const systemRefreshStatus = document.getElementById('system-refresh-status');
-	const autoRefreshToggle = document.getElementById('auto-refresh-toggle') as HTMLInputElement | null;
-	const refreshInterval = document.getElementById('refresh-interval') as HTMLSelectElement | null;
-	if (systemRefreshStatus && autoRefreshToggle && refreshInterval) {
-		if (autoRefreshToggle.checked) {
-			const intervalSec = parseInt(refreshInterval.value) / 1000;
-			systemRefreshStatus.textContent = `Active (${intervalSec}s)`;
-			systemRefreshStatus.classList.add('text-success');
-			systemRefreshStatus.classList.remove('text-accent');
-		} else {
-			systemRefreshStatus.textContent = 'Paused';
-			systemRefreshStatus.classList.remove('text-success');
-			systemRefreshStatus.classList.add('text-accent');
+		const cpuCoresInfo = document.getElementById('cpu-cores-info');
+		if (cpuCoresInfo && system.cpuCores) {
+			cpuCoresInfo.textContent = `${system.cpuCores} Cores`;
 		}
 	}
 }

package/src/admin/js/util/format.ts

@@ -1,9 +1,11 @@
 /**
  * Format a duration in seconds to a human-readable string.
- * @param {number} seconds - Duration in seconds.
- * @returns {string} Formatted duration string (e.g., "2d 3h 45m 30s").
+ * @param seconds - Duration in seconds.
+ * @returns Formatted duration string (e.g., "2d 3h 45m 30s").
  */
 export function formatDuration(seconds: number): string {
+	if (seconds < 1) return formatMs(seconds * 1000);
+
 	const d = Math.floor(seconds / (3600 * 24));
 	const h = Math.floor((seconds % (3600 * 24)) / 3600);
 	const m = Math.floor((seconds % 3600) / 60);
@@ -12,10 +14,27 @@ export function formatDuration(seconds: number): string {
 	if (d > 0) parts.push(`${d}d`);
 	if (h > 0) parts.push(`${h}h`);
 	if (m > 0) parts.push(`${m}m`);
-	parts.push(`${s}s`);
+	if (s > 0 || parts.length === 0) parts.push(`${s}s`);
 	return parts.join(' ');
 }
 
+/**
+ * Format milliseconds to a human-readable string.
+ * @param ms - Duration in milliseconds.
+ * @returns Formatted string (e.g., "1.23 ms" or "450 μs").
+ */
+export function formatMs(ms: number): string {
+	if (ms === 0) return '0 ms';
+	if (ms < 1) {
+		const us = ms * 1000;
+		return `${us.toFixed(0)} μs`;
+	}
+	if (ms < 1000) {
+		return `${ms.toFixed(2)} ms`;
+	}
+	return formatDuration(ms / 1000);
+}
+
 /**
  * Format an ISO date string to a localized date time string.
  * @param isoDate - ISO date string.

package/src/admin/js/util/metrics.ts

@@ -0,0 +1,24 @@
+import type {SystemMetrics} from '../types.js';
+
+/**
+ * Update the minimum and maximum metrics based on the current metrics.
+ *
+ * @param current - The current system metrics.
+ * @param min - The object storing minimum values.
+ * @param max - The object storing maximum values.
+ */
+export function updateMinMaxMetrics(current: SystemMetrics, min: Partial<SystemMetrics>, max: Partial<SystemMetrics>): void {
+	const keys = Object.keys(current) as (keyof SystemMetrics)[];
+	keys.forEach((key) => {
+		const val = current[key];
+		const currentMin = min[key];
+		const currentMax = max[key];
+
+		if (currentMin === undefined || val < currentMin) {
+			min[key] = val;
+		}
+		if (currentMax === undefined || val > currentMax) {
+			max[key] = val;
+		}
+	});
+}