[Improvement-14112][UI] Add a quick link to visit workflow instances of the current workflow. (#14134)

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
   }
 }
 

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',

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: '工作流树形图',

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',

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'

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()
     }
 

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 }

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: () => {