前置条件

在开发新页面之前，要确保已经在本地创建了新的模块。详见 开发新模块。同时，需要保证你的choerodon-front-boot 依赖在0.7.2版本之上。

介绍

本章讲述了如何使用Choerodon 开发新的Dashboard，并且如何将Dashboard注册到平台。包含如下内容：

  • 仪表盘配置
  • 页面编写
  • 配置路由
  • 初始化仪表盘

仪表盘配置

在模块内部创建dashboard文件夹，路径为choerodon-front-demo/demo/src/app/demo/config/dashboard目录结构为:

  1. ├── language
  2. |   ├── en.yml
  3. |   └── zh.yml
  4. |
  5. └── dashboard.yml
language仪表盘中英文配置文件夹
en.yml英文code
zh.yml中文code
dashboard.yml仪表盘配置项

dashboard.yml文件内容看起来是这样的:

  1. dashboard:
  2.   - code: "Guide" ## code
  3.     icon: APItest ## 图标
  4.     title: "快速入门" ## 显示的title
  5.     description: "新手指引" ## 描述
  6.     level: site ## 层级，包含site/organization/project
  7.     sort: 1 ## 默认顺序
  8.   - code: "Document"
  9.     icon: description
  10.     title: "文档"
  11.     description: "文档"
  12.     level: site
  13.     sort: 2
  14.   - code: "Announcement"
  15.     icon: import_contacts
  16.     title: "公告"
  17.     description: "公告"
  18.     level: site
  19.     sort: 3

其中Dashboard 的名称由language 中的配置决定。

  1. ## zh.yml
  2. "Guide": "快速入门"
  3. "Document": "文档"
  4. "Announcement": "公告"
  1. ## en.yml
  2. "Guide": "Guide"
  3. "Document": "Document"
  4. "Announcement": "Announcement"

页面编写

仪表盘的页面的编写与普通页面一致。在choerodon-front-demo/demo/src/app/demo/dashboard 创建对应code 对应的文件夹。每个文件夹中包含index.js 和index.scss。

  1. // index.js
  2. import React, { Component } from 'react';
  3. import { DashBoardNavBar } from 'choerodon-front-boot';
  4. import './index.scss';
  6. export default class Document extends Component {
  7.   render() {
  8.     return (
  9.       <div className="c7n-iam-dashboard-document">
  10.         <ul>
  11.           <li>
  12.             <a target="choerodon" href="#">这是第一行</a>
  13.           </li>
  14.         </ul>
  15.         <DashBoardNavBar>
  16.           <a target="choerodon" href="http://choerodon.io/zh/docs/">这是底部链接</a>
  17.         </DashBoardNavBar>
  18.       </div>
  19.     );
  20.   }
  21. }

配置路由

修改config.js 文件。

  1. // config.js
  2. const config = {
  3.   local: true, //是否为本地开发
  4.   clientId: 'localhost', // 必须填入响应的客户端（本地开发）
  5.   titlename: 'Demo', //项目页面的title名称
  6.   // favicon: 'favicon.ico', //项目页面的icon图片名称
  7.   theme: {
  8.     'primary-color': '#3F51B5',
  9.   },
  10.   cookieServer: '', // 子域名token共享
  11.   server: 'http://localhost:8080', // 后端接口服务器地址
  12.   port: 9090, // 端口
  13.   dashboard: {
  14.     demo: 'src/app/demo/dashboard/*' // 路径为相对package.json 文件的路径
  15.   }
  16. };

初始化仪表盘

前端配置好仪表盘之后，需要将仪表盘数据初始化到数据库中。

在服务的根目录下。打开git-bash。输入如下命令：

  1. $ python ./demo/node_modules/choerodon-front-boot/structure/dashboard.py -o yml -m demo

该命令会在根目录下生成一个dashboard.yml。

然后再执行：

  1. $ python ./demo/node_modules/choerodon-front-boot/structure/dashboard.py -o sql -i ip -p port -u user -s pwd

将dashboard.yml 数据初始化进数据库。

需要注意的是，这两个步骤分别在.gitlab-ci.yml 和 charts 中体现。