diff --git a/docs/assets/webui/create-fileset-hadoop-catalog-dialog.png b/docs/assets/webui/create-fileset-hadoop-catalog-dialog.png new file mode 100644 index 00000000000..50ecaa79e7e Binary files /dev/null and b/docs/assets/webui/create-fileset-hadoop-catalog-dialog.png differ diff --git a/docs/assets/webui/create-messaging-kafka-catalog-dialog.png b/docs/assets/webui/create-messaging-kafka-catalog-dialog.png new file mode 100644 index 00000000000..2a92749d6e3 Binary files /dev/null and b/docs/assets/webui/create-messaging-kafka-catalog-dialog.png differ diff --git a/docs/assets/webui/fileset-details.png b/docs/assets/webui/fileset-details.png new file mode 100644 index 00000000000..43168fd9f3e Binary files /dev/null and b/docs/assets/webui/fileset-details.png differ diff --git a/docs/assets/webui/topic-details.png b/docs/assets/webui/topic-details.png new file mode 100644 index 00000000000..9fee1ad0850 Binary files /dev/null and b/docs/assets/webui/topic-details.png differ diff --git a/docs/webui.md b/docs/webui.md index a758aa4ea0c..2f2d55088a9 100644 --- a/docs/webui.md +++ b/docs/webui.md @@ -3,24 +3,20 @@ title: 'Gravitino web UI' slug: /webui keyword: webui last_update: - date: 2024-02-04 + date: 2024-04-12 author: ch3yne license: 'Copyright 2023 Datastrato Pvt Ltd. This software is licensed under the Apache License version 2.' --- -import Image from '@theme/IdealImage' -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' - This document primarily outlines how users can manage metadata within 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](security.md) to view, add, modify, and delete metalakes, create catalogs, and view catalogs, schemas, and tables, among other functions. +Currently, you can integrate [OAuth settings](./security.md) to view, add, modify, and delete metalakes, create catalogs, and view catalogs, schemas, and tables, among other functions. -[Build](how-to-build.md#quick-start) and [deploy](getting-started.md#getting-started-locally) the Gravitino Web UI and open it in a browser at `http://:`, by default is [http://localhost:8090](http://localhost:8090). +[Build](./how-to-build.md#quick-start) and [deploy](./getting-started.md#getting-started-locally) the Gravitino Web UI and open it in a browser at `http://:`, by default is [http://localhost:8090](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](security.md). +The web UI homepage displayed in Gravitino depends on the configuration parameter for OAuth mode, see the details in [Security](./security.md). Set parameter for `gravitino.authenticator`, [`simple`](#simple-mode) or [`oauth`](#oauth-mode). Simple mode is the default authentication option. @@ -38,7 +34,7 @@ gravitino.authenticator = simple Set the configuration parameter `gravitino.authenticator` to `simple`, and the web UI displays the homepage (Metalakes). -![webui-metalakes-simple](assets/webui/metalakes-simple.png) +![webui-metalakes-simple](./assets/webui/metalakes-simple.png) At the top-right, the UI displays the current Gravitino version. @@ -52,13 +48,20 @@ gravitino.authenticator = oauth Set the configuration parameter `gravitino.authenticator` to `oauth`, and the web UI displays the login page. -![webui-login-with-oauth](assets/webui/login-with-oauth.png) +:::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](https://www.google.com/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](./assets/webui/login-with-oauth.png) -1. Enter the values corresponding to your specific configuration. For detailed instructions, please refer to [Security](security.md). +1. Enter the values corresponding to your specific configuration. For detailed instructions, please refer to [Security](./security.md). 2. Clicking on the `LOGIN` button takes you to the homepage. -![webui-metalakes-oauth](assets/webui/metalakes-oauth.png) +![webui-metalakes-oauth](./assets/webui/metalakes-oauth.png) At the top-right, there is an icon button that takes you to the login page when clicked. @@ -68,11 +71,11 @@ At the top-right, there is an icon button that takes you to the login page when ### Metalake -#### [Create metalake](getting-started.md#using-rest-to-interact-with-gravitino) +#### [Create metalake](./getting-started.md#using-rest-to-interact-with-gravitino) On the homepage, clicking on the `CREATE METALAKE` button displays a dialog to create a metalake. -![create-metalake-dialog](assets/webui/create-metalake-dialog.png) +![create-metalake-dialog](./assets/webui/create-metalake-dialog.png) Creating a metalake needs these fields: @@ -80,11 +83,11 @@ Creating a metalake needs these fields: 2. **Comment**(_optional_): the comment of the metalake. 3. **Properties**(_optional_): Click on the `ADD PROPERTY` button to add custom properties. -![metalake-list](assets/webui/metalake-list.png) +![metalake-list](./assets/webui/metalake-list.png) There are 3 actions you can perform on a metalake. -![metalake-actions](assets/webui/metalake-actions.png) +![metalake-actions](./assets/webui/metalake-actions.png) #### Show metalake details @@ -92,7 +95,7 @@ Clicking on the action icon in the tab You can see the detailed information of this metalake in the drawer component on the right. -![metalake-details](assets/webui/metalake-details.png) +![metalake-details](./assets/webui/metalake-details.png) #### Edit metalake @@ -100,7 +103,7 @@ Clicking on the action icon takes you to the metalake page. -![metalake-catalogs](assets/webui/metalake-catalogs.png) +![metalake-catalogs](./assets/webui/metalake-catalogs.png) Clicking on the Tab - `DETAILS` views the details of the catalog on the metalake catalogs page. -![metalake-catalogs-details](assets/webui/metalake-catalogs-details.png) +![metalake-catalogs-details](./assets/webui/metalake-catalogs-details.png) -On the left side of the page is a tree list. +On the left side of the page is a tree list, and the icons of the catalog correspond to their type and provider. - Catalog - Schema - Table -![tree-view](assets/webui/tree-view.png) +![tree-view](./assets/webui/tree-view.png) 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](assets/webui/tree-view-reload-catalog.png) +![tree-view-reload-catalog](./assets/webui/tree-view-reload-catalog.png) #### Create catalog Clicking on the `CREATE CATALOG` button displays the dialog to create a catalog. -![create-catalog](assets/webui/create-catalog.png) +![create-catalog](./assets/webui/create-catalog.png) Creating a catalog requires these fields: 1. **Catalog name**(**_required_**): the name of the catalog -2. **Type**(**_required_**): the default value is `relational` -3. **Provider**(**_required_**): `hive`/`iceberg`/`mysql`/`postgresql` +2. **Type**(**_required_**): `relational`/`fileset`/`messaging`, the default value is `relational` +3. **Provider**(**_required_**): + 1. Type `relational` - `hive`/`iceberg`/`mysql`/`postgresql`/`doris` + 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**) @@ -154,9 +160,11 @@ Creating a catalog requires these fields: > Required properties in various providers +###### 1. Type `relational` + - Follow the [Apache Hive catalog](apache-hive-catalog) document + Follow the [Apache Hive catalog](./apache-hive-catalog.md) document. @@ -166,7 +174,7 @@ Creating a catalog requires these fields: - Follow the [Lakehouse Iceberg catalog](lakehouse-iceberg-catalog) document + Follow the [Lakehouse Iceberg catalog](./lakehouse-iceberg-catalog.md) document. the parameter `catalog-backend` provides two values: `hive`, and `jdbc`. @@ -197,7 +205,7 @@ Creating a catalog requires these fields: - Follow the [JDBC MySQL catalog](jdbc-mysql-catalog) document + Follow the [JDBC MySQL catalog](./jdbc-mysql-catalog.md) document. @@ -210,7 +218,7 @@ Creating a catalog requires these fields: - Follow the [JDBC PostgreSQL catalog](jdbc-postgresql-catalog) document + Follow the [JDBC PostgreSQL catalog](./jdbc-postgresql-catalog) document. @@ -223,24 +231,54 @@ Creating a catalog requires these fields: |jdbc-database|e.g. `pg_database` | - - Follow the [JDBC Doris catalog](jdbc-doris-catalog) document + + Follow the [JDBC Doris catalog](./jdbc-doris-catalog.md) document. - |Key |Description | - |-------------|-----------------------------------------------------| - |jdbc-driver |e.g. `com.mysql.jdbc.Driver` | - |jdbc-url |e.g. `jdbc:mysql://localhost:9030` | - |jdbc-user |The JDBC user name | - |jdbc-password|The JDBC password | + |Key |Description | + |-------------|---------------------------------------------------------------------| + |jdbc-driver |JDBC URL for connecting to the database. e.g. `com.mysql.jdbc.Driver`| + |jdbc-url |e.g. `jdbc:mysql://localhost:9030` | + |jdbc-user |The JDBC user name | + |jdbc-password|The JDBC password | + + + + +:::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](./manage-fileset-metadata-using-gravitino.md) to use the REST API for these operations. +::: + +###### 2. Type `fileset` + + + + Follow the [Hadoop catalog](./hadoop-catalog.md) document. + + + + + + +###### 3. Type `messaging` + + + + Follow the [Kafka catalog](./kafka-catalog.md) document. + + + + | Key | Description | + | ----------------- | ----------------------------------------------------------------------------------------- | + | bootstrap.servers | The 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](assets/webui/created-catalog.png) +![created-catalog](./assets/webui/created-catalog.png) #### Show catalog details @@ -248,7 +286,7 @@ Clicking on the action icon in the tab You can see the detailed information of this catalog in the drawer component on the right. -![show-catalog-details](assets/webui/show-catalog-details.png) +![show-catalog-details](./assets/webui/show-catalog-details.png) #### Edit catalog @@ -256,7 +294,7 @@ Clicking on the action icon