From 985b4e85208ce2b1ca0e7afeacf9b7f3a5ee4d98 Mon Sep 17 00:00:00 2001 From: Devosend Date: Tue, 1 Mar 2022 16:59:35 +0800 Subject: [PATCH] [Fix-8598][UI Next][V1.0.0-Alpha] Fix menu readonly bug in workflow instance --- .../components/dag/dag-context-menu.tsx | 55 +++++------- .../workflow/components/dag/index.tsx | 84 +++++++++++++------ .../projects/workflow/components/dag/types.ts | 6 ++ .../workflow/components/dag/use-node-menu.ts | 56 ++++++------- .../components/dag/use-node-status.ts | 3 +- 5 files changed, 112 insertions(+), 92 deletions(-) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-context-menu.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-context-menu.tsx index 439d1d5b32..435a7b876d 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-context-menu.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-context-menu.tsx @@ -17,28 +17,30 @@ import { genTaskCodeList } from '@/service/modules/task-definition' import type { Cell } from '@antv/x6' -import { - defineComponent, - onMounted, - PropType, - inject, - ref, - computed -} from 'vue' +import { defineComponent, onMounted, PropType, inject, ref } from 'vue' import { useI18n } from 'vue-i18n' import { useRoute } from 'vue-router' import styles from './menu.module.scss' import { uuid } from '@/utils/common' +import { IWorkflowTaskInstance } from './types' const props = { + startReadonly: { + type: Boolean as PropType, + default: false + }, + menuReadonly: { + type: Boolean as PropType, + default: false + }, + taskInstance: { + type: Object as PropType, + require: true + }, cell: { type: Object as PropType, require: true }, - taskList: { - type: Array as PropType>, - default: [] - }, visible: { type: Boolean as PropType, default: true @@ -50,10 +52,6 @@ const props = { top: { type: Number as PropType, default: 0 - }, - releaseState: { - type: String as PropType, - default: 'OFFLINE' } } @@ -66,12 +64,6 @@ export default defineComponent({ const route = useRoute() const projectCode = Number(route.params.projectCode) - const startAvailable = computed( - () => - route.name === 'workflow-definition-detail' && - props.releaseState !== 'NOT_RELEASE' - ) - const hide = () => { ctx.emit('hide', false) } @@ -85,12 +77,8 @@ export default defineComponent({ } const handleViewLog = () => { - const taskCode = Number(props.cell?.id) - const taskInstance = props.taskList.find( - (task: any) => task.taskCode === taskCode - ) - if (taskInstance) { - ctx.emit('viewLog', taskInstance.id, taskInstance.taskType) + if (props.taskInstance) { + ctx.emit('viewLog', props.taskInstance.id, props.taskInstance.taskType) } } @@ -122,7 +110,6 @@ export default defineComponent({ }) return { - startAvailable, startRunning, handleEdit, handleCopy, @@ -141,7 +128,7 @@ export default defineComponent({ >
@@ -149,7 +136,7 @@ export default defineComponent({
@@ -157,7 +144,7 @@ export default defineComponent({
@@ -165,13 +152,13 @@ export default defineComponent({
{t('project.node.delete')}
- {this.taskList.length > 0 && ( + {this.taskInstance && (
{t('project.node.view_log')}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx index ea5cff824e..2c70619dbf 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx @@ -15,7 +15,7 @@ * limitations under the License. */ -import type { Graph } from '@antv/x6' +import type { Cell, Graph } from '@antv/x6' import { defineComponent, ref, @@ -23,9 +23,11 @@ import { PropType, toRef, watch, - onBeforeUnmount + onBeforeUnmount, + computed } from 'vue' import { useI18n } from 'vue-i18n' +import { useRoute } from 'vue-router' import DagToolbar from './dag-toolbar' import DagCanvas from './dag-canvas' import DagSidebar from './dag-sidebar' @@ -76,6 +78,7 @@ export default defineComponent({ emits: ['refresh', 'save'], setup(props, context) { const { t } = useI18n() + const route = useRoute() const theme = useThemeStore() // Whether the graph can be operated @@ -108,21 +111,47 @@ export default defineComponent({ } = useTaskEdit({ graph, definition: toRef(props, 'definition') }) // Right click cell - const { - menuCell, - pageX, - pageY, - menuVisible, - startModalShow, - logModalShow, - logViewTaskId, - logViewTaskType, - menuHide, - menuStart, - viewLog, - hideLog - } = useNodeMenu({ - graph + const { nodeVariables, menuHide, menuStart, viewLog, hideLog } = + useNodeMenu({ + graph + }) + + // start button in the dag node menu + const startReadonly = computed(() => { + if (props.definition) { + return ( + route.name === 'workflow-definition-detail' && + props.definition!.processDefinition.releaseState === 'NOT_RELEASE' + ) + } else { + return false + } + }) + + // other button in the dag node menu + const menuReadonly = computed(() => { + if (props.instance) { + return ( + props.instance.state !== 'WAITING_THREAD' && + props.instance.state !== 'SUCCESS' && + props.instance.state !== 'PAUSE' && + props.instance.state !== 'FAILURE' && + props.instance.state !== 'STOP' + ) + } else if (props.definition) { + return props.definition!.processDefinition.releaseState === 'ONLINE' + } else { + return false + } + }) + + const taskInstance = computed(() => { + if (nodeVariables.menuCell) { + const taskCode = Number(nodeVariables.menuCell!.id) + return taskList.value.find((task: any) => task.taskCode === taskCode) + } else { + return undefined + } }) const statusTimerRef = ref() @@ -240,12 +269,13 @@ export default defineComponent({ onCancel={taskCancel} /> )} - {!!props.instance && logModalShow.value && ( + {!!props.instance && nodeVariables.logModalShow && ( )} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts index 04c096ef1a..2e0d622481 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/types.ts @@ -143,3 +143,9 @@ export interface IStartupParam { warningType: string warningGroupId: number } + +export interface IWorkflowTaskInstance { + id: number + taskCode: number + taskType: string +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts index ff2d97019f..4848d8a052 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts @@ -15,8 +15,8 @@ * limitations under the License. */ -import type { Ref } from 'vue' -import { onMounted, ref } from 'vue' +import { reactive, Ref } from 'vue' +import { onMounted } from 'vue' import type { Graph, Cell } from '@antv/x6' interface Options { @@ -28,63 +28,59 @@ interface Options { */ export function useNodeMenu(options: Options) { const { graph } = options - const startModalShow = ref(false) - const logModalShow = ref(false) - const logViewTaskId = ref() - const logViewTaskType = ref() - const menuVisible = ref(false) - const pageX = ref() - const pageY = ref() - const menuCell = ref() + + const nodeVariables = reactive({ + menuVisible: false, + startModalShow: false, + logModalShow: false, + logTaskId: -1, + logTaskType: '', + pageX: 0, + pageY: 0, + menuCell: {} as Cell + }) const menuHide = () => { - menuVisible.value = false + nodeVariables.menuVisible = false // unlock scroller graph.value?.unlockScroller() } const menuStart = () => { - startModalShow.value = true + nodeVariables.startModalShow = true } const viewLog = (taskId: number, taskType: string) => { - logViewTaskId.value = taskId - logViewTaskType.value = taskType - logModalShow.value = true + nodeVariables.logTaskId = taskId + nodeVariables.logTaskType = taskType + nodeVariables.logModalShow = true } const hideLog = () => { - logModalShow.value = false + nodeVariables.logModalShow = false } onMounted(() => { if (graph.value) { // contextmenu graph.value.on('node:contextmenu', ({ cell, x, y }) => { - menuCell.value = cell - const data = graph.value?.localToPage(x, y) - pageX.value = data?.x - pageY.value = data?.y + nodeVariables.menuCell = cell + const data = graph.value!.localToPage(x, y) + nodeVariables.pageX = data.x + nodeVariables.pageY = data.y // show menu - menuVisible.value = true + nodeVariables.menuVisible = true // lock scroller - graph.value?.lockScroller() + graph.value!.lockScroller() }) } }) return { - pageX, - pageY, - startModalShow, - logModalShow, - logViewTaskId, - logViewTaskType, - menuVisible, - menuCell, + nodeVariables, menuHide, menuStart, viewLog, diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts index 2cef274337..034a281c32 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts @@ -24,6 +24,7 @@ import { tasksState } from '@/utils/common' import { NODE, NODE_STATUS_MARKUP } from './dag-config' import { queryTaskListByProcessId } from '@/service/modules/process-instances' import NodeStatus from '@/views/projects/workflow/components/dag/dag-node-status' +import { IWorkflowTaskInstance } from './types' interface Options { graph: Ref @@ -35,7 +36,7 @@ interface Options { export function useNodeStatus(options: Options) { const { graph } = options const route = useRoute() - const taskList = ref>([]) + const taskList = ref>([]) const { t } = useI18n()