Shulou(Shulou.com)05/31 Report--

This article is about how to customize the horizon plug-in. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

This example is a custom plug-in based on the ocata version of horizon. Help to understand horizon custom dashbaord and panel. Basic knowledge of Python, HTML, and JavaScript (AngularJS) is required.

Warehouse naming

Needless to say, it is important to choose a meaningful repository name. In addition, if you plan to support translation on your dashboard plug-in, it is recommended that you choose a name similar to xxxx-dashboard (or xxxx-ui. Xxx-horizon). The OpenStack CI infra script treats these suffixes as Django projects.

File structure factor

The entire plug-in directory is structured as follows:

Xxxx-dashboard │├── xxxxdashboard │ ├── _ _ init__.py │ ││ ├── enabled │ │ ├── _ 90000_mydashboard.py │ │ ├── _ 90010_mygroup_panel_group.py │ │ └── _ 90011_mypanel.py │ ││ ├── api │ _ _ init__.py my_ Rest_api.py │ │ └── myservice.py │ ││ ├── dashboards │ │ ├── _ _ init__.py │ │ └── mydashboard │ │ ├── _ _ init__.py │ │ ├── dashboard.py │ mypanel _ _ init__.py │ ├── panel.py │ ├── tests.py │ ├── urls.py │ ├── views.py │ templates mypanel index. Html │ │ └── static │ │ └── dashboard │ | └── mydashboard │ | └── mypanel │ | ├── mypanel.html │ | ├── mypanel.js │ | └── mypanel.scss │ | │ ││ └── locale │ └── │ └── LC_MESSAGES │ ├── django.po │ └── djangojs.po │├── setup.py ├── setup.cfg ├── LICENSE MANIFEST.in ├── README.rst ├── babel-django.cfg └── babel-djangojs.cfgEnabled File _ 90000_mydashboard .py # The slug of the dashboard to be added to HORIZON ['dashboards']. Required.DASHBOARD = 'mydashboard'# If set to True, this dashboard will be set as the default dashboard.#DEFAULT = True# A dictionary of exception classes to be added to HORIZON [' exceptions']. ADD_EXCEPTIONS = {} # A list of applications to be added to INSTALLED_APPS.ADD_INSTALLED_APPS = [xxxxdashboard.dashboards.mydashboard'] ADD_ANGULAR_MODULES = ['dashboard.mydashboard.mypanel'] ] AUTO_DISCOVER_STATIC_FILES = TrueADD_JS_FILES = [] ADD_JS_SPEC_FILES = [] _ 90010_mygroup_panel_group.pyfrom django.utils.translation import ugettext_lazy as _ # The slug of the panel group to be added to HORIZON_CONFIG. Required.PANEL_GROUP = 'mygroup'# The display name of the PANEL_GROUP. Required.PANEL_GROUP_NAME = _ ('MyGroup') # The slug of the dashboard the PANEL_GROUP associated with. Required.PANEL_GROUP_DASHBOARD = 'mydashboard'_90011_mypanel.py# The slug of the panel to be added to HORIZON_CONFIG. Required.PANEL = 'mypanel'# The slug of the dashboard the PANEL associated with. Required.PANEL_DASHBOARD = 'mydashboard'# The slug of the panel group the PANEL is associated with.PANEL_GROUP =' mygroup'# If set It will update the default panel of the PANEL_DASHBOARD.DEFAULT_PANEL = 'mypanel'# Python panel class of the PANEL to be added.ADD_PANEL =' xxxxdashboard.dashboards.mydashboard.mypanel.panel.MyPanel'dashboardsdashboard.pyfrom django.utils.translation import ugettext_lazy as _ import horizonclass MyDashboard (horizon.Dashboard): name = _ ("MyDashboard") slug = "mydashboard" horizon.register (MyDashboard) panelpanel.pyfrom django.utils.translation import ugettext_lazy as _ import horizonclass MyPanel (horizon.Panel): name = _ ("My Panel") slug = "mypanel" urls.pyfrom django.conf.urls import urlfrom xxxxdashboard.dashboards.mydashboard.mypanel import viewsurlpatterns = [url (r'^ $') Views.IndexView.as_view (), name='index'),] views.pyfrom django.views.generic import baseclass IndexView (base.TemplateView): template_name = 'mydashboard/mypanel/index.html'index.html

This file is located in dashboards/mydashboard/mypanel/templates/mypanel/index.html.

{% extends' base.html'%} {% load i18n%} {% block title%} {% trans "My panel"%} {% endblock%} {% block page_header%} {% include "horizon/common/_domain_page_header.html" with title=page_title%} {% endblock page_header%} {% block main%} {% endblock%} directory structure of static files

Mypanel.html Loading data from your controller: {$item.name $} {$item.id $} mypanel.js (function () {'use strict'; angular .module (' dashboard.mydashboard.mypanel', []). Controller ('dashboard.mydashboard.myPluginController', myPluginController); myPluginController.$inject = [' $http']; function myPluginController ($http) {var ctrl = this) Ctrl.items = [{name: 'abc', id: 123}, {name:' efg', id: 345}, {name: 'hij', id: 678}];}) (); mypanel.scssli {display: inline; margin-right: 15px; input [type= "radio"] {margin: 0px;}} MANIFEST.in

This file is responsible for listing the paths you want to include in the tar.

Include setup.pyrecursive-include myplugin * .js * .html * .scsssetup.py wr. # THIS FILE IS MANAGED BY THE GLOBAL REQUIREMENTS REPO-DO NOT EDITimport setuptools# In python

< 2.7.4, a lazy loading of package `pbr` will break# setuptools if some other modules registered functions in `atexit`.# solution from: http://bugs.python.org/issue15881#msg170215try: import multiprocessing # noqaexcept ImportError: passsetuptools.setup( setup_requires=['pbr>

= 1.8'] Pbr=True) setup.cfg [metadata] name = mypluginsummary = A panel plugin for OpenStack Dashboarddescription-file = README.rstauthor = mynameauthor_email = myemailhome-page = https://docs.openstack.org/horizon/latest/classifiers = [Environment:: OpenStack Framework:: Django Intended Audience:: Developers Intended Audience:: System Administrators License:: OSI Approved:: Apache Software License Operating System:: POSIX:: Linux Programming Language:: Python Programming Language:: Python:: 2 Programming Language:: Python:: 2.7 Programming Language:: Python:: 3.5 [files] packages = myplugin Thank you for reading! This is the end of this article on "how to customize the horizon plug-in". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.