Frontend - Compose producer environment (#805)

docker-compose.local.producers.yml

@@ -14,6 +14,6 @@ services:
     container_name: frontend
     image: openmina/frontend:0.10.0
     environment:
-      OPENMINA_FRONTEND_ENVIRONMENT: block_producers
+      OPENMINA_FRONTEND_ENVIRONMENT: block-producers
     ports:
       - "8070:80"

frontend/angular.json

@@ -94,24 +94,6 @@
                 }
               ],
               "outputHashing": "all"
-            },
-            "compose": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.compose.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "block_producers": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.block_producers.ts"
-                }
-              ],
-              "outputHashing": "all"
             }
           },
           "defaultConfiguration": "production"

frontend/httpd.conf

@@ -219,6 +219,11 @@ LoadModule rewrite_module modules/mod_rewrite.so
     ProxyPassReverse http://openmina-node:3000
 </Location>
 
+<Location /mina/webrtc/signal>
+    ProxyPass http://localhost:3000/mina/webrtc/signal
+    ProxyPassReverse http://localhost:3000/mina/webrtc/signal
+</Location>
+
 <IfModule unixd_module>
 #
 # If you wish httpd to run as a different user or group, you must run

frontend/src/app/app.reducer.ts

@@ -40,12 +40,12 @@ export const appReducer = createReducer(
   })),
   on(AppActions.toggleMenuOpening, (state) => ({ ...state, menu: { ...state.menu, open: !state.menu.open } })),
   on(AppActions.addNode, (state, { node }) => {
-    const customNodes = localStorage.getItem('custom_nodes') ? JSON.parse(localStorage.getItem('custom_nodes')) : [];
+    const customNodes = JSON.parse(localStorage.getItem('custom_nodes') ?? '[]');
     localStorage.setItem('custom_nodes', JSON.stringify([node, ...customNodes]));
     return { ...state, nodes: [node, ...state.nodes] };
   }),
   on(AppActions.deleteNode, (state, { node }) => {
-    const customNodes = localStorage.getItem('custom_nodes') ? JSON.parse(localStorage.getItem('custom_nodes')) : [];
+    const customNodes = JSON.parse(localStorage.getItem('custom_nodes') ?? '[]');
     localStorage.setItem('custom_nodes', JSON.stringify(customNodes.filter((n: MinaNode) => n.name !== node.name)));
     const nodes = state.nodes.filter(n => n.name !== node.name);
     return { ...state, nodes, activeNode: state.activeNode?.name === node.name ? nodes[0] : state.activeNode };

frontend/src/app/app.routing.ts

@@ -10,7 +10,6 @@ export const NETWORK_TITLE: string = APP_TITLE + ' - Network';
 export const NODES_TITLE: string = APP_TITLE + ' - Nodes';
 export const STATE_TITLE: string = APP_TITLE + ' - State';
 export const SNARKS_TITLE: string = APP_TITLE + ' - Snarks';
-export const TESTING_TOOL_TITLE: string = APP_TITLE + ' - Testing Tool';
 export const BLOCK_PRODUCTION_TITLE: string = APP_TITLE + ' - Block Production';
 export const MEMPOOL_TITLE: string = APP_TITLE + ' - Mempool';
 export const BENCHMARKS_TITLE: string = APP_TITLE + ' - Benchmarks';
@@ -48,11 +47,6 @@ const routes: Routes = [
     loadChildren: () => import('@snarks/snarks.module').then(m => m.SnarksModule),
     title: SNARKS_TITLE,
   },
-  {
-    path: 'testing-tool',
-    loadChildren: () => import('@testing-tool/testing-tool.module').then(m => m.TestingToolModule),
-    title: TESTING_TOOL_TITLE,
-  },
   {
     path: 'block-production',
     loadChildren: () => import('@block-production/block-production.module').then(m => m.BlockProductionModule),

frontend/src/app/app.service.ts

@@ -23,7 +23,7 @@ export class AppService {
   getNodes(): Observable<MinaNode[]> {
     return of([
       ...CONFIG.configs,
-      ...(localStorage.getItem('custom_nodes') ? JSON.parse(localStorage.getItem('custom_nodes')) : []),
+      ...JSON.parse(localStorage.getItem('custom_nodes') ?? '[]'),
     ]);
   }
 

frontend/src/app/layout/node-picker/node-picker.component.html

@@ -12,13 +12,14 @@
   </div>
   <div class="p-5 flex-column border-top overflow-auto flex-1"
        *ngIf="filteredNodes.length">
-    <div class="node h-xl pl-12 pr-12 flex-row flex-between border-rad-4 pointer"
+    <div class="node h-xl pl-12 pr-12 flex-row border-rad-4 pointer"
          *ngFor="let node of filteredNodes; let i=index"
          (click)="selectNode(node)"
          [ngClass]="{
             'selected-primary bg-selected-container': activeNode === node,
             'secondary bg-container-hover primary-hover': activeNode !== node,
-            'mb-5': i < filteredNodes.length - 1
+            'mb-5': i < filteredNodes.length - 1,
+            'custom': node.isCustom
             }"
          [tabindex]="0"
          [tooltip]="node.url"
@@ -37,7 +38,7 @@
         <div class="h-md pr-5 fx-row-full-cent bg-container-hover primary-hover warn-primary"
              [tooltip]="'Delete from local storage'"
              [showDelay]="400"
-             (click)="deleteCustomNode(node)">
+             (click)="deleteCustomNode(node); $event.stopImmediatePropagation()">
           <span class="mina-icon icon-200">delete</span>
         </div>
       </div>

frontend/src/app/layout/node-picker/node-picker.component.scss

@@ -32,6 +32,10 @@
         }
       }
     }
