使用Horizon构建Dashboard
Posted Mr_扛扛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Horizon构建Dashboard相关的知识,希望对你有一定的参考价值。
一、写在前面
继上篇博文,在这篇博文中举例说明扩展一个dashboard 以及 panel。类似这样的博文在网上较多,这里仅仅是回忆下,好久没有跟进OpenStack Horizon版本的代码,基于目前OpenStack rocky版本。
邮箱地址:jpzhang.ht@gmail.com
个人博客:https://jianpengzhang.github.io/
CSDN博客:http://blog.csdn.net/u011521019
Horizon 原文阅读地址:https://docs.openstack.org/horizon/latest/contributor/tutorials/dashboard.html
二、新建Dashboard & Panel
按照惯例,这里简单介绍下Horizon的目录结构,至于如何构建一个Horizon的开发环境这里不在详述,这里是基于devstack部署的all in one 简单环境。
Horizon设计和架构的核心价值:
- 核心支持:对所有核心OpenStack项目提供开箱即用的支持;
- 可扩展性:任何开发者都能增加组件;
- 易于管理:架构和代码易于管理,浏览方便;
- 视图一致:各组件的界面和交互模式保持一致;
- 可兼容性:API向后兼容;
- 易于使用:界面用户友好;
Horizon 结构:
Horizon提供一个模块化的基于Web的图形界面,采用了Django框架。Horizon目录结构主要分为两个:Horizon、opendtack_dashboard,Horizon模块的实现充分利用了很多Django框架提供的一些高级特性。如果把horizon目录中的各种实现当作积木,那么搭好的小房屋就放在openstack_dashboard的目录下。目录源码结构如下:
.
├── horizon # horizon通用组件库
│ ├── base.py # 定义了horizon模块中从HorizonSite到Panel的各种组件的类库,并且用类HorizonSite为整个项目实例化了一个horizon对象
│ ├── browsers # 浏览器基类
│ ├── conf # 配置文件
│ ├── context_processors.py # 自动设置相应上下文变量来解析模板的上下文处理器,他把HORIZON_CONFIG字典自动加到了Context上下文变量中传给模板
│ ├── contrib # 多语言映射关系
│ ├── decorators.py # 用于方便取得网页请求的当前组件和权限认证
│ ├── exceptions.py # 异常处理
│ ├── forms # form表单基类包
│ ├── hacking
│ ├── __init__.py
│ ├── karma.conf.js
│ ├── loaders.py # 帮助horizon模块使用自定义的方式加载模板而非使用Django自带的模板加载器
│ ├── locale # 国际化语言包
│ ├── management # manage.py命令的startdash/startpanel命令选项
│ ├── messages.py # 消息通信
│ ├── middleware # 中间件,用来处理收到的异常和网页请求及回应需要的附加的动作
│ ├── notifications.py
│ ├── __pycache__
│ ├── site_urls.py # URL相关
│ ├── static # 静态文件包
│ ├── tables # table基类包
│ ├── tabs # tab基类包
│ ├── templates # 模板文件基类
│ ├── templatetags # 模板标签基类
│ ├── test # 测试包
│ ├── themes.py
│ ├── utils # 实用工具包
│ ├── version.py # 版本信息
│ ├── views.py # 视图
│ └── workflows # 工作流机制包
├── openstack_dashboard # horizon各个面板的具体实现代码
│ ├── api # 与外部api交互的方法和接口对象
│ ├── conf # nova、cinder等API访问权限控制,叫 xxx_policy.json,里面定义了鉴权用的rules
│ ├── context_processors.py # 上下文处理器
│ ├── contrib
│ ├── dashboards # Horizon界面展示各个模块实现目录
│ │ ├── admin # 管理员界面,管理登录后可见,左侧的管理员面板
│ │ │ ├── instances # 云主机管理界面
│ │ │ │ ├── forms.py # form表单实现
│ │ │ │ ├── __init__.py
│ │ │ │ ├── panel.py # 在应用程序中注册面板并定义面板属性
│ │ │ │ ├── __pycache__
│ │ │ │ ├── tables.py # table实现
│ │ │ │ ├── tabs.py # tab实现
│ │ │ │ ├── templates # 云主机html界面模板
│ │ │ │ ├── tests.py # 测试
│ │ │ │ ├── urls.py # url映射,描述了当浏览器网址指向那一级目录
│ │ │ │ └── views.py # url映射的视图,包含页面的业务逻辑,该文件里的函数通常叫做视图
│ │ │ ├── dashboard.py # 使用Horizon注册应用程序并设置dashboard属性
│ │ ├── identity # 项目、用户管理界面
│ │ ├── __init__.py
│ │ ├── project # 普通用户登录后看到的项目面板
│ │ ├── __pycache__
│ │ ├── settings # 设置界面,右上角的设置面板,里面可设置语言、时区、更改密码
│ ├── django_pyscss_fix
│ ├── enabled # 控制导航加载哪些模块显示出来
│ ├── exceptions.py # 异常处理
│ ├── hooks.py
│ ├── __init__.py
│ ├── karma.conf.js
│ ├── local # 本地配置文件
│ ├── locale # 本地国家化语言包
│ ├── management # 定义安装apache、horizon等是配置文件的模板文件
│ ├── policy.py # 策略
│ ├── __pycache__
│ ├── settings.py # 设置
│ ├── static # 静态包
│ ├── templates # 模板包
│ ├── templatetags # 模板标签包
│ ├── test # 测试包
│ ├── themes
│ ├── theme_settings.py
│ ├── urls.py # URL模型
│ ├── usage # 概况页面资源统计实现包
│ ├── utils # 工具包
│ ├── views.py
│ ├── wsgi # wsgi包
│ └── wsgi.py
使用Horizon构建dashboard
介绍如何使用Horizon中的各种组件来构建示例dashboard和带有tab的panel,该tab包含一个包含后端数据的表。【参考官方实例】
例如,我们将创建一个新的“My Dashboard”的Dashboard,其中“My Panel”的Panel具有“Instances Tab” 标签。该tab标签卡有一个表,其中包含Nova实例(instances)API提取的数据。
创建 Dashboard
-
快速方式
Horizon提供自定义管理命令,创建典型的Dashboard基础结构。在Horizon根目录中运行以下命令。它生成了需要的大部分样板代码:
$ mkdir openstack_dashboard/dashboards/mydashboard $ tox -e manage -- startdash mydashboard \\ --target openstack_dashboard/dashboards/mydashboard $ mkdir openstack_dashboard/dashboards/mydashboard/mypanel $ tox -e manage -- startpanel mypanel \\ --dashboard=openstack_dashboard.dashboards.mydashboard \\ --target=openstack_dashboard/dashboards/mydashboard/mypanel
你会注意到目录mydashboard会自动填充与dashboard相关的文件,mypanel目录会自动填充与面板相关的文件。
-
目录结构
如果使用tree mydashboard命令列出openstack_dashboard/ dashboards中的mydashboard目录,你将看到如下所示的目录结构:. ├── dashboard.py ├── __init__.py ├── mypanel │ ├── __init__.py │ ├── panel.py.tmpl │ ├── templates │ │ └── mypanel │ ├── tests.py.tmpl │ ├── urls.py.tmpl │ └── views.py └── templates └── mydashboard
不处理静态目录或tests.py文件,保持原样,有了其他文件和目录,我们可以继续添加我们自己的dashboard。
-
定义dashboard
打开dashboard.py文件,会注意到已自动生成以下代码:from django.utils.translation import ugettext_lazy as _ import horizon class Mydashboard(horizon.Dashboard): name = _("My dashboard") slug = "mydashboard" panels = () # Add your panels here. default_panel = '' # Specify the slug of the dashboard's default panel. horizon.register(Mydashboard)
如果你希望dashboard名称是其他名称,则可以更改dashboard.py文件中的name属性。 例如,你可以将其更改为“My Dashboard”
dashboard类通常包含name属性(dashboard的显示名称),slug属性(可由其他组件引用的内部名称),panels列表,默认panel等。
创建 panel
我们将创建一个panel并将其命名为My Panel。
-
目录结构
如上所述,openstack_dashboard/dashboards/mydashboard下的mypanel目录应如下所示:
. ├── __init__.py ├── panel.py ├── templates │ └── mypanel └── views.py
上面引用的panel.py文件具有特殊含义。在dashboard中,dashboard类的panels属性中列出的任何模块名称都将通过查找相应目录中的panel.py文件自动发现。
打开panel.py文件,自动生成的代码:from django.utils.translation import ugettext_lazy as _ import horizon from openstack_dashboard.dashboards.mydashboard import dashboard class Mypanel(horizon.Panel): name = _("My panel") slug = "mypanel" dashboard.Mydashboard.register(Mypanel)
如果你希望Panel名称是其他名称,则可以更改panel.py文件中的name属性。 例如,可以将其更改为"My panel"。
再次打开dashboard.py文件,在Mydashboard类上面插入以下代码。此代码定义了Mygroup类并添加了一个名为mypanel的面板:class Mydashboard(horizon.Dashboard): name = _("My Dashboard") slug = "mydashboard" panels = (Mygroup,) # Add your panels here. default_panel = 'mypanel' # Specify the slug of the default panel.
完成的dashboard.py文件应如下所示:
from django.utils.translation import ugettext_lazy as _ import horizon class Mygroup(horizon.PanelGroup): slug = "mygroup" name = _("My Group") panels = ('mypanel',) class Mydashboard(horizon.Dashboard): name = _("Mydashboard") slug = "mydashboard" panels = (Mygroup, ) # Add your panels here. default_panel = 'mygroup' # Specify the slug of the dashboard's default panel. horizon.register(Mydashboard)
Tables, Tabs, and Views
将从table开始,将其与tabs相结合,然后从各个部分构建我们的视图。
-
定义table
Horizon提供了一个SelfHandlingForm DataTable类,它简化了大多数向最终用户显示数据的形式。我们只是在这里简单举例,但它具有大量的功能。在mypanel目录下创建一个tables.py文件并添加以下代码:
from django.utils.translation import ugettext_lazy as _ from horizon import tables class InstancesTable(tables.DataTable): name = tables.Column("name", verbose_name=_("Name")) status = tables.Column("status", verbose_name=_("Status")) zone = tables.Column('availability_zone', verbose_name=_("Availability Zone")) image_name = tables.Column('image_name', verbose_name=_("Image Name")) class Meta(object): name = "instances" verbose_name = _("Instances")
创建了一个tables.DataTable子类,并定义了我们想要检索显示的四列数据。这些列中的每一列显示的数据为Instances对象的属性,即定义的第一个属性值,verbose_name参数表示该列在table表格thead中的中文名字。
最后,我们添加了一个Meta类,描述instances表的元对象,即表示数据来自instances数据表。 -
定义table 动作
Horizon提供了三种类型的基本操作类,可以在表的数据上使用:- Action:表示可以对此表的数据执行的操作。
- LinkAction:表示操作只是一个链接而不是POST表单。
- FilterAction:表示表的过滤器操作的基类。
还有其他操作是基本Action类的扩展:
- BatchAction:对一个或多个对象执行批处理操作的表操作。此操作不应要求基于每个对象的用户输入。
- DeleteAction:用于对表数据执行删除操作的表操作。
- FixedFilterAction:带固定按钮的过滤器操作。
表中添加一个过滤器操作,显示包含在过滤器字段中输入的字符串的行。编辑tables.py文件:
class MyFilterAction(tables.FilterAction):
name = "myfilter"
上面指定的操作将默认filter_type为“query”。这意味着过滤器将使用客户端表排序。
将该操作添加到表的表操作中:
class Meta(object):
name = "instances"
verbose_name = _("Instances")
table_actions = (MyFilterAction,)
-
定义tabs
上面定义了一个表,可以显示数据。我们可以直接从这里看到一个view视图,但在里,我们还将使用horizon的TabGroup类,来定义一个tab,通过一个tab来显示视图。
在mypanel目录下创建一个tabs.py文件,创建一个包含一个tab的tab group:from django.utils.translation import ugettext_lazy as _ from horizon import exceptions from horizon import tabs from openstack_dashboard import api from openstack_dashboard.dashboards.mydashboard.mypanel import tables class InstanceTab(tabs.TableTab): name = _("Instances Tab") slug = "instances_tab" table_classes = (tables.InstancesTable,) template_name = ("horizon/common/_detail_table.html") preload = False def has_more_data(self, table): return self._has_more def get_instances_data(self): try: marker = self.request.GET.get( tables.InstancesTable._meta.pagination_param, None) instances, self._has_more = api.nova.server_list( self.request, search_opts='marker': marker, 'paginate': True) return instances except Exception: self._has_more = False error_message = _('Unable to get instances') exceptions.handle(self.request, error_message) return [] class MypanelTabs(tabs.TabGroup): slug = "mypanel_tabs" tabs = (InstanceTab,) sticky = True
这个tab标签变得有点复杂。该tab用于处理上面定义的数据表(及其所有相关特性),并且还使用preload属性指定默认情况下不应加载此tab,相反,当有人单击它时,它将通过AJAX加载,在大多数情况下节省了API调用的时间。
此外,表的显示由一个可重用的模板horizon/common/_detail_table.html处理。添加了一些简单的分页代码来处理大量实例列表。
最后,介绍了horizon中错误处理的机制,即是异常捕捉。horizon.exceptions.handle()函数是一种集中式错误处理机制,它可以处理来自API的异常的所有错误以及不一致。 -
在视图中将它们添加上去
打开views.py文件,自动生成的代码如下所示:from horizon import views class IndexView(views.APIView): # A very simple class-based view... template_name = 'mydashboard/mypanel/index.html' def get_data(self, request, context, *args, **kwargs): # Add data to the context here... return context
在本例中:导入正确的包后,已完成的views.py文件现在如下所示:
from horizon import tabs from openstack_dashboard.dashboards.mydashboard.mypanel \\ import tabs as mydashboard_tabs class IndexView(tabs.TabbedTableView): tab_group_class = mydashboard_tabs.MypanelTabs template_name = 'mydashboard/mypanel/index.html' def get_data(self, request, context, *args, **kwargs): # Add data to the context here... return context
创建 URLs
自动生成的urls.py文件如下:
from django.conf.urls import url
from openstack_dashboard.dashboards.mydashboard.mypanel import views
urlpatterns = [
url(r'^$', views.IndexView.as_view(), name='index'),
]
创建 template
在mydashboard/mypanel/templates/mypanel目录中创建/打开index.html文件:
% extends 'base.html' %
% load i18n %
% block title %% trans "My Panel" %% endblock %
% block page_header %
% include "horizon/common/_page_header.html" with title=_("My Panel") %
% endblock page_header %
% block main %
<div class="row">
<div class="col-sm-12">
tab_group.render
</div>
</div>
% endblock %
这里提供了自定义页面标题,并呈现了视图提供的tab组。
接下去将它集成到我们的OpenStack Dashboard站点中。
启用并显示dashboard
为了使My Dashboard与Project或Admin等现有dashboard一起显示,需要在openstack_dashboard/enabled下创建一个名为_50_mydashboard.py的文件,并添加以下内容:
运行
tox -e runserver -- 0.0.0.0:9000
以上是关于使用Horizon构建Dashboard的主要内容,如果未能解决你的问题,请参考以下文章
OpenStack实践系列⑧可视化服务Horizon之Dashboard演示
openstack M版安装 Dashboard (horizon)篇
原创|NO.C.0007——OpenStack.Dashboard|Horizon仪表盘套件|安装仪表盘套件|通过IE登录|
openstack安装dashboard后访问horizon出错 500 or 504
OpenStack搭建企业私有云 五: Dashboard(持续更新...)
openstack安装dashboard后访问horizon出错 End of script output before headers: django.wsgi