Redesign accelerator dashboard

2023-12-07 11:12:20 +00:00
parent 8599876b26
commit 42f6f0c122
14 changed files with 243 additions and 151 deletions
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.html
@@ -1,20 +1,18 @@
-<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
-
 <div class="container-xl" style="min-height: 335px" [class.widget]="widget" [class.full-height]="!widget">
  <h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Accelerations</h1>
  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>

  <div class="clearfix"></div>

-  <div style="min-height: 295px">
-    <table class="table table-borderless table-fixed">
+  <div style="min-height: 295px" *ngIf="accelerationList$ | async as accelerations">
+    <table *ngIf="!accelerations || accelerations.length; else noData" class="table table-borderless table-fixed">
      <thead>
        <th class="txid text-left" i18n="dashboard.latest-transactions.txid">TXID</th>
        <th class="fee text-right" i18n="transaction.fee|Transaction fee">Final Fee</th>
        <th class="fee-delta text-right" i18n="accelerator.fee-delta">Max Bid</th>
        <th class="status text-right" i18n="transaction.status|Transaction Status">Status</th>
      </thead>
-      <tbody *ngIf="accelerationList$ | async as accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
+      <tbody *ngIf="accelerations; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
        <tr *ngFor="let acceleration of accelerations; let i= index;">
          <td class="txid text-left">
            <a [routerLink]="['/tx' | relativeUrl, acceleration.txid]">
@@ -62,5 +60,11 @@
      <br>
    </ng-template>
  </div>
+
+  <ng-template #noData>
+    <div class="no-data">
+      <span i18n="accelerations.no-accelerations-yet">There are no accelerations show here yet!</span>
+    </div>
+  </ng-template>
  
 </div>
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.scss
@@ -105,3 +105,13 @@ tr, td, th {
 	max-width: 50vw;
  text-align: left;
 }
