Replace client-side pagination with API-side pagination for transfers and deployments

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

Author: mihaelabalutoiu

src/components/smart/DeploymentsPage/DeploymentsPage.tsx

@@ -67,6 +67,8 @@ class DeploymentsPage extends React.Component<Props, State> {
   componentDidMount() {
     document.title = "Coriolis Deployments";
 
+    deploymentStore.resetDeploymentPagination();
+
     projectStore.getProjects();
     endpointStore.getEndpoints({ showLoading: true });
     userStore.getAllUsers({
@@ -112,6 +114,7 @@ class DeploymentsPage extends React.Component<Props, State> {
   }
 
   handleProjectChange() {
+    deploymentStore.resetDeploymentPagination();
     endpointStore.getEndpoints({ showLoading: true });
     deploymentStore.getDeployments({ showLoading: true });
   }
@@ -297,6 +300,19 @@ class DeploymentsPage extends React.Component<Props, State> {
                 this.setState({ selectedDeployments });
               }}
               dropdownActions={BulkActions}
+              apiPagination={{
+                currentPage: deploymentStore.deploymentsPage,
+                hasNextPage: deploymentStore.deploymentsHasNextPage,
+                itemsPerPage: deploymentStore.deploymentsItemsPerPage,
+                onPageChange: page => {
+                  deploymentStore.setDeploymentsPage(page);
+                },
+                onItemsPerPageChange: e => {
+                  deploymentStore.setDeploymentsItemsPerPage(
+                    parseInt(e.target.value, 10),
+                  );
+                },
+              }}
               renderItemComponent={options => (
                 <TransferListItem
                   {...options}

src/components/smart/TransfersPage/TransfersPage.tsx

@@ -89,6 +89,8 @@ class TransfersPage extends React.Component<Props, State> {
   componentDidMount() {
     document.title = "Coriolis Transfers";
 
+    transferStore.resetTransferPagination();
+
     projectStore.getProjects();
     endpointStore.getEndpoints({ showLoading: true });
     userStore.getAllUsers({
@@ -124,6 +126,7 @@ class TransfersPage extends React.Component<Props, State> {
   }
 
   handleProjectChange() {
+    transferStore.resetTransferPagination();
     transferStore.getTransfers();
     endpointStore.getEndpoints({ showLoading: true });
   }
@@ -445,6 +448,19 @@ class TransfersPage extends React.Component<Props, State> {
               onPaginatedItemsChange={paginatedTransfers => {
                 this.handlePaginatedItemsChange(paginatedTransfers);
               }}
+              apiPagination={{
+                currentPage: transferStore.transfersPage,
+                hasNextPage: transferStore.transfersHasNextPage,
+                itemsPerPage: transferStore.transfersItemsPerPage,
+                onPageChange: page => {
+                  transferStore.setTransfersPage(page);
+                },
+                onItemsPerPageChange: e => {
+                  transferStore.setTransfersItemsPerPage(
+                    parseInt(e.target.value, 10),
+                  );
+                },
+              }}
               renderItemComponent={options => (
                 <TransferListItem
                   {...options}