Demo Server

We host a demo server where you can see what CloudBeaver looks in real life.

It is a simple server with a few sample databases.

Demo Serverhttps://demo.cloudbeaver.io

Pre-configured databases access:

Database User Password
SQLite n/a n/a
MySQL demo demo
PostgreSQL demo demo

Custom connections

CloudBeaver does not store/cache your credentials or any user data.
You could try to connect to some of your databases using the Custom connection wizard.

Warning: it is not secure to open direct access to your database so do not use this on databases with sensitive data.
The Demo server is for testing only.

If you want to use CloudBeaver with your real databases then deploy it in your infrastructure.

Security

We did not pay too much attention on the Demo server security.
It is a completely isolated server with no sensitive data.
But you could try to hack it – please do it gently and please let us know if you will find any security holes.
Thank you 😉

Have fun!

Driver managements

CloudBeaver supports almost any database which has a JDBC driver.
It generally supports all drivers supported by DBeaver.

By default, do not enable all DBeaver drivers in CloudBeaver. They must be added to the server configuration on demand.

Adding new driver dependencies

Driver dependencies are configured in the folder server/drivers.
In order to add a new driver:

  • Create new folder for a new driver
  • Copy the POM file from any another driver config to the new directory
  • Change the module name and driver dependencies in the new POM file

Example of PostgreSQL driver config:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>drivers.postgresql</artifactId>
    <version>1.0.0</version>
    <parent>
        <groupId>io.cloudbeaver</groupId>
        <artifactId>drivers</artifactId>
        <version>1.0.0</version>
        <relativePath>../</relativePath>
    </parent>

    <properties>
        <deps.output.dir>postgresql</deps.output.dir>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.postgresql</groupId>
            <artifactId>postgresql</artifactId>
            <version>42.2.20</version>
        </dependency>
        <dependency>
            <groupId>net.postgis</groupId>
            <artifactId>postgis-jdbc</artifactId>
            <version>2.5.0</version>
        </dependency>
    </dependencies>

</project>

Adding a new driver to the server

Enabled drivers are configured in the file, server/bundles/io.cloudbeaver.resources.drivers.base/plugin.xml.
You can copy an existing driver configuration to add a new one.

There are 3 configuration lines for each driver:

  1. <resource name="drivers/driver-name" /> – says that the file-system folder drivers/driver-name can be used to load driver jars.
  2. <bundle id="drivers.driver-name" /> – needed for driver configuration enable in the DBeaver platform
  3. <driver id="generic:driver-name" /> – enabled the DBeaver driver in CloudBeaver. The driver ID can be found in the DBeaver platform (in one of the database-specific plugin.xml files).

Entity Diagrams

Features

  • Display entities with attributes
  • Display relations
  • Navigation to entity/attribute metadata editor
  • Highlighting
  • Auto layout
  • Entity drag & drop
  • Zoom
  • Export to png/svg

Overview

Display entities with attributes

  1. Navigate to your connection and open a table or schema
  2. Select the “Diagram” tab (if the tab is not presented then the object does not support the diagram presentation)

Entity Diagram

You can click on an entity to highlight it:

Entity Diagram entity relations highlight

You can click on a relation to get highlight it:

Entity Diagram highlight

You can open the entity in the metadata editor by:

  • double-clicking on the entity
  • double-clicking on the entity attribute
  • clicking on the link in the entity tooltip

On the bottom toolbar you can find different buttons:

  1. Layout – diagram auto layout
  2. Zoom in/out
  3. Export – export diagram in a png or svg format

    Entity Diagram export to file

Frontend technical overview

CloudBeaver frontend is a single page application written in React.
We use InversifyJS for dependency injection and MobX as a state management library. GraphQL is used to communicate with the server.

The application is written as a set of plugins organized in Lerna monorepo. The plugins can be developed independently and added to the final build by mentioning it in the configuration file.

The application uses Reshadow library and CSS modules for style incapsulation and supports light and dark themes.

We use Ag-Grid to display big and functionally rich tables and Codemirror to edit SQL queries.

Development

  1. Run the local server as described in the Build and deploy section
  2. Execute

    cd webapp/
    lerna run dev --stream --scope=@cloudbeaver/product-default -- -- --env server=localhost:8978
    

    to run Webpack dev server

  3. Open localhost:3100 in web browser

Plugins

