openstack horizon

项目目标：熟悉openstack的horizon组件，仿照阿里云、青云做交互界面。

       在整个openstack应用体系中，horizon就是整个应用的入口。提供了一个模块化的、基于WEB的图形化界面服务门户。用户可以通过浏览器使用这个WEB图形化界面来访问、控制他们的计算、存储和网络资源。

1.dashboard源码介绍

      这部分是页面实现代码，在我看来这部分是要进行大量改动的，如果要进行扩展这部分肯定是要修改的，而且openstack自带的页面布局不太合理，存在重复页面，交互性不太好，没有分页。

      Dashboard代码分两部分：openstack-dashboard、horizon。openstack-dashboard中存放了系统用到的 所有资源文件、apache也是映射这部分代码；horizon是系统具体显示的代码实现，具体实现基于django框架，但是又和django标准的 project+app代码架构不太一样。

2.horizon代码模块介绍

horizon：cd /usr/share/openstack-dashboard

3.中文化的功能实现
Openstack的E版并没有实现horizon部分的中文化工作，中文简体的需要自己实现。编辑 horizon.locale.zh_CN.LC_MESSAGES.django.po文件，然后在/usr/lib/python2.7/dist- packages/horizon目录执行django-admin compilemessages --locale=zh_CN，django自带的编译工具会将django.po编译成django.mo，django.mo是django页面中进 行中文化会加载的文件，然后需要重启apache才能重新加载django.mo文件。

django.po文件中有两个关键字：msgid、msgstr，msgid后边指定英文单词或句子，使用双引号包裹，中间使用空格分隔；msgstr后边指定翻译的文字，格式和msgid一样，格式如下所示：

msgid "Other"

msgstr "其它"

 

msgid "Please log in to continue."

msgstr "请重新登录"

 

       Horizon部分主要使用了三种模板table、form、 tab，table用来进行数据库记录的列表展示，可以执行单独、批量操作；form是点击按钮、链接后弹出页面上的表单，会在页面自动生成一个上下排列 的提交表单；tab是一种列表项显示模式，只用到了虚拟机相关信息的展示。

 

 4.Creating a dashboard
====================

The quick version
-----------------

Horizon provides a custom management command to create a typical base
dashboard structure for you. Run the following commands at the same location
where the ``run_tests.sh`` file resides. It generates most of the boilerplate
code you need::

    mkdir openstack_dashboard/dashboards/mydashboard

    ./run_tests.sh -m startdash mydashboard
                  --target openstack_dashboard/dashboards/mydashboard

    mkdir openstack_dashboard/dashboards/mydashboard/mypanel

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

You will notice that the directory ``mydashboard`` gets automatically
populated with the files related to a dashboard and the ``mypanel`` directory
gets automatically populated with the files related to a panel.

4.1add panel
4.11.cd /usr/share/openstack-dashboard
4.12.python manage.py startpanel test_panel --d openstack_dashboard.dashboards.admin --target auto
4.13.sudo gedit dashboard.py          add  test_panel
4.14.sudo /etc/init.d/apache2 restart
4.15.cd /etc/init.d/apache2
   sudo gedit apache2.conf
   add ServerName 10.0.0.12
you will see the horizon changed!

参考资料：

(1)《openstack实战指南》

(2)http://www.verydemo.com/article_c440_i565895.html

(3)http://www.verydemo.com/search/?kw=Horizon

 

5.页面按钮的添加

        horizon的按钮分两种，一种是直接执行的按 钮，默认只支持批量删除的按钮；另一种是会弹出一个页面的按钮。直接执行的按钮一般要进行批量操作，也能进行单独执行，需要先选择操作对象，然后点击按钮 执行相关操作。下边将分别讲一下这两种按钮怎么扩展，这需要知道一些django的开发经验，因为urls.py、views.py、forms.py文 件的代码编码和所有的django编码风格都是一样的。

5.1首先讲怎么扩展一个链接按钮，由于horizon没有实现在页面上传镜像，下边实现一个上传镜像的按钮：

第一步、编写一个upload的链接映射，编辑horizon.dashboards.nova.images_and_snapshots.images.urls.py，在patternsz中添加url(r'^upload/$', UploadView.as_view(), name='upload')

第二步、实现控制层的页面跳转、页面数据、样式渲染代码，编辑 horizon.dashboards.nova.images_and_snapshots.images.views.py，添加 UploadView类，form_class表示使用哪个表单模板，template_name表示使用哪个页面模板，代码如下：

class UploadView(forms.ModalFormView):

    form_class = UploadImageForm

template_name = 'nova/images_and_snapshots/images/upload.html'

第三步、编辑页面模板，按照既有的格式，需要完成两个文件：upload.html和_upload.html，文件添加到 horizon.dashboards.templates.nova.images_and_snapshots.images，可以参考该文件夹下的 update.html和_update.html进行改造，由于比较简单，代码也比较多就不贴出来了。

