0
OpenStack Horizon
Controlling the Cloud using Django
LA Django Meetup, February 18, 2014

David Lapsley
OpenStack Engineer...
About the Presenter

• David is a Lead OpenStack Software Engineer at Metacloud
• David has been using Python for over 10 ...
Our Agenda
• Introduction to Cloud Computing and
OpenStack
• OpenStack Horizon
– Controlling the Cloud with Django
– Inter...
OpenStack
Linux for the Cloud
Cloud Computing in Action

Creating a virtual server on a Public OpenStack
Cloud
Cloud Computing in Action
Cloud Computing in Action
Cloud Computing in Action
Cloud Computing in Action
Cloud Computing in Action
Cloud Computing Model
Virtualization
Server
Virtual+
Machine

Virtual+
Machine

Virtual+
Machine

Virtual+
Machine

Virtual+
Machine

Virtual+
M...
Cloud Computing
“Cloud computing is a model for enabling
convenient, on-demand network access to a
shared pool of configur...
OpenStack

• Open Source Cloud Platform
– Build public/private clouds
– Multi-tenant
– Virtual machines on demand
– Storag...
Some interesting
OpenStack facts …
OpenStack Source Code
OpenStack Source Code
OpenStack Contributors
14, 175 People
132 Countries
http://www.openstack.org
“Linux for the Cloud”
OpenStack Projects
• Nova (Compute)
– Virtual servers on demand

• Nova (Network)
– Manages virtual network resources

• V...
OpenStack Projects
• Object Storage (Swift)
– Secure, reliable object storage

• Block Storage (Cinder)
– Persistent block...
OpenStack Horizon
Controlling the Cloud with Django
Horizon Overview
• Django-based application that provides access
to OpenStack services
• Typically deployed as an Apache W...
Django Stack
Web'Browser
Django'Stack

Test'Infrastructure

Template

URL'Dispatcher

View

Framework

Model

Database
Horizon Stack
Horizon UI Structure (logical)

Branding

User Info

Dashboard

Panel Group
Panel

Sidebar

Panel Content
Horizon UI Structure (logical)

Project Dashboard
Project Dropdown
Horizon UI Structure (CSS)
body
#container
.sidebar

#main_content
.topbar
.page4
header

#user_info

.messages

<panel9
c...
Horizon Base Demo
Admin Overview
Project Overview
Launching an Instance
Horizon Base Demo
Horizon Base Demo
Horizon Base Demo
Instance List
Filtering
Sorting
Horizon Base Demo
Row Actions
Table Actions
Table Actions
Table Actions
Instance Details
Instance Details
Instance Console
OpenStack Horizon
Interesting Patterns
Dashboards and Panels

