From 802e10e0a97e56147449fcfe228ed90d9fa8ce10 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Mon, 2 May 2022 17:28:58 +0900
Subject: [PATCH 1/4] Create indexing sticky notification that show indexing
 progress in all mining dashboard related pages

---
 backend/src/api/blocks.ts                     |  6 +++-
 backend/src/repositories/BlocksRepository.ts  | 18 ++++++++++++
 frontend/src/app/app.module.ts                |  2 ++
 .../block-fee-rates-graph.component.html      |  2 ++
 .../block-fees-graph.component.html           |  2 ++
 .../block-rewards-graph.component.html        |  2 ++
 .../blocks-list/blocks-list.component.html    |  2 ++
 .../hashrate-chart.component.html             |  2 ++
 .../hashrate-chart.component.ts               |  6 +---
 .../hashrate-chart-pools.component.html       |  2 ++
 .../hashrate-chart-pools.component.ts         |  6 +---
 .../loading-indicator.component.html          |  3 ++
 .../loading-indicator.component.scss          | 14 +++++++++
 .../loading-indicator.component.ts            | 29 +++++++++++++++++++
 .../mining-dashboard.component.html           |  2 ++
 .../mining-dashboard.component.ts             |  5 ----
 .../pool-ranking/pool-ranking.component.html  |  2 ++
 .../app/components/pool/pool.component.html   |  2 ++
 .../src/app/components/pool/pool.component.ts |  8 ++---
 19 files changed, 95 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.html
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.scss
 create mode 100644 frontend/src/app/components/loading-indicator/loading-indicator.component.ts

diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 633e797d1..7e79f6421 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -221,9 +221,10 @@ class Blocks {
       const lastBlockToIndex = Math.max(0, currentBlockHeight - indexingBlockAmount + 1);
 
       logger.debug(`Indexing blocks from #${currentBlockHeight} to #${lastBlockToIndex}`);
+      loadingIndicators.setProgress('block-indexing', 0);
 
       const chunkSize = 10000;
-      let totaIndexed = await blocksRepository.$blockCount(null, null);
+      let totaIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
       let indexedThisRun = 0;
       let newlyIndexed = 0;
       const startedAt = new Date().getTime() / 1000;
@@ -256,6 +257,7 @@ class Blocks {
             logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds} blocks/sec | total: ${totaIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
             timer = new Date().getTime() / 1000;
             indexedThisRun = 0;
+            loadingIndicators.setProgress('block-indexing', progress);
           }
           const blockHash = await bitcoinApi.$getBlockHash(blockHeight);
           const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
@@ -269,9 +271,11 @@ class Blocks {
         currentBlockHeight -= chunkSize;
       }
       logger.info(`Indexed ${newlyIndexed} blocks`);
+      loadingIndicators.setProgress('block-indexing', 100);
     } catch (e) {
       logger.err('Block indexing failed. Trying again later. Reason: ' + (e instanceof Error ? e.message : e));
       this.blockIndexingStarted = false;
+      loadingIndicators.setProgress('block-indexing', 100);
       return;
     }
 
diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts
index c5267c461..e04080a9c 100644
--- a/backend/src/repositories/BlocksRepository.ts
+++ b/backend/src/repositories/BlocksRepository.ts
@@ -188,6 +188,24 @@ class BlocksRepository {
     }
   }
 
+  /**
+   * Get blocks count for a period
+   */
+   public async $blockCountBetweenHeight(startHeight: number, endHeight: number): Promise<number> {
+    const params: any[] = [];
+    let query = `SELECT count(height) as blockCount
+      FROM blocks
+      WHERE height <= ${startHeight} AND height >= ${endHeight}`;
+
+    try {
+      const [rows] = await DB.query(query, params);
+      return <number>rows[0].blockCount;
+    } catch (e) {
+      logger.err(`Cannot count blocks for this pool (using offset). Reason: ` + (e instanceof Error ? e.message : e));
+      throw e;
+    }
+  }
+
   /**
    * Get the oldest indexed block
    */
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ef40be5a3..c72460bb6 100644
--- 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' }),
diff --git 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
index a4325927f..f4ee2bd07 100644
--- 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>
diff --git 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
index 88ce7db8a..b31ba5678 100644
--- 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>
diff --git 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
index 32b4a66a0..d961e70bf 100644
--- 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">
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index 703ccb6fc..c6746b142 100644
--- 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>
 
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 532d433bc..d9977a0e8 100644
--- 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">
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
index faeb2c8ce..f20f9db3a 100644
--- 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'
       };
