[Feature][UI Next][V1.0.0-Alpha] Add a DISPATCH state to the task. (#9302)

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

@@ -104,6 +104,7 @@ const home = {
   delay_execution: 'DELAY_EXECUTION',
   forced_success: 'FORCED_SUCCESS',
   serial_wait: 'SERIAL_WAIT',
+  dispatch: 'DISPATCH',
   ready_block: 'READY_BLOCK',
   block: 'BLOCK'
 }
@@ -496,6 +497,7 @@ const project = {
     delay_execution: 'Delay execution',
     forced_success: 'Forced success',
     serial_wait: 'Serial wait',
+    dispatch: 'Dispatch',
     executing: 'Executing',
     startup_type: 'Startup Type',
     complement_range: 'Complement Range',
@@ -561,24 +563,9 @@ const project = {
     edit: 'Edit',
     delete: 'Delete',
     delete_confirm: 'Delete?',
-    submitted_success: 'Submitted Success',
-    running_execution: 'Running Execution',
-    ready_pause: 'Ready Pause',
-    pause: 'Pause',
-    ready_stop: 'Ready Stop',
-    stop: 'Stop',
-    failure: 'Failure',
-    success: 'Success',
-    need_fault_tolerance: 'Need Fault Tolerance',
-    kill: 'Kill',
-    waiting_thread: 'Waiting Thread',
-    waiting_depend: 'Waiting Depend',
-    delay_execution: 'Delay Execution',
-    forced_success: 'Forced Success',
     view_log: 'View Log',
     download_log: 'Download Log',
-    refresh: 'Refresh',
-    serial_wait: 'Serial Wait'
+    refresh: 'Refresh'
   },
   dag: {
     create: 'Create Workflow',

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

@@ -104,6 +104,7 @@ const home = {
   delay_execution: '延时执行',
   forced_success: '强制成功',
   serial_wait: '串行等待',
+  dispatch: '派发',
   ready_block: '准备阻断',
   block: '阻断'
 }
@@ -493,6 +494,7 @@ const project = {
     delay_execution: '延时执行',
     forced_success: '强制成功',
     serial_wait: '串行等待',
+    dispatch: '派发',
     executing: '正在执行',
     startup_type: '启动类型',
     complement_range: '补数范围',
@@ -557,24 +559,9 @@ const project = {
     edit: '编辑',
     delete: '删除',
     delete_confirm: '确定删除吗?',
-    submitted_success: '提交成功',
-    running_execution: '正在运行',
-    ready_pause: '准备暂停',
-    pause: '暂停',
-    ready_stop: '准备停止',
-    stop: '停止',
-    failure: '失败',
-    success: '成功',
-    need_fault_tolerance: '需要容错',
-    kill: 'KILL',
-    waiting_thread: '等待线程',
-    waiting_depend: '等待依赖完成',
-    delay_execution: '延时执行',
-    forced_success: '强制成功',
     view_log: '查看日志',
     download_log: '下载日志',
-    refresh: '刷新',
-    serial_wait: '串行等待'
+    refresh: '刷新'
   },
   dag: {
     create: '创建工作流',

dolphinscheduler-ui-next/src/utils/common.ts

@@ -30,7 +30,8 @@ import {
   StopFilled,
   StopOutlined,
   GlobalOutlined,
-  IssuesCloseOutlined
+  IssuesCloseOutlined,
+  SendOutlined
 } from '@vicons/antd'
 import { parseISO } from 'date-fns'
 import _ from 'lodash'
@@ -132,66 +133,10 @@ export const stateType = (t: any) => [
     value: '',
     label: `${t('project.workflow.all_status')}`
   },
-  {
-    value: 'SUBMITTED_SUCCESS',
-    label: `${t('project.workflow.submit_success')}`
-  },
-  {
-    value: 'RUNNING_EXECUTION',
-    label: `${t('project.workflow.running')}`
-  },
-  {
-    value: 'READY_PAUSE',
-    label: `${t('project.workflow.ready_to_pause')}`
-  },
-  {
-    value: 'PAUSE',
-    label: `${t('project.workflow.pause')}`
-  },
-  {
-    value: 'READY_STOP',
-    label: `${t('project.workflow.ready_to_stop')}`
-  },
-  {
-    value: 'STOP',
-    label: `${t('project.workflow.stop')}`
-  },
-  {
-    value: 'FAILURE',
-    label: `${t('project.workflow.failed')}`
-  },
-  {
-    value: 'SUCCESS',
-    label: `${t('project.workflow.success')}`
-  },
-  {
-    value: 'NEED_FAULT_TOLERANCE',
-    label: `${t('project.workflow.need_fault_tolerance')}`
-  },
-  {
-    value: 'KILL',
-    label: `${t('project.workflow.kill')}`
-  },
-  {
-    value: 'WAITING_THREAD',
-    label: `${t('project.workflow.waiting_for_thread')}`
-  },
-  {
-    value: 'WAITING_DEPEND',
-    label: `${t('project.workflow.waiting_for_dependency_to_complete')}`
-  },
-  {
-    value: 'DELAY_EXECUTION',
-    label: `${t('project.workflow.delay_execution')}`
-  },
-  {
-    value: 'FORCED_SUCCESS',
-    label: `${t('project.workflow.forced_success')}`
-  },
-  {
-    value: 'SERIAL_WAIT',
-    label: `${t('project.workflow.serial_wait')}`
-  }
+  ...Object.entries(tasksState(t)).map(([key, item]) => ({
+    value: key,
+    label: item.desc
+  }))
 ]
 
 /**
@@ -322,6 +267,14 @@ export const tasksState = (t: any): ITaskStateConfig => ({
     icon: Loading3QuartersOutlined,
     isSpin: true,
     classNames: 'serial_wait'
+  },
+  DISPATCH: {
+    id: 15,
+    desc: `${t('project.workflow.dispatch')}`,
+    color: '#5101be',
+    icon: SendOutlined,
+    isSpin: false,
+    classNames: 'dispatch'
   }
 })
 

dolphinscheduler-ui-next/src/utils/types.ts

@@ -32,6 +32,7 @@ export type ITaskState =
   | 'DELAY_EXECUTION'
   | 'FORCED_SUCCESS'
   | 'SERIAL_WAIT'
+  | 'DISPATCH'
 
 export type ITaskStateConfig = {
   [key in ITaskState]: {

dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx

@@ -32,6 +32,7 @@ import { useTable } from './use-table'
 import { useI18n } from 'vue-i18n'
 import Card from '@/components/card'
 import LogModal from './components/log-modal'
+import { stateType } from '@/utils/common'
 import styles from './index.module.scss'
 
 const TaskInstance = defineComponent({
@@ -126,44 +127,7 @@ const TaskInstance = defineComponent({
             <NSelect
               v-model={[this.stateType, 'value']}
               size='small'
-              options={[
-                {
-                  label: t('project.task.submitted_success'),
-                  value: 'SUBMITTED_SUCCESS'
-                },
-                {
-                  label: t('project.task.running_execution'),
-                  value: 'RUNNING_EXECUTION'
-                },
-                { label: t('project.task.ready_pause'), value: 'READY_PAUSE' },
-                { label: t('project.task.pause'), value: 'PAUSE' },
-                { label: t('project.task.ready_stop'), value: 'READY_STOP' },
-                { label: t('project.task.stop'), value: 'STOP' },
-                { label: t('project.task.failure'), value: 'FAILURE' },
-                { label: t('project.task.success'), value: 'SUCCESS' },
-                {
-                  label: t('project.task.need_fault_tolerance'),
-                  value: 'NEED_FAULT_TOLERANCE'
-                },
-                { label: t('project.task.kill'), value: 'KILL' },
-                {
-                  label: t('project.task.waiting_thread'),
-                  value: 'WAITING_THREAD'
-                },
-                {
-                  label: t('project.task.waiting_depend'),
-                  value: 'WAITING_DEPEND'
-                },
-                {
-                  label: t('project.task.delay_execution'),
-                  value: 'DELAY_EXECUTION'
-                },
-                {
-                  label: t('project.task.forced_success'),
-                  value: 'FORCED_SUCCESS'
-                },
-                { label: t('project.task.serial_wait'), value: 'SERIAL_WAIT' }
-              ]}
+              options={stateType(t).slice(1)}
               placeholder={t('project.task.state')}
               style={{ width: '180px' }}
               clearable

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -327,6 +327,8 @@ export function useTable() {
 }
 
 export function renderStateCell(state: ITaskState, t: Function) {
+  if (!state) return ''
+
   const stateOption = tasksState(t)[state]
 
   const Icon = h(

dolphinscheduler-ui-next/src/views/projects/workflow/definition/tree/index.tsx

@@ -27,7 +27,8 @@ import { Router, useRouter } from 'vue-router'
 import { viewTree } from '@/service/modules/process-definition'
 import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
 import { find } from 'lodash'
-import { ITaskTypeNodeOption } from './types'
+import { tasksState } from '@/utils/common'
+import type { ITaskTypeNodeOption } from './types'
 
 export default defineComponent({
   name: 'WorkflowDefinitionTiming',
@@ -136,67 +137,11 @@ export default defineComponent({
     ])
 
     const initTaskStateMap = () => {
-      taskStateMap.value = [
-        {
-          state: 'SUBMITTED_SUCCESS',
-          value: t('project.task.submitted_success'),
-          color: '#A9A9A9'
-        },
-        {
-          state: 'RUNNING_EXECUTION',
-          value: t('project.task.running_execution'),
-          color: '#4295DA'
-        },
-        {
-          state: 'READY_PAUSE',
-          value: t('project.task.ready_pause'),
-          color: '#50AEA3'
-        },
-        { state: 'PAUSE', value: t('project.task.pause'), color: '#367A72' },
-        {
-          state: 'READY_STOP',
-          value: t('project.task.ready_stop'),
-          color: '#E93424'
-        },
-        { state: 'STOP', value: t('project.task.stop'), color: '#D62E20' },
-        { state: 'FAILURE', value: t('project.task.failed'), color: '#000000' },
-        {
-          state: 'SUCCESS',
-          value: t('project.task.success'),
-          color: '#67C93B'
-        },
-        {
-          state: 'NEED_FAULT_TOLERANCE',
-          value: t('project.task.need_fault_tolerance'),
-          color: '#F09235'
-        },
-        { state: 'KILL', value: t('project.task.kill'), color: '#991F14' },
-        {
-          state: 'WAITING_THREAD',
-          value: t('project.task.waiting_thread'),
-          color: '#8635E4'
-        },
-        {
-          state: 'WAITING_DEPEND',
-          value: t('project.task.waiting_depend'),
-          color: '#4A0AB6'
-        },
-        {
-          state: 'DELAY_EXECUTION',
-          value: t('project.task.delay_execution'),
-          color: '#c5b4ec'
-        },
-        {
-          state: 'FORCED_SUCCESS',
-          value: t('project.task.forced_success'),
-          color: '#453463'
-        },
-        {
-          state: 'SERIAL_WAIT',
-          value: t('project.task.serial_wait'),
-          color: '#1b0446'
-        }
-      ]
+      taskStateMap.value = Object.entries(tasksState(t)).map(([key, item]) => ({
+        state: key,
+        value: item.desc,
+        color: item.color
+      }))
     }
 
     const initChartData = (node: any, newNode: any) => {