SO Monitoring UI Developers Guide

Prerequisites

1. For Windows only, download and install the latest version of Git Bash from https://gitforwindows.org/index.html
   
   
2. For Linux only, install git using the command sudo apt-get install git -y
   
   

3. Clone “so” project from https://gerrit.onap.org/r/#/admin/projects/so

   • Select “Clone with commit-msg hook”
   • Select “ssh”
   • Copy the git clone command to clipboard
   • Paste the command into Git Bash or terminal, in the directory that will store your project.
     
     
     
4. Download and install the latest version of Atom text editor from https://atom.io/
   
   

5. Install Python

   Windows	Linux
   Download latest version of Python from https://www.python.org/downloads/ Search “env” in Windows Start Search → Edit the system environment variables → Environment Variables → Edit the Path User variable → New “C:\Python27\Scripts\” and New “C:\Python27\Scripts\”	sudo apt install python-pip -y

6. Download and install the appropriate JDK 8 package for your machine from https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
   
   

7. Install Node.js

   Windows	Linux
   Download and install the appropriate version for your Windows machine from https://nodejs.org/en/download/	sudo apt-get install nodejs -y sudo apt-get install npm -y

8. Install Angular Command Line Interface (CLI)

   Windows	Linux
   In Git Bash run the command npm install -g @angular/cli	Linux requires the following packages to be installed manually: npm install -g @angular/cli npm install typescript@3.2.2 --save-dev --save-exact npm install --save-dev @angular-devkit/build-angular npm install popper.js --save Update Angular: ng update --all

9. Install Maven

   Windows	Linux
   Download and install the appropriate version for your Windows machine from https://maven.apache.org/download.cgi#	sudo apt-get install mvn -y

Setting up Atom

Install following packages in Atom (File tab -> Settings -> Install):

Working on the project

Open “so/so-monitoring/so-monitoring-ui” folder in Atom by clicking the "Open a Project" button in the "Welcome Guide" tab.

Change directory to “so/so-monitoring/so-monitoring-ui/src/main/frontend/src/app”, where the frontend source code is located.

NOTE: For all new files created, change line endings format to LF at the bottom of Atom’s UI.

Compiling Angular application

Change directory to “so/so-monitoring/so-monitoring-ui/src/main/frontend” or to a directory further into the project structure.

When compiling the Angular application for the first time run the command npm install in your terminal to install all dependency packages (run npm install --all --force if there are dependency conflicts).

Run the command ng build. This compiles the Angular application into a directory “so/so-monitoring/so-monitoring-ui/src/main/frontend/dist”

Running the application locally

Run the command ng serve.

Open a browser at the address http://localhost:4200/

Testing the application

Test specification files have “.spec.ts” file extensions.

Run the command ng test

This builds the application in watch mode and launches the Karma test runner in an automatically opened Chrome browser, which runs all the test spec files.

To run the test spec files only once, and disconnect from Chrome, include the flag --no-watch

 Without specifying this flag, upon saving a file in Atom, the tests will rerun, and Karma test runner will refresh the Chrome browser.

Testing with Headless Chrome

Headless Chrome allows testing Angular applications without launching a visible Chrome UI shell. This feature is built in with Chrome version 59 and above.

To configure the use of Headless Chrome, add the following object below browsers, in “so\so-monitoring\so-monitoring-ui\src\main\frontend\src\karma.conf.js”:

            browsers: ['Chrome'],

            customLaunchers: {

                        ChromeHeadlessCI: {

                                    base: 'ChromeHeadless',

                        }

},

To start tests with Headless Chrome run the command ng test -- browsers=ChromeHeadlessCI

NOTE: remove the changes made to the “karma.conf.ts” file after testing, as this will appear as an unwanted change when committing code.

Displaying test code coverage results

Run the command ng test --code-coverage

This creates a directory “so\so-monitoring\so-monitoring-ui\src\main\frontend\coverage”

Open the html document “index” in this directory to view the code coverage results in a browser.