From d75c2019091303fb0f68fd9ecfb5664c66323c9a Mon Sep 17 00:00:00 2001
From: Qian Xia <lauraxiaqian@gmail.com>
Date: Tue, 22 Oct 2024 14:29:23 +0800
Subject: [PATCH] [#5185] feature(ui): support paimon JDBC and hive backend in
 WEB UI (#5195)

### What changes were proposed in this pull request?
support paimon JDBC and hive backend in WEB UI
<img width="568" alt="image"
src="https://github.com/user-attachments/assets/f0b116e7-4f86-457d-8a52-efa7b30e508d">
<img width="557" alt="image"
src="https://github.com/user-attachments/assets/a835dc5a-8a37-4abc-96a8-b917600876a1">
<img width="593" alt="image"
src="https://github.com/user-attachments/assets/a5539a7c-cc35-4598-9ac9-8f5cf35e0384">

### Why are the changes needed?
N/A

Fix: #5185

### Does this PR introduce _any_ user-facing change?
N/A

### How was this patch tested?
manually
---
 .../rightContent/CreateCatalogDialog.js       | 10 ++++--
 web/web/src/lib/utils/initial.js              | 33 ++++++++++++++-----
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/web/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js b/web/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
index 95a5d645040..aa836886aeb 100644
--- a/web/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
+++ b/web/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js
@@ -179,7 +179,7 @@ const CreateCatalogDialog = props => {
     const parentField = innerProps.find(i => i.key === field.parentField)
 
     const check =
-      (parentField && parentField.value === field.hide) ||
+      (parentField && field.hide.includes(parentField.value)) ||
       (field.parentField === 'authentication.type' && parentField === undefined)
 
     return check
@@ -232,7 +232,7 @@ const CreateCatalogDialog = props => {
     if (
       propItems[0]?.key === 'catalog-backend' &&
       propItems[0]?.value === 'hive' &&
-      providerSelect === 'lakehouse-iceberg'
+      ['lakehouse-iceberg', 'lakehouse-paimon'].includes(providerSelect)
     ) {
       nextProps = propItems.filter(item => !['jdbc-driver', 'jdbc-user', 'jdbc-password'].includes(item.key))
     } else if (
@@ -278,7 +278,11 @@ const CreateCatalogDialog = props => {
           ...others
         } = prevProperties
 
-        if (catalogBackend && catalogBackend === 'hive' && providerSelect === 'lakehouse-iceberg') {
+        if (
+          catalogBackend &&
+          catalogBackend === 'hive' &&
+          ['lakehouse-iceberg', 'lakehouse-paimon'].includes(providerSelect)
+        ) {
           properties = {
             'catalog-backend': catalogBackend,
             uri: uri,
diff --git a/web/web/src/lib/utils/initial.js b/web/web/src/lib/utils/initial.js
index e916fcd5ef3..3517ecd2ecd 100644
--- a/web/web/src/lib/utils/initial.js
+++ b/web/web/src/lib/utils/initial.js
@@ -89,7 +89,7 @@ export const providers = [
         value: '',
         required: true,
         parentField: 'catalog-backend',
-        hide: 'hive',
+        hide: ['hive'],
         description: `"com.mysql.jdbc.Driver" or "com.mysql.cj.jdbc.Driver" for MySQL, "org.postgresql.Driver" for PostgreSQL`
       },
       {
@@ -97,14 +97,14 @@ export const providers = [
         value: '',
         required: true,
         parentField: 'catalog-backend',
-        hide: 'hive'
+        hide: ['hive']
       },
       {
         key: 'jdbc-password',
         value: '',
         required: true,
         parentField: 'catalog-backend',
-        hide: 'hive'
+        hide: ['hive']
       },
       {
         key: 'authentication.type',
@@ -121,7 +121,7 @@ export const providers = [
         required: true,
         description: 'The principal of the Kerberos authentication.',
         parentField: 'authentication.type',
-        hide: 'simple'
+        hide: ['simple']
       },
       {
         key: 'authentication.kerberos.keytab-uri',
@@ -129,7 +129,7 @@ export const providers = [
         required: true,
         description: 'The URI of The keytab for the Kerberos authentication.',
         parentField: 'authentication.type',
-        hide: 'simple'
+        hide: ['simple']
       }
     ]
   },
@@ -231,7 +231,8 @@ export const providers = [
         value: 'filesystem',
         defaultValue: 'filesystem',
         required: true,
-        description: 'Only supports "filesystem" now.'
+        description: 'Only supports "filesystem" now.',
+        select: ['filesystem', 'hive', 'jdbc']
       },
       {
         key: 'uri',
@@ -240,7 +241,7 @@ export const providers = [
         description:
           'e.g. thrift://127.0.0.1:9083 or jdbc:postgresql://127.0.0.1:5432/db_name or jdbc:mysql://127.0.0.1:3306/metastore_db',
         parentField: 'catalog-backend',
-        hide: 'filesystem'
+        hide: ['filesystem']
       },
       {
         key: 'warehouse',
@@ -248,6 +249,20 @@ export const providers = [
         required: true,
         description: 'e.g. file:///user/hive/warehouse-paimon/ or hdfs://namespace/hdfs/path'
       },
+      {
+        key: 'jdbc-user',
+        value: '',
+        required: true,
+        parentField: 'catalog-backend',
+        hide: ['hive', 'filesystem']
+      },
+      {
+        key: 'jdbc-password',
+        value: '',
+        required: true,
+        parentField: 'catalog-backend',
+        hide: ['hive', 'filesystem']
+      },
       {
         key: 'authentication.type',
         value: 'simple',
@@ -263,7 +278,7 @@ export const providers = [
         required: true,
         description: 'The principal of the Kerberos authentication.',
         parentField: 'authentication.type',
-        hide: 'simple'
+        hide: ['simple']
       },
       {
         key: 'authentication.kerberos.keytab-uri',
@@ -271,7 +286,7 @@ export const providers = [
         required: true,
         description: 'The URI of The keytab for the Kerberos authentication.',
         parentField: 'authentication.type',
-        hide: 'simple'
+        hide: ['simple']
       }
     ]
   },