How to Creating a dashboard in Openstack

Creating a dashboard

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

Defining a dashboard

 

Open the dashboard.py file.  The following code has been automatically generated:

from django.utils.translation import ugettext_lazy as _

import horizon


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


horizon.register(Mydashboard) 

Creating a panel

Open the panel.py file, you will have the following auto-generated code:

from django.utils.translation import ugettext_lazy as _

import horizon

from openstack_dashboard.dashboards.mydashboard import dashboard


class Mypanel(horizon.Panel):
    name = _("Mypanel")
    slug = "mypanel"


dashboard.Mydashboard.register(Mypanel) 

The completed dashoboard.py file should look like the following:

from django.utils.translation import ugettext_lazy as _

import horizon


class Mygroup(horizon.PanelGroup):
    slug = "mygroup"
    name = _("My Group")
    panels = ('mypanel',)


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


horizon.register(Mydashboard)

Tables, Tabs, and Views

 

Create a tables.py file under the mypanel directory and add the following code:

from django.utils.translation import ugettext_lazy as _

from horizon import tables


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

    class Meta:
        name = "instances"
        verbose_name = _("Instances")

 

Create a tabs.py file under the mypanel directory.

from django.utils.translation import ugettext_lazy as _

from horizon import exceptions
from horizon import tabs

from openstack_dashboard import api
from openstack_dashboard.dashboards.mydashboard.mypanel import tables


class InstanceTab(tabs.TableTab):
    name = _("Instances Tab")
    slug = "instances_tab"
    table_classes = (tables.InstancesTable,)
    template_name = ("horizon/common/_detail_table.html")
    preload = False

    def has_more_data(self, table):
        return self._has_more

    def get_instances_data(self):
        try:
            marker = self.request.GET.get(
                        tables.InstancesTable._meta.pagination_param, None)

            instances, self._has_more = api.nova.server_list(
                self.request,
                search_opts={'marker': marker, 'paginate': True})

            return instances
        except Exception:
            self._has_more = False
            error_message = _('Unable to get instances')
            exceptions.handle(self.request, error_message)

            return instances[]

class MypanelTabs(tabs.TabGroup):
    slug = "mypanel_tabs"
    tabs = (InstanceTab,)
    sticky = True

 

Tying it together in a view

the completed views.py file now looks like the following:

from horizon import tabs

from openstack_dashboard.dashboards.mydashboard.mypanel \
    import tabs as mydashboard_tabs


class IndexView(tabs.TabbedTableView):
    tab_group_class = mydashboard_tabs.MypanelTabs
    template_name = 'mydashboard/mypanel/index.html'

    def get_data(self, request, context, *args, **kwargs):
        # Add data to the context here...
        return context 

URLs

The completed urls.py file should look like the following:

from django.conf.urls import patterns  # noqa
from django.conf.urls import url  # noqa

from openstack_dashboard.dashboards.mydashboard.mypanel import views


urlpatterns = patterns('',
    url(r'^$', views.IndexView.as_view(), name='index'),
    url(r'^\?tab=mypanel_tabs_tab$',
        views.IndexView.as_view(), name='mypanel_tabs'),
)

 

The template

 Open the index.html file in the mydashboard/mypanel/templates/mypanel directory

{% extends 'mydashboard/base.html' %}
{% load i18n %}
{% block title %}{% trans "My Panel" %}{% endblock %}

{% block page_header %}
   {% include "horizon/common/_page_header.html" with title=_("My Panel") %}
{% endblock page_header %}

{% block mydashboard_main %}
<div class="row">
   <div class="col-sm-12">
   {{ tab_group.render }}
   </div>
</div>
{% endblock %}

Enable and show the dashboard

In order to make My Dashboard show up along with the existing dashboards like Project or Admin on Horizon, you need to create a file called _50_mydashboard.py under openstack_dashboard/enabled and add the following:

# The name of the dashboard to be added to HORIZON['dashboards']. Required.
DASHBOARD = 'mydashboard'

# If set to True, this dashboard will not be added to the settings.
DISABLED = False

# A list of applications to be added to INSTALLED_APPS.
ADD_INSTALLED_APPS = [
    'openstack_dashboard.dashboards.mydashboard',
]