Dashboard 插件

总览

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

扩展 Load Node

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

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