mongoku 2.0.2 → 2.0.3

package/src/lib/components/SearchBox.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
+	import type { SearchParams } from "$lib/types";
+
+	interface Props {
+		params: SearchParams;
+	}
+
+	let { params = $bindable() }: Props = $props();
+
+	// Show optional fields - start with all hidden
+	let showOptionalFields = $state(
+		params.sort !== "{}" || params.project !== "{}" || params.skip !== 0 || params.limit !== 20,
+	);
+
+	let counter = $state(Math.random());
+
+	let queryInput: HTMLInputElement | undefined;
+
+	$effect(() => {
+		if (queryInput) {
+			queryInput.setSelectionRange(1, 1 /* queryInput.value.length - 1 */);
+			queryInput.focus();
+		}
+	});
+
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		counter++;
+		const formData = new FormData(form);
+		await goto(
+			resolve(
+				(page.url.pathname +
+					"?" +
+					[...formData.entries()]
+						.map((e) => encodeURIComponent(e[0]) + "=" + encodeURIComponent(e[1] as string))
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						.join("&")) as any,
+			),
+			{
+				keepFocus: true,
+			},
+		);
+	}
+
+	let form: HTMLFormElement | undefined;
+</script>
+
+<form class="flex items-stretch w-full" method="GET" action="?" onsubmit={submit} bind:this={form}>
+	<!-- Parameters group -->
+	<div class="flex-grow">
+		<!-- Query input (always shown) -->
+		<div class="flex items-stretch w-full h-10">
+			<div
+				class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] {!showOptionalFields
+					? 'border-b rounded-bl-md'
+					: 'border-b-0'} bg-[var(--color-1)] rounded-tl-md"
+			>
+				Query:
+			</div>
+			<input
+				type="text"
+				bind:this={queryInput}
+				bind:value={params.query}
+				placeholder={"{}"}
+				name="query"
+				class="flex-grow border-0 bg-[var(--color-3)] pl-2.5 font-mono"
+			/>
+		</div>
+
+		<input type="hidden" value={counter} name="v" />
+		<!-- Sort input -->
+		{#if showOptionalFields}
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					Sort:
+				</div>
+				<input
+					type="text"
+					bind:value={params.sort}
+					name="sort"
+					placeholder={"{}"}
+					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+				/>
+			</div>
+
+			<!-- Skip input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					Skip:
+				</div>
+				<input
+					type="number"
+					bind:value={params.skip}
+					name="skip"
+					min="0"
+					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+				/>
+			</div>
+
+			<!-- Limit input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b-0 bg-[var(--color-1)]"
+				>
+					Limit:
+				</div>
+				<input
+					type="number"
+					bind:value={params.limit}
+					name="limit"
+					min="1"
+					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+				/>
+			</div>
+
+			<!-- Project input -->
+			<div class="flex items-stretch w-full h-10">
+				<div
+					class="min-w-[100px] flex justify-center items-center border border-[var(--color-4)] border-b bg-[var(--color-1)] rounded-bl-md"
+				>
+					Project:
+				</div>
+				<input
+					type="text"
+					bind:value={params.project}
+					name="project"
+					placeholder={"{}"}
+					class="flex-grow border-0 border-t border-[var(--color-4)] bg-[var(--color-3)] pl-2.5 font-mono"
+				/>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Toggle optional fields button -->
+	<button
+		class="btn btn-default !w-12 !rounded-none !border-r-0 text-2xl leading-none font-bold !py-1.5"
+		type="button"
+		onclick={() => {
+			showOptionalFields = !showOptionalFields;
+		}}
+	>
+		{showOptionalFields ? "−" : "+"}
+	</button>
+
+	<!-- Search button -->
+	<button class="btn btn-success !rounded-l-none !rounded-r-md font-bold !py-1.5" type="submit"> GO! </button>
+</form>
+
+<style lang="postcss">
+	input {
+		border-radius: 0;
+	}
+</style>

package/src/lib/components/TooltipTable.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+
+	interface TableColumn {
+		header: string;
+		key: string;
+		align?: "left" | "right" | "center";
+	}
+
+	interface TableRow {
+		[key: string]: unknown;
+	}
+
+	let {
+		columns,
+		rows,
+		children,
+		hideHeader,
+	}: {
+		columns: TableColumn[];
+		rows: TableRow[];
+		children: Snippet;
+		hideHeader?: boolean;
+	} = $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;
+	}
+
+	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>

