Skip to content

Commit 577d980

Browse files
directcuteodirectcuteo
authored
Frontend - Webnode improvements & Dashboard refactoring (#799)
1 parent b938624 commit 577d980

28 files changed

+105
-347
lines changed

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"watch": "ng build --watch --configuration development",
1111
"tests": "npx cypress open --config baseUrl=http://localhost:4200",
1212
"tests:headless": "npx cypress run --headless --config baseUrl=http://localhost:4200",
13-
"docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest"
13+
"docker": "npm run build:prod && docker buildx build --platform linux/amd64 -t openmina/frontend:latest . && docker push openmina/frontend:latest",
14+
"start:bundle": "npx http-server dist/frontend -p 4200"
1415
},
1516
"private": true,
1617
"dependencies": {

‎frontend/src/app/app.service.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,16 @@ export class AppService {
4646
}
4747

4848
private getStatus(data: NodeDetailsResponse): AppNodeStatus {
49-
if (data.transition_frontier.sync.phase === 'Bootstrap') {
50-
return AppNodeStatus.BOOTSTRAP;
49+
switch (data.transition_frontier.sync.phase) {
50+
case 'Bootstrap':
51+
return AppNodeStatus.BOOTSTRAP;
52+
case 'Catchup':
53+
return AppNodeStatus.CATCHUP;
54+
case 'Synced':
55+
return AppNodeStatus.SYNCED;
56+
default:
57+
return AppNodeStatus.PENDING;
5158
}
52-
if (data.transition_frontier.sync.phase === 'Catchup') {
53-
return AppNodeStatus.CATCHUP;
54-
}
55-
if (data.transition_frontier.sync.phase === 'Synced') {
56-
return AppNodeStatus.SYNCED;
57-
}
58-
return AppNodeStatus.PENDING;
5959
}
6060
}
6161

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class WebNodeService {
2323
}
2424

2525
loadWasm$(): Observable<void> {
26-
console.log('---LOADING WASM');
26+
console.log('---LOADING WEBNODE---');
2727
return merge(
2828
of(any(window).webnode).pipe(filter(Boolean)),
2929
fromEvent(window, 'webNodeLoaded'),
@@ -35,7 +35,7 @@ export class WebNodeService {
3535
}
3636

3737
startWasm$(): Observable<any> {
38-
console.log('---STARTING WASM');
38+
console.log('---STARTING WEBNODE---');
3939
return of(any(window).webnode)
4040
.pipe(
4141
switchMap((wasm: any) => from(wasm.default('assets/webnode/pkg/openmina_node_web_bg.wasm')).pipe(map(() => wasm))),
@@ -62,7 +62,6 @@ export class WebNodeService {
6262
return this.backendSubject$.asObservable().pipe(
6363
filter(Boolean),
6464
switchMap(handle => from((handle as any).status())),
65-
log(),
6665
);
6766
}
6867

@@ -102,13 +101,9 @@ export class WebNodeService {
102101
}
103102

104103
get bestChainUserCommands$(): Observable<any> {
105-
console.log('---GETTING BEST CHAIN USER COMMANDS');
106104
return this.backendSubject$.asObservable().pipe(
107105
filter(Boolean),
108106
switchMap(handle => from((handle as any).transition_frontier().best_chain().user_commands())),
109-
tap((r) => {
110-
console.log('response from GETTING BEST CHAIN USER COMMANDS', r);
111-
}),
112107
);
113108
}
114109

@@ -120,13 +115,9 @@ export class WebNodeService {
120115
}
121116

122117
get transactionPool$(): Observable<any> {
123-
console.log('---GETTING TRANSACTION POOL');
124118
return this.backendSubject$.asObservable().pipe(
125119
filter(Boolean),
126120
switchMap(handle => from((handle as any).transaction_pool().get())),
127-
tap((r) => {
128-
console.log('response from GETTING TRANSACTION POOL', r);
129-
}),
130121
);
131122
}
132123
}

‎frontend/src/app/features/dashboard/dashboard-block-height/dashboard-block-height.component.html‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎frontend/src/app/features/dashboard/dashboard-block-height/dashboard-block-height.component.scss‎

Whitespace-only changes.

‎frontend/src/app/features/dashboard/dashboard-block-height/dashboard-block-height.component.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,23 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
3535

3636
private listenToNodesChanges(): void {
3737
this.select(selectDashboardNodesAndPeers, ([nodes, peers]: [NodesOverviewNode[], DashboardPeer[]]) => {
38-
this.extractNodesData(nodes);
39-
this.extractPeersData(peers);
38+
if (nodes.length === 0) {
39+
this.fetched = undefined;
40+
this.fetchedPercentage = '-';
41+
this.applied = undefined;
42+
this.appliedPercentage = undefined;
43+
this.root = undefined;
44+
this.rootText = PENDING;
45+
this.bestTipBlock = undefined;
46+
this.bestTipBlockSyncedText = PENDING;
47+
this.targetBlock = undefined;
48+
this.syncProgress = undefined;
49+
} else {
50+
this.extractNodesData(nodes);
51+
this.extractPeersData(peers);
52+
}
4053
this.detect();
41-
}, filter(n => n[0].length > 0));
54+
});
4255
}
4356

4457
private extractPeersData(peers: DashboardPeer[]): void {

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

Lines changed: 52 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from '@shared/types/nodes/dashboard/nodes-overview-ledger.type';
1818
import { filter } from 'rxjs';
1919
import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
20-
import { ONE_BILLION, ONE_MILLION, ONE_THOUSAND, SecDurationConfig } from '@openmina/shared';
20+
import { ONE_MILLION, SecDurationConfig } from '@openmina/shared';
2121
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
2222
import { TemplatePortal } from '@angular/cdk/portal';
2323
import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type';
@@ -67,8 +67,6 @@ const initialStaged: NodesOverviewRootStagedLedgerStep = {
6767
})
6868
export class DashboardLedgerComponent extends StoreDispatcher implements OnInit, OnDestroy {
6969

70-
protected readonly NodesOverviewLedgerStepState = NodesOverviewLedgerStepState;
71-
7270
ledgers: NodesOverviewLedger = {
7371
stakingEpoch: initialSnarked,
7472
nextEpoch: initialSnarked,
@@ -102,38 +100,59 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
102100

103101
private listenToNodesChanges(): void {
104102
this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => {
105-
this.ledgers = nodes[0].ledgers;
106-
107-
const getConfig = (state: NodesOverviewLedgerStepState): SecDurationConfig =>
108-
state === NodesOverviewLedgerStepState.LOADING ? this.undefinedConfig : this.emptyConfig;
109-
110-
this.configMap = {
111-
stakingEpoch: getConfig(this.ledgers.stakingEpoch.state),
112-
nextEpoch: getConfig(this.ledgers.nextEpoch.state),
113-
rootSnarked: getConfig(this.ledgers.rootSnarked.state),
114-
rootStaged: getConfig(this.ledgers.rootStaged.state),
115-
};
116-
this.setProgressTime();
117-
this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
118-
this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
119-
this.rootSnarkedProgress = rpcStats.rootLedger?.fetched / rpcStats.rootLedger?.estimation * 100 || 0;
120-
this.rootStagedProgress = this.ledgers.rootStaged.staged.fetchPartsEnd ? 50 : 0;
121-
122-
if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
123-
this.stakingProgress = 100;
124-
}
125-
if (this.ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
126-
this.nextProgress = 100;
127-
}
128-
if (this.ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) {
129-
this.rootSnarkedProgress = 100;
103+
if (nodes.length === 0) {
104+
this.ledgers = {
105+
stakingEpoch: initialSnarked,
106+
nextEpoch: initialSnarked,
107+
rootSnarked: initialSnarked,
108+
rootStaged: initialStaged,
109+
};
110+
this.configMap = {
111+
stakingEpoch: this.emptyConfig,
112+
nextEpoch: this.emptyConfig,
113+
rootSnarked: this.emptyConfig,
114+
rootStaged: this.emptyConfig,
115+
};
116+
this.progress = undefined;
117+
this.stakingProgress = 0;
118+
this.nextProgress = 0;
119+
this.rootSnarkedProgress = 0;
120+
this.rootStagedProgress = 0;
121+
this.totalProgress = 0;
122+
} else {
123+
this.ledgers = nodes[0].ledgers;
124+
125+
const getConfig = (state: NodesOverviewLedgerStepState): SecDurationConfig =>
126+
state === NodesOverviewLedgerStepState.LOADING ? this.undefinedConfig : this.emptyConfig;
127+
128+
this.configMap = {
129+
stakingEpoch: getConfig(this.ledgers.stakingEpoch.state),
130+
nextEpoch: getConfig(this.ledgers.nextEpoch.state),
131+
rootSnarked: getConfig(this.ledgers.rootSnarked.state),
132+
rootStaged: getConfig(this.ledgers.rootStaged.state),
133+
};
134+
this.setProgressTime();
135+
this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
136+
this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
137+
this.rootSnarkedProgress = rpcStats.rootLedger?.fetched / rpcStats.rootLedger?.estimation * 100 || 0;
138+
this.rootStagedProgress = this.ledgers.rootStaged.staged.fetchPartsEnd ? 50 : 0;
139+
140+
if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
141+
this.stakingProgress = 100;
142+
}
143+
if (this.ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
144+
this.nextProgress = 100;
145+
}
146+
if (this.ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) {
147+
this.rootSnarkedProgress = 100;
148+
}
149+
if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) {
150+
this.rootStagedProgress = 100;
151+
}
152+
this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4;
130153
}
131-
if (this.ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) {
132-
this.rootStagedProgress = 100;
133-
}
134-
this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4;
135154
this.detect();
136-
}, filter(n => n[0].length > 0));
155+
});
137156
}
138157

139158
show(event: MouseEvent, start: number, end: number): void {

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,4 @@ export class DashboardNetworkComponent extends StoreDispatcher implements OnInit
3030
this.detect();
3131
}, skip(1));
3232
}
33-
34-
protected readonly NodesOverviewLedgerStepState = NodesOverviewLedgerStepState;
3533
}

‎frontend/src/app/features/dashboard/dashboard-node/dashboard-node.component.html‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)