【星海出品】零基础dashboard二次开发

5 篇文章 0 订阅
4 篇文章 0 订阅

最近网上找了一些关于dashboard的资料。
发现资料的有效性非常的低下。 有且只有创建panel的文档,这边文章将讲解怎么减少panel。
所以自己总结一些自己的心得,方便大家进行技术分享。共同学习。

版本
version: openstack_wallaby

一.介绍主要目录

openstack的dashboard的包主要分为了两个目录

/lib/python3.8/site-packages/horizon
/lib/python3.8/site-packages/openstack_dashboard

horizon目录

目录下的主要文件和目录包括
|-view.py #定义了一些父类、定义了render的函数,和APIView函数。
|-base.py
|-…等文件
\-utils #主要是一些工具代码,前端方面的了解 html.py、filters.py 即可。
\-static #主要包含了一些Login代码。jQuery的JS代码,和一些简单配置文件。
\-templates #模板,主要包含了HTML。openstack首页的HTML为horizon/templates/horizon/_sidebar.html
\-tables #tables可以看作是一个小的页面,上面的部分文件形式在tables下依然存在。主要是体现在表单功能。
\-workflows \-…等目录

Base.py中主要有一些父类,供给其他的函数使用

#该文件主要用到的模块
import collections
import collections.abc
import copy
from importlib import import_module
import inspect
import logging
import operator
import os

from django.conf import settings
from django.conf.urls import include
from django.conf.urls import url
from django.core.exceptions import ImproperlyConfigured
from django.urls import reverse
from django.utils.functional import empty
from django.utils.functional import SimpleLazyObject
from django.utils.module_loading import module_has_submodule
from django.utils.translation import ugettext_lazy as _

from horizon import conf
from horizon.decorators import _current_component
from horizon.decorators import require_auth
from horizon.decorators import require_component_access
from horizon.decorators import require_perms
from horizon import loaders
from horizon.utils import settings as utils_settings

该文件主要实现的一些父类功能
_decorate_urlconf
access_cached
_wrapped_include

class NotRegistered(Exception):
class HorizonComponent(object):
class Registry(object):
class Panel(HorizonComponent):
class PanelGroup(object):
class Dashboard(Registry, HorizonComponent):
->这个是主要的函数,真实的使用了panel
class Workflow(object):
class LazyURLPattern(SimpleLazyObject):
class Site(Registry, HorizonComponent):
class HorizonSite(Site):

openstack_dashboard目录

Meterial 项目位
/lib/python3.8/site-packages/openstack_dashboard/themes/material/templates

如果精通yml,也可以对这个文件进行修改。
./conf/default_policies/Cinder.yml
./conf/Cinder_policy.yaml

该框架主要的逻辑为
_detail_overview.html
openstack_dashboard
./dashboards/admin/backups/templates/backups/_detail_overview.html
继承模板:base.html 包含模板:_page_header.html _workflow.html
m4:update.html

二.对dashboard功能删减

举个例子 Horizon目录,定位到一个 table 的HTML文件。
./templates/horizon/common/_data_table_row_actions_dropdown.html
./templates/horizon/common/_data_table_action.html
在这里插入图片描述
继续到 Openstack_dashboard 目录
./dashboards/project/volumes/
#注:/openstack_dashboard/dashboards 下有admin、project、setting、identity
直接对接的这个位置,我们现在进入的是project的代码位置。
在这里插入图片描述
进入了这个卷的位置之后,
有panel.py 文件、也有tables.py 、view.py、urls.py等
我们取消一个下拉框中的一个按钮
编辑 tables.py
在这里插入图片描述
这是一个初始化的代码,把画框的位置Backup给他去掉,那么他在project中的volume中的一个下拉框中的Backup功能键就没有了。
同理如果想要快照里面的下拉框中的backup键也消失,原理一致。
./dashboards/project/snapshots/tables.py

扩展:
openstack_dashboard/dashboards/admin/backups/panel.py
如果想让左侧的总下拉展示框中的一个功能消失。
编辑如上的文件。 把这个pannel.py 文件中的所有的代码都注释了就可以实现。

Horizon的的设计分为三层:Dashboard -> PanelGroup -> Panel
Horizon中的几个dashboard
project: 普通用户
admin: 管理用户
settings: 右上角的设置面板
…等
每一个dashboard都是django中的一个app

三.增加openstack的panel

各类控件的基类,页面的通用模板等
horizon
界面具体样式,数据获取等
openstack-dashboard
登录认证界面
openstack_auth
。。。等

增加Panel
要增加一个panel首先得简单看看代码结构,
进入openstack-dashbaord/openstack_dashboard/dashboards目录,会看到代码的结构:

几个一级菜单(Dashboard),分别是admin(管理员)、project(项目)、identity(Identity)、settings(设置,这个一级菜单需要点击右上角下拉中的设置才会显示出来)、router(配置文件中将profile_support打开可见,ciso nexus 1000v的管理面板)。
现在选择admin进去看看它的目录结构。
仔细研究可以发现这些文件夹都一一对应了管理员(admin)下的各个Panel,首先看看Dashboard的类似于配置文件的东西dashboard.py,它就是描述Dashboard的python文件。

其中class Admin即是描述管理员Dashboard的类,它继承了horizon中的Dashboard基类(描述一级菜单的基类)
class Admin中有几个属性 分别为name、slug、panels、default_panel、permissions
根据基类提供的信息可以知道它们分别代表的是名称、id、该Dashboard下的panels、默认panel、权限。
除此之外,还有一个class
SystemPanels,可以看到它是继承horizon中的PanelGroup,根据openstack三级菜单结构可以知道它应该就是描述的二级菜单了,class
SystemPanels有slug、name、panels三个属性,分别代表的是id、名称、属于它的panel。

