[Feature][ui] Delay execution and typo fix (#3508)

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

@@ -229,6 +229,13 @@ const tasksState = {
     color: '#5101be',
     icoUnicode: 'ans-icon-dependence',
     isSpin: false
+  },
+  DELAY_EXECUTION: {
+    id: 12,
+    desc: `${i18n.$t('Delay execution')}`,
+    color: '#5102ce',
+    icoUnicode: 'ans-icon-coin',
+    isSpin: false
   }
 }
 

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

@@ -109,6 +109,20 @@
             <span>({{$t('Minute')}})</span>
           </div>
         </div>
+
+        <!-- Delay execution time -->
+        <div class="clearfix list" v-if="taskType !== 'SUB_PROCESS' && taskType !== 'CONDITIONS' && taskType !== 'DEPENDENT'">
+          <div class="text-box">
+            <span>{{$t('Delay execution time')}}</span>
+          </div>
+          <div class="cont-box">
+            <m-select-input v-model="delayTime" :list="[0,1,5,10]">
+            </m-select-input>
+            <span>({{$t('Minute')}})</span>
+          </div>
+        </div>
+
+        <!-- Branch flow -->
         <div class="clearfix list" v-if="taskType === 'CONDITIONS'">
           <div class="text-box">
             <span>{{$t('State')}}</span>
@@ -127,7 +141,6 @@
             </x-select>
           </div>
         </div>
-
         <div class="clearfix list" v-if="taskType === 'CONDITIONS'">
           <div class="text-box">
             <span>{{$t('State')}}</span>
@@ -339,6 +352,8 @@
         maxRetryTimes: '0',
         // Failure retry interval
         retryInterval: '1',
+        // Delay execution time
+        delayTime: '0',
         // Task timeout alarm
         timeout: {},
         // Task priority
@@ -466,6 +481,7 @@
             dependence: this.cacheDependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
+            delayTime: this.delayTime,
             timeout: this.timeout,
             taskInstancePriority: this.taskInstancePriority,
             workerGroup: this.workerGroup,
@@ -544,6 +560,7 @@
             dependence: this.dependence,
             maxRetryTimes: this.maxRetryTimes,
             retryInterval: this.retryInterval,
+            delayTime: this.delayTime,
             timeout: this.timeout,
             taskInstancePriority: this.taskInstancePriority,
             workerGroup: this.workerGroup,
@@ -634,6 +651,7 @@
         this.description = o.description
         this.maxRetryTimes = o.maxRetryTimes
         this.retryInterval = o.retryInterval
+        this.delayTime = o.delayTime
         if(o.conditionResult) {
           this.successBranch = o.conditionResult.successNode[0]
           this.failedBranch = o.conditionResult.failedNode[0]
@@ -699,6 +717,7 @@
           dependence: this.cacheDependence,
           maxRetryTimes: this.maxRetryTimes,
           retryInterval: this.retryInterval,
+          delayTime: this.delayTime,
           timeout: this.timeout,
           taskInstancePriority: this.taskInstancePriority,
           workerGroup: this.workerGroup,

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/instanceConditions/common.js

@@ -60,6 +60,9 @@ const stateType = [
   }, {
     code: 'WAITTING_DEPEND',
     label: `${i18n.$t('Waiting for dependency to complete')}`
+  }, {
+    code: 'DELAY_EXECUTION',
+    label: `${i18n.$t('Delay execution')}`
   }
 ]
 

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

