fix: add pagination for child node expansion (#232)

flyteorg · Oct 20, 2021 · 9fff398 · 9fff398
1 parent 2a326cd
commit 9fff398
Showing 1 changed file with 53 additions and 10 deletions.
diff --git 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<NodeExecutionChildrenProps> = ({
     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<NodeExecutionChildrenProps> = ({
             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) => (
+        <div className={styles.loadMoreContainer}>
+            <Button
+                onClick={loadMoreRows(which)}
+                size="small"
+                variant="outlined"
+            >
+                Load More
+            </Button>
+        </div>
+    );
+
     return (
         <>
             {childGroups.map(({ name, nodeExecutions }, groupIndex) => {
-                const rows = nodeExecutions.map((nodeExecution, index) => (
-                    <NodeExecutionRow
-                        abortMetadata={abortMetadata}
-                        key={getCacheKey(nodeExecution.id)}
-                        index={index}
-                        execution={nodeExecution}
-                        level={level}
-                    />
-                ));
+                const rows = nodeExecutions
+                    .slice(0, loadedNodes[groupIndex])
+                    .map((nodeExecution, index) => (
+                        <NodeExecutionRow
+                            abortMetadata={abortMetadata}
+                            key={getCacheKey(nodeExecution.id)}
+                            index={index}
+                            execution={nodeExecution}
+                            level={level}
+                        />
+                    ));
                 const key = `group-${name}`;
                 return showNames ? (
                     <div key={key} role="list">
@@ -63,10 +103,13 @@ export const NodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = ({
                             </Typography>
                         </div>
                         <div>{rows}</div>
+                        {loadMoreButton(groupIndex)}
                     </div>
                 ) : (
                     <div key={key} role="list">
                         {rows}
+                        {nodeExecutions.length > loadedNodes[groupIndex] &&
+                            loadMoreButton(groupIndex)}
                     </div>
                 );
             })}