0

Openstack Horizon二次开发

 1 year ago
source link: https://zhanggq.github.io/post/zgq-paas-openstack-dashboard/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

最近碰到个项目，需要在Horizon基础上开发增加一些小功能，这里将简单介绍一下Horizon的开发过程。

一、Horizon介绍

Horizon是基于django webframework开发的标准的Python wsgi程序，django的设计专注于代码的高度可重用，信奉DRY原则，一切面向对象，而Horizon可以说高度match了django的设计风格。网站程序基本有三部分组成，业务逻辑代码(Python)，静态文件(js/css)，模板(Python中的jinja,mako,nodejs中有jade)， 用户向webserver发起请求之后，server程序找到当前url对应的模板，填充模板变量(输出成字符串形式的html源码),返回给浏览器，浏览器渲染页面。一般模板语言都有继承(extend),插入(include)等特性，来提高页面的复用率。

Horizon做得就更彻底一些，它将页面上所有元素模块化，网页中一些常见元素，表单，表格，标签页，全部封装成Python类，每个组件有自己对应的一小块html模板(templates)。当渲染整个页面的时候,Horizon先找到当前页面有多少组件，将各个组件分别进行渲染变成一段html片段，最后拼装成一 个完整的html页面，返回浏览器。

一个Dashboard（在django里称为app）通常情况下由四个组件组成，分别为panel、tab、table和view。其中，panel、tab和table用于导航的，真正展示数据的在view里面。它们之间的关系是panel包含tab，tab包含table，view包含table或者tab。

二、研发环境搭建

可以在已经部署好的openstack环境中直接修改/usr/lib/python2.7/site-packages/openstack_dashboard/目录下的代码，之后重启httpd服务调试，也可以通过官网Quick start中的方式，将源码下载到本地，然后通过tox工具进行调试。这里将描述一下第二种方式的操作过程：

[root@vultr ~]# yum -y install epel-release
[root@vultr ~]# yum install gcc git-core python-devel python-virtualenv openssl-devel libffi-devel which
[root@vultr ~]# yum -y install python-pip
[root@vultr ~]# pip install django
[root@vultr ~]# pip install tox
[root@vultr ~]# mkdir /root/python; cd /root/python;
[root@vultr python]# git clone https://github.com/openstack/horizon.git
[root@vultr python]# cd horizon
[root@vultr horizon]# git branch -r
origin/HEAD -> origin/master
origin/master
origin/stable/ocata
origin/stable/pike
origin/stable/queens
origin/stable/rocky
[root@vultr horizon]# git checkout -b origin/stable/pike
[root@vultr horizon]# cp openstack_dashboard/local/local_settings.py.example openstack_dashboard/local/local_settings.py

之后修改local_settings.py文件的下列参数，其中ALLOWED_HOSTS参数是为了能访问Dashboard而设置成*，其它4个参数目的是对接已有环境的Keystone，否则无法正常登入Dashboard。

ALLOWED_HOSTS = ['*']
SECRET_KEY='atUWYfUG0GOELk0aNS2a5fjQxVC3Rc8z7Qdl8LJc'
OPENSTACK_HOST = "172.16.170.129"
OPENSTACK_KEYSTONE_URL = "http://%s:15000/v2.0" % OPENSTACK_HOST
OPENSTACK_ENDPOINT_TYPE = "internalURL"

之后通过tox启动Dashboard，期间会有较长的pip install过程，根据网络状况不同，安装时间也会不同，国内用户等待的时间会比较漫长。

[root@hcs1 horizon]# tox -e runserver -- 172.16.33.1:8000
runserver create: /home/zgq/python/horizon/.tox/runserver
runserver installdeps: -r/home/zgq/python/horizon/requirements.txt, -r/home/zgq/python/horizon/test-requirements.txt

启动完成之后可以通过浏览器登入Dashboard

9dDwR6P.png

三、创建自己的Panel

参考官网教程

[root@hcs1 horizon]# cd /home/zgq/python/horizon
[root@hcs1 horizon]# mkdir -p openstack_dashboard/dashboards/mydashboard/mypanel
[root@hcs1 horizon]# tox -e manage -- startdash mydashboard \
--target openstack_dashboard/dashboards/mydashboard
[root@hcs1 horizon]# tox -e manage -- startpanel mypanel \
--dashboard=openstack_dashboard.dashboards.mydashboard \
--target=openstack_dashboard/dashboards/mydashboard/mypanel

之后删掉暂时用不上的，只留下需要的文件，目录结构如图：

h2lZHw7.png

修改dashboard.py文件

i8996jn.png

修改mypanel/panel.py文件

V4BZ0lF.png

修改mypanel/tables.py文件

4E0yu7M.png

修改mypanel/tabs.py文件

j9RN3fk.png

修改mypanel/views.py文件

VXuO5C2.png

修改mypanel/urls.py文件

TlmsZ2G.png

修改mypanel/templates/mypanel/index.html文件

oHimiJy.png

最后创建并修改/home/zgq/python/horizon/openstack_dashboard/enabled/_50_mydashboard.py文件

3FrUeVB.png

之后重启tox后再次登入dashboard，新增的界面已经加上了

QhsVgX0.png

四、创建一个复杂的动作

参考官网教程

因为是在上一步新增的界面上增加Action，所以不需要修改dashboard.py和panel.py文件。新增form.py文件

2UjtGvZ.png

之后修改table.py文件，增加Action

C3QRjv2.png

修改views.py文件，为Action创建views视图

p0wk9VY.png

修改url.py文件，添加url链接

kqb07PK.png

最近添加Action所用的html

RIvZtFB.png

最后运行界面如图

gDpnaIM.png

Ujq6Yix.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK