怎樣修改 Openstack Horizon（Dashboard）的顯示界面 （二）

上一篇文章介紹了 Dashboard 的基本結構框架，那接下來的問題就是如何在這個框架中加入我們自己想要的內容了。在真正動手之前，讓我們先來看看官方的頁面是怎么做出來的。首先我們進入 /usr/share/openstack-dashboard/openstack_dashboard/dashboards/admin/networks 文件夾下面，可以看到有這幾個文件和子文件夾：

../networks:

　　- __init__.py

　　- ports/

　　- subnets/

　　- templates/

　　- forms.py

　　- tables.py

　　- panel.py

　　- urls.py

　　- views.py

　　- tests.py

從上一篇文章我們已經知道了 views.py 和 urls.py 是干什么的，那我們就先來看看 panel.py 好了。

from django.utils.translation import ugettext_lazy as _

import horizon

from openstack_dashboard.dashboards.admin import dashboard


class Networks(horizon.Panel):
    name = _("Networks")
    slug = 'networks'
    permissions = ('openstack.services.network',)

dashboard.Admin.register(Networks)

這個文件很簡單，最重要的是兩個參數： name 和 slug。 name 是這個panel 在網頁上顯示的名字，而 slug 則是這個 panel 的類似於 ID 的東西。因此，在我們自己的 panel.py 中也可以依葫蘆畫瓢，定義一個 PluginPanel 的類：

import horizon


class PluginPanel(horizon.Panel):
    name = "MyPlugin"
    slug = 'plugin_panel'

注意這里的 slug 要和在之前提到的 _50_admin_add_panel.py 中的 PANEL 變量的值相同。

接下來我們再看看networks文件夾下面的 form.py：

import logging

from django.core.urlresolvers import reverse
from django.utils.translation import ugettext_lazy as _

from horizon import exceptions
from horizon import forms
from horizon import messages

from openstack_dashboard import api


LOG = logging.getLogger(__name__)


class CreateNetwork(forms.SelfHandlingForm):
    name = forms.CharField(max_length=255,
                           label=_("Name"),
                           required=False)
    tenant_id = forms.ChoiceField(label=_("Project"))
    if api.neutron.is_port_profiles_supported():
        net_profile_id = forms.ChoiceField(label=_("Network Profile"))
    admin_state = forms.BooleanField(label=_("Admin State"),
                                     initial=True, required=False)
    shared = forms.BooleanField(label=_("Shared"),
                                initial=False, required=False)
    external = forms.BooleanField(label=_("External Network"),
                                  initial=False, required=False)

   ...... 這里省略了一些其他代碼 ......

    def handle(self, request, data):
        try:
            params = {'name': data['name'],
                      'tenant_id': data['tenant_id'],
                      'admin_state_up': data['admin_state'],
                      'shared': data['shared'],}
                      #'router:external': data['external']}
            if api.neutron.is_port_profiles_supported():
                params['net_profile_id'] = data['net_profile_id']
            network = api.neutron.network_create(request, **params)
            msg = _('Network %s was successfully created.') % data['name']
            LOG.debug(msg)
            messages.success(request, msg)
            return network
        except Exception:
            redirect = reverse('horizon:admin:networks:index')
            msg = _('Failed to create network %s') % data['name']
            exceptions.handle(request, msg, redirect=redirect)


class UpdateNetwork(forms.SelfHandlingForm):
    name = forms.CharField(label=_("Name"), required=False)
    tenant_id = forms.CharField(widget=forms.HiddenInput)
    network_id = forms.CharField(label=_("ID"),
                                 widget=forms.TextInput(
                                     attrs={'readonly': 'readonly'}))
    admin_state = forms.BooleanField(label=_("Admin State"), required=False)
    shared = forms.BooleanField(label=_("Shared"), required=False)
    external = forms.BooleanField(label=_("External Network"), required=False)
    failure_url = 'horizon:admin:networks:index'

    def handle(self, request, data):
        try:
            params = {'name': data['name'],
                      'admin_state_up': data['admin_state'],
                      'shared': data['shared'],
                      'router:external': data['external']}
            network = api.neutron.network_update(request, data['network_id'],
                                                 **params)
            msg = _('Network %s was successfully updated.') % data['name']
            LOG.debug(msg)
            messages.success(request, msg)
            return network
        except Exception:
            msg = _('Failed to update network %s') % data['name']
            LOG.info(msg)
            redirect = reverse(self.failure_url)
            exceptions.handle(request, msg, redirect=redirect)