+
+.no-data {
+  color: rgba(255, 255, 255, 0.4);
+  display: flex;
+  height: 280px;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
--- a/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
+++ b/frontend/src/app/components/acceleration/accelerations-list/accelerations-list.component.ts
@@ -13,6 +13,7 @@ import { WebsocketService } from '../../../services/websocket.service';
 })
 export class AccelerationsListComponent implements OnInit {
  @Input() widget: boolean = false;
+  @Input() pending: boolean = false;
  @Input() accelerations$: Observable<Acceleration[]>;

  accelerationList$: Observable<Acceleration[]> = undefined;
@@ -40,8 +41,14 @@ export class AccelerationsListComponent implements OnInit {
    this.skeletonLines = this.widget === true ? [...Array(6).keys()] : [...Array(15).keys()];
    this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;

-    this.accelerationList$ = (this.apiService.getAccelerationHistory$({ timeframe: '1m' }) || this.accelerations$).pipe(
+    const accelerationObservable$ = this.accelerations$ || (this.pending ? this.apiService.getAccelerations$() : this.apiService.getAccelerationHistory$({ timeframe: '1m' }));
+    this.accelerationList$ = accelerationObservable$.pipe(
      switchMap(accelerations => {
+        if (this.pending) {
+          for (const acceleration of accelerations) {
+            acceleration.status = acceleration.status || 'accelerating';
+          }
+        }
        if (this.widget) {
          return of(accelerations.slice(-6).reverse());
        } else {
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -12,7 +12,7 @@
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
-            <app-pending-stats></app-pending-stats>
+            <app-pending-stats [accelerations$]="pendingAccelerations$"></app-pending-stats>
          </div>
        </div>
      </div>
@@ -27,7 +27,18 @@
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body more-padding">
-            <app-acceleration-stats timespan="1w" [accelerations$]="accelerations$"></app-acceleration-stats>
+            <app-acceleration-stats timespan="1w" [accelerations$]="minedAccelerations$"></app-acceleration-stats>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Next block visualization -->
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card">
+        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
+          <div class="mempool-block-wrapper">
+            <app-mempool-block-overview [index]="0" [overrideColors]="getAcceleratorColor"></app-mempool-block-overview>
          </div>
        </div>
      </div>
@@ -43,64 +54,28 @@
      </div>
    </div>

-    <!-- Block fee rates -->
-    <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card">
-        <div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
-          <app-block-fee-rates-graph [attr.data-cy]="'hashrate-graph'" [widget]="true"></app-block-fee-rates-graph>
-          <div class="mt-1"><a [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]" fragment="1m" i18n="dashboard.view-more">View more &raquo;</a></div>
+    <!-- Pending List -->
+    <div class="col">
+      <div class="card list-card">
+        <div class="card-body">
+          <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Pending Accelerations</h5>
+          <app-accelerations-list [attr.data-cy]="'pending-accelerations'" [widget]=true [pending]="true" [accelerations$]="pendingAccelerations$"></app-accelerations-list>
        </div>
      </div>
    </div>

-    <!-- Recent accelerations -->
+    <!-- Confirmed List -->
    <div class="col">
-      <div class="card">
+      <div class="card list-card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/acceleration-list' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="dashboard.recent-accelerations">Recent Accelerations</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
          </a>
-          <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="accelerations$"></app-accelerations-list>
+          <app-accelerations-list [attr.data-cy]="'recent-accelerations'" [widget]=true [accelerations$]="minedAccelerations$"></app-accelerations-list>
        </div>
      </div>
    </div>
-
-    <!-- Recent blocks -->
-    <div class="col">
-      <div class="card">
-        <div class="card-body">
-          <a class="title-link" href="" [routerLink]="['/blocks' | relativeUrl]">
-            <h5 class="card-title d-inline" i18n="dashboard.recent-blocks">Recent Blocks</h5>
-            <span>&nbsp;</span>
-            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: 'text-top'; font-size: 13px; color: #4a68b9"></fa-icon>
-          </a>
-          <table class="table lastest-blocks-table">
-            <thead>
-              <th class="table-cell-height" i18n="dashboard.latest-blocks.height">Height</th>
-              <th class="table-cell-pool" i18n="mining.pool-name">Pool</th>
-              <th class="table-cell-fee" i18n="block.median-fee">Median fee</th>
-              <th class="table-cell-acceleration-count" i18n="accelerator.transaction-count">Accelerations</th>
-            </thead>
-            <tbody>
-              <tr *ngFor="let block of blocks$ | async; let i = index">
-                <td class="table-cell-height" ><a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a></td>
-                <td class="table-cell-pool">
-                  <a class="clear-link" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-                    <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                      onError="this.src = '/resources/mining-pools/default.svg'">
-                    <span class="pool-name">{{ block.extras.pool.name }}</span>
-                  </a>
-                </td>
-                <td class="table-cell-fee" ><app-fee-rate [fee]="block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate></td>
-                <td class="table-cell-acceleration-count">{{ block.accelerationCount | number }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
  </div>
 </div>
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@@ -132,4 +132,17 @@
    text-align: right;
    width: 20%;
  }
+}
+
+.card {
+  height: 385px;
+}
+.list-card {
+  height: 410px;
+}
+
+.mempool-block-wrapper {
+  max-height: 380px;
+  max-width: 380px;
+  margin: auto;
 }
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -3,8 +3,15 @@ import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { Acceleration, BlockExtended } from '../../../interfaces/node-api.interface';
 import { StateService } from '../../../services/state.service';
-import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, of, share, switchMap, tap } from 'rxjs';
+import { Observable, Subject, catchError, combineLatest, distinctUntilChanged, interval, map, of, share, startWith, switchMap, tap } from 'rxjs';
 import { ApiService } from '../../../services/api.service';
+import { Color } from '../../block-overview-graph/sprite-types';
+import { hexToColor } from '../../block-overview-graph/utils';
+import TxView from '../../block-overview-graph/tx-view';
+import { feeLevels, mempoolFeeColors } from '../../../app.constants';
+
+const acceleratedColor: Color = hexToColor('8F5FF6');
+const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));

 interface AccelerationBlock extends BlockExtended {
  accelerationCount: number,
@@ -19,6 +26,8 @@ interface AccelerationBlock extends BlockExtended {
 export class AcceleratorDashboardComponent implements OnInit {
  blocks$: Observable<AccelerationBlock[]>;
  accelerations$: Observable<Acceleration[]>;
+  pendingAccelerations$: Observable<Acceleration[]>;
+  minedAccelerations$: Observable<Acceleration[]>;
  loadingBlocks: boolean = true;

  constructor(
@@ -33,6 +42,17 @@ export class AcceleratorDashboardComponent implements OnInit {
  ngOnInit(): void {
    this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);

+    this.pendingAccelerations$ = interval(30000).pipe(
+      startWith(true),
+      switchMap(() => {
+        return this.apiService.getAccelerations$();
+      }),
+      catchError((e) => {
+        return of([]);
+      }),
+      share(),
+    );
+
    this.accelerations$ = this.stateService.chainTip$.pipe(
      distinctUntilChanged(),
      switchMap((chainTip) => {
@@ -44,6 +64,12 @@ export class AcceleratorDashboardComponent implements OnInit {
      share(),
    );

+    this.minedAccelerations$ = this.accelerations$.pipe(
+      map(accelerations => {
+        return accelerations.filter(acc => ['mined', 'completed'].includes(acc.status))
+      })
+    );
+
    this.blocks$ = combineLatest([
      this.accelerations$,
      this.stateService.blocks$.pipe(
@@ -83,4 +109,14 @@ export class AcceleratorDashboardComponent implements OnInit {
      })
    );
  }
+
+  getAcceleratorColor(tx: TxView): Color {
+    if (tx.status === 'accelerated' || tx.acc) {
+      return acceleratedColor;
+    } else {
+      const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
+      const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
+      return normalColors[feeLevelIndex] || normalColors[mempoolFeeColors.length - 1];
+    }
+  }
 }
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.html
@@ -20,7 +20,7 @@
      <h5 class="card-title" i18n="accelerator.total-vsize">Total vsize</h5>
      <div class="card-text">
        <div [innerHTML]="'&lrm;' + (stats.totalVsize * 4 | vbytes: 2)"></div>
-        <div class="symbol">{{ (stats.totalVsize / 1_000_000).toFixed(2) }}% <span i18n="accelerator.percent-of-next-block"> of next block</span></div>
+        <div class="symbol">{{ (stats.totalVsize / 1_000_000 * 100).toFixed(2) }}% <span i18n="accelerator.percent-of-next-block"> of next block</span></div>
      </div>
    </div>
  </div>
--- a/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
+++ b/frontend/src/app/components/acceleration/pending-stats/pending-stats.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 import { Observable, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { ApiService } from '../../../services/api.service';
+import { Acceleration } from '../../../interfaces/node-api.interface';

@Component({
  selector: 'app-pending-stats',
@@ -10,6 +11,7 @@ import { ApiService } from '../../../services/api.service';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PendingStatsComponent implements OnInit {
+  @Input() accelerations$: Observable<Acceleration[]>;
  public accelerationStats$: Observable<any>;

  constructor(
@@ -17,7 +19,7 @@ export class PendingStatsComponent implements OnInit {
  ) { }

  ngOnInit(): void {
-    this.accelerationStats$ = this.apiService.getAccelerations$().pipe(
+    this.accelerationStats$ = (this.accelerations$ || this.apiService.getAccelerations$()).pipe(
      switchMap(accelerations => {
        let totalAccelerations = 0;
        let totalFeeDelta = 0;