+/*
+ * 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-status-count-model">
+    <div v-show="!msg">
+      <div class="data-area" v-spin="isSpin" style="height: 430px;">
+        <div class="col-md-7">
+          <div id="task-status-pie" style="height:260px;margin-top: 100px;"></div>
+        </div>
+        <div class="col-md-5">
+          <div class="table-small-model">
+            <table>
+              <tr>
+                <th width="40">{{$t('#')}}</th>
+                <th>{{$t('Number')}}</th>
+                <th>{{$t('State')}}</th>
+              </tr>
+              <tr v-for="(item,$index) in taskStatusList" :key="$index">
+                <td><span>{{$index+1}}</span></td>
+                <td>
+                  <span>
+                    <a href="javascript:" @click="searchParams.projectId && _goTask(item.key)" :class="searchParams.projectId ?'links':''">{{item.value}}</a>
+                  </span>
+                </td>
+                <td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="msg">
+      <m-no-data :msg="msg" v-if="msg" :height="430"></m-no-data>
+    </div>
+  </div>
+</template>
+<script>
+  import _ from 'lodash'
+  import { mapActions } from 'vuex'
+  import { pie } from './chartConfig'
+  import Chart from '@/module/ana-charts'
+  import mNoData from '@/module/components/noData/noData'
+  import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
+
+  export default {
+    name: 'task-status-count',
+    data () {
+      return {
+        isSpin: true,
+        msg: '',
+        taskStatusList: []
+      }
+    },
+    props: {
+      searchParams: Object
+    },
+    methods: {
+      ...mapActions('projects', ['getTaskStatusCount']),
+      _goTask (name) {
+        this.$router.push({
+          name: 'task-instance',
+          query: {
+            stateType: _.find(stateType, ['label', name])['code'],
+            startDate: this.searchParams.startDate,
+            endDate: this.searchParams.endDate
+          }
+        })
+      },
+      _handleTaskStatus (res) {
+        let data = res.data.taskCountDtos
+        this.taskStatusList = _.map(data, v => {
+          return {
+            // CHECK!!
+            key: _.find(stateType, ['code', v.taskStateType])['label'],
+            value: v.count,
+            type: 'type'
+          }
+        })
+        const myChart = Chart.pie('#task-status-pie', this.taskStatusList, { title: '' })
+        myChart.echart.setOption(pie)
+
+        // Jump forbidden in index page
+        if (this.searchParams.projectId) {
+          myChart.echart.on('click', e => {
+            this._goTask(e.data.name)
+          })
+        }
+      }
+    },
+    watch: {
+      'searchParams': {
+        deep: true,
+        immediate: true,
+        handler (o) {
+          this.isSpin = true
+          this.getTaskStatusCount(o).then(res => {
+            this.taskStatusList = []
+            this._handleTaskStatus(res)
+            this.isSpin = false
+          }).catch(e => {
+            console.log(e)
+            this.msg = e.msg || 'error'
+            this.isSpin = false
+          })
+        }
+      }
+    },
+    beforeCreate () {
+    },
+    created () {
+    },
+    beforeMount () {
+    },
+    mounted () {
+    },
+    beforeUpdate () {
+    },
+    updated () {
+    },
+    beforeDestroy () {
+    },
+    destroyed () {
+    },
+    computed: {},
+    components: { mNoData }
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .task-status-count-model {
+
+  }
+</style>

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

@@ -35,8 +35,8 @@
               <span>{{$t('Task status statistics')}}</span>
             </div>
             <div class="row">
-              <m-task-ctatus-count :search-params="searchParams">
-              </m-task-ctatus-count>
+              <m-task-status-count :search-params="searchParams">
+              </m-task-status-count>
             </div>
           </div>
           <div class="col-md-6">
@@ -68,7 +68,7 @@
   import dayjs from 'dayjs'
   import mDefineUserCount from './_source/defineUserCount'
   import mCommandStateCount from './_source/commandStateCount'
-  import mTaskCtatusCount from './_source/taskCtatusCount'
+  import mTaskStatusCount from './_source/taskStatusCount'
   import mProcessStateCount from './_source/processStateCount'
   import mQueueCount from './_source/queueCount'
   import localStore from '@/module/util/localStorage'
@@ -105,7 +105,7 @@
       mListConstruction,
       mDefineUserCount,
       mCommandStateCount,
-      mTaskCtatusCount,
+      mTaskStatusCount,
       mProcessStateCount,
       mQueueCount
     }

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

@@ -69,7 +69,7 @@ export default {
   /**
    * Task status statistics
    */
-  getTaskCtatusCount ({ state }, payload) {
+  getTaskStatusCount ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.get('projects/analysis/task-state-count', payload, res => {
         resolve(res)

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

@@ -42,6 +42,8 @@ export default {
   Times: 'Times',
   'Failed retry interval': 'Failed retry interval',
   Minute: 'Minute',
+  'Delay execution time': 'Delay execution time',
+  'Delay execution': 'Delay execution',
   Cancel: 'Cancel',
   'Confirm add': 'Confirm add',
   'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': 'The newly created sub-Process has not yet been executed and cannot enter the sub-Process',

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

@@ -43,6 +43,7 @@ export default {
   Times: '次',
   'Failed retry interval': '失败重试间隔',
   Minute: '分',
+  'Delay execution time': '延时执行时间',
   Cancel: '取消',
   'Confirm add': '确认添加',
   'The newly created sub-Process has not yet been executed and cannot enter the sub-Process': '新创建子工作流还未执行，不能进入子工作流',
@@ -425,6 +426,7 @@ export default {
   hour: '时',
   Running: '正在运行',
   'Waiting for dependency to complete': '等待依赖完成',
+  'Delay execution': '延时执行',
   Selected: '已选',
   CurrentHour: '当前小时',
   Last1Hour: '前1小时',