Openstack 用Horizon在Dashboard上定制新页面

二次开发: Openstack用Horizon在Dashboard上定制新页面


前言:

Horizon 提供可视化的 GUI 图形界面,让用户去操作这些项目使用的各种资源。
那Horizon 的内部架构是怎么样的?我们如果要做二次开发,应该怎么去做?
Openstack Horizon Dashboard 是一套基于Django Web 框架实现的Web界面。
了解 Horizon 应首先去了解 Python 的一个 Web 开发框架 Django。


Openstack Horizon 组件 部署上去后,源码分两部分:
1.一部分是Dashboard页面的源码,目录在/usr/share/openstack-dashboard
2.另一部分是Horizon模块的horizon界面库文件(dashboard界面通用组件的库),目录在/usr/lib/python2.7/site-packages/horizon


Dashboard页面的源码/usr/share/openstack-dashboard中,调用/usr/lib/python2.7/site-packages/horizon库,实现界面的渲染。
Openstack Horizon Dashboard 是一套基于Django Web 框架实现的Web界面,因此源码/usr/share/openstack-dashboard中结构,和Django的源码目录结构是一样的。



Openstack Dashboard上定制新页面:


[ Dashboard 内部分为三个层次:]

    Dashboard
    PanelGroup
    Panel

每一个 Dashboard 在 Django 里都是一个 App,OpenStack 的文件夹里的 openstack_dashboard 文件夹里有一个 settings.py 文件,里面有一个变量叫 INSTALLED_APP 定义了目前存在的这些 dashboard。
每一组可视化的界面都是PanelGroup,即Dashboard界面上左边的导航栏面板组,如Project \ Admin \ Identity 三个面板组,
每个面板组PanelGroup里面,又分为多个面板Panel,如Admin下面的Overview \ Hypervisors \ Volumes 等,每个Panel一个页面。


这三个层次,与代码的对应关系:
/usr/share/openstack-dashboard/openstack_dashboard                <--------->  Dashboard
/usr/share/openstack-dashboard/openstack_dashboard/dashboards
                                                                                            ├── admin     <--------->  PanelGroup
                                                                                            ├── ...
                                                                                            └── project
/usr/share/openstack-dashboard/openstack_dashboard/dashboards/admin
                                                                                                                ├── overview    <--------->  Panel
                                                                                                                ├── ...
                                                                                                                └── volumes


切换到/usr/share/openstack-dashboard目录中:(结构同Django)(Django框架不再细讲)

    openstack-dashboard
                    ├── manage.py
                    ├── openstack_dashboard
                    └── static
python manage.py 列出 所有命令,会发现Horizon定制的多出的两个命令:

[horizon]
    startdash
    startpanel

这两个命令,使用这两个命令就可以很方便的增加页面。

比如:在 Openstack Dashboard 的 Admin 面板组中增加一个 SSD 的页面:

1. mkdir /usr/share/openstack-dashboard/openstack_dashboard/dashboards/admin/ssd

2. python manage.py startpanel ssd \
                --dashboard=openstack_dashboard.dashboards.admin \
                --target=openstack_dashboard/dashboards/admin/ssd

3. cd openstack_dashboard/dashboards/admin/ssd/
        目录已经建立好:
        [root@Spark ssd]# tree
        .
        ├── __init__.py
        ├── panel.py
        ├── templates
        │   └── ssd
        │       └── index.html
        ├── tests.py
        ├── urls.py
        └── views.py

4. 将新建的页面显示在Dashboard上:
        官方有两种方式,不过官方推荐第二种“可插拔”方式,那我们只看这种“可插拔”配置。
        cd /usr/share/openstack-dashboard/openstack_dashboard/enabled
        这个enabled目录就是可插拔的配置目录:
                目录中的编号排序,即代表页面中,一个个panel的从上到下的排序,
                如文件:_2020_admin_overview_panel.py和_2040_admin_hypervisors_panel.py,2020在2040的前面,所以界面上Admin这个PanelGroup中,Overview Panel 在 Hypervisors Panel 的上面。

5. 在此目录中,新建一个这个ssd页面的配置文件:

        vim _2160_admin_ssd_panel.py

        编辑文件:
                # The slug of the panel to be added to HORIZON_CONFIG. Required.
                PANEL = 'ssd'
                # The slug of the dashboard the PANEL associated with. Required.
                PANEL_DASHBOARD = 'admin'
                # The slug of the panel group the PANEL is associated with.
                PANEL_GROUP = 'admin'

                # Python panel class of the PANEL to be added.
                ADD_PANEL = 'openstack_dashboard.dashboards.admin.ssd.panel.Ssd'
        保存

6. 重启HTTP服务即可:

    apachectl restart 或者 systemctl restart httpd.service

7. 重新访问 Dashboard ,即可看到新增的页面。


Reference:https://docs.openstack.org/horizon/ocata/tutorials/dashboard.html

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页