Gitiles
Code Review Sign In
gerrit.onosproject.org / onos / a6a1a537c320d22094710fe537f475e976a18613 / . / web / gui2
tree: f1786b50796dbb4195d77e828b33ec70aebace41 [path history] [tgz]
  1. .gitignore
  2. AngularMigration.md
  3. BUCK
  4. README.md
  5. angular.json
  6. doc/
  7. e2e/
  8. karma.conf.js
  9. logger.sh
  10. package-lock.json
  11. package.json
  12. pom.xml
  13. protractor.conf.js
  14. src/
  15. tsconfig.json ⇨ src/main/tsconfig.json
web/gui2/README.md

ONOS GUI 2.0.0

This project is based on Angular 6, as an alternative to the 1.0.0 GUI which was based off AngularJS 1.3.5

Building, testing and running lint are all handled by BUCK. See web/gui2/BUCK file.

To use this new GUI you simply have to start the GUI in a running ONOS at the onos> cli:

feature:install onos-gui2

and the gui will be accessible at http://localhost:8181/onos/ui2/dist/

Development

The project relies on Angular CLI v6 to simplify development of the browser side code.

This allows you to develop the Angular 6 Type Script code independent of ONOS in a separate container. At the current moment (May '18) the implementation of WebSockets and REST calls is not done, so there is no requirement to run ONOS in the background. This will change in the coming weeks.

There is no need to install node, npm or ng again on your system, and indeed if they are already installed, it's best to use the versions of these that's used by BUCK. To do this add to the start of your PATH environment variable.

~/onos/buck-out/gen/web/gui2/node-bin-v8.11.1/node-binaries/bin

On Linux:

export PATH=~/onos/buck-out/gen/web/gui2/node-bin-v8.11.1/node-binaries/bin:$PATH

After this you should be able to run 'ng -v' and see:

Angular CLI: 6.0.0
Node: 8.11.1
OS: linux x64

To use Angular CLI for development on your system, you need to:

  1. Change directory in to onos/web/gui2 - this is where you will run the ng command from.
  2. Run npm install once from this folder to add dependencies
  3. Then run 'ng -v' from onos/web/gui2 and an additional version should be shown Angular: 6.0.0

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Press Ctrl-Shift-I in Chrome and Firefox to bring up the developer tools and the browser console.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

The build is handled through the web/gui2/BUCK file. This downloads Node, NPM and Angular CLI It runs ng build and copies everything over in to WEB-INF/classes/dist (there is something weird in BUCK resources - if there is a file in the root dir of the outputted folder this is copied to the sources root directory, where as files are copied to WEB-INF/classes. To get around this I put all the outputted stuff in to dist and it gets copied to /WEB-INF/classes/dist/ )

To run it manually in Angular CLI run ng build

Running unit tests

This is automatically done when using "onos-buck test" - see the web/gui2/BUCK file for more details.

To run it manually in Angular CLI run ng test --watch=true to execute the unit tests via Karma.

Running checkstyle

This is automatically done when using "onos-buck test" - see the web/gui2/BUCK file for more details.

To run it manually in Angular CLI run ng lint to run codelyzer on your code, according to the rules in tslint.json

Running end-to-end tests

To run it manually in Angular CLI run ng e2e to execute the end-to-end tests via Protractor.

Generating documentation

This is automatically done when using "onos-buck onos build" - see the web/gui2/BUCK file for more details.

To run it manually in Angular CLI run npm run compodoc to generate documentation via Compodoc

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.