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

Updated blocks list in /pool/{id} page

Browse Source
This commit is contained in:
nymkappa 2022-03-16 17:00:06 +01:00
parent 226b345c0a
commit 56bf267664
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
6 changed files with 202 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
backend/src/api/blocks.ts
View File

@ -12,6 +12,7 @@ import poolsRepository from '../repositories/PoolsRepository';
import blocksRepository from '../repositories/BlocksRepository'; import blocksRepository from '../repositories/BlocksRepository';
import loadingIndicators from './loading-indicators'; import loadingIndicators from './loading-indicators';
import BitcoinApi from './bitcoin/bitcoin-api'; import BitcoinApi from './bitcoin/bitcoin-api';
import { prepareBlock } from '../utils/blocks-utils';
class Blocks { class Blocks {
private blocks: BlockExtended[] = []; private blocks: BlockExtended[] = [];
@ -336,7 +337,7 @@ class Blocks {
public async $indexBlock(height: number): Promise<BlockExtended> { public async $indexBlock(height: number): Promise<BlockExtended> {
const dbBlock = await blocksRepository.$getBlockByHeight(height); const dbBlock = await blocksRepository.$getBlockByHeight(height);
if (dbBlock != null) { if (dbBlock != null) {
return this.prepareBlock(dbBlock); return prepareBlock(dbBlock);
} }
const blockHash = await bitcoinApi.$getBlockHash(height); const blockHash = await bitcoinApi.$getBlockHash(height);
@ -346,10 +347,11 @@ class Blocks {
await blocksRepository.$saveBlockInDatabase(blockExtended); await blocksRepository.$saveBlockInDatabase(blockExtended);
return this.prepareBlock(blockExtended); return prepareBlock(blockExtended);
} }
public async $getBlocksExtras(fromHeight: number, limit: number = 15): Promise<BlockExtended[]> { public async $getBlocksExtras(fromHeight: number, limit: number = 15,
poolId: number | undefined= undefined): Promise<BlockExtended[]> {
// Note - This API is breaking if indexing is not available. For now it is okay because we only // Note - This API is breaking if indexing is not available. For now it is okay because we only
// use it for the mining pages, and mining pages should not be available if indexing is turned off. // use it for the mining pages, and mining pages should not be available if indexing is turned off.
// I'll need to fix it before we refactor the block(s) related pages // I'll need to fix it before we refactor the block(s) related pages
@ -378,7 +380,7 @@ class Blocks {
if (!block && Common.indexingEnabled()) { if (!block && Common.indexingEnabled()) {
block = await this.$indexBlock(currentHeight); block = await this.$indexBlock(currentHeight);
} else if (!block) { } else if (!block) {
block = this.prepareBlock(await bitcoinApi.$getBlock(nextHash)); block = prepareBlock(await bitcoinApi.$getBlock(nextHash));
} }
returnBlocks.push(block); returnBlocks.push(block);
nextHash = block.previousblockhash; nextHash = block.previousblockhash;
@ -393,34 +395,6 @@ class Blocks {
} }
} }
private prepareBlock(block: any): BlockExtended {
return <BlockExtended>{
id: block.id ?? block.hash, // hash for indexed block
timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
height: block.height,
version: block.version,
bits: block.bits,
nonce: block.nonce,
difficulty: block.difficulty,
merkle_root: block.merkle_root,
tx_count: block.tx_count,
size: block.size,
weight: block.weight,
previousblockhash: block.previousblockhash,
extras: {
coinbaseRaw: block.coinbase_raw ?? block.extras.coinbaseRaw,
medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
reward: block.reward ?? block?.extras?.reward,
totalFees: block.totalFees ?? block?.fees ?? block?.extras.totalFees,
pool: block?.extras?.pool ?? (block?.pool_id ? {
id: block.pool_id,
name: block.pool_name,
} : undefined),
}
};
}
public getLastDifficultyAdjustmentTime(): number { public getLastDifficultyAdjustmentTime(): number {
return this.lastDifficultyAdjustmentTime; return this.lastDifficultyAdjustmentTime;
} }

23
backend/src/repositories/BlocksRepository.ts
View File

@ -2,6 +2,7 @@ import { BlockExtended, PoolTag } from '../mempool.interfaces';
import { DB } from '../database'; import { DB } from '../database';
import logger from '../logger'; import logger from '../logger';
import { Common } from '../api/common'; import { Common } from '../api/common';
import { prepareBlock } from '../utils/blocks-utils';
class BlocksRepository { class BlocksRepository {
/** /**
@ -153,7 +154,6 @@ class BlocksRepository {
query += ` blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`; query += ` blockTimestamp BETWEEN DATE_SUB(NOW(), INTERVAL ${interval}) AND NOW()`;
} }
// logger.debug(query);
const connection = await DB.getConnection(); const connection = await DB.getConnection();
try { try {
const [rows] = await connection.query(query, params); const [rows] = await connection.query(query, params);
@ -169,10 +169,10 @@ class BlocksRepository {
/** /**
* Get blocks count between two dates * Get blocks count between two dates
* @param poolId * @param poolId
* @param from - The oldest timestamp * @param from - The oldest timestamp
* @param to - The newest timestamp * @param to - The newest timestamp
* @returns * @returns
*/ */
public async $blockCountBetweenTimestamp(poolId: number | null, from: number, to: number): Promise<number> { public async $blockCountBetweenTimestamp(poolId: number | null, from: number, to: number): Promise<number> {
const params: any[] = []; const params: any[] = [];
@ -193,7 +193,6 @@ class BlocksRepository {
} }
query += ` blockTimestamp BETWEEN FROM_UNIXTIME('${from}') AND FROM_UNIXTIME('${to}')`; query += ` blockTimestamp BETWEEN FROM_UNIXTIME('${from}') AND FROM_UNIXTIME('${to}')`;
// logger.debug(query);
const connection = await DB.getConnection(); const connection = await DB.getConnection();
try { try {
const [rows] = await connection.query(query, params); const [rows] = await connection.query(query, params);
@ -216,7 +215,6 @@ class BlocksRepository {
ORDER BY height ORDER BY height
LIMIT 1;`; LIMIT 1;`;
// logger.debug(query);
const connection = await DB.getConnection(); const connection = await DB.getConnection();
try { try {
const [rows]: any[] = await connection.query(query); const [rows]: any[] = await connection.query(query);
@ -239,7 +237,8 @@ class BlocksRepository {
*/ */
public async $getBlocksByPool(poolId: number, startHeight: number | null = null): Promise<object[]> { public async $getBlocksByPool(poolId: number, startHeight: number | null = null): Promise<object[]> {
const params: any[] = []; const params: any[] = [];
let query = `SELECT height, hash as id, tx_count, size, weight, pool_id, UNIX_TIMESTAMP(blockTimestamp) as timestamp, reward let query = ` SELECT *, UNIX_TIMESTAMP(blocks.blockTimestamp) as blockTimestamp,
previous_block_hash as previousblockhash
FROM blocks FROM blocks
WHERE pool_id = ?`; WHERE pool_id = ?`;
params.push(poolId); params.push(poolId);
@ -252,17 +251,17 @@ class BlocksRepository {
query += ` ORDER BY height DESC query += ` ORDER BY height DESC
LIMIT 10`; LIMIT 10`;
// logger.debug(query);
const connection = await DB.getConnection(); const connection = await DB.getConnection();
try { try {
const [rows] = await connection.query(query, params); const [rows] = await connection.query(query, params);
connection.release(); connection.release();
for (const block of <object[]>rows) { const blocks: BlockExtended[] = [];
delete block['blockTimestamp']; for (let block of <object[]>rows) {
blocks.push(prepareBlock(block));
} }
return <object[]>rows; return blocks;
} catch (e) { } catch (e) {
connection.release(); connection.release();
logger.err('$getBlocksByPool() error' + (e instanceof Error ? e.message : e)); logger.err('$getBlocksByPool() error' + (e instanceof Error ? e.message : e));
@ -314,7 +313,7 @@ class BlocksRepository {
let query = ` let query = `
SELECT SELECT
* *
FROM FROM
( (
SELECT SELECT
UNIX_TIMESTAMP(blockTimestamp) as timestamp, difficulty, height, UNIX_TIMESTAMP(blockTimestamp) as timestamp, difficulty, height,
@ -322,7 +321,7 @@ class BlocksRepository {
IF(@prevStatus := YT.difficulty, @rn := 1, @rn := 1) IF(@prevStatus := YT.difficulty, @rn := 1, @rn := 1)
) AS rn ) AS rn
FROM blocks YT FROM blocks YT
CROSS JOIN CROSS JOIN
( (
SELECT @prevStatus := -1, @rn := 1 SELECT @prevStatus := -1, @rn := 1
) AS var ) AS var

29
backend/src/utils/blocks-utils.ts Normal file
View File

@ -0,0 +1,29 @@
import { BlockExtended } from "../mempool.interfaces";
export function prepareBlock(block: any): BlockExtended {
return <BlockExtended>{
id: block.id ?? block.hash, // hash for indexed block
timestamp: block.timestamp ?? block.blockTimestamp, // blockTimestamp for indexed block
height: block.height,
version: block.version,
bits: block.bits,
nonce: block.nonce,
difficulty: block.difficulty,
merkle_root: block.merkle_root,
tx_count: block.tx_count,
size: block.size,
weight: block.weight,
previousblockhash: block.previousblockhash,
extras: {
coinbaseRaw: block.coinbase_raw ?? block.extras.coinbaseRaw,
medianFee: block.medianFee ?? block.median_fee ?? block.extras?.medianFee,
feeRange: block.feeRange ?? block.fee_range ?? block?.extras?.feeSpan,
reward: block.reward ?? block?.extras?.reward,
totalFees: block.totalFees ?? block?.fees ?? block?.extras.totalFees,
pool: block?.extras?.pool ?? (block?.pool_id ? {
id: block.pool_id,
name: block.pool_name,
} : undefined),
}
};
}

90
frontend/src/app/components/pool/pool.component.html
View File

@ -1,11 +1,11 @@
<div class="container"> <div class="container-xl">
<div *ngIf="poolStats$ | async as poolStats; else loadingMain"> <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
<h1 class="m-0 mb-2"> <div style="display:flex">
<img width="50" height="50" src="{{ poolStats['logo'] }}" <img width="50" height="50" src="{{ poolStats['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'" class="mr-3"> onError="this.src = './resources/mining-pools/default.svg'" class="mr-3">
{{ poolStats.pool.name }} <h1 class="m-0 mb-2">{{ poolStats.pool.name }}</h1>
</h1> </div>
<div class="box"> <div class="box">
<div class="row"> <div class="row">
@ -63,27 +63,44 @@
[infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50"
(scrolled)="loadMore()"> (scrolled)="loadMore()">
<thead> <thead>
<th style="width: 15%;" i18n="latest-blocks.height">Height</th> <th class="height" i18n="latest-blocks.height">Height</th>
<th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th> <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th style="width: 20%;" i18n="latest-blocks.mined">Mined</th> <th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="text-right" style="width: 10%; padding-right: 30px" i18n="latest-blocks.reward">Reward</th> <th class="coinbase text-left" i18n="latest-blocks.coinbase">
<th class="d-none d-lg-block text-right" style="width: 15%; padding-right: 40px" Coinbase</th>
i18n="latest-blocks.transactions"> <th class="reward text-right" i18n="latest-blocks.reward">
Transactions</th> Reward</th>
<th style="width: 20%;" i18n="latest-blocks.size">Size</th> <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th>
</thead> </thead>
<tbody> <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks"> <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td><a [routerLink]="['/block' | relativeUrl, block.id]">{{ block.height }}</a></td> <td class="height">
<td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td> <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
<td> }}</a>
</td>
<td class="timestamp">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<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 class="text-right" style="padding-right: 30px"> <td class="coinbase">
<app-amount [satoshis]="block['reward']" digitsInfo="1.2-2" [noFiat]="true"></app-amount> <span class="badge badge-secondary scriptmessage longer">
{{ block.extras.coinbaseRaw | hex2ascii }}
</span>
</td> </td>
<td class="d-none d-lg-block text-right" style="padding-right: 40px">{{ block.tx_count | number }}</td> <td class="reward text-right">
<td> <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
</td>
<td class="fees text-right">
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
</td>
<td class="txs text-right">
{{ block.tx_count | number }}
</td>
<td class="size">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-mempool" role="progressbar" <div class="progress-bar progress-mempool" role="progressbar"
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div> [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
@ -92,6 +109,37 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of skeletonLines">
<td class="height">
<span class="skeleton-loader"></span>
</td>
<td class="pool text-left">
<img width="0" height="25" style="opacity: 0">
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<span class="skeleton-loader"></span>
</td>
</tr>
</tbody>
</ng-template>
</table> </table>
</div> </div>

95
frontend/src/app/components/pool/pool.component.scss
View File

@ -1,5 +1,6 @@
.progress { .container-xl {
background-color: #2d3348; max-width: 1400px;
padding-bottom: 100px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -44,13 +45,8 @@ div.scrollable {
max-width: 90px; max-width: 90px;
} }
.table {
margin: 0px auto;
max-width: 900px;
}
.box { .box {
padding-bottom: 0px; padding-bottom: 5px;
} }
.label { .label {
@ -59,8 +55,85 @@ div.scrollable {
} }
.data { .data {
text-align: center; text-align: left;
@media (max-width: 767.98px) { padding-left: 25%;
@media (max-width: 991px) {
padding-left: 12px;
}
@media (max-width: 450px) {
text-align: right; text-align: right;
} }
} }
.progress {
background-color: #2d3348;
}
.coinbase {
width: 20%;
@media (max-width: 875px) {
display: none;
}
}
.height {
width: 10%;
}
.timestamp {
@media (max-width: 875px) {
padding-left: 50px;
}
@media (max-width: 650px) {
display: none;
}
}
.mined {
width: 13%;
@media (max-width: 1100px) {
display: none;
}
}
.txs {
padding-right: 40px;
@media (max-width: 1100px) {
padding-right: 10px;
}
@media (max-width: 875px) {
padding-right: 50px;
}
@media (max-width: 567px) {
padding-right: 10px;
}
}
.fees {
width: 0%;
}
.size {
width: 12%;
@media (max-width: 1000px) {
width: 15%;
}
@media (max-width: 875px) {
width: 20%;
}
@media (max-width: 650px) {
width: 20%;
}
@media (max-width: 450px) {
display: none;
}
}
.scriptmessage {
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
vertical-align: middle;
width: auto;
text-align: left;
}

6
frontend/src/app/components/pool/pool.component.ts
View File

@ -31,6 +31,7 @@ export class PoolComponent implements OnInit {
poolStats$: Observable<PoolStat>; poolStats$: Observable<PoolStat>;
blocks$: Observable<BlockExtended[]>; blocks$: Observable<BlockExtended[]>;
isLoading = true; isLoading = true;
skeletonLines: number[] = [...Array(5).keys()];
chartOptions: EChartsOption = {}; chartOptions: EChartsOption = {};
chartInitOptions = { chartInitOptions = {
@ -133,7 +134,7 @@ export class PoolComponent implements OnInit {
align: 'left', align: 'left',
}, },
borderColor: '#000', borderColor: '#000',
formatter: function (data) { formatter: function(data) {
let hashratePowerOfTen: any = selectPowerOfTen(1); let hashratePowerOfTen: any = selectPowerOfTen(1);
let hashrate = data[0].data[1]; let hashrate = data[0].data[1];
@ -154,11 +155,10 @@ export class PoolComponent implements OnInit {
}, },
yAxis: [ yAxis: [
{ {
min: function (value) { min: (value) => {
return value.min * 0.9; return value.min * 0.9;
}, },
type: 'value', type: 'value',
name: 'Hashrate',
axisLabel: { axisLabel: {
color: 'rgb(110, 112, 121)', color: 'rgb(110, 112, 121)',
formatter: (val) => { formatter: (val) => {