The OpenStack project was launched by Rackspace and NASA in July 2010. Since then it has gained considerable momentum, with over 200 companies joining the project.
Horizon is OpenStack’s web-based user interface. 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 key to the Horizon framework. It allows developers to construct their own dashboards, panel groups, and panels, and assemble them via a common navigation/presentation framework.
In this presentation, David will provide a brief introduction to OpenStack and Horizon. Then he will review Horizon’s architecture, explain how it integrates with other OpenStack services, examine its most interesting features, and describe how to start developing with it.
The OpenStack project was launched by Rackspace and NASA in July 2010. Since then it has gained considerable momentum, with over 200 companies joining the project.
The OpenStack Horizon project provides a highly extensible web-based User Interface to OpenStack services. However, in the time since Horizon was first architected, there have been major advances in the design and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks have come to the fore. These frameworks provide a much more responsive user experience and much cleaner separation between the client and server. They also enable configuration driven interfaces, facilitate more modular testing, and can facilitate shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We will provide a brief introduction of OpenStack and Horizon, describe the recent work we have done, and then delve into architectural details and code examples of our recent work.
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) the dashboard implementation that uses the core set of libraries.
Horizon uses python django — server side technology
Django is a wonderful framework, but a little dated. Pre-dates the rise in client-side and single page applications.
Javascript is used for enhancing the user experience
In the time since Horizon was first architected, there have been major advances in the design, and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks like BackboneJS, AngularJS, MeteorJS, have come to the fore.
These applications provide a much more responsive user experience, much cleaner separation between the client and server, enable configuration driven interfaces, and facilitate more modular testing.
This in turn, results in shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We discuss some of the technologies we use, our application architecture, and some of the pitfalls to avoid.
OpenStack Horizon: Controlling the Cloud using DjangoDavid Lapsley
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.
Deze presentatie is gegeven tijdens de KScope conferentie 2012
Spreker: Luc Bors
Titel: An ADF Special Report
Onderwerp: Fusion Middleware - Subonderwerp: ADF
Oracle ADF is zeer geschikt voor het bouwen van enterprise applicaties. ADF heeft echter geen ingebouwde oplossingen voor het maken van rapportages. Door het inbouwen van rapportage mogelijkheden is het niet nodig om externe rapportage tooling op te starten. Met één druk op de knop worden de rapportages getoond en krijg je snel inzicht in bedrijfskritische gegevens. In deze sessie leer je hoe je dit kunt oplossen door het gebruik van open source rapportage-tools en tools van Oracle.
Slides from the Meteor Toronto Meet Up. September 21, 2016.
The session started with cursory introductions of Angular 2 and Redux. We then explore an experimental implementation of an Angular 2 Redux app with Meteor. A high level overview of the approach will be presented and then we will explore the source code guided by the curiosity of the group.
What do you know about Page Object Pattern? Simon Stewart who first applied it in 2009 using the Selenium WebDriver. Next appear a helpful wrapper for Page Object, such as Page Element, ScreenPlay, LoadabLe Component and etc. If you are interested to see how the interface changed the presentation of the Page Object, look at this presentation
The OpenStack project was launched by Rackspace and NASA in July 2010. Since then it has gained considerable momentum, with over 200 companies joining the project.
The OpenStack Horizon project provides a highly extensible web-based User Interface to OpenStack services. However, in the time since Horizon was first architected, there have been major advances in the design and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks have come to the fore. These frameworks provide a much more responsive user experience and much cleaner separation between the client and server. They also enable configuration driven interfaces, facilitate more modular testing, and can facilitate shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We will provide a brief introduction of OpenStack and Horizon, describe the recent work we have done, and then delve into architectural details and code examples of our recent work.
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) the dashboard implementation that uses the core set of libraries.
Horizon uses python django — server side technology
Django is a wonderful framework, but a little dated. Pre-dates the rise in client-side and single page applications.
Javascript is used for enhancing the user experience
In the time since Horizon was first architected, there have been major advances in the design, and best practices for web applications. In particular, the use of more sophisticated and robust client-side javascript frameworks like BackboneJS, AngularJS, MeteorJS, have come to the fore.
These applications provide a much more responsive user experience, much cleaner separation between the client and server, enable configuration driven interfaces, and facilitate more modular testing.
This in turn, results in shorter development cycles, more testable software, and above all, a better user experience.
In this presentation, we share some of our recent work in re-architecting parts of Horizon to take advantage of these new technologies. We discuss some of the technologies we use, our application architecture, and some of the pitfalls to avoid.
OpenStack Horizon: Controlling the Cloud using DjangoDavid Lapsley
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.
Deze presentatie is gegeven tijdens de KScope conferentie 2012
Spreker: Luc Bors
Titel: An ADF Special Report
Onderwerp: Fusion Middleware - Subonderwerp: ADF
Oracle ADF is zeer geschikt voor het bouwen van enterprise applicaties. ADF heeft echter geen ingebouwde oplossingen voor het maken van rapportages. Door het inbouwen van rapportage mogelijkheden is het niet nodig om externe rapportage tooling op te starten. Met één druk op de knop worden de rapportages getoond en krijg je snel inzicht in bedrijfskritische gegevens. In deze sessie leer je hoe je dit kunt oplossen door het gebruik van open source rapportage-tools en tools van Oracle.
Slides from the Meteor Toronto Meet Up. September 21, 2016.
The session started with cursory introductions of Angular 2 and Redux. We then explore an experimental implementation of an Angular 2 Redux app with Meteor. A high level overview of the approach will be presented and then we will explore the source code guided by the curiosity of the group.
What do you know about Page Object Pattern? Simon Stewart who first applied it in 2009 using the Selenium WebDriver. Next appear a helpful wrapper for Page Object, such as Page Element, ScreenPlay, LoadabLe Component and etc. If you are interested to see how the interface changed the presentation of the Page Object, look at this presentation
Oracle ADF is a very powerful framework for building enterprise applications. The framework, however, has no built-in solutions for reporting. In this session, you will learn how to fill this gap by using open source reporting solutions and solutions provided by Oracle.
Nessa apresentação demonstro como aplicar alguns dos Architecture Components disponíveis no Jetpack em uma arquitetura que segue o padrão Clean com MVVM.
Developing application for Windows Phone 7 in TDDMichele Capra
A real example of how to develop an application for Windows Phone 7 with Test Driven Development approach. In this presentation you'll see also hoew to implements the Model-View-ViewModel (MVVM) pattern.
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSencha
Have you ever wished you could use Sencha’s powerful Ext JS components in your React apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your React based apps. We’ve integrated the frameworks, so you can manage data and respond to events using React while rendering UI controls using Ext JS with React's tag-based JSX syntax.
Drupal8Day: Demystifying Drupal 8 Ajax Callback commandsMichael Miles
This session outlines and explains Drupal 8 AJAX callback commands and how to use them. AJAX callback commands are the sets of PHP and JavaScript functions that control all AJAX functionality on a Drupal site. You will be surprised about how simple and straight forward they are. Mastering these commands will allow your AJAX calls to do so much more then just return rendered HTML. Allowing you to provide the visitors of your Drupal 8 site a more dynamic, richer experience.
Demystifying AJAX Callback Commands in Drupal 8Michael Miles
This session outlines and explains Drupal 8 AJAX callback commands and how to use them. AJAX callback commands are the sets of PHP and JavaScript functions that control all AJAX functionality on a Drupal site. You will be suprised about how simple and straight forward they are. Mastering these commands will allow your AJAX calls to do so much more then just return rendered HTML. Allowing you to provide the visitors of your Drupal 8 site a more dynamic, richers experience.
This session is presented in three parts.
First, explaining what AJAX callback commands are.
Second, explaining how to use AJAX callback commands.
Third, explaining how to create and use your own custom commands.
Each section provides example code and walks through a real world Drupal 8 scenario.
Attendees should already be familiar with PHP and JavaScript, as well as, have a general understanding of Drupal and AJAX.
Oracle ADF is a very powerful framework for building enterprise applications. The framework, however, has no built-in solutions for reporting. In this session, you will learn how to fill this gap by using open source reporting solutions and solutions provided by Oracle.
Nessa apresentação demonstro como aplicar alguns dos Architecture Components disponíveis no Jetpack em uma arquitetura que segue o padrão Clean com MVVM.
Developing application for Windows Phone 7 in TDDMichele Capra
A real example of how to develop an application for Windows Phone 7 with Test Driven Development approach. In this presentation you'll see also hoew to implements the Model-View-ViewModel (MVVM) pattern.
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSencha
Have you ever wished you could use Sencha’s powerful Ext JS components in your React apps? Now you can. Learn about the new bridge we’ve created that enables you to use the Ext JS grid, treegrid, pivot grid, calendar, charts, and other components in your React based apps. We’ve integrated the frameworks, so you can manage data and respond to events using React while rendering UI controls using Ext JS with React's tag-based JSX syntax.
Drupal8Day: Demystifying Drupal 8 Ajax Callback commandsMichael Miles
This session outlines and explains Drupal 8 AJAX callback commands and how to use them. AJAX callback commands are the sets of PHP and JavaScript functions that control all AJAX functionality on a Drupal site. You will be surprised about how simple and straight forward they are. Mastering these commands will allow your AJAX calls to do so much more then just return rendered HTML. Allowing you to provide the visitors of your Drupal 8 site a more dynamic, richer experience.
Demystifying AJAX Callback Commands in Drupal 8Michael Miles
This session outlines and explains Drupal 8 AJAX callback commands and how to use them. AJAX callback commands are the sets of PHP and JavaScript functions that control all AJAX functionality on a Drupal site. You will be suprised about how simple and straight forward they are. Mastering these commands will allow your AJAX calls to do so much more then just return rendered HTML. Allowing you to provide the visitors of your Drupal 8 site a more dynamic, richers experience.
This session is presented in three parts.
First, explaining what AJAX callback commands are.
Second, explaining how to use AJAX callback commands.
Third, explaining how to create and use your own custom commands.
Each section provides example code and walks through a real world Drupal 8 scenario.
Attendees should already be familiar with PHP and JavaScript, as well as, have a general understanding of Drupal and AJAX.
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
Single-page Applications (SPA) are all the rage these days and with them there is an avalanche of new tools, libraries and frameworks we need to know. But what does this mean for us as Spring developers? In this session we will give you an overview of the current landscape and illustrate the choices the Spring XD team has made for its user interface. What do I use to write SPA applications? How do I integrate them into existing Spring-based backends? How do I build them? Can I integrate them into my existing Gradle or Maven build processes in order to achieve complete build automation? How do I integrate realtime messaging using Spring's SockJS/WebSocket support? In this talk we will answer these and many more questions. We will cover frameworks such as AngularJS, Bootstrap, RequireJS; tools like Bower, Grunt, Gulp; and also talk about testing using Karma and Protractor.
CCI2018 - Automatizzare la creazione di risorse con ARM template e PowerShellwalk2talk srl
Su Azure è possibile creare risorse in maniera veloce e standardizzata tramite template json che descrivono le risorse da creare sulla piattaforma. Vediamo insieme cosa possono fare, e come possono essere estesi con custom script extension e Powershell Desired State Configuration.
By Marco Obinu
Room with a Vue - Introduction to Vue.jsZachary Klein
Angular has brought MVC & dependency injection to the browser, while React nudges developers towards a simpler, functional approach to view rendering. What if there was a tool that took the best ideas from both of these titans, giving us simple, expressive components while still including enough “magic” to significantly boost developer productivity?
Enter Vue.js
In this talk we’ll get to know this new kid on the frontend block, contrast Vue with it’s better known rivals. We’ll explore the ecosystem: state management with Vuex, routing with Vue-router - and see why Vue.js might not be just another JavaScript framework.
Zero to Sixty: AWS CloudFormation (DMG201) | AWS re:Invent 2013Amazon Web Services
"AWS CloudFormation gives developers and systems administrators an easy way to create and manage a collection of related AWS resources, provisioning and updating them in an orderly and predictable fashion. In this Zero to Sixty session, learn about CloudFormation's latest features along with best practices for using them, including maintaining complex environments with CloudFormation, template management and re-use, and controlling stack updates. Demos and code samples are available to all session attendees.
Are you new to AWS CloudFormation? Get up to speed for this session by first completing the 60-minute Fundamentals of CloudFormation lab in the Self Paced Lab Lounge."
This was the supporting presentation from our DevOps Virtual Office Hours session.
We asked customers to bring their questions – technical or otherwise – that they would like answered about DevOps on AWS.
Check out the recording of the session on the AWS Webinars YouTube Channel here: http://youtu.be/pw9hlPqtHAA
Opencast Admin UI - Introduction to developing using AngularJSbuttyx
This presentation is intended to help developers anticipating using and potentially extending the new Admin UI get a hands-on introduction into the Angular JS portion of the software. It has been presented in the form of a workshop and therefore the last slides (starting with the 22) could seem a bit abstract.
React table tutorial project setup, use table, and usefilterKaty Slemon
Learn about React Table v7 and its new features in this React Table tutorial. Moreover, explore how can you implement useTable and useFilter hooks in your app.
Similar to 20140821 delapsley-cloudopen-public (20)
Ansible is a Configuration Management System that is very simple to use, because of its straightforward and robust model for managing automation and it’s low barrier to entry for ease of use in both development and production.
During OpenStack development, Ansible can be used in conjunction with Vagrant and Devstack to manage complex, multi-node development environments with relative ease.
In this presentation, Juergen Brendel and David Lapsley review Ansible and provide some sample playbooks to get developers up and running quickly. They also describes how to use Ansible, Vagrant, Devstack, and OpenStack to accelerate OpenStack development cycles.
VXLAN is a point to point, UDP-based "tunneling" protocol, that enables L2 encapsulation over an L3 "undernet", while also allowing up to 16 million Virtual Networks. One challenge with deploying VXLAN is that by default VXLAN requires multicast support for Broadcast, Unknown and Multi-cast packets. Often this is not possible in customer networks. An alternative approach is to use the Service Node concept where dedicated node(s)/process(es) are responsible for flooding Broadcast, Unknown, and Multicast packets throughout a network.
This removes the need for multi-cast, and greatly simplifies network configuration. However, it does require a scalable, and highly available implementation.
Empowering Admins by taking away root (Improving platform visibility in Horizon)David Lapsley
OpenStack as a Service enables Adminstrators to move upstack and concentrate more on helping their users and less on the low level details of managing their cloud hardware and software. However, this can come at a perceived cost: Cloud Administrators are used to being able log in to devices in their networks and see exactly what is going on.
In this presentation, we show how providing Admins with enhanced platform visibility through features like LiveStats and Historical Metrics can obsolete the requirement that Admins have root access to every device in their clouds, and enable them to invest their time and energy in areas where their users will benefit the most.
Increasingly, our customers are asking for more detailed and up to date information about the cloud infrastructure on which their applications are running. Currently, the information sources available to Horizon are quite limited in the type of information available, the sources of information, and the timeliness with which the information can be made available.
In this presentation, we describe recent work we have done in instrumenting our OpenStack deployments with distributed agents that provide real-time information to Horizon. We describe some re-architecture work done to Horizon to enable it to access this information, and show the results of our implementation. This work has enabled our customers to have increased visibility into the real-time state of their clouds, and has been very well received.
40. Dashboards & Panels
● Horizon provides a flexible framework for
creating Dashboards and Panels
● Panels grouped into PanelGroups
● PanelGroups into Dashboards
41. Dashboard App
● Dashboards created as Django Applications
● Dashboard modules partitioned into:
o static
o templates
o python modules
46. Panel
● Panels are created as Python Modules
● Panel modules partitioned into:
o static/
o templates/
o python modules:
urls.py, views.py, panel.py
tables.py, forms.py, tabs.py, tests.py
48. panel.py
from django.utils.translation import ugettext_lazy as _
import horizon
from openstack_dashboard.dashboards.cloudopen import dashboard
class Hypervisors(horizon.Panel):
name = _(”Hypervisors")
slug = 'hypervisors'
dashboard.CloudOpen.register(Hypervisors)
50. View Module
● View module ties together everything:
o Tables, Templates, API Calls
● Horizon base views:
o APIView, LoginView, MultiTableView,
DataTableView, MixedDataTableView,
TabView, TabbedTableView, WorkflowView
51. views.py
from horizon import tables
class HypervisorsIndexView(tables.DataTableView):
table_class = hv_tables.AdminHypervisorsTable
template_name = ’cloudopen/hypervisors/index.html’
def get_data(self):
hypervisors = []
states = {}
hypervisors = api.nova.hypervisor_list(self.request)
…
return hypervisors
52. Table Module
● Table classes provide framework for tables:
o consistent look and feel
o configurable table_actions and row_actions
o select/multi-select column
o sorting
o pagination
● Functionality is split server- and client-side
62. Customization Hooks
● Change Site Title, Logo, Brand Links
● Modify Dashboards and Panels
● Change Button Styles
● Use Custom Stylesheets
● Use Custom Javascript
63. Custom Overrides Module
● For site-wide customization, Horizon allows for a
user-defined python customization module
● Customizations can include:
o Registering/unregistering panels
o Modifying dashboard or panel attributes
o Moving panels between dashboards
o Modifying attributes of existing UI elements
65. overrides.py
from openstack_dashboard.dashboards.cloudopen.test import panel
as test_panel
from openstack_dashboard.dashboards.cloudopen import dashboard
as cloudopen_dashboard
from django.conf import settings
import horizon
CLOUDOPEN_DASHBOARD_SETTINGS = horizon.get_dashboard('cloudopen')
if settings.HORIZON_CONFIG.get('test_enabled'):
CLOUDOPEN_DASHBOARD_SETTINGS .register(test_panel.Tests)
69. Pluggable Settings
● Since Icehouse release, Horizon enables
pluggable settings to control structure
o Enable/Disable new Dashboards
o Add new PanelGroups
o Add/Remove Panels to/from PanelGroups
● Settings all live in:
o openstack_dashboard/local/enabled
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
93. Devstack and Contributing
● Devstack:
o “A documented shell script to build complete
OpenStack development environments.”
o http://devstack.org
● Contributing to Horizon:
– http://docs.openstack.org/developer/horizo
n/contributing.html
94. OPENSTACK THAT JUST WORKS
Thank You
David Lapsley
@devlaps, david.lapsley@metacloud.com
Editor's Notes
Add client-side…
Orchestration engine to launch multiple cloud applications based on templates in the form of text files that can be treated like code.
Compatible with AWS Cloud Formation
----- Meeting Notes (8/20/14 20:59) -----
30 mins
----- Meeting Notes (8/20/14 20:59) -----
30 mins
Old way of customizing v. new way..
Server provides data over RESTful API – json data
Client responsible for rendering and presenting
Much more interactive, client can now take immediate action on data it knows about instead of round tripping to server
Faster feature velocity, server and client can be developed in parallel
Simpler code
Instrument each node with livestastd
Controllers and Hypervisors
Pull information about processes, network, disk, cpu
Updates every 5 seconds
Using the same client-side rendering pattern as before
Aggregating real-time data
Greatly increases visibility into platform..
Our customers also wanted to see more historical data.
We instrumented all of our nodes and push data into Graphite
Very high performance and flexiblie time series tool
Evolution of RRD Tool
Graphite provides data over RESTful API, so we just pull that data and use it to populate these charts..
Easy access for the user (simply click on controller or hypervisor row and chart will drop down)
Data from 1 hour range to 1 year range..