第四步、生成form模板，编辑 horizon.dashboards.nova.images_and_snapshots.images.forms.py，completion_view 后边的地址表示表单取消时的跳转地址，当表单提交时会进入handle方法，api.image_create是glance已经提供的方法，代码如下：

class UploadImageForm(forms.SelfHandlingForm):

    completion_view = 'horizon:nova:images_and_snapshots:index'

    CONTAINER_CHOICES = (("ovf", "ovf"),

                        ("ami", "ami"))

    DISK_CHOICES = (("qcow2", "qcow2"),

                   ("raw", "raw"))

    name = forms.CharField(max_length="255", label=_("Name"))

    kernel = forms.CharField(max_length="36", label=_("Kernel ID"), required=False)

    ramdisk = forms.CharField(max_length="36", label=_("Ramdisk ID"), required=False)

    architecture = forms.CharField(label=_("Architecture"), required=False)

    container_format = forms.ChoiceField(label=_("Container Format"), choices=CONTAINER_CHOICES)

    disk_format = forms.ChoiceField(label=_("Disk Format"), choices=DISK_CHOICES)

    image_file = forms.FileField(label=_("File"))

    def handle(self, request, data):

        # TODO add public flag to image meta properties

        error_uploading = _('Unable to upload image "%s".')

        image_file = self.files['image_file']

        meta = {'is_public': True,

                'disk_format': data['disk_format'],

                'container_format': data['container_format'],

                'name': data['name'],

                'properties': {}}

        if data['kernel']:

            meta['properties']['kernel_id'] = data['kernel']

        if data['ramdisk']:

            meta['properties']['ramdisk_id'] = data['ramdisk']

        if data['architecture']:

            meta['properties']['architecture'] = data['architecture']

        try:

            api.image_create(request, meta, image_file)

            messages.success(request, _('Image was successfully upload.'))

        except:

            exceptions.handle(request, error_uploading % data['name'])

        return shortcuts.redirect(self.get_success_url())

第五步、生成一个按钮模板，编辑 horizon.dashboards.nova.images_and_snapshots.images.tables.py，name是按钮的唯一 标识，最好不要和别的按钮重复，verbose_name是国际化的英文显示，url是点击按钮后的链接地址，classes是样式单的类名，代码如下：

class UploadImage(tables.LinkAction):

    name = "upload"

    verbose_name = _("Upload Image")

    url = "horizon:nova:images_and_snapshots:images:upload"

classes = ("ajax-modal", "btn-edit")

第六步、在列表中添加按钮，编辑tables.py文件的ImagesTable添加按钮，table_actions = (UploadImage, DeleteImage)，然后重启apache在页面上进行调试就行了。

 

5.2构造一个批量操作按钮，相对要比弹出页面的按钮要好实现，因为一个直接执行的按钮相当于一个ajax的调用，并不需要构造页面和form等。

第一步、生成按钮模板，下边是虚拟机重启的按钮代码：

class RebootInstance(tables.BatchAction):

    name = "reboot"

    action_present = _("Reboot")

    action_past = _("Rebooted")

    data_type_singular = _("Instance")

    data_type_plural = _("Instances")

    classes = ('btn-danger', 'btn-reboot')

    def allowed(self, request, instance=None):

        return instance.status in ACTIVE_STATES or instance.status == 'SHUTOFF'

    def action(self, request, obj_id):

        api.server_reboot(request, obj_id)

第二步、在列表中添加按钮，编辑tables.py文件的ImagesTable内部类的table_actions属性。

 

6.列表中下拉菜单的添加

首先要实现一个有效的链接地址，然后添加一个按钮模板，这部分操作和上边讲的链接按钮一样的，最后在tables.py的row_actions中将这个按钮名添加进去就行了。

 

7.列表中文字链接的添加

首先实现一个有效的链接地址，然后在tables.py对应实例的属性中添加这个链接地址即可，下边是虚拟机的一个链接地址代码：

class InstancesTable(tables.DataTable):

    name = tables.Column("name", link="horizon:nova:instances_and_volumes:"

                                      "instances:detail",

                         verbose_name=_("Instance Name"))

参考资料：http://www.aboutyun.com/thread-5242-1-1.html

 

8.change logo

cd  /usr/share/openstack-dashboard/static/dashboard/img

change logo.png      logo-splash.png

9.change login and add register（正在）

there are three part of  filesystem.          
cd /usr/lib/python2.7/dist-packages/openstack_auth   

vim  urls.py   views.py
cd /usr/lib/python2.7/dist-packages/horizon/templates/auth   

vim  login.html  _login.html
cd /usr/share/openstack-dashboard

参考资料:

(1)http://www.cnblogs.com/changzhi/p/3376195.html

(2)http://rsj217.diandian.com/post/2013-05-15/40050529092