(incubator-paimon-webui) branch main updated: [Feature] Support management of snapshot metadata fetch data (#121)

[nicholasjiang]

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 f4bba71  [Feature] Support management of snapshot metadata fetch data 
(#121)
f4bba71 is described below

commit f4bba71485e48e4693449b8f28daa66aa62d1a92
Author: xiaomo <wegi...@gmail.com>
AuthorDate: Fri Dec 15 18:04:30 2023 +0800

    [Feature] Support management of snapshot metadata fetch data (#121)
---
 paimon-web-ui-new/src/api/models/catalog/index.ts  |  4 +-
 .../views/metadata/components/snapshot/index.tsx   | 44 +++++-----------------
 2 files changed, 12 insertions(+), 36 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 e4bfe4a..bb284c4 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, Schema, Manifest, TableQuery } from 
'./types'
+import type { Catalog, Database, Table, Schema, Manifest, Snapshot, TableQuery 
} from './types'
 import type { ResponseOptions } from '@/api/types'
 
 export * from './types'
@@ -78,7 +78,7 @@ export const getDataFile = () => {
  * # Get snapshot
  */
 export const getSnapshot = () => {
-  return httpRequest.createHooks!<Table, any[]>({
+  return httpRequest.createHooks!<ResponseOptions<Snapshot[]>, Snapshot[]>({
     url: '/metadata/query/snapshot',
     method: 'post',
   })
diff --git a/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx 
b/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
index af7e54d..b909820 100644
--- a/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/snapshot/index.tsx
@@ -16,42 +16,16 @@ specific language governing permissions and limitations
 under the License. */
 
 import { type DataTableColumns } from 'naive-ui'
+import dayjs from 'dayjs'
 
-import { getSnapshot } from '@/api/models/catalog'
-
-type RowData = {
-  snapshotId: number
-  schemaId: number
-  commitIdentifier: number
-  commitKind: string
-  commitTime: string
-}
-
+import { getSnapshot, type Snapshot } from '@/api/models/catalog'
 
 export default defineComponent({
   name: 'MetadataSnapshot',
   setup() {
-    const { t } = useLocaleHooks()
-    const [, useSnapshot, { loading }] = getSnapshot()
+    const [snapshots, useSnapshot, { loading }] = getSnapshot()
 
-    const data: RowData[] = [
-      {
-        snapshotId: 0,
-        schemaId: 2,
-        commitIdentifier: 3,
-        commitKind: 'APPEND',
-        commitTime: '2023-10-30 10:00:00'
-      },
-      {
-        snapshotId: 1,
-        schemaId: 1,
-        commitIdentifier: 1,
-        commitKind: 'APPEND',
-        commitTime: '2023-10-28 11:08:14'
-      },
-    ]
-
-    const columns: DataTableColumns<RowData> = [
+    const columns: DataTableColumns<Snapshot> = [
       {
         title: 'Snapshot ID',
         key: 'snapshotId'
@@ -71,7 +45,10 @@ export default defineComponent({
       },
       {
         title: 'Commit Time',
-        key: 'commitTime'
+        key: 'commitTime',
+        render: (row) => {
+          return dayjs(row.commitTime).format('YYYY-MM-DD HH:mm:ss')
+        }
       }
     ]
 
@@ -88,9 +65,8 @@ export default defineComponent({
 
     return {
       columns,
-      data,
+      snapshots,
       loading,
-      t,
     }
   },
   render() {
@@ -99,7 +75,7 @@ export default defineComponent({
         <n-spin show={this.loading}>
           <n-data-table
             columns={this.columns}
-            data={this.data}
+            data={this.snapshots?.data || []}
           />
         </n-spin>
       </n-card>