动态任务组件是 Apache DolphinScheduler 以动态表单渲染（它包含表单结构的渲染，表单的配置项等）的方式实现工作流 Dag节点配置渲染。区别于现有任务组件的实现方式，动态任务组件的实现在于通过接口获取任务的分类、任务节点以及每个任务对应的表单结构。

本文将介绍 Apache DolphinScheduler 初版动态任务组件设计的实现方案，希望帮助大家更高效地理解和使用海豚调度。

• 减少前端部分的代码，缩小打包后的体积
• 尽可能在新增、编辑和删除一个任务组件时无需重新打包构建前端代码
• 便于后端开发者快速且无障碍的对任务组件进行开发（无需关注前端代码逻辑）

• 增加系统设置页面（该页面目前包含接口默认请求的超时时间配置和日志接口轮询的时间间隔配置），在页面中增加实验性功能配置，其中包含动态任务组件的开关选项（当开关打开时，会在工作流定义页面中出现一个创建工作流（动态）的黄色按钮，点击后跳转新的画布页面）；

  

  
  

  

• 画布的小地图功能；

  

• 左侧的任务组件列表由任务组件分类和查询当前分类下的任务组件两个接口的数据进行前端页面的渲染（任务组件的名称、默认图标和鼠标悬浮的图标都以静态资源文件形式存放在后端资源目录中）；
• 当拖拽 Shell 任务到画布的过程中调用一个接口，该接口会返回此任务的表单结构数据（表单结构数据是以 JSON 文件的形式存放在后端资源目录中）。

• 该方案的实现是以兼容模式进行处理，既要保证现有的逻辑能够平稳运行，又要保证新功能的不断迭代；
• 初版不支持跑通整个工作流的业务；
• 初版不支持画布中节点与节点之间的连接线功能；
• 初版只支持 Shell 组件中的四个必填字段；
• 初版的表单项只支持 studio 、 input 和 select ，其中 select 支持动态 options 和非动态 options。

• name：主要用于表示任务组件的名称。当然，它也有一些其它的用途，例如我们采用了动态任务组件的方案，网页的文档结构是根据数据进行渲染的，所以为了方便 E2E 测试，我们会用此字段和 forms 中的 field 字段进行拼接作为标签的 class 属性的值；
• locales：目前 DolphinScheduler 的项目只支持中文和英语两种语言，所以 locales 中只存在这两个对象结构；
• apis：用于存放需要调用的接口；
• forms: 用于存放表单项的数据。

  
  
  

   {
  "name": "",
  "locales": {
    "zh_CN": {},
    "en_US": {}
  },
  "apis": {},
  "forms": []
}
  
  
  

• 在需要 使用 多语言的地方，需要增加 task_components 前缀，如果不增加前缀则不会进行多语言的处理；
• 多语言的内容需要根据表单项进行调整。

  
  
  

   {
  "zh_CN": {
    "node_name": "节点名称",
    "script": "脚本"
  },
  "en_US": {
    "node_name": "Node Name",
    "script": "Script"
  }
}
  
  
  

• 初版动态任务组件的设计方案中针对动态的接口请求只支持 select 组件的动态 options；
• 初版的接口请求方式只支持 get；
• 初版的接口不支持传参，且返回类型为 ["aaa", "bbb", "ccc"] 形式；
• 对于 url 字段，开发者无需增加 dolphinscheduler 前缀，因为它已经内置在请求拦截器中了。

  
  
  

   {
  "apiName": {
    "url": "",
    "method": "get"
  }
}
  
  
  

基础节点配置

• label（支持多语言）：表单项的名称（如果不增加 task_components 前缀，则中英文下都会显示为 node_name ）
• type：表单项的类型，初版只支持 studio 、 input 和 select
• field：提交表单时接口需要绑定的字段（如果存在接口入参格式是嵌套的情况 {a: {b: 1}} 则 field 的值可写为 "a.b", 对应的结构解析器、校验解析器和值解析器会同步处理该情况。但是初版只支持两层的对象嵌套，且初版有嵌套对象的表单项为脚本项）
• defaultValue：默认值， input 组件的默认值为 ""，select 组件的默认值为 null
• validate：表单项的校验规则
• validate.required：是否必填
• validate.trigger：校验触发的方式，input 为值发生改变时触发，blur 为失焦时触发
• 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（支持多语言）：input 框内的提示信息
• textarea：是否显示为文本域

  
  
  

   {
  "clearable": true,
  "placeholder": "",
  "textarea": false
}

  
  
  

