Mining pool detail page draft PoC

frontend/src/app/app-routing.module.ts

@@ -71,6 +71,10 @@ let routes: Routes = [
         path: 'mining/pool/:poolId',
         component: PoolComponent,
       },
+      {
+        path: 'mining/pool/:poolId/:interval',
+        component: PoolComponent,
+      },
       {
         path: 'graphs',
         component: StatisticsComponent,
@@ -163,6 +167,10 @@ let routes: Routes = [
             path: 'mining/pool/:poolId',
             component: PoolComponent,
           },
+          {
+            path: 'mining/pool/:poolId/:interval',
+            component: PoolComponent,
+          },
           {
             path: 'graphs',
             component: StatisticsComponent,
@@ -249,6 +257,10 @@ let routes: Routes = [
             path: 'mining/pool/:poolId',
             component: PoolComponent,
           },
+          {
+            path: 'mining/pool/:poolId/:interval',
+            component: PoolComponent,
+          },
           {
             path: 'graphs',
             component: StatisticsComponent,

frontend/src/app/components/pool/pool.component.html

@@ -1,5 +1,66 @@
 <div class="container-xl">
 
-  Pool
+  <div *ngIf="poolStats$ | async as poolStats">
+    <h1>
+      {{ poolStats.pool.name }}
+    </h1>
+
+    <div class="box">
+      <div class="row">
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Address</td>
+                <td>{{ poolStats.pool.addresses }}</td>
+              </tr>
+              <tr>
+                <td>Coinbase Tag</td>
+                <td>{{ poolStats.pool.regexes }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col-sm">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Mined Blocks</td>
+                <td>{{ poolStats.blockCount }}</td>
+              </tr>
+              <tr>
+                <td>Empty Blocks</td>
+                <td>{{ poolStats.emptyBlocks.length }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="loadMore()">
+    <thead>
+      <th style="width: 15%;" i18n="latest-blocks.height">Height</th>
+      <th class="d-none d-md-block" style="width: 20%;" i18n="latest-blocks.timestamp">Timestamp</th>
+      <th style="width: 20%;" i18n="latest-blocks.mined">Mined</th>
+      <th class="d-none d-lg-block" style="width: 15%;" i18n="latest-blocks.transactions">Transactions</th>
+      <th style="width: 20%;" i18n="latest-blocks.size">Size</th>
+    </thead>
+    <tbody>
+      <tr *ngFor="let block of blocks">
+        <td><a [routerLink]="['/block' | relativeUrl, block.hash]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
+        <td class="d-none d-md-block">&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
+        <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since></td>
+        <td class="d-none d-lg-block">{{ block.tx_count | number }}</td>
+        <td>
+          <div class="progress">
+            <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
+            <div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 
 </div>

frontend/src/app/components/pool/pool.component.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, switchMap, tap } from 'rxjs/operators';
+import { BlockExtended, PoolStat } from 'src/app/interfaces/node-api.interface';
+import { ApiService } from 'src/app/services/api.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-pool',
@@ -6,9 +12,55 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./pool.component.scss']
 })
 export class PoolComponent implements OnInit {
+  poolStats$: Observable<PoolStat>;
+  isLoading = false;
+
+  poolId: number;
+  interval: string;
+
+  blocks: any[] = [];
+
   constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute,
+    public stateService: StateService,
   ) { }
 
   ngOnInit(): void {
+    this.poolStats$ = this.route.params
+      .pipe(
+        switchMap((params) => {
+          this.poolId = params.poolId;
+          this.interval = params.interval;
+          this.loadMore(2);
+          return this.apiService.getPoolStats$(params.poolId, params.interval ?? 'all');
+        }),
+      );
+  }
+
+  loadMore(chunks = 0) {
+    let fromHeight: number | undefined;
+    if (this.blocks.length > 0) {
+      fromHeight = this.blocks[this.blocks.length - 1].height - 1;
+    }
+
+    this.apiService.getPoolBlocks$(this.poolId, fromHeight)
+      .subscribe((blocks) => {
+        this.blocks = this.blocks.concat(blocks);
+
+        const chunksLeft = chunks - 1;
+        if (chunksLeft > 0) {
+          this.loadMore(chunksLeft);
+        }
+        // this.cd.markForCheck();
+      },
+      (error) => {
+        console.log(error);
+        // this.cd.markForCheck();
+      });
+  }
+
+  trackByBlock(index: number, block: BlockExtended) {
+    return block.height;
   }
 }

frontend/src/app/interfaces/node-api.interface.ts

@@ -54,6 +54,9 @@ export interface LiquidPegs {
 
 export interface ITranslators { [language: string]: string; }
 
+/**
+ * PoolRanking component
+ */
 export interface SinglePoolStats {
   poolId: number;
   name: string;
@@ -66,20 +69,35 @@ export interface SinglePoolStats {
   emptyBlockRatio: string;
   logo: string;
 }
-
 export interface PoolsStats {
   blockCount: number;
   lastEstimatedHashrate: number;
   oldestIndexedBlockTimestamp: number;
   pools: SinglePoolStats[];
 }
-
 export interface MiningStats {
-  lastEstimatedHashrate: string,
-  blockCount: number,
-  totalEmptyBlock: number,
-  totalEmptyBlockRatio: string,
-  pools: SinglePoolStats[],
+  lastEstimatedHashrate: string;
+  blockCount: number;
+  totalEmptyBlock: number;
+  totalEmptyBlockRatio: string;
+  pools: SinglePoolStats[];
+}
+
+/**
+ * Pool component
+ */
+export interface PoolInfo {
+  id: number | null; // mysql row id
+  name: string;
+  link: string;
+  regexes: string; // JSON array
+  addresses: string; // JSON array
+  emptyBlocks: number;
+}
+export interface PoolStat {
+  pool: PoolInfo;
+  blockCount: number;
+  emptyBlocks: BlockExtended[];
 }
 
 export interface BlockExtension {

frontend/src/app/services/api.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs, ITranslators, PoolsStats } from '../interfaces/node-api.interface';
+import { CpfpInfo, OptimizedMempoolStats, DifficultyAdjustment, AddressInformation, LiquidPegs, ITranslators, PoolsStats, PoolStat, BlockExtended, BlockExtension } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
 import { StateService } from './state.service';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
@@ -132,4 +132,12 @@ export class ApiService {
   listPools$(interval: string | null) : Observable<PoolsStats> {
     return this.httpClient.get<PoolsStats>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pools/${interval}`);
   }
+
+  getPoolStats$(poolId: number, interval: string | null): Observable<PoolStat> {
+    return this.httpClient.get<PoolStat>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool/${poolId}/${interval}`);
+  }
+
+  getPoolBlocks$(poolId: number, fromHeight: number): Observable<BlockExtended[]> {
+    return this.httpClient.get<BlockExtended[]>(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/pool-blocks/${poolId}/${fromHeight}`);
+  }
 }