(paimon-webui) branch main updated: [Improvement] Align field names displayed on the DataFile page with the backend interface (#298)

[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/paimon-webui.git


The following commit(s) were added to refs/heads/main by this push:
     new 9798894e [Improvement] Align field names displayed on the DataFile 
page with the backend interface (#298)
9798894e is described below

commit 9798894e31e8e8f9c234f1707b7c97541a2d273b
Author: s7monk <34889415+s7m...@users.noreply.github.com>
AuthorDate: Thu Jun 13 14:11:58 2024 +0800

    [Improvement] Align field names displayed on the DataFile page with the 
backend interface (#298)
---
 .../views/metadata/components/datafile/index.tsx   | 104 ++++++++++++++++++++-
 1 file changed, 100 insertions(+), 4 deletions(-)

diff --git a/paimon-web-ui/src/views/metadata/components/datafile/index.tsx 
b/paimon-web-ui/src/views/metadata/components/datafile/index.tsx
index 2518da96..6a3ba0e7 100644
--- a/paimon-web-ui/src/views/metadata/components/datafile/index.tsx
+++ b/paimon-web-ui/src/views/metadata/components/datafile/index.tsx
@@ -17,6 +17,7 @@ under the License. */
 
 import type { DataTableColumns } from 'naive-ui'
 
+import dayjs from 'dayjs'
 import { type Datafile, getDataFile } from '@/api/models/catalog'
 import { useCatalogStore } from '@/store/catalog'
 
@@ -27,25 +28,116 @@ export default defineComponent({
 
     const catalogStore = useCatalogStore()
 
+    function parseKeyValueStringToJsonString(dataStr: string) {
+      const result: { [key: string]: string } = {}
+      const cleanStr = dataStr.replace(/^\{|\}$/g, '')
+      const keyValuePairs = cleanStr.split(',')
+      keyValuePairs.forEach((pair) => {
+        const [key, value] = pair.split('=').map(item => item.trim())
+        result[key] = value
+      })
+      return JSON.stringify(result, null, 2)
+    }
+
     const columns: DataTableColumns<Datafile> = [
+      {
+        title: '#',
+        type: 'expand',
+        renderExpand: (row) => {
+          const nullValueJsonString = 
parseKeyValueStringToJsonString(row.nullValueCounts || '')
+          const minValueStatsJsonString = 
parseKeyValueStringToJsonString(row.minValueStats || '')
+          const maxValueStatsJsonString = 
parseKeyValueStringToJsonString(row.maxValueStats || '')
+
+          return (
+            <div>
+              <div>Null Value Counts: </div>
+              <pre>{nullValueJsonString}</pre>
+              <div>Min Value Stats: </div>
+              <pre>{minValueStatsJsonString}</pre>
+              <div>Max Value Stats: </div>
+              <pre>{maxValueStatsJsonString}</pre>
+            </div>
+          )
+        },
+      },
+      {
+        title: 'File Path',
+        key: 'filePath',
+        width: 420,
+      },
       {
         title: 'Partition',
         key: 'partition',
+        width: 120,
       },
       {
         title: 'Bucket',
         key: 'bucket',
-      },
-      {
-        title: 'File Path',
-        key: 'filePath',
+        width: 120,
       },
       {
         title: 'File Format',
         key: 'fileFormat',
+        width: 120,
+      },
+      {
+        title: 'SchemaId',
+        key: 'schemaId',
+        width: 120,
+      },
+      {
+        title: 'Level',
+        key: 'level',
+        width: 80,
+      },
+      {
+        title: 'Record Count',
+        key: 'recordCount',
+        width: 140,
+      },
+      {
+        title: 'File Size In Bytes',
+        key: 'fileSizeInBytes',
+        width: 160,
+      },
+      {
+        title: 'Min Key',
+        key: 'minKey',
+        width: 160,
+      },
+      {
+        title: 'Max Key',
+        key: 'maxKey',
+        width: 160,
+      },
+      {
+        title: 'Min Sequence Number',
+        key: 'minSequenceNumber',
+        width: 180,
+      },
+      {
+        title: 'Max Sequence Number',
+        key: 'maxSequenceNumber',
+        width: 180,
+      },
+      {
+        title: 'Creation Time',
+        key: 'creationTime',
+        width: 180,
+        render: (row) => {
+          return dayjs(row.creationTime).format('YYYY-MM-DD HH:mm:ss')
+        },
       },
     ]
 
+    const totalWidth = computed(() => {
+      const extraPixels = 60
+      return `${columns.reduce((sum, col) => {
+        const width = typeof col.width === 'number' ? col.width : 0
+        return sum + width
+      }, 0) + extraPixels}px`
+    })
+
     const onFetchData = async () => {
       useDataFile({
         params: catalogStore.currentTable,
@@ -60,6 +152,7 @@ export default defineComponent({
       columns,
       datafiles,
       loading,
+      totalWidth,
     }
   },
   render() {
@@ -67,8 +160,11 @@ export default defineComponent({
       <n-card>
         <n-spin show={this.loading}>
           <n-data-table
+            row-key={(rowData: Datafile) => rowData.filePath}
             columns={this.columns}
             data={this.datafiles || []}
+            max-height="calc(100vh - 280px)"
+            scroll-x={this.totalWidth}
           />
         </n-spin>
       </n-card>