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.

1. OpenStack Horizon
Controlling the Cloud using Django
LA Django Meetup, February 18, 2014
David Lapsley
OpenStack Engineer, @metacloudinc
@devlaps, dlapsley@metacloud.com

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. 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. OpenStack
Linux for the Cloud

5. Cloud Computing in Action
Creating a virtual server on a Public OpenStack
Cloud

6. Cloud Computing in Action

7. Cloud Computing in Action

8. Cloud Computing in Action

9. Cloud Computing in Action

10. Cloud Computing in Action

11. Cloud Computing Model

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. 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. 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. Some interesting
OpenStack facts …

16. OpenStack Source Code

17. OpenStack Source Code

18. OpenStack Contributors

19. 14, 175 People
132 Countries
http://www.openstack.org

20. “Linux for the Cloud”

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. 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. OpenStack Horizon
Controlling the Cloud with Django

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. Django Stack
Web'Browser
Django'Stack
Test'Infrastructure
Template
URL'Dispatcher
View
Framework
Model
Database

26. Horizon Stack

27. Horizon UI Structure (logical)
Branding
User Info
Dashboard
Panel Group
Panel
Sidebar
Panel Content

28. Horizon UI Structure (logical)
Project Dashboard
Project Dropdown

29. Horizon UI Structure (CSS)
body
#container
.sidebar
#main_content
.topbar
.page4
header
#user_info
.messages
<panel9
content>
#footer

30. Horizon Base Demo

31. Admin Overview

32. Project Overview

33. Launching an Instance

34. Horizon Base Demo

35. Horizon Base Demo

36. Horizon Base Demo

37. Instance List

38. Filtering

39. Sorting

40. Horizon Base Demo

41. Row Actions

42. Table Actions

43. Table Actions

44. Table Actions

45. Instance Details

46. Instance Details

47. Instance Console

48. OpenStack Horizon
Interesting Patterns

49. Dashboards and Panels
• Horizon provides a flexible framework for
creating Dashboards and Panels
• Panels are grouped into PanelGroups
• PanelGroups into Dashboards

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. ‣ openstack_dashboard
‣ dashboards
‣ admin
‣ ladjango
‣ static
‣ ladjango
‣ css
‣ img
‣ js
‣ templates
‣ ladjango
__init__.py
dashboard.py
Dashboard Directory Structure

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. 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. Starting Point

55. LA Django Dashboard
Dashboard Tab
Panel Group

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. ‣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. 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. LA Django Dashboard
Panel Nav Entry

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. 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. 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. 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. 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. Template
• Standard Django template format
• Typically leverage base horizon templates (e.g.
base.html)

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. URLs Modules
• Provides URL to View mappings

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. Completed Dashboard!
Table Action
Column Sorting
Nav Entries
Panel Rendering
Data Retrieval
Linking
State Aware Row Actions
RPC

70. Click through to Instances

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. 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. Customization Hooks
•
•
•
•
•
Change Site Title, Logo, Brand Links
Modify Dashboards and Panels
Change Button Styles
Use Custom Stylesheets
Use Custom Javascript

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. HORIZON_CONFIG = {
...
'customization_module':
'openstack_dashboard.dashboards.ladjango.overrides',
'test_enabled': True,
}
local_settings.py

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. Full LA Django Dashboard

78. Test Panel

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. <!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. {% 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. Horizon Base View

83. Custom View

84. About Metacloud

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

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. Metacloud
• Community Support
• Contribute to OpenStack as much as possible
– Bug fixes, features
– Help out with code reviews, documentation
– Participate in design summits

88. OpenStack Horizon
Contributing

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. Challenges and Future Directions

91. Challenges
• Bugs!
• Performance
• Evolving Architecture in a Smooth Manner

92. Future Directions
• Evolving the client: AngularJS
• Search/Data Service Model

93. Lastly…

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. 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. Thank You
dlapsley@metacloud.com
@devlaps
For more information visit:
metacloud.com