mongoku 2.0.2 → 2.0.3

package/src/lib/types.ts

@@ -0,0 +1,56 @@
+export interface MongoDocument {
+	_id?: {
+		$type: string;
+		$value: string;
+	};
+	[key: string]: unknown;
+}
+
+export interface SearchParams {
+	query: string;
+	sort: string;
+	project: string;
+	limit: number;
+	skip: number;
+}
+
+/**
+ * Database stats as returned by the db.stats() method
+ *
+ * Type not exposed by MongoDB
+ */
+export interface DatabaseStats {
+	db: string;
+	collections: number;
+	views: number;
+	objects: number;
+	avgObjSize: number;
+	dataSize: number;
+	storageSize: number;
+	indexes: number;
+	indexSize: number;
+	totalSize: number;
+	fsUsedSize: number;
+	fsTotalSize: number;
+	ok: number;
+}
+
+export interface CollectionJSON {
+	name: string;
+	size: number;
+	dataSize: number;
+	count: number;
+	avgObjSize: number;
+	storageSize: number;
+	capped: boolean;
+	nIndexes: number;
+	totalIndexSize: number;
+	indexSizes: {
+		[name: string]: number;
+	};
+	indexes: Array<{
+		name: string;
+		key?: Record<string, number>;
+		size: number;
+	}>;
+}

package/src/lib/utils/filters.ts

@@ -0,0 +1,25 @@
+export function formatBytes(bytes: number): string {
+	if (bytes === 0) return "0 B";
+	if (bytes < 1000) return bytes + " B";
+	if (bytes < 1000000) return (bytes / 1000).toFixed(2) + " kB";
+	if (bytes < 1000000000) return (bytes / 1000000).toFixed(2) + " MB";
+	if (bytes < 1000000000000) return (bytes / 1000000000).toFixed(2) + " GB";
+	return (bytes / 1000000000000).toFixed(2) + " TB";
+}
+
+export function formatNumber(num: number): string {
+	return num.toLocaleString();
+}
+
+export function serverName(name: string): string {
+	// Extract hostname from MongoDB connection string
+	if (name.startsWith("mongodb://") || name.startsWith("mongodb+srv://")) {
+		try {
+			const url = new URL(name);
+			return url.hostname;
+		} catch {
+			return name;
+		}
+	}
+	return name;
+}

package/src/lib/utils/jsonParser.ts

