Creating a MongoDB Compass Plugin
Guide to create your own plugin for MongoDB Compass to suite your custom needs
Any developer/dba using MongoDB will be aware of the MongoDB Compass.
Compass is an interactive tool for querying, optimizing, and analyzing your MongoDB data. Get key insights, drag and drop to build pipelines, and more.
Compass is provided by MongoDB for free and can be downloaded from here. It is the best GUI according to me to query data in MongoDB. However as developers we might never be satisfied with the features provided by any tool and might need more from any tool. But sadly not every tool provides us an option to customize things according to our needs.
MongoDB provides option to create Compass plugins. There are no clear steps anywhere how to create a plugin, but I did try to do some reverse engineering to figure out the same. MongoDB Compass has SSPL license and you need to sign a contributor’s agreement before forking the compass repository
Use of this plugin?
In simple words this plugin helps generate sample test data. But why do we need it?
Every application developed goes through a serious of load tests, performance tests etc. But in order to do a test of the application we need huge data which is the bread and butter for testing.
For testing writes we use lots of tools available in the market. For mongodb we use tools like POC Driver, Test data gen by PeerIslands, etc. Some developers take the pain of writing extra piece of code or create scripts to push data to DB.
Doesn’t it feel it’s a pain to have a separate environment setup or write an app/script and run it.
Let’s agree you decide to take the pain. But what if your mongodb is hosted on-prem and has no internet connectivity. In this case using an online tool is out of the question.
Since compass connects to your mongodb in an offlince environment as well as it can connect to your Atlas cluster. I decided to create a plugin to add sample data from compass. This way we need not write additional scripts etc
Features of the plugin
You have the option to specify the number of records to add
You can decide your data model to be created. You get to decide the size of document by specifying the number of strings, numbers, arrays and objects
You can upload your sample document schema based on which sample data is generated — this feature is yet to be implemented
Prerequisites
npm version: ^14.7.5
node version: ≥7.0.0
Languages/Frameworks Used:
React.Js: commonly used JavaScript library for building user interfaces
Redux: predictable state container for JavaScript apps.
Electron: framework for building cross platform desktop applications using JavaScript, HTML, and CSS
Webpack: static module bundler for modern JavaScript applications
Steps:
Setup Environment:
Fork the repo from github. MongoDB requires you to sign a confidentiality agreement before forking the repo
Clone the code into your local system. I used VS Code for my development purpose
Build and Run
Run npm run bootstrap to build the existing code
Run npm run start to run the application. This will start a compass application locally
Create new workspace
To create a new workspace use npm run create-workspace <workspace-name>
Once you create a new workspace a new project gets created under the packages folder.This will do all the initial workspace bootstrapping for you, ensuring that your package has all the standard configs set up and ready, and all the npm scripts aligned
Custom Workspace code
I created a workspace named compass-add-data for my custom plugin. This has code for a separate tab in the Compass plugin to add data.
The code for adding the dropdown option of “Insert Multiple Documents” is added in the package compass-crud
The code for opening the Add Data dialog and accepting inputs and adding data is present in the package compass-import-export
compass-add-data/config — consists configuration for webpack
compass-add-data/electron — consists electron rendering code for running our react.js app as a desktop app
compass-add-data/src — react code for rendering components, state management
Some main files to refer
compass-add-data.jsx — code to render our Add Data Tab
compass-crud/document-list.jsx — dropdown for all multi insert
compass-import-export/add-data.js — create sample data and save to db
Run our plugin
Use npm run start to run our plugin. The result is shown in the video above
This is a sample plugin and not yet published to the mongo repo. The code for my custom plugin can be found here
Please feel free to comment for any questions.
Thank you!
