Add server-side pagination state to TransferStore and DeploymentStore

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

src/stores/DeploymentStore.ts

@@ -36,8 +36,37 @@ class DeploymentStore {
 
   @observable detailsLoading = true;
 
+  @observable deploymentsPage = 1;
+
+  @observable deploymentsHasNextPage = false;
+
+  @observable deploymentsItemsPerPage = 25;
+
   deploymentsLoaded = false;
 
+  private deploymentPageMarkers: (string | null)[] = [null];
+
+  @action resetDeploymentPagination(): void {
+    this.deploymentsPage = 1;
+    this.deploymentsHasNextPage = false;
+    this.deploymentPageMarkers = [null];
+  }
+
+  @action async setDeploymentsPage(page: number): Promise<void> {
+    this.deploymentsPage = page;
+    await this.getDeployments({ showLoading: true });
+  }
+
+  @action async setDeploymentsItemsPerPage(
+    itemsPerPage: number,
+  ): Promise<void> {
+    this.deploymentsItemsPerPage = itemsPerPage;
+    this.deploymentsPage = 1;
+    this.deploymentPageMarkers = [null];
+    this.deploymentsHasNextPage = false;
+    await this.getDeployments({ showLoading: true });
+  }
+
   @action async getDeployments(options?: {
     showLoading?: boolean;
     skipLog?: boolean;
@@ -47,11 +76,25 @@ class DeploymentStore {
     }
 
     try {
-      const deployments = await DeploymentSource.getDeployments(
-        options && options.skipLog,
-      );
+      const marker =
+        this.deploymentPageMarkers[this.deploymentsPage - 1] ?? null;
+      const raw = await DeploymentSource.getDeployments({
+        skipLog: options?.skipLog,
+        limit: this.deploymentsItemsPerPage + 1,
+        marker,
+      });
+      const hasNextPage = raw.length > this.deploymentsItemsPerPage;
+      const deployments = hasNextPage
+        ? raw.slice(0, this.deploymentsItemsPerPage)
+        : raw;
+      const nextMarker =
+        deployments.length > 0 ? deployments[deployments.length - 1].id : null;
       runInAction(() => {
         this.deployments = deployments;
+        this.deploymentsHasNextPage = hasNextPage;
+        if (nextMarker !== null) {
+          this.deploymentPageMarkers[this.deploymentsPage] = nextMarker;
+        }
         this.loading = false;
         this.deploymentsLoaded = true;
       });

src/stores/TransferStore.ts

@@ -69,10 +69,37 @@ class TransferStore {
 
   @observable transfersWithDisksLoading = false;
 
+  @observable transfersPage = 1;
+
+  @observable transfersHasNextPage = false;
+
+  @observable transfersItemsPerPage = 25;
+
   transfersLoaded = false;
 
+  private transferPageMarkers: (string | null)[] = [null];
+
   addExecution: { transferId: string; execution: Execution } | null = null;
 
+  @action resetTransferPagination(): void {
+    this.transfersPage = 1;
+    this.transfersHasNextPage = false;
+    this.transferPageMarkers = [null];
+  }
+
+  @action async setTransfersPage(page: number): Promise<void> {
+    this.transfersPage = page;
+    await this.getTransfers({ showLoading: true });
+  }
+
+  @action async setTransfersItemsPerPage(itemsPerPage: number): Promise<void> {
+    this.transfersItemsPerPage = itemsPerPage;
+    this.transfersPage = 1;
+    this.transferPageMarkers = [null];
+    this.transfersHasNextPage = false;
+    await this.getTransfers({ showLoading: true });
+  }
+
   @action async getTransfers(options?: {
     showLoading?: boolean;
     skipLog?: boolean;
@@ -85,11 +112,20 @@ class TransferStore {
     }
 
     try {
-      const transfers = await TransferSource.getTransfers(
-        options && options.skipLog,
-        options && options.quietError,
-      );
-      this.getTransfersSuccess(transfers);
+      const marker = this.transferPageMarkers[this.transfersPage - 1] ?? null;
+      const raw = await TransferSource.getTransfers({
+        skipLog: options?.skipLog,
+        quietError: options?.quietError,
+        limit: this.transfersItemsPerPage + 1,
+        marker,
+      });
+      const hasNextPage = raw.length > this.transfersItemsPerPage;
+      const transfers = hasNextPage
+        ? raw.slice(0, this.transfersItemsPerPage)
+        : raw;
+      const nextMarker =
+        transfers.length > 0 ? transfers[transfers.length - 1].id : null;
+      this.getTransfersSuccess(transfers, hasNextPage, nextMarker);
     } finally {
       this.getTransfersDone();
     }
@@ -141,9 +177,17 @@ class TransferStore {
     this.currentlyLoadingExecution = "";
   }
 
-  @action getTransfersSuccess(transfers: TransferItem[]) {
+  @action getTransfersSuccess(
+    transfers: TransferItem[],
+    hasNextPage = false,
+    nextMarker: string | null = null,
+  ) {
     this.transfersLoaded = true;
     this.transfers = transfers;
+    this.transfersHasNextPage = hasNextPage;
+    if (nextMarker !== null) {
+      this.transferPageMarkers[this.transfersPage] = nextMarker;
+    }
   }
 
   @action getTransfersDone() {