package/src/lib/server/HostsManager.ts

@@ -0,0 +1,105 @@
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+
+export interface Host {
+	path: string;
+	_id: string;
+}
+
+const DEFAULT_HOSTS = process.env.MONGOKU_DEFAULT_HOST
+	? process.env.MONGOKU_DEFAULT_HOST.split(";")
+	: ["localhost:27017"];
+const DATABASE_FILE = process.env.MONGOKU_DATABASE_FILE || path.join(os.homedir(), ".mongoku.db");
+
+export class HostsManager {
+	private _hosts: Map<string, string> = new Map(); // path -> _id
+
+	async load() {
+		let first = false;
+		try {
+			await fs.promises.stat(DATABASE_FILE);
+		} catch {
+			first = true;
+		}
+
+		if (!first) {
+			await this._loadFromFile();
+		}
+
+		if (first || this._hosts.size === 0) {
+			// Initialize with default hosts
+			for (const hostname of DEFAULT_HOSTS) {
+				this._hosts.set(hostname, this._generateId());
+			}
+			await this._saveToFile();
+		}
+	}
+
+	private async _loadFromFile(): Promise<void> {
+		const content = await fs.promises.readFile(DATABASE_FILE, "utf8");
+		const lines = content
+			.trim()
+			.split("\n")
+			.filter((line) => line.trim());
+
+		const newHosts = new Map<string, string>();
+		for (const line of lines) {
+			const host = JSON.parse(line);
+			if (host && typeof host.path === "string") {
+				// Use existing _id if available, generate new one if not
+				const id = host._id || this._generateId();
+				newHosts.set(host.path, id);
+			}
+		}
+		this._hosts = newHosts;
+	}
+
+	private async _saveToFile(): Promise<void> {
+		const lines = Array.from(this._hosts).map(([hostPath, id]) => JSON.stringify({ path: hostPath, _id: id }));
+		await fs.promises.writeFile(DATABASE_FILE, lines.join("\n") + "\n", "utf8");
+	}
+
+	private _generateId(): string {
+		// Generate a NeDB-compatible ID (16 characters, alphanumeric)
+		const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+		let result = "";
+		for (let i = 0; i < 16; i++) {
+			result += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		return result;
+	}
+
+	async getHosts(): Promise<Host[]> {
+		return Array.from(this._hosts).map(([hostPath, id]) => ({ path: hostPath, _id: id }));
+	}
+
+	async add(hostPath: string): Promise<string> {
+		// Use existing ID if host already exists, generate new one if not
+		let id = this._hosts.get(hostPath);
+		if (!id) {
+			id = this._generateId();
+			this._hosts.set(hostPath, id);
+		}
+		await this._saveToFile();
+		return id;
+	}
+
+	async remove(hostPath: string): Promise<void> {
+		// Remove exact matches and regex pattern matches
+		const toRemove = Array.from(this._hosts.keys()).filter((existingPath) => {
+			try {
+				const regex = new RegExp(hostPath);
+				return existingPath === hostPath || regex.test(existingPath);
+			} catch {
+				// If hostPath is not a valid regex, just do exact match
+				return existingPath === hostPath;
+			}
+		});
+
+		for (const host of toRemove) {
+			this._hosts.delete(host);
+		}
+		await this._saveToFile();
+	}
+}

package/src/lib/server/JsonEncoder.ts

@@ -0,0 +1,62 @@
+import { ObjectId } from "mongodb";
+
+export default class JsonEncoder {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	static encode(obj: any): any {
+		if (obj instanceof ObjectId) {
+			return {
+				$type: "ObjectId",
+				$value: obj.toHexString(),
+				$date: obj.getTimestamp().getTime(),
+			};
+		}
+		if (obj instanceof Date) {
+			return {
+				$type: "Date",
+				$value: obj.toISOString(),
+			};
+		}
+		if (obj instanceof RegExp) {
+			return {
+				$type: "RegExp",
+				$value: {
+					$pattern: obj.source,
+					$flags: obj.flags,
+				},
+			};
+		}
+		if (Array.isArray(obj)) {
+			return [...obj.map(JsonEncoder.encode)];
+		}
+		if (obj && typeof obj === "object") {
+			for (const [key, value] of Object.entries(obj)) {
+				obj[key] = JsonEncoder.encode(value);
+			}
+		}
+
+		return obj;
+	}
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	static decode(obj: any): any {
+		if (obj && obj.$type === "ObjectId") {
+			return ObjectId.createFromHexString(obj.$value);
+		}
+		if (obj && obj.$type === "Date") {
+			return new Date(obj.$value);
+		}
+		if (obj && obj.$type === "RegExp") {
+			return new RegExp(obj.$value.$pattern, obj.$value.$flags);
+		}
+		if (Array.isArray(obj)) {
+			return [...obj.map(JsonEncoder.decode)];
+		}
+		if (obj && typeof obj === "object") {
+			for (const [key, value] of Object.entries(obj)) {
+				obj[key] = JsonEncoder.decode(value);
+			}
+		}
+
+		return obj;
+	}
+}

package/src/lib/server/mongo.ts

@@ -0,0 +1,199 @@
+import type { CollectionJSON } from "$lib/types";
+import { MongoClient, type Collection } from "mongodb";
+import { URL } from "url";
+import { HostsManager } from "./HostsManager";
+
+export async function getCollectionJson(
+	collection: Collection,
+	type?: "view" | "timeseries" | "collection" | string,
+): Promise<CollectionJSON> {
+	const stats = {
+		size: 0,
+		count: 0,
+		avgObjSize: 0,
+		storageSize: 0,
+		capped: false,
+		nindexes: 0,
+		totalIndexSize: 0,
+		indexSizes: {},
+	};
+
+	if (type !== "view") {
+		const agg = (await collection
+			.aggregate([
+				{
+					$collStats: {
+						storageStats: {},
+						count: {},
+					},
+				},
+			])
+			.next()
+			.catch(() => null)) as {
+			storageStats: {
+				size: number;
+				count: number;
+				storageSize: number;
+				capped: boolean;
+				nindexes: number;
+				totalIndexSize: number;
+				indexSizes: Record<string, number>;
+			};
+		} | null;
+
+		if (agg) {
+			stats.size = agg.storageStats.size;
+			stats.count = agg.storageStats.count;
+			stats.avgObjSize = Math.round(agg.storageStats.size / agg.storageStats.count);
+			stats.storageSize = agg.storageStats.storageSize;
+			stats.capped = agg.storageStats.capped;
+			stats.nindexes = agg.storageStats.nindexes;
+			stats.totalIndexSize = agg.storageStats.totalIndexSize;
+			stats.indexSizes = agg.storageStats.indexSizes;
+		}
+	}
+
+	// Get index definitions
+	let indexes: Array<{ name: string; key?: Record<string, number>; size: number }> = [];
+	if (type !== "view") {
+		try {
+			const indexList = await collection.listIndexes().toArray();
+			indexes = indexList.map((index: { name: string; key: Record<string, number> }) => ({
+				name: index.name,
+				key: index.key,
+				size: (stats.indexSizes as Record<string, number>)[index.name] || 0,
+			}));
+		} catch {
+			// If we can't get index details, fall back to indexSizes
+			indexes = Object.entries(stats.indexSizes).map(([name, size]) => ({
+				name,
+				size: size as number,
+			}));
+		}
+	}
+
+	return {
+		name: collection.collectionName,
+		size: (stats.storageSize ?? 0) + (stats.totalIndexSize ?? 0),
+		dataSize: stats.size,
+		count: stats.count,
+		avgObjSize: stats.avgObjSize ?? 0,
+		storageSize: stats.storageSize ?? 0,
+		capped: stats.capped,
+		nIndexes: stats.nindexes,
+		totalIndexSize: stats.totalIndexSize ?? 0,
+		indexSizes: stats.indexSizes,
+		indexes,
+	};
+}
+
+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 clientIds: Map<string, string> = new Map(); // hostname -> _id
+	private hostsManager: HostsManager;
+	private countTimeout = parseInt(process.env.MONGOKU_COUNT_TIMEOUT!, 10) || 5000;
+
+	constructor() {
+		this.hostsManager = new HostsManager();
+	}
+
+	async initialize() {
+		await this.hostsManager.load();
+		const hosts = await this.hostsManager.getHosts();
+
+		// Create MongoClient instances without connecting (lazy connection)
+		for (const host of hosts) {
+			const urlStr = host.path.startsWith("mongodb") ? host.path : `mongodb://${host.path}`;
+			try {
+				const url = new URL(urlStr);
+				const hostname = url.host || host.path;
+
+				if (!this.clients.has(hostname)) {
+					const client = new MongoClient(urlStr);
+					this.clients.set(hostname, client);
+					this.clientIds.set(hostname, host._id);
+				}
+			} catch (err) {
+				console.error(`Failed to parse URL for host ${host.path}:`, err);
+			}
+		}
+	}
+
+	getClient(name: string): MongoClient {
+		const client = this.clients.get(name) || this.clients.get(`${name}:27017`);
+		if (!client) {
+			throw new Error("Server does not exist");
+		}
+		return client;
+	}
+
+	listClients(): Array<{ name: string; _id: string; client: MongoClient }> {
+		return Array.from(this.clients.entries())
+			.filter(([, client]) => client instanceof MongoClient)
+			.map(([name, client]) => ({
+				name,
+				_id: this.clientIds.get(name) || "",
+				client: client as MongoClient,
+			}));
+	}
+
+	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;
+	}
+
+	async addServer(hostPath: string) {
+		const id = await this.hostsManager.add(hostPath);
+
+		// Add the new server client
+		const urlStr = hostPath.startsWith("mongodb") ? hostPath : `mongodb://${hostPath}`;
+		try {
+			const url = new URL(urlStr);
+			const hostname = url.host || hostPath;
+
+			if (!this.clients.has(hostname)) {
+				const client = new MongoClient(urlStr);
+				this.clients.set(hostname, client);
+				this.clientIds.set(hostname, id);
+			}
+		} catch (err) {
+			console.error(`Failed to parse URL for host ${hostPath}:`, err);
+			throw err;
+		}
+	}
+
+	async removeServer(name: string) {
+		await this.hostsManager.remove(name);
+		this.clients.delete(name);
+		this.clientIds.delete(name);
+	}
+}
+
+// Singleton instance
+let mongoConnections: MongoConnections | null = null;
+let initPromise: Promise<MongoConnections> | null = null;
+
+export async function getMongo(): Promise<MongoConnections> {
+	if (!mongoConnections) {
+		if (!initPromise) {
+			initPromise = (async () => {
+				mongoConnections = new MongoConnections();
+				await mongoConnections.initialize();
+				return mongoConnections;
+			})();
+		}
+		return initPromise;
+	}
+	return mongoConnections;
+}
+
+export { mongoConnections };

