mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2418 from mempool/nymkappa/bugfix/node-page-js-error

Browse Source 
Fix js crash in node page and add loading spinner to channel tree chart
This commit is contained in:
wiz 2022-08-28 16:33:12 +02:00 committed by GitHub
commit 49813c9629
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/lightning/channels-list/channels-list.component.html
View File

@ -87,8 +87,6 @@
</ng-template>
<ng-template #skeleton>
<h2 class="float-left" i18n="lightning.channels">Channels</h2>
<table class="table table-borderless">
<ng-container *ngTemplateOutlet="tableHeader"></ng-container>
<tbody>

1
frontend/src/app/lightning/node/node.component.html
View File

@ -131,7 +131,6 @@
<app-node-statistics-chart [publicKey]="node.public_key"></app-node-statistics-chart>
</div>
<h2 i18n="lightning.active-channels-map">Active channels map</h2>
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between">

9
frontend/src/app/lightning/nodes-channels/node-channels.component.html
View File

@ -1,2 +1,9 @@
<div *ngIf="channelsObservable$ | async" echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
<div *ngIf="channelsObservable$ | async" style="min-height: 455px">
<h2 i18n="lightning.active-channels-map">Active channels map</h2>
<div echarts [initOpts]="chartInitOptions" [options]="chartOptions" (chartInit)="onChartInit($event)">
</div>
</div>
<div *ngIf="isLoading" class="text-center loading-spinner">
<div class="spinner-border text-light"></div>
</div>

9
frontend/src/app/lightning/nodes-channels/node-channels.component.scss
View File

@ -0,0 +1,9 @@
.loading-spinner {
min-height: 455px;
z-index: 100;
}
.spinner-border {
position: relative;
top: 225px;
}

27
frontend/src/app/lightning/nodes-channels/node-channels.component.ts
View File

@ -1,8 +1,8 @@
import { formatNumber } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnChanges } from '@angular/core';
import { Router } from '@angular/router';
import { ECharts, EChartsOption, TreemapSeriesOption } from 'echarts';
import { Observable, tap } from 'rxjs';
import { Observable, share, switchMap, tap } from 'rxjs';
import { lerpColor } from 'src/app/shared/graphs.utils';
import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
import { LightningApiService } from '../lightning-api.service';
@ -25,7 +25,7 @@ export class NodeChannels implements OnChanges {
};
channelsObservable$: Observable<any>;
isLoading: true;
isLoading = true;
constructor(
@Inject(LOCALE_ID) public locale: string,
@ -41,9 +41,20 @@ export class NodeChannels implements OnChanges {
this.channelsObservable$ = this.lightningApiService.getChannelsByNodeId$(this.publicKey, -1, 'active')
.pipe(
tap((response) => {
const biggestCapacity = response.body[0].capacity;
this.prepareChartOptions(response.body.map(channel => {
switchMap((response) => {
this.isLoading = true;
if ((response.body?.length ?? 0) <= 0) {
return [];
}
return [response.body];
}),
tap((body: any[]) => {
if (body.length === 0) {
this.isLoading = false;
return;
}
const biggestCapacity = body[0].capacity;
this.prepareChartOptions(body.map(channel => {
return {
name: channel.node.alias,
value: channel.capacity,
@ -54,7 +65,9 @@ export class NodeChannels implements OnChanges {
}
};
}));
})
this.isLoading = false;
}),
share(),
);
}