mongoku 2.0.4 → 2.1.1

package/src/routes/servers/+page.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
-	import { addServer as addServerCommand, removeServer as removeServerCommand } from "$api/servers.remote";
+	import {
+		addServer as addServerCommand,
+		removeServer as removeServerCommand,
+		retryConnection,
+	} from "$api/servers.remote";
 	import { invalidateAll } from "$app/navigation";
 	import { resolve } from "$app/paths";
 	import Panel from "$lib/components/Panel.svelte";
 	import TooltipTable from "$lib/components/TooltipTable.svelte";
 	import { notificationStore } from "$lib/stores/notifications.svelte";
 	import { formatBytes, serverName } from "$lib/utils/filters";
+	import { SvelteSet } from "svelte/reactivity";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
@@ -17,6 +22,7 @@
 	let loading = $state(false);
 	let showRemoveModal = $state(false);
 	let serverToRemove: Server | null = null;
+	const retryingServers = new SvelteSet<string>();
 
 	async function addServer() {
 		if (!newServer) return;
@@ -65,6 +71,21 @@
 			closeRemoveModal();
 		}
 	}
+
+	async function retryServerConnection(server: Server) {
+		const name = serverName(server.name);
+		retryingServers.add(name);
+
+		try {
+			await retryConnection(name);
+			notificationStore.notifySuccess("Connection restored successfully");
+			await invalidateAll();
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to retry connection");
+		} finally {
+			retryingServers.delete(name);
+		}
+	}
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -121,7 +142,7 @@
 						</td>
 						<td>
 							{#await server.details}
-								<span class="text-gray-400">...</span>
+								<span style="color: var(--text-secondary);">...</span>
 							{:then details}
 								{#if "databases" in details && details.databases}
 									<TooltipTable
@@ -143,20 +164,33 @@
 						</td>
 						<td>
 							{#await server.details}
-								<span class="text-gray-400">...</span>
+								<span style="color: var(--text-secondary);">...</span>
 							{:then details}
 								{#if "size" in details && details.size !== undefined}
 									{formatBytes(details.size)}
 								{/if}
 							{/await}
 						</td>
-						<td style="width: 140px">
-							<button
-								class="btn btn-outline-danger btn-sm -my-2 hidden group-hover:inline"
-								onclick={() => openRemoveModal(server)}
-							>
-								Remove from list
-							</button>
+						<td style="width: 200px">
+							<div class="flex gap-2 justify-end">
+								{#await server.details then details}
+									{#if "error" in details && details.error}
+										<button
+											class="btn btn-default btn-sm -my-2 hidden group-hover:inline"
+											onclick={() => retryServerConnection(server)}
+											disabled={retryingServers.has(serverName(server.name))}
+										>
+											{retryingServers.has(serverName(server.name)) ? "Retrying..." : "Retry"}
+										</button>
+									{/if}
+								{/await}
+								<button
+									class="btn btn-outline-danger btn-sm -my-2 hidden group-hover:inline"
+									onclick={() => openRemoveModal(server)}
+								>
+									Remove from list
+								</button>
+							</div>
 						</td>
 					</tr>
 				{/each}

package/src/routes/servers/[server]/databases/+layout.ts

@@ -0,0 +1,8 @@
+export const load = (event) => {
+	return {
+		server: event.params.server,
+		breadcrumbs: [
+			{ label: event.params.server, path: `/servers/${encodeURIComponent(event.params.server)}/databases` },
+		],
+	};
+};

package/src/routes/servers/[server]/databases/+page.server.ts

@@ -1,5 +1,6 @@
 import { getCollectionJson, getMongo } from "$lib/server/mongo";
 import type { CollectionJSON, DatabaseStats } from "$lib/types";
+import { logger } from "$lib/utils/logger";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ params }) => {
@@ -10,15 +11,26 @@ export const load: PageServerLoad = async ({ params }) => {
 
 	if (!Array.isArray(results.databases)) {
 		return {
-			server: params.server,
 			databases: [],
 		};
 	}
 
+	const filteredDatabases = mongo.filterDatabases(results.databases);
+
 	const databases = 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, "dataSize" | "avgObjSize" | "storageSize" | "indexSize" | "collections"> =
+				await (db.stats() as Promise<DatabaseStats>).catch(() => {
+					logger.error(`Error getting stats for database ${d.name} on server ${params.server}`);
+					return {
+						dataSize: 0,
+						avgObjSize: 0,
+						storageSize: 0,
+						indexSize: 0,
+						collections: 0,
+					};
+				});
 
 			const collectionsJson = db
 				.listCollections()
@@ -41,7 +53,6 @@ export const load: PageServerLoad = async ({ params }) => {
 	);
 
 	return {
-		server: params.server,
 		databases,
 	};
 };

package/src/routes/servers/[server]/databases/[database]/collections/+layout.ts

@@ -0,0 +1,9 @@
+export const load = async (event) => {
+	return {
+		database: event.params.database,
+		breadcrumbs: [
+			...(await event.parent()).breadcrumbs,
+			{ label: event.params.database, path: `/${encodeURIComponent(event.params.database)}/collections` },
+		],
+	};
+};

package/src/routes/servers/[server]/databases/[database]/collections/+page.server.ts

@@ -14,8 +14,6 @@ export const load: PageServerLoad = async ({ params }) => {
 	}));
 
 	return {
-		server: params.server,
-		database: params.database,
 		collections: collectionsWithDetails,
 	};
 };

package/src/routes/servers/[server]/databases/[database]/collections/+page.svelte

@@ -1,11 +1,48 @@
 <script lang="ts">
+	import { dropCollection as dropCollectionCommand } from "$api/servers.remote";
+	import { invalidateAll } from "$app/navigation";
 	import { resolve } from "$app/paths";
+	import Modal from "$lib/components/Modal.svelte";
 	import Panel from "$lib/components/Panel.svelte";
 	import TooltipTable from "$lib/components/TooltipTable.svelte";
+	import { notificationStore } from "$lib/stores/notifications.svelte";
 	import { formatBytes, formatNumber } from "$lib/utils/filters";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
+
+	type Collection = PageData["collections"][number];
+
+	let showDropModal = $state(false);
+	let collectionToDrop = $state<Collection | null>(null);
+
+	function openDropModal(collection: Collection) {
+		collectionToDrop = collection;
+		showDropModal = true;
+	}
+
+	function closeDropModal() {
+		showDropModal = false;
+		collectionToDrop = null;
+	}
+
+	async function confirmDrop() {
+		if (!collectionToDrop) return;
+
+		try {
+			await dropCollectionCommand({
+				server: data.server,
+				database: data.database,
+				collection: collectionToDrop.name,
+			});
+			notificationStore.notifySuccess(`Collection "${collectionToDrop.name}" dropped successfully`);
+			closeDropModal();
+			// Reload the page to get updated collections
+			await invalidateAll();
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to drop collection");
+		}
+	}
 </script>
 
 <Panel title="{data.database} collections">
@@ -16,20 +53,19 @@
 				<th>Documents</th>
 				<th>Indexes</th>
 				<th>Size</th>
+				<th></th>
 			</tr>
 		</thead>
 		<tbody>
 			{#if data.collections && data.collections.length > 0}
 				{#each data.collections as collection (collection.name)}
-					<tr>
+					<tr class="group">
 						<td>
 							<a
 								href={resolve(
 									`/servers/${encodeURIComponent(data.server)}/databases/${encodeURIComponent(
 										data.database,
-									)}/collections/${encodeURIComponent(collection.name)}?query=${encodeURIComponent(
-										"{}",
-									)}&sort=&project=&skip=0&limit=20`,
+									)}/collections/${encodeURIComponent(collection.name)}/documents`,
 								)}
 							>
 								{collection.name}
@@ -37,7 +73,7 @@
 						</td>
 						<td>
 							{#await collection.details}
-								<span class="text-gray-400">...</span>
+								<span style="color: var(--text-secondary);">...</span>
 							{:then details}
 								{#if details}
 									{formatNumber(details.count)}
@@ -48,7 +84,7 @@
 						</td>
 						<td>
 							{#await collection.details}
-								<span class="text-gray-400">...</span>
+								<span style="color: var(--text-secondary);">...</span>
 							{:then details}
 								{#if details}
 									<TooltipTable
@@ -70,7 +106,7 @@
 						</td>
 						<td>
 							{#await collection.details}
-								<span class="text-gray-400">...</span>
+								<span style="color: var(--text-secondary);">...</span>
 							{:then details}
 								{#if details}
 									<TooltipTable
@@ -96,11 +132,23 @@
 								{/if}
 							{/await}
 						</td>
+						<td style="width: 100px">
+							<div class="flex justify-end">
+								{#if !data.readOnly}
+									<button
+										class="btn btn-outline-danger btn-sm -my-2 hidden group-hover:inline"
+										onclick={() => openDropModal(collection)}
+									>
+										Drop
+									</button>
+								{/if}
+							</div>
+						</td>
 					</tr>
 				{/each}
 			{:else}
 				<tr>
-					<td colspan="4">
+					<td colspan="5">
 						<div class="text-center">No collections...</div>
 					</td>
 				</tr>
@@ -108,3 +156,14 @@
 		</tbody>
 	</table>
 </Panel>
+
+<Modal show={showDropModal} onclose={closeDropModal} title="Drop Collection">
+	<p>
+		Are you sure you want to drop the collection <strong>{collectionToDrop?.name}</strong>? This action cannot be
+		undone.
+	</p>
+	{#snippet footer()}
+		<button class="btn btn-default btn-sm" onclick={closeDropModal}>Cancel</button>
+		<button class="btn btn-outline-danger btn-sm" onclick={confirmDrop}>Drop Collection</button>
+	{/snippet}
+</Modal>

package/src/routes/servers/[server]/databases/[database]/collections/[collection]/+layout.ts

@@ -0,0 +1,9 @@
+export const load = async (event) => {
+	return {
+		collection: event.params.collection,
+		breadcrumbs: [
+			...(await event.parent()).breadcrumbs,
+			{ label: event.params.collection, path: `/${event.params.collection}/documents` },
+		],
+	};
+};

package/src/routes/servers/[server]/databases/[database]/collections/[collection]/documents/+page.server.ts

@@ -0,0 +1,217 @@
+import { validateAggregationPipeline } from "$lib/server/aggregation";
+import JsonEncoder from "$lib/server/JsonEncoder";
+import { getMongo } from "$lib/server/mongo";
+import { type MongoDocument } from "$lib/types";
+import { isEmptyObject } from "$lib/utils/isEmptyObject";
+import { parseJSON } from "$lib/utils/jsonParser";
+import { logger } from "$lib/utils/logger";
+import type { Document } from "mongodb";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, url }) => {
+	const query = url.searchParams.get("query") || "{}";
+	const sort = url.searchParams.get("sort") || "{}";
+	const project = url.searchParams.get("project") || "{}";
+	const skip = parseInt(url.searchParams.get("skip") || "0", 10);
+	const limit = parseInt(url.searchParams.get("limit") || "20", 10);
+
+	// Parse JSON strings - return error state if invalid instead of throwing
+	let queryDoc: unknown;
+	let parseError: string | null = null;
+
+	try {
+		queryDoc = parseJSON(query, { allowArray: true });
+	} catch (err) {
+		parseError = `Invalid query: ${err}`;
+	}
+
+	if (!parseError) {
+		try {
+			parseJSON(sort);
+		} catch (err) {
+			parseError = `Invalid sort: ${err}`;
+		}
+	}
+
+	if (!parseError) {
+		try {
+			parseJSON(project);
+		} catch (err) {
+			parseError = `Invalid project: ${err}`;
+		}
+	}
+
+	// If there's a parse error, return the page with error state
+	if (parseError) {
+		return {
+			results: Promise.resolve({
+				data: [],
+				error: parseError,
+			}),
+			count: Promise.resolve({
+				data: 0,
+				error: null,
+			}),
+			params: {
+				query,
+				sort,
+				project,
+				skip,
+				limit,
+			},
+			isAggregation: false,
+		};
+	}
+
+	const sortDoc = parseJSON(sort);
+	const projectDoc = parseJSON(project) as Document;
+
+	const mongo = await getMongo();
+	const client = mongo.getClient(params.server);
+	const collection = client.db(params.database).collection(params.collection);
+
+	if (Array.isArray(queryDoc)) {
+		// Validate aggregation pipeline
+		try {
+			validateAggregationPipeline(queryDoc);
+		} catch (err) {
+			const validationError = `Invalid aggregation pipeline: ${err instanceof Error ? err.message : String(err)}`;
+			return {
+				results: Promise.resolve({
+					data: [],
+					error: validationError,
+				}),
+				count: Promise.resolve({
+					data: 0,
+					error: null,
+				}),
+				params: {
+					query,
+					sort,
+					project,
+					skip,
+					limit,
+				},
+				isAggregation: true,
+			};
+		}
+		// Execute aggregation
+		const pipeline = JsonEncoder.decode(queryDoc);
+
+		const resultsPromise = collection
+			.aggregate(
+				[
+					...pipeline,
+					...(isEmptyObject(projectDoc) ? [] : [{ $project: projectDoc }]),
+					...(isEmptyObject(sortDoc as object) ? [] : [{ $sort: sortDoc }]),
+					{ $limit: limit },
+					{ $skip: skip },
+				],
+				{
+					maxTimeMS: mongo.getQueryTimeout(),
+				},
+			)
+			.map((obj) => JsonEncoder.encode(obj))
+			.toArray()
+			.then((results) => ({
+				data: results as MongoDocument[],
+				error: null as string | null,
+			}))
+			.catch((err) => {
+				logger.error("Error executing aggregation:", err);
+				return {
+					data: [] as MongoDocument[],
+					error: `Failed to execute aggregation: ${err instanceof Error ? err.message : String(err)}`,
+				};
+			});
+
+		// For aggregations, we can't easily get a count, so we return the result count
+		const countPromise = collection
+			.aggregate([...pipeline, { $count: "count" }], { maxTimeMS: mongo.getCountTimeout() })
+			.next()
+			.then((result) => ({
+				data: result?.count ?? 0,
+				error: null,
+			}))
+			.catch((err) => {
+				logger.error("Error counting documents:", err);
+				return {
+					data: 0,
+					error: `Failed to count documents: ${err instanceof Error ? err.message : String(err)}`,
+				};
+			});
+
+		return {
+			results: resultsPromise,
+			count: countPromise,
+			params: {
+				query,
+				sort,
+				project,
+				skip,
+				limit,
+			},
+			isAggregation: true,
+		};
+	}
+
+	const resultsPromise = collection
+		.find(JsonEncoder.decode(queryDoc), { maxTimeMS: mongo.getQueryTimeout() })
+		.project(projectDoc)
+		.sort(JsonEncoder.decode(sortDoc))
+		.limit(limit)
+		.skip(skip)
+		.map((obj) => JsonEncoder.encode(obj))
+		.toArray()
+		.then((results) => ({
+			data: results as MongoDocument[],
+			error: null as string | null,
+		}))
+		.catch((err) => {
+			logger.error("Error fetching query results:", err);
+			return {
+				data: [] as MongoDocument[],
+				error: `Failed to fetch query results: ${err instanceof Error ? err.message : String(err)}`,
+			};
+		});
+
+	const countPromise = (async () => {
+		try {
+			if (queryDoc && Object.keys(queryDoc).length > 0) {
+				return {
+					data: await collection.countDocuments(JsonEncoder.decode(queryDoc), {
+						maxTimeMS: mongo.getCountTimeout(),
+					}),
+					error: null as string | null,
+				};
+			} else {
+				// fast count
+				return {
+					data: await collection.estimatedDocumentCount(),
+					error: null as string | null,
+				};
+			}
+		} catch (err) {
+			logger.error("Error counting documents:", err);
+			return {
+				data: 0,
+				error: `Failed to count documents: ${err instanceof Error ? err.message : String(err)}`,
+			};
+		}
+	})();
+
+	return {
+		// Stream these promises to the client
+		results: resultsPromise,
+		count: countPromise,
+		mappings: await client.getMappings(params.database, params.collection),
+		params: {
+			query,
+			sort,
+			project,
+			skip,
+			limit,
+		},
+		isAggregation: false,
+	};
+};