[Feature][UI Next] Add the form of the switch task to the module of next ui. (#8536)

* add the form of the switch task

* add the component of the switch task

* developed the form of the switch task

* developed the form of the switch task

dolphinscheduler-ui-next/src/components/form/fields/index.ts

@@ -25,3 +25,4 @@ export { renderSelect } from './select'
 export { renderCheckbox } from './checkbox'
 export { renderTreeSelect } from './tree-select'
 export { renderMultiInput } from './multi-input'
+export { renderMultiCondition } from './multi-condition'

dolphinscheduler-ui-next/src/components/form/fields/multi-condition.ts

@@ -0,0 +1,153 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent, h, unref, renderSlot } from 'vue'
+import { useFormItem } from 'naive-ui/es/_mixins'
+import {
+  NFormItemGi,
+  NSpace,
+  NButton,
+  NGrid,
+  NGridItem,
+  NInput,
+  NSelect
+} from 'naive-ui'
+import { PlusOutlined, DeleteOutlined } from '@vicons/antd'
+import type { IJsonItem, FormItemRule } from '../types'
+import getField from '@/components/form/fields/get-field'
+import { formatValidate } from '@/components/form/utils'
+
+const MultiCondition = defineComponent({
+  name: 'MultiCondition',
+  emits: ['add'],
+  setup(props, ctx) {
+    const formItem = useFormItem({})
+    const onAdd = () => void ctx.emit('add')
+
+    return { onAdd, disabled: formItem.mergedDisabledRef }
+  },
+  render() {
+    const { disabled, $slots, onAdd } = this
+
+    return h(
+      NSpace,
+      { vertical: true, style: { width: '100%' } },
+      {
+        default: () => {
+          return [
+            renderSlot($slots, 'default', { disabled }),
+            h(
+              NButton,
+              {
+                circle: true,
+                size: 'tiny',
+                type: 'info',
+                disabled,
+                onClick: onAdd
+              },
+              {
+                icon: () => h(PlusOutlined)
+              }
+            )
+          ]
+        }
+      }
+    )
+  }
+})
+
+export function renderMultiCondition(
+  item: IJsonItem,
+  fields: { [field: string]: any },
+  rules: { [key: string]: FormItemRule }[]
+) {
+  let ruleItem: { [key: string]: FormItemRule } = {}
+
+  // the fields is the data of the task definition.
+  // the item is the options of this component in the form.
+  const { field, children = [] } = item
+
+  children.forEach((child: IJsonItem) => {
+    if (child.validate) {
+      ruleItem[child.field] = formatValidate(child.validate)
+    }
+  })
+
+  const getChild = (item: object, i: number) =>
+    children.map((child: IJsonItem) => {
+      return h(
+        NFormItemGi,
+        {
+          showLabel: child.name ? true : false,
+          label: child.name ? child.name : '',
+          path: `${fields[field]}[${i}].${child.field}`,
+          span: unref(child.span)
+        },
+        () => getField(child, fields[field][i])
+      )
+    })
+
+  //initialize the component by using data
+  const getChildren = ({ disabled }: { disabled: boolean }) =>
+    fields[field].map((item: object, i: number) => {
+      return h(NGrid, { xGap: 10 }, () => [
+        ...getChild(item, i),
+        h(
+          NGridItem,
+          {
+            span: 2,
+            style: { alignSelf: 'center' }
+          },
+          () =>
+            h(
+              NButton,
+              {
+                circle: true,
+                type: 'error',
+                size: 'tiny',
+                disabled,
+                onClick: () => {
+                  fields[field].splice(i, 1)
+                }
+              },
+              {
+                icon: () => h(DeleteOutlined)
+              }
+            )
+        )
+      ])
+    })
+
+  return h(
+    MultiCondition,
+    {
+      name: field,
+      onAdd: () => {
+        const newCondition = {} as any
+        children.map((child: IJsonItem) => {
+          if (child.field) {
+            newCondition[child.field] = null
+          }
+        })
+        fields[field].push(newCondition)
+      }
+    },
+    {
+      default: getChildren
+    }
+  )
+}

