UI navigation improvements (#6)

* WIP: modifications in Events.tsx file * Add PageSizeSelector component and improve responsiveness of Datasets, Jobs, and Events components * refactor function handlerPageSizeChange * Add PageSizeSelector component and improve responsiveness of Datasets, Jobs, and Events components * Correct pagination offsets * Correct pagination offsets events refresh * Correct pagination offsets and improve layout in Events component * Set Compact Nodes as default in ActionBar component
nubank · Nov 11, 2024 · f400525 · f400525
1 parent 476333b
commit f400525
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 89 deletions.
diff --git a/web/src/components/App.tsx b/web/src/components/App.tsx
@@ -59,7 +59,7 @@ const App = (): ReactElement => {
                 <CssBaseline />
                 <Box ml={'80px'}>
                   <Sidenav />
-                  <Container maxWidth={'lg'} disableGutters={true}>
+                  <Container maxWidth={'xl'} disableGutters={true}>
                     <Header />
                   </Container>
                   <Routes>

diff --git a/web/src/components/core/text/MqText.tsx b/web/src/components/core/text/MqText.tsx
@@ -12,6 +12,7 @@ import { useTheme } from '@emotion/react'
 import Link from '@mui/material/Link'
 
 interface OwnProps {
+  zoomString?: boolean
   heading?: boolean
   subheading?: boolean
   bold?: boolean
@@ -40,6 +41,7 @@ interface OwnProps {
 type MqTextProps = OwnProps
 
 const MqText: React.FC<MqTextProps> = ({
+  zoomString,
   heading,
   subheading,
   bold,
@@ -76,6 +78,12 @@ const MqText: React.FC<MqTextProps> = ({
       color: theme.palette.common.white,
       fontWeight: 400,
     },
+    zoomString: {
+      '@media (min-width: 1900px)': {
+        // fontSize: '1.500rem',
+        lineHeight: '1.4',
+      },
+    },
     inline: {
       display: 'inline',
     },
@@ -142,6 +150,7 @@ const MqText: React.FC<MqTextProps> = ({
 
   const conditionalClasses = Object.assign(
     {},
+    zoomString ? classesObject.zoomString : {},
     subdued ? classesObject.subdued : {},
     bold ? classesObject.bold : {},
     label ? classesObject.label : {},

diff --git a/web/src/components/paging/PageSizeSelector.tsx b/web/src/components/paging/PageSizeSelector.tsx
@@ -0,0 +1,46 @@
+import { Button, Menu, MenuItem } from '@mui/material'
+import React, { useState } from 'react'
+
+type PageSizeSelectorProps = {
+  onChange: (pageSize: number) => void
+  initialPageSize?: number
+}
+
+const PAGE_OPTIONS = [20, 50, 100]
+
+const PageSizeSelector: React.FC<PageSizeSelectorProps> = ({ onChange, initialPageSize = 20 }) => {
+  const [pageSize, setPageSize] = useState(initialPageSize)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuItemClick = (option: number) => {
+    setPageSize(option)
+    onChange(option)
+    setAnchorEl(null)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <Button variant='outlined' color='primary' onClick={handleButtonClick}>
+        Items per page: {pageSize}
+      </Button>
+
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        {PAGE_OPTIONS.map((option) => (
+          <MenuItem key={option} onClick={() => handleMenuItemClick(option)}>
+            {option} items per page
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}
+
+export default PageSizeSelector
diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
@@ -40,7 +40,8 @@ import MqPaging from '../../components/paging/MqPaging'
 import MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
 import NamespaceSelect from '../../components/namespace-select/NamespaceSelect'
-import React from 'react'
+import PageSizeSelector from '../../components/paging/PageSizeSelector'
+import React, { useState } from 'react'
 
 interface StateProps {
   datasets: Dataset[]
@@ -61,7 +62,6 @@ interface DispatchProps {
 
 type DatasetsProps = StateProps & DispatchProps
 
-const PAGE_SIZE = 20
 const DATASET_HEADER_HEIGHT = 64
 
 const Datasets: React.FC<DatasetsProps> = ({
@@ -77,14 +77,16 @@ const Datasets: React.FC<DatasetsProps> = ({
     page: 0,
   }
   const [state, setState] = React.useState<DatasetsState>(defaultState)
+  const [pageSize, setPageSize] = useState(20)
+  const [currentPage, setCurrentPage] = useState(0)
 
   const theme = createTheme(useTheme())
 
   React.useEffect(() => {
     if (selectedNamespace) {
-      fetchDatasets(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
+      fetchDatasets(selectedNamespace, pageSize, currentPage * pageSize)
     }
-  }, [selectedNamespace, state.page])
+  }, [selectedNamespace, pageSize, currentPage])
 
   React.useEffect(() => {
     return () => {
@@ -93,18 +95,33 @@ const Datasets: React.FC<DatasetsProps> = ({
     }
   }, [])
 
+  const handlePageSizeChange = (newPageSize: number) => {
+    const newCurrentPage = Math.floor((currentPage * pageSize) / newPageSize)
+    setPageSize(newPageSize)
+    setCurrentPage(newCurrentPage)
+
+    fetchDatasets(selectedNamespace || '', newPageSize, newCurrentPage * newPageSize)
+  }
+
   const handleClickPage = (direction: 'prev' | 'next') => {
-    const directionPage = direction === 'next' ? state.page + 1 : state.page - 1
+    let directionPage = direction === 'next' ? currentPage + 1 : currentPage - 1
 
-    fetchDatasets(selectedNamespace || '', PAGE_SIZE, directionPage * PAGE_SIZE)
+    // Impede que a página fique negativa
+    if (directionPage < 0) {
+      directionPage = 0
+    }
+
+    setCurrentPage(directionPage)
+
+    fetchDatasets(selectedNamespace || '', pageSize, directionPage * pageSize)
     // reset page scroll
     window.scrollTo(0, 0)
     setState({ ...state, page: directionPage })
   }
 
   const i18next = require('i18next')
   return (
-    <Container maxWidth={'lg'} disableGutters>
+    <Container maxWidth={'xl'} disableGutters>
       <Box p={2} display={'flex'} justifyContent={'space-between'} alignItems={'center'}>
         <Box display={'flex'}>
           <MqText heading>{i18next.t('datasets_route.heading')}</MqText>
@@ -128,7 +145,7 @@ const Datasets: React.FC<DatasetsProps> = ({
               size={'small'}
               onClick={() => {
                 if (selectedNamespace) {
-                  fetchDatasets(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
+                  fetchDatasets(selectedNamespace, pageSize, state.page * pageSize)
                 }
               }}
             >
@@ -152,7 +169,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                     size={'small'}
                     onClick={() => {
                       if (selectedNamespace) {
-                        fetchDatasets(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
+                        fetchDatasets(selectedNamespace, pageSize, state.page * pageSize)
                       }
                     }}
                   >
@@ -163,7 +180,12 @@ const Datasets: React.FC<DatasetsProps> = ({
             </Box>
           ) : (
             <>
-              <Table size='small'>
+              <Table
+                sx={{
+                  marginBottom: theme.spacing(2),
+                }}
+                size='small'
+              >
                 <TableHead>
                   <TableRow>
                     <TableCell key={i18next.t('datasets_route.name_col')} align='left'>
@@ -204,7 +226,7 @@ const Datasets: React.FC<DatasetsProps> = ({
                                 dataset.name
                               )}`}
                             >
-                              {truncateText(dataset.name, 40)}
+                              {truncateText(dataset.name, 170)}
                             </MqText>
                           </TableCell>
                           <TableCell align='left'>
@@ -253,13 +275,22 @@ const Datasets: React.FC<DatasetsProps> = ({
                     })}
                 </TableBody>
               </Table>
-              <MqPaging
-                pageSize={PAGE_SIZE}
-                currentPage={state.page}
-                totalCount={totalCount}
-                incrementPage={() => handleClickPage('next')}
-                decrementPage={() => handleClickPage('prev')}
-              />
+
+              <Box
+                display='flex'
+                alignItems='center'
+                justifyContent='flex-end'
+                sx={{ marginTop: 2, marginLeft: 2 }}
+              >
+                <MqPaging
+                  pageSize={pageSize}
+                  currentPage={currentPage}
+                  totalCount={totalCount}
+                  incrementPage={() => handleClickPage('next')}
+                  decrementPage={() => handleClickPage('prev')}
+                />
+                <PageSizeSelector onChange={handlePageSizeChange} />
+              </Box>
             </>
           )}
         </>