@@ -0,0 +1,125 @@
+import { parseScript } from "esprima";
+import type { Expression, Node } from "estree";
+
+function buildObject(node: Node | Expression): unknown {
+	switch (node.type) {
+		case "ObjectExpression": {
+			const obj: Record<string, unknown> = {};
+			for (const prop of node.properties) {
+				let name;
+				if (prop.type === "SpreadElement") {
+					throw new Error(`Expected "Property" but received: ${prop.type}`);
+				}
+				if (prop.key.type === "Identifier") {
+					name = prop.key.name;
+				} else if (prop.key.type === "Literal") {
+					if (
+						prop.key.value instanceof RegExp ||
+						typeof prop.key.value === "bigint" ||
+						prop.key.value === false ||
+						prop.key.value === null ||
+						prop.key.value === true ||
+						prop.key.value === undefined
+					) {
+						throw new Error(`Expected "Identifier" for object key but received: ${prop.key.type}`);
+					}
+					name = prop.key.value;
+				} else {
+					throw new Error(`Expected "Identifier" but received: ${prop.key.type}`);
+				}
+
+				obj[name] = buildObject(prop.value);
+			}
+			return obj;
+		}
+
+		case "ArrayExpression": {
+			const obj: unknown[] = [];
+			for (const prop of node.elements) {
+				if (prop === null) {
+					throw new Error(`Expected "Expression" but received: ${prop}`);
+				}
+				obj.push(buildObject(prop));
+			}
+			return obj;
+		}
+
+		case "Literal": {
+			if (node.value instanceof RegExp) {
+				return {
+					$type: "RegExp",
+					$value: {
+						$pattern: node.value.source,
+						$flags: node.value.flags,
+					},
+				};
+			}
+
+			return node.value;
+		}
+
+		case "UnaryExpression": {
+			if (node.operator === "-" && node.argument.type === "Literal" && typeof node.argument.value === "number") {
+				return -node.argument.value;
+			}
+			// const arg = buildObject(node.argument);
+			// const exp = node.prefix ? `${node.operator}${arg}` : `${arg}${node.operator}`;
+
+			// return eval(exp);
+			throw new Error(`${node.type} are not authorized`);
+		}
+
+		case "NewExpression":
+		case "CallExpression": {
+			const authorizedCalls = ["ObjectId", "Date", "RegExp"];
+			const callee = node.callee.type === "Identifier" ? node.callee.name : null;
+			if (callee && authorizedCalls.includes(callee)) {
+				if (callee === "RegExp") {
+					const [pattern, flags] = node.arguments.map((arg) => buildObject(arg));
+					return {
+						$type: "RegExp",
+						$value: {
+							$pattern: pattern,
+							$flags: flags,
+						},
+					};
+				}
+
+				return {
+					$type: callee,
+					$value: buildObject(node.arguments[0]),
+				};
+			} else {
+				throw new Error(`Unknown ${node.type}: ${callee}`);
+			}
+		}
+
+		case "Identifier": {
+			if (node.name === "undefined") {
+				return undefined;
+			}
+			throw `Unknown identifier: ${node.name}`;
+		}
+
+		default:
+			throw new Error(`Sorry but ${node.type} are not authorized`);
+	}
+}
+
+export function parseJSON(text: string): unknown {
+	const tree = parseScript(`var __JSON__ = ${text};`, {
+		tolerant: true,
+	});
+
+	const varDeclaration = tree.body[0];
+	if (varDeclaration.type !== "VariableDeclaration") {
+		throw new Error("Expected VariableDeclaration but received: " + varDeclaration.type);
+	}
+
+	const objExpression = varDeclaration.declarations[0].init;
+	if (objExpression?.type !== "ObjectExpression") {
+		throw new Error("Expected ObjectExpression but received: " + objExpression?.type);
+	}
+
+	return buildObject(objExpression);
+}

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

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

package/src/routes/+layout.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
+	import Notifications from "$lib/components/Notifications.svelte";
+	import "../app.css";
+
+	let { children } = $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 />
+	</nav>
+
+	<div class="px-6 py-6 flex flex-col gap-6">
+		<Notifications />
+		{@render children()}
+	</div>
+</div>
+
+<style lang="postcss">
+	.navbar {
+		background-color: var(--color-2);
+		border-bottom: var(--border);
+	}
+</style>

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

@@ -0,0 +1,6 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+	redirect(307, "/servers");
+};

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

