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

Merge pull request #2899 from mempool/mononaut/audit-toggle

Browse Source 
toggle to enable/disable block audits
This commit is contained in:
softsimon
2023-01-27 12:37:33 +04:00
committed by GitHub
parent 687451e5ee 714700d8f1
commit dd3d047aa8
7 changed files with 88 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/app/components/block/block.component.html
View File

@@ -28,8 +28,6 @@
<div class="clearfix"></div>
<div class="box" *ngIf="!error">
<div class="row">
<div class="col-sm">
@@ -54,7 +52,7 @@
<td i18n="block.weight">Weight</td>
<td [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></td>
</tr>
<tr *ngIf="!auditDataMissing && indexingAvailable">
<tr *ngIf="auditAvailable">
<td i18n="block.health">Block health</td>
<td>
<span
@@ -88,21 +86,21 @@
<tr>
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
<tr *ngIf="!auditDataMissing && indexingAvailable">
<tr *ngIf="showAudit">
<td colspan="2"><span class="skeleton-loader"></span></td>
</tr>
</ng-template>
<ng-container *ngIf="isMobile || (webGlEnabled && (auditDataMissing || !indexingAvailable)); then restOfTable;"></ng-container>
<ng-container *ngIf="isMobile || (webGlEnabled && !showAudit); then restOfTable;"></ng-container>
</tbody>
</table>
</div>
<div class="col-sm">
<table class="table table-borderless table-striped" *ngIf="!isMobile && !(webGlEnabled && (auditDataMissing || !indexingAvailable))">
<table class="table table-borderless table-striped" *ngIf="!isMobile && !(webGlEnabled && !showAudit)">
<tbody>
<ng-container *ngTemplateOutlet="restOfTable"></ng-container>
</tbody>
</table>
<div class="col-sm chart-container" *ngIf="webGlEnabled && (!indexingAvailable || auditDataMissing)">
<div class="col-sm chart-container" *ngIf="webGlEnabled && !showAudit">
<app-block-overview-graph
#blockGraphActual
[isLoading]="isLoadingOverview"
@@ -199,13 +197,14 @@
</ng-template>
</ng-template>
<span id="overview"></span>
<br>
<ng-container *ngIf="showAudit">
<span id="overview"></span>
<br>
</ng-container>
<!-- VISUALIZATIONS -->
<div class="box" *ngIf="!error && webGlEnabled && indexingAvailable && !auditDataMissing">
<div class="nav nav-tabs" *ngIf="isMobile && auditEnabled">
<div class="box" *ngIf="!error && webGlEnabled && showAudit">
<div class="nav nav-tabs" *ngIf="isMobile && showAudit">
<a class="nav-link" [class.active]="mode === 'projected'" i18n="block.projected"
fragment="projected" (click)="changeMode('projected')">Projected</a>
<a class="nav-link" [class.active]="mode === 'actual'" i18n="block.actual"
@@ -217,7 +216,7 @@
<div class="block-graph-wrapper">
<app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
[blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx"
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !auditEnabled"></app-block-overview-graph>
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
<ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
</div>
</div>
@@ -226,7 +225,7 @@
<div class="block-graph-wrapper">
<app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
[blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !auditEnabled"></app-block-overview-graph>
(txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
<ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
</div>
</div>
@@ -280,8 +279,22 @@
</div>
</div>
<div class="text-right mt-3">
<button type="button" class="btn btn-outline-info btn-sm btn-details" (click)="toggleShowDetails()" i18n="transaction.details|Transaction Details">Details</button>
<div class="text-right mt-3 toggle-btns">
<button
*ngIf="webGlEnabled && auditAvailable"
type="button"
class="btn btn-outline-info btn-sm btn-audit"
[class.active]="auditModeEnabled"
(click)="toggleAuditMode()"
i18n="block.toggle-audit|Toggle Audit"
>Audit</button>
<button
type="button"
class="btn btn-outline-info btn-sm btn-details"
[class.active]="showDetails"
(click)="toggleShowDetails()"
i18n="transaction.details|Transaction Details"
>Details</button>
</div>
<div #blockTxTitle id="block-tx-title" class="block-tx-title">

7
frontend/src/app/components/block/block.component.scss
View File

@@ -75,14 +75,19 @@ h1 {
}
}
.btn-details {
.toggle-btns {
position: relative;
z-index: 2;
top: 7px;
@media (min-width: 550px) {
top: 0px;
}
}
.btn-audit {
margin-right: .5em;
}
.block-tx-title {
display: flex;
justify-content: space-between;

45
frontend/src/app/components/block/block.component.ts
View File

@@ -58,8 +58,9 @@ export class BlockComponent implements OnInit, OnDestroy {
overviewError: any = null;
webGlEnabled = true;
indexingAvailable = false;
auditEnabled = true;
auditDataMissing: boolean;
auditModeEnabled: boolean = !this.stateService.hideAudit.value;
auditAvailable = true;
showAudit: boolean;
isMobile = window.innerWidth <= 767.98;
hoverTx: string;
numMissing: number = 0;
@@ -79,6 +80,7 @@ export class BlockComponent implements OnInit, OnDestroy {
timeLtrSubscription: Subscription;
timeLtr: boolean;
childChangeSubscription: Subscription;
auditPrefSubscription: Subscription;
@ViewChildren('blockGraphProjected') blockGraphProjected: QueryList<BlockOverviewGraphComponent>;
@ViewChildren('blockGraphActual') blockGraphActual: QueryList<BlockOverviewGraphComponent>;
@@ -108,7 +110,12 @@ export class BlockComponent implements OnInit, OnDestroy {
});
this.indexingAvailable = (this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true);
this.auditEnabled = this.indexingAvailable;
this.setAuditAvailable(this.indexingAvailable);
this.auditPrefSubscription = this.stateService.hideAudit.subscribe((hide) => {
this.auditModeEnabled = !hide;
this.showAudit = this.auditAvailable && this.auditModeEnabled;
});
this.txsLoadingStatus$ = this.route.paramMap
.pipe(
@@ -138,11 +145,11 @@ export class BlockComponent implements OnInit, OnDestroy {
this.page = 1;
this.error = undefined;
this.fees = undefined;
this.auditDataMissing = false;
this.stateService.markBlock$.next({});
if (history.state.data && history.state.data.blockHeight) {
this.blockHeight = history.state.data.blockHeight;
this.updateAuditDataMissingFromBlockHeight(this.blockHeight);
this.updateAuditAvailableFromBlockHeight(this.blockHeight);
}
let isBlockHeight = false;
@@ -155,7 +162,7 @@ export class BlockComponent implements OnInit, OnDestroy {
if (history.state.data && history.state.data.block) {
this.blockHeight = history.state.data.block.height;
this.updateAuditDataMissingFromBlockHeight(this.blockHeight);
this.updateAuditAvailableFromBlockHeight(this.blockHeight);
return of(history.state.data.block);
} else {
this.isLoadingBlock = true;
@@ -217,7 +224,7 @@ export class BlockComponent implements OnInit, OnDestroy {
this.apiService.getBlockAudit$(block.previousblockhash);
}, 100);
}
this.updateAuditDataMissingFromBlockHeight(block.height);
this.updateAuditAvailableFromBlockHeight(block.height);
this.block = block;
this.blockHeight = block.height;
this.lastBlockHeight = this.blockHeight;
@@ -369,10 +376,9 @@ export class BlockComponent implements OnInit, OnDestroy {
for (const tx of blockAudit.transactions) {
inBlock[tx.txid] = true;
}
this.auditEnabled = true;
this.setAuditAvailable(true);
} else {
this.auditEnabled = false;
this.auditDataMissing = true;
this.setAuditAvailable(false);
}
return blockAudit;
}),
@@ -381,6 +387,7 @@ export class BlockComponent implements OnInit, OnDestroy {
this.error = err;
this.isLoadingOverview = false;
this.isLoadingAudit = false;
this.setAuditAvailable(false);
return of(null);
}),
).subscribe((blockAudit) => {
@@ -440,6 +447,7 @@ export class BlockComponent implements OnInit, OnDestroy {
this.networkChangedSubscription.unsubscribe();
this.queryParamsSubscription.unsubscribe();
this.timeLtrSubscription.unsubscribe();
this.auditSubscription.unsubscribe();
this.unsubscribeNextBlockSubscriptions();
this.childChangeSubscription.unsubscribe();
}
@@ -595,21 +603,30 @@ export class BlockComponent implements OnInit, OnDestroy {
}
}
updateAuditDataMissingFromBlockHeight(blockHeight: number): void {
setAuditAvailable(available: boolean): void {
this.auditAvailable = available;
this.showAudit = this.auditAvailable && this.auditModeEnabled;
}
toggleAuditMode(): void {
this.stateService.hideAudit.next(this.auditModeEnabled);
}
updateAuditAvailableFromBlockHeight(blockHeight: number): void {
switch (this.stateService.network) {
case 'testnet':
if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
this.setAuditAvailable(true);
}
break;
case 'signet':
if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
this.setAuditAvailable(true);
}
break;
default:
if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
this.auditDataMissing = true;
this.setAuditAvailable(true);
}
}
}