[Fix-8625][UI-Next][V1.0.0-Alpha] Worked out this issue with missing buttons of viewing log and history. (#8754)

* fix this issue

* merge from dev

dolphinscheduler-ui-next/src/components/modal/index.module.scss

@@ -21,3 +21,7 @@
 .modal-card {
   max-height: 100vh;
 }
+
+.header-icon {
+  padding-right: 5px;
+}

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, renderSlot } from 'vue'
+import { defineComponent, h, PropType, renderSlot, Ref } from 'vue'
-import { NModal, NCard, NButton, NSpace } from 'naive-ui'
+import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import styles from './index.module.scss'
+import { LinkOption } from '@/components/modal/types'
 
 const props = {
   show: {
@@ -59,11 +60,9 @@ const props = {
     type: Boolean as PropType<boolean>,
     default: true
   },
-  linkEventShow: {
+  headerLinks: {
-    type: Boolean as PropType<boolean>
+    type: Object as PropType<Ref<Array<LinkOption>>>,
-  },
+    default: [] as LinkOption[]
-  linkEventText: {
-    type: String as PropType<string>
   }
 }
 
@@ -82,22 +81,11 @@ const Modal = defineComponent({
       ctx.emit('confirm')
     }
 
-    const onJumpLink = () => {
+    return { t, onCancel, onConfirm }
-      ctx.emit('jumpLink')
-    }
-
-    return { t, onCancel, onConfirm, onJumpLink }
   },
   render() {
-    const {
+    const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading } =
-      $slots,
+      this
-      t,
-      onCancel,
-      onConfirm,
-      confirmDisabled,
-      confirmLoading,
-      onJumpLink
-    } = this
 
     return (
       <NModal
@@ -115,11 +103,19 @@ const Modal = defineComponent({
             default: () => renderSlot($slots, 'default'),
             'header-extra': () => (
               <NSpace justify='end'>
-                {this.linkEventShow && (
+                {this.headerLinks.value &&
-                  <NButton text onClick={onJumpLink}>
+                  this.headerLinks.value
-                    {this.linkEventText}
+                    .filter((item: any) => item.show)
+                    .map((item: any) => {
+                      return (
+                        <NButton text onClick={item.action}>
+                          {{
+                            default: () => item.text,
+                            icon: () => item.icon()
+                          }}
                         </NButton>
-                )}
+                      )
+                    })}
               </NSpace>
             ),
             footer: () => (

dolphinscheduler-ui-next/src/components/modal/types.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+export interface LinkOption {
+  text: string
+  show: boolean
+  action?: Function
+  icon?: object
+}

dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx

@@ -89,9 +89,7 @@ const ProjectModal = defineComponent({
         show={this.showModalRef}
         onConfirm={this.confirmModal}
         onCancel={this.cancelModal}
-        confirmDisabled={
+        confirmDisabled={!this.model.projectName || !this.model.userName}
-          !this.model.projectName || !this.model.userName
-        }
       >
         <NForm rules={this.rules} ref='projectFormRef'>
           <NFormItem label={t('project.list.project_name')} path='projectName'>

dolphinscheduler-ui-next/src/views/projects/list/index.tsx

@@ -15,10 +15,17 @@
  * limitations under the License.
  */
 
-
 import Card from '@/components/card'
 import { SearchOutlined } from '@vicons/antd'
-import { NButton, NCard, NDataTable, NIcon, NInput, NPagination, NSpace } from 'naive-ui'
+import {
+  NButton,
+  NCard,
+  NDataTable,
+  NIcon,
+  NInput,
+  NPagination,
+  NSpace
+} from 'naive-ui'
 import { defineComponent, onMounted, ref, toRefs, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ProjectModal from './components/project-modal'
@@ -72,7 +79,16 @@ const list = defineComponent({
       createColumns(variables)
     })
 
-    return { t, ...toRefs(variables), requestData, handleModalChange, handleSearch, onCancelModal, onConfirmModal, handleChangePageSize }
+    return {
+      t,
+      ...toRefs(variables),
+      requestData,
+      handleModalChange,
+      handleSearch,
+      onCancelModal,
+      onConfirmModal,
+      handleChangePageSize
+    }
   },
   render() {
     const { t } = this

dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@@ -24,7 +24,14 @@ import { deleteProject } from '@/service/modules/projects'
 import { format } from 'date-fns'
 import { useRouter } from 'vue-router'
 import { useMenuStore } from '@/store/menu/menu'
-import { NButton, NEllipsis, NIcon, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
+import {
+  NButton,
+  NEllipsis,
+  NIcon,
+  NPopconfirm,
+  NSpace,
+  NTooltip
+} from 'naive-ui'
 import type { Router } from 'vue-router'
 import type { ProjectRes } from '@/service/modules/projects/types'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
@@ -55,7 +62,11 @@ export function useTable() {
 
   const createColumns = (variables: any) => {
     variables.columns = [
-      { title: '#', key: 'index', render: (row: any, index: number) => index + 1 },
+      {
+        title: '#',
+        key: 'index',
+        render: (row: any, index: number) => index + 1
+      },
       {
         title: t('project.list.project_name'),
         key: 'name',

dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx

@@ -24,14 +24,17 @@ import {
   nextTick,
   provide,
   computed,
-  onMounted
+  h
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { omit } from 'lodash'
 import Modal from '@/components/modal'
 import Detail from './detail'
 import { formatModel } from './format-data'
 import type { ITaskData, ITaskType } from './types'
+import { HistoryOutlined, ProfileOutlined } from '@vicons/antd'
+import { NIcon } from 'naive-ui'
+import { Router, useRouter } from 'vue-router'
+import { IWorkflowTaskInstance } from '@/views/projects/workflow/components/dag/types'
 
 const props = {
   show: {
@@ -53,22 +56,26 @@ const props = {
   from: {
     type: Number as PropType<number>,
     default: 0
+  },
+  processInstance: {
+    type: Object as PropType<any>
+  },
+  taskInstance: {
+    type: Object as PropType<IWorkflowTaskInstance>
   }
 }
 
 const NodeDetailModal = defineComponent({
   name: 'NodeDetailModal',
   props,
-  emits: ['cancel', 'submit'],
+  emits: ['cancel', 'submit', 'viewLog'],
   setup(props, { emit }) {
     const { t } = useI18n()
+    const router: Router = useRouter()
+    const renderIcon = (icon: any) => {
+      return () => h(NIcon, null, { default: () => h(icon) })
+    }
     const detailRef = ref()
-    const state = reactive({
-      saving: false,
-      linkEventShowRef: ref(),
-      linkEventTextRef: ref(),
-      linkUrlRef: ref()
-    })
 
     const onConfirm = async () => {
       await detailRef.value.value.validate()
@@ -78,14 +85,36 @@ const NodeDetailModal = defineComponent({
       emit('cancel')
     }
 
-    const onJumpLink = () => {
+    const headerLinks = ref([] as any)
-      // TODO: onJumpLink
+
+    const handleViewLog = () => {
+      if (props.taskInstance) {
+        emit('viewLog', props.taskInstance.id, props.taskInstance.taskType)
+      }
     }
 
-    const getLinkEventText = (status: boolean, text: string, url: 'string') => {
+    const initHeaderLinks = (processInstance: any) => {
-      state.linkEventShowRef = status
+      headerLinks.value = [
-      state.linkEventTextRef = text
+        {
-      state.linkUrlRef = url
+          text: t('project.node.view_history'),
+          show: true,
+          action: () => {
+            router.push({
+              name: 'task-instance',
+              params: { processInstanceId: processInstance.id }
+            })
+          },
+          icon: renderIcon(HistoryOutlined)
+        },
+        {
+          text: t('project.node.view_log'),
+          show: props.taskInstance ? true : false,
+          action: () => {
+            handleViewLog()
+          },
+          icon: renderIcon(ProfileOutlined)
+        }
+      ]
     }
 
     const onTaskTypeChange = (taskType: ITaskType) => {
@@ -106,6 +135,9 @@ const NodeDetailModal = defineComponent({
       () => [props.show, props.data],
       async () => {
         if (!props.show) return
+        if (props.processInstance) {
+          initHeaderLinks(props.processInstance)
+        }
         await nextTick()
         detailRef.value.value.setValues(formatModel(props.data))
       }
@@ -119,9 +151,7 @@ const NodeDetailModal = defineComponent({
         confirmLoading={false}
         confirmDisabled={props.readonly}
         onCancel={onCancel}
-        linkEventShow={state.linkEventShowRef}
+        headerLinks={headerLinks}
-        linkEventText={state.linkEventTextRef}
-        onJumpLink={onJumpLink}
       >
         <Detail
           ref={detailRef}

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -38,6 +38,7 @@ export function useTable() {
   const { t } = useI18n()
   const route = useRoute()
   const projectCode = Number(route.params.projectCode)
+  const processInstanceId = Number(route.params.processInstanceId)
 
   const variables = reactive({
     columns: [],
@@ -45,7 +46,7 @@ export function useTable() {
     page: ref(1),
     pageSize: ref(10),
     searchVal: ref(null),
-    processInstanceId: ref(null),
+    processInstanceId: ref(processInstanceId ? processInstanceId : null),
     host: ref(null),
     stateType: ref(null),
     datePickerRange: ref(null),

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -154,6 +154,20 @@ export default defineComponent({
       }
     })
 
+    const currentTaskInstance = ref()
+
+    watch(
+      () => taskModalVisible.value,
+      () => {
+        if (props.instance && taskModalVisible.value) {
+          const taskCode = currTask.value.code
+          currentTaskInstance.value = taskList.value.find(
+            (task: any) => task.taskCode === taskCode
+          )
+        }
+      }
+    )
+
     const statusTimerRef = ref()
     const { taskList, refreshTaskStatus } = useNodeStatus({ graph })
 
@@ -209,6 +223,11 @@ export default defineComponent({
       saveModelToggle(false)
     }
 
+    const handleViewLog = (taskId: number, taskType: string) => {
+      taskModalVisible.value = false
+      viewLog(taskId, taskType)
+    }
+
     watch(
       () => props.definition,
       () => {
@@ -264,6 +283,9 @@ export default defineComponent({
           readonly={props.readonly}
           show={taskModalVisible.value}
           projectCode={props.projectCode}
+          processInstance={props.instance}
+          taskInstance={currentTaskInstance.value}
+          onViewLog={handleViewLog}
           data={currTask.value as any}
           onSubmit={taskConfirm}
           onCancel={taskCancel}

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts

@@ -152,7 +152,8 @@ export function useTable() {
                       NButton,
                       {
                         circle: true,
-                        type: row.releaseState === 'ONLINE' ? 'error' : 'warning',
+                        type:
+                          row.releaseState === 'ONLINE' ? 'error' : 'warning',
                         size: 'small',
                         onClick: () => {
                           handleReleaseState(row)

dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx

@@ -19,7 +19,6 @@ import { defineComponent, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useThemeStore } from '@/store/theme/theme'
 import Dag from '../../components/dag'
-// import { queryProcessDefinitionByCode } from '@/service/modules/process-definition'
 import { queryProcessInstanceById } from '@/service/modules/process-instances'
 import { WorkflowDefinition } from '../../components/dag/types'
 import Styles from './index.module.scss'