diff --git a/python/ray/dashboard/client/src/pages/dashboard/memory/ExpanderRow.tsx b/python/ray/dashboard/client/src/pages/dashboard/memory/ExpanderRow.tsx new file mode 100644 index 000000000..0b00c556e --- /dev/null +++ b/python/ray/dashboard/client/src/pages/dashboard/memory/ExpanderRow.tsx @@ -0,0 +1,23 @@ +import { Box, makeStyles, Typography } from "@material-ui/core"; +import React from "react"; + +type ExpanderRowProps = { + onExpand: () => any; +}; + +const useExpanderRowStyles = makeStyles({ + root: { + cursor: "pointer", + }, +}); + +const ExpanderRow: React.FC = ({ onExpand }) => { + const classes = useExpanderRowStyles(); + return ( + onExpand()} component="div" className={classes.root}> + Show more + + ); +}; + +export default ExpanderRow; diff --git a/python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx b/python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx index b533afff0..132583fd6 100644 --- a/python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx +++ b/python/ray/dashboard/client/src/pages/dashboard/memory/Memory.tsx @@ -23,36 +23,61 @@ import SortableTableHead, { import { getComparator, Order, stableSort } from "../../../common/tableUtils"; import { StoreState } from "../../../store"; import { dashboardActions } from "../state"; +import ExpanderRow from "./ExpanderRow"; import MemoryRowGroup from "./MemoryRowGroup"; import { MemoryTableRow } from "./MemoryTableRow"; -const makeGroupedEntries = ( - memoryTableGroups: MemoryTableGroups, - order: Order, - orderBy: keyof MemoryTableEntry | null, -) => { - const comparator = orderBy && getComparator(order, orderBy); - return Object.entries(memoryTableGroups).map(([groupKey, group]) => { - const sortedEntries = comparator - ? stableSort(group.entries, comparator) - : group.entries; +const DEFAULT_ENTRIES_PER_GROUP = 10; +const DEFAULT_UNGROUPED_ENTRIES = 25; - return ( - - ); - }); +type GroupedMemoryRowsProps = { + memoryTableGroups: MemoryTableGroups; + order: Order; + orderBy: keyof MemoryTableEntry | null; }; -const makeUngroupedEntries = ( - memoryTableGroups: MemoryTableGroups, - order: Order, - orderBy: memoryColumnId | null, -) => { +const GroupedMemoryRows: React.FC = ({ + memoryTableGroups, + order, + orderBy, +}) => { + const comparator = orderBy && getComparator(order, orderBy); + return ( + + {Object.entries(memoryTableGroups).map(([groupKey, group]) => { + const sortedEntries = comparator + ? stableSort(group.entries, comparator) + : group.entries; + + return ( + + ); + })} + + ); +}; + +type UngroupedMemoryRowsProps = { + memoryTableGroups: MemoryTableGroups; + order: Order; + orderBy: memoryColumnId | null; +}; + +const UngroupedMemoryRows: React.FC = ({ + memoryTableGroups, + order, + orderBy, +}) => { + const [visibleEntries, setVisibleEntries] = useState( + DEFAULT_UNGROUPED_ENTRIES, + ); + const onExpand = () => setVisibleEntries(visibleEntries + 10); const allEntries = Object.values(memoryTableGroups).reduce( (allEntries: Array, memoryTableGroup) => { const groupEntries = memoryTableGroup.entries; @@ -64,12 +89,18 @@ const makeUngroupedEntries = ( orderBy === null ? allEntries : stableSort(allEntries, getComparator(order, orderBy)); - return sortedEntries.map((memoryTableEntry, index) => ( - - )); + return ( + + {" "} + {sortedEntries.slice(0, visibleEntries).map((memoryTableEntry, index) => ( + + ))} + + + ); }; type memoryColumnId = @@ -177,9 +208,19 @@ const MemoryInfo: React.FC<{}> = () => { firstColumnEmpty={false} /> - {isGrouped - ? makeGroupedEntries(memoryTable.group, order, orderBy) - : makeUngroupedEntries(memoryTable.group, order, orderBy)} + {isGrouped ? ( + + ) : ( + + )} diff --git a/python/ray/dashboard/client/src/pages/dashboard/memory/MemoryRowGroup.tsx b/python/ray/dashboard/client/src/pages/dashboard/memory/MemoryRowGroup.tsx index 981f4a542..2c7d0060a 100644 --- a/python/ray/dashboard/client/src/pages/dashboard/memory/MemoryRowGroup.tsx +++ b/python/ray/dashboard/client/src/pages/dashboard/memory/MemoryRowGroup.tsx @@ -7,6 +7,7 @@ import { ExpandableStyledTableCell, StyledTableCell, } from "../../../common/TableCell"; +import ExpanderRow from "./ExpanderRow"; import MemorySummary from "./MemorySummary"; import { MemoryTableRow } from "./MemoryTableRow"; @@ -32,6 +33,7 @@ type MemoryRowGroupProps = { summary: MemoryTableSummary; entries: MemoryTableEntry[]; initialExpanded: boolean; + initialVisibleEntries: number; }; const MemoryRowGroup: React.FC = ({ @@ -39,9 +41,11 @@ const MemoryRowGroup: React.FC = ({ entries, summary, initialExpanded, + initialVisibleEntries, }) => { const classes = useMemoryRowGroupStyles(); const [expanded, setExpanded] = useState(initialExpanded); + const [visibleEntries, setVisibleEntries] = useState(initialVisibleEntries); const toggleExpanded = () => setExpanded(!expanded); const features = [ @@ -74,7 +78,7 @@ const MemoryRowGroup: React.FC = ({ {expanded && ( - {entries.map((memoryTableEntry, index) => { + {entries.slice(0, visibleEntries).map((memoryTableEntry, index) => { return ( = ({ /> ); })} + setVisibleEntries(visibleEntries + 10)} + /> )}