You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/03/18 13:10:25 UTC
[dolphinscheduler] branch dev updated: [Fix][UI Next][V1.0.0-Alpha] Fix the state column of task instance ta… (#8987)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 85b2352 [Fix][UI Next][V1.0.0-Alpha] Fix the state column of task instance ta… (#8987)
85b2352 is described below
commit 85b2352abf868f55bdc3f38e33374c0ae927d535
Author: Amy0104 <97...@users.noreply.github.com>
AuthorDate: Fri Mar 18 21:10:18 2022 +0800
[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.
---
.../src/service/modules/process-instances/types.ts | 3 +-
dolphinscheduler-ui-next/src/utils/common.ts | 38 +++++++++------
dolphinscheduler-ui-next/src/utils/types.ts | 31 +++++++++++--
.../gantt/type.ts => task/instance/types.ts} | 36 +++++++--------
.../src/views/projects/task/instance/use-table.ts | 33 ++++++++++---
.../projects/workflow/components/dag/types.ts | 1 +
.../workflow/components/dag/use-node-status.ts | 12 +++--
.../instance/gantt/components/gantt-chart.tsx | 12 ++---
.../views/projects/workflow/instance/gantt/type.ts | 3 +-
.../views/projects/workflow/instance/use-table.ts | 54 +++-------------------
10 files changed, 120 insertions(+), 103 deletions(-)
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 e79ab9f..39b3568 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 f328dbb..b4f8a1b 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 194e1e5..d36c071 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/workflow/instance/gantt/type.ts b/dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts
similarity index 64%
copy from dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts
copy to dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts
index 24068b5..5e58245 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/gantt/type.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/types.ts
@@ -14,26 +14,24 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import { ITaskState } from '@/utils/types'
-interface ITask {
- taskName: string
- startDate: Array<number>
- endDate: Array<number>
- isoStart: string
- isoEnd: string
- status: string
- duration: string
-}
-
-interface IGanttRes {
- height: number
- taskNames: Array<number>
- taskStatus: Object
- tasks: Array<ITask>
-}
+export type { Router } from 'vue-router'
+export type { TaskInstancesRes } from '@/service/modules/task-instances/types'
-interface ISeriesData {
- [taskState: string]: Array<any>
+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 { ITask, IGanttRes, ISeriesData }
+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 bc10d21..6bebea9 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 c823f69..6dbabd6 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 034a281..2dc7b19 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<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) {
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 f4785b6..3529f70 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}</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>`
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 24068b5..47a756b 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<any>
}
-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 a3fe5f0..8aafe1d 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<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'),