Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web: DRY Paging #2832

Merged
merged 4 commits into from
Jun 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions web/src/components/paging/MqPaging.tsx
Original file line number Diff line number Diff line change
@@ -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
45 changes: 9 additions & 36 deletions web/src/routes/datasets/Datasets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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'
Expand Down Expand Up @@ -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')}
/>
</>
)}
</>
Expand Down
45 changes: 9 additions & 36 deletions web/src/routes/events/Events.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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')}
/>
</>
)}
</>
Expand Down
49 changes: 9 additions & 40 deletions web/src/routes/jobs/Jobs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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')}
/>
</>
)}
</>
Expand Down
Loading