[#1734] fix(web): fix the metalake sorting (#1790)

### What changes were proposed in this pull request? Fix the metalake sorting. 1. Sort by Date <img width="1039" alt="image" src="https://github.com/datastrato/gravitino/assets/17310559/e1eda7e8-3a8d-473b-a04e-6d53a85a008b"> <img width="1041" alt="image" src="https://github.com/datastrato/gravitino/assets/17310559/3c94179b-f2db-486a-8dca-e73ddb30b23f"> 2. Full match <img width="1038" alt="image" src="https://github.com/datastrato/gravitino/assets/17310559/eee745b6-6668-4c6e-9ebf-7751b75c44e0"> ### Why are the changes needed? Fix: #1734 Fix: #1688 ### Does this PR introduce _any_ user-facing change? N/A ### How was this patch tested? N/A
apache · Jan 30, 2024 · 97e068c · 97e068c
1 parent ae6522e
commit 97e068c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/web/app/ui/MetalakeList.js b/web/app/ui/MetalakeList.js
@@ -3,12 +3,12 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import { useEffect, useCallback, useState } from 'react'
+import { useEffect, useCallback, useState, Fragment } from 'react'
 
 import Link from 'next/link'
 
-import { Box, Grid, Card, IconButton, Typography, Tooltip } from '@mui/material'
-import { DataGrid } from '@mui/x-data-grid'
+import { Box, Grid, Card, IconButton, Typography, Portal, Tooltip } from '@mui/material'
+import { DataGrid, GridToolbar } from '@mui/x-data-grid'
 
 import Icon from '@/components/Icon'
 
@@ -21,6 +21,20 @@ import DetailsDrawer from '@/components/DetailsDrawer'
 import CreateMetalakeDialog from './CreateMetalakeDialog'
 import ConfirmDeleteDialog from '@/components/ConfirmDeleteDialog'
 
+function TableToolbar(props) {
+  return (
+    <>
+      <Fragment>
+        <Portal container={() => document.getElementById('filter-panel')}>
+          <Box className={`twc-flex twc-w-full twc-justify-between twc-hidden`}>
+            <GridToolbar {...props} />
+          </Box>
+        </Portal>
+      </Fragment>
+    </>
+  )
+}
+
 const MetalakeList = () => {
   const dispatch = useAppDispatch()
   const store = useAppSelector(state => state.metalakes)
@@ -72,7 +86,14 @@ const MetalakeList = () => {
   }, [dispatch])
 
   useEffect(() => {
-    const filteredData = store.metalakes.filter(i => i.name.toLowerCase().includes(value.toLowerCase()))
+    const filteredData = store.metalakes
+      .filter(i => i.name.toLowerCase().includes(value.toLowerCase()))
+      .sort((a, b) => {
+        if (a.name.toLowerCase() === value.toLowerCase()) return -1
+        if (b.name.toLowerCase() === value.toLowerCase()) return 1
+
+        return 0
+      })
 
     dispatch(setFilteredMetalakes(filteredData))
   }, [dispatch, store.metalakes, value])
@@ -81,14 +102,16 @@ const MetalakeList = () => {
     {
       flex: 0.2,
       minWidth: 230,
+      disableColumnMenu: true,
+      filterable: true,
       field: 'name',
       headerName: 'Name',
       renderCell: ({ row }) => {
         const { name } = row
 
         return (
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Tooltip title={name} placement='top'>
+            <Tooltip title={name} placement='right'>
               <Typography
                 noWrap
                 component={Link}
@@ -113,6 +136,7 @@ const MetalakeList = () => {
     {
       flex: 0.15,
       minWidth: 150,
+      disableColumnMenu: true,
       field: 'createdBy',
       headerName: 'Created By',
       renderCell: ({ row }) => {
@@ -125,8 +149,10 @@ const MetalakeList = () => {
     },
     {
       flex: 0.15,
-      field: 'createdAt',
       minWidth: 150,
+      disableColumnMenu: true,
+      valueGetter: params => `${params.row.audit?.createTime}`,
+      field: 'createdAt',
       headerName: 'Created At',
       renderCell: ({ row }) => {
         return (
@@ -140,6 +166,7 @@ const MetalakeList = () => {
       flex: 0.1,
       minWidth: 90,
       sortable: false,
+      disableColumnMenu: true,
       field: 'actions',
       headerName: 'Actions',
       renderCell: ({ row }) => (
@@ -187,9 +214,18 @@ const MetalakeList = () => {
             setDialogType={setDialogType}
           />
           <DataGrid
+            disableColumnSelector
+            disableDensitySelector
+            slots={{ toolbar: TableToolbar }}
+            slotProps={{
+              toolbar: {
+                printOptions: { disableToolbarButton: true },
+                csvOptions: { disableToolbarButton: true }
+              }
+            }}
             sx={{
               '& .MuiDataGrid-virtualScroller': {
-                height: store.filteredMetalakes.length === 0 ? 100 : 'auto'
+                minHeight: 36
               },
               maxHeight: 'calc(100vh - 23.2rem)'
             }}

diff --git a/web/app/ui/TableHeader.js b/web/app/ui/TableHeader.js
@@ -17,10 +17,9 @@ const TableHeader = props => {
   }
 
   return (
-    <Box className={'twc-px-5 twc-pb-4 twc-pt-4 twc-flex twc-flex-wrap twc-items-center twc-justify-end'}>
-      <Box className={'twc-flex twc-items-center twc-h-full'}>
-        <TextField size='small' value={value} placeholder='Filter' onChange={e => handleFilter(e.target.value)} />
-      </Box>
+    <Box className={'twc-pr-5 twc-pb-4 twc-pt-4 twc-flex twc-flex-wrap twc-items-center twc-justify-end'}>
+      <Box className={'twc-flex twc-items-center twc-flex-1 twc-h-full'} id='filter-panel' />
+      <TextField size='small' value={value} placeholder='Query Name' onChange={e => handleFilter(e.target.value)} />
       <Button
         className={'twc-ml-2'}
         variant='contained'