Environment setup

Prerequisities

1. Setup TripleO http://docs.openstack.org/developer/tripleo-docs/index.html
2. install nodejs and npm sudo yum install nodejs (probably requires EPEL) In case of problems refer to https://github.com/nodejs/node-v0.x-archive/wiki/Installing-Node.js-via-package-manager#enterprise-linux-and-fedora
3. To compile and install native addons from npm you may also need to install build tools: yum install gcc-c++ make

Install and run Validations API service on Undercloud machine

Use this guide to setup and run API on Undercloud machine: https://github.com/rthallisey/clapper/blob/master/ansible-tests/README.md

Install and run TripleO API service on Undercloud machine

Use this guide to setup and run API on Undercloud machine: https://github.com/openstack/tripleo-common/blob/master/README.rst

Make Undercloud API services available when running app from laptop

UI requires the openstack API services to be publicly accessible.

On virt host (lab machine)

BM_NETWORK_CIDR=192.0.2.0/24
ROUTE_DEV=virbr0
SEED_IP=<UNDERCLOUD_VM_IP>
sudo ip route replace $BM_NETWORK_CIDR dev $ROUTE_DEV via $SEED_IP

On laptop

export VIRT_IP=<VIRT_HOST_IP>
export UNDERCLOUD_IP=192.0.2.1
sudo iptables -t nat -A OUTPUT -d $UNDERCLOUD_IP -j DNAT --to-destination 127.0.0.1

Copy dist/tripleo_ui_config.js.sample to dist/tripleo_ui_config.js, uncomment the lines for keystone, tripleo, validations and zaqar_websocket_url, and add the urls where these services can be accessed. You can set values for the other services as well to override the values coming from the keystone serviceCatalog.

Setup ssh tunnel for OpenStack API Services

ssh stack@$VIRT_IP -L 8774:$UNDERCLOUD_IP:8774 -L 9292:$UNDERCLOUD_IP:9292 -L 8777:$UNDERCLOUD_IP:8777 -L 9696:$UNDERCLOUD_IP:9696 -L 6385:$UNDERCLOUD_IP:6385 -L 8004:$UNDERCLOUD_IP:8004 -L 5000:$UNDERCLOUD_IP:5000 -L 5001:$UNDERCLOUD_IP:5001 -L 8080:$UNDERCLOUD_IP:8080 -L 8585:$UNDERCLOUD_IP:8585 -L 35357:$UNDERCLOUD_IP:35357

Note that those ports need to be enabled in Undercloud VM's iptables (this should be already in place from undercloud installation, except for the validations API port 5001):

ssh root@<undercloud_vm_ip>
vi /etc/sysconfig/iptables

add

-A INPUT -p tcp -m tcp --dport 9696 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 8777 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 8080 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 5001 -j ACCEPT # enable Validations API port
...

below 8585 rule and restart iptables

systemctl restart iptables

Configure CORS for OpenStack services

Keystone - pastedeploy method:

ssh ssh root@<undercloud_vm_ip>
vi /usr/share/keystone/keystone-dist-paste.ini

add cors filter

[filter:cors]
paste.filter_factory = oslo_middleware.cors:filter_factory
allowed_origin=http://localhost:3000
max_age=3600
allow_methods=GET,POST,PUT,DELETE
allow_headers=Content-Type,Cache-Control,Content-Language,Expires,Last-Modified,Pragma,X-Auth-Token
expose_headers=Content-Type,Cache-Control,Content-Language,Expires,Last-Modified,Pragma

and run the filter on all pipelines like this example:

[pipeline:public_api]
# The last item in this pipeline must be public_service or an equivalent
# application. It cannot be a filter.
pipeline = cors sizelimit url_normalize request_id build_auth_context token_auth admin_token_auth json_body ec2_extension user_crud_extension public_service

and restart keystone systemctl restart openstack-keystone

Ironic - using ironic.conf

ssh root@<undercloud_vm_ip>
vi /etc/ironic/ironic.conf

add

[cors]
allowed_origin=http://localhost:3000
max_age=3600
allow_methods=GET,POST,PUT,DELETE
allow_headers=Content-Type,Cache-Control,Content-Language,Expires,Last-Modified,Pragma,X-Auth-Token
expose_headers=Content-Type,Cache-Control,Content-Language,Expires,Last-Modified,Pragma

Temporary: set auth_strategy=noauth

and restart ironic systemctl restart openstack-ironic-api

Running the App in Development environment

1. git clone https://github.com/openstack/tripleo-ui.git
2. cd tripleo-ui
3. Install dependencies npm install
4. Start the development server with npm start
5. Optionally start Karma to run tests after every change npm run test:watch
6. Navigate to http://<machine_hostname>:3000/

NPM install troubleshooting

In case of errors during npm install, remove node_modules dir and clean npm cache npm cache clean. Then run npm install again.

Contributing

Use OpenStack Gerrit for patches and reviews (http://docs.openstack.org/infra/manual/developers.html).

1. git clone https://github.com/openstack/tripleo-ui.git (if you didn't already)
2. Install git-review sudo dnf install git-review
3. Setup Gerrit by running git review -s
4. Develop on feature-branch locally
5. Run git review to push patch for review.
6. Review and merge patches on OpenStack Gerrit: https://review.openstack.org/#/q/project:openstack/tripleo-ui

Tests

Single test run:

• npm test (alternatively run karma start --single-run)
• npm run lint to run ESLint

(Info on Linting setup here: https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48, .eslintrc rules tweaks here: http://blog.javascripting.com/2015/09/07/fine-tuning-airbnbs-eslint-config/)

Style guide and conventions

Style guide: https://github.com/airbnb/javascript

Multiple words in folder names should be separated by an underscore:

src/js/components/environment_configuration

Tests during development:

Start Karma to run tests after every change npm run test:watch

Debugging tests

1. option:

• use console.log in the test and see the output in karma server output

2. option:

• install karma-chrome-launcher npm module npm install karma-chrome-launcher --save-dev
• replace/add 'Chrome' to browsers in karma.conf.js
• now Karma will launch Chrome to run the tests
• use debugger; statement in test code to add breakpoints
• in Karma Chrome window click 'debug' button and debug in chrome developer tools as usual
• optionally you can use karma-jasmine-html-reporter for better test output (https://www.npmjs.com/package/karma-jasmine-html-reporter)
• make sure you don't push those changes to karma.conf.js and package.json as part of your patch

Documentation

Use JSDoc docstrings in code to provide source for autogenerated documentation (http://usejsdoc.org/).

Basic OpenStack API Usage

http://docs.openstack.org/api/quick-start/content/index.html#authenticate