Paging unification. (#2832)

Signed-off-by: phix <[email protected]> Co-authored-by: phix <[email protected]> Co-authored-by: Willy Lulciuc <[email protected]>
MarquezProject · Jun 5, 2024 · bd07b9b · bd07b9b
1 parent 8bfea3f
commit bd07b9b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 112 deletions.
diff --git a/web/src/components/paging/MqPaging.tsx b/web/src/components/paging/MqPaging.tsx
@@ -0,0 +1,63 @@
+// Copyright 2018-2023 contributors to the Marquez project
+// SPDX-License-Identifier: Apache-2.0
+
+import { Box } from '@mui/material'
+import { ChevronLeftRounded, ChevronRightRounded } from '@mui/icons-material'
+import { theme } from '../../helpers/theme'
+import IconButton from '@mui/material/IconButton'
+import MQTooltip from '../core/tooltip/MQTooltip'
+import MqText from '../core/text/MqText'
+import React, { FunctionComponent } from 'react'
+
+const i18next = require('i18next')
+
+interface Props {
+  pageSize: number
+  currentPage: number
+  totalCount: number
+  incrementPage: (page: number) => void
+  decrementPage: (page: number) => void
+}
+
+const MqPaging: FunctionComponent<Props> = (props) => {
+  const { pageSize, currentPage, incrementPage, decrementPage, totalCount } = props
+  return (
+    <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'} mb={2}>
+      <MqText subdued>
+        <>
+          {pageSize * currentPage + 1} - {Math.min(pageSize * (currentPage + 1), totalCount)} of{' '}
+          {totalCount}
+        </>
+      </MqText>
+      <MQTooltip title={i18next.t('events_route.previous_page')}>
+        <span>
+          <IconButton
+            sx={{
+              marginLeft: theme.spacing(2),
+            }}
+            color='primary'
+            disabled={currentPage === 0}
+            onClick={() => decrementPage(1)}
+            size='small'
+          >
+            <ChevronLeftRounded />
+          </IconButton>
+        </span>
+      </MQTooltip>
+      <MQTooltip title={i18next.t('events_route.next_page')}>
+        <span>
+          <IconButton
+            color='primary'
+            onClick={() => incrementPage(1)}
+            size='small'
+            disabled={currentPage === Math.ceil(totalCount / pageSize) - 1}
+          >
+            <ChevronRightRounded />
+          </IconButton>
+        </span>
+      </MQTooltip>
+    </Box>
+  )
+}
+
+export default MqPaging
diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
@@ -13,12 +13,12 @@ import {
   TableRow,
   createTheme,
 } from '@mui/material'
-import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
 import { Dataset } from '../../types/api'
 import { HEADER_HEIGHT } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
 import { Nullable } from '../../types/util/Nullable'
+import { Refresh } from '@mui/icons-material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import {
@@ -35,6 +35,7 @@ import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqEmpty from '../../components/core/empty/MqEmpty'
+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'
@@ -251,41 +252,13 @@ const Datasets: React.FC<DatasetsProps> = ({
                     })}
                 </TableBody>
               </Table>
-              <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'} mb={2}>
-                <MqText subdued>
-                  <>
-                    {PAGE_SIZE * state.page + 1} -{' '}
-                    {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
-                  </>
-                </MqText>
-                <MQTooltip title={i18next.t('events_route.previous_page')}>
-                  <span>
-                    <IconButton
-                      sx={{
-                        marginLeft: theme.spacing(2),
-                      }}
-                      color='primary'
-                      disabled={state.page === 0}
-                      onClick={() => handleClickPage('prev')}
-                      size='large'
-                    >
-                      <ChevronLeftRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-                <MQTooltip title={i18next.t('events_route.next_page')}>
-                  <span>
-                    <IconButton
-                      color='primary'
-                      onClick={() => handleClickPage('next')}
-                      size='large'
-                      disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1}
-                    >
-                      <ChevronRightRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-              </Box>
+              <MqPaging
+                pageSize={PAGE_SIZE}
+                currentPage={state.page}
+                totalCount={totalCount}
+                incrementPage={() => handleClickPage('next')}
+                decrementPage={() => handleClickPage('prev')}
+              />
             </>
           )}
         </>

diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
@@ -13,11 +13,11 @@ import {
   TableRow,
   createTheme,
 } from '@mui/material'
-import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
 import { Event } from '../../types/api'
 import { HEADER_HEIGHT } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
