Task node of SWITCH (#5939)

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js

@@ -308,6 +308,10 @@ const tasksType = {
   CONDITIONS: {
     desc: 'CONDITIONS',
     color: '#E46F13'
+  },
+  SWITCH: {
+    desc: 'SWITCH',
+    color: '#E46F13'
   }
 }
 

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss

@@ -113,6 +113,9 @@
   .icos-CONDITIONS {
     background: url("../img/toolbar_CONDITIONS.png") no-repeat 50% 50%;
   }
+  .icos-SWITCH{
+    background: url("../img/toolbar_SWITCH.png") no-repeat 50% 50%;
+  }
   .toolbar {
     width: 60px;
     height: 100%;

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue

@@ -95,7 +95,7 @@
         </m-list-box>
 
         <!-- Delay execution time -->
-        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
+        <m-list-box v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'&& nodeData.taskType !== 'SWITCH'">
           <div slot="text">{{$t('Delay execution time')}}</div>
           <div slot="content">
             <m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
@@ -258,6 +258,13 @@
           :backfill-item="backfillItem"
           :pre-node="nodeData.preNode">
         </m-conditions>
+        <m-switch
+          v-if="nodeData.taskType === 'SWITCH'"
+          ref="SWITCH"
+          @on-switch-result="_onSwitchResult"
+          :backfill-item="backfillItem"
+          :nodeData="nodeData"
+        ></m-switch>
         <!-- Pre-tasks in workflow -->
         <m-pre-tasks
           v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1"
@@ -293,6 +300,7 @@
   import mHttp from './tasks/http'
   import mDatax from './tasks/datax'
   import mConditions from './tasks/conditions'
+  import mSwitch from './tasks/switch.vue'
   import mSqoop from './tasks/sqoop'
   import mSubProcess from './tasks/sub_process'
   import mSelectInput from './_source/selectInput'
@@ -328,6 +336,7 @@
           successNode: [],
           failedNode: []
         },
+        switchResult: {},
         // dependence
         dependence: {},
         // cache dependence
@@ -386,6 +395,9 @@
       _onDependent (o) {
         this.dependence = Object.assign(this.dependence, {}, o)
       },
+      _onSwitchResult (o) {
+        this.switchResult = o
+      },
       /**
        * Pre-tasks in workflow
        */
@@ -480,6 +492,7 @@
             desc: this.desc,
             runFlag: this.runFlag,
             conditionResult: this.conditionResult,
+            switchResult: this.switchResult,
             dependence: this.cacheDependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
@@ -604,6 +617,7 @@
             desc: this.desc,
             runFlag: this.runFlag,
             conditionResult: this.conditionResult,
+            switchResult: this.switchResult,
             dependence: this.dependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
@@ -801,6 +815,7 @@
       mDatax,
       mSqoop,
       mConditions,
+      mSwitch,
       mSelectInput,
       mTimeoutAlarm,
       mDependentTimeout,

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/switch.vue

@@ -0,0 +1,223 @@
+/*
+ * 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.
+ */
+<template>
+  <div class="conditions-model">
+    <m-list-box>
+      <div slot="text">{{$t('condition')}}</div>
+      <div slot="content">
+        <div class="dep-opt">
+          <a href="javascript:"
+             @click="!isDetails && _addDep()"
+             class="add-dep">
+            <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+            <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+          </a>
+        </div>
+        <div class="dep-list-model">
+          <div v-for="(el,index) in dependItemList" :key='index' class="switch-list">
+            <label style="display:block">
+              <textarea :id="`code-switch-mirror${index}`" :name="`code-switch-mirror${index}`" style="opacity: 0;">
+              </textarea>
+            </label>
+            <span class="text-b" style="padding-left: 0">{{$t('Branch flow')}}</span>
+            <el-select style="width: 157px;" size="small" v-model="el.nextNode" clearable>
+              <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+            </el-select>
+            <span class="operation">
+              <a href="javascript:" class="delete" @click="!isDetails && _removeDep(index)" v-if="index === (dependItemList.length - 1)">
+                <em class="iconfont el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Delete')" ></em>
+              </a>
+              <a href="javascript:" class="add" @click="!isDetails && _addDep()" v-if="index === (dependItemList.length - 1)">
+                <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </m-list-box>
+    <m-list-box>
+      <div slot="text">{{$t('Branch flow')}}</div>
+      <div slot="content">
+        <el-select style="width: 157px;" size="small" v-model="nextNode" clearable :disabled="isDetails">
+          <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+        </el-select>
+      </div>
+    </m-list-box>
+  </div>
+</template>
+<script>
+  import _ from 'lodash'
+  import mListBox from './_source/listBox'
+  import disabledState from '@/module/mixin/disabledState'
+  import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
+
+  let editArray = []
+  export default {
+    name: 'dependence',
+    data () {
+      return {
+        nextNode: '',
+        relation: 'AND',
+        dependItemList: [],
+        editArray: [],
+        isLoading: false,
+        oldList: []
+      }
+    },
+    mixins: [disabledState],
+    props: {
+      nodeData: Object,
+      backfillItem: Object,
+      rearList: Array
+    },
+    methods: {
+      editList (index) {
+        // editor
+        const self = this
+        const editor = codemirror(`code-switch-mirror${index}`, {
+          mode: 'shell',
+          readOnly: this.isInstance
+        }, this)
+        editor.on('change', function () {
+          const outputList = _.cloneDeep(self.dependItemList)
+          outputList[index].condition = editor.getValue()
+          self.dependItemList = outputList
+        })
+
+        this.keypress = () => {
+          if (!editor.getOption('readOnly')) {
+            editor.showHint({
+              completeSingle: false
+            })
+          }
+        }
+        editor.on('keypress', this.keypress)
+        editor.setValue(this.dependItemList[index].condition || '')
+        editor.setSize('580px', '60px')
+        editArray.push(editor)
+        this.oldList = _.cloneDeep(this.dependItemList)
+        return editArray
+      },
+      _addDep () {
+        if (!this.isLoading) {
+          this.isLoading = true
+
+          this.dependItemList.push({
+            condition: '',
+            nextNode: ''
+          })
+          let dependItemListLen = this.dependItemList.length
+          if (dependItemListLen > 0) {
+            setTimeout(() => {
+              this.editList(dependItemListLen - 1)
+              this.isLoading = false
+            }, 200)
+          }
+          this._removeTip()
+        }
+      },
+      _removeDep (i) {
+        this.dependItemList.splice(i, 1)
+        this._removeTip()
+      },
+      _removeTip () {
+        $('body').find('.tooltip.fade.top.in').remove()
+      },
+      _verification () {
+        let flag = this.dependItemList.some((item) => {
+          return !item.condition
+        })
+        if (flag) {
+          this.$message.warning(`${this.$t('The condition content cannot be empty')}`)
+          return false
+        }
+        let params = {
+          dependTaskList: this.dependItemList || [],
+          nextNode: this.nextNode || ''
+        }
+        this.$emit('on-switch-result', params)
+        return true
+      }
+    },
+    watch: {},
+    beforeCreate () {
+    },
+    created () {
+      const o = this.backfillItem
+      if (!_.isEmpty(o)) {
+        let switchResult = o.switchResult || {}
+        this.dependItemList = _.cloneDeep(switchResult.dependTaskList) || []
+        this.nextNode = _.cloneDeep(switchResult.nextNode) || ''
+      }
+    },
+    mounted () {
+      if (this.dependItemList && this.dependItemList.length > 0) {
+        setTimeout(() => {
+          this.dependItemList.forEach((item, index) => {
+            this.editList(index)
+          })
+        })
+      }
+    },
+    destroyed () {
+    },
+    computed: {
+    },
+    components: { mListBox }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .conditions-model {
+    margin-top: -10px;
+    .dep-opt {
+      margin-bottom: 10px;
+      padding-top: 3px;
+      line-height: 24px;
+      .add-dep {
+        color: #0097e0;
+        margin-right: 10px;
+        i {
+          font-size: 18px;
+          vertical-align: middle;
+        }
+      }
+    }
+    .dep-list-model{
+      position: relative;
+      min-height: 0px;
+      .switch-list {
+        margin-bottom: 6px;
+        .operation {
+          padding-left: 4px;
+          a {
+            i {
+              font-size: 18px;
+              vertical-align: middle;
+            }
+          }
+          .delete {
+            color: #ff0000;
+          }
+          .add {
+            color: #0097e0;
+          }
+        }
+      }
+    }
+  }
+</style>

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -695,5 +695,7 @@ export default {
   'The workflow canvas is abnormal and cannot be saved, please recreate': 'The workflow canvas is abnormal and cannot be saved, please recreate',
   Info: 'Info',
   'Datasource userName': 'owner',
-  'Resource userName': 'owner'
+  'Resource userName': 'owner',
+  condition: 'condition',
+  'The condition content cannot be empty': 'The condition content cannot be empty'
 }

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -694,5 +694,7 @@ export default {
   'The workflow canvas is abnormal and cannot be saved, please recreate': '该工作流画布异常，无法保存，请重新创建',
   Info: '提示',
   'Datasource userName': '所属用户',
-  'Resource userName': '所属用户'
+  'Resource userName': '所属用户',
+  condition: '条件',
+  'The condition content cannot be empty': '条件内容不能为空'
 }