mongoku 2.0.3 → 2.1.0

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

@@ -0,0 +1,337 @@
+<script lang="ts">
+	import {
+		deleteDocument as deleteDocumentCommand,
+		loadDocuments,
+		updateDocument as updateDocumentCommand,
+		updateMany as updateManyCommand,
+	} from "$api/servers.remote";
+	import { pushState } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import { jsonTextarea } from "$lib/actions/jsonTextarea";
+	import Panel from "$lib/components/Panel.svelte";
+	import PrettyJson from "$lib/components/PrettyJson.svelte";
+	import SearchBox from "$lib/components/SearchBox.svelte";
+	import { notificationStore } from "$lib/stores/notifications.svelte";
+	import type { MongoDocument, SearchParams } from "$lib/types";
+	import { formatNumber } from "$lib/utils/filters";
+	import { SvelteURLSearchParams } from "svelte/reactivity";
+	import type { PageData } from "./$types";
+
+	let { data }: { data: PageData } = $props();
+
+	/* eslint-disable-next-line svelte/prefer-writable-derived */
+	let params = $state<SearchParams>({ ...data.params });
+	let dataPromise = $derived(data.results);
+	let editMode = $state(false);
+	let updateQuery = $state("{}");
+	let isUpdating = $state(false);
+
+	let finalCount = $state<number | null>(null);
+	let countCount = 0;
+
+	$effect(() => {
+		params = { ...data.params };
+	});
+
+	$effect(() => {
+		const currentCount = ++countCount;
+		finalCount = null;
+		data.count.then((result) => {
+			if (currentCount !== countCount) {
+				return;
+			}
+			finalCount = result.error ? null : result.data;
+		});
+	});
+
+	// Handle errors from streamed promises
+	$effect(() => {
+		// @ts-expect-error I just want to trigger the dependency
+		if (dataPromise) {
+			modifiedItems = null;
+		}
+		dataPromise.then((result) => {
+			if (result.error) {
+				notificationStore.notifyError(result.error);
+			}
+		});
+	});
+
+	$effect(() => {
+		data.count.then((result) => {
+			// Don't show notification for timeout errors - they're displayed in the UI
+			if (result.error && !result.error.includes("operation exceeded time limit")) {
+				notificationStore.notifyError(result.error);
+			}
+		});
+	});
+
+	let modifiedItems = $state<MongoDocument[] | null>(null);
+	let items = $derived(modifiedItems ? { data: modifiedItems, error: null } : dataPromise);
+
+	async function editDocument(_id: { $value?: string } | undefined, json: MongoDocument, items: MongoDocument[]) {
+		const partial = Boolean(
+			params.project && params.project !== "{}" && Object.keys(JSON.parse(params.project)).length > 0,
+		);
+		const newId = json?._id?.$value;
+		const oldId = _id?.$value;
+
+		if (newId !== oldId) {
+			notificationStore.notifyError("ObjectId changed. This is not supported, update canceled.");
+			return;
+		}
+
+		if (!oldId) return;
+
+		try {
+			const result = await updateDocumentCommand({
+				server: data.server,
+				database: data.database,
+				collection: data.collection,
+				document: oldId,
+				value: json,
+				partial,
+			});
+
+			if (result.ok) {
+				notificationStore.notifySuccess("Document updated successfully");
+				// Update the document in the list
+				const index = items.findIndex((item) => item._id?.$value === oldId);
+				if (index !== -1) {
+					items[index] = result.update;
+				}
+				modifiedItems = items;
+			}
+		} catch (error) {
+			console.log(error);
+			notificationStore.notifyError(error, "Failed to update document");
+		}
+	}
+
+	async function removeDocument(_id: { $value?: string } | undefined, items: MongoDocument[]) {
+		const documentId = _id?.$value;
+		if (!documentId) return;
+
+		try {
+			await deleteDocumentCommand({
+				server: data.server,
+				database: data.database,
+				collection: data.collection,
+				document: documentId,
+			});
+
+			notificationStore.notifySuccess("Document removed successfully");
+			modifiedItems = items.filter((item) => item._id?.$value !== documentId);
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to remove document");
+		}
+	}
+
+	function buildUrl(skip: number) {
+		const queryParams = new SvelteURLSearchParams();
+		queryParams.set("query", params.query || "{}");
+		queryParams.set("sort", params.sort || "");
+		queryParams.set("project", params.project || "");
+		queryParams.set("skip", String(skip));
+		queryParams.set("limit", String(params.limit));
+
+		return `/servers/${encodeURIComponent(data.server)}/databases/${encodeURIComponent(data.database)}/collections/${encodeURIComponent(data.collection)}/documents?${queryParams.toString()}`;
+	}
+
+	const nextUrl = $derived(buildUrl(params.skip + params.limit));
+	const previousUrl = $derived(buildUrl(Math.max(0, params.skip - params.limit)));
+
+	function navigateNext(e: MouseEvent) {
+		e.preventDefault();
+		data.params.skip += data.params.limit;
+		params.skip = data.params.skip;
+		/* eslint-disable-next-line svelte/no-navigation-without-resolve */
+		pushState(nextUrl, {});
+		dataPromise = loadDocuments({
+			server: data.server,
+			database: data.database,
+			collection: data.collection,
+			query: params.query,
+			sort: params.sort,
+			project: params.project,
+			skip: params.skip,
+			limit: params.limit,
+		});
+	}
+
+	function navigatePrevious(e: MouseEvent) {
+		e.preventDefault();
+		data.params.skip = Math.max(0, data.params.skip - data.params.limit);
+		params.skip = data.params.skip;
+		/* eslint-disable-next-line svelte/no-navigation-without-resolve */
+		pushState(previousUrl, {});
+		dataPromise = loadDocuments({
+			server: data.server,
+			database: data.database,
+			collection: data.collection,
+			query: params.query,
+			sort: params.sort,
+			project: params.project,
+			skip: params.skip,
+			limit: params.limit,
+		});
+	}
+
+	async function executeUpdateMany() {
+		isUpdating = true;
+		try {
+			const result = await updateManyCommand({
+				server: data.server,
+				database: data.database,
+				collection: data.collection,
+				filter: params.query || "{}",
+				update: updateQuery,
+			});
+
+			if (result.ok) {
+				notificationStore.notifySuccess(`Updated ${result.modifiedCount} document(s) (matched ${result.matchedCount})`);
+				// Reset the modified items to force a refresh
+				modifiedItems = null;
+				editMode = false;
+			}
+		} catch (error) {
+			console.error(error);
+			notificationStore.notifyError(error, "Failed to update documents");
+		} finally {
+			isUpdating = false;
+		}
+	}
+</script>
+
+<SearchBox bind:params bind:editMode readonly={data.readOnly} />
+
+{#if editMode}
+	<Panel title="Update Multiple Documents">
+		<div class="p-4 space-y-4">
+			<div>
+				<label for="update-filter" class="block text-sm font-medium mb-2">Filter (which documents to update):</label>
+				<input
+					type="text"
+					id="update-filter"
+					value={params.query || "{}"}
+					readonly
+					class="w-full p-2 border border-[var(--color-4)] bg-[var(--light-background)] rounded font-mono text-sm opacity-75 cursor-not-allowed"
+				/>
+				<p class="text-xs text-[var(--text-secondary,#888)] mt-1">
+					This filter is taken from the query above. Modify the query to change which documents will be updated.
+				</p>
+			</div>
+			<div>
+				<label for="update-operation" class="block text-sm font-medium mb-2"
+					>Update Operation (e.g., $set, $inc, $unset):</label
+				>
+				<textarea
+					bind:value={updateQuery}
+					placeholder="Update operation"
+					rows="4"
+					use:jsonTextarea={{ onsubmit: executeUpdateMany }}
+					class="w-full p-2 border border-[var(--color-4)] bg-[var(--color-3)] rounded font-mono text-sm"
+				></textarea>
+			</div>
+			<div class="flex gap-2">
+				<button class="btn btn-success" disabled={isUpdating} onclick={executeUpdateMany}>
+					{isUpdating ? "Updating..." : "Execute Update"}
+				</button>
+				<button class="btn btn-default" onclick={() => (editMode = false)}>Cancel</button>
+			</div>
+			<div class="text-sm text-[var(--text-secondary,#888)]">
+				<p class="mb-1"><strong>Examples:</strong></p>
+				<p class="mb-1">
+					• Set a field: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$set": {"status": "active"}}'}</code>
+				</p>
+				<p class="mb-1">
+					• Increment a value: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$inc": {"count": 1}}'}</code>
+				</p>
+				<p>• Unset a field: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$unset": {"oldField": ""}}'}</code></p>
+			</div>
+		</div>
+	</Panel>
+{/if}
+
+{#await items}
+	<Panel
+		title={finalCount !== null
+			? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + data.params.limit)} of ${formatNumber(finalCount)} documents...`
+			: "Loading documents..."}
+	>
+		{#snippet actions()}
+			{#if finalCount !== null}
+				{#if data.params.skip > 0}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
+						Previous
+					</a>
+				{/if}
+				{#if data.params.skip + data.params.limit < finalCount}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+				{/if}
+			{/if}
+		{/snippet}
+	</Panel>
+{:then resultsData}
+	{@const items = resultsData.data}
+	{#await data.count}
+		<Panel
+			title={items.length > 0
+				? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} Documents (counting...)`
+				: "No documents"}
+		>
+			{#snippet actions()}
+				{#if data.params.skip > 0}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
+						Previous
+					</a>
+				{/if}
+				{#if items.length >= data.params.limit}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+				{/if}
+			{/snippet}
+		</Panel>
+	{:then countData}
+		{@const count = countData.data}
+		{@const hasNext = countData.error ? items.length >= data.params.limit : data.params.skip + items.length < count}
+		{@const hasPrevious = data.params.skip > 0}
+		{@const isTimeout = countData.error?.includes("operation exceeded time limit")}
+		<Panel
+			title={items.length > 0
+				? count > 0
+					? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} of ${formatNumber(count)} Documents`
+					: `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} Documents (count ${isTimeout ? "timeout" : "unavailable"})`
+				: "No documents"}
+		>
+			{#snippet actions()}
+				{#if hasPrevious}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
+						Previous
+					</a>
+				{/if}
+				{#if hasNext}
+					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+					<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+				{/if}
+			{/snippet}
+		</Panel>
+	{/await}
+
+	{#each items as item, index (item._id?.$value || index)}
+		<PrettyJson
+			json={item}
+			autoCollapse={true}
+			onedit={data.isAggregation || data.readOnly ? undefined : (json) => editDocument(item._id, json, items)}
+			onremove={data.isAggregation || data.readOnly ? undefined : () => removeDocument(item._id, items)}
+			server={data.server}
+			database={data.database}
+			collection={data.collection}
+			mappings={data.mappings}
+		/>
+	{/each}
+{/await}

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

@@ -0,0 +1,10 @@
+export const load = async (data) => {
+	return {
+		...data.data,
+		categories: [
+			{ key: "documents", label: "Documents" },
+			{ key: "indexes", label: "Indexes" },
+			{ key: "mappings", label: "Mappings" },
+		],
+	};
+};

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

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

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

@@ -3,23 +3,26 @@ import { getMongo } from "$lib/server/mongo";
 import { ObjectId } from "mongodb";
 import type { PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ params, parent }) => {
 	const mongo = await getMongo();
-	const collection = mongo.getCollection(params.server, params.database, params.collection);
+	const client = mongo.getClient(params.server);
+	const collection = client.db(params.database).collection(params.collection);
 
 	let document = null;
-	if (collection) {
-		const obj = await collection.findOne({
-			_id: new ObjectId(params.document),
-		});
-		document = JsonEncoder.encode(obj);
-	}
+	const obj = await collection.findOne({
+		_id: /^[0-9a-fA-F]{24}$/.test(params.document)
+			? new ObjectId(params.document)
+			: (params.document as unknown as ObjectId),
+	});
+
+	document = obj ? JsonEncoder.encode(obj) : null;
+
+	const parentData = await parent();
 
 	return {
-		server: params.server,
-		database: params.database,
-		collection: params.collection,
-		documentId: params.document,
 		document,
+		documentId: params.document,
+		mappings: await client.getMappings(params.database, params.collection),
+		readOnly: parentData.readOnly,
 	};
 };

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {
 		deleteDocument as deleteDocumentCommand,
+		insertDocument as insertDocumentCommand,
 		updateDocument as updateDocumentCommand,
 	} from "$api/servers.remote";
 	import { goto } from "$app/navigation";
@@ -14,10 +15,11 @@
 
 	let loading = $state(false);
 	let item = $derived(data.document);
+	let showInsertEditor = $state(false);
 
 	async function editDocument(json: MongoDocument) {
-		const newId = json?._id?.$value;
-		const oldId = item?._id?.$value;
+		const newId = json?._id?.$value ?? json?._id;
+		const oldId = item?._id?.$value ?? item?._id;
 
 		if (newId !== oldId) {
 			notificationStore.notifyError("ObjectId changed. This is not supported, update canceled.");
@@ -49,7 +51,7 @@
 	}
 
 	async function removeDocument() {
-		const documentId = item?._id?.$value;
+		const documentId = item?._id?.$value ?? item?._id;
 		if (!documentId) return;
 
 		try {
@@ -71,6 +73,33 @@
 			notificationStore.notifyError(error, "Failed to remove document");
 		}
 	}
+
+	async function insertDocument(json: MongoDocument) {
+		loading = true;
+		try {
+			const result = await insertDocumentCommand({
+				server: data.server,
+				database: data.database,
+				collection: data.collection,
+				document: data.documentId,
+				value: json,
+			});
+
+			if (result.ok) {
+				notificationStore.notifySuccess("Document inserted successfully");
+				// Reload the page to show the newly inserted document
+				window.location.reload();
+			}
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to insert document");
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleInsertClick() {
+		showInsertEditor = true;
+	}
 </script>
 
 {#if loading}
@@ -78,13 +107,58 @@
 {:else if item}
 	<PrettyJson
 		json={item}
-		readOnly={data.readOnly}
 		onedit={editDocument}
 		onremove={removeDocument}
 		server={data.server}
 		database={data.database}
 		collection={data.collection}
+		mappings={data.mappings}
 	/>
+{:else if showInsertEditor}
+	<div class="insert-container">
+		<h3>Insert Document with ID: {data.documentId}</h3>
+		<PrettyJson
+			json={{ _id: { $type: "ObjectId", $value: data.documentId } }}
+			onedit={insertDocument}
+			server={data.server}
+			database={data.database}
+			collection={data.collection}
+			mappings={data.mappings}
+			startInEditMode={true}
+		/>
+		<button class="btn btn-default mt-4" onclick={() => (showInsertEditor = false)}>Cancel</button>
+	</div>
 {:else}
-	<div class="text-center">Document not found</div>
+	<div class="not-found-container">
+		<div class="text-center">Document not found</div>
+		{#if !data.readOnly}
+			<button class="btn btn-success" onclick={handleInsertClick}>Insert Document</button>
+		{/if}
+	</div>
 {/if}
+
+<style>
+	.not-found-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+		margin-top: 2rem;
+	}
+
+	.insert-container {
+		padding: 1rem;
+	}
+
+	.insert-container h3 {
+		margin-bottom: 1rem;
+		color: var(--text);
+	}
+
+	.loading,
+	.text-center {
+		text-align: center;
+		padding: 2rem;
+		color: var(--text);
+	}
+</style>

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

@@ -0,0 +1,87 @@
+import JsonEncoder from "$lib/server/JsonEncoder";
+import { getMongo } from "$lib/server/mongo";
+import type { IndexDescription } from "mongodb";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params, depends }) => {
+	depends("app:indexes");
+
+	const mongo = await getMongo();
+	const client = mongo.getClient(params.server);
+	const collection = client.db(params.database).collection(params.collection);
+
+	const indexesPromise = (async () => {
+		try {
+			// Get index definitions
+			const indexList = (await collection.listIndexes().toArray()) as IndexDescription[];
+
+			// Get index usage statistics
+			let indexStats: Record<string, { ops: number; since: Date }> = {};
+			try {
+				const statsResult = await collection.aggregate([{ $indexStats: {} }]).toArray();
+
+				indexStats = statsResult.reduce(
+					(acc, stat) => {
+						acc[stat.name] = {
+							ops: stat.accesses?.ops || 0,
+							since: stat.accesses?.since || new Date(),
+						};
+						return acc;
+					},
+					{} as Record<string, { ops: number; since: Date }>,
+				);
+			} catch (err) {
+				console.error("Error fetching index stats:", err);
+				// Continue without stats if unavailable
+			}
+
+			// Get index sizes from collection stats
+			let indexSizes: Record<string, number> = {};
+			try {
+				const collStatsResult = (await collection
+					.aggregate([
+						{
+							$collStats: {
+								storageStats: {},
+							},
+						},
+					])
+					.next()) as {
+					storageStats?: {
+						indexSizes?: Record<string, number>;
+					};
+				} | null;
+
+				if (collStatsResult?.storageStats?.indexSizes) {
+					indexSizes = collStatsResult.storageStats.indexSizes;
+				}
+			} catch (err) {
+				console.error("Error fetching index sizes:", err);
+				// Continue without sizes if unavailable
+			}
+
+			// Merge index definitions with stats and sizes
+			const indexesWithStats = indexList.map((index) => ({
+				...index,
+				stats: index.name ? indexStats[index.name] || null : null,
+				size: index.name ? indexSizes[index.name] || 0 : 0,
+			}));
+
+			// Encode to handle MongoDB types like ObjectId, etc.
+			return {
+				data: indexesWithStats.map((index) => JsonEncoder.encode(index)),
+				error: null as string | null,
+			};
+		} catch (err) {
+			console.error("Error fetching indexes:", err);
+			return {
+				data: [],
+				error: `Failed to fetch indexes: ${err instanceof Error ? err.message : String(err)}`,
+			};
+		}
+	})();
+
+	return {
+		indexes: indexesPromise,
+	};
+};