Create indexing sticky notification that show indexing progress in all mining dashboard related pages

2022-05-02 17:28:58 +09:00
parent d10434af63
commit 3d29ce93d2
19 changed files with 95 additions and 20 deletions
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -76,6 +76,7 @@ import { DataCyDirective } from './data-cy.directive';
 import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component';
 import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component';
 import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component';
+import { LoadingIndicatorComponent } from './components/loading-indicator/loading-indicator.component';

@NgModule({
  declarations: [
@@ -132,6 +133,7 @@ import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/
    BlockFeesGraphComponent,
    BlockRewardsGraphComponent,
    BlockFeeRatesGraphComponent,
+    LoadingIndicatorComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
  <div class="card-header mb-0 mb-md-4">
    <span i18n="mining.block-fee-rates">Block fee rates</span>
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">
  <div class="card-header mb-0 mb-md-4">
    <span i18n="mining.block-fees">Block fees</span>
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">

  <div class="card-header mb-0 mb-md-4">
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
  <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>

--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div [class]="widget === false ? 'full-container' : ''">

  <div *ngIf="widget">
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -136,16 +136,12 @@ export class HashrateChartComponent implements OnInit {
  prepareChartOptions(data) {
    let title: object;
    if (data.hashrates.length === 0) {
-      const lastBlock = new Date(data.timestamp * 1000);
-      const dd = String(lastBlock.getDate()).padStart(2, '0');
-      const mm = String(lastBlock.getMonth() + 1).padStart(2, '0'); // January is 0!
-      const yyyy = lastBlock.getFullYear();
      title = {
        textStyle: {
          color: 'grey',
          fontSize: 15
        },
-        text: `Indexing in progess - ${yyyy}-${mm}-${dd}`,
+        text: `Indexing in progess`,
        left: 'center',
        top: 'center'
      };
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="full-container">

  <div class="card-header  mb-0 mb-md-4">
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.ts
@@ -150,16 +150,12 @@ export class HashrateChartPoolsComponent implements OnInit {
  prepareChartOptions(data) {
    let title: object;
    if (data.series.length === 0) {
-      const lastBlock = new Date(data.timestamp * 1000);
-      const dd = String(lastBlock.getDate()).padStart(2, '0');
-      const mm = String(lastBlock.getMonth() + 1).padStart(2, '0'); // January is 0!
-      const yyyy = lastBlock.getFullYear();
      title = {
        textStyle: {
          color: 'grey',
          fontSize: 15
        },
-        text: `Indexing in progess - ${yyyy}-${mm}-${dd}`,
+        text: `Indexing in progess`,
        left: 'center',
        top: 'center',
      };
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.html
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="this.indexingProgress$ | async as progress" class="sticky-loading">
+  <span *ngIf="progress >= 0" class="mr-auto badge badge-pill badge-warning">Indexing blocks ({{ progress }}%)</span>
+</div>
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
@@ -0,0 +1,14 @@
+.sticky-loading {
+  position: fixed;
+  right: 10px;
+  z-index: 100;
+  @media (width > 991px) {
+    bottom: 15px;
+  }
+  @media (576px <= width <= 991px) {
+    bottom: 60px;
+  }
+  @media (width <= 575px) {
+    top: 17px;
+  }
+}
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { StateService } from 'src/app/services/state.service';
+import { WebsocketService } from 'src/app/services/websocket.service';
+
+@Component({
+  selector: 'app-loading-indicator',
+  templateUrl: './loading-indicator.component.html',
+  styleUrls: ['./loading-indicator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LoadingIndicatorComponent implements OnInit {
+  @Input() name: string;
+
+  public indexingProgress$: Observable<number>;
+
+  constructor(
+    private stateService: StateService,
+    private websocketService: WebsocketService
+  ) {}
+
+  ngOnInit() {
+    this.indexingProgress$ = this.stateService.loadingIndicators$
+      .pipe(
+        map((indicators) => indicators[this.name] ?? -1)
+      );
+  }
+}
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl dashboard-container">

  <div class="row row-cols-1 row-cols-md-2">
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
@@ -1,8 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { map } from 'rxjs/operators';
 import { SeoService } from 'src/app/services/seo.service';
-import { StateService } from 'src/app/services/state.service';
-import { Observable } from 'rxjs';
 import { WebsocketService } from 'src/app/services/websocket.service';

@Component({
@@ -12,8 +9,6 @@ import { WebsocketService } from 'src/app/services/websocket.service';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MiningDashboardComponent implements OnInit {
-  private blocks = [];
-
  constructor(
    private seoService: SeoService,
    private websocketService: WebsocketService,
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div [class]="widget === false ? 'full-container' : ''">

  <div *ngIf="widget">
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -1,3 +1,5 @@
+<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+
 <div class="container-xl">

  <!-- Pool overview -->
--- a/frontend/src/app/components/pool/pool.component.ts
+++ b/frontend/src/app/components/pool/pool.component.ts
@@ -111,7 +111,7 @@ export class PoolComponent implements OnInit {
          color: 'grey',
          fontSize: 15
        },
-        text: `No data`,
+        text: `Indexing in progress`,
        left: 'center',
        top: 'center'
      };
@@ -164,14 +164,14 @@ export class PoolComponent implements OnInit {
          `;
        }.bind(this)
      },
-      xAxis: {
+      xAxis: data.length === 0 ? undefined : {
        type: 'time',
        splitNumber: (this.isMobile()) ? 5 : 10,
        axisLabel: {
          hideOverlap: true,
        }
      },
-      yAxis: [
+      yAxis: data.length === 0 ? undefined : [
        {
          min: (value) => {
            return value.min * 0.9;
@@ -190,7 +190,7 @@ export class PoolComponent implements OnInit {
          }
        },
      ],
-      series: [
+      series: data.length === 0 ? undefined : [
        {
          zlevel: 0,
          name: 'Hashrate',