[accelerator] add pagination support in acceleration list

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html

@@ -17,6 +17,7 @@
           <th class="fee text-right" i18n="transaction.bid-boost|Bid Boost">Bid Boost</th>
           <th class="block text-right" i18n="accelerator.block">Block</th>
           <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
+          <th class="time text-right" i18n="" *ngIf="!this.widget">Date</th>
         </ng-container>
       </thead>
       <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@@ -52,6 +53,9 @@
               <span *ngIf="acceleration.status === 'mined' || acceleration.status === 'completed'" class="badge badge-success" i18n="transaction.rbf.mined">Mined</span>
               <span *ngIf="acceleration.status === 'failed'" class="badge badge-danger" i18n="accelerator.canceled">Canceled</span>
             </td>
+            <td class="time text-right" *ngIf="!this.widget">
+              <app-time kind="since" [time]="acceleration.added" [fastRender]="true"></app-time>
+            </td>
           </ng-container>
         </tr>
       </tbody>
@@ -75,6 +79,11 @@
       </ng-template>
     </table>
 
+    <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
+      [collectionSize]="this.accelerationCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
+      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
+    </ngb-pagination>
+
     <ng-template [ngIf]="!widget">
       <div class="clearfix"></div>
       <br>

frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { Observable, catchError, of, switchMap, tap } from 'rxjs';
+import { combineLatest, BehaviorSubject, Observable, catchError, of, switchMap, tap } from 'rxjs';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
 import { WebsocketService } from '../../../services/websocket.service';
@@ -21,9 +21,10 @@ export class AccelerationsListComponent implements OnInit {
   isLoading = true;
   paginationMaxSize: number;
   page = 1;
-  lastPage = 1;
+  accelerationCount: number;
   maxSize = window.innerWidth <= 767.98 ? 3 : 5;
   skeletonLines: number[] = [];
+  pageSubject: BehaviorSubject<number> = new BehaviorSubject(this.page);
 
   constructor(
     private servicesApiService: ServicesApiServices,
@@ -40,34 +41,45 @@ export class AccelerationsListComponent implements OnInit {
 
     this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
     this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
-
-    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistory$({ timeframe: '1m' }));
-    this.accelerationList$ = accelerationObservable$.pipe(
-      switchMap(accelerations => {
-        if (this.pending) {
-          for (const acceleration of accelerations) {
-            acceleration.status = acceleration.status || 'accelerating';
-          }
-        }
-        for (const acc of accelerations) {
-          acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee;
-        }
-        if (this.widget) {
-          return of(accelerations.slice(-6).reverse());
-        } else {
-          return of(accelerations.reverse());
-        }
-      }),
-      catchError((err) => {
-        this.isLoading = false;
-        return of([]);
-      }),
-      tap(() => {
-        this.isLoading = false;
+    
+    this.accelerationList$ = this.pageSubject.pipe(
+      switchMap((page) => {
+        const accelerationObservable$ = this.accelerations$ || (this.pending ? this.servicesApiService.getAccelerations$() : this.servicesApiService.getAccelerationHistoryObserveResponse$({ timeframe: '1m', page: page }));
+        return accelerationObservable$.pipe(
+          switchMap(response => {
+            const accelerations = response.body;
+            this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10);
+            console.log(this.accelerationCount);
+            if (this.pending) {
+              for (const acceleration of accelerations) {
+                acceleration.status = acceleration.status || 'accelerating';
+              }
+            }
+            for (const acc of accelerations) {
+              acc.boost = acc.feePaid - acc.baseFee - acc.vsizeFee;
+            }
+            if (this.widget) {
+              return of(accelerations.slice(0, 6));
+            } else {
+              return of(accelerations);
+            }
+          }),
+          catchError((err) => {
+            this.isLoading = false;
+            return of([]);
+          }),
+          tap(() => {
+            this.isLoading = false;
+          })
+        );
       })
     );
   }
 
+  pageChange(page: number): void {
+    this.pageSubject.next(page);
+  }
+
   trackByBlock(index: number, block: BlockExtended): number {
     return block.height;
   }

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html

@@ -84,7 +84,7 @@
           <div class="title-link">
             <h5 class="card-title d-inline" i18n="accelerator.pending-accelerations">Active Accelerations</h5>
           </div>
-          <app-accelerations-list [attr.data-cy]="'pending-accelerations'" [widget]=true [pending]="true" [accelerations$]="pendingAccelerations$"></app-accelerations-list>
+          <app-accelerations-list [attr.data-cy]="'pending-accelerations'" [widget]=true [pending]=true [accelerations$]="pendingAccelerations$"></app-accelerations-list>
         </div>
       </div>
     </div>

frontend/src/app/interfaces/node-api.interface.ts

@@ -393,8 +393,11 @@ export interface Acceleration {
 }
 
 export interface AccelerationHistoryParams {
-  timeframe?: string,
-  status?: string,
-  pool?: string,
-  blockHash?: string,
+  status?: string;
+  timeframe?: string;
+  poolUniqueId?: number;
+  blockHash?: string;
+  blockHeight?: number;
+  page?: number;
+  pageLength?: number;
 }

frontend/src/app/services/services-api.service.ts

@@ -147,4 +147,8 @@ export class ServicesApiServices {
   getAccelerationHistory$(params: AccelerationHistoryParams): Observable<Acceleration[]> {
     return this.httpClient.get<Acceleration[]>(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params } });
   }
+
+  getAccelerationHistoryObserveResponse$(params: AccelerationHistoryParams): Observable<any> {
+    return this.httpClient.get<any>(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'});
+  }
 }