Frontend Documentation

OpenNetra: Project Description

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

Rete.js alternatives:

1. litegraph js
2. Drawflow
3. Flume
4. Reaflow

But I found something interesting hahaha. Which is https://vueflow.dev/

• Vue Flow Installation

  • Download and import the Nodesource GPG key

    ​​​​​​​​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

    ​​​​​​​​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

    ​​​​​​​​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

    ​​​​​​​​npm install --global yarn
    

  • Check the version

    ​​​​​​​​yarn --version
    

• Vue CLI Installation

  • Install Vue via npm

    ​​​​​​​​npm install -g @vue/cli
    

  • Check the version

    ​​​​​​​​vue --version
    

• Project Instantiation

  • Clone the frontend repository

    ​​​​​​​​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

      ​​​​​​​​​​​​FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
      

      Solution:

      ​​​​​​​​​​​​export NODE_OPTIONS="--max-old-space-size=4096"
      

    • Error 2 - System limit when yarn serve

      ​​​​​​​​​​​​ENOSPC: System limit for number of file watchers reached 
      

      Solution:

      ​​​​​​​​​​​​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

    ​​​​​​​​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