(incubator-paimon-webui) branch main updated: [Feature] Support MetaData MenuTree load table list (#111)

[ni...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git


The following commit(s) were added to refs/heads/main by this push:
     new b486bf8  [Feature] Support MetaData MenuTree load table list (#111)
b486bf8 is described below

commit b486bf8ce2b8ce9408ebf8849110760b2f67b71b
Author: xiaomo <we...@gmail.com>
AuthorDate: Wed Dec 6 19:55:34 2023 +0800

    [Feature] Support MetaData MenuTree load table list (#111)
---
 paimon-web-ui-new/src/api/models/catalog/index.ts  |  8 ++++-
 .../src/api/models/catalog/interface.ts            |  7 +++-
 paimon-web-ui-new/src/store/catalog/index.ts       | 41 ++++++++++------------
 .../views/metadata/components/menu-tree/index.tsx  | 14 ++++++--
 4 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/paimon-web-ui-new/src/api/models/catalog/index.ts b/paimon-web-ui-new/src/api/models/catalog/index.ts
index 717ab6e..5f70f63 100644
--- a/paimon-web-ui-new/src/api/models/catalog/index.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/index.ts
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
 under the License. */
 
 import httpRequest from '@/api/request'
-import type { Catalog, Database, Table } from './interface'
+import type { Catalog, Database, Table, TableQuery } from './interface'
 import type { ResponseOptions } from '@/api/types'
 
 export * from './interface'
@@ -37,6 +37,12 @@ export const getDatabasesByCatalogId = (id: number) => {
   return httpRequest.get<unknown, ResponseOptions<Database[]>>(`/database/list?catalogId=${id}`)
 }
 
+/**
+ * # Get table by catalog id and database name
+ */
+export const getTables = (params: TableQuery) => {
+  return httpRequest.post<TableQuery, ResponseOptions<Table[]>>(`/table/list`, params)
+}
 
 /**
  * # Get schema
diff --git a/paimon-web-ui-new/src/api/models/catalog/interface.ts b/paimon-web-ui-new/src/api/models/catalog/interface.ts
index 277613d..1965d4c 100644
--- a/paimon-web-ui-new/src/api/models/catalog/interface.ts
+++ b/paimon-web-ui-new/src/api/models/catalog/interface.ts
@@ -37,5 +37,10 @@ export interface Table {
   catalogId: number;
   catalogName: string;
   databaseName: string;
-  tableName?: string;
+  name?: string;
+}
+
+export interface TableQuery {
+  catalogId: number;
+  databaseName: string;
 }
diff --git a/paimon-web-ui-new/src/store/catalog/index.ts b/paimon-web-ui-new/src/store/catalog/index.ts
index cf99f00..729aaab 100644
--- a/paimon-web-ui-new/src/store/catalog/index.ts
+++ b/paimon-web-ui-new/src/store/catalog/index.ts
@@ -19,8 +19,8 @@ import { NIcon, type TreeOption } from 'naive-ui'
 import { FileTrayOutline, FolderOutline } from '@vicons/ionicons5'
 
 
-import { getAllCatalogs, getDatabasesByCatalogId } from '@/api/models/catalog'
-import type { Catalog, Database } from '@/api/models/catalog'
+import { getAllCatalogs, getDatabasesByCatalogId, getTables } from '@/api/models/catalog'
+import type { Catalog, Database, Table, TableQuery } from '@/api/models/catalog'
 
 export interface CatalogState {
   catalogs: TreeOption[];
@@ -51,28 +51,10 @@ export const useCatalogStore = defineStore('catalog', {
 
       return Promise.resolve(transformDatabase(res.data))
     },
-    getTablesByDataBaseId(id: number): Promise<any> {
-      // TODO: fetch table list by catalog id and database name
-      // Waiting for the deployment of the back end interface
+    async getTablesByDataBaseId(params: TableQuery): Promise<TreeOption[]> {
+      const res = await getTables(params)
 
-      // const [, useDatabaseByCatalogId] = getDatabasesByCatalogId(id)
-      // return useDatabaseByCatalogId()
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([
-            {
-              label: 'table',
-              type: 'table',
-              key: ++id,
-              isLeaf: true,
-              prefix: () =>
-                h(NIcon, null, {
-                  default: () => h(FileTrayOutline)
-                }),
-            }
-          ])
-        }, 1000)
-      })
+      return Promise.resolve(transformTable(res.data))
     }
   }
 })
@@ -102,3 +84,16 @@ const transformDatabase = (databases: Database[]): TreeOption[] => {
       }),
   }))
 }
+
+const transformTable = (tables: Table[]): TreeOption[] => {
+  return tables.map(table => ({
+    label: table.name,
+    type: 'table',
+    key: `${table.catalogId} ${table.databaseName} ${table.name}`,
+    isLeaf: true,
+    prefix: () =>
+      h(NIcon, null, {
+        default: () => h(FileTrayOutline)
+      }),
+  }))
+}
diff --git a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
index 196bc23..509df56 100644
--- a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.tsx
@@ -86,10 +86,18 @@ export default defineComponent({
     onMounted(catalogStore.getAllCatalogs)
 
     const onLoadMenu = async (node: TreeOption) => {
-      const loadFn = node.type === 'catalog' ? catalogStore.getDatabasesById : catalogStore.getTablesByDataBaseId
-      const children = await loadFn(node.key as number);
+      if (node.type === 'catalog') {
+        node.children = await catalogStore.getDatabasesById(node.key as number)
+      } 
+      else {
+        const [catalogId, databaseName] = (node.key as string)?.split(' ') || []
+        const params = {
+          catalogId: Number(catalogId),
+          databaseName
+        }
+        node.children = await catalogStore.getTablesByDataBaseId(params)
+      }
 
-      node.children = [...children]
       return Promise.resolve()
     }