+
+    &.custom .names {
+      width: calc(100% - 20px - 20px);
+    }
   }
 }
 

frontend/src/app/layout/node-picker/node-picker.component.ts

@@ -5,8 +5,6 @@ import { untilDestroyed } from '@ngneat/until-destroy';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
 import { AppActions } from '@app/app.actions';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { WebNodeService } from '@core/services/web-node.service';
-import { Router } from '@angular/router';
 import { CONFIG } from '@shared/constants/config';
 
 @Component({
@@ -42,9 +40,8 @@ export class NodePickerComponent extends StoreDispatcher implements AfterViewIni
   @ViewChild('searchNode') searchInput: ElementRef<HTMLInputElement>;
   readonly canAddNodes: boolean = CONFIG.globalConfig?.canAddNodes;
 
-  constructor(private elementRef: ElementRef<HTMLElement>,
-              private webNodeService: WebNodeService,
-              private router: Router) { super(); }
+
+  constructor(private elementRef: ElementRef<HTMLElement>) { super(); }
 
   ngAfterViewInit(): void {
     this.listenToNodeSearch();
@@ -89,6 +86,7 @@ export class NodePickerComponent extends StoreDispatcher implements AfterViewIni
   }
 
   deleteCustomNode(node: MinaNode): void {
+    this.filteredNodes = this.filteredNodes.filter(n => n !== node);
     this.dispatch2(AppActions.deleteNode({ node }));
   }
 }

frontend/src/assets/environments/block_producers.js → frontend/src/assets/environments/block-producers.js

@@ -1,3 +1,8 @@
+/**
+ * This configuration is used with the demo block producers inside a private network.
+ * https://github.com/openmina/openmina/blob/main/docs/producer-demo.md#launch
+ */
+
 export default {
   production: true,
   globalConfig: {

frontend/src/environments/environment.compose.ts → frontend/src/assets/environments/compose-producer.js

@@ -1,18 +1,22 @@
-import { MinaEnv } from '@shared/types/core/environment/mina-env.type';
+/**
+ * This configuration is used for lunching devnet rust nodes and user's own node to produce block. All inside a docker container.
+ * Todo: github documentation link
+ */
 
-export const environment: Readonly<MinaEnv> = {
+export default {
   production: true,
-  identifier: 'Running In Docker',
+  identifier: 'Running in Docker',
   globalConfig: {
     features: {
       dashboard: [],
-      nodes: ['overview', 'live', 'bootstrap'],
       'block-production': ['won-slots'],
+      nodes: ['overview', 'live', 'bootstrap'],
       state: ['actions'],
       snarks: ['scan-state'],
       benchmarks: ['wallets'],
     },
     canAddNodes: true,
+    graphQL: '/openmina-node/graphql',
   },
   configs: [
     {
@@ -21,4 +25,3 @@ export const environment: Readonly<MinaEnv> = {
     },
   ],
 };
-

frontend/src/assets/environments/compose.js

@@ -1,11 +1,15 @@
+/**
+ * This configuration is used for lunching devnet rust nodes inside a docker container.
+ * https://github.com/openmina/openmina?tab=readme-ov-file#how-to-launch-the-node-with-docker-compose
+ */
+
 export default {
   production: true,
   identifier: 'Running in Docker',
   globalConfig: {
     features: {
       dashboard: [],
       nodes: ['overview', 'live', 'bootstrap'],
-      'block-production': ['won-slots'],
       state: ['actions'],
       snarks: ['scan-state'],
       benchmarks: ['wallets'],

frontend/src/assets/environments/env.js

@@ -1,6 +1,6 @@
 /**
- * This file is imported in the environment.prod.ts file
- * The content of this file is replaced from a docker command
+ * This file is imported in the environment.prod.ts file in frontend/src/index.html
+ * The content of this file is replaced from a docker command (frontend/docker/startup.sh)
  * => 1 Docker image = multiple environments
  */
 export default {

frontend/src/assets/environments/producer.js

@@ -1,3 +1,9 @@
+/**
+ * This configuration is used for the producer dashboard that are based on archive node.
+ * Currently, there is no pipeline that this file is linked to, therefore it is not used anywhere right now.
+ * Check frontend/src/environments/environment.producer.ts file.
+ */
+
 export default {
   production: true,
   hideNodeStats: true,

frontend/src/assets/environments/staging.js

@@ -1,3 +1,7 @@
+/**
+ * This configuration is used for the staging environment.
+ */
+
 export default {
   production: true,
   globalConfig: {

frontend/src/assets/environments/webnode.js

@@ -1,3 +1,7 @@
+/**
+ * This configuration is used for the staging-webnode environment.
+ */
+
 export default {
   production: true,
   globalConfig: {

frontend/src/environments/environment.local.ts

@@ -1,3 +1,7 @@
+/**
+ * This file is used for local starting of the app without any development intentions.
+ */
+
 import { MinaEnv } from '@shared/types/core/environment/mina-env.type';
 
 export const environment: Readonly<MinaEnv> = {