diff --git a/src/components/Executions/Tables/NodeExecutionChildren.tsx b/src/components/Executions/Tables/NodeExecutionChildren.tsx index eeb9a0164..256a2e29e 100644 --- a/src/components/Executions/Tables/NodeExecutionChildren.tsx +++ b/src/components/Executions/Tables/NodeExecutionChildren.tsx @@ -1,4 +1,5 @@ -import { Typography } from '@material-ui/core'; +import { Button, Typography } from '@material-ui/core'; +import { Theme, makeStyles } from '@material-ui/core/styles'; import * as classnames from 'classnames'; import { getCacheKey } from 'components/Cache/utils'; import { useTheme } from 'components/Theme/useTheme'; @@ -15,12 +16,24 @@ export interface NodeExecutionChildrenProps { level: number; } +const PAGE_SIZE = 50; + +const useStyles = makeStyles((theme: Theme) => ({ + loadMoreContainer: { + display: 'flex', + justifyContent: 'center', + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1) + } +})); + /** Renders a nested list of row items for children of a NodeExecution */ export const NodeExecutionChildren: React.FC = ({ abortMetadata, childGroups, level }) => { + const styles = useStyles(); const showNames = childGroups.length > 1; const tableStyles = useExecutionTableStyles(); const theme = useTheme(); @@ -31,18 +44,45 @@ export const NodeExecutionChildren: React.FC = ({ theme.spacing )}px` }; + const [loadedNodes, setLoadedNodes] = React.useState( + new Array(childGroups.length).fill(PAGE_SIZE) + ); + + const loadMoreRows = React.useCallback( + (which: number) => () => { + const newLoadedNodes = [...loadedNodes]; + newLoadedNodes[which] += PAGE_SIZE; + setLoadedNodes(newLoadedNodes); + }, + [loadedNodes] + ); + + const loadMoreButton = (which: number) => ( +
+ +
+ ); + return ( <> {childGroups.map(({ name, nodeExecutions }, groupIndex) => { - const rows = nodeExecutions.map((nodeExecution, index) => ( - - )); + const rows = nodeExecutions + .slice(0, loadedNodes[groupIndex]) + .map((nodeExecution, index) => ( + + )); const key = `group-${name}`; return showNames ? (
@@ -63,10 +103,13 @@ export const NodeExecutionChildren: React.FC = ({
{rows}
+ {loadMoreButton(groupIndex)} ) : (
{rows} + {nodeExecutions.length > loadedNodes[groupIndex] && + loadMoreButton(groupIndex)}
); })}