[Fix][UI Next][V1.0.0-Alpha] Fix the state column of task instance ta… (#8987)

* [Fix][UI Next][V1.0.0-Alpha] Fix the state column of task instance table displays error.

* [Fix][UI Next][V1.0.0-Alpha] Remove unused vars.

* [Fix][UI Next][V1.0.0-Alpha] Add class for the state icon for e2e in task instance table and workflow instance.

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

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { ITaskState } from '@/utils/types'
 
 interface CodeReq {
   projectCode: number
@@ -85,7 +86,7 @@ interface ProcessInstanceReq {
 interface IWorkflowInstance {
   id: number
   name: string
-  state: string
+  state: ITaskState
   commandType: string
   scheduleTime?: string
   processDefinitionCode?: number

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

@@ -34,7 +34,7 @@ import {
 } from '@vicons/antd'
 import { parseISO } from 'date-fns'
 import _ from 'lodash'
-import { ITaskState } from './types'
+import { ITaskStateConfig } from './types'
 
 /**
  * Intelligent display kb m
@@ -202,15 +202,14 @@ export const stateType = (t: any) => [
  * @icon icon
  * @isSpin is loading (Need to execute the code block to write if judgment)
  */
-// TODO: Looking for a more suitable icon
-export const tasksState = (t: any): ITaskState => ({
+export const tasksState = (t: any): ITaskStateConfig => ({
   SUBMITTED_SUCCESS: {
     id: 0,
     desc: `${t('project.workflow.submit_success')}`,
     color: '#A9A9A9',
     icon: IssuesCloseOutlined,
     isSpin: false,
-    classNames: 'submitted'
+    classNames: 'submitted_success'
   },
   RUNNING_EXECUTION: {
     id: 1,
@@ -218,7 +217,7 @@ export const tasksState = (t: any): ITaskState => ({
     color: '#0097e0',
     icon: SettingFilled,
     isSpin: true,
-    classNames: 'executing'
+    classNames: 'running_execution'
   },
   READY_PAUSE: {
     id: 2,
@@ -226,7 +225,7 @@ export const tasksState = (t: any): ITaskState => ({
     color: '#07b1a3',
     icon: SettingOutlined,
     isSpin: false,
-    classNames: 'submitted'
+    classNames: 'ready_pause'
   },
   PAUSE: {
     id: 3,
@@ -241,14 +240,16 @@ export const tasksState = (t: any): ITaskState => ({
     desc: `${t('project.workflow.ready_to_stop')}`,
     color: '#FE0402',
     icon: StopFilled,
-    isSpin: false
+    isSpin: false,
+    classNames: 'ready_stop'
   },
   STOP: {
     id: 5,
     desc: `${t('project.workflow.stop')}`,
     color: '#e90101',
     icon: StopOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'stop'
   },
   FAILURE: {
     id: 6,
@@ -271,49 +272,56 @@ export const tasksState = (t: any): ITaskState => ({
     desc: `${t('project.workflow.need_fault_tolerance')}`,
     color: '#FF8C00',
     icon: EditOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'need_fault_tolerance'
   },
   KILL: {
     id: 9,
     desc: `${t('project.workflow.kill')}`,
     color: '#a70202',
     icon: MinusCircleOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'kill'
   },
   WAITING_THREAD: {
     id: 10,
     desc: `${t('project.workflow.waiting_for_thread')}`,
     color: '#912eed',
     icon: ClockCircleOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'waiting_thread'
   },
   WAITING_DEPEND: {
     id: 11,
     desc: `${t('project.workflow.waiting_for_dependence')}`,
     color: '#5101be',
     icon: GlobalOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'waiting_depend'
   },
   DELAY_EXECUTION: {
     id: 12,
     desc: `${t('project.workflow.delay_execution')}`,
     color: '#5102ce',
     icon: PauseCircleFilled,
-    isSpin: false
+    isSpin: false,
+    classNames: 'delay_execution'
   },
   FORCED_SUCCESS: {
     id: 13,
     desc: `${t('project.workflow.forced_success')}`,
     color: '#5102ce',
     icon: CheckCircleFilled,
-    isSpin: false
+    isSpin: false,
+    classNames: 'forced_success'
   },
   SERIAL_WAIT: {
     id: 14,
     desc: `${t('project.workflow.serial_wait')}`,
     color: '#5102ce',
     icon: LoadingOutlined,
-    isSpin: false
+    isSpin: false,
+    classNames: 'serial_wait'
   }
 })
 

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

@@ -14,9 +14,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Component } from 'vue'
 
-interface ITaskState {
-  [key: string]: any
-}
+export type ITaskState =
+  | 'SUBMITTED_SUCCESS'
+  | 'RUNNING_EXECUTION'
+  | 'READY_PAUSE'
+  | 'PAUSE'
+  | 'READY_STOP'
+  | 'STOP'
+  | 'FAILURE'
+  | 'SUCCESS'
+  | 'NEED_FAULT_TOLERANCE'
+  | 'KILL'
+  | 'WAITING_THREAD'
+  | 'WAITING_DEPEND'
+  | 'DELAY_EXECUTION'
+  | 'FORCED_SUCCESS'
+  | 'SERIAL_WAIT'
 
-export { ITaskState }
+export type ITaskStateConfig = {
+  [key in ITaskState]: {
+    id: number
+    desc: string
+    color: string
+    icon: Component
+    isSpin: boolean
+    classNames?: string
+  }
+}

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { ITaskState } from '@/utils/types'
+
+export type { Router } from 'vue-router'
+export type { TaskInstancesRes } from '@/service/modules/task-instances/types'
+
+interface IRecord {
+  name: string
+  processInstanceName: string
+  executorName: string
+  taskType: string
+  state: ITaskState
+  submitTime: string
+  startTime: string
+  endTime: string
+  duration?: string
+  retryTimes: number
+  dryRun: number
+  host: string
+}
+
+export { ITaskState, IRecord }

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

@@ -23,7 +23,7 @@ import {
   forceSuccess,
   downloadLog
 } from '@/service/modules/task-instances'
-import { NButton, NIcon, NSpace, NTooltip } from 'naive-ui'
+import { NButton, NIcon, NSpace, NTooltip, NSpin } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
 import {
   AlignLeftOutlined,
@@ -32,9 +32,8 @@ import {
 } from '@vicons/antd'
 import { format } from 'date-fns'
 import { useRoute, useRouter } from 'vue-router'
-import { parseTime } from '@/utils/common'
-import type { Router } from 'vue-router'
-import type { TaskInstancesRes } from '@/service/modules/task-instances/types'
+import { parseTime, tasksState } from '@/utils/common'
+import type { Router, TaskInstancesRes, IRecord, ITaskState } from './types'
 
 export function useTable() {
   const { t } = useI18n()
@@ -45,7 +44,7 @@ export function useTable() {
 
   const variables = reactive({
     columns: [],
-    tableData: [],
+    tableData: [] as IRecord[],
     page: ref(1),
     pageSize: ref(10),
     searchVal: ref(null),
@@ -102,7 +101,8 @@ export function useTable() {
       },
       {
         title: t('project.task.state'),
-        key: 'state'
+        key: 'state',
+        render: (row: IRecord) => renderStateCell(row.state, t)
       },
       {
         title: t('project.task.submit_time'),
@@ -303,3 +303,24 @@ export function useTable() {
     createColumns
   }
 }
+
+export function renderStateCell(state: ITaskState, t: Function) {
+  const stateOption = tasksState(t)[state]
+
+  const Icon = h(
+    NIcon,
+    {
+      color: stateOption.color,
+      size: 18,
+      class: stateOption.classNames
+    },
+    () => h(stateOption.icon)
+  )
+  return h(NTooltip, null, {
+    trigger: () => {
+      if (!stateOption.isSpin) return Icon
+      return h(NSpin, { size: 'small' }, { icon: () => Icon })
+    },
+    default: () => stateOption.desc
+  })
+}

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

@@ -16,6 +16,7 @@
  */
 
 import { TaskType } from '@/views/projects/task/constants/task-type'
+export type { ITaskState } from '@/utils/types'
 
 export interface ProcessDefinition {
   id: number

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

@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
-import type { Ref } from 'vue'
 import { render, h, ref } 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'
-import { IWorkflowTaskInstance } from './types'
+import type { IWorkflowTaskInstance, ITaskState } from './types'
+import type { Graph } from '@antv/x6'
+import type { Ref } from 'vue'
 
 interface Options {
   graph: Ref<Graph | undefined>
@@ -40,7 +40,11 @@ export function useNodeStatus(options: Options) {
 
   const { t } = useI18n()
 
-  const setNodeStatus = (code: string, state: string, taskInstance: any) => {
+  const setNodeStatus = (
+    code: string,
+    state: ITaskState,
+    taskInstance: any
+  ) => {
     const stateProps = tasksState(t)[state]
     const node = graph.value?.getCellById(code)
     if (node) {

dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx

@@ -23,7 +23,7 @@ import initChart from '@/components/chart'
 import { tasksState } from '@/utils/common'
 import { format } from 'date-fns'
 import { parseTime } from '@/utils/common'
-import { ISeriesData } from '../type'
+import type { ISeriesData, ITaskState } from '../type'
 
 const props = {
   height: {
@@ -58,12 +58,12 @@ const GanttChart = defineComponent({
     const series = Object.keys(state).map((key) => ({
       id: key,
       type: 'custom',
-      name: state[key].desc,
+      name: state[key as ITaskState].desc,
       renderItem: renderItem,
       itemStyle: {
         opacity: 0.8,
-        color: state[key].color,
-        color0: state[key].color
+        color: state[key as ITaskState].color,
+        color0: state[key as ITaskState].color
       },
       encode: {
         x: [1, 2],
@@ -85,7 +85,7 @@ const GanttChart = defineComponent({
           task.endDate[0] - task.startDate[0]
         ],
         itemStyle: {
-          color: state[task.status].color
+          color: state[task.status as ITaskState].color
         }
       })
     })
@@ -137,7 +137,7 @@ const GanttChart = defineComponent({
             (item) => item.taskName === taskName
           )
           let str = `taskName : ${taskName}</br>`
-          str += `status : ${state[data[0].status].desc} (${
+          str += `status : ${state[data[0].status as ITaskState].desc} (${
             data[0].status
           })</br>`
           str += `startTime : ${data[0].isoStart}</br>`

dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ITaskState } from '@/utils/types'
 
 interface ITask {
   taskName: string
@@ -36,4 +37,4 @@ interface ISeriesData {
   [taskState: string]: Array<any>
 }
 
-export { ITask, IGanttRes, ISeriesData }
+export { ITask, IGanttRes, ISeriesData, ITaskState }

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

@@ -20,8 +20,6 @@ import { format } from 'date-fns'
 import { reactive, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import type { Router } from 'vue-router'
-import { NTooltip, NIcon, NSpin } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
 import { RowKey } from 'naive-ui/lib/data-table/src/interface'
 import {
@@ -31,19 +29,19 @@ import {
 } from '@/service/modules/process-instances'
 import { execute } from '@/service/modules/executors'
 import TableAction from './components/table-action'
-import { runningType, tasksState } from '@/utils/common'
-import { IWorkflowInstance } from '@/service/modules/process-instances/types'
-import { ICountDownParam } from './types'
-import { ExecuteReq } from '@/service/modules/executors/types'
+import { runningType } from '@/utils/common'
 import { parseTime } from '@/utils/common'
 import styles from './index.module.scss'
+import { renderStateCell } from '../../task/instance/use-table'
+import type { Router } from 'vue-router'
+import type { IWorkflowInstance } from '@/service/modules/process-instances/types'
+import type { ICountDownParam } from './types'
+import type { ExecuteReq } from '@/service/modules/executors/types'
 
 export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
 
-  const taskStateIcon = tasksState(t)
-
   const variables = reactive({
     columns: [],
     checkedRowKeys: [] as Array<RowKey>,
@@ -95,45 +93,7 @@ export function useTable() {
         title: t('project.workflow.status'),
         key: 'state',
         className: 'workflow-status',
-        render: (_row: IWorkflowInstance) => {
-          const stateIcon = taskStateIcon[_row.state]
-          const iconElement = h(
-            NIcon,
-            {
-              size: '18px',
-              style: 'position: relative; top: 7.5px; left: 7.5px',
-              class: stateIcon.classNames
-            },
-            {
-              default: () =>
-                h(stateIcon.icon, {
-                  color: stateIcon.color
-                })
-            }
-          )
-          return h(
-            NTooltip,
-            {},
-            {
-              trigger: () => {
-                if (stateIcon.isSpin) {
-                  return h(
-                    NSpin,
-                    {
-                      small: 'small'
-                    },
-                    {
-                      icon: () => iconElement
-                    }
-                  )
-                } else {
-                  return iconElement
-                }
-              },
-              default: () => stateIcon!.desc
-            }
-          )
-        }
+        render: (_row: IWorkflowInstance) => renderStateCell(_row.state, t)
       },
       {
         title: t('project.workflow.run_type'),