Refactor accelerator dashboard

2023-12-07 08:26:32 +00:00
parent e34ee3a34d
commit 8599876b26
22 changed files with 373 additions and 142 deletions
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.html
@@ -0,0 +1,106 @@
+<app-indexing-progress></app-indexing-progress>
+
+<div class="container-xl dashboard-container">
+
+  <div class="row row-cols-1 row-cols-md-2">
+
+    <!-- pending stats -->
+    <div class="col">
+      <div class="main-title">
+        <span [attr.data-cy]="'pending-accelerations'" i18n="accelerator.pending-accelerations">Pending accelerations</span>
+      </div>
+      <div class="card-wrapper">
+        <div class="card">
+          <div class="card-body more-padding">
+            <app-pending-stats></app-pending-stats>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 1w stats -->
+    <div class="col">
+      <div class="main-title">
+        <span [attr.data-cy]="'acceleration-stats'" i18n="accelerator.acceleration-stats">Acceleration stats</span>&nbsp;
+        <span style="font-size: xx-small" i18n="mining.144-blocks">(1008 blocks)</span>
+      </div>
+      <div class="card-wrapper">
+        <div class="card">
+          <div class="card-body more-padding">
+            <app-acceleration-stats timespan="1w" [accelerations$]="accelerations$"></app-acceleration-stats>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- acceleration fees graph -->
+    <div class="col" style="margin-bottom: 1.47rem">
+      <div class="card graph-card">
+        <div class="card-body pl-2 pr-2">
+          <app-acceleration-fees-graph [attr.data-cy]="'acceleration-fees'" [widget]=true [accelerations$]="accelerations$"></app-acceleration-fees-graph>
+          <div class="mt-1"><a [attr.data-cy]="'acceleration-fees-view-more'" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]" i18n="dashboard.view-more">View more &raquo;</a></div>
+        </div>
+      </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>
+        </div>
+      </div>
+    </div>
+
+    <!-- Recent accelerations -->
+    <div class="col">
+      <div class="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>
+        </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
@@ -0,0 +1,135 @@
+.dashboard-container {
+  text-align: center;
+  margin-top: 0.5rem;
+  .col {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.card {
+  background-color: #1d1f31;
+}
+
+.graph-card {
+  height: 100%;
+  @media (min-width: 992px) {
+    height: 385px;
+  }
+}
+
+.card-title {
+  font-size: 1rem;
+  color: #4a68b9;
+}
+.card-title > a {
+  color: #4a68b9;
+}
+
+.card-body.pool-ranking {
+  padding: 1.25rem 0.25rem 0.75rem 0.25rem;
+}
+.card-text {
+  font-size: 22px;
+}
+
+#blockchain-container {
+  position: relative;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+#blockchain-container::-webkit-scrollbar {
+  display: none;
+}
+
+.fade-border {
+  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 80%, transparent 100%)
+}
+
+.main-title {
+  position: relative;
+  color: #ffffff91;
+  margin-top: -13px;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  text-align: center;
+  padding-bottom: 3px;
+}
+
+.more-padding {
+  padding: 24px 20px !important;
+}
+
+.card-wrapper {
+  .card {
+    height: auto !important;
+  }
+  .card-body {
+    display: flex;
+    flex: inherit;
+    text-align: center;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 22px 20px;
+  }
+}
+
+.skeleton-loader {
+  width: 100%;
+  display: block;
+  &:first-child {
+    max-width: 90px;
+    margin: 15px auto 3px;
+  }
+  &:last-child {
+    margin: 10px auto 3px;
+    max-width: 55px;
+  }
+}
+
+.card-text {
+  font-size: 22px;
+}
+
+.title-link, .title-link:hover, .title-link:focus, .title-link:active {
+  display: block;
+  margin-bottom: 10px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.lastest-blocks-table {
+  width: 100%;
+  text-align: left;
+  tr, td, th {
+    border: 0px;
+    padding-top: 0.65rem !important;
+    padding-bottom: 0.8rem !important;
+  }
+  .table-cell-height {
+    width: 25%;
+  }
+  .table-cell-fee {
+    width: 25%;
+    text-align: right;
+  }
+  .table-cell-pool {
+    text-align: left;
+    width: 30%;
+
+    @media (max-width: 875px) {
+      display: none;
+    }
+
+    .pool-name {
+      margin-left: 1em;
+    }
+  }
+  .table-cell-acceleration-count {
+    text-align: right;
+    width: 20%;
+  }
+}
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+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 { ApiService } from '../../../services/api.service';
+
+interface AccelerationBlock extends BlockExtended {
+  accelerationCount: number,
+}
+
+@Component({
+  selector: 'app-accelerator-dashboard',
+  templateUrl: './accelerator-dashboard.component.html',
+  styleUrls: ['./accelerator-dashboard.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AcceleratorDashboardComponent implements OnInit {
+  blocks$: Observable<AccelerationBlock[]>;
+  accelerations$: Observable<Acceleration[]>;
+  loadingBlocks: boolean = true;
+
+  constructor(
+    private seoService: SeoService,
+    private websocketService: WebsocketService,
+    private apiService: ApiService,
+    private stateService: StateService,
+  ) {
+    this.seoService.setTitle($localize`:@@a681a4e2011bb28157689dbaa387de0dd0aa0c11:Accelerator Dashboard`);
+  }
+
+  ngOnInit(): void {
+    this.websocketService.want(['blocks', 'mempool-blocks', 'stats']);
+
+    this.accelerations$ = this.stateService.chainTip$.pipe(
+      distinctUntilChanged(),
+      switchMap((chainTip) => {
+        return this.apiService.getAccelerationHistory$({ timeframe: '1w' });
+      }),
+      catchError((e) => {
+        return of([]);
+      }),
+      share(),
+    );
+
+    this.blocks$ = combineLatest([
+      this.accelerations$,
+      this.stateService.blocks$.pipe(
+        switchMap((blocks) => {
+          if (this.stateService.env.MINING_DASHBOARD === true) {
+            for (const block of blocks) {
+              // @ts-ignore: Need to add an extra field for the template
+              block.extras.pool.logo = `/resources/mining-pools/` +
+                block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
+            }
+          }
+          return of(blocks as AccelerationBlock[]);
+        }),
+        tap(() => {
+          this.loadingBlocks = false;
+        })
+      )
+    ]).pipe(
+      switchMap(([accelerations, blocks]) => {
+        const blockMap = {};
+        for (const block of blocks) {
+          blockMap[block.id] = block;
+        }
+        const accelerationsByBlock: { [ hash: string ]: Acceleration[] } = {};
+        for (const acceleration of accelerations) {
+          if (['mined', 'completed'].includes(acceleration.status) && acceleration.pools.includes(blockMap[acceleration.blockHash]?.extras.pool.id)) {
+            if (!accelerationsByBlock[acceleration.blockHash]) {
+              accelerationsByBlock[acceleration.blockHash] = [];
+            }
+            accelerationsByBlock[acceleration.blockHash].push(acceleration);
+          }
+        }
+        return of(blocks.slice(0, 6).map(block => {
+          block.accelerationCount = (accelerationsByBlock[block.id] || []).length;
+          return block;
+        }));
+      })
+    );
+  }
+}