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 && (