[Feature][UI Next] Add workflow instance dag node echo.

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

@@ -477,7 +477,10 @@ const project = {
     complement_range: 'Complement Range',
     parameters_variables: 'Parameters variables',
     global_parameters: 'Global parameters',
-    local_parameters: 'Local parameters'
+    local_parameters: 'Local parameters',
+    type: 'Type',
+    retry_count: 'Retry Count',
+    submit_time: 'Submit Time'
   },
   task: {
     task_name: 'Task Name',

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

@@ -475,7 +475,10 @@ const project = {
     complement_range: '补数范围',
     parameters_variables: '参数变量',
     global_parameters: '全局参数',
-    local_parameters: '局部参数'
+    local_parameters: '局部参数',
+    type: '类型',
+    retry_count: '重试次数',
+    submit_time: '提交时间'
   },
   task: {
     task_name: '任务名称',

dolphinscheduler-ui-next/src/service/modules/process-instances/index.ts

@@ -111,7 +111,7 @@ export function deleteProcessInstanceById(id: number, code: number): any {
   })
 }
 
-export function queryTaskListByProcessId(id: IdReq, code: CodeReq): any {
+export function queryTaskListByProcessId(id: number, code: number): any {
   return axios({
     url: `/projects/${code}/process-instances/${id}/tasks`,
     method: 'get'

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-hooks.ts

@@ -27,6 +27,7 @@ import { useGraphBackfill } from './use-graph-backfill'
 import { useDagDragAndDrop } from './use-dag-drag-drop'
 import { useTaskEdit } from './use-task-edit'
 import { useNodeMenu } from './use-node-menu'
+import { useNodeStatus } from './use-node-status'
 
 export {
   useCanvasInit,
@@ -40,5 +41,6 @@ export {
   useCellUpdate,
   useDagDragAndDrop,
   useTaskEdit,
-  useNodeMenu
+  useNodeMenu,
+  useNodeStatus
 }

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

@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+
+import { NTooltip, NSpin, NIcon } from 'naive-ui'
+import { defineComponent, PropType, h } from 'vue'
+import styles from './status.module.scss'
+
+const props = {
+  t: {
+    type: Object as PropType<any>,
+    require: true
+  },
+  taskInstance: {
+    type: Object as PropType<any>,
+    require: true
+  },
+  stateProps: {
+    type: Object as PropType<any>,
+    require: true
+  }
+}
+
+export default defineComponent({
+  name: 'dag-node-status',
+  props,
+  setup(props) {
+    const iconElement = h(
+      NIcon,
+      {
+        size: '20px'
+      },
+      {
+        default: () =>
+          h(props.stateProps.icon, {
+            color: props.stateProps.color
+          })
+      }
+    )
+    return {
+      iconElement
+    }
+  },
+  render() {
+    return (
+      <NTooltip placement='top'>
+        {{
+          trigger: () => {
+            if (this.stateProps.isSpin) {
+              return h(
+                NSpin,
+                {
+                  small: 'small'
+                },
+                {
+                  icon: () => this.iconElement
+                }
+              )
+            } else {
+              return this.iconElement
+            }
+          },
+          default: () => (
+            <ul class={styles['status-info']}>
+              <li>
+                {this.$props.t('project.workflow.name')}:{' '}
+                {this.taskInstance.name}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.status')}:{' '}
+                {this.stateProps.desc}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.type')}:{' '}
+                {this.taskInstance.taskType}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.host')}:{' '}
+                {this.taskInstance.host || '-'}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.retry_count')}:{' '}
+                {this.taskInstance.retryTimes}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.submit_time')}:{' '}
+                {this.taskInstance.submitTime}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.start_time')}:{' '}
+                {this.taskInstance.startTime}
+              </li>
+              <li>
+                {this.$props.t('project.workflow.end_time')}:{' '}
+                {this.taskInstance.endTime ? this.taskInstance.endTime : '-'}
+              </li>
+            </ul>
+          )
+        }}
+      </NTooltip>
+    )
+  }
+})

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -16,7 +16,15 @@
  */
 
 import type { Graph } from '@antv/x6'
-import { defineComponent, ref, provide, PropType, toRef } from 'vue'
+import {
+  defineComponent,
+  ref,
+  provide,
+  PropType,
+  toRef,
+  onMounted,
+  watch
+} from 'vue'
 import DagToolbar from './dag-toolbar'
 import DagCanvas from './dag-canvas'
 import DagSidebar from './dag-sidebar'
@@ -28,7 +36,8 @@ import {
   useDagDragAndDrop,
   useTaskEdit,
   useBusinessMapper,
-  useNodeMenu
+  useNodeMenu,
+  useNodeStatus
 } from './dag-hooks'
 import { useThemeStore } from '@/store/theme/theme'
 import VersionModal from '../../definition/components/version-modal'
@@ -108,6 +117,8 @@ export default defineComponent({
       graph
     })
 
+    const { refreshTaskStatus } = useNodeStatus({ graph })
+
     const { onDragStart, onDrop } = useDagDragAndDrop({
       graph,
       readonly: toRef(props, 'readonly'),
@@ -155,6 +166,15 @@ export default defineComponent({
       saveModelToggle(false)
     }
 
+    onMounted(() => {
+      refreshTaskStatus()
+    })
+
+    watch(
+      () => props.definition,
+      () => refreshTaskStatus()
+    )
+
     return () => (
       <div
         class={[

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/status.module.scss

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+ .status-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  font-size: 18px;
+}
+
+.status-info {
+  margin-bottom: 0;
+  list-style: none;
+  padding-left: 10px;
+  li {
+    margin-bottom: 5px;
+  }
+}

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

@@ -0,0 +1,81 @@
+/*
+ * 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.
+ */
+
+import type { Ref } from 'vue'
+import { render, h } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import type { Graph } from '@antv/x6'
+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'
+
+interface Options {
+  graph: Ref<Graph | undefined>
+}
+
+/**
+ * Node status and tooltip
+ */
+export function useNodeStatus(options: Options) {
+  const { graph } = options
+  const route = useRoute()
+
+  const { t } = useI18n()
+
+  const setNodeStatus = (code: string, state: string, taskInstance: any) => {
+    const stateProps = tasksState(t)[state]
+    const node = graph.value?.getCellById(code)
+    if (node) {
+      // Destroy the previous dom
+      node.removeMarkup()
+      node.setMarkup(NODE.markup.concat(NODE_STATUS_MARKUP))
+      const nodeView = graph.value?.findViewByCell(node)
+      const el = nodeView?.find('div')[0]
+      const a = h(NodeStatus, {
+        t,
+        taskInstance,
+        stateProps
+      })
+
+      render(a, el as HTMLElement)
+    }
+  }
+
+  /**
+   * Task status
+   */
+  const refreshTaskStatus = () => {
+    const projectCode = Number(route.params.projectCode)
+    const instanceId = Number(route.params.id)
+
+    queryTaskListByProcessId(instanceId, projectCode).then((res: any) => {
+      window.$message.success(t('project.workflow.success'))
+      const { taskList } = res
+      if (taskList) {
+        taskList.forEach((taskInstance: any) => {
+          setNodeStatus(taskInstance.taskCode, taskInstance.state, taskInstance)
+        })
+      }
+    })
+  }
+
+  return {
+    refreshTaskStatus
+  }
+}