Next-Gen MongoDB Web IDE: A Modern Administrative Dashboard

Architecture Overhaul

The original WebForms solution has been rewritten from scratch using ASP.NET MVC 5, Bootstrap 4, and the official MongoDB .NET driver. SQL-style parsing was dropped in favor of native Mongo shell syntax, and every feature received a UX polish.

Layout & Navigation

The UI is a classic three-panel design:

  • Top banner with global actions (refresh, expand, collapse).
  • Left sidebar: a zTree-powered hierarchy Server → Database → Collection → Fields/Indexes.
  • Right workspace: an <iframe> that loads the requested view.
<div class="row-fluid">
  <div class="span3">
    <ul id="mongoTree" class="ztree"></ul>
  </div>
  <div class="span9">
    <iframe id="workFrame" src="/Home/ServerManager"></iframe>
  </div>
</div>

Tree-Node Model

public class MongoNode
{
    public uint   NodeId   { get; set; }   // deterministic uint key
    public uint   ParentId { get; set; }
    public string Text     { get; set; }
    public NodeKind Kind   { get; set; }   // Server, DB, Collection, Field, Index, Placeholder
}

IDs are generated with a thread-safe, time-based algorithm to avoid collisions under heavy load. The tree is cached in a ConcurrentDictionary<uint,MongoNode> for two hours; expired cache triggers a silent background refresh.

Server Management

Adding or removing a server edits Config/servers.json. The file is reloaded on demand and used as the seed list for parallel discovery of databases, collections, and metadata.

Real-Time Stats

Clicking a server node issues:

var cmd = new BsonDocument("serverStatus", 1);
var status = adminDb.RunCommand<BsonDocument>(cmd);

The returned BsonDocument is flattened in to a table and rendered via zTree for consistency.

Replica-Set Diagnostics

Primary’s oplog:

var oplog = localDb.GetCollection<BsonDocument>("oplog.rs")
                   .Find(new BsonDocument())
                   .Limit(10)
                   .ToList();

Secondary’s sync source:

var sources = localDb.GetCollection<BsonDocument>("sources")
                     .Find(new BsonDocument())
                     .ToList();

Database Profiling

Three levels:

  1. Off
  2. Slow ops (> N ms)
  3. All ops

Profile entreis are fetched via system.profile and displayed in a sortable grid. Quick heuristics:

  • docsExamined » docsReturned → add index
  • large result set → project only needed fields
  • high write ratio → evaluate index overhead

Collection Analytics

var stats = db.RunCommand<BsonDocument>(new BsonDocument
{
    { "collStats", collectionName }
});

Stats include document count, average object size, index sizes, and storage allocation.

Query Console

Instead of SQL, users type raw Mongo queries:

{ status: "A", age: { $gt: 25 } }

The string is parsed via BsonDocument.Parse(query), then executed with optional sort, skip, limit. Results are shown in a paginated table with inline type badges.

An Explain button appends .explain("executionStats") and visualizes winning plans.

Index Manager

Lists existing indexes, allows drop, and provides a wizard for compound keys. Example creation:

var keys = Builders<BsonDocument>.IndexKeys
                                  .Ascending("lastName")
                                  .Descending("score");
collection.Indexes.CreateOne(new CreateIndexModel<BsonDocument>(keys));

Future Work

Pending features: in-place doucment editing, Map-Reduce runner, custom server-side JS execution, and dark mode.

Tags: mongodb asp.net-mvc Bootstrap zTree NoSQL

Posted on Tue, 08 Sep 2026 16:40:33 +0000 by possiblyB9