mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-02-24 14:50:52 +01:00
Code Issues Projects Releases Wiki Activity

display block health as badge

Browse source
This commit is contained in:
Mononaut 2022-12-19 19:02:50 -06:00
parent 343a48818b
commit c4d5ea971e
No known key found for this signature in database
GPG key ID: A3F058E41374C04E
4 changed files with 49 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/app/components/block/block.component.html
View file

@ -57,8 +57,21 @@
<tr *ngIf="auditEnabled">
<td i18n="block.health">Block health</td>
<td>
<span *ngIf="blockAudit?.matchRate != null">{{ blockAudit.matchRate }}%</span>
<span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</span>
<span
class="health-badge badge"
[class.badge-success]="blockAudit?.matchRate >= 99"
[class.badge-warning]="blockAudit?.matchRate >= 75 && blockAudit?.matchRate < 99"
[class.badge-danger]="blockAudit?.matchRate < 75"
*ngIf="blockAudit?.matchRate != null; else nullHealth"
>{{ blockAudit?.matchRate }}%</span>
<ng-template #nullHealth>
<ng-container *ngIf="!isLoadingAudit; else loadingHealth">
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
</ng-container>
</ng-template>
<ng-template #loadingHealth>
<span class="skeleton-loader" style="max-width: 60px"></span>
</ng-template>
</td>
</tr>
<ng-container *ngIf="webGlEnabled && (auditDataMissing || !indexingAvailable)">

22
frontend/src/app/components/block/block.component.ts
View file

@ -43,6 +43,7 @@ export class BlockComponent implements OnInit, OnDestroy {
strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string;
isLoadingOverview = true;
isLoadingAudit = true;
error: any;
blockSubsidy: number;
fees: number;
@ -297,13 +298,18 @@ export class BlockComponent implements OnInit, OnDestroy {
this.auditSubscription = block$.pipe(
startWith(null),
pairwise(),
switchMap(([prevBlock, block]) => this.apiService.getBlockAudit$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
return of([]);
})
)
switchMap(([prevBlock, block]) => {
this.isLoadingAudit = true;
this.blockAudit = null;
return this.apiService.getBlockAudit$(block.id)
.pipe(
catchError((err) => {
this.overviewError = err;
this.isLoadingAudit = false;
return of([]);
})
);
}
),
filter((response) => response != null),
map((response) => {
@ -375,12 +381,14 @@ export class BlockComponent implements OnInit, OnDestroy {
console.log(err);
this.error = err;
this.isLoadingOverview = false;
this.isLoadingAudit = false;
return of(null);
}),
).subscribe((blockAudit) => {
this.blockAudit = blockAudit;
this.setupBlockGraphs();
this.isLoadingOverview = false;
this.isLoadingAudit = false;
});
}

26
frontend/src/app/components/blocks-list/blocks-list.component.html
View file

@ -46,16 +46,22 @@
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<a class="clear-link" [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null">
<div class="progress progress-health">
<div class="progress-bar progress-bar-health" role="progressbar"
[ngStyle]="{'width': (100 - (auditScores[block.id] || 0)) + '%' }"></div>
<div class="progress-text">
<span *ngIf="auditScores[block.id] != null;">{{ auditScores[block.id] }}%</span>
<span *ngIf="auditScores[block.id] == null">~</span>
</div>
</div>
</a>
<a
class="health-badge badge"
[class.badge-success]="auditScores[block.id] >= 99"
[class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
[class.badge-danger]="auditScores[block.id] < 75"
[routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
*ngIf="auditScores[block.id] != null; else nullHealth"
>{{ auditScores[block.id] }}%</a>
<ng-template #nullHealth>
<ng-container *ngIf="!loadingScores; else loadingHealth">
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
</ng-container>
</ng-template>
<ng-template #loadingHealth>
<span class="skeleton-loader" style="max-width: 60px"></span>
</ng-template>
</td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>

3
frontend/src/app/components/blocks-list/blocks-list.component.ts
View file

@ -23,6 +23,7 @@ export class BlocksList implements OnInit, OnDestroy {
indexingAvailable = false;
isLoading = true;
loadingScores = true;
fromBlockHeight = undefined;
paginationMaxSize: number;
page = 1;
@ -113,6 +114,7 @@ export class BlocksList implements OnInit, OnDestroy {
if (this.indexingAvailable) {
this.auditScoreSubscription = this.fromHeightSubject.pipe(
switchMap((fromBlockHeight) => {
this.loadingScores = true;
return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
.pipe(
catchError(() => {
@ -124,6 +126,7 @@ export class BlocksList implements OnInit, OnDestroy {
Object.values(scores).forEach(score => {
this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
});
this.loadingScores = false;
});
this.latestScoreSubscription = this.stateService.blocks$.pipe(