From fbebfdae043d523c0d8463318fa48b4459482c0d Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Mon, 26 Feb 2024 15:54:10 +0100 Subject: [PATCH 1/6] [accelerator] add pagination support in acceleration list --- .../accelerations-list.component.html | 9 +++ .../accelerations-list.component.ts | 64 +++++++++++-------- .../accelerator-dashboard.component.html | 2 +- .../src/app/interfaces/node-api.interface.ts | 11 ++-- .../src/app/services/services-api.service.ts | 4 ++ 5 files changed, 59 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 9a919ca54..5481bed53 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -17,6 +17,7 @@ Bid Boost Block Status + Date @@ -52,6 +53,9 @@ Mined Canceled + + + @@ -75,6 +79,11 @@ + + +

diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts index c1ab011ea..ae601fc62 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts +++ b/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 = 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; } diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 6d9e49265..0fd70269c 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -84,7 +84,7 @@
Active Accelerations
- + diff --git a/frontend/src/app/interfaces/node-api.interface.ts b/frontend/src/app/interfaces/node-api.interface.ts index 6ef650e32..e5764e785 100644 --- a/frontend/src/app/interfaces/node-api.interface.ts +++ b/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; } \ No newline at end of file diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts index f11b3460c..a1f023b9b 100644 --- a/frontend/src/app/services/services-api.service.ts +++ b/frontend/src/app/services/services-api.service.ts @@ -147,4 +147,8 @@ export class ServicesApiServices { getAccelerationHistory$(params: AccelerationHistoryParams): Observable { return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params } }); } + + getAccelerationHistoryObserveResponse$(params: AccelerationHistoryParams): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'}); + } } From b3b65c59dcc29889c43045784073bf9276988221 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Mon, 26 Feb 2024 16:23:00 +0100 Subject: [PATCH 2/6] [accelerator] improve dashboard responsiveness a bit --- .../accelerations-list.component.html | 4 +- .../accelerations-list.component.scss | 60 +++++++++---------- .../accelerations-list.component.ts | 8 ++- 3 files changed, 37 insertions(+), 35 deletions(-) diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 5481bed53..c5862cb24 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -17,7 +17,7 @@ Bid Boost Block Status - Date + Date @@ -53,7 +53,7 @@ Mined Canceled - + diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss index 110ff033c..85e655b25 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss @@ -63,16 +63,28 @@ tr, td, th { } .txid { - @media (max-width: 500px) { + width: 20%; +} + +.fee { + width: 15%; +} + +.block { + width: 15%; + @media (max-width: 700px) { display: none; } } -.fee, .block, .status { - width: 15%; +.status { + width: 13%; +} - @media (max-width: 720px) { - width: 20%; +.date { + width: 20%; + @media (max-width: 600px) { + display: none; } } @@ -83,23 +95,12 @@ tr, td, th { text-overflow: ellipsis; white-space: nowrap; max-width: 30%; - @media (max-width: 1060px) and (min-width: 768px) { - display: none; - } - @media (max-width: 500px) { - display: none; - } } .fee-rate { width: 20%; - @media (max-width: 1060px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 500px) { - text-align: start !important; - } - @media (max-width: 840px) and (min-width: 768px) { + text-align: end !important; + @media (max-width: 975px) and (min-width: 768px) { display: none; } @media (max-width: 410px) { @@ -108,32 +109,31 @@ tr, td, th { } .bid { + text-align: end !important; width: 30%; min-width: 150px; - @media (max-width: 840px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 410px) { - text-align: start !important; - } } .time { width: 25%; + @media (max-width: 600px) { + display: none; + } + @media (max-width: 1200px) and (min-width: 768px) { + display: none; + } } .fee { width: 30%; - @media (max-width: 1060px) and (min-width: 768px) { - text-align: start !important; - } - @media (max-width: 500px) { - text-align: start !important; - } + text-align: end !important; } .block { width: 20%; + @media (max-width: 1200px) and (min-width: 768px) { + display: none; + } } .status { diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts index ae601fc62..a04e45150 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts @@ -47,9 +47,11 @@ export class AccelerationsListComponent implements OnInit { 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); + let accelerations = response; + if (response.body) { + accelerations = response.body; + this.accelerationCount = parseInt(response.headers.get('x-total-count'), 10); + } if (this.pending) { for (const acceleration of accelerations) { acceleration.status = acceleration.status || 'accelerating'; From e26fcff063ebf3354aad2b006b28c08402c309d3 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Mon, 26 Feb 2024 16:40:22 +0100 Subject: [PATCH 3/6] [accelerator] cleanup status --- .../accelerations-list/accelerations-list.component.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index c5862cb24..95a9d0efe 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -17,7 +17,7 @@ Bid Boost Block Status - Date + Requested @@ -50,7 +50,8 @@ Pending - Mined + Mined + Completed Canceled From ab0c3eeab6ab17fee82ae7c3e6f31c12f2dfe6e0 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Mon, 26 Feb 2024 16:47:19 +0100 Subject: [PATCH 4/6] [accelerator] cap max width acceleration history list for now --- .../accelerations-list/accelerations-list.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html index 95a9d0efe..177eee973 100644 --- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html +++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html @@ -1,4 +1,4 @@ -
+

Accelerations

