mongoku 2.2.4 → 2.4.0

package/src/lib/server/mongo.ts

@@ -1,5 +1,6 @@
 import { logger } from "$lib/server/logger";
 import type { CollectionJSON, CollectionMappings, Mappings } from "$lib/types";
+import { resolveSrv } from "dns/promises";
 import { MongoClient, type Collection } from "mongodb";
 import { URL } from "url";
 import { HostsManager } from "./HostsManager";
@@ -88,8 +89,52 @@ export async function getCollectionJson(
 	};
 }
 
+/**
+ * Extract node hosts from a MongoDB connection string
+ * Handles both mongodb:// and mongodb+srv:// formats
+ */
+export async function extractNodesFromConnectionString(connectionString: string): Promise<string[]> {
+	const url = new URL(connectionString);
+
+	if (url.protocol === "mongodb+srv:") {
+		// For SRV, resolve DNS records
+		const hostname = url.hostname;
+		const srvRecords = await resolveSrv(`_mongodb._tcp.${hostname}`);
+		return srvRecords
+			.sort((a, b) => a.priority - b.priority || b.weight - a.weight)
+			.map((record) => `${record.name}:${record.port}`)
+			.sort();
+	}
+	if (url.protocol === "mongodb:") {
+		// For standard mongodb://, extract hosts from the connection string
+		// Format: mongodb://[username:password@]host1[:port1][,host2[:port2],...]/[database][?options]
+		const hostsString = url.host;
+		if (!hostsString) {
+			throw new Error("No hosts found in connection string");
+		}
+
+		// Split by comma to get all hosts and sort lexically
+		return hostsString
+			.split(",")
+			.map((host) => host.trim())
+			.filter((host) => host.length > 0)
+			.sort();
+	}
+	throw new TypeError(`Unsupported protocol: ${url.protocol}`);
+}
+
 class MongoClientWithMappings extends MongoClient {
+	url: string;
 	mappings: Record<string, Record<string, Mappings>> = {};
+	_id: string;
+	name: string;
+
+	constructor(url: string, _id: string, name: string) {
+		super(url);
+		this.url = url;
+		this._id = _id;
+		this.name = name;
+	}
 
 	async getMappings(dbName: string, collectionName: string, opts?: { forceRefresh?: boolean }): Promise<Mappings> {
 		if (opts?.forceRefresh || !this.mappings[dbName]?.[collectionName]) {
@@ -111,7 +156,7 @@ 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, MongoClientWithMappings> = new Map();
+	private clients: Map<string, MongoClientWithMappings> = new Map(); // _id -> MongoClientWithMappings
 	private clientIds: Map<string, string> = new Map(); // hostname -> _id
 	private hostsManager: HostsManager;
 	private countTimeout = parseInt(process.env.MONGOKU_COUNT_TIMEOUT!, 10) || 30_000;
@@ -144,8 +189,8 @@ class MongoConnections {
 				const hostname = url.host || host.path;
 
 				if (!this.clients.has(hostname)) {
-					const client = new MongoClientWithMappings(urlStr);
-					this.clients.set(hostname, client);
+					const client = new MongoClientWithMappings(urlStr, host._id, hostname);
+					this.clients.set(host._id, client);
 					this.clientIds.set(hostname, host._id);
 				}
 			} catch (err) {
@@ -155,7 +200,11 @@ class MongoConnections {
 	}
 
 	getClient(name: string): MongoClientWithMappings {
-		const client = this.clients.get(name) || this.clients.get(`${name}:27017`);
+		const clientId = this.clientIds.get(name) || this.clientIds.get(`${name}:27017`);
+		if (!clientId) {
+			throw new Error(`Client not found: ${name}`);
+		}
+		const client = this.clients.get(clientId);
 		if (!client) {
 			throw new Error(`Client not found: ${name}`);
 		}
@@ -163,13 +212,11 @@ class MongoConnections {
 	}
 
 	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,
-			}));
+		return Array.from(this.clients.values()).map((client) => ({
+			name: client.name,
+			_id: client._id,
+			client: client as MongoClient,
+		}));
 	}
 
 	getCountTimeout() {
@@ -197,8 +244,8 @@ class MongoConnections {
 			const hostname = url.host || hostPath;
 
 			if (!this.clients.has(hostname)) {
-				const client = new MongoClientWithMappings(urlStr);
-				this.clients.set(hostname, client);
+				const client = new MongoClientWithMappings(urlStr, id, hostname);
+				this.clients.set(id, client);
 				this.clientIds.set(hostname, id);
 			}
 		} catch (err) {
@@ -218,27 +265,83 @@ class MongoConnections {
 		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}`);
-		}
-
+	async reconnectClient(id: string) {
 		// Close the old client
-		const oldClient = this.clients.get(name);
-		if (oldClient) {
-			oldClient.close()?.catch((err) => logger.error(`Error closing old client ${name}:`, err));
+		const oldClient = this.clients.get(id);
+		if (!oldClient) {
+			throw new Error(`Client not found: ${id}`);
 		}
 
+		oldClient.close().catch((err) => logger.error(`Error closing old client ${id}:`, err));
+
 		// Create a new client
-		const newClient = new MongoClientWithMappings(connectionString);
-		this.clients.set(name, newClient);
+		const newClient = new MongoClientWithMappings(oldClient.url, id, oldClient.name);
+		this.clients.set(id, newClient);
 
 		// Test the connection
 		await newClient.connect();
 	}
+
+	/**
+	 * Get the list of nodes from a server's connection string
+	 */
+	async getServerNodes(serverId: string): Promise<string[]> {
+		const client = this.getClient(serverId);
+		return extractNodesFromConnectionString(client.url);
+	}
+
+	/**
+	 * Fetch index stats from a specific node using directConnection
+	 */
+	async getIndexStatsFromNode(
+		serverId: string,
+		node: string,
+		database: string,
+		collection: string,
+	): Promise<Record<string, { ops: number; since: Date; host: string }>> {
+		const client = this.getClient(serverId);
+		const url = new URL(client.url);
+
+		// Build direct connection URL
+		// Keep credentials and other params, but set the host to the specific node
+		const directUrl = new URL(url.toString());
+		directUrl.protocol = "mongodb:";
+		directUrl.host = node;
+		directUrl.searchParams.set("directConnection", "true");
+
+		// Keep TLS if it was in the original URL
+		if (url.searchParams.has("tls") || url.searchParams.has("ssl") || url.protocol === "mongodb+srv:") {
+			directUrl.searchParams.set("tls", "true");
+		}
+
+		// Create a temporary client for this specific node
+		let nodeClient: MongoClient | null = null;
+		// todo: use await using when possible
+		try {
+			nodeClient = new MongoClient(directUrl.toString());
+			await nodeClient.connect();
+
+			const coll = nodeClient.db(database).collection(collection);
+			const statsResult = await coll.aggregate([{ $indexStats: {} }]).toArray();
+
+			const indexStats = Object.fromEntries(
+				statsResult.map((stat) => [
+					stat.name,
+					{
+						ops: stat.accesses?.ops || 0,
+						since: stat.accesses?.since || new Date(),
+						host: stat.host || node,
+					},
+				]),
+			);
+
+			return indexStats;
+		} finally {
+			if (nodeClient) {
+				await nodeClient.close();
+			}
+		}
+	}
 }
 
 // Singleton instance

package/src/lib/utils/formatSignificantDigits.ts

@@ -0,0 +1,30 @@
+/**
+ * Format a number with significant digits
+ * @param value The number to format
+ * @param digits Number of significant digits (default: 3)
+ * @returns Formatted string with appropriate suffix (k, M, B)
+ */
+export function formatSignificantDigits(value: number, digits = 3): string {
+	if (value === 0) return "0";
+
+	const absValue = Math.abs(value);
+	const sign = value < 0 ? "-" : "";
+
+	// Determine the order of magnitude
+	if (absValue >= 1_000_000_000) {
+		// Billions
+		const billions = absValue / 1_000_000_000;
+		return `${sign}${billions.toPrecision(digits)}B`;
+	} else if (absValue >= 1_000_000) {
+		// Millions
+		const millions = absValue / 1_000_000;
+		return `${sign}${millions.toPrecision(digits)}M`;
+	} else if (absValue >= 1_000) {
+		// Thousands
+		const thousands = absValue / 1_000;
+		return `${sign}${thousands.toPrecision(digits)}k`;
+	} else {
+		// Less than 1000
+		return `${sign}${absValue.toPrecision(Math.min(digits, Math.ceil(Math.log10(absValue + 1))))}`;
+	}
+}

package/src/lib/utils/formatTimeAgo.ts

@@ -0,0 +1,20 @@
+/**
+ * Format a timestamp as relative time ago (e.g., "5m 30s ago", "2h 15m ago")
+ */
+export function formatTimeAgo(timestamp: Date | null): string {
+	if (!timestamp) return "";
+
+	const now = new Date();
+	const elapsed = now.getTime() - timestamp.getTime();
+	const seconds = Math.floor(elapsed / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+
+	if (hours > 0) {
+		return `${hours}h ${minutes % 60}m ago`;
+	} else if (minutes > 0) {
+		return `${minutes}m ${seconds % 60}s ago`;
+	} else {
+		return `${seconds}s ago`;
+	}
+}

package/src/lib/utils/hostnames.ts

@@ -0,0 +1,86 @@
+/**
+ * Find the common prefix of an array of strings
+ */
+export function findCommonPrefix(strings: string[]): string {
+	if (strings.length === 0) return "";
+	if (strings.length === 1) return "";
+
+	let prefix = strings[0];
+	for (let i = 1; i < strings.length; i++) {
+		while (strings[i].indexOf(prefix) !== 0) {
+			prefix = prefix.substring(0, prefix.length - 1);
+			if (prefix === "") return "";
+		}
+	}
+	return prefix;
+}
+
+/**
+ * Find the common suffix of an array of strings
+ */
+export function findCommonSuffix(strings: string[]): string {
+	if (strings.length === 0) return "";
+	if (strings.length === 1) return "";
+
+	// Reverse all strings, find common prefix, then reverse back
+	const reversed = strings.map((s) => s.split("").reverse().join(""));
+	const reversedPrefix = findCommonPrefix(reversed);
+	return reversedPrefix.split("").reverse().join("");
+}
+
+/**
+ * Extract the unique part of a hostname by removing common prefix and suffix
+ * Returns the shortened form with "..." markers
+ */
+export function shortenHostname(hostname: string, commonPrefix: string, commonSuffix: string): string {
+	if (!commonPrefix && !commonSuffix) {
+		return hostname;
+	}
+
+	let result = hostname;
+
+	// Remove prefix
+	if (commonPrefix && result.startsWith(commonPrefix)) {
+		result = result.slice(commonPrefix.length);
+	}
+
+	// Remove suffix
+	if (commonSuffix && result.endsWith(commonSuffix)) {
+		result = result.slice(0, -commonSuffix.length);
+	}
+
+	// If nothing left, return the original
+	if (result.length === 0) {
+		return hostname;
+	}
+
+	// Add ellipsis markers
+	const hasPrefix = commonPrefix.length > 0;
+	const hasSuffix = commonSuffix.length > 0;
+
+	if (hasPrefix && hasSuffix) {
+		return `…${result}…`;
+	} else if (hasPrefix) {
+		return `…${result}`;
+	} else if (hasSuffix) {
+		return `${result}…`;
+	}
+
+	return result;
+}
+
+/**
+ * Get shortened hostnames for a list of hosts
+ * Returns an object mapping full hostname to shortened version
+ */
+export function getShortenedHostnames(hosts: string[]): Record<string, string> {
+	if (hosts.length <= 1) {
+		// No need to shorten if only one host
+		return Object.fromEntries(hosts.map((h) => [h, h]));
+	}
+
+	const commonPrefix = findCommonPrefix(hosts);
+	const commonSuffix = findCommonSuffix(hosts);
+
+	return Object.fromEntries(hosts.map((host) => [host, shortenHostname(host, commonPrefix, commonSuffix)]));
+}

package/src/lib/utils/jsonParser.ts

@@ -141,3 +141,53 @@ export function parseJSON(text: string, opts?: { allowArray?: boolean }): unknow
 
 	return buildObject(objExpression);
 }
+
+/**
+ * Serializes an object to a string format that can be parsed back with parseJSON.
+ * Handles MongoDB special types like ObjectId, Date, and RegExp.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function serializeForEditing(obj: any, depth = 0): string {
+	const indent = "\t".repeat(depth);
+	const nextIndent = "\t".repeat(depth + 1);
+
+	if (obj === null) return "null";
+	if (obj === undefined) return "undefined";
+	if (typeof obj === "string") return JSON.stringify(obj);
+	if (typeof obj === "number") return obj.toString();
+	if (typeof obj === "boolean") return obj.toString();
+
+	if (Array.isArray(obj)) {
+		if (obj.length === 0) return "[]";
+		const items = obj.map((item) => `${nextIndent}${serializeForEditing(item, depth + 1)}`).join(",\n");
+		return `[\n${items}\n${indent}]`;
+	}
+
+	if (typeof obj === "object") {
+		// Handle special MongoDB types
+		if (obj.$type === "ObjectId") {
+			return `new ObjectId("${obj.$value}")`;
+		}
+		if (obj.$type === "Date") {
+			return `new Date("${obj.$value}")`;
+		}
+		if (obj.$type === "RegExp") {
+			return `new RegExp("${obj.$value.$pattern}", "${obj.$value.$flags}")`;
+		}
+
+		// Handle regular objects
+		const keys = Object.keys(obj);
+		if (keys.length === 0) return "{}";
+
+		const pairs = keys
+			.map((key) => {
+				const value = serializeForEditing(obj[key], depth + 1);
+				return `${nextIndent}${JSON.stringify(key)}: ${value}`;
+			})
+			.join(",\n");
+
+		return `{\n${pairs}\n${indent}}`;
+	}
+
+	return JSON.stringify(obj);
+}

package/src/lib/utils/longestCommonSuffix.ts

@@ -0,0 +1,47 @@
+/**
+ * Find the longest common suffix between two strings
+ */
+export function longestCommonSuffix(str1: string, str2: string): string {
+	if (str1.length < str2.length && str2.endsWith(str1)) {
+		return str1;
+	}
+
+	if (str2.length < str1.length && str1.endsWith(str2)) {
+		return str2;
+	}
+
+	let suffix = "";
+	let i = str1.length - 1;
+	let j = str2.length - 1;
+
+	while (i >= 0 && j >= 0 && str1[i] === str2[j]) {
+		suffix = str1.slice(i);
+		i--;
+		j--;
+	}
+
+	return suffix;
+}
+
+/**
+ * Find which string in an array has the longest common suffix with a target string
+ * Returns the matching string or null if no good match is found
+ */
+export function findBestSuffixMatch(target: string, candidates: string[]): string | null {
+	if (!target || candidates.length === 0) return null;
+
+	let bestMatch: string | null = null;
+	let longestSuffixLength = 0;
+
+	for (const candidate of candidates) {
+		const commonSuffix = longestCommonSuffix(target, candidate);
+		if (commonSuffix.length > longestSuffixLength) {
+			longestSuffixLength = commonSuffix.length;
+			bestMatch = candidate;
+		} else if (commonSuffix.length === longestSuffixLength) {
+			bestMatch = null;
+		}
+	}
+
+	return bestMatch;
+}

package/src/lib/utils/sum.ts

@@ -0,0 +1,10 @@
+/**
+ * Sum an array of numbers
+ */
+export function sum(numbers: number[]): number {
+	let total = 0;
+	for (const num of numbers) {
+		total += num;
+	}
+	return total;
+}

package/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import { createPortal } from "$lib/actions/portal";
 	import Breadcrumbs from "$lib/components/Breadcrumbs.svelte";
 	import Notifications from "$lib/components/Notifications.svelte";
 	import OriginWarning from "$lib/components/OriginWarning.svelte";
@@ -15,26 +16,44 @@
 </svelte:head>
 
 <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 />
+	<!-- App bar -->
+	<header class="sticky top-0 z-50 border-b border-[var(--border-color)] bg-[var(--background-color)]/80">
+		<div class="max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8">
+			<div class="h-14 flex items-center gap-3">
+				<!-- Logo -->
+				<a href={resolve("/")} class="inline-flex items-center gap-2 group no-underline hover:no-underline">
+					<span
+						class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-black dark:bg-white text-white dark:text-black text-sm font-semibold select-none"
+					>
+						M
+					</span>
+					<span class="text-lg font-semibold tracking-tight" style="color: var(--text);">Mongoku</span>
+				</a>
+
+				<div class="hidden md:block w-px h-5 bg-[var(--border-color)]"></div>
+
+				<!-- Breadcrumbs -->
+				<Breadcrumbs />
+
+				<div class="ml-auto flex items-center gap-2">
+					<!-- View tabs -->
+					<PageSwitcher class="" />
+					<ThemeSwitcher />
+				</div>
+			</div>
 		</div>
-	</nav>
+	</header>
 
 	<OriginWarning serverOrigin={data.serverOrigin} readOnly={data.readOnly} />
 
-	<div class="px-6 py-6 flex flex-col gap-6">
+	<!-- Main -->
+	<main class="max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-10">
 		<Notifications />
-		{@render children()}
-	</div>
-</div>
+		<div class="flex flex-col gap-6">
+			{@render children()}
+		</div>
+	</main>
 
-<style lang="postcss">
-	.navbar {
-		background-color: var(--light-background);
-		border-bottom: var(--border);
-	}
-</style>
+	<!-- Portal container for tooltips and other overlay content -->
+	<div use:createPortal></div>
+</div>

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

@@ -73,17 +73,16 @@
 	}
 
 	async function retryServerConnection(server: Server) {
-		const name = serverName(server.name);
-		retryingServers.add(name);
+		retryingServers.add(server._id);
 
 		try {
-			await retryConnection(name);
+			await retryConnection(server._id);
 			notificationStore.notifySuccess("Connection restored successfully");
 			await invalidateAll();
 		} catch (error) {
 			notificationStore.notifyError(error, "Failed to retry connection");
 		} finally {
-			retryingServers.delete(name);
+			retryingServers.delete(server._id);
 		}
 	}
 </script>
@@ -171,16 +170,16 @@
 								{/if}
 							{/await}
 						</td>
-						<td style="width: 200px">
+						<td style="width: 250px">
 							<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))}
+											disabled={retryingServers.has(server._id)}
 										>
-											{retryingServers.has(serverName(server.name)) ? "Retrying..." : "Retry"}
+											{retryingServers.has(server._id) ? "Retrying..." : "Retry"}
 										</button>
 									{/if}
 								{/await}

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

@@ -1,11 +1,51 @@
 <script lang="ts">
+	import { dropDatabase as dropDatabaseCommand } 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 } from "$lib/utils/filters";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
+
+	type Database = PageData["databases"][number];
+
+	let showDropModal = $state(false);
+	let databaseToDrop = $state<Database | null>(null);
+	let isDropping = $state(false);
+
+	function openDropModal(database: Database) {
+		databaseToDrop = database;
+		showDropModal = true;
+	}
+
+	function closeDropModal() {
+		showDropModal = false;
+		databaseToDrop = null;
+		isDropping = false;
+	}
+
+	async function confirmDrop() {
+		if (!databaseToDrop || isDropping) return;
+
+		isDropping = true;
+		try {
+			await dropDatabaseCommand({
+				server: data.server,
+				database: databaseToDrop.name,
+			});
+			notificationStore.notifySuccess(`Database "${databaseToDrop.name}" dropped successfully`);
+			closeDropModal();
+			// Reload the page to get updated databases
+			await invalidateAll();
+		} catch (error) {
+			notificationStore.notifyError(error, "Failed to drop database");
+			isDropping = false;
+		}
+	}
 </script>
 
 <Panel title="Databases on {data.server}">
@@ -15,12 +55,13 @@
 				<th>Name</th>
 				<th>Collections</th>
 				<th>Size</th>
+				<th></th>
 			</tr>
 		</thead>
 		<tbody>
 			{#if data.databases && data.databases.length > 0}
 				{#each data.databases as database (database.name)}
-					<tr>
+					<tr class="group">
 						<td>
 							<a
 								href={resolve(
@@ -74,11 +115,23 @@
 								</TooltipTable>
 							{/if}
 						</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(database)}
+									>
+										Drop
+									</button>
+								{/if}
+							</div>
+						</td>
 					</tr>
 				{/each}
 			{:else}
 				<tr>
-					<td colspan="3">
+					<td colspan="4">
 						<div class="text-center">No databases...</div>
 					</td>
 				</tr>
@@ -86,3 +139,19 @@
 		</tbody>
 	</table>
 </Panel>
+
+<Modal show={showDropModal} onclose={closeDropModal} title="Drop Database">
+	<p>
+		Are you sure you want to drop the database <strong>{databaseToDrop?.name}</strong>? This action cannot be undone.
+	</p>
+	{#snippet footer()}
+		<button class="btn btn-default btn-sm" onclick={closeDropModal} disabled={isDropping}>Cancel</button>
+		<button class="btn btn-outline-danger btn-sm" onclick={confirmDrop} disabled={isDropping}>
+			{#if isDropping}
+				Dropping...
+			{:else}
+				Drop Database
+			{/if}
+		</button>
+	{/snippet}
+</Modal>