在Devstack基础上开发dashboard（一）——遵循官方文档初步尝试

定制自己的页面

本文要介绍如何在devstack基础上，定制自己的dashboard。

1. 准备

首先要准备一套devstack环境，可以参考https://blog.csdn.net/stpice/article/details/81274803
devstack搭建比较简单，不过过程中可能会遇到一些奇怪的问题，总之多尝试几次一般都可以搞定。

2. 按照官方教程操作

要想定制自己的dashboard，首先要参考OpenStack官方网站给的教程：
https://docs.openstack.org/horizon/latest/contributor/tutorials/dashboard.html
目前最新版使用的应该是Rocky，按照里面的说明进行。
第一步：

$ mkdir openstack_dashboard/dashboards/mydashboard

$ tox -e manage -- startdash mydashboard \
  --target openstack_dashboard/dashboards/mydashboard

$ mkdir openstack_dashboard/dashboards/mydashboard/mypanel

$ tox -e manage -- startpanel mypanel \
  --dashboard=openstack_dashboard.dashboards.mydashboard \
  --target=openstack_dashboard/dashboards/mydashboard/mypanel

这几个命令按照顺序执行就行，肯定会报错了，文档中也说了，运行这几个命令会帮助我们初步生成dashboard需要用的一些骨架文件，具体的每一个文件还需要自己后边手动进行定制加工。

这里我初次运行的时候，由于系统中没有安装Python3，只有Python2.7，结果tox运行的时候还报了一些错，对应的将Python3的环境和Python2的环境都准备好就没问题了。tox会使用pyenv 管理Python的各个版本，对应找到pyenv的项目首页对照配置就好了。

紧接着就对照着官方文档中的说明，将里面的各个文件在对应的目录中分别创建好，这里只是做了一个最简单的例子，最后可以显示一个空的列表。最后按照步骤将各个文件都准备好了以后，在/opt/stack/horizon/openstack_dashboard/dashboards/mydashboard目录中，运行命令tree .，可以看到类似如下的文件结构：

.
├── dashboard.py
├── dashboard.pyc
├── __init__.py
├── __init__.pyc
├── mypanel
│   ├── index.html
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── panel.py
│   ├── panel.pyc
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   ├── panel.cpython-37.pyc
│   │   ├── tables.cpython-37.pyc
│   │   ├── tabs.cpython-37.pyc
│   │   ├── urls.cpython-37.pyc
│   │   └── views.cpython-37.pyc
│   ├── tables.py
│   ├── tables.pyc
│   ├── tabs.py
│   ├── tabs.pyc
│   ├── templates
│   │   └── mypanel
│   │       └── index.html
│   ├── tests.py.tmpl
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
├── __pycache__
│   ├── dashboard.cpython-37.pyc
│   └── __init__.cpython-37.pyc
├── static
│   └── mydashboard
│       ├── js
│       │   └── mydashboard.js
│       └── scss
│           └── mydashboard.scss
└── templates
    └── mydashboard

11 directories, 29 files

这些文件都是按照文档中的说明进行填写的，其中有一些文件是以.tmpl 结尾的，这些都是最开始运行那几个命令自动生成的文件，其实是一种模板，里面的内容尚不完全，我们可以在此文件的基础上进行修改，然后将最后的后缀删除即可。这里官方教程并没有介绍js以及其他静态页面如何编写。

注意：所有的这些文件都准备好了以后，如果按照官方教程说的，使用tox -e runserver 命令启动的话，会在访问的时候，找不到进行登录的验证页面。这个问题还没有深入研究，尚不清楚。

3. Apache配置文件

后来，经过查找资料了解到horizon前端部署的是Apache服务，所以我们devstack搭建好了以后，可以直接通过ip地址就可以访问OpenStack的dashboard。

所以直接找到Apache的配置文件的目录/etc/httpd/conf.d/，可以看到这个目录中如下的配置文件：

autoindex.conf    glance-wsgi-api.conf  keystone-wsgi-admin.conf   nova-api-wsgi.conf       README    userdir.conf
cinder-wsgi.conf  horizon.conf          keystone-wsgi-public.conf  nova-placement-api.conf  ssl.conf  welcome.conf

打开horizon.conf，对应的为horizon的配置文件：

80>
    WSGIScriptAlias /dashboard /opt/stack/horizon/openstack_dashboard/wsgi/django.wsgi
    WSGIDaemonProcess horizon user=stack group=stack processes=3 threads=10 home=/opt/stack/horizon display-name=%{GROUP}
    WSGIApplicationGroup %{GLOBAL}

    SetEnv APACHE_RUN_USER stack
    SetEnv APACHE_RUN_GROUP stack
    WSGIProcessGroup horizon

    DocumentRoot /opt/stack/horizon/.blackhole/
    Alias /dashboard/media /opt/stack/horizon/openstack_dashboard/static
    Alias /dashboard/static /opt/stack/horizon/static

    RedirectMatch "^/$" "/dashboard/"

    <Directory />
        Options FollowSymLinks
        AllowOverride None
    Directory>

    <Directory /opt/stack/horizon/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        # Apache 2.4 uses mod_authz_host for access control now (instead of
        #  "Allow")
        2.4>
            Order allow,deny
            Allow from all
        
        = 2.4>
            Require all granted
        
    Directory>
    = 2.4>
      ErrorLogFormat "%{cu}t %M"
    
    ErrorLog /var/log/httpd/horizon_error.log
    LogLevel warn
    CustomLog /var/log/httpd/horizon_access.log combined


WSGISocketPrefix /var/run/httpd

4. 看日志

具体的每一条的配置还不清楚，不过可以看到的是，这个虚拟主机的配置，将80端口直接映射到了DJango的服务上去了，所以就可以直接通过ip地址进行访问dashboard了。另外最下边配置了日志的路径，目前的日志级别是warn，然后到日志目录中去，可以看到如下的日志文件：

总用量 1472
-rw-r--r--. 1 root root  191242 7月  29 06:35 access_log
-rw-r--r--. 1 root root   24972 7月  29 11:08 error_log
-rw-r--r--. 1 root root 1152011 7月  29 12:00 horizon_access.log
-rw-r--r--. 1 root root   19491 7月  29 11:30 horizon_error.log
-rw-r--r--. 1 root root     122 7月  29 09:38 ssl_access_log
-rw-r--r--. 1 root root    6016 7月  29 11:08 ssl_error_log
-rw-r--r--. 1 root root     150 7月  29 09:38 ssl_request_log

注意：如果默认的话，安装完devstack后，会在stack用户下进行操作，同时，horizon的目录下的文件都是在stack用户下进行编辑的。日志的目录都是root权限，虽然stack用户在安装devstack时候，添加了sudoer的权限，但是还是切换到root看日志比较方便。这样就可以跟踪horizon的访问日志和错误日志了。如果需要看更具体的日志，就将上边的配置文件里面的日志级别改为debug之类的。

5. 重启服务

好了，所有以上都配置好了以后，就可以运行下边的命令重启httpd服务，然后观察horizon中添加的自定义的dashboard了。

sudo systemctl restart httpd

如果是root就不用sudo了。

6. 结果

然后访问devstack服务器地址，登录系统后，就可以看到如下页面：