1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Use non-virtual list for small numbers of pods

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-10-21 08:56:31 -04:00
parent 244a8e3262
commit 0d04327b89
2 changed files with 9 additions and 5 deletions

View File

@ -146,6 +146,8 @@ export class PodDetailsList extends React.Component<Props> {
return null; return null;
} }
const virtual = pods.length > 20;
return ( return (
<div className="PodDetailsList flex column"> <div className="PodDetailsList flex column">
<DrawerTitle title="Pods" /> <DrawerTitle title="Pods" />
@ -154,8 +156,9 @@ export class PodDetailsList extends React.Component<Props> {
items={pods} items={pods}
selectable selectable
scrollable={false} scrollable={false}
virtual virtual={virtual}
virtualHeight={600} // 660 is the exact hight required for 20 items with the default paddings
virtualHeight={660}
sortable={{ sortable={{
[sortBy.name]: pod => pod.getName(), [sortBy.name]: pod => pod.getName(),
[sortBy.namespace]: pod => pod.getNs(), [sortBy.namespace]: pod => pod.getNs(),
@ -165,6 +168,7 @@ export class PodDetailsList extends React.Component<Props> {
sortByDefault={{ sortBy: sortBy.cpu, orderBy: "desc" }} sortByDefault={{ sortBy: sortBy.cpu, orderBy: "desc" }}
sortSyncWithUrl={false} sortSyncWithUrl={false}
getTableRow={this.getTableRow} getTableRow={this.getTableRow}
renderRow={!virtual && (pod => this.getTableRow(pod.getId()))}
className="box grow" className="box grow"
> >
<TableHead> <TableHead>

View File

@ -104,7 +104,7 @@ export class VirtualList extends Component<Props, State> {
this.listRef.current?.scrollToItem(index, align); this.listRef.current?.scrollToItem(index, align);
}; };
renderVSL(height: number | undefined) { renderList(height: number | undefined) {
const { width, items, getRow, onScroll, outerRef } = this.props; const { width, items, getRow, onScroll, outerRef } = this.props;
const { overscanCount } = this.state; const { overscanCount } = this.state;
@ -136,10 +136,10 @@ export class VirtualList extends Component<Props, State> {
<div className={cssNames("VirtualList", className)}> <div className={cssNames("VirtualList", className)}>
{ {
typeof fixedHeight === "number" typeof fixedHeight === "number"
? this.renderVSL(fixedHeight) ? this.renderList(fixedHeight)
: ( : (
<AutoSizer disableWidth> <AutoSizer disableWidth>
{({ height }) => this.renderVSL(height)} {({ height }) => this.renderList(height)}
</AutoSizer> </AutoSizer>
) )
} }