@@ -0,0 +1,53 @@
+import { getMongo } from "$lib/server/mongo";
+import type { DatabaseStats } from "$lib/types";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+	const mongo = await getMongo();
+
+	const servers = mongo.listClients().map(({ name, _id, client }) => ({
+		name,
+		_id,
+		details: (async () => {
+			try {
+				const adminDb = client.db("test").admin();
+				const results = await adminDb.listDatabases();
+				const collectionsCount = await Promise.all(
+					results.databases.map(async (d) => {
+						const db = client.db(d.name);
+						const dbStats = (await db.stats()) as DatabaseStats;
+						return dbStats.collections;
+					}),
+				);
+
+				return {
+					databases: results.databases.map((d, index) => ({
+						name: d.name,
+						size: d.sizeOnDisk ?? 0,
+						collections: collectionsCount[index],
+					})),
+					size: results.totalSize ?? 0,
+				};
+			} catch (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),
+					},
+				};
+			}
+		})().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),
+			},
+		})),
+	}));
+
+	servers.sort((a, b) => a.name.localeCompare(b.name));
+	return {
+		servers,
+	};
+};

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

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { addServer as addServerCommand, removeServer as removeServerCommand } 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 type { PageData } from "./$types";
+
+	let { data }: { data: PageData } = $props();
+
+	type Server = PageData["servers"][number];
+
+	let adding = $state(false);
+	let newServer = $state("");
+	let loading = $state(false);
+	let showRemoveModal = $state(false);
+	let serverToRemove: Server | null = null;
+
+	async function addServer() {
+		if (!newServer) return;
+
+		loading = true;
+		try {
+			await addServerCommand({ url: newServer });
+			newServer = "";
+			adding = false;
+			notificationStore.notifySuccess("Server added successfully");
+			// Reload the page to get updated servers
+			await invalidateAll();
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to add server");
+		} finally {
+			loading = false;
+		}
+	}
+
+	function openRemoveModal(server: Server) {
+		serverToRemove = server;
+		showRemoveModal = true;
+	}
+
+	function closeRemoveModal() {
+		showRemoveModal = false;
+		serverToRemove = null;
+	}
+
+	async function confirmRemove() {
+		if (!serverToRemove) return;
+
+		try {
+			await removeServerCommand(serverToRemove.name);
+			notificationStore.notifySuccess("Server removed successfully");
+			closeRemoveModal();
+			// Reload the page to get updated servers
+			await invalidateAll();
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to remove server");
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			closeRemoveModal();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeyDown} />
+
+<Panel title="Servers">
+	{#snippet actions()}
+		<button class="btn btn-default btn-sm" onclick={() => (adding = !adding)}>
+			{adding ? "Cancel" : "Add Server"}
+		</button>
+		{#if adding}
+			<input
+				type="text"
+				placeholder="mongodb://user:password@hostname:port?directConnection=true"
+				bind:value={newServer}
+				disabled={loading}
+				class="form-input"
+			/>
+			<button class="btn btn-outline-success btn-sm" onclick={addServer} disabled={!newServer.length || loading}>
+				Add
+			</button>
+		{/if}
+	{/snippet}
+
+	<table class="table">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Databases</th>
+				<th>Size</th>
+				<th></th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if data.servers && data.servers.length > 0}
+				{#each data.servers as server (server._id)}
+					<tr class="group">
+						<td>
+							{#await server.details}
+								<span>
+									{serverName(server.name)}
+								</span>
+							{:then details}
+								{#if "error" in details && details.error}
+									<span class="error">
+										<span class="badge badge-danger" title={details.error.message}>Error</span>
+										{serverName(server.name)}
+									</span>
+								{:else}
+									<a href={resolve(`/servers/${encodeURIComponent(serverName(server.name))}/databases`)}>
+										{serverName(server.name)}
+									</a>
+								{/if}
+							{/await}
+						</td>
+						<td>
+							{#await server.details}
+								<span class="text-gray-400">...</span>
+							{:then details}
+								{#if "databases" in details && details.databases}
+									<TooltipTable
+										columns={[
+											{ header: "Database", key: "name" },
+											{ header: "Collections", key: "collections" },
+											{ header: "Size", key: "size" },
+										]}
+										rows={details.databases.map((db) => ({
+											name: db.name,
+											collections: db.collections,
+											size: formatBytes(db.size),
+										}))}
+									>
+										{details.databases.length}
+									</TooltipTable>
+								{/if}
+							{/await}
+						</td>
+						<td>
+							{#await server.details}
+								<span class="text-gray-400">...</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>
+					</tr>
+				{/each}
+			{:else}
+				<tr>
+					<td colspan="4">
+						<div class="text-center">No servers...</div>
+					</td>
+				</tr>
+			{/if}
+		</tbody>
+	</table>
+</Panel>
+
+{#if showRemoveModal}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-overlay" onclick={closeRemoveModal}>
+		<div class="modal" onclick={(e) => e.stopPropagation()}>
+			<div class="modal-body">
+				<p>
+					Are you sure you want to remove this server? This will only remove it from this list. You can add it back.
+				</p>
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-default btn-sm" onclick={closeRemoveModal}>No</button>
+				<button class="btn btn-outline-danger btn-sm" onclick={confirmRemove}>Yes</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style lang="postcss">
+	input[type="text"] {
+		min-width: 400px;
+	}
+</style>

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

@@ -0,0 +1,47 @@
+import { getCollectionJson, getMongo } from "$lib/server/mongo";
+import type { CollectionJSON, DatabaseStats } from "$lib/types";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params }) => {
+	const mongo = await getMongo();
+	const client = mongo.getClient(params.server);
+	const adminDb = client.db("test").admin();
+	const results = await adminDb.listDatabases();
+
+	if (!Array.isArray(results.databases)) {
+		return {
+			server: params.server,
+			databases: [],
+		};
+	}
+
+	const databases = await Promise.all(
+		results.databases.map(async (d) => {
+			const db = client.db(d.name);
+			const dbStats = (await db.stats()) as DatabaseStats;
+
+			const collectionsJson = db
+				.listCollections()
+				.toArray()
+				.then((c) => c.sort((a, b) => a.name.localeCompare(b.name)))
+				.then((c) => Promise.all(c.map((c) => getCollectionJson(db.collection(c.name), c.type))));
+
+			return {
+				name: db.databaseName,
+				size: d.sizeOnDisk ?? 0,
+				dataSize: dbStats.dataSize,
+				avgObjSize: dbStats.avgObjSize,
+				storageSize: dbStats.storageSize,
+				totalIndexSize: dbStats.indexSize,
+				empty: d.empty ?? true,
+				nCollections: dbStats.collections,
+				collections: collectionsJson.catch(() => [] as CollectionJSON[]),
+			};
+		}),
+	);
+
+	return {
+		server: params.server,
+		databases,
+	};
+};

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Panel from "$lib/components/Panel.svelte";
+	import TooltipTable from "$lib/components/TooltipTable.svelte";
+	import { formatBytes } from "$lib/utils/filters";
+	import type { PageData } from "./$types";
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<Panel title="Databases on {data.server}">
+	<table class="table">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Collections</th>
+				<th>Size</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#if data.databases && data.databases.length > 0}
+				{#each data.databases as database (database.name)}
+					<tr>
+						<td>
+							<a
+								href={resolve(
+									`/servers/${encodeURIComponent(data.server)}/databases/${encodeURIComponent(
+										database.name,
+									)}/collections`,
+								)}
+							>
+								{database.name}
+							</a>
+						</td>
+						<td>
+							{#await database.collections}
+								{database.nCollections}
+							{:then collections}
+								<TooltipTable
+									columns={[
+										{ header: "Collection", key: "name", align: "left" },
+										{ header: "Size", key: "size", align: "right" },
+									]}
+									rows={collections.map((collection) => ({
+										name: collection.name,
+										size: formatBytes(collection.size),
+									}))}
+								>
+									{database.nCollections}
+								</TooltipTable>
+							{/await}
+						</td>
+						<td>
+							{#if database.size !== undefined}
+								<TooltipTable
+									hideHeader
+									columns={[
+										{ header: "Metric", key: "metric", align: "left" },
+										{ header: "Value", key: "value", align: "right" },
+									]}
+									rows={[
+										{ metric: "Total Size", value: database.size },
+										{ metric: "Data Size", value: database.dataSize },
+										{ metric: "Storage Size", value: database.storageSize },
+										{ metric: "Index Size", value: database.totalIndexSize },
+										{ metric: "Avg Object Size", value: database.avgObjSize },
+										{ metric: "Empty", value: database.empty ? "Yes" : "No" },
+									].map((row) => ({
+										...row,
+										value: typeof row.value === "number" ? formatBytes(row.value) : row.value,
+									}))}
+								>
+									{formatBytes(database.size)}
+								</TooltipTable>
+							{/if}
+						</td>
+					</tr>
+				{/each}
+			{:else}
+				<tr>
+					<td colspan="3">
+						<div class="text-center">No databases...</div>
+					</td>
+				</tr>
+			{/if}
+		</tbody>
+	</table>
+</Panel>

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

@@ -0,0 +1,21 @@
+import { getCollectionJson, getMongo } from "$lib/server/mongo";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ params }) => {
+	const mongo = await getMongo();
+	const client = mongo.getClient(params.server);
+	const db = client.db(params.database);
+	const collections = (await db.listCollections().toArray()).sort((a, b) => a.name.localeCompare(b.name));
+
+	const collectionsWithDetails = collections.map((c) => ({
+		name: c.name,
+		type: c.type,
+		details: getCollectionJson(db.collection(c.name), c.type).catch(() => null),
+	}));
+
+	return {
+		server: params.server,
+		database: params.database,
+		collections: collectionsWithDetails,
+	};
+};