Dashboard 插件

总览

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

集成新的 Load Node 到 InLong Dashboard 的主流程

在 inlong-dashboard/src/components/MetaData 目录下，新建一个 StorageExampleNode.tsx 文件，同时讲该文件在当前目录的 index.ts 文件内部进行导出（可参考已有 LoadNode 的写法），这样便完成了新增一种名为 ExampleNode 的 LoadNode，接下来，我们将介绍怎么定义该 LoadNode 的内部结构。

在 LoadNode 的定义中，可通过 import type { GetStorageFormFieldsType, GetStorageColumnsType } from '@/utils/metaData'; 文件中的类型声明查看我们约定的统一规范，这里我们展示了一个最简单的 LoadNode 定义（重点在于--关注点--标签内部）:

  1. import { getColsFromFields, GetStorageFormFieldsType } from '@/utils/metaData';
  2. import { ColumnsType } from 'antd/es/table';
  3. import { excludeObject } from '@/utils';
  5. const getForm: GetStorageFormFieldsType = (
  6.   type: 'form' | 'col' = 'form',
  7.   { currentValues, isEdit } = {} as any,
  8. ) => {
  9.   // -- 关注点 Start --
  10.   const fileds = [
  11.     {
  12.       name: 'name',
  13.       type: 'input',
  14.       label: 'Name',
  15.       _inTable: true,
  16.     },
  17.     {
  18.       name: 'sex',
  19.       type: 'radio',
  20.       label: 'Sex',
  21.       initialValue: 'female',
  22.       props: {
  23.         options: [
  24.           {
  25.             label: 'female',
  26.             value: 'female',
  27.           },
  28.           {
  29.             label: 'male',
  30.             value: 'male',
  31.           },
  32.         ],
  33.         disabled: isEdit && [110, 130].includes(currentValues?.status),
  34.       },
  35.       _inTable: true,
  36.     },
  37.     {
  38.       name: 'age',
  39.       type: 'inputnumber',
  40.       label: 'Age',
  41.       props: {
  42.         min: 1,
  43.         max: 200,
  44.       },
  45.     },
  46.     // -- 关注点 End --
  47.   ];
  48.   // 下面为通用的 return
  49.   return type === 'col'
  50.     ? getColsFromFields(fileds)
  51.     : fileds.map(item => excludeObject(['_inTable'], item));
  52. };
  53. // 下面为通用的 export
  54. const tableColumns = getForm('col') as ColumnsType;
  56. export const StorageExampleNode = {
  57.   getForm,
  58.   tableColumns,
  59. };

在上述例子中，我们定义了一个 ExampleNode 的 LoadNode，它由 name, sex, age 三个字段构成，字段名对应了 name 属性（与 manager 交互的 API 接口字段），type 属性表示前端页面中展示的输入表单，通常包含 input, inputnumber, radio, select 等多种形式，更多的复杂展示形式或整个对象的完整定义都可通过 ts 类型描述获得。