From b167848b9b65871797448222675def0713fffc7a Mon Sep 17 00:00:00 2001 From: Mononaut Date: Thu, 2 Nov 2023 23:26:17 +0000 Subject: [PATCH] SSR: Fix initial state of lightning pages & graphs --- .../app/lightning/lightning-api.service.ts | 33 +++++++++++-------- .../lightning-dashboard.component.ts | 11 +++++-- .../node-fee-chart.component.html | 2 +- .../node-fee-chart.component.scss | 4 ++- .../node-fee-chart.component.ts | 2 ++ .../nodes-channels-map.component.scss | 1 - .../node-channels.component.html | 16 +++++---- .../node-channels.component.scss | 10 +++++- .../nodes-channels/node-channels.component.ts | 2 +- .../nodes-per-isp-chart.component.html | 7 ++-- .../nodes-per-isp-chart.component.ts | 2 +- .../lightning-statistics-chart.component.html | 2 +- .../lightning-statistics-chart.component.ts | 2 ++ 13 files changed, 60 insertions(+), 34 deletions(-) diff --git a/frontend/src/app/lightning/lightning-api.service.ts b/frontend/src/app/lightning/lightning-api.service.ts index ee55fb75d..4be878a18 100644 --- a/frontend/src/app/lightning/lightning-api.service.ts +++ b/frontend/src/app/lightning/lightning-api.service.ts @@ -8,6 +8,7 @@ import { IChannel, INodesRanking, IOldestNodes, ITopNodesPerCapacity, ITopNodesP providedIn: 'root' }) export class LightningApiService { + private apiBaseUrl: string; // base URL is protocol, hostname, and port private apiBasePath = ''; // network path is /testnet, etc. or '' for mainnet private requestCache = new Map, expiry: number }>; @@ -16,6 +17,10 @@ export class LightningApiService { private httpClient: HttpClient, private stateService: StateService, ) { + this.apiBaseUrl = ''; // use relative URL by default + if (!stateService.isBrowser) { // except when inside AU SSR process + this.apiBaseUrl = this.stateService.env.NGINX_PROTOCOL + '://' + this.stateService.env.NGINX_HOSTNAME + ':' + this.stateService.env.NGINX_PORT; + } this.apiBasePath = ''; // assume mainnet by default this.stateService.networkChanged$.subscribe((network) => { if (network === 'bisq' && !this.stateService.env.BISQ_SEPARATE_BACKEND) { @@ -66,15 +71,15 @@ export class LightningApiService { } getNode$(publicKey: string): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey); } getNodeGroup$(name: string): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/nodes/group/' + name); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/group/' + name); } getChannel$(shortId: string): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/channels/' + shortId); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/channels/' + shortId); } getChannelsByNodeId$(publicKey: string, index: number = 0, status = 'open'): Observable { @@ -84,57 +89,57 @@ export class LightningApiService { .set('status', status) ; - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/channels', { params, observe: 'response' }); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/channels', { params, observe: 'response' }); } getLatestStatistics$(): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/statistics/latest'); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/statistics/latest'); } listNodeStats$(publicKey: string): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/statistics'); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/statistics'); } getNodeFeeHistogram$(publicKey: string): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/fees/histogram'); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/' + publicKey + '/fees/histogram'); } getNodesRanking$(): Observable { - return this.httpClient.get(this.apiBasePath + '/api/v1/lightning/nodes/rankings'); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/rankings'); } listChannelStats$(publicKey: string): Observable { - return this.httpClient.get(this.apiBasePath + '/channels/' + publicKey + '/statistics'); + return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + '/channels/' + publicKey + '/statistics'); } listStatistics$(interval: string | undefined): Observable { return this.httpClient.get( - this.apiBasePath + '/api/v1/lightning/statistics' + + this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/statistics' + (interval !== undefined ? `/${interval}` : ''), { observe: 'response' } ); } getTopNodesByCapacity$(): Observable { return this.httpClient.get( - this.apiBasePath + '/api/v1/lightning/nodes/rankings/liquidity' + this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/rankings/liquidity' ); } getTopNodesByChannels$(): Observable { return this.httpClient.get( - this.apiBasePath + '/api/v1/lightning/nodes/rankings/connectivity' + this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/rankings/connectivity' ); } getPenaltyClosedChannels$(): Observable { return this.httpClient.get( - this.apiBasePath + '/api/v1/lightning/penalties' + this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/penalties' ); } getOldestNodes$(): Observable { return this.httpClient.get( - this.apiBasePath + '/api/v1/lightning/nodes/rankings/age' + this.apiBaseUrl + this.apiBasePath + '/api/v1/lightning/nodes/rankings/age' ); } } diff --git a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts index a8c931da8..fd72cddfe 100644 --- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts +++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.ts @@ -1,5 +1,5 @@ -import { AfterViewInit, ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, OnInit } from '@angular/core'; +import { Observable, merge } from 'rxjs'; import { share } from 'rxjs/operators'; import { INodesRanking, INodesStatistics } from '../../interfaces/node-api.interface'; import { SeoService } from '../../services/seo.service'; @@ -24,6 +24,7 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit { private seoService: SeoService, private ogService: OpenGraphService, private stateService: StateService, + private cd: ChangeDetectorRef, ) { } ngOnInit(): void { @@ -35,6 +36,12 @@ export class LightningDashboardComponent implements OnInit, AfterViewInit { this.nodesRanking$ = this.lightningApiService.getNodesRanking$().pipe(share()); this.statistics$ = this.lightningApiService.getLatestStatistics$().pipe(share()); + + if (!this.stateService.isBrowser) { + merge(this.nodesRanking$, this.statistics$).subscribe(() => { + this.cd.markForCheck(); + }); + } } ngAfterViewInit(): void { diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html index 4b3a13016..d8eb9e868 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.html @@ -1,7 +1,7 @@

Fee distribution

-
+
diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss index d738daa81..9fd7f2dba 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.scss @@ -1,5 +1,7 @@ .full-container { + position: relative; margin-top: 25px; margin-bottom: 25px; min-height: 100%; -} + min-height: 450px; +} \ No newline at end of file diff --git a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts index ad667bcf6..f20a5123c 100644 --- a/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts +++ b/frontend/src/app/lightning/node-fee-chart/node-fee-chart.component.ts @@ -5,6 +5,7 @@ import { download } from '../../shared/graphs.utils'; import { LightningApiService } from '../lightning-api.service'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe'; +import { StateService } from '../../services/state.service'; @Component({ selector: 'app-node-fee-chart', @@ -33,6 +34,7 @@ export class NodeFeeChartComponent implements OnInit { constructor( @Inject(LOCALE_ID) public locale: string, private lightningApiService: LightningApiService, + public stateService: StateService, private activatedRoute: ActivatedRoute, private amountShortenerPipe: AmountShortenerPipe, ) { diff --git a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss index 558ad68a6..16482a0da 100644 --- a/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss +++ b/frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.scss @@ -33,7 +33,6 @@ min-height: 400px; margin-top: 25px; margin-bottom: 25px; - min-height: 100%; } .full-container.widget { height: 250px; diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.html b/frontend/src/app/lightning/nodes-channels/node-channels.component.html index c3a865a0f..db4a3e07e 100644 --- a/frontend/src/app/lightning/nodes-channels/node-channels.component.html +++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.html @@ -1,9 +1,11 @@ -
-

