Developing and using Horizon plugins lessons and know-hows we - - PowerPoint PPT Presentation

Developing and using Horizon plugins

lessons and know-hows we learned Shu Muto and Akihiro Motoki

Who we are. Shu Muto from NEC Solution Innovators, Ltd. Japan

Core developer of Magnum UI, Zaqar UI, Senlin Dashboard, Zun UI and UI Cookiecutter

Akihiro Motoki from NEC Japan

Core developer of Neutron, Horizon, OSC and I18n

Overture

OpenStack Dashboard (Horizon) provides the plugin

• mechanism. More and more projects implement their

dashboard as Horizon plugins. However, the knowledges on Horizon plugins are not shared well, and individual teams maintain their dashboard in their

• wn way.

This talks will share our knowledges like:

Basic on how Horizon plugins works and use them. How to organize Horizon plugins from developer perspective. Both Django-based and Angular-based developments. Testing strategy and CI integration, Translation support. How to follow Horizon changes and make good feedback.

Existing Plugins

Django-based: 22 Astara Dashboard BGPVPN Dashboard Blazar Dashboard Cerberus Dashboard Cisco UI Cloudkitty Dashboard Congress Dashboard Cue Dashboard Freezer Web UI Group Based Policy UI Karbor Dashboard Manila UI Angular-based: 8 App Catalog UI Ironic UI Magnum UI Neutron LBaaS Dashboard Octavia Dashboard Searchlight UI Zaqar UI Zun UI Mistral Dashboard Monasca UI Murano Dashboard Neutron FWaaS Dashboard Neutron VPNaaS Dashboard Sahara Dashboard Solum Dashboard Sticks Dashboard Tacker UI Watcher Dashboard Both-based: 4 (migration in progress) Designate Dashboard Senlin Dashboard Trove Dashboard Vitrage Dashboard Not Horizon plugin: 1 TripleO UI (React-based)

https://docs.openstack.org/horizon/latest/install/plugin-registry.html

Which framework based on?

Installation

We can install them using pip from PYPI or GIT repo. To enable them, copy the files in ‘enabled’ directory of the installed plugin destination, and paste it into Horizon’s ‘openstack_daskboard/local/enabled/’ directory. Then restart Horizon.

What we should code for Django-based?

We can implement almost with Python.

• Panel with Horizon framework

○ i.e. To use python-XXXclient to access each services.

• Python-client API

○ i.e. to use python-XXXclient

• Django-based main contents

○ i.e. Views for table, details, actions or workflow

What we should code for Angular-based?

• Panel with Horizon framework

○ To load the plugins.

• Python-client API

○ i.e. To use python-XXXclient to access each services.

• Django-based REST API

○ To provide data manipulation paths for JavaScript.

• Angular-based main contents

○ i.e. Table view, details view, actions and etc.

How to create new dashboard plugin

Use UI Cookiecutter !!

https://github.com/openstack/ui-cookiecutter

We can test it only by one command line. This generates new sample panel with CRUD operations as plugin.

$ cookiecutter https://github.com/openstack/ui-cookiecutter.git --no-inputs

Sample panel generated by UI Cookiecutter

Sample panel generated by UI Cookiecutter

Sample panel generated by UI Cookiecutter

What is UI Cookiecutter ?

Useful OpenStack project template for new Horizon plugin.

One of ‘Horizon Official’ project.

Angular-based plugin skeleton with working examples.

We can customize the example codes in ease!!

Good place to gather the best knowledges for plugins.

We can feedback the know-hows into the repository by committing code, and report bugs to https://launchpad.net/ui-cookiecutter Please visit https://github.com/openstack/ui-cookiecutter

To customize the client API and REST API

[module]/api/

• Edit client.py to access your endpoint properly.
• Edit rest_api.py to use the client API properly, and to

service REST API to JavaScript side.

To customize the service for REST APIs

[module]/static/dashboard/[panel]/[panel].service.js

• Edit the service to access your REST API properly.

This service uses horizon.framework.util.http.service for accessing Django side REST APIs.

• functions for get, post, patch, put and delete methods are

supported by the http service.

To customize the panel

[module]/static/dashboard/[panelgroup]/[panel]/

• Index view and Details view using Horizon framework

○ Edit registerations for load functions and properties

• f the resource on [panel].module.js

■ horizon.framework.conf.resource-type-registry.service

