Frontend - Webnode improvements & Dashboard refactoring

frontend/package.json

@@ -10,7 +10,8 @@
     "watch": "ng build --watch --configuration development",
     "tests": "npx cypress open --config baseUrl=http://localhost:4200",
     "tests:headless": "npx cypress run --headless --config baseUrl=http://localhost:4200",
-    "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest"
+    "docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest",
+    "start:bundle": "npx http-server dist/frontend -p 4200"
   },
   "private": true,
   "dependencies": {

frontend/src/app/app.service.ts

@@ -46,16 +46,16 @@ export class AppService {
   }
 
   private getStatus(data: NodeDetailsResponse): AppNodeStatus {
-    if (data.transition_frontier.sync.phase === 'Bootstrap') {
-      return AppNodeStatus.BOOTSTRAP;
+    switch (data.transition_frontier.sync.phase) {
+      case 'Bootstrap':
+        return AppNodeStatus.BOOTSTRAP;
+      case 'Catchup':
+        return AppNodeStatus.CATCHUP;
+      case 'Synced':
+        return AppNodeStatus.SYNCED;
+      default:
+        return AppNodeStatus.PENDING;
     }
-    if (data.transition_frontier.sync.phase === 'Catchup') {
-      return AppNodeStatus.CATCHUP;
-    }
-    if (data.transition_frontier.sync.phase === 'Synced') {
-      return AppNodeStatus.SYNCED;
-    }
-    return AppNodeStatus.PENDING;
   }
 }
 

frontend/src/app/core/services/web-node.service.ts

@@ -23,7 +23,7 @@ export class WebNodeService {
   }
 
   loadWasm$(): Observable<void> {
-    console.log('---LOADING WASM');
+    console.log('---LOADING WEBNODE---');
     return merge(
       of(any(window).webnode).pipe(filter(Boolean)),
       fromEvent(window, 'webNodeLoaded'),
@@ -35,7 +35,7 @@ export class WebNodeService {
   }
 
   startWasm$(): Observable<any> {
-    console.log('---STARTING WASM');
+    console.log('---STARTING WEBNODE---');
     return of(any(window).webnode)
       .pipe(
         switchMap((wasm: any) => from(wasm.default('assets/webnode/pkg/openmina_node_web_bg.wasm')).pipe(map(() => wasm))),
@@ -62,7 +62,6 @@ export class WebNodeService {
     return this.backendSubject$.asObservable().pipe(
       filter(Boolean),
       switchMap(handle => from((handle as any).status())),
-      log(),
     );
   }
 
@@ -102,13 +101,9 @@ export class WebNodeService {
   }
 
   get bestChainUserCommands$(): Observable<any> {
-    console.log('---GETTING BEST CHAIN USER COMMANDS');
     return this.backendSubject$.asObservable().pipe(
       filter(Boolean),
       switchMap(handle => from((handle as any).transition_frontier().best_chain().user_commands())),
-      tap((r) => {
-        console.log('response from GETTING BEST CHAIN USER COMMANDS', r);
-      }),
     );
   }
 
@@ -120,13 +115,9 @@ export class WebNodeService {
   }
 
   get transactionPool$(): Observable<any> {
-    console.log('---GETTING TRANSACTION POOL');
     return this.backendSubject$.asObservable().pipe(
       filter(Boolean),
       switchMap(handle => from((handle as any).transaction_pool().get())),
-      tap((r) => {
-        console.log('response from GETTING TRANSACTION POOL', r);
-      }),
     );
   }
 }

frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts

@@ -35,10 +35,23 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
 
   private listenToNodesChanges(): void {
     this.select(selectDashboardNodesAndPeers, ([nodes, peers]: [NodesOverviewNode[], DashboardPeer[]]) => {
-      this.extractNodesData(nodes);
-      this.extractPeersData(peers);
+      if (nodes.length === 0) {
+        this.fetched = undefined;
+        this.fetchedPercentage = '-';
+        this.applied = undefined;
+        this.appliedPercentage = undefined;
+        this.root = undefined;
+        this.rootText = PENDING;
+        this.bestTipBlock = undefined;
+        this.bestTipBlockSyncedText = PENDING;
+        this.targetBlock = undefined;
+        this.syncProgress = undefined;
+      } else {
+        this.extractNodesData(nodes);
+        this.extractPeersData(peers);
+      }
       this.detect();
-    }, filter(n => n[0].length > 0));
+    });
   }
 
   private extractPeersData(peers: DashboardPeer[]): void {

frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@shared/types/nodes/dashboard/nodes-overview-ledger.type';
 import { filter } from 'rxjs';
 import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
-import { ONE_BILLION, ONE_MILLION, ONE_THOUSAND, SecDurationConfig } from '@openmina/shared';
+import { ONE_MILLION, SecDurationConfig } from '@openmina/shared';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type';
@@ -67,8 +67,6 @@ const initialStaged: NodesOverviewRootStagedLedgerStep = {
 })
 export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, OnDestroy {
 
-  protected readonly NodesOverviewLedgerStepState = NodesOverviewLedgerStepState;
-
   ledgers: NodesOverviewLedger = {
     stakingEpoch: initialSnarked,
     nextEpoch: initialSnarked,
@@ -102,38 +100,59 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
 
   private listenToNodesChanges(): void {
     this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => {
-      this.ledgers = nodes[0].ledgers;
-
-      const getConfig = (state: NodesOverviewLedgerStepState): SecDurationConfig =>
-        state === NodesOverviewLedgerStepState.LOADING ? this.undefinedConfig : this.emptyConfig;
-
-      this.configMap = {
-        stakingEpoch: getConfig(this.ledgers.stakingEpoch.state),
-        nextEpoch: getConfig(this.ledgers.nextEpoch.state),
-        rootSnarked: getConfig(this.ledgers.rootSnarked.state),
-        rootStaged: getConfig(this.ledgers.rootStaged.state),
-      };
-      this.setProgressTime();
-      this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
-      this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
-      this.rootSnarkedProgress = rpcStats.rootLedger?.fetched / rpcStats.rootLedger?.estimation * 100 || 0;
-      this.rootStagedProgress = this.ledgers.rootStaged.staged.fetchPartsEnd ? 50 : 0;
-
-      if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
-        this.stakingProgress = 100;
-      }
-      if (this.ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
-        this.nextProgress = 100;
-      }
-      if (this.ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) {
-        this.rootSnarkedProgress = 100;
+      if (nodes.length === 0) {
+        this.ledgers = {
+          stakingEpoch: initialSnarked,
+          nextEpoch: initialSnarked,
+          rootSnarked: initialSnarked,
+          rootStaged: initialStaged,
+        };
+        this.configMap = {
+          stakingEpoch: this.emptyConfig,
+          nextEpoch: this.emptyConfig,
+          rootSnarked: this.emptyConfig,
+          rootStaged: this.emptyConfig,
+        };
+        this.progress = undefined;
+        this.stakingProgress = 0;
+        this.nextProgress = 0;
+        this.rootSnarkedProgress = 0;
+        this.rootStagedProgress = 0;
+        this.totalProgress = 0;
+      } else {
+        this.ledgers = nodes[0].ledgers;
+
+        const getConfig = (state: NodesOverviewLedgerStepState): SecDurationConfig =>
+          state === NodesOverviewLedgerStepState.LOADING ? this.undefinedConfig : this.emptyConfig;
+
+        this.configMap = {
+          stakingEpoch: getConfig(this.ledgers.stakingEpoch.state),
+          nextEpoch: getConfig(this.ledgers.nextEpoch.state),
+          rootSnarked: getConfig(this.ledgers.rootSnarked.state),
+          rootStaged: getConfig(this.ledgers.rootStaged.state),
+        };
+        this.setProgressTime();
+        this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
+        this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
+        this.rootSnarkedProgress = rpcStats.rootLedger?.fetched / rpcStats.rootLedger?.estimation * 100 || 0;
+        this.rootStagedProgress = this.ledgers.rootStaged.staged.fetchPartsEnd ? 50 : 0;
+
+        if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
+          this.stakingProgress = 100;
+        }
+        if (this.ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
+          this.nextProgress = 100;
+        }
+        if (this.ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) {
+          this.rootSnarkedProgress = 100;
+        }
+        if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) {
+          this.rootStagedProgress = 100;
+        }
+        this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4;
       }
-      if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) {
-        this.rootStagedProgress = 100;
-      }
-      this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4;
       this.detect();
-    }, filter(n => n[0].length > 0));
+    });
   }
 
   show(event: MouseEvent, start: number, end: number): void {

frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts

@@ -30,6 +30,4 @@ export class DashboardNetworkComponent extends StoreDispatcher implements OnInit
       this.detect();
     }, skip(1));
   }
-
-  protected readonly NodesOverviewLedgerStepState = NodesOverviewLedgerStepState;
 }

frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.ts

@@ -39,7 +39,7 @@ export class DashboardPeersMinimalTableComponent extends MinaTableRustWrapper<Da
     this.select(selectDashboardPeers, (peers: DashboardPeer[]) => {
       this.table.rows = peers;
       this.table.detect();
-    }, filter(peers => peers.length > 0));
+    });
   }
 
   protected override onRowClick(row: DashboardPeer): void {