Skip to content

Commit

Permalink
cleans up the chain daemon page, uses translation tags, looks better.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Snider
Snider committed Mar 29, 2022
1 parent 2000edc commit ac7e9b8
Show file tree
Hide file tree
Showing 14 changed files with 1,617 additions and 1,441 deletions.
2,402 changes: 1,234 additions & 1,168 deletions i18n-edit.babel
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/app/modules/chain/blockchain-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {BlockchainComponent} from '@module/chain/blockchain.component';
import {BlockdetailsComponent} from "@module/chain/blockdetails/blockdetails.component";
import {BlockDetailsComponent} from "@module/chain/components/block/details.component";

const routes: Routes = [
{
path: 'chain/block/:id',
component: BlockdetailsComponent,
component: BlockDetailsComponent,
data: {
title: 'view.chain.title',
heading: 'view.chain.heading',
Expand Down
204 changes: 47 additions & 157 deletions src/app/modules/chain/blockchain.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,163 +1,53 @@
<div class="container-fluid" fxLayout="row">
<mat-card fxFlex="100">

<mat-form-field fxFlex="25" appearance="fill">
<mat-label>View Block by Hash</mat-label>
<input type="text" matInput [formControl]="blockSearch"
placeholder="Block Hash. ">
<mat-hint></mat-hint>
</mat-form-field>
<button [routerLink]="['/','chain', 'block', blockSearch.value]" mat-button>Go</button>


</mat-card>
</div>
<div class="container-fluid" fxLayout="row">
<ng-container *ngIf="status_daemon === 0">
<mat-card fxFill="100">
<mat-card-title>Lethean Blockchain Loading</mat-card-title>
<mat-card-content>
<p fxFlex="50">
This should only take a few seconds, for support visit <code>sparta.lt.hn</code>
</p>
<div fxFlex="50">
<div
class="ngx-preloader"
>
<div class="arc arc-0"></div>
<div class="arc arc-1"></div>
<div class="arc arc-2"></div>
<div class="arc arc-3"></div>
<div class="arc arc-4"></div>
<div class="arc arc-5"></div>
<div class="arc arc-6"></div>
<div class="arc arc-7"></div>
<div class="arc arc-8"></div>
<div class="arc arc-9"></div>
<div class="arc arc-10"></div>
<div class="arc arc-11"></div>
<div class="arc arc-12"></div>
<div class="arc arc-13"></div>
<div class="arc arc-14"></div>
<div class="arc arc-15"></div>
<div class="arc arc-16"></div>
<div class="arc arc-17"></div>
<div class="arc arc-18"></div>
<div class="arc arc-19"></div>
<div class="arc arc-20"></div>
<div class="arc arc-21"></div>
<div class="arc arc-22"></div>
<div class="arc arc-23"></div>
<div class="arc arc-24"></div>
</div>
</div>
</mat-card-content>
</mat-card>
</ng-container>
<ng-container *ngIf="status_daemon > 0">
<mat-card fxFlex="25" style="padding: 0;">
<mat-card-title style="padding: 16px;">Information</mat-card-title>
<mat-card-content style="padding: 0;">
<mat-list *ngIf="chainInfo as info" dense>

<mat-list-item>Status: {{info.status }}</mat-list-item>
<mat-list-item>Daemon Start: {{info.start_time * 1000 | amTimeAgo }}</mat-list-item>
<mat-list-item>Height: {{info.height }}</mat-list-item>
<mat-list-item>Target Height: {{info.target_height }}</mat-list-item>
<mat-list-item>Top:&nbsp;<span [innerHTML]="info.top_block_hash | hashLink | keepHtml" ></span></mat-list-item>
<mat-list-item>White Peers: {{info.white_peerlist_size }}</mat-list-item>
<mat-list-item>Grey Peers: {{info.grey_peerlist_size }}</mat-list-item>
<mat-list-item>Difficulty: {{info.difficulty | hashrate }}</mat-list-item>
<mat-list-item>Cumulative: {{info.cumulative_difficulty | hashrate }}</mat-list-item>
<mat-list-item>Connect INC: {{info.incoming_connections_count }}</mat-list-item>
<mat-list-item>Connect OUT: {{info.outgoing_connections_count }}</mat-list-item>
<mat-list-item>TX Count: {{info.tx_count }}</mat-list-item>
<mat-list-item>TX Pool Size: {{info.tx_pool_size }}</mat-list-item>
<mat-list-item>Testnet: {{info.testnet }}</mat-list-item>
<mat-list-item>Block Time: {{info.target }}</mat-list-item>
<mat-list-item>Alt Blocks: {{info.alt_blocks_count }}</mat-list-item>
<mat-list-item>Block Size Limit: {{info.block_size_limit }}</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
<mat-card fxFlex="75">
<mat-card-title>
Chain Status:
<ng-container *ngIf="chainInfo as info">&nbsp;
<span *ngIf="info.target_height > 0" style="font-family: monospace; font-size: 12px;">
<div class="container-fluid" >
<div style="padding: 12px 12px 3px 12px;">
<mat-toolbar>
<mat-toolbar-row>
{{ 'app.lthn.chain.title' | translate }}
<ng-container *ngIf="chainInfo as info">&nbsp;
<span *ngIf="info.target_height > 0" style="font-family: monospace; font-size: 12px;">
({{info.height | number }}/{{info.target_height | number}} = {{ (info.height/info.target_height) | percent:'1.2-3' }})
</span>
<span *ngIf="info.target_height === 0" style="color: green; font-size: 14px;">
<span *ngIf="info.target_height === 0" style="color: green; font-size: 14px;">
Synchronized
</span>
</ng-container>

</mat-card-title>
<!-- <mat-card-actions>-->
<!-- <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">-->
<!-- <mat-icon>view_column</mat-icon>-->
<!-- </button>-->
<!-- (page)="this.getBlocks(info.height - page.size, info.height - 1)" </mat-card-actions>-->
<mat-card-content *ngIf="chainInfo as info">
<p>The data shown here comes from your local data, accurate to the point in time you have synced;</p>
<p>Advanced users can "pop off" blocks from their local chain to see the work at particular heights</p>
<ngx-datatable
class=" ngx-datatable"
[rows]="blocks['headers']"
[loadingIndicator]="false"
[columns]="columns"
[columnMode]="ColumnMode.force"
[headerHeight]="30"
[footerHeight]="50"
[externalPaging]="true"
[count]="page.totalElements"
[offset]="page.pageNumber"
[limit]="page.size"
[sorts]="[{ prop: 'timestamp', dir: 'desc' }]"
(page)="page.pageNumber = $event.offset;getBlocks();"
>

<ngx-datatable-column *ngFor="let col of columns" [prop]="col.prop" [name]="col.name | translate">

<ng-template let-value="value" ngx-datatable-cell-template>
<span *ngIf="col.prop === 'difficulty'">{{ value | hashrate}}</span>
<span *ngIf="col.prop === 'height'">{{ value | number }}</span>
<!-- <a class="lthn-brand" *ngIf="col.prop === 'hash'" [routerLink]="['/', 'chain', 'block', value]">{{ value | hashLink }}</a>-->
<a class="lthn-brand" *ngIf="col.prop === 'hash'" (click)="$event.stopPropagation();openDrawer(value);">{{ value | hashLink }}</a>
<span *ngIf="col.prop === 'orphan_status'">
<mat-icon style="color: green" *ngIf="!value">done</mat-icon>
<mat-icon style="color: red" *ngIf="value">close</mat-icon>
</span>
<span *ngIf="col.prop === 'timestamp'">{{ value | amFromUnix }}</span>
<span *ngIf="col.prop === 'block_size'">{{ value | number }}</span>
<span *ngIf="col.prop === 'depth'">{{ value | number }}</span>
<span *ngIf="col.prop === 'major_version'">{{ value }}</span>
<span *ngIf="col.prop === 'minor_version'">{{ value | number }}</span>
<span *ngIf="col.prop === 'nonce'">{{ value }}</span>
<span *ngIf="col.prop === 'num_txes'">{{ value | number }}</span>
<span *ngIf="col.prop === 'prev_hash'">{{ value }}</span>
</ng-template>

</ngx-datatable-column>

</ngx-datatable>


<!-- <mat-menu #menu="matMenu">-->
<!-- <button mat-menu-item *ngFor="let col of allColumns" (click)="toggle(col)">-->
<!-- <input type="checkbox" [id]="col.name" (click)="toggle(col)" [checked]="isChecked(col)" disabled/>&nbsp;-->
<!-- <label [attr.for]="col.name">{{ col.name }}</label>-->
</ng-container>
<span class="flex-spacer"></span>
<!-- <button [routerLink]="['/', 'wallet', 'new']" mat-button matTooltip="New Wallet">-->
<!-- <mat-icon>account_balance_wallet</mat-icon>-->
<!-- </button>-->
<!-- <button [routerLink]="['/', 'wallet', 'backup']" mat-button matTooltip="Backup">-->
<!-- <mat-icon>cloud_download</mat-icon>-->
<!-- </button>-->
<!-- <button [routerLink]="['/', 'wallet', 'restore']" mat-button matTooltip="Restore">-->
<!-- <mat-icon>cloud_upload</mat-icon>-->
<!-- </button>-->
<!-- <button (click)="wallet.closeWallet()" mat-button matTooltip="Close Wallet">-->
<!-- <mat-icon>close</mat-icon>-->
<!-- </button>-->
<!-- </mat-menu>-->
</mat-card-content>
</mat-card>
</ng-container>
</mat-toolbar-row>
</mat-toolbar>


<ngx-section>
<ngx-tabs [vertical]="true">
<ngx-tab label="Blocks">
<div *ngxIfTabActive>
<lthn-chain-ledger></lthn-chain-ledger>
</div>
</ngx-tab>
<ngx-tab label="Stats">
<div *ngxIfTabActive>
<lthn-chain-stats></lthn-chain-stats>
</div>
</ngx-tab>
<ngx-tab label="Configuration">
<div *ngxIfTabActive>
<lthn-chain-config></lthn-chain-config>
</div>
</ngx-tab>
</ngx-tabs>
</ngx-section>
</div>

</div>
<ng-template #editTmpl let-context="context">
<ngx-toolbar
[mainTitle]="'Block Information'">
</ngx-toolbar>
<section class="section">
<lthn-chain-blockdetails [id]="context.id"></lthn-chain-blockdetails>
</section>
</ng-template>

113 changes: 8 additions & 105 deletions src/app/modules/chain/blockchain.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,34 @@
import {Component, OnDestroy, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {ChartService} from '@module/chart/chart.service';
import {Component} from '@angular/core';
import {ChainGetInfo} from '@module/chain/interfaces/props/get_info';
import {interval, Subscription} from 'rxjs';
import {BlockHeader} from '@module/chain/interfaces/types/blockHeader';
import {ColumnMode} from '@swimlane/ngx-datatable';
import {FormControl} from '@angular/forms';
import {BlockchainService} from '@module/chain/blockchain.service';
import {FormControl, Validators} from '@angular/forms';
import {DrawerDirection, DrawerService} from '@swimlane/ngx-ui';

@Component({
selector: 'lthn-chain',
templateUrl: './blockchain.component.html',
providers: [ChartService]
templateUrl: './blockchain.component.html'
})
export class BlockchainComponent implements OnInit, OnDestroy {
export class BlockchainComponent {

columns: any = [];

page = {
size: 25,
totalElements: 0,
totalPages: 0,
pageNumber: 0
};

allColumns = [
{prop: 'height', name: 'plugin.lthn.chain.table.th.height', default: true},
{prop: 'difficulty', name: 'plugin.lthn.chain.table.th.difficulty', default: true},
{prop: 'hash', name: 'plugin.lthn.chain.table.th.hash', default: true},
{prop: 'orphan_status', name: 'plugin.lthn.chain.table.th.orphan_status', default: true},
//{ prop: 'reward', name: 'plugin.lthn.chain.table.th.reward', default: true },
{prop: 'timestamp', name: 'plugin.lthn.chain.table.th.timestamp', default: true}
// { prop: 'block_size', name: 'Block Size', default: true },
//{ prop: 'depth', name: 'plugin.lthn.chain.table.th.depth', default: true },
//{ prop: 'major_version', name: 'Block Major Version', default: true },
// { prop: 'minor_version', name: 'Block Minor Version', default: false },
// { prop: 'nonce', name: 'Block Nonce', default: false },
// { prop: 'num_txes', name: 'Transactions', default: true },
// { prop: 'prev_hash', name: 'Last Hash', default: true },
];
ColumnMode = ColumnMode;
blocks: BlockHeader[] ;
blocks: BlockHeader[];
chainInfo: ChainGetInfo;
@ViewChild('editTmpl', { static: false }) editTmpl: TemplateRef<any>;
private sub: Subscription[] = [];

recentTxs: any;
buildType: string;
status_daemon: number = 0;
blockSearch: FormControl;
start_height: number = null;
end_height: number = null;
constructor(
private chain: BlockchainService,
private drawerService: DrawerService) {

this.allColumns.forEach((col) => {
if (col.default) {

this.columns.push(
col
);
}
});
}


async ngOnInit() {
this.blockSearch = new FormControl('', [Validators.required]);

//this.chain.getInfo()
this.chainInfo = await this.chain.getInfo();
if (this.chainInfo) {
// we have chain data, and it talks to us set to amber
this.status_daemon = 1;
//console.log(data)
// if chain height + 4 to give 2~ blocks to be considered healthy
if (this.chainInfo.height + 4 > this.chainInfo.target_height) {
this.status_daemon = 2;
}
this.page.totalElements = this.chainInfo.height
} else {
this.status_daemon = 0;
}
await this.getBlocks()
constructor(public chain: BlockchainService) {

this.sub['interval'] = interval(5000).subscribe(async () => this.chainInfo = await this.chain.getInfo());

}

async getBlocks() {
let start_height = this.page.totalElements - this.page.pageNumber * this.page.size - 1
let end_height = this.page.totalElements - this.page.size - this.page.pageNumber * this.page.size

this.blocks = await this.chain.getBlocks(Math.max(0, end_height), Math.max(0, start_height));
}

toggle(col) {
const isChecked = this.isChecked(col);

if (isChecked) {
this.columns = this.columns.filter(c => {
return c.name !== col.name;
});
} else {
this.columns.push(col);
}
}

isChecked(col) {
return (
this.columns.find(c => {
return c.name === col.name;
}) !== undefined
);
}
async ngOnInit() {

public ngOnDestroy() {
this.sub.forEach((s) => s.unsubscribe());
}
openDrawer(id) {
this.drawerService.create({
direction: DrawerDirection.Left,
template: this.editTmpl,
closeOnOutsideClick: true,
context: { id}

});
}

}
Loading

0 comments on commit ac7e9b8

Please sign in to comment.