package/src/lib/stores/notifications.svelte.ts

@@ -0,0 +1,45 @@
+import z from "zod";
+
+interface Notification {
+	id: number;
+	message: string;
+	type: "success" | "error" | "info";
+}
+
+let notifications = $state<Notification[]>([]);
+let nextId = 1;
+
+export const notificationStore = {
+	get items() {
+		return notifications;
+	},
+
+	notify(message: string, type: "success" | "error" | "info" = "info") {
+		const id = nextId++;
+		notifications = [...notifications, { id, message, type }];
+
+		setTimeout(() => {
+			this.remove(id);
+		}, 5000);
+	},
+
+	async notifyError(message: string | unknown, fallbackMessage?: string) {
+		const finalMessage =
+			typeof message === "string"
+				? message
+				: (z.object({ message: z.string() }).safeParse(message).data?.message ??
+					z.object({ body: z.object({ message: z.string() }), status: z.number() }).safeParse(message).data?.body
+						?.message ??
+					fallbackMessage ??
+					"An unexpected error occurred");
+		this.notify(finalMessage, "error");
+	},
+
+	notifySuccess(message: string) {
+		this.notify(message, "success");
+	},
+
+	remove(id: number) {
+		notifications = notifications.filter((n) => n.id !== id);
+	},
+};