+import { Refresh } from '@mui/icons-material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { eventTypeColor } from '../../helpers/nodes'
@@ -35,6 +35,7 @@ import MqCopy from '../../components/core/copy/MqCopy'
 import MqDatePicker from '../../components/core/date-picker/MqDatePicker'
 import MqEmpty from '../../components/core/empty/MqEmpty'
 import MqJsonView from '../../components/core/json-view/MqJsonView'
+import MqPaging from '../../components/paging/MqPaging'
 import MqStatus from '../../components/core/status/MqStatus'
 import MqText from '../../components/core/text/MqText'
 import React, { useEffect, useRef } from 'react'
@@ -344,41 +345,13 @@ const Events: React.FC<EventsProps> = ({
                   })}
                 </TableBody>
               </Table>
-              <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'} mb={2}>
-                <MqText subdued>
-                  <>
-                    {PAGE_SIZE * state.page + 1} -{' '}
-                    {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
-                  </>
-                </MqText>
-                <MQTooltip title={i18next.t('events_route.previous_page')}>
-                  <span>
-                    <IconButton
-                      sx={{
-                        marginLeft: theme.spacing(2),
-                      }}
-                      color='primary'
-                      disabled={state.page === 0}
-                      onClick={() => handleClickPage('prev')}
-                      size='large'
-                    >
-                      <ChevronLeftRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-                <MQTooltip title={i18next.t('events_route.next_page')}>
-                  <span>
-                    <IconButton
-                      color='primary'
-                      onClick={() => handleClickPage('next')}
-                      size='large'
-                      disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1}
-                    >
-                      <ChevronRightRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-              </Box>
+              <MqPaging
+                pageSize={PAGE_SIZE}
+                currentPage={state.page}
+                totalCount={totalCount}
+                incrementPage={() => handleClickPage('next')}
+                decrementPage={() => handleClickPage('prev')}
+              />
             </>
           )}
         </>

diff --git a/web/src/routes/jobs/Jobs.tsx b/web/src/routes/jobs/Jobs.tsx
@@ -11,26 +11,25 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  createTheme,
 } from '@mui/material'
-import { ChevronLeftRounded, ChevronRightRounded, Refresh } from '@mui/icons-material'
 import { HEADER_HEIGHT } from '../../helpers/theme'
 import { IState } from '../../store/reducers'
 import { Job } from '../../types/api'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
 import { Nullable } from '../../types/util/Nullable'
+import { Refresh } from '@mui/icons-material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { encodeNode, runStateColor } from '../../helpers/nodes'
 import { fetchJobs, resetJobs } from '../../store/actionCreators'
 import { formatUpdatedAt } from '../../helpers'
 import { stopWatchDuration } from '../../helpers/time'
-import { useTheme } from '@emotion/react'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress/CircularProgress'
 import IconButton from '@mui/material/IconButton'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqEmpty from '../../components/core/empty/MqEmpty'
+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'
@@ -72,8 +71,6 @@ const Jobs: React.FC<JobsProps> = ({
   }
   const [state, setState] = React.useState<JobsState>(defaultState)
 
-  const theme = createTheme(useTheme())
-
   React.useEffect(() => {
     if (selectedNamespace) {
       fetchJobs(selectedNamespace, PAGE_SIZE, state.page * PAGE_SIZE)
@@ -215,41 +212,13 @@ const Jobs: React.FC<JobsProps> = ({
                   })}
                 </TableBody>
               </Table>
-              <Box display={'flex'} justifyContent={'flex-end'} alignItems={'center'} mb={2}>
-                <MqText subdued>
-                  <>
-                    {PAGE_SIZE * state.page + 1} -{' '}
-                    {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount}
-                  </>
-                </MqText>
-                <MQTooltip title={i18next.t('events_route.previous_page')}>
-                  <span>
-                    <IconButton
-                      sx={{
-                        marginLeft: theme.spacing(2),
-                      }}
-                      color='primary'
-                      disabled={state.page === 0}
-                      onClick={() => handleClickPage('prev')}
-                      size='large'
-                    >
-                      <ChevronLeftRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-                <MQTooltip title={i18next.t('events_route.next_page')}>
-                  <span>
-                    <IconButton
-                      color='primary'
-                      onClick={() => handleClickPage('next')}
-                      size='large'
-                      disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1}
-                    >
-                      <ChevronRightRounded />
-                    </IconButton>
-                  </span>
-                </MQTooltip>
-              </Box>
+              <MqPaging
+                pageSize={PAGE_SIZE}
+                currentPage={state.page}
+                totalCount={totalCount}
+                incrementPage={() => handleClickPage('next')}
+                decrementPage={() => handleClickPage('prev')}
+              />
             </>
           )}
         </>