From 03ff78fdcba908f93e4a4b51b106e14a5fc39b5b Mon Sep 17 00:00:00 2001 From: calvin Date: Thu, 18 May 2023 19:47:02 +0800 Subject: [PATCH] [Improvement-14112][UI] Add a quick link to visit workflow instances of the current workflow. (#14134) --- .../src/common/column-width-config.ts | 5 +- .../src/locales/en_US/project.ts | 1 + .../src/locales/zh_CN/project.ts | 1 + .../projects/workflow/definition/use-table.ts | 33 ++++++++++- .../components/process-instance-condition.tsx | 56 +++++++++++++++++-- .../projects/workflow/instance/index.tsx | 2 + .../views/projects/workflow/instance/types.ts | 1 + .../projects/workflow/instance/use-table.ts | 55 ++++++++++-------- 8 files changed, 124 insertions(+), 30 deletions(-) diff --git a/dolphinscheduler-ui/src/common/column-width-config.ts b/dolphinscheduler-ui/src/common/column-width-config.ts index 7c40ba8840..e291c87c88 100644 --- a/dolphinscheduler-ui/src/common/column-width-config.ts +++ b/dolphinscheduler-ui/src/common/column-width-config.ts @@ -102,7 +102,10 @@ export const COLUMN_WIDTH_CONFIG = { width: 20 }, copy: { - width: 50 + width: 35 + }, + instances: { + width: 40 } } diff --git a/dolphinscheduler-ui/src/locales/en_US/project.ts b/dolphinscheduler-ui/src/locales/en_US/project.ts index 09dbd1156b..5e2ac96f73 100644 --- a/dolphinscheduler-ui/src/locales/en_US/project.ts +++ b/dolphinscheduler-ui/src/locales/en_US/project.ts @@ -81,6 +81,7 @@ export default { down_line: 'Offline', copy_workflow: 'Copy Workflow', copy_workflow_name: 'Copy workflow name', + visit_workflow_instances: 'Visit workflow instances', cron_manage: 'Cron manage', delete: 'Delete', tree_view: 'Tree View', diff --git a/dolphinscheduler-ui/src/locales/zh_CN/project.ts b/dolphinscheduler-ui/src/locales/zh_CN/project.ts index b0c780386a..f3ceae327a 100644 --- a/dolphinscheduler-ui/src/locales/zh_CN/project.ts +++ b/dolphinscheduler-ui/src/locales/zh_CN/project.ts @@ -83,6 +83,7 @@ export default { down_line: '下线', copy_workflow: '复制工作流', copy_workflow_name: '复制工作流名称', + visit_workflow_instances: '查看工作流实例', cron_manage: '定时管理', delete: '删除', tree_view: '工作流树形图', diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts index f177692fd1..85eb5cc19a 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts @@ -32,7 +32,7 @@ import { import TableAction from './components/table-action' import styles from './index.module.scss' import { NTag, NSpace, NIcon, NButton, NEllipsis, NTooltip } from 'naive-ui' -import { CopyOutlined } from '@vicons/antd' +import { CopyOutlined, UnorderedListOutlined } from '@vicons/antd' import ButtonLink from '@/components/button-link' import { COLUMN_WIDTH_CONFIG, @@ -84,7 +84,7 @@ export function useTable() { key: 'name', className: 'workflow-name', ...COLUMN_WIDTH_CONFIG['name'], - titleColSpan: 2, + titleColSpan: 3, resizable: true, width: 300, minWidth: 300, @@ -145,6 +145,35 @@ export function useTable() { default: () => t('project.workflow.copy_workflow_name') }) }, + { + title: 'Instances', + key: 'instances', + ...COLUMN_WIDTH_CONFIG['instances'], + render: (row) => + h(NTooltip, null, { + trigger: () => + h( + NButton, + { + quaternary: true, + circle: true, + type: 'info', + size: 'tiny', + onClick: () => { + void router.push({ + name: 'workflow-instance-list', + query: { processDefineCode: row.code } + }) + } + }, + { + icon: () => + h(NIcon, { size: 18 }, () => h(UnorderedListOutlined)) + } + ), + default: () => t('project.workflow.visit_workflow_instances') + }) + }, { title: t('project.workflow.status'), key: 'releaseState', diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx index 8d4da73630..942898cb5e 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx +++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx @@ -16,21 +16,58 @@ */ import { SearchOutlined } from '@vicons/antd' -import { NInput, NButton, NDatePicker, NSelect, NIcon, NSpace } from 'naive-ui' -import { defineComponent, getCurrentInstance, ref } from 'vue' +import { + NInput, + NButton, + NDatePicker, + NSelect, + NIcon, + NSpace, + NEllipsis +} from 'naive-ui' +import { defineComponent, getCurrentInstance, h, ref } from 'vue' import { useI18n } from 'vue-i18n' import { format } from 'date-fns' import { workflowExecutionStateType } from '@/common/common' +import { queryProcessDefinitionList } from '@/service/modules/process-definition' +import { SelectMixedOption } from 'naive-ui/lib/select/src/interface' +import { Router, useRouter } from 'vue-router' export default defineComponent({ name: 'ProcessInstanceCondition', emits: ['handleSearch'], setup(props, ctx) { + const router: Router = useRouter() + const searchValRef = ref('') const executorNameRef = ref('') const hostRef = ref('') const stateTypeRef = ref('') const startEndTimeRef = ref() + const projectCode = ref( + Number(router.currentRoute.value.params.projectCode) + ) + const processDefineCodeRef = router.currentRoute.value.query + .processDefineCode + ? ref(Number(router.currentRoute.value.query.processDefineCode)) + : ref() + + const processDefinitionOptions = ref>([]) + + const initProcessList = (code: number) => { + queryProcessDefinitionList(code).then((result: any) => { + result.map((item: { code: number; name: string }) => { + const option: SelectMixedOption = { + value: item.code, + label: () => h(NEllipsis, null, item.name), + filterLabel: item.name + } + processDefinitionOptions.value.push(option) + }) + }) + } + + initProcessList(projectCode.value) const handleSearch = () => { let startDate = '' @@ -52,7 +89,8 @@ export default defineComponent({ host: hostRef.value, stateType: stateTypeRef.value, startDate, - endDate + endDate, + processDefineCode: processDefineCodeRef.value }) } @@ -83,7 +121,9 @@ export default defineComponent({ onClearSearchVal, onClearSearchExecutor, onClearSearchHost, - trim + trim, + processDefinitionOptions, + processDefineCodeRef } }, render() { @@ -92,6 +132,14 @@ export default defineComponent({ return ( + { + variables.processDefineCode = params.processDefineCode variables.searchVal = params.searchVal variables.executorName = params.executorName variables.host = params.host @@ -49,6 +50,7 @@ export default defineComponent({ variables.startDate = params.startDate variables.endDate = params.endDate variables.page = 1 + requestData() } diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/types.ts b/dolphinscheduler-ui/src/views/projects/workflow/instance/types.ts index 81894f92cf..57b9d0b0ec 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/instance/types.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/types.ts @@ -29,6 +29,7 @@ interface IWorkflowInstanceSearch { stateType: string startDate: string endDate: string + processDefineCode: number } export { ICountDownParam, IWorkflowInstanceSearch } diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts index 73f8b0e103..2eee813e8e 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts @@ -21,7 +21,7 @@ import { useI18n } from 'vue-i18n' import { useRouter } from 'vue-router' import ButtonLink from '@/components/button-link' import { RowKey } from 'naive-ui/lib/data-table/src/interface' -import {NEllipsis, NIcon, NSpin, NTooltip} from 'naive-ui' +import { NEllipsis, NIcon, NSpin, NTooltip } from 'naive-ui' import { queryProcessInstanceListPaging, deleteProcessInstanceById, @@ -31,7 +31,8 @@ import { execute } from '@/service/modules/executors' import TableAction from './components/table-action' import { renderTableTime, - runningType, workflowExecutionState + runningType, + workflowExecutionState } from '@/common/common' import { COLUMN_WIDTH_CONFIG, @@ -42,8 +43,8 @@ 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' -import {renderEnvironmentalDistinctionCell} from "@/utils/environmental-distinction"; -import { IWorkflowExecutionState } from "@/common/types"; +import { renderEnvironmentalDistinctionCell } from '@/utils/environmental-distinction' +import { IWorkflowExecutionState } from '@/common/types' export function useTable() { const { t } = useI18n() @@ -64,6 +65,9 @@ export function useTable() { startDate: ref(), endDate: ref(), projectCode: ref(Number(router.currentRoute.value.params.projectCode)), + processDefineCode: router.currentRoute.value.query.processDefineCode + ? ref(Number(router.currentRoute.value.query.processDefineCode)) + : ref(), loadingRef: ref(false) }) @@ -104,13 +108,13 @@ export function useTable() { }, { default: () => - h( - NEllipsis, - { - style: 'max-width: 580px;line-height: 1.5' - }, - () => row.name - ) + h( + NEllipsis, + { + style: 'max-width: 580px;line-height: 1.5' + }, + () => row.name + ) } ) }, @@ -119,7 +123,8 @@ export function useTable() { key: 'state', ...COLUMN_WIDTH_CONFIG['state'], className: 'workflow-status', - render: (_row: IWorkflowInstance) => renderWorkflowStateCell(_row.state, t) + render: (_row: IWorkflowInstance) => + renderWorkflowStateCell(_row.state, t) }, { title: t('project.workflow.operating_environment'), @@ -262,7 +267,8 @@ export function useTable() { host: variables.host, stateType: variables.stateType, startDate: variables.startDate, - endDate: variables.endDate + endDate: variables.endDate, + processDefineCode: variables.processDefineCode } queryProcessInstanceListPaging({ ...params }, variables.projectCode).then( (res: any) => { @@ -362,22 +368,25 @@ export function useTable() { } } -export function renderWorkflowStateCell(state: IWorkflowExecutionState, t: Function) { +export function renderWorkflowStateCell( + state: IWorkflowExecutionState, + t: Function +) { if (!state) return '' const stateOption = workflowExecutionState(t)[state] const Icon = h( - NIcon, - { - color: stateOption.color, - class: stateOption.classNames, - style: { - display: 'flex' - }, - size: 20 + NIcon, + { + color: stateOption.color, + class: stateOption.classNames, + style: { + display: 'flex' }, - () => h(stateOption.icon) + size: 20 + }, + () => h(stateOption.icon) ) return h(NTooltip, null, { trigger: () => {