Skip to main content
Version: 0.7.0-incubating

Apache Gravitino web UI

This document primarily outlines how users can manage metadata within Apache Gravitino using the web UI, the graphical interface is accessible through a web browser as an alternative to writing code or using the REST interface.

Currently, you can integrate OAuth settings to view, add, modify, and delete metalakes, create catalogs, and view catalogs, schemas, and tables, among other functions.

Build and deploy the Gravitino Web UI and open it in a browser at http://<gravitino-host>:<gravitino-port>, by default is http://localhost:8090.

Initial page​

The web UI homepage displayed in Gravitino depends on the configuration parameter for OAuth mode, see the details in Security.

Set parameter for gravitino.authenticators, simple or oauth. Simple mode is the default authentication option. If multiple authenticators are set, the first one is taken by default.

tip

After changing the configuration, make sure to restart the Gravitino server.

<path-to-gravitino>/bin/gravitino.sh restart

Simple mode​

gravitino.authenticators = simple

Set the configuration parameter gravitino.authenticators to simple, and the web UI displays the homepage (Metalakes).

webui-metalakes-simple

At the top-right, the UI displays the current Gravitino version.

The main content displays the existing metalake list.

Oauth mode​

gravitino.authenticators = oauth

Set the configuration parameter gravitino.authenticators to oauth, and the web UI displays the login page.

caution

If both OAuth and HTTPS are set, due to the different security permission rules of various browsers, to avoid cross-domain errors, it is recommended to use the Chrome browser for access and operation.

Such as Safari need to enable the developer menu, and select Disable Cross-Origin Restrictions from the develop menu.

webui-login-with-oauth

  1. Enter the values corresponding to your specific configuration. For detailed instructions, please refer to Security.

  2. Click on the LOGIN button takes you to the homepage.

webui-metalakes-oauth

At the top-right, there is an icon button that takes you to the login page when clicked.

Manage metadata​

All the manage actions are performed by using the REST API

Metalake​

Create metalake​

On the homepage, clicking on the CREATE METALAKE button displays a dialog to create a metalake.

create-metalake-dialog

Creating a metalake needs these fields:

  1. Name(required): the name of the metalake.
  2. Comment(optional): the comment of the metalake.
  3. Properties(optional): Click on the ADD PROPERTY button to add custom properties.

metalake-list

There are 3 actions you can perform on a metalake.

metalake-actions

Show metalake details​

Click on the action icon in the table cell.

You can see the detailed information of this metalake in the drawer component on the right.

metalake-details

Edit metalake​

Click on the action icon in the table cell.

Displays the dialog for modifying fields of the selected metalake.

create-metalake-dialog

Disable metalake​

Metalake defaults to in-use after successful creation.

Mouse over the switch next to the metalake's name to see the 'In-use' tip.

metalake-in-use

Click on the switch will disable the metalake, mouse over the switch next to the metalake's name to see the 'Not in-use' tip.

metalake-not-in-use

Drop metalake​

Click on the action icon in the table cell.

Displays a confirmation dialog, clicking on the DROP button drops this metalake.

delete-metalake

Catalog​

Click on a metalake name in the table views catalogs in a metalake.

If this is the first time, it shows no data until after creating a catalog.

Click on the left arrow icon button takes you to the metalake page.

metalake-catalogs

Click on the Tab - DETAILS views the details of the metalake on the metalake catalogs page.

metalake-catalogs-details

On the left side of the page is a tree list, and the icons of the catalog correspond to their type and provider.

  • Catalog (e.g. iceberg catalog)
  • Schema
  • Table

tree-view

Hover your mouse over the corresponding icon to the data changes to a reload icon . Click on this icon to reload the currently selected data.

tree-view-reload-catalog

Create catalog​

Click on the CREATE CATALOG button displays the dialog to create a catalog.

create-catalog

Creating a catalog requires these fields:

  1. Catalog name(required): the name of the catalog
  2. Type(required): relational/fileset/messaging, the default value is relational
  3. Provider(required):
    1. Type relational - hive/iceberg/mysql/postgresql/doris/paimon/hudi/oceanbase
    2. Type fileset - hadoop
    3. Type messaging - kafka
  4. Comment(optional): the comment of this catalog
  5. Properties(each provider must fill in the required property fields specifically)
Providers​

Required properties in various providers

1. Type relational​

Follow the Apache Hive catalog document.

KeyDescription
metastore.urisThe Hive metastore URIs e.g. thrift://127.0.0.1:9083
tip

Due to the current limitation of the web interface, which only allows for viewing, the functionality to create or modify schema, tables, or filesets is not available. Please refer to the documentation to use the REST API for these operations.

2. Type fileset​

Follow the Hadoop catalog document.

3. Type messaging​

