Apache DolphinScheduler 动态任务组件设计实现方案，减少前端代码

远征军

本文将介绍 Apache DolphinScheduler 初版动态任务组件设计的实现方案，希望帮助大家更高效地理解和使用海豚调度。
初衷
Apache DolphinScheduler 之所以通过动态任务组件的方式实现工作流 Dag节点配置渲染，是基于以下三点考虑：
减少前端部分的代码，缩小打包后的体积
尽可能在新增、编辑和删除一个任务组件时无需重新打包构建前端代码
便于后端开发者快速且无障碍的对任务组件进行开发（无需关注前端代码逻辑）
设计方案
由于该方案是一个长期计划，所以我们目前只实现了初版的动态任务组件的功能，它包含以下几点功能和变化：
增加系统设置页面（该页面目前包含接口默认请求的超时时间配置和日志接口轮询的时间间隔配置），在页面中增加实验性功能配置，其中包含动态任务组件的开关选项（当开关打开时，会在工作流定义页面中出现一个创建工作流（动态）的黄色按钮，点击后跳转新的画布页面）；
画布的小地图功能；

左侧的任务组件列表由任务组件分类和查询当前分类下的任务组件两个接口的数据进行前端页面的渲染（任务组件的名称、默认图标和鼠标悬浮的图标都以静态资源文件形式存放在后端资源目录中）；
当拖拽 任务到画布的过程中调用一个接口，该接口会返回此任务的表单结构数据（表单结构数据是以 文件的形式存放在后端资源目录中）。
目前这个方案依旧在初版阶段，所以需要注意以下几点：
该方案的实现是以兼容模式进行处理，既要保证现有的逻辑能够平稳运行，又要保证新功能的不断迭代；
初版不支持跑通整个工作流的业务；
初版不支持画布中节点与节点之间的连接线功能；
初版只支持 组件中的四个必填字段；
初版的表单项只支持 、 和 ，其中 支持动态 和非动态 。
表单结构化数据剖析
为了最小化的验证该方案的可行性并考虑到兼容性的问题，我们并没有对后端做较大的改动。为此，我们在表单结构化的数据形式做了一些妥协。
基础结构
name：主要用于表示任务组件的名称。当然，它也有一些其它的用途，例如我们采用了动态任务组件的方案，网页的文档结构是根据数据进行渲染的，所以为了方便 测试，我们会用此字段和 中的 字段进行拼接作为标签的 属性的值；
locales：目前 的项目只支持中文和英语两种语言，所以 中只存在这两个对象结构；
apis：用于存放需要调用的接口；
forms: 用于存放表单项的数据。
{
"name": "",
"locales": {
"zh_CN": {},
"en_US": {}
},
"apis": {},
"forms":
locals
在需要
使用
多语言的地方，需要增加 前缀，如果不增加前缀则不会进行多语言的处理；
多语言的内容需要根据表单项进行调整。
{
"zh_CN": {
"node_name": "节点名称",
"script": "脚本"
},
"en_US": {
"node_name": "Node Name",
"script": "Script"
apis
初版动态任务组件的设计方案中针对动态的接口请求只支持 组件的动态 ；
初版的接口请求方式只支持 ；
初版的接口不支持传参，且返回类型为 形式；
对于 字段，开发者无需增加 前缀，因为它已经内置在请求拦截器中了。
{
"apiName": {
"url": "",
"method": "get"
forms
基础节点配置
基础节点配置为每个表单项都必定存在的配置。
注：
这里为了介绍得更清晰，所以将其独立出来，在使用中基础节点配置与 或 节点的对象要合并在一起。
label（支持多语言）：表单项的名称（如果不增加 前缀，则中英文下都会显示为 ）
type：表单项的类型，初版只支持 、 和
field：提交表单时接口需要绑定的字段（如果存在接口入参格式是嵌套的情况 则 的值可写为 , 对应的结构解析器、校验解析器和值解析器会同步处理该情况。但是初版只支持两层的对象嵌套，且初版有嵌套对象的表单项为脚本项）
defaultValue：默认值， 组件的默认值为 ， 组件的默认值为
validate：表单项的校验规则
validate.required：是否必填
validate.trigger：校验触发的方式， 为值发生改变时触发， 为失焦时触发
validate.type：校验类型（初版只支持非空校验）
validate.message（支持多语言）：校验不通过时页面展示的提示信息
{
"label": "task_components.node_name",
"type": "input",
"field": "",
"defaultValue": "",
"validate": {
"required": true,
"trigger": [
"input",
"blur"
],
"type": "non-empty",
"message": ""
Studio
类型没有任何特殊配置，使用基础节点配置已能满足需求，所以不做过多介绍。
Input
clearable：是否在有内容时显示清空按钮
placeholder（支持多语言）： 框内的提示信息
textarea：是否显示为文本域
{
"clearable": true,
"placeholder": "",
"textarea": false
Select
静态
options： 中的选项数据，为空数组时则没有下拉数据
options.label（支持多语言）：页面中展现的下拉数据
options.value：该条下拉数据对应的唯一值
{
"clearable": true,
"placeholder": "",
"options": [
{
"label": "",
"value": 1
},
{
"label": "",
"value": 2
]

API：动态 需要调用的接口名称（需要在基础结构 字段中做对应），并将请求后的数据覆盖到 的 字段中
{
"api": "apiName"
解析器
为了能让表单结构化数据以浏览器能识别的 、 和 进行渲染，为此，我们设计了一些解析器（由于是初版的原因，我们大体上对解析器做了一些设计，使它更加灵活的同时也为了方便后续的拓展）
注：由于多语言和表单校验是在组件的 生命周期中进行注册和绑定，但是 的生命周期钩子最早的是 且该数据是异步接口获取的数据 。同时，解析器的代码重在展示逻辑，为此会使用 类型。
多语言解析器
多语言解析器用于解析基础结构中的 字段，它会与本地的 进行并集处理
useI18n.mergeLocaleMessage('zh_CN', { task_components: locales.zh_CN })
useI18n.mergeLocaleMessage('en_US', { task_components: locales.en_US })
值解析器
值解析器会将基础结构中 字段中的 字段解析成要提交的表单格式
解析
解析并处理 字段（需要对嵌套对象结构进行处理）。
const model: any = {}
forms.forEach((f: any) => {
if (f.field.indexOf('.') >= 0) {
const hierarchy = f.field.split('.')
model[hierarchy[0]] = {
[hierarchy[1]]: setField(f.defaultValue, f.type)
} else {
model[f.field] = setField(f.defaultValue, f.type)
})
赋值
为解析后的 进行赋值操作（如果 存在则赋值为 的值，否则会根据 或 进行默认值）。
import { ref } from 'vue'
import type { Ref } from 'vue'
const setField = (value: string, type: string): Ref => {
return ref(value ?
value :
type === 'select' ?
null :
''
)
校验解析器
用于解析基础结构中 字段中的 字段。
解析
解析并处理 字段，在 不存在或 是空对象或 为 或 不存在时，将不会处理当前表单项的校验逻辑。
注：
校验解析器在处理嵌套 的逻辑时与值解析器不同。
const validate: any = {}
forms.forEach((f: any) => {
if (
!f.validate &&
Object.keys(f.validate).length
!f.validate.required &&
!f.validate.type
) return
if (f.field.indexOf('.') >= 0) {
const hierarchy = f.field.split('.')
validate[hierarchy[1]] = setValidate(f.validate, f.field)
} else {
validate[f.field] = setValidate(f.validate)
})
包装
在这里我们要先构建好一个能够让表单进行验证的数据结构 ，并将不会发生变化的 和 赋值进去。当该方法有 参数传递进来时代表当前表单项的 为 ，对于这个类型并不是原生的表单项，所以需要通过直解析器处理后的值进行判断。
const setValidate = (validate: any, field?: any): object => {
const data: any = {
required: validate.required,
trigger: validate.trigger
if (validate.type === 'non-empty') {
data['validator'] = (rule: FormItemRule, value: string) => {
if (field) {
const hierarchy = field.split('.')
if (!model[hierarchy[0]][hierarchy[1]]) {
return Error(t(validate.message))
} else {
if (!value) {
return data
请求解析器
用于动态请求 的 选项。
基础请求方法
区别于硬编码形式，动态请求我们会预留一个这样的基础请求方法，然后将参数传递进来，这样可以不改造项目集中封装的 。
const reqFunction = (url: string, method: 'get') => {
return axios({
url,
method
})
解析
循环查找表单项中的 字段值是否在 中存在。
export function useFormRequest(apis: any, forms: Array): Array {
forms.map(f => {
if (f.api && apis[f.api]) {
reqFunction(apis[f.api].url, apis[f.api].method).then((res: any) => {
f.options = res.map((r: any) => {
return { label: r, value: r }
})
})
})
return forms
结构解析器
结构解析器是
最后一个执行
的解析器，它的作用在于过滤掉 中的对于浏览器页面渲染和逻辑无关的参数（过滤掉这些无用的参数，能在浏览器渲染中节省一部分时间）。
export function useFormStructure(forms: Array): Array {
return forms.map((f: any) => {
delete f.validate
delete f.api
f.field = hierarchy[1]
return f
})
表单效果和配置数据
表单效果

配置数据
结语
这就是 Apache DolphinScheduler 针对初版的动态任务组件的设计和实现方式。在未来，我们还会新增更多的表单种类，如单选、多选和开关等组件，也会有更多的交互逻辑的表达（比如可能会发布一套模板语法，用 或 进行解析），同样地，我们的解析器也会面临着诸多改造以支持更广泛的任务组件的需求。所以，如果读到这篇文章的你有 的更好的思路，也非常欢迎加入我们的贡献者种子群(联系人: easyworkflow)与我们交流, 我们相信贡献者的力量！
参与 DolphinScheduler 社区有非常多的参与贡献的方式，包括：
贡献第一个PR(文档、代码) 我们也希望是简单的，第一个PR用于熟悉提交的流程和社区协作以及感受社区的友好度。
社区汇总了以下适合新手的问题列表：https://github.com/apache/dolphinscheduler/issues/5689
非新手问题列表：https://github.com/apache/dolphinscheduler/issues?q=is%3Aopen+is%3Aissue+label%3A%22volunteer+wanted%22
如何参与贡献链接：https://dolphinscheduler.apache.org/zh-cn/community/development/contribute.html
来吧，DolphinScheduler开源社区需要您的参与，为中国开源崛起添砖加瓦吧，哪怕只是小小的一块瓦，汇聚起来的力量也是巨大的。
参与开源可以近距离与各路高手切磋，迅速提升自己的技能，如果您想参与贡献，我们有个贡献者种子孵化群，-ds) ，手把手教会您( 贡献者不分水平高低，有问必答，关键是有一颗愿意贡献的心 )。
-ds)
来吧，开源社区非常期待您的参与。

来源：http://www.yidianzixun.com/article/0lP5vPgl
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！