feat(ui/ingestion): add pagination on ingestion executions (#10269)

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 (
-        <StyledTable
-            columns={tableColumns}
-            dataSource={tableData}
-            rowKey="id"
-            locale={{
-                emptyText: <Empty description="No Executions found!" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
-            }}
-            pagination={false}
-        />
+        <>
+            <StyledTable
+                columns={tableColumns}
+                dataSource={tableData}
+                rowKey="id"
+                locale={{
+                    emptyText: <Empty description="No Executions found!" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
+                }}
+                pagination={false}
+            />
+            <PaginationInfoContainer>
+                <PaginationInfo>
+                    <b>
+                        {lastResultIndex > 0 ? (page - 1) * pageSize + 1 : 0} - {lastResultIndex}
+                    </b>{' '}
+                    of <b>{totalExecution}</b>
+                </PaginationInfo>
+                <StyledPagination
+                    current={page}
+                    pageSize={pageSize}
+                    total={totalExecution as any}
+                    showLessItems
+                    onChange={onChangePage}
+                    showSizeChanger={(totalExecution as any) > SearchCfg.RESULTS_PER_PAGE}
+                    onShowSizeChange={(_currNum, newNum) => setNumResultsPerPage(newNum)}
+                    pageSizeOptions={['10', '20', '50', '100']}
+                />
+            </PaginationInfoContainer>
+        </>
     );
 }

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 | string>(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 (
         <ListContainer>
@@ -147,11 +157,17 @@ export const IngestionSourceExecutionList = ({ urn, isExpanded, lastRefresh, onR
                 <Message type="error" content="Failed to load ingestion executions! An unexpected error occurred." />
             )}
             <IngestionExecutionTable
+                onChangePage={onChangePage}
                 executionRequests={executionRequests}
+                totalExecution={totalExecution}
+                page={page}
+                pageSize={numResultsPerPage}
+                lastResultIndex={lastResultIndex}
                 setFocusExecutionUrn={setFocusExecutionUrn}
                 handleCancelExecution={handleCancelExecution}
                 handleViewDetails={handleViewDetails}
                 handleRollbackExecution={handleRollbackExecution}
+                setNumResultsPerPage={setNumResultsPerPage}
             />
             {focusExecutionUrn && (
                 <ExecutionDetailsModal