The application consists of several plugins and submodules which are located in the webapp\packages folder.

  • core-administration – Administration API
  • core-app – Base application folder
  • core-authentication – Authentication API
  • core-blocks – Low-level common visual components
  • core-bootstrap – Common core package
  • core-cli – Command line tools for building & dev
  • core-connections – Connections API
  • core-di – Dependency injection related classes
  • core-dialogs – Main and context menues, modal windows
  • core-events – Logging
  • core-executor – Task scheduling API
  • core-extensions – Extensions API
  • core-localization – Localization API
  • core-notifications – Popup notification components
  • core-plugin – Plugin API
  • core-product – Product API
  • core-root – Permissions, server and session services
  • core-routing – Routing API
  • core-sdk – GraphQL related services
  • core-settings – Settings API
  • core-theming – Themisation related services and hooks
  • core-utils – Utilites
  • core-view – View API
  • plugin-administration – Application configuration wizard
  • plugin-authentication – Authentication and users administration
  • plugin-connection-custom – Provides the handling of custom connections
  • plugin-connection-template – Provides the handling of template connections
  • plugin-data-export – Data export from data view
  • plugin-data-spreadsheet – Wrapper over Ag-Grid
  • plugin-data-viewer – Provides Data Table View
  • plugin-ddl-viewer – Provides DDL for database objects
  • plugin-object-viewer – Provides Object Property View
  • plugin-sql-editor – Provides SQL-editor tab
  • product-default – Configure and build all plugins to the final application

Home

About CloudBeaver

CloudBeaver is a free and open source web-based database management tool.

  • Web-based application written in Java and Typescript (React)
  • Supports
  • Allows to like in a regular spreadsheet
  • Supports /migration in multiple formats
  • Written in modular architecture and allows to extend with own plugins

Contacts

For technical support, feature suggestions and any other questions, please use our GitHub Issue tracker.


Have fun!
— DBeaver Team

Plugin system

Folder structure

|-cloudbeaver
  |-webapp                 # all frontend codes are here
    |-packages             # yarn workspaces managed by lerna
      |-core               # core package with common modules like GraphQL, 
        |                    dependency injection, and common app services
        |-cli              # core/plugin/product build configs (webpack, babel)
        |-administration   # administration API
        |-di               # dependency injection module
        |-blocks           # the module with basic components - buttons, tabs, tables, lists
        |-sdk              # GraphQL wrapping services
        |-dialogs          # menus, context menus, modal windows
        |-...              # other modules
      |-plugin
        |-authentication
        |-connection-custom
        |-connection-template
        |-data-export
        |-etc...            # other plugins
      |-product-default     # default application product package (with all plugins)

Plugin folder structure

common folder structure:

package_name
 |-node_modules    # dependencies
 |-lib             # after the build will contain the artifact
 |-public          # put static assets to this folder
 |-src             # keep source files here
 |-package.json
 |-tsconfig.json

Commands

Execute from cloudbeaver/webapp


Load all dependencies and init workspaces

```yarn run build```

Build all packages (plugins and the application) and the result will be placed in the `packages/{package-name}/lib` folder

```yarn run lint```

Lint all code

```yarn run lint-fix```

Lint all code and fix

## Build plugin
To build a single plugin execute
```
lerna run build --stream --scope=@cloudbeaver/plugin-name
```

## Build product
### Product folder structure is the same as for plugin
```
|-packages
  |-cloudbeaver
    |-node_modules     # dependencies
    |-lib              # after the build will contain the artifact
    |-public           # put static assets to this folder
    |-src              # keep source files here
    |-package.json
    |-tsconfig.json
```
The only difference in the build command is: `"build": "core-cli-build --mode=production --config ../core-cli/configs/webpack.product.config.js",` it uses product config, also contains `dev` command for starting development local build `"dev": "core-cli-build serve --mode=development --progress --config=../core-cli/configs/webpack.product.dev.config.js --port=3100",`

The application package simple defines the list of plugins that should be included in the build
### Commands
Execute the command to build only the application without rebuilding the plugins

`lerna run build --stream --scope=@cloudbeaver/product-name`

## Development
1. To run a development build that watches file changes and rebuilds, you can use the `dev` command:
`lerna run dev --stream --scope=@cloudbeaver/product-default -- -- --env server=http://backend.server:8095`
It starts the dev server for `product-default`. It also proxies backend requests to `http://backend.server:8095`

2. Navigate `localhost:3100` to open the application

## Static assets
You can keep static assets like images, favicon, etc in the `public` folder in the plugin packages or app package.