Follow the Kafka catalog document.

KeyDescription
bootstrap.serversThe Kafka broker(s) to connect to, allowing for multiple brokers by comma-separating them

After verifying the values of these fields, clicking on the CREATE button creates a catalog.

created-catalog

Show catalog details​

Click on the action icon in the table cell.

You can see the detailed information of this catalog in the drawer component on the right.

show-catalog-details

Edit catalog​

Click on the action icon in the table cell.

Displays the dialog for modifying fields of the selected catalog.

update-catalog

Only the name, comment, and custom fields in properties can be modified, other fields such as type, provider, and default fields in properties cannot be modified.

The fields that are not allowed to be modified cannot be selected and modified in the web UI.

Disable catalog​

Catalog defaults to in-use after successful creation.

Mouse over the switch next to the catalog's name to see the 'In-use' tip.

catalog-in-use

Click on the switch will disable the catalog, mouse over the switch next to the catalog's name to see the 'Not in-use' tip.

catalog-not-in-use

Delete catalog​

Click on the action icon in the table cell.

Displays a confirmation dialog, clicking on the SUBMIT button deletes this catalog.

delete-catalog

Schema​

Click the catalog tree node on the left sidebar or the catalog name link in the table cell.

Displays the list schemas of the catalog.

list-schemas

Create schema​

Click on the CREATE SCHEMA button displays the dialog to create a schema.

create-schema

Creating a schema needs these fields:

  1. Name(required): the name of the schema.
  2. Comment(optional): the comment of the schema.
  3. Properties(optional): Click on the ADD PROPERTY button to add custom properties.

Show schema details​

Click on the action icon in the table cell.

You can see the detailed information of this schema in the drawer component on the right.

schema-details

Edit schema​

Click on the action icon in the table cell.

Displays the dialog for modifying fields of the selected schema.

update-schema-dialog

Drop schema​

Click on the action icon in the table cell.

Displays a confirmation dialog, clicking on the DROP button drops this schema.

delete-schema

Table​

list-tables

list-columns

Fileset​

Click the fileset schema tree node on the left sidebar or the schema name link in the table cell.

Displays the list fileset of the schema.

list-filesets

Create fileset​

Click on the CREATE FILESET button displays the dialog to create a fileset.

create-fileset

Creating a fileset needs these fields:

  1. Name(required): the name of the fileset.
  2. Type(required): managed/external, the default value is managed.
  3. Storage Location(optional):
    1. It is optional if the fileset is 'Managed' type and a storage location is already specified at the parent catalog or schema level.
    2. It becomes mandatory if the fileset type is 'External' or no storage location is defined at the parent level.
  4. Comment(optional): the comment of the fileset.
  5. Properties(optional): Click on the ADD PROPERTY button to add custom properties.

Show fileset details​

Click on the action icon in the table cell.

You can see the detailed information of this fileset in the drawer component on the right.

fileset-details

Click the fileset tree node on the left sidebar or the fileset name link in the table cell.

You can see the detailed information on the right page.

fileset-selected-details

Edit fileset​

Click on the action icon in the table cell.

Displays the dialog for modifying fields of the selected fileset.

update-fileset-dialog

Drop fileset​

Click on the action icon in the table cell.

Displays a confirmation dialog, clicking on the DROP button drops this fileset.

delete-fileset

Topic​

topic-details

Feature capabilities​

PageCapabilities
MetalakeView ✔ / Create ✔ / Edit ✔ / Delete ✔
CatalogView ✔ / Create ✔ / Edit ✔ / Delete ✔
SchemaView ✔ / Create ✔ / Edit ✔ / Delete ✔
TableView ✔ / Create ✘ / Edit ✘ / Delete ✘
FilesetView ✔ / Create ✔ / Edit ✔ / Delete ✔
TopicView ✔ / Create ✘ / Edit ✘ / Delete ✘

E2E test​

End-to-end testing for web frontends is conducted using the Selenium testing framework, which is Java-based.

Test cases can be found in the project directory: integration-test/src/test/java/org/apache/gravitino/integration/test/web/ui, where the pages directory is designated for storing definitions of frontend elements, among others. The root directory contains the actual steps for the test cases.

tip

While writing test cases, running them in a local environment may not pose any issues.

However, due to the limited performance capabilities of GitHub Actions, scenarios involving delayed DOM loading—such as the time taken for a popup animation to open—can result in test failures.

To circumvent this issue, it is necessary to manually insert a delay operation, for instance, by adding such as Thread.sleep(sleepTimeMillis).

This ensures that the test waits for the completion of the delay animation before proceeding with the next operation, thereby avoiding the problem.

It is advisable to utilize the waits methods inherent to Selenium as a substitute for Thread.sleep().