From e130b821f42f61ddd0fa4ad0a30d2308ddba85f9 Mon Sep 17 00:00:00 2001 From: calvin Date: Tue, 8 Mar 2022 17:52:13 +0800 Subject: [PATCH] [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 --- .../src/components/modal/index.module.scss | 4 + .../src/components/modal/index.tsx | 48 ++++++------ .../src/components/modal/types.ts | 23 ++++++ .../list/components/project-modal.tsx | 4 +- .../src/views/projects/list/index.tsx | 24 +++++- .../src/views/projects/list/use-table.ts | 15 +++- .../task/components/node/detail-modal.tsx | 76 +++++++++++++------ .../views/projects/task/instance/use-table.ts | 3 +- .../workflow/components/dag/index.tsx | 22 ++++++ .../workflow/definition/timing/use-table.ts | 3 +- .../workflow/instance/detail/index.tsx | 1 - 11 files changed, 162 insertions(+), 61 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/components/modal/types.ts diff --git a/dolphinscheduler-ui-next/src/components/modal/index.module.scss b/dolphinscheduler-ui-next/src/components/modal/index.module.scss index a47563d5e4..63915705ea 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.module.scss +++ b/dolphinscheduler-ui-next/src/components/modal/index.module.scss @@ -21,3 +21,7 @@ .modal-card { max-height: 100vh; } + +.header-icon { + padding-right: 5px; +} diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx b/dolphinscheduler-ui-next/src/components/modal/index.tsx index 1910d39e97..9ad83f24a4 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.tsx +++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx @@ -15,10 +15,11 @@ * limitations under the License. */ -import { defineComponent, PropType, renderSlot } from 'vue' -import { NModal, NCard, NButton, NSpace } from 'naive-ui' +import { defineComponent, h, PropType, renderSlot, Ref } from 'vue' +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, default: true }, - linkEventShow: { - type: Boolean as PropType - }, - linkEventText: { - type: String as PropType + headerLinks: { + type: Object as PropType>>, + default: [] as LinkOption[] } } @@ -82,22 +81,11 @@ const Modal = defineComponent({ ctx.emit('confirm') } - const onJumpLink = () => { - ctx.emit('jumpLink') - } - - return { t, onCancel, onConfirm, onJumpLink } + return { t, onCancel, onConfirm } }, render() { - const { - $slots, - t, - onCancel, - onConfirm, - confirmDisabled, - confirmLoading, - onJumpLink - } = this + const { $slots, t, onCancel, onConfirm, confirmDisabled, confirmLoading } = + this return ( renderSlot($slots, 'default'), 'header-extra': () => ( - {this.linkEventShow && ( - - {this.linkEventText} - - )} + {this.headerLinks.value && + this.headerLinks.value + .filter((item: any) => item.show) + .map((item: any) => { + return ( + + {{ + default: () => item.text, + icon: () => item.icon() + }} + + ) + })} ), footer: () => ( diff --git a/dolphinscheduler-ui-next/src/components/modal/types.ts b/dolphinscheduler-ui-next/src/components/modal/types.ts new file mode 100644 index 0000000000..59f856f9e6 --- /dev/null +++ b/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 +} diff --git a/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx index f5b98c0e48..904e8a9f90 100644 --- a/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx +++ b/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={ - !this.model.projectName || !this.model.userName - } + confirmDisabled={!this.model.projectName || !this.model.userName} > diff --git a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx index f6b0156450..054978d984 100644 --- a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx +++ b/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 @@ -137,4 +153,4 @@ const list = defineComponent({ } }) -export default list \ No newline at end of file +export default list diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts index 28fb489596..d414a139ae 100644 --- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts +++ b/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', diff --git a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx index cfc4286625..004a6ca5f5 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/components/node/detail-modal.tsx +++ b/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, default: 0 + }, + processInstance: { + type: Object as PropType + }, + taskInstance: { + type: Object as PropType } } 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 = () => { - // TODO: onJumpLink + const headerLinks = ref([] as any) + + const handleViewLog = () => { + if (props.taskInstance) { + emit('viewLog', props.taskInstance.id, props.taskInstance.taskType) + } } - const getLinkEventText = (status: boolean, text: string, url: 'string') => { - state.linkEventShowRef = status - state.linkEventTextRef = text - state.linkUrlRef = url + const initHeaderLinks = (processInstance: any) => { + headerLinks.value = [ + { + 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) => { @@ -103,12 +132,15 @@ const NodeDetailModal = defineComponent({ ) watch( - () => [props.show, props.data], - async () => { - if (!props.show) return - await nextTick() - detailRef.value.value.setValues(formatModel(props.data)) + () => [props.show, props.data], + async () => { + if (!props.show) return + if (props.processInstance) { + initHeaderLinks(props.processInstance) } + await nextTick() + detailRef.value.value.setValues(formatModel(props.data)) + } ) return () => ( @@ -119,9 +151,7 @@ const NodeDetailModal = defineComponent({ confirmLoading={false} confirmDisabled={props.readonly} onCancel={onCancel} - linkEventShow={state.linkEventShowRef} - linkEventText={state.linkEventTextRef} - onJumpLink={onJumpLink} + headerLinks={headerLinks} > 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} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts index 9df9e86bcb..67615478cf 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts +++ b/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) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx index bbf19ba7ba..d2c15d3909 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/detail/index.tsx +++ b/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'