From bd07b9bd2fc9051600efd1578d1fbc659afd7133 Mon Sep 17 00:00:00 2001 From: Peter Hicks Date: Wed, 5 Jun 2024 09:47:50 -0700 Subject: [PATCH] Paging unification. (#2832) Signed-off-by: phix Co-authored-by: phix Co-authored-by: Willy Lulciuc --- web/src/components/paging/MqPaging.tsx | 63 ++++++++++++++++++++++++++ web/src/routes/datasets/Datasets.tsx | 45 ++++-------------- web/src/routes/events/Events.tsx | 45 ++++-------------- web/src/routes/jobs/Jobs.tsx | 49 ++++---------------- 4 files changed, 90 insertions(+), 112 deletions(-) create mode 100644 web/src/components/paging/MqPaging.tsx diff --git a/web/src/components/paging/MqPaging.tsx b/web/src/components/paging/MqPaging.tsx new file mode 100644 index 0000000000..c108eebbe6 --- /dev/null +++ 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) => { + const { pageSize, currentPage, incrementPage, decrementPage, totalCount } = props + return ( + + + <> + {pageSize * currentPage + 1} - {Math.min(pageSize * (currentPage + 1), totalCount)} of{' '} + {totalCount} + + + + + decrementPage(1)} + size='small' + > + + + + + + + incrementPage(1)} + size='small' + disabled={currentPage === Math.ceil(totalCount / pageSize) - 1} + > + + + + + + ) +} + +export default MqPaging diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx index 359cf9d56e..e2b95a2356 100644 --- 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 = ({ })} - - - <> - {PAGE_SIZE * state.page + 1} -{' '} - {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount} - - - - - handleClickPage('prev')} - size='large' - > - - - - - - - handleClickPage('next')} - size='large' - disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1} - > - - - - - + handleClickPage('next')} + decrementPage={() => handleClickPage('prev')} + /> )} diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx index b3e18bd183..204a72a798 100644 --- 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 = ({ })} - - - <> - {PAGE_SIZE * state.page + 1} -{' '} - {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount} - - - - - handleClickPage('prev')} - size='large' - > - - - - - - - handleClickPage('next')} - size='large' - disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1} - > - - - - - + handleClickPage('next')} + decrementPage={() => handleClickPage('prev')} + /> )} diff --git a/web/src/routes/jobs/Jobs.tsx b/web/src/routes/jobs/Jobs.tsx index a28da6efa0..892bbb36b5 100644 --- 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 = ({ } const [state, setState] = React.useState(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 = ({ })} - - - <> - {PAGE_SIZE * state.page + 1} -{' '} - {Math.min(PAGE_SIZE * (state.page + 1), totalCount)} of {totalCount} - - - - - handleClickPage('prev')} - size='large' - > - - - - - - - handleClickPage('next')} - size='large' - disabled={state.page === Math.ceil(totalCount / PAGE_SIZE) - 1} - > - - - - - + handleClickPage('next')} + decrementPage={() => handleClickPage('prev')} + /> )}