Skip to main content
版本:Next

Dashboard 插件扩展

总览

本文面向 InLong Dashboard 插件开发人员,尝试尽可能全面地阐述开发一个 Dashboard 插件所经过的历程,帮助开发者快速新增一个 Plugin,让插件开发变得简单。 InLong Dashboard 本身作为前端控制台,采用 React 框架构建。

插件基础

设计概要

这是 InLong Dashboard 插件的设计概要图,我们将插件作为一个单独的层级,由各个页面使用不同的插件,进行消费。Data 与 View 是系统提供的抽象类,而插件就是一个个的派生类。

Dashboard_Plugin

目录结构

|
|- defaults: InLong 社区提供的默认公共插件
|- extends: 私有化部署时的扩展插件,作为内部插件,不投放到社区
|- common: 插件的公共设计,例如 `BasicInfo` 的设计

插件数据类

我们提供两种基本数据类,每一个插件都只能实现其中的一种,从而实现数据模型。同时,在基本数据类中,均提供一个 @I18n,可用于描述字段。

  • DataStatic 静态数据类
  • DataWithBackend 与后台通信的数据类

插件视图类

在视图上,我们提供两种基本视图类,每一个插件可实现其中的一种或多种,从而实现视图模型。

  • RenderRow,在该类中提供 @FieldDecorator 用于描述行数据视图
  • RenderList,在该类中提供 @ColumnDecorator 用于描述列数据视图

基本示例

下面是一个基本示例,在该插件中,实现了与 backend 通信的一个类,包含3个字段(username, password, format)。其中,BasicInfo 来源于各自不同的基础类型类。

import { DataWithBackend } from '@/metas/DataWithBackend';
import { RenderRow } from '@/metas/RenderRow';
import { RenderList } from '@/metas/RenderList';
import { BasicInfo } from '../common/BasicInfo';

const { I18n } = DataWithBackend;
const { FieldDecorator } = RenderRow;
const { ColumnDecorator } = RenderList;

export default class Example extends BasicInfo implements DataWithBackend, RenderRow, RenderList {
@FieldDecorator({
type: 'input',
rules: [{ required: true }],
})
@I18n('meta.Sinks.Username')
username: string;

@FieldDecorator({
type: 'password',
rules: [{ required: true }],
})
@I18n('meta.Sinks.Password')
password: string;

@FieldDecorator({
type: 'radio',
initialValue: 'TextFile',
rules: [{ required: true }],
props: {
options: [
{
label: 'TextFile',
value: 'TextFile',
},
{
label: 'SequenceFile',
value: 'SequenceFile',
},
],
},
})
@I18n('meta.Sinks.Example.Format')
format: string;
}

扩展 ExtractNode

inlong-dashboard/src/metas/sources/defaults 目录下,新建一个 Example.ts 文件,作为我们新建的一个插件,同时在当前目录的 index.ts 文件内部进行导出(可参考已有的写法),这样便完成了新增一种名为 Example 的 ExtractNode。

扩展 LoadNode

inlong-dashboard/src/metas/sinks/defaults 目录下,新建一个 Example.ts 文件,作为我们新建的一个插件,同时在当前目录的 index.ts 文件内部进行导出(可参考已有的写法),这样便完成了新增一种名为 Example 的 LoadNode。