[module]/static/dashboard/[panelgroup]/[panel]/details/

• For Details view and summary on Index view

○ Edit overview.html and drawer.html

■ hz-resource-property-list

To customize the actions

[module]/static/dashboard/[panelgroup]/[panel]/actions/ [module]/static/dashboard/[panelgroup]/[panel]/workflow/ Actions are registered into resource-type-registry service, and set into Table view and Details view.

• Create / Update forms use Angular Schema Form

○

https://github.com/json-schema-form/angular-schema-form

• Delete action uses Horizon framework

○

horizon.framework.widgets.modal.deleteModalService

Python tests

UI Cookiecutter has settings for Python tests To install test tools: $ pip install tox

Required modules for tests will be installed into virtual environment when run each tests using tox.

Write tests To run tests: $ tox -e py27 Code according to hacking: https://docs.openstack.org/hacking/latest/ To run check code style: $ tox -e pep8

$ pip install tox $ tox -e py27 $ tox -e pep8

JavaScript tests

UI Cookiecutter has settings for JavaScript tests To install test tools: $ npm install . Write test using Jasmine To run tests: $ npm run test Code according to https://github.com/johnpapa/angular-styleguide To check code style: $npm run lint

$ npm run lint $ npm run test $ npm install .

Translation support

Django: ‘translate’ tag or attribute for template HTML. use django.utils.translation module for Python code. Angular: ‘translate’ tag or attribute for template HTML. ‘gettext’ or ‘ngettext’ functions for JavaScript code. Extract strings to be translated using Babel. If your project is OpenStack Official, set jobs for translation

• n OpenStack CI infra, and translate using Zanata.

<p translate>The word ‘internationalization’ is a too long.</p> <translate>Translate me!!</translate>

Documentations

• Write document in RST format

https://docs.openstack.org/doc-contrib-guide/rst-conv.html

• Add release note using `reno` command and write contents in RST

https://docs.openstack.org/reno/latest/

• Build them into HTML

Write settings into setup.cfg or command in tox.ini and run sphinx-build using or .

• Specs for documentations in Pike

https://specs.openstack.org/openstack/docs-specs/specs/pike/os-manuals-migration.html

$ tox -e docs $ tox -e releasenotes

Project setup for OpenStack CI

Basically follow “Project Creator’s Guide”

https://docs.openstack.org/infra/manual/creators.html

• Make good name for your project and create repositories on PYPI and

Launchpad.

• Upload some patches into openstack-infra/project-config repo.
• Use UI Cookiecutter to generate your Horizon plugin.

Jenkins jobs to be set on OpenStack CI infra

Set jobs for your project on openstack-infra/project-config

e.g. https://github.com/openstack-infra/project-config/blob/master/jenkins/jobs/projects.yaml

• project:

name: [project] jobs:

• python-jobs

: for all plugins. i.e. pep8, py27, py35 and docs

• nodejs4-jobs

: for all Angular-based plugins. i.e. test and lint

• openstack-server-release-jobs: for official project
• openstack-publish-jobs

: for official project. i.e. publish to document site https://docs.openstack.org/developer/[project]

• openstack-releasenotes-jobs

: for official project. i.e. publish to release note site https://docs.openstack.org/releasenotes/[project]

• translation-jobs

: for official project. i.e. export strings to be translated to Zanata and import translated files

Migrating Django-based to Angular-based

We can recycle the codes for only python-client API from Django-based plugin. So we should re-implement almost logics into Angular-based JavaScript codes. To create Angular-based contents area, use UI Cookiecutter and transfer the JavaScript contents and REST API into your

• plugin. Then customize the JavaScript contents.

To switch Django-based or Angular-based

Senlin Dashboard: _59_toggle_angular_senlin_dashb

• ard.py.example

ANGULAR_FEATURES.update({ 'profiles_panel': True, 'nodes_panel': True, …... }) Horizon:

• penstack_dashboard/local/local_

settings.d/_59_toggle_angular_se nlin_dashboard.py

copy

senlin_dashboard.cluster.clusters.urls.py if settings.ANGULAR_FEATURES.get('clusters_panel'): # Angular-based view title = _("Clusters") urlpatterns = [ url('', AngularIndexView.as_view(title=title), name='index'), ] else: # Django-based view urlpatterns = [ url(r'^$', legacyViews.IndexView.as_view(), name='index'), …... ]

Thanks!!