Frontend - Estimations in the UI Sync Dashboard #947

Frontend - Estimations in the UI Sync Dashboard

Author: directcuteo

frontend/cypress/e2e/dashboard/ledgers.cy.ts

@@ -88,7 +88,7 @@ describe('DASHBOARD LEDGERS', () => {
           cy.get('mina-dashboard-ledger > div:first-child > div.h-minus-xl > .group:nth-child(3) div.primary')
             .then((el: any) => {
               let progress;
-              progress = state.rpcStats.rootLedger?.fetched / state.rpcStats.rootLedger?.estimation * 100 || 0;
+              progress = state.rpcStats.snarkedRootLedger?.fetched / state.rpcStats.snarkedRootLedger?.estimation * 100 || 0;
               progress = Math.round(progress);
 
               if (state.nodes[0].ledgers.rootSnarked.state === 'success') {

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.21",
+  "version": "1.0.44",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -42,7 +42,7 @@
     "@ngrx/router-store": "^17.2.0",
     "@ngrx/store": "^17.2.0",
     "@nguniversal/express-engine": "^7.0.2",
-    "@openmina/shared": "^0.116.0",
+    "@openmina/shared": "^0.117.0",
     "@sentry/angular": "^8.35.0",
     "@sentry/cli": "^2.38.2",
     "@sentry/tracing": "^7.114.0",
@@ -86,4 +86,4 @@
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.9.0"
   }
-}
+}

frontend/package.json

@@ -2,6 +2,7 @@ import { MinaNode } from '@shared/types/core/environment/mina-env.type';
 import { createType } from '@shared/constants/store-functions';
 import { createAction, props } from '@ngrx/store';
 import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
 
 export const APP_KEY = 'app';
 export const APP_PREFIX = 'App';
@@ -14,6 +15,8 @@ const initSuccess = createAction(type('Init Success'), props<{ activeNode: MinaN
 const changeActiveNode = createAction(type('Change Active Node'), props<{ node: MinaNode }>());
 const getNodeDetails = createAction(type('Get Node Details'));
 const getNodeDetailsSuccess = createAction(type('Get Node Details Success'), props<{ details: AppNodeDetails }>());
+const getNodeEnvBuild = createAction(type('Get Node Env Build'));
+const getNodeEnvBuildSuccess = createAction(type('Get Node Env Build Success'), props<{ envBuild: AppEnvBuild }>());
 const deleteNode = createAction(type('Delete Node'), props<{ node: MinaNode }>());
 const addNode = createAction(type('Add Node'), props<{ node: MinaNode }>());
 
@@ -28,6 +31,8 @@ export const AppActions = {
   changeActiveNode,
   getNodeDetails,
   getNodeDetailsSuccess,
+  getNodeEnvBuild,
+  getNodeEnvBuildSuccess,
   deleteNode,
   addNode,
   changeMenuCollapsing,

frontend/src/app/app.actions.ts

@@ -21,7 +21,7 @@
       @if (!hideToolbar) {
         <mina-toolbar></mina-toolbar>
       }
-      <div class="mina-content"
+      <div id="mina-content"
            [class.no-toolbar]="hideToolbar"
            [class.no-submenus]="subMenusLength < 2"
            [class.mobile]="menu.isMobile">

frontend/src/app/app.component.html

@@ -53,14 +53,10 @@ mat-sidenav-content {
 mat-sidenav-container,
 mat-sidenav-content {
   color: inherit;
-  background-color: $base-surface;
-
-  @media (max-width: 767px) {
-    background-color: $base-background;
-  }
+  background-color: $base-background;
 }
 
-.mina-content {
+#mina-content {
   $toolbar: 40px;
   height: calc(100% - #{$toolbar});
   border-top-left-radius: 6px;

frontend/src/app/app.component.scss

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { MinaState, selectMinaState } from '@app/app.setup';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
-import { createNonDispatchableEffect, Effect, NonDispatchableEffect, removeParamsFromURL } from '@openmina/shared';
-import { filter, from, map, switchMap, tap } from 'rxjs';
+import { createNonDispatchableEffect, Effect, removeParamsFromURL } from '@openmina/shared';
+import { filter, map, mergeMap, of, switchMap, tap } from 'rxjs';
 import { AppActions } from '@app/app.actions';
 import { Router } from '@angular/router';
 import { FeatureType, MinaNode } from '@shared/types/core/environment/mina-env.type';
@@ -22,9 +22,10 @@ import { AppNodeStatus } from '@shared/types/app/app-node-details.type';
 export class AppEffects extends BaseEffect {
 
   readonly init$: Effect;
-  readonly initSuccess$: NonDispatchableEffect;
+  readonly initSuccess$: Effect;
   readonly onNodeChange$: Effect;
   readonly getNodeDetails$: Effect;
+  readonly getNodeEnvBuild$: Effect;
 
   private requestInProgress: boolean = false;
 
@@ -46,7 +47,7 @@ export class AppEffects extends BaseEffect {
       map((payload: { activeNode: MinaNode, nodes: MinaNode[] }) => AppActions.initSuccess(payload)),
     ));
 
-    this.initSuccess$ = createNonDispatchableEffect(() => this.actions$.pipe(
+    this.initSuccess$ = createEffect(() => this.actions$.pipe(
       ofType(AppActions.initSuccess),
       this.latestActionState(),
       switchMap(({ state }) => {
@@ -55,8 +56,9 @@ export class AppEffects extends BaseEffect {
             switchMap(() => this.webNodeService.startWasm$()),
           );
         }
-        return from([]);
+        return of({});
       }),
+      map(() => AppActions.getNodeEnvBuild()),
     ));
 
     this.onNodeChange$ = createNonDispatchableEffect(() => this.actions$.pipe(
@@ -79,9 +81,16 @@ export class AppEffects extends BaseEffect {
             switchMap(() => this.webNodeService.startWasm$()),
           );
         }
-        return from([]);
+        return of({});
       }),
-      map(() => AppActions.getNodeDetails()),
+      switchMap(() => [AppActions.getNodeDetails(), AppActions.getNodeEnvBuild()]),
+    ));
+
+    this.getNodeEnvBuild$ = createEffect(() => this.actions$.pipe(
+      ofType(AppActions.getNodeEnvBuild),
+      mergeMap(() => this.appService.getEnvBuild()),
+      map(envBuild => AppActions.getNodeEnvBuildSuccess({ envBuild })),
+      catchErrorAndRepeat2(MinaErrorType.RUST, AppActions.getNodeEnvBuildSuccess({ envBuild: undefined })),
     ));
 
     this.getNodeDetails$ = createEffect(() => this.actions$.pipe(
@@ -95,9 +104,9 @@ export class AppEffects extends BaseEffect {
           status: AppNodeStatus.OFFLINE,
           blockHeight: null,
           blockTime: null,
-          peers: 0,
-          download: 0,
-          upload: 0,
+          peersConnected: 0,
+          peersDisconnected: 0,
+          peersConnecting: 0,
           transactions: 0,
           snarks: 0,
           producingBlockAt: null,

frontend/src/app/app.effects.ts

@@ -17,15 +17,16 @@ const initialState: AppState = {
     status: AppNodeStatus.PENDING,
     blockHeight: null,
     blockTime: null,
-    peers: 0,
-    download: 0,
-    upload: 0,
+    peersConnected: 0,
+    peersDisconnected: 0,
+    peersConnecting: 0,
     transactions: 0,
     snarks: 0,
     producingBlockAt: null,
     producingBlockGlobalSlot: null,
     producingBlockStatus: null,
   },
+  envBuild: undefined,
 };
 
 export const appReducer = createReducer(
@@ -53,4 +54,5 @@ export const appReducer = createReducer(
     const nodes = state.nodes.filter(n => n.name !== node.name);
     return { ...state, nodes, activeNode: state.activeNode?.name === node.name ? nodes[0] : state.activeNode };
   }),
+  on(AppActions.getNodeEnvBuildSuccess, (state, { envBuild }) => ({ ...state, envBuild })),
 );

frontend/src/app/app.reducer.ts

@@ -7,6 +7,7 @@ import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-detail
 import { getNetwork } from '@shared/helpers/mina.helper';
 import { getLocalStorage, ONE_MILLION } from '@openmina/shared';
 import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
 
 @Injectable({
   providedIn: 'root',
@@ -29,16 +30,20 @@ export class AppService {
     ]);
   }
 
+  getEnvBuild(): Observable<AppEnvBuild> {
+    return this.rust.get<AppEnvBuild>('/build_env');
+  }
+
   getActiveNodeDetails(): Observable<AppNodeDetails> {
     return this.rust.get<NodeDetailsResponse>('/status')
       .pipe(
         map((data: NodeDetailsResponse): AppNodeDetails => ({
           status: this.getStatus(data),
           blockHeight: data.transition_frontier.best_tip?.height,
           blockTime: data.transition_frontier.sync.time,
-          peers: data.peers.filter(p => p.connection_status === 'Connected').length,
-          download: 0,
-          upload: 0,
+          peersConnected: data.peers.filter(p => p.connection_status === 'Connected').length,
+          peersDisconnected: data.peers.filter(p => p.connection_status === 'Disconnected').length,
+          peersConnecting: data.peers.filter(p => p.connection_status === 'Connecting').length,
           snarks: data.snark_pool.snarks,
           transactions: data.transaction_pool.transactions,
           chainId: data.chain_id,

frontend/src/app/app.service.ts

@@ -3,12 +3,14 @@ import { AppMenu } from '@shared/types/app/app-menu.type';
 import { createSelector, MemoizedSelector } from '@ngrx/store';
 import { MinaNode } from '@shared/types/core/environment/mina-env.type';
 import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
 
 export interface AppState {
   menu: AppMenu;
   nodes: MinaNode[];
   activeNode: MinaNode;
   activeNodeDetails: AppNodeDetails;
+  envBuild: AppEnvBuild | undefined;
 }
 
 const select = <T>(selector: (state: AppState) => T): MemoizedSelector<MinaState, T> => createSelector(
@@ -20,10 +22,12 @@ const menu = select(state => state.menu);
 const nodes = select(state => state.nodes);
 const activeNode = select(state => state.activeNode);
 const activeNodeDetails = select(state => state.activeNodeDetails);
+const envBuild = select(state => state.envBuild);
 
 export const AppSelectors = {
   menu,
   nodes,
   activeNode,
   activeNodeDetails,
+  envBuild,
 };