Active channels map

-
+
+
+

Active channels map

+
+
+
+ +
- - diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.scss b/frontend/src/app/lightning/nodes-channels/node-channels.component.scss index 4d7b4de0e..78510203f 100644 --- a/frontend/src/app/lightning/nodes-channels/node-channels.component.scss +++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.scss @@ -1,5 +1,13 @@ +.node-channels-container { + position: relative; +} + .loading-spinner { - min-height: 455px; + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; z-index: 100; } diff --git a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts index be596d8f9..1954e429a 100644 --- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts +++ b/frontend/src/app/lightning/nodes-channels/node-channels.component.ts @@ -33,7 +33,7 @@ export class NodeChannels implements OnChanges { private amountShortenerPipe: AmountShortenerPipe, private zone: NgZone, private router: Router, - private stateService: StateService, + public stateService: StateService, ) {} ngOnChanges(): void { diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html index aa005933a..52d74c806 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html @@ -43,10 +43,6 @@ (chartInit)="onChartInit($event)">
-
- -
-
@@ -74,6 +70,9 @@
+
+ +
diff --git a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts index 3d8a4b861..ddcfb81ad 100644 --- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts +++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.ts @@ -44,7 +44,7 @@ export class NodesPerISPChartComponent implements OnInit { private amountShortenerPipe: AmountShortenerPipe, private router: Router, private zone: NgZone, - private stateService: StateService, + public stateService: StateService, ) { } diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html index b0bfc8295..5fd9d257e 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html @@ -44,7 +44,7 @@
-
+
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts index 8bcf01015..2763c319f 100644 --- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts +++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.ts @@ -11,6 +11,7 @@ import { download } from '../../shared/graphs.utils'; import { LightningApiService } from '../lightning-api.service'; import { AmountShortenerPipe } from '../../shared/pipes/amount-shortener.pipe'; import { isMobile } from '../../shared/common.utils'; +import { StateService } from '../../services/state.service'; @Component({ selector: 'app-lightning-statistics-chart', @@ -55,6 +56,7 @@ export class LightningStatisticsChartComponent implements OnInit, OnChanges { private formBuilder: UntypedFormBuilder, private storageService: StorageService, private miningService: MiningService, + public stateService: StateService, private amountShortenerPipe: AmountShortenerPipe, ) { }