From 3f8a4b511900cea9e68e24960b2b63f2c7d8dc81 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 27 Feb 2024 15:20:15 +0100 Subject: [PATCH 5/6] [accelerator] move accel stats into backend --- .../acceleration-stats.component.html | 6 +-- .../acceleration-stats.component.ts | 43 ++++++------------- .../accelerator-dashboard.component.html | 2 +- .../accelerator-dashboard.component.ts | 4 +- .../src/app/services/services-api.service.ts | 5 +++ 5 files changed, 23 insertions(+), 37 deletions(-) diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html index 5e8aa729a..fef91acc0 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.html @@ -3,16 +3,16 @@
Requests
-
{{ stats.count }}
+
{{ stats.totalRequested }}
accelerated
Total Bid Boost
-
{{ stats.totalFeesPaid / 100_000_000 | amountShortener: 4 }} BTC
+
{{ stats.totalBidBoost / 100_000_000 | amountShortener: 4 }} BTC
- +
diff --git a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts index 0a6ef065c..29909ff39 100644 --- a/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts +++ b/frontend/src/app/components/acceleration/acceleration-stats/acceleration-stats.component.ts @@ -1,9 +1,12 @@ -import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; -import { Observable, of } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; -import { ApiService } from '../../../services/api.service'; -import { StateService } from '../../../services/state.service'; -import { Acceleration } from '../../../interfaces/node-api.interface'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { ServicesApiServices } from '../../../services/services-api.service'; + +export type AccelerationStats = { + totalRequested: number; + totalBidBoost: number; + successRate: number; +} @Component({ selector: 'app-acceleration-stats', @@ -12,35 +15,13 @@ import { Acceleration } from '../../../interfaces/node-api.interface'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class AccelerationStatsComponent implements OnInit { - @Input() timespan: '24h' | '1w' | '1m' = '24h'; - @Input() accelerations$: Observable; - public accelerationStats$: Observable; + accelerationStats$: Observable; constructor( - private apiService: ApiService, - private stateService: StateService, + private servicesApiService: ServicesApiServices ) { } ngOnInit(): void { - this.accelerationStats$ = this.accelerations$.pipe( - switchMap(accelerations => { - let totalFeesPaid = 0; - let totalSucceeded = 0; - let totalCanceled = 0; - for (const acc of accelerations) { - if (acc.status === 'completed') { - totalSucceeded++; - totalFeesPaid += (acc.feePaid - acc.baseFee - acc.vsizeFee) || 0; - } else if (acc.status === 'failed') { - totalCanceled++; - } - } - return of({ - count: totalSucceeded, - totalFeesPaid, - successRate: (totalSucceeded + totalCanceled > 0) ? ((totalSucceeded / (totalSucceeded + totalCanceled)) * 100) : 0.0, - }); - }) - ); + this.accelerationStats$ = this.servicesApiService.getAccelerationStats$(); } } diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html index 0fd70269c..0afae6e7b 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html @@ -27,7 +27,7 @@
- +
diff --git a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts index a2abc657a..57cb605ca 100644 --- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts +++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts @@ -60,7 +60,7 @@ export class AcceleratorDashboardComponent implements OnInit { this.accelerations$ = this.stateService.chainTip$.pipe( distinctUntilChanged(), switchMap(() => { - return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m' }).pipe( + return this.serviceApiServices.getAccelerationHistory$({ timeframe: '1m', page: 1, pageLength: 100}).pipe( catchError(() => { return of([]); }), @@ -71,7 +71,7 @@ export class AcceleratorDashboardComponent implements OnInit { this.minedAccelerations$ = this.accelerations$.pipe( map(accelerations => { - return accelerations.filter(acc => ['mined', 'completed', 'failed'].includes(acc.status)); + return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status)); }) ); diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts index a1f023b9b..a2e62cf36 100644 --- a/frontend/src/app/services/services-api.service.ts +++ b/frontend/src/app/services/services-api.service.ts @@ -7,6 +7,7 @@ import { MenuGroup } from '../interfaces/services.interface'; import { Observable, of, ReplaySubject, tap, catchError, share, filter, switchMap } from 'rxjs'; import { IBackendInfo } from '../interfaces/websocket.interface'; import { Acceleration, AccelerationHistoryParams } from '../interfaces/node-api.interface'; +import { AccelerationStats } from '../components/acceleration/acceleration-stats/acceleration-stats.component'; export type ProductType = 'enterprise' | 'community' | 'mining_pool' | 'custom'; export interface IUser { @@ -151,4 +152,8 @@ export class ServicesApiServices { getAccelerationHistoryObserveResponse$(params: AccelerationHistoryParams): Observable { return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/history`, { params: { ...params }, observe: 'response'}); } + + getAccelerationStats$(): Observable { + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/stats`); + } } From 867e9594302b7afdf0bca8a0f52a63d2ae688df2 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Tue, 27 Feb 2024 15:22:59 +0100 Subject: [PATCH 6/6] [accelerator] /accelerator/stats -> /accelerator/accelerations/stats --- frontend/src/app/services/services-api.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/services/services-api.service.ts b/frontend/src/app/services/services-api.service.ts index a2e62cf36..5ec1e4240 100644 --- a/frontend/src/app/services/services-api.service.ts +++ b/frontend/src/app/services/services-api.service.ts @@ -154,6 +154,6 @@ export class ServicesApiServices { } getAccelerationStats$(): Observable { - return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/stats`); + return this.httpClient.get(`${SERVICES_API_PREFIX}/accelerator/accelerations/stats`); } }