particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ImagesTable: add compose pagination

Browse source 
The list of composes is now paginated. The default is 10 composes per
page. This quantity can be changed. When the page or the quantity per
page is changed then the next set of composes will be fetched.
This commit is contained in:
Jacob Kozol 2021-04-23 16:47:49 +02:00 • committed by Sanne Raymaekers
parent df39b6915c
commit 14a7c7e39d
2 changed files with 60 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/Components/ImagesTable/ImagesTable.js
View file

@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
import { Table, TableHeader, TableBody, classNames, Visibility } from '@patternfly/react-table';
import { Button,
EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions,
Pagination,
Toolbar, ToolbarContent, ToolbarItem,
Title } from '@patternfly/react-core';
import { ExternalLinkAltIcon, PlusCircleIcon } from '@patternfly/react-icons';
@ -36,9 +37,13 @@ class ImagesTable extends Component {
)
]
}
]
],
page: 1,
perPage: 10,
};
this.pollComposeStatuses = this.pollComposeStatuses.bind(this);
this.onSetPage = this.onSetPage.bind(this);
this.onPerPageSelect = this.onPerPageSelect.bind(this);
}
componentDidMount() {
@ -62,9 +67,38 @@ class ImagesTable extends Component {
});
}
onSetPage(_, page) {
// if the next page's composes haven't been fetched from api yet
// then fetch them with proper page index and offset
if (this.props.composes.count > this.props.composes.allIds.length) {
const pageIndex = page - 1;
const offset = pageIndex * this.state.perPage;
this.props.composesGet(this.state.perPage, offset);
}
this.setState({ page });
}
onPerPageSelect(_, perPage) {
// if the new per page quantity is greater than the number of already fetched composes fetch more composes
// if all composes haven't already been fetched
if (this.props.composes.count > this.props.composes.allIds.length && perPage > this.props.composes.allIds.length) {
this.props.composesGet(perPage, 0);
}
// page should be reset to the first page when the page size is changed.
this.setState({ perPage, page: 1 });
}
render() {
let { composes } = this.props;
const rows = Object.entries(composes.byId).map(([ id, compose ]) => {
// the state.page is not an index so must be reduced by 1 get the starting index
const itemsStartInclusive = (this.state.page - 1) * this.state.perPage;
const itemsEndExlcusive = itemsStartInclusive + this.state.perPage;
// only display the current pages section of composes. slice is inclusive, exclusive.
const rows = composes.allIds.slice(itemsStartInclusive, itemsEndExlcusive).map(id => {
const compose = composes.byId[id];
return {
cells: [
id,
@ -114,6 +148,17 @@ class ImagesTable extends Component {
Create image
</Link>
</ToolbarItem>
<ToolbarItem variant="pagination" align={ { default: 'alignRight' } }>
<Pagination
itemCount={ this.props.composes.count }
perPage={ this.state.perPage }
page={ this.state.page }
onSetPage={ this.onSetPage }
onPerPageSelect={ this.onPerPageSelect }
widgetId="compose-pagination"
data-testId="images-pagination"
isCompact />
</ToolbarItem>
</ToolbarContent>
</Toolbar>
<Table