[Feature][UI][V1.0.0-Beta] Add dependent task status in dependent task. (#9663)

* [Feature][UI][V1.0.0-Beta] Add dependent task status in dependent task.

* [Fix][UI][V1.0.0-Beta] Format back end data.

dolphinscheduler-ui-next/src/store/project/task-node.ts

@@ -22,7 +22,9 @@ import type {
   IOption,
   IResource,
   ProgramType,
-  IMainJar
+  IMainJar,
+  DependentResultType,
+  BDependentResultType
 } from './types'
 
 export const useTaskNodeStore = defineStore({
@@ -33,7 +35,8 @@ export const useTaskNodeStore = defineStore({
     preTasks: [],
     resources: [],
     mainJars: {},
-    name: ''
+    name: '',
+    dependentResult: {}
   }),
   persist: true,
   getters: {
@@ -54,6 +57,9 @@ export const useTaskNodeStore = defineStore({
     },
     getName(): string {
       return this.name
+    },
+    getDependentResult(): DependentResultType {
+      return this.dependentResult
     }
   },
   actions: {
@@ -123,6 +129,13 @@ export const useTaskNodeStore = defineStore({
     updateName(name: string) {
       this.name = name
     },
+    updateDependentResult(dependentResult: BDependentResultType) {
+      const result = {} as DependentResultType
+      for (let [key, value] of Object.entries(dependentResult)) {
+        result[key] = value === 'FAILED' ? 'FAILURE' : value
+      }
+      this.dependentResult = result
+    },
     init() {
       this.preTaskOptions = []
       this.postTaskOptions = []

dolphinscheduler-ui-next/src/store/project/types.ts

@@ -19,6 +19,12 @@ import type { EditWorkflowDefinition } from '@/views/projects/workflow/component
 import type { IOption } from '@/components/form/types'
 
 type ProgramType = 'JAVA' | 'SCALA' | 'PYTHON'
+type DependentResultType = {
+  [key: string]: 'SUCCESS' | 'WAITING_THREAD' | 'FAILURE'
+}
+type BDependentResultType = {
+  [key: string]: 'SUCCESS' | 'WAITING_THREAD' | 'FAILED'
+}
 
 interface IResource {
   id: number
@@ -37,6 +43,7 @@ interface TaskNodeState {
   resources: IResource[]
   mainJars: { [key in ProgramType]?: IMainJar[] }
   name: string
+  dependentResult: DependentResultType
 }
 export {
   TaskNodeState,
@@ -44,5 +51,7 @@ export {
   IOption,
   IResource,
   ProgramType,
+  DependentResultType,
+  BDependentResultType,
   IMainJar
 }

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

@@ -15,18 +15,32 @@
  * limitations under the License.
  */
 
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, h } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { NIcon } from 'naive-ui'
 import { useRelationCustomParams, useDependentTimeout } from '.'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import { queryAllProjectList } from '@/service/modules/projects'
+import { tasksState } from '@/utils/common'
 import {
   queryProcessDefinitionList,
   getTasksByDefinitionList
 } from '@/service/modules/process-definition'
-import type { IJsonItem, IDependpendItem, IDependTask } from '../types'
+import { Router, useRouter } from 'vue-router'
+import type {
+  IJsonItem,
+  IDependpendItem,
+  IDependTask,
+  ITaskState
+} from '../types'
 
 export function useDependent(model: { [field: string]: any }): IJsonItem[] {
   const { t } = useI18n()
+  const router: Router = useRouter()
+  const nodeStore = useTaskNodeStore()
+
+  const dependentResult = nodeStore.getDependentResult
+  const TasksStateConfig = tasksState(t)
   const projectList = ref([] as { label: string; value: number }[])
   const processCache = {} as {
     [key: number]: { label: string; value: number }[]
@@ -199,6 +213,21 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
     return taskList
   }
 
+  const renderState = (item: {
+    definitionCode: number
+    depTaskCode: number
+    cycle: string
+    dateValue: string
+  }) => {
+    if (!item || router.currentRoute.value.name !== 'workflow-instance-detail')
+      return null
+    const key = `${item.definitionCode}-${item.depTaskCode}-${item.cycle}-${item.dateValue}`
+    const state: ITaskState = dependentResult[key] || 'WAITING_THREAD'
+    return h(NIcon, { size: 24, color: TasksStateConfig[state].color }, () =>
+      h(TasksStateConfig[state].icon)
+    )
+  }
+
   onMounted(() => {
     getProjectList()
   })
@@ -306,6 +335,13 @@ export function useDependent(model: { [field: string]: any }): IJsonItem[] {
             name: ' ',
             options:
               model.dependTaskList[i]?.dependItemList[j]?.dateOptions || []
+          }),
+          (j = 0) => ({
+            type: 'custom',
+            field: 'state',
+            span: 2,
+            name: ' ',
+            widget: renderState(model.dependTaskList[i]?.dependItemList[j])
           })
         ]
       }),

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

@@ -31,6 +31,7 @@ export type {
   WorkflowInstance
 } from '@/views/projects/workflow/components/dag/types'
 export type { IResource, ProgramType, IMainJar } from '@/store/project/types'
+export type { ITaskState } from '@/utils/types'
 
 type SourceType = 'MYSQL' | 'HDFS' | 'HIVE'
 type ModelType = 'import' | 'export'

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts

@@ -22,6 +22,7 @@ import { tasksState } from '@/utils/common'
 import { NODE, NODE_STATUS_MARKUP } from './dag-config'
 import { queryTaskListByProcessId } from '@/service/modules/process-instances'
 import NodeStatus from '@/views/projects/workflow/components/dag/dag-node-status'
+import { useTaskNodeStore } from '@/store/project/task-node'
 import type { IWorkflowTaskInstance, ITaskState } from './types'
 import type { Graph } from '@antv/x6'
 import type { Ref } from 'vue'
@@ -40,6 +41,8 @@ export function useNodeStatus(options: Options) {
 
   const { t } = useI18n()
 
+  const nodeStore = useTaskNodeStore()
+
   const setNodeStatus = (
     code: string,
     state: ITaskState,
@@ -76,6 +79,9 @@ export function useNodeStatus(options: Options) {
       if (taskList.value) {
         taskList.value.forEach((taskInstance: any) => {
           setNodeStatus(taskInstance.taskCode, taskInstance.state, taskInstance)
+          nodeStore.updateDependentResult(
+            JSON.parse(taskInstance.dependentResult)
+          )
         })
       }
     })