diff --git a/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx b/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx index a9d9283ef1377e..8385bfac582587 100644 --- a/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx +++ b/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx @@ -1,10 +1,31 @@ import React from 'react'; -import { Empty } from 'antd'; +import { Empty, Pagination, Typography } from 'antd'; +import styled from 'styled-components'; import { StyledTable } from '../../../entity/shared/components/styled/StyledTable'; import { ExecutionRequest } from '../../../../types.generated'; import { ButtonsColumn, SourceColumn, StatusColumn, TimeColumn } from './IngestionExecutionTableColumns'; import { SUCCESS } from '../utils'; import { formatDuration } from '../../../shared/formatDuration'; +import { SearchCfg } from '../../../../conf'; + +const PaginationInfoContainer = styled.span` + padding: 8px; + padding-left: 16px; + border-top: 1px solid; + border-color: ${(props) => props.theme.styles['border-color-base']}; + display: flex; + justify-content: space-between; + align-items: center; +`; + +const StyledPagination = styled(Pagination)` + margin: 0px; + padding: 0px; +`; + +const PaginationInfo = styled(Typography.Text)` + padding: 0px; +`; interface Props { executionRequests: ExecutionRequest[]; @@ -12,14 +33,26 @@ interface Props { handleViewDetails: (urn: string) => void; handleCancelExecution: (urn: string) => void; handleRollbackExecution: (runId: string) => void; + onChangePage: (number: any) => void; + setNumResultsPerPage: (number: any) => void; + totalExecution?: number | null; + page?: any; + pageSize?: any; + lastResultIndex?: any; } export default function IngestionExecutionTable({ executionRequests, + onChangePage, setFocusExecutionUrn, handleViewDetails, handleCancelExecution, handleRollbackExecution, + setNumResultsPerPage, + totalExecution, + pageSize, + lastResultIndex, + page, }: Props) { const tableColumns = [ { @@ -69,7 +102,8 @@ export default function IngestionExecutionTable({ }, ]; - const mostRecentSuccessfulExecution = executionRequests.find((execution) => execution.result?.status === SUCCESS); + const mostRecentSuccessfulExecution = + page === 1 && executionRequests.find((execution) => execution.result?.status === SUCCESS); const tableData = executionRequests.map((execution) => ({ urn: execution.urn, @@ -79,18 +113,38 @@ export default function IngestionExecutionTable({ executedAt: execution.result?.startTimeMs, duration: execution.result?.durationMs, status: execution.result?.status, - showRollback: execution.urn === mostRecentSuccessfulExecution?.urn, + showRollback: mostRecentSuccessfulExecution && execution?.urn === mostRecentSuccessfulExecution?.urn, })); return ( - , - }} - pagination={false} - /> + <> + , + }} + pagination={false} + /> + + + + {lastResultIndex > 0 ? (page - 1) * pageSize + 1 : 0} - {lastResultIndex} + {' '} + of {totalExecution} + + SearchCfg.RESULTS_PER_PAGE} + onShowSizeChange={(_currNum, newNum) => setNumResultsPerPage(newNum)} + pageSizeOptions={['10', '20', '50', '100']} + /> + + ); } diff --git a/datahub-web-react/src/app/ingest/source/executions/IngestionSourceExecutionList.tsx b/datahub-web-react/src/app/ingest/source/executions/IngestionSourceExecutionList.tsx index 435d2fbfd18e3d..6a75ddb3200c87 100644 --- a/datahub-web-react/src/app/ingest/source/executions/IngestionSourceExecutionList.tsx +++ b/datahub-web-react/src/app/ingest/source/executions/IngestionSourceExecutionList.tsx @@ -12,6 +12,7 @@ import IngestionExecutionTable from './IngestionExecutionTable'; import { ExecutionRequest } from '../../../../types.generated'; import { ROLLING_BACK, RUNNING } from '../utils'; import useRefreshIngestionData from './useRefreshIngestionData'; +import { SearchCfg } from '../../../../conf'; const ListContainer = styled.div` margin-left: 28px; @@ -30,18 +31,23 @@ type Props = { export const IngestionSourceExecutionList = ({ urn, isExpanded, lastRefresh, onRefresh }: Props) => { const [focusExecutionUrn, setFocusExecutionUrn] = useState(undefined); + const [page, setPage] = useState(1); + const [numResultsPerPage, setNumResultsPerPage] = useState(SearchCfg.RESULTS_PER_PAGE); - const start = 0; - const count = 10; // Load 10 items at a time. + const start: number = (page - 1) * numResultsPerPage; const { loading, data, error, refetch } = useGetIngestionSourceQuery({ variables: { urn, runStart: start, - runCount: count, + runCount: numResultsPerPage, }, }); + const onChangePage = (newPage: number) => { + setPage(newPage); + }; + function hasActiveExecution() { return !!data?.ingestionSource?.executions?.executionRequests.find((request) => isExecutionRequestActive(request as ExecutionRequest), @@ -139,6 +145,10 @@ export const IngestionSourceExecutionList = ({ urn, isExpanded, lastRefresh, onR } const executionRequests = (data?.ingestionSource?.executions?.executionRequests as ExecutionRequest[]) || []; + const totalExecution = data?.ingestionSource?.executions?.total || 0; + const pageSize = data?.ingestionSource?.executions?.count || 0; + const pageStart = data?.ingestionSource?.executions?.start || 0; + const lastResultIndex = pageStart + pageSize > totalExecution ? totalExecution : pageStart + pageSize; return ( @@ -147,11 +157,17 @@ export const IngestionSourceExecutionList = ({ urn, isExpanded, lastRefresh, onR )} {focusExecutionUrn && (