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).

Package localization

Not all localization comes from the Cloudbeaver source code, some of it comes from the backend side. So, if you want to, for example, change or create localization for database objects, you need to do it in another repository, that is https://github.com/dbeaver/dbeaver. Here is a guide how you can contribute to dbeaver localization https://github.com/dbeaver/dbeaver/wiki/Localization.

To create or improve the localization for Cloudbeaver follow these steps:

Prepare for changes

  1. Fork repository https://github.com/dbeaver/cloudbeaver.
  2. Clone it to your local system.
  3. Make a new branch (for example, italian-localization).

    Make changes

  4. Find the package you want to change localization in.
    In Cloudbeaver all translatable resources are located in the locales folder. The path to the folder is [package-name]\src\locales\[locale-code].ts.
    For example, you can find basic UI language tokens in the core-localization\src\locales\[locale-code].ts file.
  5. Create localization file.

    For example, if you want to add localization for the Italian language create `it.tsfile next to theen.tsfile in the directory we have discussed before. After that, copy all content from theen.tsfile to theit.ts` file.
  6. Translate tokens to your language.
    Here is the structure of the language tokens: `[‘token-name’, ‘token-value’]`. You need to change only the second part, ‘token-value’.
    For example, if you wanted to translate the Loading… token, which is `[‘ui_processing_loading’, ‘Loading…’]`, it would look like this: `[‘ui_processing_loading’, ‘Caricamento in corso…’]`.
  7. Commit and Push your changes back to your repo.
  8. Click the Compare & pull request button.
  9. Click Create pull request to open a new pull request (in branch devel) https://help.github.com/articles/creating-a-pull-request-from-a-fork/.

To find the right localization files, you can go to https://github.com/dbeaver/cloudbeaver -> press Go to file -> paste en. in the input and you should see all available localization 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

Releases

The latest CloudBeaver 21.1.4 – 2021-09-09

  • Role management is added. 
  • Context menu is available in the Metadata Editor.
  • Different UI bugs have been fixed.

CloudBeaver 21.1.3 – 2021-08-30

CloudBeaver 21.1.2 – 2021-08-11

CloudBeaver 21.1.1 – 2021-08-02

CloudBeaver 21.1.0 – 2021-07-15

CloudBeaver 21.0.5 – 2021-06-30

CloudBeaver 21.0.3 – 2021-06-11

CloudBeaver 21.0.2 – 2021-05-20

CloudBeaver 21.0.1 – 2021-04-28

CloudBeaver 21.0.0 – 2021-04-15

CloudBeaver 20.0.6 – 2021-03-31

CloudBeaver 20.0.5 – 2021-03-18

CloudBeaver 20.0.3 – 2021-02-10

CloudBeaver 20.0.1 – 2020-12-29

CloudBeaver 1.2.3 – 2020-11-25

CloudBeaver 1.2.0 – 2020-10-19

CloudBeaver 1.1.0 – 2020-07-14

CloudBeaver 1.0.4 – 2020-06-16

CloudBeaver 1.0.3 – 2020-06-02

CloudBeaver 1.0.2 – 2020-05-19

CloudBeaver 1.0.1 – 2020-05-05

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

Role management

You can use roles to manage connection permissions in CloudBeaver. As a role is added to a user, the role connections become available for the user on the main page.

The Admin and User roles are available by default.

Role Connections created in Easy Config Connections created in Administration Administration menu
Admin Yes Yes Yes
User Available by default. Can be deleted Not available by default. Can be added No

The Administrator can create custom roles on the Roles tab of the Administration menu.

Screenshot 2021-09-09 at 11 12 34


Also connection access can be configured in the Connection and User dialogs.

Connection dialog

Screenshot 2021-09-09 at 11 16 09

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

The latest CloudBeaver 21.1.3 2021 08 30

CloudBeaver 21.1.3

  • Table rows can be created and deleted from the Data Editor.
  • It is possible to preview scripts in the Data Editor.
  • The dialog to enter the credentials appears when you test connections.
  • Different UI bugs have been fixed.

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

CloudBeaver 20.0.5

Release – 2021-03-18

  • New design for the connection form
  • Possibility to edit connections created manually in the public part of the application
  • SSH support for connections in public part of the application
  • Possibility to deny credentials saving
  • Drivers for MS SQL Server, Oracle, DB2 LUW, Derby, Trino (Presto SQL)
  • Performance improvements for data grid
  • A lot of minor UI fixes and improvements