可以看到里面有兩個類，一個 CreateNetwork ， 一個 UpdateNetwork 。這兩個類其實很好理解，就是在網頁上你點擊 "Create a new network" 或者 "Update Network" 時會彈出來的一個對話框，類的屬性一一對應對話框中你要設置的參數。如果了解 Django 的人就會知道這個東西其實和 Django 里面的 Form 是一回事情。 對於這兩個類需要額外注意的是分別需要定義一個 handle() 的方法，告訴 Horizon 怎么處理表格提交的數據。那如果我們也需要有創建或者更新我們的 plugin resources 的話，可以跟着這個文件畫瓢。

接下來我們再看 tables.py：

import logging

from django.core.urlresolvers import reverse
from django.template import defaultfilters as filters
from django.utils.translation import ugettext_lazy as _

from horizon import exceptions
from horizon import tables

from openstack_dashboard import api
from openstack_dashboard.dashboards.project.networks \
    import tables as project_tables


LOG = logging.getLogger(__name__)


class DeleteNetwork(tables.DeleteAction):
    data_type_singular = _("Network")
    data_type_plural = _("Networks")

    def delete(self, request, obj_id):
        try:
            api.neutron.network_delete(request, obj_id)
        except Exception:
            msg = _('Failed to delete network %s') % obj_id
            LOG.info(msg)
            redirect = reverse('horizon:admin:networks:index')
            exceptions.handle(request, msg, redirect=redirect)


class CreateNetwork(tables.LinkAction):
    name = "create"
    verbose_name = _("Create Network")
    url = "horizon:admin:networks:create"
    classes = ("ajax-modal", "btn-create")


class EditNetwork(tables.LinkAction):
    name = "update"
    verbose_name = _("Edit Network")
    url = "horizon:admin:networks:update"
    classes = ("ajax-modal", "btn-edit")


#def _get_subnets(network):
#    cidrs = [subnet.get('cidr') for subnet in network.subnets]
#    return ','.join(cidrs)


class NetworksTable(tables.DataTable):
    tenant = tables.Column("tenant_name", verbose_name=_("Project"))
    name = tables.Column("name", verbose_name=_("Network Name"),
                         link='horizon:admin:networks:detail')
    subnets = tables.Column(project_tables.get_subnets,
                            verbose_name=_("Subnets Associated"),)
    shared = tables.Column("shared", verbose_name=_("Shared"),
                           filters=(filters.yesno, filters.capfirst))
    status = tables.Column("status", verbose_name=_("Status"))
    admin_state = tables.Column("admin_state",
                                verbose_name=_("Admin State"))

    class Meta:
        name = "networks"
        verbose_name = _("Networks")
        table_actions = (CreateNetwork, DeleteNetwork)
        row_actions = (EditNetwork, DeleteNetwork)

首先我們看到最底下的 NetworksTable 類，這個類也很好理解，直接對應的就是你在主頁上 Network 下面會看到的一張表格。類的屬性就是表格的列。 Meta 就是一些額外信息。然后還有三個類分別對應創建、刪除和修改網絡的操作。大家可以對照上面的代碼和下面的網頁顯示進一步理解代碼的作用。其中用藍色圈出來的就是我的 plugin panel 在 Admin 這個 Dashboard 中的顯示。

 

 

好了，Dashboard 的改造就介紹到這里了。如果有什么不清楚的地方或者我沒有講到的地方，一可以參考 Django 的官方網站；二可以直接打開一個其他的 Dashboard 的文件夾看看，依葫蘆畫瓢；三也歡迎大家在底下直接提問。