[Feature][Workflow] Main package. (#7178)

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

@@ -20,10 +20,11 @@
       <div slot="text">{{$t('Program Type')}}</div>
       <div slot="content">
         <el-select
-                style="width: 130px;"
-                size="small"
-                v-model="programType"
-                :disabled="isDetails">
+          style="width: 130px;"
+          size="small"
+          v-model="programType"
+          :disabled="isDetails"
+          @change="programTypeChange">
           <el-option
                   v-for="city in programTypeList"
                   :key="city.code"
@@ -46,9 +47,9 @@
       </div>
     </m-list-box>
     <m-list-box>
-      <div slot="text">{{$t('Main Jar Package')}}</div>
+      <div slot="text">{{$t('Main Package')}}</div>
       <div slot="content">
-        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :disabled="isDetails" :placeholder="$t('Please enter main jar package')">
+        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :disabled="isDetails" :placeholder="$t('Please enter main package')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -205,6 +206,7 @@
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
   import { diGuiTree, searchTree } from './_source/resourceTree'
+  import { mapActions } from 'vuex'
 
   export default {
     name: 'flink',
@@ -265,6 +267,17 @@
     },
     mixins: [disabledState],
     methods: {
+      ...mapActions('dag', ['getResourcesListJar']),
+      programTypeChange () {
+        this.mainJar = null
+        this.mainClass = ''
+      },
+      getTargetResourcesListJar (programType) {
+        this.getResourcesListJar(programType).then(res => {
+          diGuiTree(res)
+          this.mainJarLists = res
+        })
+      },
       _copyPath (e, node) {
         e.stopPropagation()
         let clipboard = new Clipboard('.copy-path', {
@@ -325,7 +338,7 @@
         }
 
         if (!this.mainJar) {
-          this.$message.warning(`${i18n.$t('Please enter main jar package')}`)
+          this.$message.warning(`${i18n.$t('Please enter main package')}`)
           return false
         }
 
@@ -450,9 +463,7 @@
     watch: {
       // Listening type
       programType (type) {
-        if (type === 'PYTHON') {
-          this.mainClass = ''
-        }
+        this.getTargetResourcesListJar(type)
       },
       // Watch the cacheParams
       cacheParams (val) {
@@ -511,6 +522,7 @@
       }
     },
     created () {
+      this.getTargetResourcesListJar(this.programType)
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
       diGuiTree(item)
@@ -518,6 +530,7 @@
       this.mainJarList = item
       this.mainJarLists = items
       let o = this.backfillItem
+
       // Non-null objects represent backfill
       if (!_.isEmpty(o)) {
         this.mainClass = o.params.mainClass || ''
@@ -570,9 +583,6 @@
           this.localParams = localParams
         }
       }
-    },
-    mounted () {
-
     },
     components: { mLocalParams, mListBox, mList4Box, Treeselect }
   }

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

@@ -19,7 +19,12 @@
     <m-list-box>
       <div slot="text">{{$t('Program Type')}}</div>
       <div slot="content">
-        <el-select v-model="programType" :disabled="isDetails" style="width: 110px;" size="small">
+        <el-select
+          v-model="programType"
+          :disabled="isDetails"
+          style="width: 110px;"
+          size="small"
+          @change="programTypeChange">
           <el-option
                   v-for="city in programTypeList"
                   :key="city.code"
@@ -42,9 +47,9 @@
       </div>
     </m-list-box>
     <m-list-box>
-      <div slot="text">{{$t('Main Jar Package')}}</div>
+      <div slot="text">{{$t('Main Package')}}</div>
       <div slot="content">
-        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :disabled="isDetails"  :placeholder="$t('Please enter main jar package')">
+        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :disabled="isDetails"  :placeholder="$t('Please enter main package')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -118,6 +123,7 @@
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
   import { diGuiTree, searchTree } from './_source/resourceTree'
+  import { mapActions } from 'vuex'
 
   export default {
     name: 'mr',
@@ -144,9 +150,9 @@
         // Option parameters
         others: '',
         // Program type
-        programType: 'JAVA',
+        programType: 'SCALA',
         // Program type(List)
-        programTypeList: [{ code: 'JAVA' }, { code: 'PYTHON' }],
+        programTypeList: [{ code: 'JAVA' }, { code: 'SCALA' }, { code: 'PYTHON' }],
         normalizer (node) {
           return {
             label: node.name
@@ -161,6 +167,17 @@
     },
     mixins: [disabledState],
     methods: {
+      ...mapActions('dag', ['getResourcesListJar']),
+      programTypeChange () {
+        this.mainJar = null
+        this.mainClass = ''
+      },
+      getTargetResourcesListJar (programType) {
+        this.getResourcesListJar(programType).then(res => {
+          diGuiTree(res)
+          this.mainJarLists = res
+        })
+      },
       _copyPath (e, node) {
         e.stopPropagation()
         let clipboard = new Clipboard('.copy-path', {
@@ -268,7 +285,7 @@
         }
 
         if (!this.mainJar) {
-          this.$message.warning(`${i18n.$t('Please enter main jar package')}`)
+          this.$message.warning(`${i18n.$t('Please enter main package')}`)
           return false
         }
 
@@ -306,9 +323,7 @@
        * monitor
        */
       programType (type) {
-        if (type === 'PYTHON') {
-          this.mainClass = ''
-        }
+        this.getTargetResourcesListJar(type)
       },
       // Watch the cacheParams
       cacheParams (val) {
@@ -361,6 +376,7 @@
       }
     },
     created () {
+      this.getTargetResourcesListJar(this.programType)
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
       diGuiTree(item)
@@ -378,11 +394,12 @@
           this.mainJar = ''
         } else {
           this.mainJar = o.params.mainJar.id || ''
+          console.log(this.mainJar)
         }
         this.appName = o.params.appName || ''
         this.mainArgs = o.params.mainArgs || ''
         this.others = o.params.others
-        this.programType = o.params.programType || 'JAVA'
+        this.programType = o.params.programType || 'SCALA'
 
         // backfill resourceList
         let resourceList = o.params.resourceList || []
@@ -414,9 +431,6 @@
           this.localParams = localParams
         }
       }
-    },
-    mounted () {
-
     },
     components: { mLocalParams, mListBox, Treeselect }
   }

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

@@ -20,10 +20,11 @@
       <div slot="text">{{$t('Program Type')}}</div>
       <div slot="content">
         <el-select
-                style="width: 130px;"
-                size="small"
-                v-model="programType"
-                :disabled="isDetails">
+          style="width: 130px;"
+          size="small"
+          v-model="programType"
+          :disabled="isDetails"
+          @change="programTypeChange">
           <el-option
                   v-for="city in programTypeList"
                   :key="city.code"
@@ -63,9 +64,9 @@
       </div>
     </m-list-box>
     <m-list-box>
-      <div slot="text">{{$t('Main Jar Package')}}</div>
+      <div slot="text">{{$t('Main Package')}}</div>
       <div slot="content">
-        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :disabled="isDetails" :placeholder="$t('Please enter main jar package')">
+        <treeselect v-model="mainJar" maxHeight="200" :options="mainJarLists" :disable-branch-nodes="true" :normalizer="normalizer" :disabled="isDetails" :placeholder="$t('Please enter main package')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -206,6 +207,7 @@
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
   import { diGuiTree, searchTree } from './_source/resourceTree'
+  import { mapActions } from 'vuex'
 
   export default {
     name: 'spark',
@@ -265,6 +267,17 @@
     },
     mixins: [disabledState],
     methods: {
+      ...mapActions('dag', ['getResourcesListJar']),
+      programTypeChange () {
+        this.mainJar = null
+        this.mainClass = ''
+      },
+      getTargetResourcesListJar (programType) {
+        this.getResourcesListJar(programType).then(res => {
+          diGuiTree(res)
+          this.mainJarLists = res
+        })
+      },
       _copyPath (e, node) {
         e.stopPropagation()
         let clipboard = new Clipboard('.copy-path', {
@@ -372,7 +385,7 @@
         }
 
         if (!this.mainJar) {
-          this.$message.warning(`${i18n.$t('Please enter main jar package')}`)
+          this.$message.warning(`${i18n.$t('Please enter main package')}`)
           return false
         }
 
@@ -469,9 +482,7 @@
     watch: {
       // Listening type
       programType (type) {
-        if (type === 'PYTHON') {
-          this.mainClass = ''
-        }
+        this.getTargetResourcesListJar(type)
       },
       // Watch the cacheParams
       cacheParams (val) {
@@ -531,6 +542,7 @@
       }
     },
     created () {
+      this.getTargetResourcesListJar(this.programType)
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
       diGuiTree(item)
@@ -591,9 +603,6 @@
           this.localParams = localParams
         }
       }
-    },
-    mounted () {
-
     },
     components: { mLocalParams, mListBox, mList4Box, Treeselect }
   }

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

@@ -46,7 +46,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams', 'setIsDetails']),
-      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getProcessDetails', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getProcessDetails']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -63,8 +63,6 @@
           this.getProjectList(),
           // get resource
           this.getResourcesList(),
-          // get jar
-          this.getResourcesListJar(),
           // get worker group list
           this.getWorkerGroupsAll(),
           // get alarm group list

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

@@ -40,7 +40,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['resetParams']),
-      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getResourcesListJar', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -53,12 +53,8 @@
         Promise.all([
           // get project
           this.getProjectList(),
-          // get jar
-          this.getResourcesListJar(),
           // get resource
           this.getResourcesList(),
-          // get jar
-          this.getResourcesListJar(),
           // get worker group list
           this.getWorkerGroupsAll(),
           // get alarm group list

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

@@ -43,7 +43,7 @@
     props: {},
     methods: {
       ...mapMutations('dag', ['setIsDetails', 'resetParams']),
-      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getInstancedetail', 'getResourcesListJar']),
+      ...mapActions('dag', ['getProjectList', 'getResourcesList', 'getInstancedetail']),
       ...mapActions('security', ['getTenantList', 'getWorkerGroupsAll', 'getAlarmGroupsAll']),
       /**
        * init
@@ -60,8 +60,6 @@
           this.getProjectList(),
           // get resources
           this.getResourcesList(),
-          // get jar
-          this.getResourcesListJar(),
           // get worker group list
           this.getWorkerGroupsAll(),
           // get alarm group list

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskDefinition/index.vue

@@ -0,0 +1,301 @@
+/*
+ * 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="task-definition" v-if="!isLoading">
+    <m-list-construction :title="$t('Task Definition')">
+      <template slot="conditions">
+        <m-conditions @on-conditions="_onConditions" :taskTypeShow="true">
+          <template v-slot:button-group>
+            <el-button size="mini" @click="createTask">
+              {{ $t("Create task") }}
+            </el-button>
+          </template>
+        </m-conditions>
+      </template>
+      <template v-slot:content>
+        <template v-if="tasksList.length || total > 0">
+          <m-list
+            :tasksList="tasksList"
+            @on-update="_onUpdate"
+            @editTask="editTask"
+            @viewTaskDetail="viewTaskDetail"
+          ></m-list>
+          <div class="page-box">
+            <el-pagination
+              background
+              @current-change="_page"
+              @size-change="_pageSize"
+              :page-size="searchParams.pageSize"
+              :current-page.sync="searchParams.pageNo"
+              :page-sizes="[10, 30, 50]"
+              :total="total"
+              layout="sizes, prev, pager, next, jumper"
+            >
+            </el-pagination>
+          </div>
+        </template>
+        <template v-if="!tasksList.length">
+          <m-no-data></m-no-data>
+        </template>
+        <m-spin :is-spin="isLoading"></m-spin>
+      </template>
+    </m-list-construction>
+    <el-drawer
+      :visible.sync="taskDrawer"
+      size=""
+      :with-header="false"
+      @close="closeTaskDrawer"
+    >
+      <!-- fix the bug that Element-ui(2.13.2) auto focus on the first input -->
+      <div style="width: 0px; height: 0px; overflow: hidden">
+        <el-input type="text" />
+      </div>
+      <m-form-model
+        v-if="taskDrawer"
+        :nodeData="nodeData"
+        type="task-definition"
+        @changeTaskType="changeTaskType"
+        @close="closeTaskDrawer"
+        @addTaskInfo="saveTask"
+        :taskDefinition="editingTask"
+      >
+      </m-form-model>
+    </el-drawer>
+  </div>
+</template>
+<script>
+  import mListConstruction from '@/module/components/listConstruction/listConstruction'
+  import mConditions from '@/module/components/conditions/conditions'
+  import mList from './_source/list'
+  import mNoData from '@/module/components/noData/noData'
+  import mSpin from '@/module/components/spin/spin'
+  import { mapActions, mapMutations } from 'vuex'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
+  import mFormModel from '@/conf/home/pages/dag/_source/formModel/formModel.vue'
+  /**
+   * tasksType
+   */
+  import { tasksType } from '@/conf/home/pages/dag/_source/config.js'
+
+  const DEFAULT_NODE_DATA = {
+    id: -1,
+    taskType: 'SHELL',
+    instanceId: -1
+  }
+  export default {
+    name: 'task-definition-index',
+    data () {
+      // tasksType
+      const tasksTypeList = Object.keys(tasksType)
+      return {
+        total: null,
+        tasksList: [],
+        isLoading: true,
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: '',
+          taskType: '',
+          userId: ''
+        },
+        // whether the task config drawer is visible
+        taskDrawer: false,
+        // nodeData
+        nodeData: { ...DEFAULT_NODE_DATA },
+        // tasksType
+        tasksTypeList,
+        // editing task definition
+        editingTask: null
+      }
+    },
+    mixins: [listUrlParamHandle],
+    methods: {
+      ...mapActions('dag', [
+        'getTaskDefinitionsList',
+        'genTaskCodeList',
+        'saveTaskDefinition',
+        'updateTaskDefinition'
+      ]),
+      ...mapActions('dag', [
+        'getProcessList',
+        'getProjectList',
+        'getResourcesList'
+      ]),
+      ...mapMutations('dag', ['resetParams', 'setIsDetails']),
+      ...mapActions('security', [
+        'getTenantList',
+        'getWorkerGroupsAll',
+        'getAlarmGroupsAll'
+      ]),
+      /**
+       * Toggle task drawer
+       */
+      showTaskDrawer () {
+        this.taskDrawer = true
+      },
+      closeTaskDrawer () {
+        this.setIsDetails(false)
+        this.taskDrawer = false
+      },
+      saveTask ({ item }) {
+        const isEditing = !!this.editingTask
+        if (isEditing) {
+          this.updateTaskDefinition(item)
+            .then((res) => {
+              this.$message.success(res.msg)
+              this._onUpdate()
+              this.closeTaskDrawer()
+            })
+            .catch((e) => {
+              this.$message.error(e.msg || '')
+            })
+        } else {
+          this.genTaskCodeList({
+            genNum: 1
+          })
+            .then((res) => {
+              const [code] = res
+              return code
+            })
+            .then((code) => {
+              return this.saveTaskDefinition({
+                taskDefinitionJson: [
+                  {
+                    ...item,
+                    code
+                  }
+                ]
+              })
+            })
+            .then((res) => {
+              this.$message.success(res.msg)
+              this._onUpdate()
+              this.closeTaskDrawer()
+            })
+            .catch((e) => {
+              this.$message.error(e.msg || '')
+            })
+        }
+      },
+      createTask () {
+        this.editingTask = null
+        this.nodeData.taskType = DEFAULT_NODE_DATA.taskType
+        this.showTaskDrawer()
+      },
+      editTask (task) {
+        this.editingTask = task
+        this.nodeData.id = task.code
+        this.nodeData.taskType = task.taskType
+        this.showTaskDrawer()
+      },
+      viewTaskDetail (task) {
+        this.setIsDetails(true)
+        this.editTask(task)
+      },
+      /**
+       * pageNo
+       */
+      _page (val) {
+        this.searchParams.pageNo = val
+      },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
+      /**
+       * conditions
+       */
+      _onConditions (o) {
+        this.searchParams.searchVal = o.searchVal
+        this.searchParams.taskType = o.taskType
+        this.searchParams.pageNo = 1
+      },
+      /**
+       * get task definition list
+       */
+      _getList (flag) {
+        this.isLoading = !flag
+        this.getTaskDefinitionsList(this.searchParams)
+          .then((res) => {
+            if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
+              this.searchParams.pageNo = this.searchParams.pageNo - 1
+            } else {
+              this.tasksList = []
+              this.tasksList = res.totalList
+              this.total = res.total
+              this.isLoading = false
+            }
+          })
+          .catch((e) => {
+            this.isLoading = false
+          })
+      },
+      /**
+       * update task dataList
+       */
+      _onUpdate () {
+        this._debounceGET('false')
+      },
+      /**
+       * change form modal task type
+       */
+      changeTaskType (value) {
+        this.nodeData.taskType = value
+      }
+    },
+    created () {
+      this.isLoading = true
+      // Initialization parameters
+      this.resetParams()
+      // Promise Get node needs data
+      Promise.all([
+        // get process definition
+        this.getProcessList(),
+        // get project
+        this.getProjectList(),
+        // get resource
+        this.getResourcesList(),
+        // get worker group list
+        this.getWorkerGroupsAll(),
+        // get alarm group list
+        this.getAlarmGroupsAll(),
+        this.getTenantList()
+      ])
+        .then((data) => {
+          this.isLoading = false
+        })
+        .catch(() => {
+          this.isLoading = false
+        })
+    },
+    mounted () {},
+    components: {
+      mListConstruction,
+      mConditions,
+      mList,
+      mNoData,
+      mSpin,
+      mFormModel
+    }
+  }
+</script>
+<style  lang="scss" scoped>
+.task-definition {
+  .taskGroupBtn {
+    width: 300px;
+  }
+}
+</style>

dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js

@@ -443,16 +443,12 @@ export default {
   /**
    * get jar
    */
-  getResourcesListJar ({ state }) {
+  getResourcesListJar ({ state }, programType) {
     return new Promise((resolve, reject) => {
-      if (state.resourcesListJar.length) {
-        resolve()
-        return
-      }
       io.get('resources/query-by-type', {
-        type: 'FILE'
+        type: 'FILE',
+        programType
       }, res => {
-        state.resourcesListJar = res.data
         resolve(res.data)
       }).catch(res => {
         reject(res)

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

@@ -87,8 +87,8 @@ export default {
   'Please enter a positive integer': 'Please enter a positive integer',
   'Program Type': 'Program Type',
   'Main Class': 'Main Class',
-  'Main Jar Package': 'Main Jar Package',
-  'Please enter main jar package': 'Please enter main jar package',
+  'Main Package': 'Main Package',
+  'Please enter main package': 'Please enter main package',
   'Please enter main class': 'Please enter main class',
   'Main Arguments': 'Main Arguments',
   'Please enter main arguments': 'Please enter main arguments',

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

@@ -87,8 +87,8 @@ export default {
   'Please enter a positive integer': '请输入正整数',
   'Program Type': '程序类型',
   'Main Class': '主函数的Class',
-  'Main Jar Package': '主Jar包',
-  'Please enter main jar package': '请选择主Jar包',
+  'Main Package': '主程序包',
+  'Please enter main package': '请选择主程序包',
   'Please enter main class': '请填写主函数的Class',
   'Main Arguments': '主程序参数',
   'Please enter main arguments': '请输入主程序参数',