dolphinscheduler-ui-next/src/components/form/types.ts

@@ -36,6 +36,7 @@ type IType =
   | 'tree-select'
   | 'multi-input'
   | 'custom'
+  | 'multi-condition'
 
 interface IOption extends SelectOption, TreeSelectOption {
   label: string

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -761,7 +761,9 @@ const project = {
     sea_tunnel_master_url: 'Master URL',
     sea_tunnel_queue: 'Queue',
     sea_tunnel_master_url_tips:
-      'Please enter the master url, e.g., 127.0.0.1:7077'
+      'Please enter the master url, e.g., 127.0.0.1:7077',
+    switch_condition: 'Condition',
+    switch_branch_flow: 'Branch Flow'
   }
 }
 

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -752,7 +752,9 @@ const project = {
     sea_tunnel_master: 'Master',
     sea_tunnel_master_url: 'Master URL',
     sea_tunnel_queue: '队列',
-    sea_tunnel_master_url_tips: '请直接填写地址,例如:127.0.0.1:7077'
+    sea_tunnel_master_url_tips: '请直接填写地址,例如:127.0.0.1:7077',
+    switch_condition: '条件',
+    switch_branch_flow: '分支流转'
   }
 }
 

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts

@@ -46,3 +46,4 @@ export { useHttp } from './use-http'
 export { useSql } from './use-sql'
 export { useSqoop } from './use-sqoop'
 export { useSeaTunnel } from './use-sea-tunnel'
+export { useSwitch } from './use-switch'

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-switch.ts

@@ -0,0 +1,107 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { IJsonItem } from '../types'
+import { queryProcessDefinitionByCode } from '@/service/modules/process-definition'
+
+export function useSwitch(
+  model: { [field: string]: any },
+  projectCode: number
+): IJsonItem[] {
+  const { t } = useI18n()
+  const branchFlowOptions = ref([] as any)
+
+  const loading = ref(false)
+
+  const getOtherTaskDefinitionList = async () => {
+    if (loading.value) return
+    loading.value = true
+    branchFlowOptions.value = []
+    try {
+      const res = await queryProcessDefinitionByCode(
+        model.processName,
+        projectCode
+      )
+      res?.taskDefinitionList.forEach((item: any) => {
+        if (item.code != model.code) {
+          branchFlowOptions.value.push({ label: item.name, value: item.code })
+        }
+      })
+      loading.value = false
+    } catch (err) {
+      loading.value = false
+    }
+  }
+
+  watch(
+    () => [model.processName, model.nextCode],
+    () => {
+      if (model.processName) {
+        getOtherTaskDefinitionList()
+      }
+    }
+  )
+
+  return [
+    {
+      type: 'multi-condition',
+      field: 'dependTaskList',
+      name: t('project.node.switch_condition'),
+      validate: {
+        required: true
+      },
+      children: [
+        {
+          type: 'input',
+          field: 'condition',
+          span: 24,
+          props: {
+            loading: loading,
+            type: 'textarea',
+            autosize: { minRows: 2 }
+          },
+          validate: {
+            trigger: ['input', 'blur'],
+            required: true
+          }
+        },
+        {
+          type: 'select',
+          field: 'nextNode',
+          span: 18,
+          name: t('project.node.switch_branch_flow'),
+          options: branchFlowOptions,
+          validate: {
+            trigger: ['input', 'blur'],
+            required: true
+          }
+        }
+      ]
+    },
+    {
+      type: 'select',
+      field: 'nextNode',
+      span: 24,
+      name: t('project.node.switch_branch_flow'),
+      props: {
+        loading: loading
+      },
+      options: branchFlowOptions
+    }
+  ]
+}

dolphinscheduler-ui-next/src/views/projects/task/components/node/format-data.ts

@@ -191,6 +191,12 @@ export function formatParams(data: INodeData): {
     buildRawScript(data)
   }
 
