From 85b2352abf868f55bdc3f38e33374c0ae927d535 Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Fri, 18 Mar 2022 21:10:18 +0800 Subject: [PATCH] =?UTF-8?q?[Fix][UI=20Next][V1.0.0-Alpha]=20Fix=20the=20st?= =?UTF-8?q?ate=20column=20of=20task=20instance=20ta=E2=80=A6=20(#8987)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [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. --- .../modules/process-instances/types.ts | 3 +- dolphinscheduler-ui-next/src/utils/common.ts | 38 +++++++------ dolphinscheduler-ui-next/src/utils/types.ts | 31 +++++++++-- .../src/views/projects/task/instance/types.ts | 37 +++++++++++++ .../views/projects/task/instance/use-table.ts | 33 +++++++++--- .../projects/workflow/components/dag/types.ts | 1 + .../components/dag/use-node-status.ts | 12 +++-- .../instance/gantt/components/gantt-chart.tsx | 12 ++--- .../projects/workflow/instance/gantt/type.ts | 3 +- .../projects/workflow/instance/use-table.ts | 54 +++---------------- 10 files changed, 140 insertions(+), 84 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts diff --git a/dolphinscheduler-ui-next/src/service/modules/process-instances/types.ts b/dolphinscheduler-ui-next/src/service/modules/process-instances/types.ts index e79ab9f221..39b3568384 100644 --- a/dolphinscheduler-ui-next/src/service/modules/process-instances/types.ts +++ b/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 diff --git a/dolphinscheduler-ui-next/src/utils/common.ts b/dolphinscheduler-ui-next/src/utils/common.ts index f328dbb4f3..b4f8a1bab6 100644 --- a/dolphinscheduler-ui-next/src/utils/common.ts +++ b/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' } }) diff --git a/dolphinscheduler-ui-next/src/utils/types.ts b/dolphinscheduler-ui-next/src/utils/types.ts index 194e1e5764..d36c071b8b 100644 --- a/dolphinscheduler-ui-next/src/utils/types.ts +++ b/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 + } +} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts b/dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts new file mode 100644 index 0000000000..5e58245cbf --- /dev/null +++ b/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 } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts index bc10d21202..6bebea9055 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts +++ b/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 + }) +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts index c823f69c85..6dbabd6045 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts +++ b/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 diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts index 034a281c32..2dc7b19b5c 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts +++ b/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 @@ -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) { diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx index f4785b6ce3..3529f708c6 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/components/gantt-chart.tsx +++ b/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}
` - str += `status : ${state[data[0].status].desc} (${ + str += `status : ${state[data[0].status as ITaskState].desc} (${ data[0].status })
` str += `startTime : ${data[0].isoStart}
` diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts index 24068b5ca9..47a756bfbc 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts +++ b/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 } -export { ITask, IGanttRes, ISeriesData } +export { ITask, IGanttRes, ISeriesData, ITaskState } diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts index a3fe5f0412..8aafe1d6c8 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts +++ b/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, @@ -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'),