remove redundant audit score api calls from blocks list

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -44,21 +44,16 @@
           </td>
           <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <a
+              *ngIf="block?.extras?.matchRate != null; else nullHealth"
               class="health-badge badge"
-              [class.badge-success]="auditScores[block.id] >= 99"
+              [class.badge-success]="block.extras.matchRate >= 99"
-              [class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
+              [class.badge-warning]="block.extras.matchRate >= 75 && block.extras.matchRate < 99"
-              [class.badge-danger]="auditScores[block.id] < 75"
+              [class.badge-danger]="block.extras.matchRate < 75"
-              [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
+              [routerLink]="block.extras.matchRate != null ? ['/block/' | relativeUrl, block.id] : null"
               [state]="{ data: { block: block } }"
-              *ngIf="auditScores[block.id] != null; else nullHealth"
+            >{{ block.extras.matchRate }}%</a>
-            >{{ auditScores[block.id] }}%</a>
             <ng-template #nullHealth>
-              <ng-container *ngIf="!loadingScores; else loadingHealth">
               <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
-              </ng-container>
-            </ng-template>
-            <ng-template #loadingHealth>
-              <span class="skeleton-loader" style="max-width: 60px"></span>
             </ng-template>
           </td>
           <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
-import { BehaviorSubject, combineLatest, concat, Observable, timer, EMPTY, Subscription, of } from 'rxjs';
+import { BehaviorSubject, combineLatest, Observable, timer, of } from 'rxjs';
-import { catchError, delayWhen, map, retryWhen, scan, skip, switchMap, tap } from 'rxjs/operators';
+import { delayWhen, map, retryWhen, scan, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
@@ -12,19 +12,14 @@ import { WebsocketService } from '../../services/websocket.service';
   styleUrls: ['./blocks-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlocksList implements OnInit, OnDestroy {
+export class BlocksList implements OnInit {
   @Input() widget: boolean = false;
 
   blocks$: Observable<BlockExtended[]> = undefined;
-  auditScores: { [hash: string]: number | void } = {};
-
-  auditScoreSubscription: Subscription;
-  latestScoreSubscription: Subscription;
 
   indexingAvailable = false;
   auditAvailable = false;
   isLoading = true;
-  loadingScores = true;
   fromBlockHeight = undefined;
   paginationMaxSize: number;
   page = 1;
@@ -66,7 +61,7 @@ export class BlocksList implements OnInit, OnDestroy {
                   this.blocksCount = blocks[0].height + 1;
                 }
                 this.isLoading = false;
-                this.lastBlockHeight = Math.max(...blocks.map(o => o.height))
+                this.lastBlockHeight = Math.max(...blocks.map(o => o.height));
               }),
               map(blocks => {
                 if (this.indexingAvailable) {
@@ -82,7 +77,7 @@ export class BlocksList implements OnInit, OnDestroy {
                 return blocks;
               }),
               retryWhen(errors => errors.pipe(delayWhen(() => timer(10000))))
-            )
+            );
         })
       ),
       this.stateService.blocks$
@@ -121,68 +116,17 @@ export class BlocksList implements OnInit, OnDestroy {
           return of(blocks);
         })
       );
-
-    if (this.indexingAvailable && this.auditAvailable) {
-      this.auditScoreSubscription = this.fromHeightSubject.pipe(
-        switchMap((fromBlockHeight) => {
-          this.loadingScores = true;
-          return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
-            .pipe(
-              catchError(() => {
-                return EMPTY;
-              })
-            );
-        })
-      ).subscribe((scores) => {
-        Object.values(scores).forEach(score => {
-          this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
-        });
-        this.loadingScores = false;
-        this.cd.markForCheck();
-      });
-
-      this.latestScoreSubscription = this.stateService.blocks$.pipe(
-        switchMap((block) => {
-          if (block[0]?.extras?.matchRate != null) {
-            return of({
-              hash: block[0].id,
-              matchRate: block[0]?.extras?.matchRate,
-            });
-          }
-          else if (block[0]?.id && this.auditScores[block[0].id] === undefined) {
-            return this.apiService.getBlockAuditScore$(block[0].id)
-              .pipe(
-                catchError(() => {
-                  return EMPTY;
-                })
-              );
-          } else {
-            return EMPTY;
-          }
-        }),
-      ).subscribe((score) => {
-        if (score && score.hash) {
-          this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
-          this.cd.markForCheck();
-        }
-      });
-    }
   }
 
-  ngOnDestroy(): void {
+  pageChange(page: number): void {
-    this.auditScoreSubscription?.unsubscribe();
-    this.latestScoreSubscription?.unsubscribe();
-  }
-
-  pageChange(page: number) {
     this.fromHeightSubject.next((this.blocksCount - 1) - (page - 1) * 15);
   }
 
-  trackByBlock(index: number, block: BlockExtended) {
+  trackByBlock(index: number, block: BlockExtended): number {
     return block.height;
   }
 
-  isEllipsisActive(e) {
+  isEllipsisActive(e): boolean {
     return (e.offsetWidth < e.scrollWidth);
   }
 }