前置条件

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

介绍

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

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

仪表盘配置

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

├── language
|   ├── en.yml
|   └── zh.yml
|
└── dashboard.yml

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

dashboard:
  - code: "Guide" ## code
    icon: APItest ## 图标
    title: "快速入门" ## 显示的title
    description: "新手指引" ## 描述
    level: site ## 层级，包含site/organization/project
    sort: 1 ## 默认顺序
  - code: "Document"
    icon: description
    title: "文档"
    description: "文档"
    level: site
    sort: 2
  - code: "Announcement"
    icon: import_contacts
    title: "公告"
    description: "公告"
    level: site
    sort: 3

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

## zh.yml
"Guide": "快速入门"
"Document": "文档"
"Announcement": "公告"

## en.yml
"Guide": "Guide"
"Document": "Document"
"Announcement": "Announcement"

页面编写

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

// index.js
import React, { Component } from 'react';
import { DashBoardNavBar } from 'choerodon-front-boot';
import './index.scss';
export default class Document extends Component {
  render() {
    return (
      <div className="c7n-iam-dashboard-document">
        <ul>
          <li>
            <a target="choerodon" href="#">这是第一行</a>
          </li>
        </ul>
        <DashBoardNavBar>
          <a target="choerodon" href="http://choerodon.io/zh/docs/">这是底部链接</a>
        </DashBoardNavBar>
      </div>
    );
  }
}

配置路由

修改config.js 文件。

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

初始化仪表盘

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

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

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

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

然后再执行：

$ 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 中体现。