{%hackmd @ninoagus/rkG8Y3Mfp %} # Frontend Documentation ## OpenNetra: Project Description ![netra dash](https://hackmd.io/_uploads/Bk2avI4ST.jpg) Open Netra, standing for Open Network Training, is a comprehensive solution designed to facilitate the training, simulation, and management of 5G networks. The primary functionalities of Open Netra include E2E (End-to-End) 5G dashboard simulation and RAN (Radio Access Network) monitoring & configuration. The entire infrastructure is built on a foundation of virtualized network functions, specifically implemented as OpenAirInterface containers, orchestrated and managed by Kubernetes. ## Task 1: Frontend Development 🖼️ ### 2.1 Data Flow Exploration ![image](https://hackmd.io/_uploads/ryHHW_Bt6.png) [Rete.js](https://retejs.org/) alternatives: 1. [litegraph js](https://github.com/jagenjo/litegraph.js) 2. [Drawflow](https://github.com/jerosoler/Drawflow) 3. [Flume](https://github.com/chrisjpatty/flume) 4. [Reaflow](https://reaflow.dev) But I found something interesting hahaha. Which is https://vueflow.dev/ * **Vue Flow Installation** * Download and import the Nodesource GPG key ```=bash sudo apt-get update sudo apt-get install -y ca-certificates curl gnupg sudo mkdir -p /etc/apt/keyrings curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg ``` * Create deb repository ```=bash NODE_MAJOR=20 echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list ``` * Run Update and Install ``` sudo apt-get update sudo apt-get install nodejs -y ``` * **NOTE: IN CASE IF YOU WANT TO UNINSTALL IT** ```=bash apt-get purge nodejs &&\ rm -r /etc/apt/sources.list.d/nodesource.list &&\ rm -r /etc/apt/keyrings/nodesource.gpg ``` * **Yarn Installation** * Install Yarn via npm ```=bash npm install --global yarn ``` * Check the version ```=bash yarn --version ``` * **Vue CLI Installation** * Install Vue via npm ```=bash npm install -g @vue/cli ``` * Check the version ```=bash vue --version ``` * **Project Instantiation** * Clone the frontend repository ```=bash git clone https://github.com/adaptivenetworklab/AN-OPEN-NETRA-FE.git cd AN-OPEN-NETRA-FE ``` * Start developing on localhost ``` yarn install yarn serve ``` * **TROUBLESHOOT** * Error 1 - Memory problem when `yarn serve` ```=output FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory ``` **Solution:** ```=bash export NODE_OPTIONS="--max-old-space-size=4096" ``` * Error 2 - System limit when `yarn serve` ```=output ENOSPC: System limit for number of file watchers reached ``` **Solution:** ```=bash echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p ``` ### 2.1 Graph.JS Exploration https://fusioncharts.github.io/ * **NodeJs Installation** * Download and import the Nodesource GPG key ```=bash sudo apt-get update sudo apt-get install -y ca-certificates curl gnupg sudo mkdir -p /etc/apt/keyrings curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg ```