machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1281 from mempool/simon/footer-transactions-bar-fix

Browse Source
This commit is contained in:
wiz 2022-02-23 03:35:54 +00:00 committed by GitHub
commit b2d591b5bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/components/footer/footer.component.html
View File

@ -2,15 +2,18 @@
<div class="container-xl"> <div class="container-xl">
<div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData"> <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
<div class="col d-none d-sm-block"> <div class="col d-none d-sm-block">
<span class="txPerSecond" i18n="footer.tx-vbytes-per-second">Tx vBytes per second:</span> <span class="txPerSecond" i18n="dashboard.incoming-transactions">Incoming transactions</span>&nbsp;
<span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync"> <ng-template [ngIf]="(isLoadingWebSocket$ | async) === false && mempoolInfoData" [ngIfElse]="loadingTransactions">
&nbsp;<span class="badge badge-pill badge-warning" i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</span> <span *ngIf="(mempoolLoadingStatus$ | async) !== 100; else inSync">
&nbsp;<span class="badge badge-pill badge-warning"><ng-container i18n="dashboard.backend-is-synchronizing">Backend is synchronizing</ng-container> ({{ mempoolLoadingStatus$ | async }}%)</span>
</span> </span>
<ng-template #inSync> <ng-template #inSync>
<div class="progress sub-text"> <div class="progress inc-tx-progress-bar">
<div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div> <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
<div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
</div> </div>
</ng-template> </ng-template>
</ng-template>
</div> </div>
<div class="col"> <div class="col">
<span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span> <span class="unconfirmedTx"><ng-container i18n="dashboard.unconfirmed|Unconfirmed count">Unconfirmed</ng-container>:</span>
@ -25,3 +28,7 @@
</div> </div>
</div> </div>
</footer> </footer>
<ng-template #loadingTransactions>
<div class="skeleton-loader skeleton-loader-transactions"></div>
</ng-template>

41
frontend/src/app/components/footer/footer.component.ts
View File

@ -13,7 +13,7 @@ interface MempoolInfoData {
memPoolInfo: MempoolInfo; memPoolInfo: MempoolInfo;
vBytesPerSecond: number; vBytesPerSecond: number;
progressWidth: string; progressWidth: string;
progressClass: string; progressColor: string;
} }
@Component({ @Component({
@ -26,12 +26,20 @@ export class FooterComponent implements OnInit {
mempoolBlocksData$: Observable<MempoolBlocksData>; mempoolBlocksData$: Observable<MempoolBlocksData>;
mempoolInfoData$: Observable<MempoolInfoData>; mempoolInfoData$: Observable<MempoolInfoData>;
vBytesPerSecondLimit = 1667; vBytesPerSecondLimit = 1667;
isLoadingWebSocket$: Observable<boolean>;
mempoolLoadingStatus$: Observable<number>;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
this.mempoolLoadingStatus$ = this.stateService.loadingIndicators$
.pipe(
map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
);
this.mempoolInfoData$ = combineLatest([ this.mempoolInfoData$ = combineLatest([
this.stateService.mempoolInfo$, this.stateService.mempoolInfo$,
this.stateService.vbytesPerSecond$ this.stateService.vbytesPerSecond$
@ -40,18 +48,37 @@ export class FooterComponent implements OnInit {
map(([mempoolInfo, vbytesPerSecond]) => { map(([mempoolInfo, vbytesPerSecond]) => {
const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100); const percent = Math.round((Math.min(vbytesPerSecond, this.vBytesPerSecondLimit) / this.vBytesPerSecondLimit) * 100);
let progressClass = 'bg-danger'; let progressColor = '#7CB342';
if (percent <= 75) { if (vbytesPerSecond > 1667) {
progressClass = 'bg-success'; progressColor = '#FDD835';
} else if (percent <= 99) { }
progressClass = 'bg-warning'; if (vbytesPerSecond > 2000) {
progressColor = '#FFB300';
}
if (vbytesPerSecond > 2500) {
progressColor = '#FB8C00';
}
if (vbytesPerSecond > 3000) {
progressColor = '#F4511E';
}
if (vbytesPerSecond > 3500) {
progressColor = '#D81B60';
}
const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100);
let mempoolSizeProgress = 'bg-danger';
if (mempoolSizePercentage <= 50) {
mempoolSizeProgress = 'bg-success';
} else if (mempoolSizePercentage <= 75) {
mempoolSizeProgress = 'bg-warning';
} }
return { return {
memPoolInfo: mempoolInfo, memPoolInfo: mempoolInfo,
vBytesPerSecond: vbytesPerSecond, vBytesPerSecond: vbytesPerSecond,
progressWidth: percent + '%', progressWidth: percent + '%',
progressClass: progressClass, progressColor: progressColor,
mempoolSizeProgress: mempoolSizeProgress,
}; };
}) })
); );