[incubator-inlong-website] branch master updated: [INLONG-3670] Add dashboard plugin docs to official website (#345)

[do...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-inlong-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 9da03e3f9 [INLONG-3670] Add dashboard plugin docs to official website (#345)
9da03e3f9 is described below

commit 9da03e3f97ab318b8680ef82864a02b8cdfa712c
Author: Daniel <le...@outlook.com>
AuthorDate: Wed Apr 13 18:59:02 2022 +0800

    [INLONG-3670] Add dashboard plugin docs to official website (#345)
---
 .../how_to_write_plugin_dashboard.md               | 96 ++++++++++++++++++++++
 .../how_to_write_plugin_dashboard.md               | 82 ++++++++++++++++++
 2 files changed, 178 insertions(+)

diff --git a/docs/design_and_concept/how_to_write_plugin_dashboard.md b/docs/design_and_concept/how_to_write_plugin_dashboard.md
new file mode 100644
index 000000000..fe7ab6b3f
--- /dev/null
+++ b/docs/design_and_concept/how_to_write_plugin_dashboard.md
@@ -0,0 +1,96 @@
+---
+title: Dashboard Plugin
+sidebar_position: 4
+---
+
+# Overview
+
+This article is aimed at InLong-Dashboard plug-in developers, trying to describe the process of developing a Dashboard plug-in as comprehensively as possible, helping developers quickly add a data storage LoadNode, and making plug-in development easier.
+
+## Before
+
+The InLong Dashboard itself acts as a front-end console, built with the React framework.
+
+## Extend a new sink
+
+In the `/inlong-dashboard/src/components/MetaData` directory, create a new `StorageExample.tsx` file, and at the same time export the file in the `index.ts` file in the current directory (refer to the existing LoadNode writing method ), which completes a new sink named `Example`.
+
+````js
+// export in index
+export const Storages: StoragesType[] = [
+  // ... omit existing code
+  {
+    label: 'Example',
+    value: 'Example',
+    ...StorageExample,
+  },
+];
+````
+
+Next, we will introduce how to define the internal structure of the LoadNode.
+
+In the definition of LoadNode, we can view the unified specification of our agreement through the type declaration in the `import type { GetStorageFormFieldsType, GetStorageColumnsType } from '@/utils/metaData';` file, here we show a simplest LoadNode definition (emphasis inside the `--Focus--` tag):
+
+````js
+import { getColsFromFields, GetStorageFormFieldsType } from '@/utils/metaData';
+import { ColumnsType } from 'antd/es/table';
+import { excludeObject } from '@/utils';
+
+const getForm: GetStorageFormFieldsType = (
+  type: 'form' | 'col' = 'form',
+  { currentValues, isEdit } = {} as any,
+) => {
+  // -- Focus Start --
+  const fileds = [
+    {
+      name: 'name',
+      type: 'input',
+      label: 'Name',
+      _inTable: true,
+    },
+    {
+      name: 'sex',
+      type: 'radio',
+      label: 'Sex',
+      initialValue: 'female',
+      props: {
+        options: [
+          {
+            label: 'female',
+            value: 'female',
+          },
+          {
+            label: 'male',
+            value: 'male',
+          },
+        ],
+        disabled: isEdit && [110, 130].includes(currentValues?.status),
+      },
+      _inTable: true,
+    },
+    {
+      name: 'age',
+      type: 'inputnumber',
+      label: 'Age',
+      props: {
+        min: 1,
+        max: 200,
+      },
+    },
+    // -- Focus End --
+  ];
+  // The following is a generic return
+  return type === 'col'
+    ? getColsFromFields(fileds)
+    : fileds.map(item => excludeObject(['_inTable'], item));
+};
+// The following is a generic export
+const tableColumns = getForm('col') as ColumnsType;
+
+export const StorageExample = {
+  getForm,
+  tableColumns,
+};
+````
+
+In the above example, we define a sink of `Example`, which consists of three fields: name, sex, age. The field name corresponds to the name attribute (the API interface field that interacts with the manager), and the type attribute represents the display on the front-end page. The input form usually includes input, inputnumber, radio, select and other forms. More complex display forms or the complete definition of the entire object can be obtained through the ts type description.
\ No newline at end of file
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/design_and_concept/how_to_write_plugin_dashboard.md b/i18n/zh-CN/docusaurus-plugin-content-docs/current/design_and_concept/how_to_write_plugin_dashboard.md
new file mode 100644
index 000000000..34e023ca8
--- /dev/null
+++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/design_and_concept/how_to_write_plugin_dashboard.md
@@ -0,0 +1,82 @@
+---
+title: Dashboard 插件
+sidebar_position: 4
+---
+
+# 总览
+
+本文面向 InLong-Dashboard 插件开发人员，尝试尽可能全面地阐述开发一个 Dashboard 插件所经过的历程，帮助开发者快速新增一个数据存储流向，让插件开发变得简单。
+
+## 开发之前
+
+InLong Dashboard 本身作为前端控制台，采用 React 框架构建。
+
+## 集成新的 LoadNode 到 InLong-Dashboard 的主流程
+
+在 `/inlong-dashboard/src/components/MetaData` 目录下，新建一个 `StorageExampleNode.tsx` 文件，同时讲该文件在当前目录的 `index.ts` 文件内部进行导出（可参考已有 LoadNode 的写法），这样便完成了新增一种名为 `ExampleNode` 的 LoadNode，接下来，我们将介绍怎么定义该 LoadNode 的内部结构。
+
+在 LoadNode 的定义中，可通过 `import type { GetStorageFormFieldsType, GetStorageColumnsType } from '@/utils/metaData';` 文件中的类型声明查看我们约定的统一规范，这里我们展示了一个最简单的 LoadNode 定义（重点在于`--关注点--`标签内部）:
+
+```js
+import { getColsFromFields, GetStorageFormFieldsType } from '@/utils/metaData';
+import { ColumnsType } from 'antd/es/table';
+import { excludeObject } from '@/utils';
+
+const getForm: GetStorageFormFieldsType = (
+  type: 'form' | 'col' = 'form',
+  { currentValues, isEdit } = {} as any,
+) => {
+  // -- 关注点 Start --
+  const fileds = [
+    {
+      name: 'name',
+      type: 'input',
+      label: 'Name',
+      _inTable: true,
+    },
+    {
+      name: 'sex',
+      type: 'radio',
+      label: 'Sex',
+      initialValue: 'female',
+      props: {
+        options: [
+          {
+            label: 'female',
+            value: 'female',
+          },
+          {
+            label: 'male',
+            value: 'male',
+          },
+        ],
+        disabled: isEdit && [110, 130].includes(currentValues?.status),
+      },
+      _inTable: true,
+    },
+    {
+      name: 'age',
+      type: 'inputnumber',
+      label: 'Age',
+      props: {
+        min: 1,
+        max: 200,
+      },
+    },
+    // -- 关注点 End --
+  ];
+  // 下面为通用的 return
+  return type === 'col'
+    ? getColsFromFields(fileds)
+    : fileds.map(item => excludeObject(['_inTable'], item));
+};
+// 下面为通用的 export
+const tableColumns = getForm('col') as ColumnsType;
+
+export const StorageExampleNode = {
+  getForm,
+  tableColumns,
+};
+```
+
+在上述例子中，我们定义了一个 `ExampleNode` 的 LoadNode，它由 name, sex, age 三个字段构成，字段名对应了 name 属性（与 manager 交互的 API 接口字段），type 属性表示前端页面中展示的输入表单，通常包含 input, inputnumber, radio, select 等多种形式，更多的复杂展示形式或整个对象的完整定义都可通过 ts 类型描述获得。