machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages 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"> <tr *ngIf="auditEnabled">
<td i18n="block.health">Block health</td> <td i18n="block.health">Block health</td>
<td> <td>
<span *ngIf="blockAudit?.matchRate != null">{{ blockAudit.matchRate }}%</span> <span
<span *ngIf="blockAudit?.matchRate === null" i18n="unknown">Unknown</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> </td>
</tr> </tr>
<ng-container *ngIf="webGlEnabled && (auditDataMissing || !indexingAvailable)"> <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[]; strippedTransactions: TransactionStripped[];
overviewTransitionDirection: string; overviewTransitionDirection: string;
isLoadingOverview = true; isLoadingOverview = true;
isLoadingAudit = true;
error: any; error: any;
blockSubsidy: number; blockSubsidy: number;
fees: number; fees: number;
@ -297,13 +298,18 @@ export class BlockComponent implements OnInit, OnDestroy {
this.auditSubscription = block$.pipe( this.auditSubscription = block$.pipe(
startWith(null), startWith(null),
pairwise(), pairwise(),
switchMap(([prevBlock, block]) => this.apiService.getBlockAudit$(block.id) switchMap(([prevBlock, block]) => {
.pipe( this.isLoadingAudit = true;
catchError((err) => { this.blockAudit = null;
this.overviewError = err; return this.apiService.getBlockAudit$(block.id)
return of([]); .pipe(
}) catchError((err) => {
) this.overviewError = err;
this.isLoadingAudit = false;
return of([]);
})
);
}
), ),
filter((response) => response != null), filter((response) => response != null),
map((response) => { map((response) => {
@ -375,12 +381,14 @@ export class BlockComponent implements OnInit, OnDestroy {
console.log(err); console.log(err);
this.error = err; this.error = err;
this.isLoadingOverview = false; this.isLoadingOverview = false;
this.isLoadingAudit = false;
return of(null); return of(null);
}), }),
).subscribe((blockAudit) => { ).subscribe((blockAudit) => {
this.blockAudit = blockAudit; this.blockAudit = blockAudit;
this.setupBlockGraphs(); this.setupBlockGraphs();
this.isLoadingOverview = false; 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> <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td> </td>
<td *ngIf="indexingAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <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"> <a
<div class="progress progress-health"> class="health-badge badge"
<div class="progress-bar progress-bar-health" role="progressbar" [class.badge-success]="auditScores[block.id] >= 99"
[ngStyle]="{'width': (100 - (auditScores[block.id] || 0)) + '%' }"></div> [class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
<div class="progress-text"> [class.badge-danger]="auditScores[block.id] < 75"
<span *ngIf="auditScores[block.id] != null;">{{ auditScores[block.id] }}%</span> [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
<span *ngIf="auditScores[block.id] == null">~</span> *ngIf="auditScores[block.id] != null; else nullHealth"
</div> >{{ auditScores[block.id] }}%</a>
</div> <ng-template #nullHealth>
</a> <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>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <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> <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; indexingAvailable = false;
isLoading = true; isLoading = true;
loadingScores = true;
fromBlockHeight = undefined; fromBlockHeight = undefined;
paginationMaxSize: number; paginationMaxSize: number;
page = 1; page = 1;
@ -113,6 +114,7 @@ export class BlocksList implements OnInit, OnDestroy {
if (this.indexingAvailable) { if (this.indexingAvailable) {
this.auditScoreSubscription = this.fromHeightSubject.pipe( this.auditScoreSubscription = this.fromHeightSubject.pipe(
switchMap((fromBlockHeight) => { switchMap((fromBlockHeight) => {
this.loadingScores = true;
return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight) return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
.pipe( .pipe(
catchError(() => { catchError(() => {
@ -124,6 +126,7 @@ export class BlocksList implements OnInit, OnDestroy {
Object.values(scores).forEach(score => { Object.values(scores).forEach(score => {
this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null; this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
}); });
this.loadingScores = false;
}); });
this.latestScoreSubscription = this.stateService.blocks$.pipe( this.latestScoreSubscription = this.stateService.blocks$.pipe(