Connection improvements in Compass

Alena Khineika
The Startup
Published in
6 min readOct 2, 2019

--

When you open the MongoDB Compass application, an initial dialog that appears is a connection screen. There are two ways in which you can connect to your desired database: fill in connection details manually or connect via a connection string (URI). We wanted to improve the user experience of the connection screen to make the tool more flexible and the connection process more transparent.

Earlier versions of Compass could detect whether you have MongoDB URI in your system clipboard and auto-populate the connection dialog using this information. The parsing process happened only in one direction — from the connection string to the list of parsed attributes. There was no way to switch back to the connection string and double-check what exactly was taken from the clipboard. Neither was it possible to build a new connection string after filling the form.

Compass detects MongoDB URI in the clipboard

The new design is intended to address these minor annoyances and power the connection screen with some handy features such as viewing, editing, and building URIs.

Let’s clarify first what URI is meaning so we can understand these features better.

Generic URI Syntax

A Uniform Resource Identifier (URI) is a compact sequence of characters that identifies an abstract or physical resource.

The URI syntax is organized hierarchically, with components listed in order of decreasing significance from left to right.

scheme://[authority]/path[?query][#fragment]

The generic syntax uses the slash (/), the question mark (?), and the number sign (#) characters to delimit components that are significant to the generic parser’s hierarchical interpretation of an identifier, and includes the following components:

scheme:// — The required scheme name that refers to a specification for assigning identifiers within that scheme.

authority — The optional component based on a registered name or server address, along with optional port and user information.

/path — The required component that contains data, usually organized in hierarchical form, that, along with data in the non-hierarchical query component, serves to identify a resource within the scope of the URI’s scheme and naming authority.

?query — The optional component that contains non-hierarchical data.

#fragment — The optional component of a URI that allows indirect identification of a secondary resource by reference to a primary resource and additional identifying information.

The scheme and the path components are required, though the path may be empty (no characters). When authority is present, the path must either be empty or begin with a slash character. When authority is not present, the path cannot begin with two slash characters.

The following are two examples URIs and their component parts:

Each URI begins with a scheme name that refers to a specification for assigning identifiers within that scheme. As such, the URI syntax is a federated and extensible naming system wherein each scheme’s specification may further restrict the syntax and semantics of identifiers using that scheme.

MongoDB URI Syntax

The standard MongoDB URI connection scheme has the form:

mongodb://[username:password@]host1[:port1][,...hostN[:portN]]][/[database][?options]]

And includes the following components:

mongodb:// — A required prefix to identify that this is a string in the standard MongoDB connection format.

username:password@ — Optional authentication credentials. If specified, the client will attempt to log in to the specific database using these credentials after connecting.

host[:port] — The host (and optional port number) where the mongod instance (or the mongos instance for a sharded cluster) is running. You can specify a hostname, IP address, or UNIX domain socket. It can contain as many hosts as appropriate for your deployment topology.

/database — The optional name of the database to authenticate if the connection string includes authentication credentials in the form of username:password@.

?<options> — The optional query string that specifies connection string options as <name>=<value> pairs.

Here is an example of MongoDB URI:

mongodb://myDBReader:P%40ssw0rd@mongodb0.example.com:27017/admin?replicaSet=myRepl

The following table matches the Generic URI Syntax to the MongoDB URI Syntax:

Generic URI Syntax to MongoDB URI Syntax

The MongoDB URI format is unified across official drivers, but some options are not supported by all drivers due to implementation differences.

What about improvements?

MongoDB supports connecting via URI to reduce the complexity of configuration management and allows users to access their data using just a single string. Since this feature became very popular with Compass users, during redesign we not only gave the URI its own view, we also prioritized this view and show it first when starting Compass.

Connecting via URI

We added on the fly validation to immediately notify users if a wrong connection schema was used or connection attributes have invalid values before trying to establish a connection.

The syntax error message

The syntax errors are indicated with a yellow background color, and for the server errors, we use a red background.

The server error message

Users can switch to the form view by clicking “Fill in connection fields individually” on the top right corner of the screen. The connection form attributes were split into “Hostname” and “More options” views. On the first view, users can enter Hostname, Port, indicate whether it is SRV Record or regular one and specify the Authentication mechanism.

General connection options

And on the second view, users can add such options as Read Preference, the SSL method or SSH Tunnel.

Advanced connection options

Outside of the visible part, the Compass connection model was improved in order to handle all connection options supported by the Node driver.

The Compass connection model

The main purpose of the Compass connection model is to be a domain model around a MongoDB connection. It encapsulates the URI parsing process,

and building URIs from a group of attributes.

The connection model uses the Node driver to parse URIs,

and builds URIs using internal tools, because the model acts as a middle layer between the driver and UI. It gets the data from the client application and prepares driverURL and driverOptions attributes for the MongoClient.connect() function.

The new connection model adopts the data structure used by the Node driver and adds support of all connection options that the driver supports.

It is not a surprise that the first impression is a big deal for any application. And if the start page such as a connection screen is complicated or lacks functionalities, it can make a bad impression about the entire application.

During this iteration, we focused mostly on connection model improvements. Now we can parse and build any MongoDB URIs, so users have more options on how to configure their connections. We also did quite a few improvements to the UI. With the next iterations, we are going to bring more interesting features, such as favorites redesign, connection diagnostic, better error reporting and much more. Stay tuned.

--

--