This is an automated email from the ASF dual-hosted git repository.
kerwin 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 03ff78fdcb [Improvement-14112][UI] Add a quick link to visit workflow
instances of the current workflow. (#14134)
03ff78fdcb is described below
commit 03ff78fdcba908f93e4a4b51b106e14a5fc39b5b
Author: calvin <[email protected]>
AuthorDate: Thu May 18 19:47:02 2023 +0800
[Improvement-14112][UI] Add a quick link to visit workflow instances of the
current workflow. (#14134)
---
.../src/common/column-width-config.ts | 5 +-
dolphinscheduler-ui/src/locales/en_US/project.ts | 1 +
dolphinscheduler-ui/src/locales/zh_CN/project.ts | 1 +
.../projects/workflow/definition/use-table.ts | 33 ++++++++++++-
.../components/process-instance-condition.tsx | 56 ++++++++++++++++++++--
.../src/views/projects/workflow/instance/index.tsx | 2 +
.../src/views/projects/workflow/instance/types.ts | 1 +
.../views/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<Array<SelectMixedOption>>([])
+
+ 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 (
<NSpace justify='end'>
+ <NSelect
+ clearable
+ filterable
+ options={this.processDefinitionOptions}
+ size='small'
+ style={{ width: '210px' }}
+ v-model:value={this.processDefineCodeRef}
+ />
<NInput
allowInput={this.trim}
size='small'
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
index 8470bbe985..d3e63f4f6b 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
@@ -42,6 +42,7 @@ export default defineComponent({
}
const handleSearch = (params: IWorkflowInstanceSearch) => {
+ 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: () => {
