(gravitino) branch main updated: [#8987] web(UI): support pagination for fileset files list (#8988)

[jshao]

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

jshao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/gravitino.git


The following commit(s) were added to refs/heads/main by this push:
     new 35a2dc1183 [#8987] web(UI): support pagination for fileset files list 
(#8988)
35a2dc1183 is described below

commit 35a2dc1183ffd8dcee4b7bc6d99c8fb962720dab
Author: Qian Xia <q...@datastrato.com>
AuthorDate: Mon Nov 3 10:58:45 2025 +0800

    [#8987] web(UI): support pagination for fileset files list (#8988)
    
    ### What changes were proposed in this pull request?
    support pagination for fileset files list
    <img width="2908" height="1700" alt="image"
    
src="https://github.com/user-attachments/assets/62a7ee28-03bd-4144-a43e-d8b0f03a0d99";
    />
    
    
    ### Why are the changes needed?
    N/A
    
    Fix: #8987
    
    ### Does this PR introduce _any_ user-facing change?
    N/A
    
    ### How was this patch tested?
    munually
---
 .../tabsContent/filesetView/FilesetView.js         | 42 +++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git 
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/filesetView/FilesetView.js
 
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/filesetView/FilesetView.js
index a16dc1f272..f9679da743 100644
--- 
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/filesetView/FilesetView.js
+++ 
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/filesetView/FilesetView.js
@@ -19,7 +19,7 @@
 
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useSearchParams } from 'next/navigation'
 import { useAppDispatch, useAppSelector } from '@/lib/hooks/useStore'
 import { getFilesetFiles } from '@/lib/store/metalakes'
@@ -32,6 +32,8 @@ import {
   Paper,
   Table,
   TableBody,
+  TableFooter,
+  TablePagination,
   TableCell,
   TableContainer,
   TableHead,
@@ -55,6 +57,26 @@ const FilesetView = () => {
   const [currentPath, setCurrentPath] = useState('/')
   const [pathHistory, setPathHistory] = useState(['/'])
 
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(10)
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage)
+  }
+
+  const handleChangeRowsPerPage = event => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0)
+  }
+
+  const paginatedFiles = useMemo(() => {
+    if (!store.filesetFiles) return []
+    const startIndex = page * rowsPerPage
+    const endIndex = startIndex + rowsPerPage
+
+    return store.filesetFiles.slice(startIndex, endIndex)
+  }, [store.filesetFiles, page, rowsPerPage])
+
   useEffect(() => {
     if (metalake && catalog && schema && fileset) {
       dispatch(
@@ -146,7 +168,7 @@ const FilesetView = () => {
       </Box>
 
       <TableContainer component={Paper}>
-        <Table>
+        <Table size='small'>
           <TableHead>
             <TableRow>
               <TableCell>Name</TableCell>
@@ -156,8 +178,8 @@ const FilesetView = () => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {store.filesetFiles && store.filesetFiles.length > 0 ? (
-              store.filesetFiles.map((file, index) => (
+            {paginatedFiles && paginatedFiles.length > 0 ? (
+              paginatedFiles.map((file, index) => (
                 <TableRow
                   key={index}
                   hover
@@ -191,6 +213,18 @@ const FilesetView = () => {
               </TableRow>
             )}
           </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={[10, 25, 50, { value: -1, label: 'All' }]}
+                count={store.filesetFiles.length}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+              />
+            </TableRow>
+          </TableFooter>
         </Table>
       </TableContainer>
     </Box>