最后有一个horizon.register就是注册Dashboard了。现在看来,如果要增加一个panel到Admin这个菜单下面,无非需要做两步:
1、一个描述panel的文件夹;
2、在这个class SystemPanels下的panels属性中增加一个panel的id。

接下来就要看看代表panel的文件夹下有什么东西了。进入instances(实例)文件夹查看一下组成结构。
forms.py是表单,描述的是弹出框之类的,现在主要目的是增加一个panel,暂且不看。
panel.py应该就是描述这个panel基本信息的文件了,这个必须看看

在这里插入图片描述

可以看到以上代码结构与dashboard.py是非常类似的。 这里class
Instances继承了horzion中的Panel这个基类,很明显这就是描述panel的基类了。
有的版本会在最后加前面我所说到的dashboard.py的最后一行用register方法注册了该panel。但有的版本不是这么实现的。

tables.py顾名思义是描述表格之类的
只看关键描述表格的部分。
class AdminInstancesTable继承的是DataTable这个基类
看看代码的结构可以很容易看出tables.Column就是描述表格的每一列的,其中class Meta顾名思义是描述该表格的元数据的类。它有表格的名字、动作、表动作等属性。

templates是静态模板,先只看看rescue.html
在这里插入图片描述
该模板继承了base.html,然后一个标题块block title、一个主要部分block main,table.render是传过来的值,它就是代表的表格那一块了。

tests.py为测试代码;
urls.py是决定了界面的url; 该文件每个url对应了views的一个函数或者类,index是描述主页的,其它url是相关功能的url。
views.py处理用户请求,从urls.py中反应过来,获取数据。
只看看描述index页面的类.class AdminIndexView继承的是DataTableView这个类,这个类有table_class、template_name等几个属性,可以比较明显的看出它应该就是为那个表格类服务的了,主要功能就是获取数据,设置页面title、指定静态模板了。

那么现在就可以模仿以上这个结构自行增加一个panel了,构造一个类似的文件夹:

mypanel
|–init.py
|–panel.py
|–tables.py
|–templates
|----mypanel
|------rescue.html
|–urls.py
|–views.py
它们代码如下:

1、panel.py

1import horizon
2
3from openstack_dashboard.dashboards.admin import dashboard
4
5
6class Mypanel(horizon.Panel):
7 name = “mypanel”
8 slug = ‘mypanel’
9 permissions = (‘openstack.roles.admin’, ‘openstack.services.compute’)
10
11
12dashboard.Admin.register(Mypanel)
2、tables.py

1from horizon import tables
2
3class MypanelTable(tables.DataTable):
4 column1 = tables.Column(“column1”, verbose_name=“column1”)
5 class Meta(object):
6 name = “mypaneltable”
7 verbose_name = “mypaneltable”
3、index.html

1{% extends ‘base.html’ %}
2{% load i18n %}
3{% block title %}{% trans “mypanel” %}{% endblock %}
4
5{% block main %}
6 {{ table.render }}
7{% endblock %}
4、urls.py

1from django.conf.urls import patterns
2from django.conf.urls import url
3
4from openstack_dashboard.dashboards.admin.mypanel import views
5
6
7
8
9urlpatterns = patterns(
10 ‘openstack_dashboard.dashboards.admin.mypanel.views’,
11 url(r’^$', views.MypanelIndexView.as_view(), name=‘index’),
12)
5、views.py

1from horizon import tables
2
3from openstack_dashboard.dashboards.admin.mypanel
4 import tables as project_tables
5
6class MypanelIndexView(tables.DataTableView):
7 table_class = project_tables.MypanelTable
8 template_name = ‘admin/mypanel/index.html’
9 page_title = “mypanel”
10
11 def get_data(self):
12 data = []
13 return data

除此之外,在admin中的dashboard.py加上这个panel的slug。

dashboard.py

1from django.utils.translation import ugettext_lazy as _
2
3import horizon
4
5
6class SystemPanels(horizon.PanelGroup):
7 slug = “admin”
8 name = _(“System”)
9 panels = (‘overview’, ‘metering’, ‘hypervisors’, ‘aggregates’,
10 ‘instances’, ‘volumes’, ‘flavors’, ‘images’,
11 ‘networks’, ‘routers’, ‘defaults’, ‘metadata_defs’, ‘info’,‘mypanel’) #加到属性panels下
12
13
14class Admin(horizon.Dashboard):
15 name = _(“Admin”)
16 slug = “admin”
17 panels = (SystemPanels,)
18 default_panel = ‘overview’
19 permissions = (‘openstack.roles.admin’,)
20
21
22horizon.register(Admin)

备注:新版dashboard.py panels 这个位置修改为了使用policy_rules 进行连接识别(如下图):
在下层的panel中需要也需要添加policy_rules = ((…)).具体参照不同版本进行模仿。
在这里插入图片描述
然后重启httpd服务,查看页面
如果看不懂:推荐一个其他的文章
https://blog.csdn.net/weixin_41977332/article/details/104439185?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-104439185-blog-124272333.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-104439185-blog-124272333.pc_relevant_paycolumn_v3&utm_relevant_index=2

四.扩展

修改图标:
/python3.8/site-packages/openstack_dashboard/themes/material/templates
./material/openstack-one-color.svg
/var/lib/kolla/venv/lib/python3.8/site-packages/static/dashboard/img

修改颜色:
:%s/#78583b/#333333/g
/var/lib/kolla/venv/lib/python3.8/site-packages/static/dashboard/img
/var/lib/kolla/venv/lib/python3.8/site-packages/openstack_dashboard/static/dashboard/img
/horizon-source/horizon-19.2.1.dev8/openstack_dashboard/static/dashboard/img

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值