Assets such as these will be copied to the application distributive. Assets with the same name will overwrite one another, but the Application public assets have higher priority over them all.

## Localization
See the example in the `core-administration` `AdministrationLocaleService.ts` and `locales` folder

Product configuration parameters

Some variables can be configured via product.conf (server), or via config.json5 (for webapp).

The list of configurable variables are:

Variable Value Description
core.user.defaultTheme light Default theme
core.user.defaultLanguage en Default language
core.app.logViewer.refreshTimeout 3000 Log viewer refresh interval in ms
core.app.logViewer.maxLogEntries 1000 Maximum rows in log viewer
core.app.logViewer.maxFailedRequests 3 Count failed log viewer request before disabling
core.app.navigationTree.childrenLimit 500 Maximum children in navigation tree
core_events.notificationsPool 5 Maximum notifications
plugin_erd_viewer.maxColumnsToDisplay 7500 Maximum columns in ERD
plugin_data_export.disabled true Disable data export functionality

You can also specify these parameters in the config file /workspace/.data/.product.runtime.conf. These properties have a higher priority than product.conf.

For example, if you want to disable the data export functionality, you can do it this way.

  1. Open or create .product.runtime.conf in folder .data
  2. Paste the following code
    {
     "plugin_data_export": {
    "disabled": true
     }
    }
    

Query Execution Plan

Execution Plan

If a database driver supports the visualization of the execution plan, you can see the execution plan of the query by pressing Ctrl+Shift+E or clicking the Explain execution plan button Execution Plan Button on the main toolbar. The execution plan command generates a query execution tree as one of the result tabs and is convenient in estimating if the query/script is quick/optimal enough.
You can click the rows of the execution plan to see their details (statistics) in the panel to the right of the plan.

Execution Plan

Run Docker Container

CloudBeaver container image is on DockerHub: https://hub.docker.com/r/dbeaver/cloudbeaver.

  • dbeaver/cloudbeaver:latest – latest release build.
  • dbeaver/cloudbeaver:dev – latest developer build.

Installation

To install the latest version of CloudBeaver use the following script:

sudo docker pull dbeaver/cloudbeaver:latest

Running

To run cloudbaver in the terminal:

sudo docker run --name cloudbeaver --rm -ti -p 8080:8978 -v /var/cloudbeaver/workspace:/opt/cloudbeaver/workspace dbeaver/cloudbeaver:latest

Then switch to the browser and open http://localhost:8080/

Daemon mode

Add the following parameters:

-d --restart unless-stopped 

Accessing databases on the localhost

If you need to access the database server on the host machine, add the following parameter in docker run: (on Linux only)

 --network host

Cloudbeaver will work in the host machine network.
If this mode is not suitable for your network environment then you can run the container in the following way:

export CB_LOCAL_HOST_ADDR=$(ifconfig | grep -E "([0-9]{1,3}\.){3}[0-9]{1,3}" | grep -v 127.0.0.1 | awk '{ print $2 }' | cut -f2 -d: | head -n1)

docker run --name cloudbeaver --rm -ti -p 8080:8978 --add-host=host.docker.internal:${CB_LOCAL_HOST_ADDR} -v /var/cloudbeaver/workspace:/opt/cloudbeaver/workspace dbeaver/cloudbeaver:dev

or just run script deploy/docker/run-docker-container.sh.
It passes the IP address of host machine to the container.

Docker parameters explanation

Parameters explanation:

Parameter Explanation
–name cloudbeaver Assign container ID (cloudbeaver)
–rm Removes container on stop
-ti Enables terminal mode (allows to stop container with CTRL+C)
-p 8080:8978 Maps CloudBeaver public port (8978) to the host machine port (e.g. 8080)
-v local_path:/opt/cloudbeaver/workspace Mounts local folder `/var/cloudbeaver/workspace’ to the server workspace. Required to keep CloudBeaver data after container restart.
–add-host=host.docker.internal:IP address Adds host name in the container’s /etc/hosts file. This may be needed to access the database server deployed on the host machine.
dbeaver/cloudbeaver:latest Container ID

Server API explorer

The CloudBeaver server provides rich web API. It is exposed via GraphQL protocol.

The GraphQL console can be accessed by URL http://localhost:${serverPort}/${contentRoot}/gql/console

See Server configuration for the variables description.

Note: API explorer is enabled only in Development mode (develMode: true).