openstack开发实践（三）：Dashboard开发

Dashboard概述

Dashboard是openstack中提供的一个web前端控制台，以此来展示openstack的功能。Dashboard是一个基于Django Web Framework开发的标准的Python WSGI程序。关于Django的应用开发在上一篇教程openstack开发实践（三）中已经进行了详细的介绍https://blog.csdn.net/weixin_41977332/article/details/104324159。Dashboard将页面上的所有元素模块化，网页中一些常见元素（如表单，表格，标签页）全部被封装成Python类，每个组件都有自己对应的一小块HTML模板，当渲染整个页面的时候，Dashboard先查找当前页面有多少组件，然后将各个组件分别进行渲染变成一段HTML片段，最后拼装成一个完整的HTML页面，返回给浏览器

Dashboard UI整体结构

下图为一个标准的Dashboard页面。一个dashboard面板可以分为三层：
Dashboard—>PanelGroup—>Panel，UI结构最上面为Header，左上边为logo，然后是Dashboard，包括项目，管理员，身份管理，（Mydashboard为我自己开发并添加上去的dashboard，官方版本的仅有项目，管理员，身份管理）。每一个Dashboard都可以理解为是Django中的一个APP，Django中的APP可以理解成对业务逻辑模块化的一种手段，里面可以包含自己独有的URL设定、模板和业务逻辑代码。每个Dashboard下面有若干个PanelGroup，比如项目下有计算和网络两个PanelGroup；每个PanelGroup下有若干个Panel，比如计算下有概况，实例，卷，镜像，密钥对这几个Panel。点开Panel之后右侧部分显示的是Panel Body，Panel Body中显示的是Data Table View。除了Data Table View之外还有一种是Tab View样式，如图系统信息所示

Dashboard源码结构

通过devstack安装的openstack中的dashboard源码位于/opt/stack/horizon目录下，主要包含两个代码文件夹：horizon和openstack_dashboard。horizon中主要是一些在Django基础上编写的通用组件，包括表格（table），标签页（tab），表单（form），导航（browser），工作流（flow）。这些代码和openstack的具体业务逻辑没有什么关系，如果要做一个新的Django项目，理论上也可以复用这些代码。horizon/base.py中还实现了一套Dashboard/Panel机制，使得Horzion面板上所有的Dashboard都是“可插拔”的，所有的Panel都是“动态加载”的。

openstack_dashboard/dashboards/中是各个面板的具体实现代码，其中包括各个面板的模板文件和后端Service交互的业务逻辑代码等。从中可以看出之前介绍的面板中各个dashboard即项目（project），管理员（admin），身份管理（identity）,后续我们自己编写的dashboard即Mydashboard也要在这里创建一个文件夹并放入部分代码。在dashboards/enabled目录中的py文件则是告诉horizon在渲染Dashboard时载入这些Panel。enabled目录下的Dashboard和Panel是按照Python文件名的字典序添加的，所以可以通过_1000_.py，_2000_.py的命名来控制文件名的字典序。在python文件中可以找到页面上对应的project、admin等对应的调用。

Mydashboard开发

我们这里创建的Mydashboard如下图所示，可以展示虚拟机实例并且给正在运行的虚拟机创建快照。主要分为两大步骤：自定义Dashboard和Panel，添加创建快照操作

自定义Dashboard和Panel

创建Dashboard和Panel

我们使用官方提供的run_test.sh脚本来协助创建Dashboard和Panel，创建Dashboard步骤如下所示：

su - stack
cd horizon
mkdir openstack_dashboard/dashboards/mydashboard
./run_tests.sh -m startdash mydashboard --target openstack_dashboard/dashboards/mydashboard/

创建Panel的步骤如下所示

mkdir openstack_dashboard/dashboards/mydashboard/mypanel
./run_tests.sh -m startpanel mypanel --dashboard=openstack_dashboard.dashboards.mydashboard --target=openstack_dashboard/dashboards/mydashboard/mypanel

编写代码

添加PanelGroup和Panel

编辑mydashboard/dashboard.py，在Mydashboard下添加PanelGroup，名称为Mygroup，在Mygroup下添加一个Panel，名字为Mypanel：

from django.utils.translation import ugettext_lazy as _

import horizon

class Mygroup(horizon.PanelGroup):
    name = _("My Group")
    slug = "mygroup"
    panels = ('mypanel',)
class Mydashboard(horizon.Dashboard):
    name = _("Mydashboard")
    slug = "mydashboard"
    panels = (Mygroup,)  # Add your panels here.
    default_panel = 'mypanel'  # Specify the slug of the dashboard's default panel.


horizon.register(Mydashboard)

定义tables

接下来添加tables，tabs和views。首先定义tables，在mydashboard/mypanel目录下创建tables.py，内容如下：

from django.utils.translation import ugettext_lazy as _
from horizon import tables


class MyFilterAction(tables.FilterAction):
	name = "myfilter"


class InstancesTable(tables.DataTable):
    name = tables.Column('name', verbose_name=_("Name"))
    status = tables.Column('status', verbose_name=_("Status"))
    availability_zone = tables