diff --git 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
index 67cd3ff83..b8bff0020 100644
--- 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">
diff --git 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
index d6bfd66d6..528a783d5 100644
--- 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',
       };
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.html b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
new file mode 100644
index 000000000..a3929c621
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
new file mode 100644
index 000000000..cb49e08ab
--- /dev/null
+++ 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;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
new file mode 100644
index 000000000..2dfbc81c6
--- /dev/null
+++ 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)
+      );
+  }
+}
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index 3b32408c8..db395bf39 100644
--- 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">
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.ts
index cfd1eafbd..352586f14 100644
--- 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,
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 5d3d5dd3d..56c73a8c0 100644
--- 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">
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index c51360a2d..c9d12ee22 100644
--- 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 -->
diff --git a/frontend/src/app/components/pool/pool.component.ts b/frontend/src/app/components/pool/pool.component.ts
index 9d644121a..3111d78b8 100644
--- 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',

From de7c4774ecce21b187848820ed42673f61d70ab9 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 14:52:37 +0200
Subject: [PATCH 2/4] Added indexing progress indicator for hashrates, update
 logging

---
 backend/src/api/blocks.ts                     | 12 ++---
 backend/src/api/loading-indicators.ts         |  4 +-
 backend/src/api/mining.ts                     | 44 +++++++++++++------
 frontend/src/app/app.module.ts                |  2 +
 .../block-fee-rates-graph.component.html      |  2 +-
 .../block-fees-graph.component.html           |  2 +-
 .../block-rewards-graph.component.html        |  2 +-
 .../blocks-list/blocks-list.component.html    |  2 +-
 .../hashrate-chart.component.html             |  2 +-
 .../hashrate-chart-pools.component.html       |  2 +-
 .../indexing-progress.component.html          |  3 ++
 .../indexing-progress.component.ts            | 14 ++++++
 .../loading-indicator.component.html          |  2 +-
 .../loading-indicator.component.scss          | 16 ++++---
 .../loading-indicator.component.ts            |  1 +
 .../mining-dashboard.component.html           |  2 +-
 .../pool-ranking/pool-ranking.component.html  |  2 +-
 .../app/components/pool/pool.component.html   |  2 +-
 18 files changed, 78 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/app/components/indexing-progress/indexing-progress.component.html
 create mode 100644 frontend/src/app/components/indexing-progress/indexing-progress.component.ts