Select

• 静态

• clearable：是否在有内容时显示清空按钮
• placeholder（支持多语言）：select 框内的提示信息
• options：select 中的选项数据，为空数组时则没有下拉数据
• options.label（支持多语言）：页面中展现的下拉数据
• options.value：该条下拉数据对应的唯一值

  
  
  

   {
  "clearable": true,
  "placeholder": "",
  "options": [
    {
      "label": "",
      "value": 1
    },
    {
      "label": "",
      "value": 2
    }
  ]
}

  
  
  

• 动态

API：动态 options 需要调用的接口名称（需要在基础结构 apis 字段中做对应），并将请求后的数据覆盖到 select 的 options 字段中

  
  
  

   {
  "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<null | string> => {
  return ref(value ?
    value :
    type === 'select' ?
      null :
      ''
  )
}
  
  
  

解析

  
  
  

   const validate: any = {}

forms.forEach((f: any) => {
  if (
    !f.validate && 
    Object.keys(f.validate).length <= 0 && 
    !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 Error(t(validate.message))
        }
      }
    }
  }

  return data
}
  
  
  

基础请求方法

  
  
  

   const reqFunction = (url: string, method: 'get') => {
  return axios({
    url,
    method
  })
}

  
  
  

解析

  
  
  

   export function useFormRequest(apis: any, forms: Array<any>): Array<any> {
  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<any>): Array<any> {
  return forms.map((f: any) => {
    delete f.validate
    delete f.api

    if (f.field.indexOf('.') >= 0) {
      const hierarchy = f.field.split('.')
      f.field = hierarchy[1]
    }

    return f
  })
}

  
  
  

表单的最终展现效果会根据配置数据进行渲染，修改表单信息只需要修改后端的 json 数据配置即可，而无需改动前端代码。

json
{  task: 'shell',  locales: {    zh_CN: {      node_name: '节点名称',      node_name_tips: '请输入节点名称',      node_name_validate_message: '节点名称不能为空',      script_validate_message: '脚本内容不能为空',      task_priority: '任务优先级',      highest: '最高',      high: '高',      medium: '中',      low: '低',      lowest: '最低',      worker_group: 'Worker 分组',      script: '脚本'    },    en_US: {      node_name: 'Node Name',      node_name_tips: 'Please entry node name',      node_name_validate_message: 'Node name cannot be empty',      script_validate_message: 'Script content cannot be empty',      task_priority: 'Task Priority',      highest: 'Highest',      high: 'High',      medium: 'Medium',      low: 'Low',      lowest: 'Lowest',      worker_group: 'Worker Group',      script: 'Script'    }  },  apis: {    getWorkerGroupList: {      url: '/worker-groups/all',      method: 'get'    }  },  forms: [    {      label: 'task_components.node_name',      type: 'input',      field: 'name',      defaultValue: '',      clearable: true,      placeholder: 'task_components.node_name_tips',      validate: {        required: true,        trigger: ['input', 'blur'],        type: 'non-empty',        message: 'task_components.node_name_validate_message'      }    },    {      label: 'task_components.task_priority',      type: 'select',      field: 'taskPriority',      options: [        { label: 'task_components.highest', value: 'HIGHEST' },        { label: 'task_components.high', value: 'HIGH' },        { label: 'task_components.medium', value: 'MEDIUM' },        { label: 'task_components.low', value: 'LOW' },        { label: 'task_components.lowest', value: 'LOWEST' }      ],      optionsLocale: true,      defaultValue: 'MEDIUM',      validate: {        required: true,        trigger: ['input', 'blur']      }    },    {      label: 'task_components.worker_group',      type: 'select',      field: 'workerGroup',      options: [],      optionsLocale: false,      defaultValue: 'default',      api: 'getWorkerGroupList',      validate: {        required: true,        trigger: ['input', 'blur']      }    },    {      label: 'task_components.script',      type: 'studio',      field: 'taskParams.rawScript',      defaultValue: '',      validate: {        required: true,        trigger: ['input', 'blur'],        type: 'non-empty',        message: 'task_components.script_validate_message'      }    }  ]}