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

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

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
Original file line number Diff line number Diff line change
@@ -1,25 +1,58 @@
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[];
setFocusExecutionUrn: (urn: string) => void;
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 = [
{
Expand Down Expand Up @@ -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,
Expand All @@ -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>
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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),
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand Down
Loading