diff --git a/backend/src/api/blocks.ts b/backend/src/api/blocks.ts
index 7e79f6421..6af631382 100644
--- a/backend/src/api/blocks.ts
+++ b/backend/src/api/blocks.ts
@@ -224,7 +224,7 @@ class Blocks {
       loadingIndicators.setProgress('block-indexing', 0);
 
       const chunkSize = 10000;
-      let totaIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
+      let totalIndexed = await blocksRepository.$blockCountBetweenHeight(currentBlockHeight, lastBlockToIndex);
       let indexedThisRun = 0;
       let newlyIndexed = 0;
       const startedAt = new Date().getTime() / 1000;
@@ -247,17 +247,17 @@ class Blocks {
             break;
           }
           ++indexedThisRun;
-          ++totaIndexed;
+          ++totalIndexed;
           const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
           if (elapsedSeconds > 5 || blockHeight === lastBlockToIndex) {
             const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
             const blockPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
-            const progress = Math.round(totaIndexed / indexingBlockAmount * 100);
-            const timeLeft = Math.round((indexingBlockAmount - totaIndexed) / blockPerSeconds);
-            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds} blocks/sec | total: ${totaIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+            const progress = Math.round(totalIndexed / indexingBlockAmount * 10000) / 100;
+            const timeLeft = Math.round((indexingBlockAmount - totalIndexed) / blockPerSeconds);
+            logger.debug(`Indexing block #${blockHeight} | ~${blockPerSeconds.toFixed(2)} blocks/sec | total: ${totalIndexed}/${indexingBlockAmount} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
             timer = new Date().getTime() / 1000;
             indexedThisRun = 0;
-            loadingIndicators.setProgress('block-indexing', progress);
+            loadingIndicators.setProgress('block-indexing', progress, false);
           }
           const blockHash = await bitcoinApi.$getBlockHash(blockHeight);
           const block = BitcoinApi.convertBlock(await bitcoinClient.getBlock(blockHash));
diff --git a/backend/src/api/loading-indicators.ts b/backend/src/api/loading-indicators.ts
index c2d682d1c..38d5aea96 100644
--- a/backend/src/api/loading-indicators.ts
+++ b/backend/src/api/loading-indicators.ts
@@ -12,8 +12,8 @@ class LoadingIndicators {
     this.progressChangedCallback = fn;
   }
 
-  public setProgress(name: string, progressPercent: number) {
-    const newProgress = Math.round(progressPercent);
+  public setProgress(name: string, progressPercent: number, rounded: boolean = true) {
+    const newProgress = rounded === true ? Math.round(progressPercent) : progressPercent;
     if (newProgress >= 100) {
       delete this.loadingIndicators[name];
     } else {
diff --git a/backend/src/api/mining.ts b/backend/src/api/mining.ts
index 2c7530643..0909d6100 100644
--- a/backend/src/api/mining.ts
+++ b/backend/src/api/mining.ts
@@ -6,6 +6,7 @@ import bitcoinClient from './bitcoin/bitcoin-client';
 import logger from '../logger';
 import blocks from './blocks';
 import { Common } from './common';
+import loadingIndicators from './loading-indicators';
 
 class Mining {
   hashrateIndexingStarted = false;
@@ -131,7 +132,7 @@ class Mining {
    * [INDEXING] Generate weekly mining pool hashrate history
    */
   public async $generatePoolHashrateHistory(): Promise<void> {
-    if (!blocks.blockIndexingCompleted || this.weeklyHashrateIndexingStarted) {
+    if (!blocks.blockIndexingCompleted || this.hashrateIndexingStarted || this.weeklyHashrateIndexingStarted) {
       return;
     }
 
@@ -167,7 +168,10 @@ class Mining {
       let indexedThisRun = 0;
       let totalIndexed = 0;
       let newlyIndexed = 0;
-      let startedAt = new Date().getTime();
+      const startedAt = new Date().getTime() / 1000;
+      let timer = new Date().getTime() / 1000;
+
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 0);
 
       while (toTimestamp > genesisTimestamp) {
         const fromTimestamp = toTimestamp - 604800000;
@@ -214,14 +218,17 @@ class Mining {
         await HashratesRepository.$saveHashrates(hashrates);
         hashrates.length = 0;
 
-        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime()) - startedAt)) / 1000;
+        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
         if (elapsedSeconds > 1) {
-          const weeksPerSeconds = (indexedThisRun / elapsedSeconds).toFixed(2);
+          const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
+          const weeksPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
+          const progress = Math.round(totalIndexed / totalWeekIndexed * 10000) / 100;
+          const timeLeft = Math.round((totalWeekIndexed - totalIndexed) / weeksPerSeconds);
           const formattedDate = new Date(fromTimestamp).toUTCString();
-          const weeksLeft = Math.round(totalWeekIndexed - totalIndexed);
-          logger.debug(`Getting weekly pool hashrate for ${formattedDate} | ~${weeksPerSeconds} weeks/sec | ~${weeksLeft} weeks left to index`);
-          startedAt = new Date().getTime();
+          logger.debug(`Getting weekly pool hashrate for ${formattedDate} | ~${weeksPerSeconds.toFixed(2)} weeks/sec | total: ~${totalIndexed}/${Math.round(totalWeekIndexed)} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+          timer = new Date().getTime() / 1000;
           indexedThisRun = 0;
+          loadingIndicators.setProgress('weekly-hashrate-indexing', progress, false);
         }
 
         toTimestamp -= 604800000;
@@ -233,7 +240,9 @@ class Mining {
       if (newlyIndexed > 0) {
         logger.info(`Indexed ${newlyIndexed} pools weekly hashrate`);
       }
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 100);
     } catch (e) {
+      loadingIndicators.setProgress('weekly-hashrate-indexing', 100);
       this.weeklyHashrateIndexingStarted = false;
       throw e;
     }
@@ -273,7 +282,10 @@ class Mining {
       let indexedThisRun = 0;
       let totalIndexed = 0;
       let newlyIndexed = 0;
-      let startedAt = new Date().getTime();
+      const startedAt = new Date().getTime() / 1000;
+      let timer = new Date().getTime() / 1000;
+
+      loadingIndicators.setProgress('daily-hashrate-indexing', 0);
 
       while (toTimestamp > genesisTimestamp) {
         const fromTimestamp = toTimestamp - 86400000;
@@ -312,15 +324,17 @@ class Mining {
           hashrates.length = 0;
         }
 
-        const elapsedSeconds = Math.max(1, Math.round(new Date().getTime() - startedAt)) / 1000;
+        const elapsedSeconds = Math.max(1, Math.round((new Date().getTime() / 1000) - timer));
         if (elapsedSeconds > 1) {
-          const daysPerSeconds = (indexedThisRun / elapsedSeconds).toFixed(2);
+          const runningFor = Math.max(1, Math.round((new Date().getTime() / 1000) - startedAt));
+          const daysPerSeconds = Math.max(1, Math.round(indexedThisRun / elapsedSeconds));
+          const progress = Math.round(totalIndexed / totalDayIndexed * 10000) / 100;
+          const timeLeft = Math.round((totalDayIndexed - totalIndexed) / daysPerSeconds);
           const formattedDate = new Date(fromTimestamp).toUTCString();
-          const daysLeft = Math.round(totalDayIndexed - totalIndexed);
-          logger.debug(`Getting network daily hashrate for ${formattedDate} | ~${daysPerSeconds} days/sec | ` +
-            `~${daysLeft} days left to index`);
-          startedAt = new Date().getTime();
+          logger.debug(`Getting network daily hashrate for ${formattedDate} | ~${daysPerSeconds.toFixed(2)} days/sec | total: ~${totalIndexed}/${Math.round(totalDayIndexed)} (${progress}%) | elapsed: ${runningFor} seconds | left: ~${timeLeft} seconds`);
+          timer = new Date().getTime() / 1000;
           indexedThisRun = 0;
+          loadingIndicators.setProgress('daily-hashrate-indexing', progress);
         }
 
         toTimestamp -= 86400000;
@@ -346,7 +360,9 @@ class Mining {
       if (newlyIndexed > 0) {
         logger.info(`Indexed ${newlyIndexed} day of network hashrate`);
       }
+      loadingIndicators.setProgress('daily-hashrate-indexing', 100);
     } catch (e) {
+      loadingIndicators.setProgress('daily-hashrate-indexing', 100);
       this.hashrateIndexingStarted = false;
       throw e;
     }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c72460bb6..09e26e906 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -77,6 +77,7 @@ import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fee
 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';
+import { IndexingProgressComponent } from './components/indexing-progress/indexing-progress.component';
 
 @NgModule({
   declarations: [
@@ -134,6 +135,7 @@ import { LoadingIndicatorComponent } from './components/loading-indicator/loadin
     BlockRewardsGraphComponent,
     BlockFeeRatesGraphComponent,
     LoadingIndicatorComponent,
+    IndexingProgressComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git 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
index f4ee2bd07..f15356c2f 100644
--- 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
diff --git 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
index b31ba5678..c78311d71 100644
--- 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
diff --git 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
index d961e70bf..d730ac7d1 100644
--- 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
 
diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index c6746b142..b19620594 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index d9977a0e8..8ec254e95 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
diff --git 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
index b8bff0020..80f2baa54 100644
--- 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,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="full-container">
 
diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.html b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
new file mode 100644
index 000000000..6d745d7b7
--- /dev/null
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
@@ -0,0 +1,3 @@
+<app-loading-indicator [name]="'block-indexing'" [label]="'Indexing blocks'"></app-loading-indicator>
+<app-loading-indicator [name]="'daily-hashrate-indexing'" [label]="'Indexing network hashrate'"></app-loading-indicator>
+<app-loading-indicator [name]="'weekly-hashrate-indexing'" [label]="'Indexing pools hashrate'"></app-loading-indicator>
diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.ts b/frontend/src/app/components/indexing-progress/indexing-progress.component.ts
new file mode 100644
index 000000000..121e77c7d
--- /dev/null
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-indexing-progress',
+  templateUrl: './indexing-progress.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IndexingProgressComponent implements OnInit {
+  constructor(
+  ) {}
+
+  ngOnInit() {
+  }
+}
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.html b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
index a3929c621..49dbc2983 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.html
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.html
@@ -1,3 +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>
+  <span *ngIf="progress >= 0" class="mr-auto badge badge-pill badge-warning">{{ this.label }} ({{ progress }}%)</span>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
index cb49e08ab..b919fa2b8 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.scss
@@ -1,14 +1,18 @@
 .sticky-loading {
-  position: fixed;
+  position: absolute;
   right: 10px;
   z-index: 100;
-  @media (width > 991px) {
-    bottom: 15px;
+  font-size: 14px;
+  @media (width >= 992px) {
+    left: 32px;
+    top: 55px;
   }
-  @media (576px <= width <= 991px) {
-    bottom: 60px;
+  @media (576px <= width < 992px ) {
+    left: 18px;
+    top: 55px;
   }
   @media (width <= 575px) {
-    top: 17px;
+    left: 18px;
+    top: 100px;
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
index 2dfbc81c6..3f59c2701 100644
--- a/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
+++ b/frontend/src/app/components/loading-indicator/loading-indicator.component.ts
@@ -12,6 +12,7 @@ import { WebsocketService } from 'src/app/services/websocket.service';
 })
 export class LoadingIndicatorComponent implements OnInit {
   @Input() name: string;
+  @Input() label: string;
 
   public indexingProgress$: Observable<number>;
 
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
index db395bf39..bf8ba2cf7 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl dashboard-container">
 
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 56c73a8c0..17120d64d 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
diff --git a/frontend/src/app/components/pool/pool.component.html b/frontend/src/app/components/pool/pool.component.html
index c9d12ee22..be7437363 100644
--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -1,4 +1,4 @@
-<app-loading-indicator [name]="'block-indexing'"></app-loading-indicator>
+<app-indexing-progress></app-indexing-progress>
 
 <div class="container-xl">
 

From 8398c3bcc588c0ba0432e89f64ee04b7d6e2cdab Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 14:57:43 +0200
Subject: [PATCH 3/4] Hide indexing notification in widget mode

---
 .../src/app/components/blocks-list/blocks-list.component.html   | 2 +-
 .../app/components/hashrate-chart/hashrate-chart.component.html | 2 +-
 .../src/app/components/pool-ranking/pool-ranking.component.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index b19620594..e31214443 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
   <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 8ec254e95..8739f18fb 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index 17120d64d..12b5ffb2a 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -1,4 +1,4 @@
-<app-indexing-progress></app-indexing-progress>
+<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
 
 <div [class]="widget === false ? 'full-container' : ''">
 

From df177e0ea75e16726767af44ee7385b287a2ba72 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Tue, 10 May 2022 15:26:12 +0200
Subject: [PATCH 4/4] Localize indexing progress notifications

---
 .../indexing-progress/indexing-progress.component.html      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/indexing-progress/indexing-progress.component.html b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
index 6d745d7b7..783566744 100644
--- a/frontend/src/app/components/indexing-progress/indexing-progress.component.html
+++ b/frontend/src/app/components/indexing-progress/indexing-progress.component.html
@@ -1,3 +1,3 @@
-<app-loading-indicator [name]="'block-indexing'" [label]="'Indexing blocks'"></app-loading-indicator>
-<app-loading-indicator [name]="'daily-hashrate-indexing'" [label]="'Indexing network hashrate'"></app-loading-indicator>
-<app-loading-indicator [name]="'weekly-hashrate-indexing'" [label]="'Indexing pools hashrate'"></app-loading-indicator>
+<app-loading-indicator [name]="'block-indexing'" i18n-label label="Indexing blocks"></app-loading-indicator>
+<app-loading-indicator [name]="'daily-hashrate-indexing'" i18n-label label="Indexing network hashrate"></app-loading-indicator>
+<app-loading-indicator [name]="'weekly-hashrate-indexing'" i18n-label label="Indexing pools hashrate"></app-loading-indicator>