+  if (data.taskType === 'SWITCH') {
+    taskParams.switchResult = {}
+    taskParams.switchResult.dependTaskList = data.dependTaskList
+    taskParams.switchResult.nextNode = data.nextNode
+  }
+
   const params = {
     processDefinitionCode: data.processName ? String(data.processName) : '',
     upstreamCodes: data?.preTasks?.join(','),
@@ -325,6 +331,14 @@ export function formatModel(data: ITaskData) {
     params.rawScript = data.taskParams?.rawScript
   }
 
+  if (data.taskParams?.switchResult) {
+    params.switchResult = data.taskParams.switchResult
+    params.dependTaskList = data.taskParams.switchResult?.dependTaskList
+      ? data.taskParams.switchResult?.dependTaskList
+      : []
+    params.nextNode = data.taskParams.switchResult?.nextNode
+  }
+
   return params
 }
 

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-switch.ts

@@ -0,0 +1,85 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reactive } from 'vue'
+import * as Fields from '../fields/index'
+import type { IJsonItem, INodeData, ITaskData } from '../types'
+
+export function useSwitch({
+  projectCode,
+  from = 0,
+  readonly,
+  data
+}: {
+  projectCode: number
+  from?: number
+  readonly?: boolean
+  data?: ITaskData
+}) {
+  const model = reactive({
+    taskType: 'SWITCH',
+    name: '',
+    flag: 'YES',
+    description: '',
+    timeoutFlag: false,
+    localParams: [],
+    environmentCode: null,
+    failRetryInterval: 1,
+    failRetryTimes: 0,
+    workerGroup: 'default',
+    delayTime: 0,
+    timeout: 30,
+    rawScript: '',
+    switchResult: {},
+    dependTaskList: [],
+    nextNode: undefined
+  } as INodeData)
+
+  let extra: IJsonItem[] = []
+  if (from === 1) {
+    extra = [
+      Fields.useTaskType(model, readonly),
+      Fields.useProcessName({
+        model,
+        projectCode,
+        isCreate: !data?.id,
+        from,
+        processName: data?.processName,
+        code: data?.code
+      })
+    ]
+  }
+
+  return {
+    json: [
+      Fields.useName(),
+      ...extra,
+      Fields.useRunFlag(),
+      Fields.useDescription(),
+      Fields.useTaskPriority(),
+      Fields.useWorkerGroup(),
+      Fields.useEnvironmentName(model, !data?.id),
+      ...Fields.useTaskGroup(model, projectCode),
+      ...Fields.useFailed(),
+      Fields.useDelayTime(model),
+      ...Fields.useTimeoutAlarm(model),
+      ...Fields.useSwitch(model, projectCode),
+      Fields.usePreTasks(model)
+    ] as IJsonItem[],
+    model
+  }
+}

dolphinscheduler-ui-next/src/views/projects/task/components/node/types.ts

@@ -47,6 +47,16 @@ interface ILocalParam {
   value?: string
 }
 
+interface IDependTask {
+  condition: string
+  nextNode: number
+}
+
+interface ISwitchResult {
+  dependTaskList?: IDependTask[]
+  nextNode?: number
+}
+
 interface ISourceItem {
   id: number
 }
@@ -186,6 +196,9 @@ interface ITaskParams {
   sourceParams?: string
   queue?: string
   master?: string
+  switchResult?: ISwitchResult
+  dependTaskList?: IDependTask[]
+  nextNode?: number
 }
 
 type ITaskType = TaskType

dolphinscheduler-ui-next/src/views/projects/task/components/node/use-task.ts

@@ -27,6 +27,7 @@ import { useSql } from './tasks/use-sql'
 import { useProcedure } from './tasks/use-procedure'
 import { useSqoop } from './tasks/use-sqoop'
 import { useSeaTunnel } from './tasks/use-sea-tunnel'
+import { useSwitch } from './tasks/use-switch'
 import { IJsonItem, INodeData, ITaskData } from './types'
 
 export function useTask({
@@ -139,5 +140,14 @@ export function useTask({
     })
   }
 
+  if (taskType === 'SWITCH') {
+    node = useSwitch({
+      projectCode,
+      from,
+      readonly,
+      data
+    })
+  }
+
   return node
 }