• Horizon provides a flexible framework for
creating Dashboards and Panels
• Panels are grouped int...
Dashboard App
• Dashboards are created as Django
Applications
• Dashboard modules partitioned into:
– static/
• Static med...
‣ openstack_dashboard
‣ dashboards
‣ admin
‣ ladjango
‣ static
‣ ladjango
‣ css
‣ img
‣ js
‣ templates
‣ ladjango
__init__...
INSTALLED_APPS = (
...
'horizon',
'openstack_dashboard.dashboards.project',
'openstack_dashboard.dashboards.admin',
'opens...
from django.utils.translation import ugettext_lazy as _
import horizon

class BasePanelGroup(horizon.PanelGroup):
slug = "...
Starting Point
LA Django Dashboard

Dashboard Tab
Panel Group
Panel
• Panels are created as Python Modules
• Panel modules partitioned into:
– static/
• Static media (css, js, img)

– ...
‣ladjango
‣ hypervisors
__init__.py
panel.py
urls.py
views.py
tests.py
tables.py
...
‣ static
‣ ladjango
‣ hypervisors
‣ c...
from django.utils.translation import ugettext_lazy as _
import horizon
from openstack_dashboard.dashboards.ladjango import...
LA Django Dashboard

Panel Nav Entry
View Module
• View module ties together everything
– Tables
– Templates
– API Calls

• Horizon base views:
– APIView, Logi...
from openstack_dashboard import api
from openstack_dashboard.dashboards.ladjango.hypervisors 
import tables as hypervisor_...
Table Module
• Table classes provide framework for creating
tables with:
– consistent look and feel
– configurable table_a...
class HypervisorsFilterAction(tables.FilterAction):
def filter(self, table, hypervisors, filter_string):
"""Naive case-ins...
def search_link(x):
return "/admin/instances?q={0}".format(x.hypervisor_hostname)
class AdminHypervisorsTable(tables.DataT...
Template

• Standard Django template format
• Typically leverage base horizon templates (e.g.
base.html)
{% extends 'base.html' %}
{% load i18n horizon humanize sizeformat %}
{% block title %}{% trans "Hypervisors" %}{% endbloc...
URLs Modules

• Provides URL to View mappings
from django.conf.urls import patterns
from django.conf.urls import url
from openstack_dashboard.dashboards.ladjango.hyperv...
Completed Dashboard!

Table Action

Column Sorting
Nav Entries
Panel Rendering
Data Retrieval

Linking
State Aware Row Act...
Click through to Instances
Authentication
• Keystone manages all Authentication for
OpenStack
• To access an OpenStack service:
– authenticate with K...
class MetacloudKeystoneBackend(KeystoneBackend):
def authenticate(self, request=None, username=None, password=None,
user_d...
Customization Hooks

•
•
•
•
•

Change Site Title, Logo, Brand Links
Modify Dashboards and Panels
Change Button Styles
Use...
Custom Overrides Module
• For site-wide customization, Horizon enables
you to define a python module that will be
loaded a...
HORIZON_CONFIG = {
...
'customization_module':
'openstack_dashboard.dashboards.ladjango.overrides',

'test_enabled': True,...
from openstack_dashboard.dashboards.ladjango.test import panel as 
test_panel
from openstack_dashboard.dashboards.ladjango...
Full LA Django Dashboard
Test Panel
Custom CSS and Javascript

• Horizon templates provides blocks for custom
CSS and Javascript
• To add custom CSS/JS, can e...
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %} - {% site_branding %}</title>
{% block css %}
{% incl...
{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Volumes" %}{% endblock %}
{% block css %}

{% include...
Horizon Base View
Custom View
About Metacloud
Metacloud

Takes the best of OpenStack and enhances
it to deliver a fully scalable, highly
available, and customizable clo...
Metacloud

Metacloud
OpenStack
• High
Availability
• Scalability
• Patches/Fixes
• Enhanced UI

Cloud
Operations
• Install...
Metacloud

• Community Support
• Contribute to OpenStack as much as possible
– Bug fixes, features
– Help out with code re...
OpenStack Horizon
Contributing
Devstack and Contributing

• Devstack:
– “A documented shell script to build complete
OpenStack development environments.”...
Challenges and Future Directions
Challenges

• Bugs!
• Performance
• Evolving Architecture in a Smooth Manner
Future Directions

• Evolving the client: AngularJS
• Search/Data Service Model
Lastly…
References
• IRC channels (freenode.net)
– #openstack-dev
– #openstack-horizon
– #openstack-meeting

• Web:
–
–
–
–
–
–
–
...
References

• Web:
– http://www.stackalytics.com
– http://activity.openstack.org/dash/browser/
– http://gabrielhurley.gith...
Thank You
dlapsley@metacloud.com
@devlaps
For more information visit:

metacloud.com
Upcoming SlideShare
Loading in...5
×

OpenStack Horizon: Controlling the Cloud using Django

7,434

Published on

OpenStack is an open source cloud computing project that is implemented predominantly in Python. OpenStack’s goal is to provide the "ubiquitous open source cloud computing platform for public and private clouds”. The OpenStack project was launched by Rackspace and NASA in July 2010. Since then the project has gained considerable momentum with over 200 companies joining the project, and the launch of commercial services and products that use OpenStack.

The OpenStack Horizon project provides a web-based User Interface to OpenStack services. It is constructed in two parts: (1) a core set of libraries for implementing a Dashboard; (2) a reference dashboard implementation that uses the core set of libraries. Customization is a core part of the Horizon Framework. The framework enables developers to construct their own dashboards, panel groups and panels, and enables them to assemble them together via a common navigation/presentation framework.

In this presentation, we will provide a brief introduction to OpenStack and Horizon. Then we will dive into the details of Horizon. We will review Horizon’s overall architecture and how it integrates with other OpenStack services. We will look at some of Horizon’s interesting features and describe how to get started developing with Horizon. Finally, we will discuss some of the current challenges facing Horizon and some future directions.

Published in: Technology

Transcript of "OpenStack Horizon: Controlling the Cloud using Django"

  1. 1. OpenStack Horizon Controlling the Cloud using Django LA Django Meetup, February 18, 2014 David Lapsley OpenStack Engineer, @metacloudinc @devlaps, dlapsley@metacloud.com
  2. 2. About the Presenter • David is a Lead OpenStack Software Engineer at Metacloud • David has been using Python for over 10 years and Django for 5 years • Education: – Ph. D in Electrical and Electronics Engineering from the University of Melbourne – B. Sc. and B. E. from Monash University. • Personal Stuff: – Originally from Melbourne, Australia. Now based in LA (via Boston). In his spare time, he enjoys spending time with his family, cycling, and not shoveling snow
  3. 3. Our Agenda • Introduction to Cloud Computing and OpenStack • OpenStack Horizon – Controlling the Cloud with Django – Interesting Patterns – Example – Contributing to Horizon – Challenges and Future Directions
  4. 4. OpenStack Linux for the Cloud
  5. 5. Cloud Computing in Action Creating a virtual server on a Public OpenStack Cloud
  6. 6. Cloud Computing in Action
  7. 7. Cloud Computing in Action
  8. 8. Cloud Computing in Action
  9. 9. Cloud Computing in Action
  10. 10. Cloud Computing in Action
  11. 11. Cloud Computing Model
  12. 12. Virtualization Server Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Virtual+ Machine Hypervisor (KVM) Physical+ Hardware (CPU,+ Disk,+ Network)
  13. 13. Cloud Computing “Cloud computing is a model for enabling convenient, on-demand network access to a shared pool of configurable computing resources (e.g., networks, servers, storage, applications, an d services) that can be rapidly provisioned and released with minimal management effort or service provider interaction.” http://www.nist.gov/itl/cloud/
  14. 14. OpenStack • Open Source Cloud Platform – Build public/private clouds – Multi-tenant – Virtual machines on demand – Storage volumes • Founded in 2010 by Rackspace and NASA • Since then, enormous growth…
  15. 15. Some interesting OpenStack facts …
  16. 16. OpenStack Source Code
  17. 17. OpenStack Source Code
  18. 18. OpenStack Contributors
  19. 19. 14, 175 People 132 Countries http://www.openstack.org
  20. 20. “Linux for the Cloud”
  21. 21. OpenStack Projects • Nova (Compute) – Virtual servers on demand • Nova (Network) – Manages virtual network resources • VM Registration (Glance) – Catalog and manage server images • Identity (Keystone) – Unified authentication and authorization
  22. 22. OpenStack Projects • Object Storage (Swift) – Secure, reliable object storage • Block Storage (Cinder) – Persistent block storage to VMs • Dashboard (Horizon) – Web-based UI for all OpenStack Services – Many, many, more: Heat, Neutron, Ceilometer, Reddwarf, ..
  23. 23. OpenStack Horizon Controlling the Cloud with Django
  24. 24. Horizon Overview • Django-based application that provides access to OpenStack services • Typically deployed as an Apache WSGI application • Leverages well known existing technologies – Bootstrap, jQuery, Underscore.js, AngularJS, D3.js, Rickshaw, LESS CSS • Extends Django stack to enhance application extensibility
  25. 25. Django Stack Web'Browser Django'Stack Test'Infrastructure Template URL'Dispatcher View Framework Model Database
  26. 26. Horizon Stack
  27. 27. Horizon UI Structure (logical) Branding User Info Dashboard Panel Group Panel Sidebar Panel Content
  28. 28. Horizon UI Structure (logical) Project Dashboard Project Dropdown
  29. 29. Horizon UI Structure (CSS) body #container .sidebar #main_content .topbar .page4 header #user_info .messages <panel9 content> #footer
  30. 30. Horizon Base Demo
  31. 31. Admin Overview
  32. 32. Project Overview
  33. 33. Launching an Instance
  34. 34. Horizon Base Demo
  35. 35. Horizon Base Demo
  36. 36. Horizon Base Demo
  37. 37. Instance List
  38. 38. Filtering
  39. 39. Sorting
  40. 40. Horizon Base Demo
  41. 41. Row Actions
  42. 42. Table Actions
  43. 43. Table Actions
  44. 44. Table Actions
  45. 45. Instance Details
  46. 46. Instance Details
  47. 47. Instance Console
  48. 48. OpenStack Horizon Interesting Patterns
  49. 49. Dashboards and Panels • Horizon provides a flexible framework for creating Dashboards and Panels • Panels are grouped into PanelGroups • PanelGroups into Dashboards
  50. 50. Dashboard App • Dashboards are created as Django Applications • Dashboard modules partitioned into: – static/ • Static media (css, js, img) – templates/ • Django templates – python modules: • dashboard.py module which includes the class used by Horizon
  51. 51. ‣ openstack_dashboard ‣ dashboards ‣ admin ‣ ladjango ‣ static ‣ ladjango ‣ css ‣ img ‣ js ‣ templates ‣ ladjango __init__.py dashboard.py Dashboard Directory Structure
  52. 52. INSTALLED_APPS = ( ... 'horizon', 'openstack_dashboard.dashboards.project', 'openstack_dashboard.dashboards.admin', 'openstack_dashboard.dashboards.metacloud', 'openstack_dashboard.dashboards.settings', 'openstack_dashboard.dashboards.ladjango', ... ) settings.py
  53. 53. from django.utils.translation import ugettext_lazy as _ import horizon class BasePanelGroup(horizon.PanelGroup): slug = "overview" name = _("Overview") panels = (”hypervisors",) class LADjango(horizon.Dashboard): name = _("LA Django") slug = "ladjango" panels = (BasePanelGroup,) default_panel = "hypervisors" roles = ("admin",) horizon.register(LADjango) dashboard.py
  54. 54. Starting Point
  55. 55. LA Django Dashboard Dashboard Tab Panel Group
  56. 56. Panel • Panels are created as Python Modules • Panel modules partitioned into: – static/ • Static media (css, js, img) – templates/ • Django templates – python modules: • urls.py, views.py, panel.py • tables.py, forms.py, tabs.py, tests.py
  57. 57. ‣ladjango ‣ hypervisors __init__.py panel.py urls.py views.py tests.py tables.py ... ‣ static ‣ ladjango ‣ hypervisors ‣ css ‣ img ‣ js ‣ templates ‣ ladjango ‣ hypervisors index.html ... __init__.py dashboard.py Panel Directory Structure
  58. 58. from django.utils.translation import ugettext_lazy as _ import horizon from openstack_dashboard.dashboards.ladjango import dashboard class Hypervisors(horizon.Panel): name = _(”Hypervisors") slug = 'hypervisors' dashboard.LADjango.register(Hypervisors) panel.py
  59. 59. LA Django Dashboard Panel Nav Entry
  60. 60. View Module • View module ties together everything – Tables – Templates – API Calls • Horizon base views: – APIView, LoginView, MultiTableView, DataTableVie w, MixedDataTableView, TabView, TabbedTableVie w, WorkflowView
  61. 61. from openstack_dashboard import api from openstack_dashboard.dashboards.ladjango.hypervisors import tables as hypervisor_tables class HypervisorsIndexView(tables.DataTableView): table_class = hypervisor_tables.AdminHypervisorsTable template_name = 'ladjango/hypervisors/index.html’ def get_data(self): hypervisors = [] states = {} hypervisors = api.nova.hypervisor_list(self.request) for state in api.nova.service_list(self.request): if state.binary == 'nova-compute': states[state.host] = {'state': state.state, 'status': state.status} for h in hypervisors: h.service.update(states[getattr(h, h.NAME_ATTR)]) return hypervisors views.py
  62. 62. Table Module • Table classes provide framework for creating tables with: – consistent look and feel – configurable table_actions row – configurable row_actions – select/multi-select column – sorting – pagination • Functionality is split server- and clientside, however implementation is all serverside
  63. 63. class HypervisorsFilterAction(tables.FilterAction): def filter(self, table, hypervisors, filter_string): """Naive case-insensitive search.""" q = filter_string.lower() return [hypervisor for hypervisor in hypervisors if q in hypervisor.name.lower()] class EnableAction(tables.BatchAction): ... class DisableAction(tables.BatchAction): name = 'disable' classes = ('btn-danger',) def allowed(self, request, hypervisor): return hypervisor.service.get('status') == 'enabled' def action(self, request, obj_id): hypervisor = api.nova.hypervisor_get(request, obj_id) host = getattr(hypervisor, hypervisor.NAME_ATTR) return api.nova.service_disable(request, host, 'nova-compute') tables.py
  64. 64. def search_link(x): return "/admin/instances?q={0}".format(x.hypervisor_hostname) class AdminHypervisorsTable(tables.DataTable): hypervisor_hostname = tables.Column( "hypervisor_hostname", verbose_name=_("Hostname")) state = tables.Column( lambda hyp: hyp.service.get('state', _("UNKNOWN")).title(), verbose_name=_("State")) running_vms = tables.Column( "running_vms", link=search_link, verbose_name=_("Instances")) ... class Meta: name = "hypervisors" verbose_name = _("Hypervisors") tables.py
  65. 65. Template • Standard Django template format • Typically leverage base horizon templates (e.g. base.html)
  66. 66. {% extends 'base.html' %} {% load i18n horizon humanize sizeformat %} {% block title %}{% trans "Hypervisors" %}{% endblock %} {% block page_header %} {% include "horizon/common/_page_header.html" with title=_("All Hypervisors") %} {% endblock page_header %} {% block main %} {{ table.render }} {% endblock %} index.html
  67. 67. URLs Modules • Provides URL to View mappings
  68. 68. from django.conf.urls import patterns from django.conf.urls import url from openstack_dashboard.dashboards.ladjango.hypervisors import views urlpatterns = patterns( 'openstack_dashboard.dashboards.ladjango.hypervisors.views' url(r'^$', views.IndexView.as_view(), name='index'), ) urls.py
  69. 69. Completed Dashboard! Table Action Column Sorting Nav Entries Panel Rendering Data Retrieval Linking State Aware Row Actions RPC
  70. 70. Click through to Instances
  71. 71. Authentication • Keystone manages all Authentication for OpenStack • To access an OpenStack service: – authenticate with Keystone – Obtain a TOKEN – Use TOKEN for transactions with OpenStack service • Horizon passes all Auth requests to Keystone via CUSTOM_BACKENDS
  72. 72. class MetacloudKeystoneBackend(KeystoneBackend): def authenticate(self, request=None, username=None, password=None, user_domain_name=None, auth_url=None): keystone_client = get_keystone_client() client = keystone_client.Client( user_domain_name=user_domain_name, username=username, password=password, auth_url=auth_url, insecure=insecure, cacert=ca_cert, debug=settings.DEBUG) # auth_ref gets assigned here… # If we made it here we succeeded. Create our User! user = create_user_from_token( request, Token(auth_ref)) request.user = user return user backend.py
  73. 73. Customization Hooks • • • • • Change Site Title, Logo, Brand Links Modify Dashboards and Panels Change Button Styles Use Custom Stylesheets Use Custom Javascript
  74. 74. Custom Overrides Module • For site-wide customization, Horizon enables you to define a python module that will be loaded after Horizon Site has been configured • Customizations can include: – Registering or unregistering panels from an existing dashboard – Modifying dashboard or panel attributes – Moving panels between dashboards – Modifying attributes of existing UI elements
  75. 75. HORIZON_CONFIG = { ... 'customization_module': 'openstack_dashboard.dashboards.ladjango.overrides', 'test_enabled': True, } local_settings.py
  76. 76. from openstack_dashboard.dashboards.ladjango.test import panel as test_panel from openstack_dashboard.dashboards.ladjango import dashboard as ladjango_dashboard from django.conf import settings import horizon LADJANGO_DASHBOARD_SETTINGS = horizon.get_dashboard('ladjango') if settings.HORIZON_CONFIG.get('test_enabled'): LADJANGO_DASHBOARD_SETTINGS.register(test_panel.Tests) ladjango_dashboard.BasePanels.panels += ('ui', ) overrides.py
  77. 77. Full LA Django Dashboard
  78. 78. Test Panel
  79. 79. Custom CSS and Javascript • Horizon templates provides blocks for custom CSS and Javascript • To add custom CSS/JS, can either extend existing templates, or replace with your own custom templates
  80. 80. <!DOCTYPE html> <html> <head> <title>{% block title %}{% endblock %} - {% site_branding %}</title> {% block css %} {% include "_stylesheets.html" %} {% endblock %} . . . </head> <body id="{% block body_id %}{% endblock %}"> {% block content %} . . . {% endblock %} <div id="footer”>{% block footer %}{% endblock %}</div> {% block js %} {% include "horizon/_scripts.html" %} {% endblock %} </body> </html> base.html
  81. 81. {% extends 'base.html' %} {% load i18n %} {% block title %}{% trans "Volumes" %}{% endblock %} {% block css %} {% include "ladjango/_stylesheets.html" %} {% endblock %} {% block page_header %} {% include "horizon/common/_page_header.html" with title=_("Volumes") %} {% endblock page_header %} {% block main %} <div id="volumes">{{ volumes_table.render }}</div> <div id="volume-types">{{ volume_types_table.render }}</div> {% endblock %} {% block js%} {% include "ladjango/_scripts.html" %} {% endblock %} index.html
  82. 82. Horizon Base View
  83. 83. Custom View
  84. 84. About Metacloud
  85. 85. Metacloud Takes the best of OpenStack and enhances it to deliver a fully scalable, highly available, and customizable cloud platform.
  86. 86. Metacloud Metacloud OpenStack • High Availability • Scalability • Patches/Fixes • Enhanced UI Cloud Operations • Install • Monitor • Upgrade Services • On-Prem Private Cloud • Hosted Private Cloud
  87. 87. Metacloud • Community Support • Contribute to OpenStack as much as possible – Bug fixes, features – Help out with code reviews, documentation – Participate in design summits
  88. 88. OpenStack Horizon Contributing
  89. 89. Devstack and Contributing • Devstack: – “A documented shell script to build complete OpenStack development environments.” – http://devstack.org • Contributing to Horizon: – http://docs.openstack.org/developer/horizon/con tributing.html
  90. 90. Challenges and Future Directions
  91. 91. Challenges • Bugs! • Performance • Evolving Architecture in a Smooth Manner
  92. 92. Future Directions • Evolving the client: AngularJS • Search/Data Service Model
  93. 93. Lastly…
  94. 94. References • IRC channels (freenode.net) – #openstack-dev – #openstack-horizon – #openstack-meeting • Web: – – – – – – – http://docs.openstack.org/developer/horizon/ https://launchpad.net/horizon http://devstack.org https://github.com/openstack https://github.com/openstack/horizon http://docs.openstack.org/developer/horizon/ http://docs.openstack.org/developer/horizon/topics/setti ngs.html – https://wiki.openstack.org/wiki/Gerrit_Workflow
  95. 95. References • Web: – http://www.stackalytics.com – http://activity.openstack.org/dash/browser/ – http://gabrielhurley.github.io/slides/openstack/bu ilding_on_horizon/ – http://www.solinea.com/blog/openstack-grizzlyarchitecture-revisited
  96. 96. Thank You dlapsley@metacloud.com @devlaps For more information visit: metacloud.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×