mongoku 2.0.4 → 2.1.0

package/src/lib/components/TooltipTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { tick, type Snippet } from "svelte";
+	import type { Snippet } from "svelte";
+	import Tooltip from "./Tooltip.svelte";
 
 	interface TableColumn {
 		header: string;
@@ -24,17 +25,6 @@
 	} = $props();
 
 	let showTooltip = $state(false);
-	let tooltipElement = $state<HTMLDivElement>();
-	let containerElement = $state<HTMLDivElement>();
-
-	let tooltipPosition = $state({
-		left: "",
-		right: "",
-		top: "",
-		bottom: "",
-		marginTop: "",
-		marginBottom: "",
-	});
 
 	function handleMouseEnter() {
 		showTooltip = true;
@@ -43,95 +33,48 @@
 	function handleMouseLeave() {
 		showTooltip = false;
 	}
-
-	$effect(() => {
-		if (showTooltip && tooltipElement && containerElement) {
-			tick().then(() => {
-				if (!containerElement || !tooltipElement) return;
-
-				const tooltipRect = tooltipElement.getBoundingClientRect();
-				const viewportWidth = window.innerWidth;
-				const viewportHeight = window.innerHeight;
-
-				// Reset positioning
-				tooltipPosition = {
-					left: "",
-					right: "",
-					top: "",
-					bottom: "",
-					marginTop: "",
-					marginBottom: "",
-				};
-
-				// Position horizontally
-				if (tooltipRect.right > viewportWidth) {
-					tooltipPosition.right = "0";
-				} else {
-					tooltipPosition.left = "0";
-				}
-
-				// Position vertically
-				if (tooltipRect.bottom > viewportHeight) {
-					tooltipPosition.bottom = "100%";
-					tooltipPosition.marginBottom = "5px";
-				} else {
-					tooltipPosition.top = "100%";
-					tooltipPosition.marginTop = "5px";
-				}
-			});
-		}
-	});
 </script>
 
-<div class="relative inline-block" bind:this={containerElement}>
-	<button class="dotted text-center" onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
-		{@render children?.()}
-	</button>
-	{#if showTooltip}
-		<div
-			class="absolute bg-[var(--color-2)] border border-[var(--color-3)] rounded p-0 z-[1000] whitespace-nowrap shadow-lg"
-			bind:this={tooltipElement}
-			style:left={tooltipPosition.left}
-			style:right={tooltipPosition.right}
-			style:top={tooltipPosition.top}
-			style:bottom={tooltipPosition.bottom}
-			style:margin-top={tooltipPosition.marginTop}
-			style:margin-bottom={tooltipPosition.marginBottom}
-		>
-			<table class="w-full border-collapse text-base font-medium">
-				{#if !hideHeader}
-					<thead>
-						<tr>
-							{#each columns as column, index (index)}
-								<th
-									class="px-2 py-1 border-b border-[var(--color-3)] bg-[var(--color-4)] font-bold"
-									class:text-left={column.align === "left" || !column.align}
-									class:text-right={column.align === "right"}
-									class:text-center={column.align === "center"}
-								>
-									{column.header}
-								</th>
-							{/each}
-						</tr>
-					</thead>
-				{/if}
-				<tbody>
-					{#each rows as row, index (index)}
-						<tr>
-							{#each columns as column, index (index)}
-								<td
-									class="px-2 py-1 border-b border-[var(--color-3)]"
-									class:text-left={column.align === "left" || !column.align}
-									class:text-right={column.align === "right"}
-									class:text-center={column.align === "center"}
-								>
-									{row[column.key]}
-								</td>
-							{/each}
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
-</div>
+<Tooltip show={showTooltip} tooltipClass="p-0 whitespace-nowrap">
+	{#snippet trigger()}
+		<button class="dotted text-center" onmouseenter={handleMouseEnter} onmouseleave={handleMouseLeave}>
+			{@render children?.()}
+		</button>
+	{/snippet}
+	{#snippet content()}
+		<table class="w-full border-collapse text-base font-medium">
+			{#if !hideHeader}
+				<thead>
+					<tr>
+						{#each columns as column, index (index)}
+							<th
+								class="px-2 py-1 border-b border-[var(--color-3)] bg-[var(--color-4)] font-bold"
+								class:text-left={column.align === "left" || !column.align}
+								class:text-right={column.align === "right"}
+								class:text-center={column.align === "center"}
+							>
+								{column.header}
+							</th>
+						{/each}
+					</tr>
+				</thead>
+			{/if}
+			<tbody>
+				{#each rows as row, index (index)}
+					<tr>
+						{#each columns as column, index (index)}
+							<td
+								class="px-2 py-1 border-b border-[var(--color-3)]"
+								class:text-left={column.align === "left" || !column.align}
+								class:text-right={column.align === "right"}
+								class:text-center={column.align === "center"}
+							>
+								{row[column.key]}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/snippet}
+</Tooltip>

package/src/lib/server/HostsManager.ts

@@ -74,6 +74,10 @@ export class HostsManager {
 		return Array.from(this._hosts).map(([hostPath, id]) => ({ path: hostPath, _id: id }));
 	}
 
+	getHost(name: string): string | undefined {
+		return this._hosts.get(name);
+	}
+
 	async add(hostPath: string): Promise<string> {
 		// Use existing ID if host already exists, generate new one if not
 		let id = this._hosts.get(hostPath);

package/src/lib/server/aggregation.ts

@@ -0,0 +1,62 @@
+export const ALLOWED_AGGREGATION_STAGES = new Set([
+	"$addFields",
+	"$bucket",
+	"$bucketAuto",
+	"$collStats",
+	"$count",
+	"$densify",
+	"$documents",
+	"$facet",
+	"$fill",
+	"$geoNear",
+	"$graphLookup",
+	"$group",
+	"$indexStats",
+	"$limit",
+	"$listClusterCatalog",
+	"$listSampledQueries",
+	"$listSearchIndexes",
+	"$listSessions",
+	"$lookup",
+	"$match",
+	"$project",
+	"$querySettings",
+	"$queryStats",
+	"$rankFusion",
+	"$redact",
+	"$replaceRoot",
+	"$replaceWith",
+	"$sample",
+	"$search",
+	"$searchMeta",
+	"$set",
+	"$setWindowFields",
+	"$skip",
+	"$sort",
+	"$sortByCount",
+	"$unionWith",
+	"$unset",
+	"$unwind",
+	"$vectorSearch",
+]);
+
+export function validateAggregationPipeline(pipeline: unknown[]): void {
+	for (let i = 0; i < pipeline.length; i++) {
+		const stage = pipeline[i];
+		if (!stage || typeof stage !== "object") {
+			throw new Error(`Invalid stage at index ${i}: must be an object`);
+		}
+
+		const stageKeys = Object.keys(stage);
+		if (stageKeys.length !== 1) {
+			throw new Error(`Invalid stage at index ${i}: must have exactly one key, found ${stageKeys.length}`);
+		}
+
+		const stageOperator = stageKeys[0];
+		if (!ALLOWED_AGGREGATION_STAGES.has(stageOperator)) {
+			throw new Error(
+				`Disallowed stage operator at index ${i}: "${stageOperator}". Only allowed stages are permitted, to avoid future write stages like '$merge' or '$out'.`,
+			);
+		}
+	}
+}

package/src/lib/server/mongo.ts

@@ -1,4 +1,4 @@
-import type { CollectionJSON } from "$lib/types";
+import type { CollectionJSON, CollectionMappings, Mappings } from "$lib/types";
 import { MongoClient, type Collection } from "mongodb";
 import { URL } from "url";
 import { HostsManager } from "./HostsManager";
@@ -87,18 +87,48 @@ export async function getCollectionJson(
 	};
 }
 
+class MongoClientWithMappings extends MongoClient {
+	mappings: Record<string, Record<string, Mappings>> = {};
+
+	async getMappings(dbName: string, collectionName: string, opts?: { forceRefresh?: boolean }): Promise<Mappings> {
+		if (opts?.forceRefresh || !this.mappings[dbName]?.[collectionName]) {
+			const mappings = await this.db(dbName)
+				.collection<CollectionMappings>("mongoku.mappings")
+				.findOne({ _id: collectionName });
+			this.mappings[dbName] ??= {};
+			this.mappings[dbName][collectionName] = mappings?.mappings ?? {};
+		}
+		return this.mappings[dbName][collectionName];
+	}
+	clearMappingsCache(dbName: string, collectionName: string) {
+		delete this.mappings[dbName][collectionName];
+	}
+}
+
 class MongoConnections {
 	/**
 	 * Todo: better system where we can have mutiple servers with same hostname, and labels for each server that
 	 * would be displayed in the UI instead of the hostname.
 	 */
-	private clients: Map<string, MongoClient> = new Map();
+	private clients: Map<string, MongoClientWithMappings> = new Map();
 	private clientIds: Map<string, string> = new Map(); // hostname -> _id
 	private hostsManager: HostsManager;
-	private countTimeout = parseInt(process.env.MONGOKU_COUNT_TIMEOUT!, 10) || 5000;
+	private countTimeout = parseInt(process.env.MONGOKU_COUNT_TIMEOUT!, 10) || 30_000;
+	private queryTimeout = process.env.MONGOKU_QUERY_TIMEOUT
+		? parseInt(process.env.MONGOKU_QUERY_TIMEOUT, 10)
+		: undefined;
+	private excludedDatabases: Set<string>;
 
 	constructor() {
 		this.hostsManager = new HostsManager();
+		// Parse MONGOKU_EXCLUDE_DATABASES env var (comma-separated list)
+		const excludeEnv = process.env.MONGOKU_EXCLUDE_DATABASES || "";
+		this.excludedDatabases = new Set(
+			excludeEnv
+				.split(",")
+				.map((db) => db.trim())
+				.filter((db) => db.length > 0),
+		);
 	}
 
 	async initialize() {
@@ -113,7 +143,7 @@ class MongoConnections {
 				const hostname = url.host || host.path;
 
 				if (!this.clients.has(hostname)) {
-					const client = new MongoClient(urlStr);
+					const client = new MongoClientWithMappings(urlStr);
 					this.clients.set(hostname, client);
 					this.clientIds.set(hostname, host._id);
 				}
@@ -123,10 +153,10 @@ class MongoConnections {
 		}
 	}
 
-	getClient(name: string): MongoClient {
+	getClient(name: string): MongoClientWithMappings {
 		const client = this.clients.get(name) || this.clients.get(`${name}:27017`);
 		if (!client) {
-			throw new Error("Server does not exist");
+			throw new Error(`Client not found: ${name}`);
 		}
 		return client;
 	}
@@ -141,16 +171,21 @@ class MongoConnections {
 			}));
 	}
 
-	getCollection(serverName: string, databaseName: string, collectionName: string) {
-		const client = this.getClient(serverName);
-		const db = client.db(databaseName);
-		return db.collection(collectionName);
-	}
-
 	getCountTimeout() {
 		return this.countTimeout;
 	}
 
+	getQueryTimeout() {
+		return this.queryTimeout;
+	}
+
+	filterDatabases<T extends { name: string }>(databases: T[]): T[] {
+		if (this.excludedDatabases.size === 0) {
+			return databases;
+		}
+		return databases.filter((db) => !this.excludedDatabases.has(db.name));
+	}
+
 	async addServer(hostPath: string) {
 		const id = await this.hostsManager.add(hostPath);
 
@@ -161,7 +196,7 @@ class MongoConnections {
 			const hostname = url.host || hostPath;
 
 			if (!this.clients.has(hostname)) {
-				const client = new MongoClient(urlStr);
+				const client = new MongoClientWithMappings(urlStr);
 				this.clients.set(hostname, client);
 				this.clientIds.set(hostname, id);
 			}
@@ -173,9 +208,36 @@ class MongoConnections {
 
 	async removeServer(name: string) {
 		await this.hostsManager.remove(name);
+
+		this.clients
+			.get(name)
+			?.close()
+			.catch((err) => console.error(`Error closing client ${name}:`, err));
 		this.clients.delete(name);
 		this.clientIds.delete(name);
 	}
+
+	async reconnectClient(name: string) {
+		// Try to find the connection string with the same logic as getClient
+		const connectionString = this.hostsManager.getHost(name);
+
+		if (!connectionString) {
+			throw new Error(`Connection string not found for client: ${name}`);
+		}
+
+		// Close the old client
+		const oldClient = this.clients.get(name);
+		if (oldClient) {
+			oldClient.close()?.catch((err) => console.error(`Error closing old client ${name}:`, err));
+		}
+
+		// Create a new client
+		const newClient = new MongoClientWithMappings(connectionString);
+		this.clients.set(name, newClient);
+
+		// Test the connection
+		await newClient.connect();
+	}
 }
 
 // Singleton instance

package/src/lib/types.ts

@@ -54,3 +54,63 @@ export interface CollectionJSON {
 		size: number;
 	}>;
 }
+
+export const ALLOWED_AGGREGATION_STAGES = new Set([
+	"$addFields",
+	"$bucket",
+	"$bucketAuto",
+	"$collStats",
+	"$count",
+	"$densify",
+	"$documents",
+	"$facet",
+	"$fill",
+	"$geoNear",
+	"$graphLookup",
+	"$group",
+	"$indexStats",
+	"$limit",
+	"$listClusterCatalog",
+	"$listSampledQueries",
+	"$listSearchIndexes",
+	"$listSessions",
+	"$lookup",
+	"$match",
+	"$project",
+	"$querySettings",
+	"$queryStats",
+	"$rankFusion",
+	"$redact",
+	"$replaceRoot",
+	"$replaceWith",
+	"$sample",
+	"$search",
+	"$searchMeta",
+	"$set",
+	"$setWindowFields",
+	"$skip",
+	"$sort",
+	"$sortByCount",
+	"$unionWith",
+	"$unset",
+	"$unwind",
+	"$vectorSearch",
+]);
+
+/**
+ * A single mapping target - defines which collection and field to lookup
+ */
+export interface MappingTarget {
+	collection: string;
+	on: string;
+}
+
+export type Mappings = Record<string, MappingTarget[] | MappingTarget>;
+
+/**
+ * Collection mappings document structure as stored in mongoku.mappings
+ */
+export interface CollectionMappings {
+	_id: string; // collection name
+	mappings: Mappings;
+}

package/src/lib/utils/isEmptyObject.ts

@@ -0,0 +1,6 @@
+export function isEmptyObject(obj: object): boolean {
+	for (const key in obj) {
+		return false;
+	}
+	return true;
+}

package/src/lib/utils/jsonParser.ts

@@ -98,6 +98,9 @@ function buildObject(node: Node | Expression): unknown {
 			if (node.name === "undefined") {
 				return undefined;
 			}
+			if (node.name === "Infinity") {
+				return Infinity;
+			}
 			throw `Unknown identifier: ${node.name}`;
 		}
 
@@ -106,7 +109,7 @@ function buildObject(node: Node | Expression): unknown {
 	}
 }
 
-export function parseJSON(text: string): unknown {
+export function parseJSON(text: string, opts?: { allowArray?: boolean }): unknown {
 	const tree = parseScript(`var __JSON__ = ${text};`, {
 		tolerant: true,
 	});
@@ -117,6 +120,11 @@ export function parseJSON(text: string): unknown {
 	}
 
 	const objExpression = varDeclaration.declarations[0].init;
+
+	if (opts?.allowArray && objExpression?.type === "ArrayExpression") {
+		return buildObject(objExpression);
+	}
+
 	if (objExpression?.type !== "ObjectExpression") {
 		throw new Error("Expected ObjectExpression but received: " + objExpression?.type);
 	}

package/src/lib/utils/omit.ts

@@ -0,0 +1,3 @@
+export function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {
+	return Object.fromEntries(Object.entries(obj).filter(([key]) => !keys.includes(key as K))) as Omit<T, K>;
+}

package/src/routes/+layout.server.ts

@@ -1,7 +1,8 @@
 import type { LayoutServerLoad } from "./$types";
 
-export const load: LayoutServerLoad = async () => {
+export const load: LayoutServerLoad = async (event) => {
 	return {
 		readOnly: process.env.MONGOKU_READ_ONLY_MODE === "true",
+		serverOrigin: event.url.origin,
 	};
 };

package/src/routes/+layout.svelte

@@ -2,17 +2,26 @@
 	import { resolve } from "$app/paths";
 	import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
 	import Notifications from "$lib/components/Notifications.svelte";
+	import OriginWarning from "$lib/components/OriginWarning.svelte";
+	import PageSwitcher from "$lib/components/PageSwitcher.svelte";
+	import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
 	import "../app.css";
 
-	let { children } = $props();
+	let { children, data } = $props();
 </script>
 
 <div style="min-height: 100vh">
 	<nav class="navbar px-6 py-4 flex items-center">
 		<a href={resolve("/")} class="text-2xl font-medium">Mongoku</a>
 		<Breadcrumbs />
+		<div class="ml-auto flex items-center gap-2">
+			<PageSwitcher class="" />
+			<ThemeSwitcher />
+		</div>
 	</nav>
 
+	<OriginWarning serverOrigin={data.serverOrigin} readOnly={data.readOnly} />
+
 	<div class="px-6 py-6 flex flex-col gap-6">
 		<Notifications />
 		{@render children()}
@@ -21,7 +30,7 @@
 
 <style lang="postcss">
 	.navbar {
-		background-color: var(--color-2);
+		background-color: var(--light-background);
 		border-bottom: var(--border);
 	}
 </style>

package/src/routes/favicon.ico/+server.ts

@@ -0,0 +1,8 @@
+import type { RequestHandler } from "./$types";
+
+// No official icon yet, avoid sveltekite errors
+export const GET: RequestHandler = async () => {
+	return new Response(null, {
+		status: 404,
+	});
+};

package/src/routes/servers/+page.server.ts

@@ -12,16 +12,24 @@ export const load: PageServerLoad = async () => {
 			try {
 				const adminDb = client.db("test").admin();
 				const results = await adminDb.listDatabases();
+				const filteredDatabases = mongo.filterDatabases(results.databases);
 				const collectionsCount = await Promise.all(
-					results.databases.map(async (d) => {
+					filteredDatabases.map(async (d) => {
 						const db = client.db(d.name);
-						const dbStats = (await db.stats()) as DatabaseStats;
+						const dbStats: Pick<DatabaseStats, "collections"> = await (db.stats() as Promise<DatabaseStats>).catch(
+							() => {
+								console.error(`Error getting stats for database ${d.name} on server ${name}`);
+								return {
+									collections: 0,
+								};
+							},
+						);
 						return dbStats.collections;
 					}),
 				);
 
 				return {
-					databases: results.databases.map((d, index) => ({
+					databases: filteredDatabases.map((d, index) => ({
 						name: d.name,
 						size: d.sizeOnDisk ?? 0,
 						collections: collectionsCount[index],
@@ -29,6 +37,7 @@ export const load: PageServerLoad = async () => {
 					size: results.totalSize ?? 0,
 				};
 			} catch (err) {
+				console.error(`Error getting details for server ${name}:`, err);
 				return {
 					error: {
 						code: err instanceof Error && "code" in err ? err.code : undefined,
@@ -37,13 +46,16 @@ export const load: PageServerLoad = async () => {
 					},
 				};
 			}
-		})().catch((err) => ({
-			error: {
-				code: err instanceof Error && "code" in err ? err.code : undefined,
-				name: err instanceof Error ? err.name : "Error",
-				message: err instanceof Error ? err.message : String(err),
-			},
-		})),
+		})().catch((err) => {
+			console.error(`Error getting details for server ${name}:`, err);
+			return {
+				error: {
+					code: err instanceof Error && "code" in err ? err.code : undefined,
+					name: err instanceof Error ? err.name : "Error",
+					message: err instanceof Error ? err.message : String(err),
+				},
+			};
+		}),
 	}));
 
 	servers.sort((a, b) => a.name.localeCompare(b.name));