From 8ef72fcffceedbf2cc5f1f47f13d7ef911d125ab Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Wed, 19 Jan 2022 21:56:18 +0800 Subject: [PATCH] [Feature][UI Next] Add workflow relation layout and format. (#8125) --- .../src/components/chart/modules/Graph.tsx | 238 +++++++++-------- .../src/layouts/content/use-dataList.ts | 4 +- .../src/locales/modules/en_US.ts | 7 +- .../src/locales/modules/zh_CN.ts | 7 +- dolphinscheduler-ui-next/src/router/index.ts | 2 +- .../src/router/modules/projects.ts | 16 +- .../service/modules/task-definition/index.ts | 5 +- .../src/store/menu/menu.ts | 2 +- .../src/store/menu/types.ts | 4 +- dolphinscheduler-ui-next/src/utils/index.ts | 4 +- .../src/utils/truncate-text.ts | 12 +- .../src/views/projects/index.tsx | 8 +- .../list/components/project-modal.tsx | 0 .../list/components/table-action.tsx | 0 .../list/index.module.scss | 0 .../{project => projects}/list/index.tsx | 0 .../{project => projects}/list/use-form.ts | 0 .../{project => projects}/list/use-table.ts | 0 .../src/views/projects/task/config.ts | 36 +-- .../src/views/projects/task/task-config.tsx | 8 +- .../components/definition-card.tsx | 0 .../components/state-card.tsx | 0 .../workflow-monitor/index.tsx | 0 .../workflow-monitor/types.ts | 0 .../use-process-definition.ts | 0 .../workflow-monitor/use-process-state.ts | 0 .../workflow-monitor/use-table.ts | 0 .../workflow-monitor/use-task-state.ts | 0 .../projects/workflow-relation/index.tsx | 54 ++++ .../views/projects/workflow/dag-canvas.tsx | 44 ++- .../src/views/projects/workflow/dag-config.ts | 34 +-- .../src/views/projects/workflow/dag-hooks.ts | 16 +- .../views/projects/workflow/dag-sidebar.tsx | 52 ++-- .../views/projects/workflow/dag-toolbar.tsx | 251 ++++++++++++------ .../src/views/projects/workflow/dag.tsx | 34 ++- .../src/views/projects/workflow/hook-demo.ts | 10 +- .../projects/workflow/use-canvas-drop.ts | 50 ++-- .../projects/workflow/use-canvas-init.ts | 32 +-- .../projects/workflow/use-cell-active.ts | 34 +-- .../projects/workflow/use-graph-operations.ts | 44 +-- .../projects/workflow/use-node-search.ts | 26 +- .../projects/workflow/use-sidebar-drag.ts | 13 +- .../workflow/workflow-definition-create.tsx | 13 +- .../workflow/workflow-definition-details.tsx | 8 +- .../workflow/workflow-definition-list.tsx | 8 +- .../workflow/workflow-instance-details.tsx | 8 +- .../workflow/workflow-instance-list.tsx | 8 +- 47 files changed, 619 insertions(+), 473 deletions(-) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/components/project-modal.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/components/table-action.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/index.module.scss (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/index.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/use-form.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/list/use-table.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/components/definition-card.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/components/state-card.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/index.tsx (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/types.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/use-process-definition.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/use-process-state.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/use-table.ts (100%) rename dolphinscheduler-ui-next/src/views/{project => projects}/workflow-monitor/use-task-state.ts (100%) create mode 100644 dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx index 4eec06f3c0..c11c54a0e4 100644 --- a/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx +++ b/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx @@ -20,129 +20,133 @@ import initChart from '@/components/chart' import type { Ref } from 'vue' const props = { - height: { - type: [String, Number] as PropType, - default: 400 - }, - width: { - type: [String, Number] as PropType, - default: '100%' - }, - tooltipFormat: { - type: String as PropType, - default: '' - }, - legendData: { - type: Array as PropType>, - default: () => [] - }, - seriesData: { - type: Array as PropType>, - default: () => [] - }, - labelShow: { - type: Array as PropType>, - default: () => [] - }, - linksData: { - type: Array as PropType>, - default: () => [] - }, - labelFormat: { - type: String as PropType, - default: '' - } + height: { + type: [String, Number] as PropType, + default: 400 + }, + width: { + type: [String, Number] as PropType, + default: '100%' + }, + tooltipFormat: { + type: String as PropType, + default: '' + }, + legendData: { + type: Array as PropType>, + default: () => [] + }, + seriesData: { + type: Array as PropType>, + default: () => [] + }, + labelShow: { + type: Array as PropType>, + default: () => [] + }, + linksData: { + type: Array as PropType>, + default: () => [] + }, + labelFormat: { + type: String as PropType, + default: '' + } } const GraphChart = defineComponent({ - name: 'GraphChart', - props, - setup(props) { - const graphChartRef: Ref = ref(null) + name: 'GraphChart', + props, + setup(props) { + const graphChartRef: Ref = ref(null) - const option = { - tooltip: { - trigger: 'item', - triggerOn: 'mousemove', - backgroundColor: '#2D303A', - padding: [8, 12], - formatter: props.tooltipFormat, - color: '#2D303A', - textStyle: { - rich: { - a: { - fontSize: 12, - color: '#2D303A', - lineHeight: 12, - align: 'left', - padding: [4, 4, 4, 4] - } - } - } - }, - legend: [{ - orient: 'horizontal', - top: 6, - left: 6, - data: props.legendData - }], - series: [{ - type: 'graph', - layout: 'force', - nodeScaleRatio: 1.2, - draggable: true, - animation: false, - data: props.seriesData, - roam: true, - symbol: 'roundRect', - symbolSize: 70, - categories: props.legendData, - label: { - show: props.labelShow, - position: 'inside', - formatter: props.labelFormat, - color: '#222222', - textStyle: { - rich: { - a: { - fontSize: 12, - color: '#222222', - lineHeight: 12, - align: 'left', - padding: [4, 4, 4, 4] - } - } - } - }, - edgeSymbol: ['circle', 'arrow'], - edgeSymbolSize: [4, 12], - force: { - repulsion: 1000, - edgeLength: 300 - }, - links: props.linksData, - lineStyle: { - color: '#999999' - } - }] - } + const option = { + tooltip: { + trigger: 'item', + triggerOn: 'mousemove', + backgroundColor: '#2D303A', + padding: [8, 12], + formatter: props.tooltipFormat, + color: '#2D303A', + textStyle: { + rich: { + a: { + fontSize: 12, + color: '#2D303A', + lineHeight: 12, + align: 'left', + padding: [4, 4, 4, 4] + } + } + } + }, + legend: [ + { + orient: 'horizontal', + top: 6, + left: 6, + data: props.legendData + } + ], + series: [ + { + type: 'graph', + layout: 'force', + nodeScaleRatio: 1.2, + draggable: true, + animation: false, + data: props.seriesData, + roam: true, + symbol: 'roundRect', + symbolSize: 70, + categories: props.legendData, + label: { + show: props.labelShow, + position: 'inside', + formatter: props.labelFormat, + color: '#222222', + textStyle: { + rich: { + a: { + fontSize: 12, + color: '#222222', + lineHeight: 12, + align: 'left', + padding: [4, 4, 4, 4] + } + } + } + }, + edgeSymbol: ['circle', 'arrow'], + edgeSymbolSize: [4, 12], + force: { + repulsion: 1000, + edgeLength: 300 + }, + links: props.linksData, + lineStyle: { + color: '#999999' + } + } + ] + } - initChart(graphChartRef, option) + initChart(graphChartRef, option) - return { graphChartRef } - }, - render() { - const { height, width } = this - return ( -
- ) - } + return { graphChartRef } + }, + render() { + const { height, width } = this + return ( +
+ ) + } }) export default GraphChart diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts index 2d23ae8f65..689a95bf5f 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts +++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts @@ -92,8 +92,8 @@ export function useDataList() { icon: renderIcon(FundProjectionScreenOutlined) }, { - label: t('menu.workflow_relationships'), - key: 'workflow-relationships', + label: t('menu.workflow_relation'), + key: 'workflow-relation', icon: renderIcon(PartitionOutlined) }, { diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts index f49adf8d9c..aa058b5e18 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts @@ -48,7 +48,7 @@ const menu = { monitor: 'Monitor', security: 'Security', workflow_monitoring: 'Workflow Monitoring', - workflow_relationships: 'Workflow Relationships', + workflow_relation: 'Workflow Relation', workflow: 'Workflow', workflow_definition: 'Workflow Definition', workflow_instance: 'Workflow Instance', @@ -287,8 +287,11 @@ const project = { cancel: 'Cancel', delete_confirm: 'Delete?' }, + workflow_relation: { + workflow_relation: 'Workflow Relation' + }, dag: { - createWorkflow: "Create Workflow", + createWorkflow: 'Create Workflow', search: 'Search', download_png: 'Download PNG', fullscreen_open: 'Open Fullscreen', diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts index 517f819c07..a77d862552 100644 --- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts +++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts @@ -48,7 +48,7 @@ const menu = { monitor: '监控中心', security: '安全中心', workflow_monitoring: '工作流监控', - workflow_relationships: '工作流关系', + workflow_relation: '工作流关系', workflow: '工作流', workflow_definition: '工作流定义', workflow_instance: '工作流实例', @@ -287,8 +287,11 @@ const project = { cancel: '取消', delete_confirm: '确定删除吗?' }, + workflow_relation: { + workflow_relation: '工作流关系' + }, dag: { - createWorkflow: "创建工作流", + createWorkflow: '创建工作流', search: '搜索', download_png: '下载工作流图片', fullscreen_open: '全屏', diff --git a/dolphinscheduler-ui-next/src/router/index.ts b/dolphinscheduler-ui-next/src/router/index.ts index 1c36fd11e1..eb4c8b183a 100644 --- a/dolphinscheduler-ui-next/src/router/index.ts +++ b/dolphinscheduler-ui-next/src/router/index.ts @@ -50,7 +50,7 @@ router.beforeEach( ) => { NProgress.start() const menuStore = useMenuStore() - const metaData:metaData = to.meta + const metaData: metaData = to.meta menuStore.setShowSideStatus(metaData.showSide || false) next() NProgress.done() diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts index 56454a53fd..86c04b89c7 100644 --- a/dolphinscheduler-ui-next/src/router/modules/projects.ts +++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts @@ -47,21 +47,29 @@ export default { showSide: true } }, + { + path: '/projects/:projectCode/workflow-relation', + name: 'workflow-relation', + component: components['workflow-relation'], + meta: { + title: '工作流定义' + } + }, { path: '/projects/:projectCode/workflow/definitions/create', name: 'workflow-definition-create', component: components['workflow-definition-create'], meta: { - title: '创建工作流定义', - }, + title: '创建工作流定义' + } }, { path: '/projects/:projectCode/workflow/definitions/:code', name: 'workflow-definition-details', component: components['workflow-definition-details'], meta: { - title: '工作流定义详情', - }, + title: '工作流定义详情' + } } ] } diff --git a/dolphinscheduler-ui-next/src/service/modules/task-definition/index.ts b/dolphinscheduler-ui-next/src/service/modules/task-definition/index.ts index 0770c8668b..bc501f923d 100644 --- a/dolphinscheduler-ui-next/src/service/modules/task-definition/index.ts +++ b/dolphinscheduler-ui-next/src/service/modules/task-definition/index.ts @@ -49,10 +49,7 @@ export function save( }) } -export function genTaskCodeList( - num: number, - projectCode: number -) { +export function genTaskCodeList(num: number, projectCode: number) { return axios.request({ url: `/projects/${projectCode}/task-definition/gen-task-codes`, method: 'get', diff --git a/dolphinscheduler-ui-next/src/store/menu/menu.ts b/dolphinscheduler-ui-next/src/store/menu/menu.ts index e1beed3a1e..0149d7c839 100644 --- a/dolphinscheduler-ui-next/src/store/menu/menu.ts +++ b/dolphinscheduler-ui-next/src/store/menu/menu.ts @@ -46,6 +46,6 @@ export const useMenuStore = defineStore({ }, setSideMenuKey(sideMenuKey: string): void { this.sideMenuKey = sideMenuKey - }, + } } }) diff --git a/dolphinscheduler-ui-next/src/store/menu/types.ts b/dolphinscheduler-ui-next/src/store/menu/types.ts index 0bc12cde55..ddcd951ed5 100644 --- a/dolphinscheduler-ui-next/src/store/menu/types.ts +++ b/dolphinscheduler-ui-next/src/store/menu/types.ts @@ -16,8 +16,8 @@ */ interface MenuState { - menuKey: string, - isShowSide: boolean, + menuKey: string + isShowSide: boolean sideMenuKey: string } diff --git a/dolphinscheduler-ui-next/src/utils/index.ts b/dolphinscheduler-ui-next/src/utils/index.ts index 4639c2ce1c..c6a02b2259 100644 --- a/dolphinscheduler-ui-next/src/utils/index.ts +++ b/dolphinscheduler-ui-next/src/utils/index.ts @@ -17,12 +17,12 @@ import mapping from './mapping' import regex from './regex' -import truncateText from './truncate-text' +import truncateText from './truncate-text' const utils = { mapping, regex, - truncateText, + truncateText } export default utils diff --git a/dolphinscheduler-ui-next/src/utils/truncate-text.ts b/dolphinscheduler-ui-next/src/utils/truncate-text.ts index 2605ac0b05..a127875917 100644 --- a/dolphinscheduler-ui-next/src/utils/truncate-text.ts +++ b/dolphinscheduler-ui-next/src/utils/truncate-text.ts @@ -16,11 +16,11 @@ */ /** -* truncateText('ALongText', 4) => 'ALon...' -* @param {number} limit -* @param {string} text -* Each Chinese character is equal to two chars -*/ + * truncateText('ALongText', 4) => 'ALon...' + * @param {number} limit + * @param {string} text + * Each Chinese character is equal to two chars + */ export default function truncateText(text: string, n: number) { const exp = /[\u4E00-\u9FA5]/ let res = '' @@ -48,4 +48,4 @@ export default function truncateText(text: string, n: number) { res = text } return res -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/index.tsx b/dolphinscheduler-ui-next/src/views/projects/index.tsx index e6769c4d45..7b43218c4e 100644 --- a/dolphinscheduler-ui-next/src/views/projects/index.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/index.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "Projects", + name: 'Projects', setup() { - return () => ( -
Projects
- ) + return () =>
Projects
} -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx rename to dolphinscheduler-ui-next/src/views/projects/list/components/project-modal.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx b/dolphinscheduler-ui-next/src/views/projects/list/components/table-action.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/components/table-action.tsx rename to dolphinscheduler-ui-next/src/views/projects/list/components/table-action.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/list/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/list/index.module.scss similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/index.module.scss rename to dolphinscheduler-ui-next/src/views/projects/list/index.module.scss diff --git a/dolphinscheduler-ui-next/src/views/project/list/index.tsx b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/index.tsx rename to dolphinscheduler-ui-next/src/views/projects/list/index.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/list/use-form.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-form.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/use-form.ts rename to dolphinscheduler-ui-next/src/views/projects/list/use-form.ts diff --git a/dolphinscheduler-ui-next/src/views/project/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/list/use-table.ts rename to dolphinscheduler-ui-next/src/views/projects/list/use-table.ts diff --git a/dolphinscheduler-ui-next/src/views/projects/task/config.ts b/dolphinscheduler-ui-next/src/views/projects/task/config.ts index f19efb7de6..260cbc9801 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/config.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/config.ts @@ -15,53 +15,53 @@ * limitations under the License. */ -export const ALL_TASK_TYPES:any = { +export const ALL_TASK_TYPES: any = { SHELL: { - alias: 'SHELL', + alias: 'SHELL' }, SUB_PROCESS: { - alias: 'SUB_PROCESS', + alias: 'SUB_PROCESS' }, PROCEDURE: { - alias: 'PROCEDURE', + alias: 'PROCEDURE' }, SQL: { - alias: 'SQL', + alias: 'SQL' }, SPARK: { - alias: 'SPARK', + alias: 'SPARK' }, FLINK: { - alias: 'FLINK', + alias: 'FLINK' }, MR: { - alias: 'MapReduce', + alias: 'MapReduce' }, PYTHON: { - alias: 'PYTHON', + alias: 'PYTHON' }, DEPENDENT: { - alias: 'DEPENDENT', + alias: 'DEPENDENT' }, HTTP: { - alias: 'HTTP', + alias: 'HTTP' }, DATAX: { - alias: 'DataX', + alias: 'DataX' }, PIGEON: { - alias: 'PIGEON', + alias: 'PIGEON' }, SQOOP: { - alias: 'SQOOP', + alias: 'SQOOP' }, CONDITIONS: { - alias: 'CONDITIONS', + alias: 'CONDITIONS' }, SWITCH: { - alias: 'SWITCH', + alias: 'SWITCH' }, SEATUNNEL: { - alias: 'WATERDROP', + alias: 'WATERDROP' } -}; \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/task-config.tsx b/dolphinscheduler-ui-next/src/views/projects/task/task-config.tsx index 3ae6873b06..31df000f39 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/task-config.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/task/task-config.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "TaskConfigModal", + name: 'TaskConfigModal', setup() { - return () => ( -
TaskConfigModal
- ) + return () =>
TaskConfigModal
} -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/definition-card.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/definition-card.tsx rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/definition-card.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/state-card.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/components/state-card.tsx rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/components/state-card.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/index.tsx similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/index.tsx rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/index.tsx diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/types.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/types.ts rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/types.ts diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-definition.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-definition.ts rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-definition.ts diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-state.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-process-state.ts rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-process-state.ts diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-table.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-table.ts rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-table.ts diff --git a/dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-task-state.ts similarity index 100% rename from dolphinscheduler-ui-next/src/views/project/workflow-monitor/use-task-state.ts rename to dolphinscheduler-ui-next/src/views/projects/workflow-monitor/use-task-state.ts diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx new file mode 100644 index 0000000000..c88abdeea2 --- /dev/null +++ b/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx @@ -0,0 +1,54 @@ +/* + * 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. + */ + +import { defineComponent } from 'vue' +import { useI18n } from 'vue-i18n' +import { NSelect, NButton, NIcon } from 'naive-ui' +import { ReloadOutlined, EyeOutlined } from '@vicons/antd' +import Card from '@/components/card' + +const workflowRelation = defineComponent({ + name: 'workflow-relation', + setup() { + const { t } = useI18n() + + return { t } + }, + render() { + const { t } = this + + return ( + +
+ + + + + + + + + + + +
+ + ) + } +}) + +export default workflowRelation diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-canvas.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-canvas.tsx index 797c876e8b..e953f4ab0f 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-canvas.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-canvas.tsx @@ -19,7 +19,12 @@ import { defineComponent, ref, inject } from 'vue' import Styles from './dag.module.scss' import type { PropType, Ref } from 'vue' import type { Dragged } from './dag' -import { useCanvasInit, useGraphOperations, useCellActive, useCanvasDrop } from './dag-hooks'; +import { + useCanvasInit, + useGraphOperations, + useCellActive, + useCanvasDrop +} from './dag-hooks' import { useRoute } from 'vue-router' const props = { @@ -29,32 +34,45 @@ const props = { x: 0, y: 0, type: '' - }), + }) } } export default defineComponent({ - name: "workflow-dag-canvas", + name: 'workflow-dag-canvas', props, setup(props, context) { - const readonly = inject('readonly', ref(false)); - const graph = inject('graph', ref()); - const route = useRoute(); - const projectCode = route.params.projectCode as string; + const readonly = inject('readonly', ref(false)) + const graph = inject('graph', ref()) + const route = useRoute() + const projectCode = route.params.projectCode as string - const { paper, minimap, container } = useCanvasInit({ readonly, graph }); + const { paper, minimap, container } = useCanvasInit({ readonly, graph }) // Change the style on cell hover and select - useCellActive({ graph }); + useCellActive({ graph }) // Drop sidebar item in canvas - const { onDrop, onDragenter, onDragover, onDragleave } = useCanvasDrop({ readonly, dragged: props.dragged, graph, container, projectCode }); + const { onDrop, onDragenter, onDragover, onDragleave } = useCanvasDrop({ + readonly, + dragged: props.dragged, + graph, + container, + projectCode + }) return () => ( -
+
- ); + ) } -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-config.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-config.ts index 3f8238f6c0..5f73e2f1b0 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-config.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-config.ts @@ -119,21 +119,25 @@ export const PORT_SELECTED = { } } -export const NODE_STATUS_MARKUP = [{ - tagName: 'foreignObject', - selector: 'fo', - children: [ - { - tagName: 'body', - selector: 'fo-body', - ns: 'http://www.w3.org/1999/xhtml', - children: [{ - tagName: 'div', - selector: 'status' - }] - } - ] -}] +export const NODE_STATUS_MARKUP = [ + { + tagName: 'foreignObject', + selector: 'fo', + children: [ + { + tagName: 'body', + selector: 'fo-body', + ns: 'http://www.w3.org/1999/xhtml', + children: [ + { + tagName: 'div', + selector: 'status' + } + ] + } + ] + } +] export const NODE = { width: 220, diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-hooks.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-hooks.ts index 0823ad34a7..f9054d0f3e 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-hooks.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-hooks.ts @@ -15,12 +15,12 @@ * limitations under the License. */ -import { useCanvasInit } from './use-canvas-init'; -import { useGraphOperations } from './use-graph-operations'; -import { useCellActive } from './use-cell-active'; -import { useSidebarDrag } from './use-sidebar-drag'; -import { useCanvasDrop } from './use-canvas-drop'; -import { useNodeSearch } from './use-node-search'; +import { useCanvasInit } from './use-canvas-init' +import { useGraphOperations } from './use-graph-operations' +import { useCellActive } from './use-cell-active' +import { useSidebarDrag } from './use-sidebar-drag' +import { useCanvasDrop } from './use-canvas-drop' +import { useNodeSearch } from './use-node-search' export { useCanvasInit, @@ -28,5 +28,5 @@ export { useCellActive, useSidebarDrag, useCanvasDrop, - useNodeSearch, -} \ No newline at end of file + useNodeSearch +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-sidebar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-sidebar.tsx index c1c6b3d6fc..e1ec7d2f77 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-sidebar.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-sidebar.tsx @@ -15,12 +15,12 @@ * limitations under the License. */ -import type { PropType, Ref } from 'vue'; -import type { Dragged } from './dag'; +import type { PropType, Ref } from 'vue' +import type { Dragged } from './dag' import { defineComponent, ref, inject } from 'vue' -import { ALL_TASK_TYPES } from '../task/config'; -import { useSidebarDrag } from './dag-hooks'; -import Styles from './dag.module.scss'; +import { ALL_TASK_TYPES } from '../task/config' +import { useSidebarDrag } from './dag-hooks' +import Styles from './dag.module.scss' const props = { dragged: { @@ -29,40 +29,42 @@ const props = { x: 0, y: 0, type: '' - }), - }, + }) + } } export default defineComponent({ - name: "workflow-dag-sidebar", + name: 'workflow-dag-sidebar', props, setup(props) { const readonly = inject('readonly', ref(false)) - const dragged = props.dragged; + const dragged = props.dragged const { onDragStart } = useSidebarDrag({ readonly, dragged - }); - const allTaskTypes = Object.keys(ALL_TASK_TYPES).map(type => ({ + }) + const allTaskTypes = Object.keys(ALL_TASK_TYPES).map((type) => ({ type, ...ALL_TASK_TYPES[type] - })); + })) return () => (
- { - allTaskTypes.map(task => ( -
onDragStart(e, task.type)} - > - - {task.alias} -
- )) - } + {allTaskTypes.map((task) => ( +
onDragStart(e, task.type)} + > + + {task.alias} +
+ ))}
) } -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-toolbar.tsx index 599664cf54..6d2eef0f05 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag-toolbar.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag-toolbar.tsx @@ -18,19 +18,26 @@ import { defineComponent, ref, inject } from 'vue' import { useI18n } from 'vue-i18n' import Styles from './dag.module.scss' -import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui'; -import { SearchOutlined, DownloadOutlined, FullscreenOutlined, FullscreenExitOutlined, InfoCircleOutlined, FormatPainterOutlined } from '@vicons/antd'; -import { useNodeSearch } from './dag-hooks'; +import { NTooltip, NIcon, NButton, NSelect } from 'naive-ui' +import { + SearchOutlined, + DownloadOutlined, + FullscreenOutlined, + FullscreenExitOutlined, + InfoCircleOutlined, + FormatPainterOutlined +} from '@vicons/antd' +import { useNodeSearch } from './dag-hooks' import { DataUri } from '@antv/x6' -import { useFullscreen } from '@vueuse/core'; -import { useRouter } from 'vue-router'; +import { useFullscreen } from '@vueuse/core' +import { useRouter } from 'vue-router' export default defineComponent({ - name: "workflow-dag-toolbar", + name: 'workflow-dag-toolbar', setup(props, context) { - const { t } = useI18n(); - const graph = inject('graph', ref()); - const router = useRouter(); + const { t } = useI18n() + const graph = inject('graph', ref()) + const router = useRouter() /** * Node search and navigate @@ -41,15 +48,15 @@ export default defineComponent({ allNodes, toggleSearchInput, searchInputVisible - } = useNodeSearch({ graph }); + } = useNodeSearch({ graph }) /** * Download Workflow Image * @param {string} fileName - * @param {string} bgColor + * @param {string} bgColor */ const downloadPNG = (options = { fileName: 'dag', bgColor: '#f2f3f7' }) => { - const { fileName, bgColor } = options; + const { fileName, bgColor } = options graph.value?.toPNG( (dataUri: string) => { DataUri.downloadDataUri(dataUri, `${fileName}.png`) @@ -69,8 +76,7 @@ export default defineComponent({ /** * Toggle fullscreen */ - const { isFullscreen, toggle } = useFullscreen(); - + const { isFullscreen, toggle } = useFullscreen() /** * Open workflow version modal @@ -82,9 +88,7 @@ export default defineComponent({ /** * Open DAG format modal */ - const openDagFormatModal = () => { - - } + const openDagFormatModal = () => {} const onClose = () => { router.go(-1) @@ -92,89 +96,160 @@ export default defineComponent({ return () => (
- {t("project.dag.createWorkflow")} + + {t('project.dag.createWorkflow')} +
{/* Search node */} - ( - ( - - - - ) - }} /> - ), - default: () => t('project.dag.search') - }}> - + ( + ( + + + + ) + }} + /> + ), + default: () => t('project.dag.search') + }} + >
- +
{/* Download workflow PNG */} - ( - downloadPNG()} v-slots={{ - icon: () => ( - - - - ) - }} /> - ), - default: () => t('project.dag.download_png') - }}> - + ( + downloadPNG()} + v-slots={{ + icon: () => ( + + + + ) + }} + /> + ), + default: () => t('project.dag.download_png') + }} + > {/* Toggle fullscreen */} - ( - ( - - {isFullscreen.value ? : } - - ) - }} /> - ), - default: () => isFullscreen.value ? t('project.dag.fullscreen_close') : t('project.dag.fullscreen_open') - }}> - + ( + ( + + {isFullscreen.value ? ( + + ) : ( + + )} + + ) + }} + /> + ), + default: () => + isFullscreen.value + ? t('project.dag.fullscreen_close') + : t('project.dag.fullscreen_open') + }} + > {/* DAG Format */} - ( - ( - - - - ) - }} /> - ), - default: () => t('project.dag.format') - }}> - + ( + ( + + + + ) + }} + /> + ), + default: () => t('project.dag.format') + }} + > {/* Version info */} - ( - ( - - - - ) - }} /> - ), - default: () => t('project.dag.workflow_version') - }}> - + ( + ( + + + + ) + }} + /> + ), + default: () => t('project.dag.workflow_version') + }} + > {/* Save workflow */} - {t('project.dag.save')} + + {t('project.dag.save')} + {/* Return to previous page */} - {t('project.dag.close')} + + {t('project.dag.close')} +
) } -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/dag.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/dag.tsx index 2f0ce4a03d..6852412ecc 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/dag.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/dag.tsx @@ -15,31 +15,29 @@ * limitations under the License. */ -import type { Graph } from '@antv/x6'; +import type { Graph } from '@antv/x6' import { defineComponent, ref, provide } from 'vue' -import DagToolbar from './dag-toolbar'; -import DagCanvas from './dag-canvas'; -import DagSidebar from './dag-sidebar'; -import Styles from './dag.module.scss'; -import "./x6-style.scss"; - +import DagToolbar from './dag-toolbar' +import DagCanvas from './dag-canvas' +import DagSidebar from './dag-sidebar' +import Styles from './dag.module.scss' +import './x6-style.scss' export interface Dragged { - x: number; - y: number; - type: string; + x: number + y: number + type: string } export default defineComponent({ - name: "workflow-dag", + name: 'workflow-dag', setup(props, context) { - // Whether the graph can be operated - const readonly = ref(false); - provide('readonly', readonly); + const readonly = ref(false) + provide('readonly', readonly) - const graph = ref(); - provide('graph', graph); + const graph = ref() + provide('graph', graph) // The sidebar slots const toolbarSlots = { @@ -52,7 +50,7 @@ export default defineComponent({ x: 0, y: 0, type: '' - }); + }) return () => (
@@ -64,4 +62,4 @@ export default defineComponent({
) } -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/hook-demo.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/hook-demo.ts index 0e5f0e0855..73cd46566b 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/hook-demo.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/hook-demo.ts @@ -29,12 +29,8 @@ interface Options { * 3. Register custom graphics */ export function useCanvasInit(options: Options) { - // Whether the graph can be operated - const { } = options; - + const {} = options - return { - - } -} \ No newline at end of file + return {} +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-drop.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-drop.ts index 32fb0d0dd1..7036052c2b 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-drop.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-drop.ts @@ -15,56 +15,54 @@ * limitations under the License. */ -import type { Ref } from 'vue'; +import type { Ref } from 'vue' import type { Graph } from '@antv/x6' import type { Dragged } from './dag' -import { genTaskCodeList } from '@/service/modules/task-definition'; -import { useGraphOperations } from './dag-hooks'; +import { genTaskCodeList } from '@/service/modules/task-definition' +import { useGraphOperations } from './dag-hooks' interface Options { - readonly: Ref; - graph: Ref; - container: Ref; - dragged: Ref; - projectCode: string; + readonly: Ref + graph: Ref + container: Ref + dragged: Ref + projectCode: string } /** * Drop sidebar item in canvas */ export function useCanvasDrop(options: Options) { + const { readonly, graph, container, dragged, projectCode } = options - const { readonly, graph, container, dragged, projectCode } = options; - - const { addNode } = useGraphOperations({ graph }); + const { addNode } = useGraphOperations({ graph }) const onDrop = (e: DragEvent) => { - e.stopPropagation(); - e.preventDefault(); + e.stopPropagation() + e.preventDefault() if (readonly.value) { - return; + return } if (dragged.value && graph.value && container.value && projectCode) { - const { type, x: eX, y: eY } = dragged.value; - const { x, y } = graph.value.clientToLocal(e.clientX, e.clientY); - const genNums = 1; - genTaskCodeList(genNums, Number(projectCode)) - .then((res) => { - const [code] = res - addNode(code + '', type, { x: x - eX, y: y - eY }) - // openTaskConfigModel(code, type) - }) + const { type, x: eX, y: eY } = dragged.value + const { x, y } = graph.value.clientToLocal(e.clientX, e.clientY) + const genNums = 1 + genTaskCodeList(genNums, Number(projectCode)).then((res) => { + const [code] = res + addNode(code + '', type, { x: x - eX, y: y - eY }) + // openTaskConfigModel(code, type) + }) } } const preventDefault = (e: DragEvent) => { - e.preventDefault(); + e.preventDefault() } return { onDrop, onDragenter: preventDefault, onDragover: preventDefault, - onDragleave: preventDefault, + onDragleave: preventDefault } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-init.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-init.ts index 16c4479d89..01ea5dafc5 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-init.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-canvas-init.ts @@ -15,20 +15,15 @@ * limitations under the License. */ -import type { Node } from '@antv/x6'; +import type { Node } from '@antv/x6' import { ref, onMounted, Ref, onUnmounted } from 'vue' import { Graph } from '@antv/x6' -import { - NODE, - EDGE, - X6_NODE_NAME, - X6_EDGE_NAME, -} from './dag-config' -import { debounce } from 'lodash'; +import { NODE, EDGE, X6_NODE_NAME, X6_EDGE_NAME } from './dag-config' +import { debounce } from 'lodash' interface Options { - readonly: Ref; - graph: Ref; + readonly: Ref + graph: Ref } /** @@ -38,13 +33,12 @@ interface Options { * 3. Register custom graphics */ export function useCanvasInit(options: Options) { - // Whether the graph can be operated - const { readonly, graph } = options; + const { readonly, graph } = options - const paper = ref(); // The graph mount HTMLElement - const minimap = ref(); // The minimap mount HTMLElement - const container = ref(); // The container of paper and minimap + const paper = ref() // The graph mount HTMLElement + const minimap = ref() // The minimap mount HTMLElement + const container = ref() // The container of paper and minimap /** * Graph Init, bind graph to the dom @@ -129,7 +123,7 @@ export function useCanvasInit(options: Options) { } onMounted(() => { - graph.value = graphInit(); + graph.value = graphInit() // Make sure the edge starts with node, not port graph.value.on('edge:connected', ({ isNew, edge }) => { if (isNew) { @@ -143,10 +137,10 @@ export function useCanvasInit(options: Options) { * Redraw when the page is resized */ const paperResize = debounce(() => { - if (!container.value) return; + if (!container.value) return const w = container.value.offsetWidth const h = container.value.offsetHeight - graph.value?.resize(w, h); + graph.value?.resize(w, h) }, 200) onMounted(() => { window.addEventListener('resize', paperResize) @@ -174,4 +168,4 @@ export function useCanvasInit(options: Options) { minimap, container } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-cell-active.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-cell-active.ts index 341f3d0bae..4a580942c7 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-cell-active.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-cell-active.ts @@ -16,9 +16,9 @@ */ import type { Ref } from 'vue' -import { onMounted, ref } from 'vue'; +import { onMounted, ref } from 'vue' import type { Node, Graph, Edge, Cell } from '@antv/x6' -import _ from 'lodash'; +import _ from 'lodash' import { X6_PORT_OUT_NAME, PORT_HOVER, @@ -30,7 +30,7 @@ import { EDGE, EDGE_SELECTED, EDGE_HOVER -} from './dag-config'; +} from './dag-config' interface Options { graph: Ref @@ -40,17 +40,19 @@ interface Options { * Change the style on cell hover and select */ export function useCellActive(options: Options) { - - const { graph } = options; - const hoverCell = ref(); + const { graph } = options + const hoverCell = ref() const isStatusIcon = (tagName: string) => { - if (!tagName) return false; - return tagName.toLocaleLowerCase() === 'em' || tagName.toLocaleLowerCase() === 'body' + if (!tagName) return false + return ( + tagName.toLocaleLowerCase() === 'em' || + tagName.toLocaleLowerCase() === 'body' + ) } function setEdgeStyle(edge: Edge) { - const isHover = edge === hoverCell.value; + const isHover = edge === hoverCell.value const isSelected = graph.value?.isSelected(edge) // TODO // const labelName = this.getEdgeLabelName ? this.getEdgeLabelName(edge) : '' @@ -70,7 +72,7 @@ export function useCellActive(options: Options) { ..._.merge( { attrs: _.cloneDeep(edgeProps.defaultLabel.attrs) - }, + } // { // attrs: { label: { text: labelName } } // } @@ -83,7 +85,9 @@ export function useCellActive(options: Options) { const isHover = node === hoverCell.value const isSelected = graph.value?.isSelected(node) const portHover = _.cloneDeep(PORT_HOVER.groups[X6_PORT_OUT_NAME].attrs) - const portSelected = _.cloneDeep(PORT_SELECTED.groups[X6_PORT_OUT_NAME].attrs) + const portSelected = _.cloneDeep( + PORT_SELECTED.groups[X6_PORT_OUT_NAME].attrs + ) const portDefault = _.cloneDeep(PORT.groups[X6_PORT_OUT_NAME].attrs) const nodeHover = _.merge(_.cloneDeep(NODE.attrs), NODE_HOVER.attrs) const nodeSelected = _.merge(_.cloneDeep(NODE.attrs), NODE_SELECTED.attrs) @@ -108,11 +112,7 @@ export function useCellActive(options: Options) { } node.setAttrByPath('image/xlink:href', img) node.setAttrs(nodeAttrs) - node.setPortProp( - X6_PORT_OUT_NAME, - 'attrs', - portAttrs - ) + node.setPortProp(X6_PORT_OUT_NAME, 'attrs', portAttrs) } function updateCellStyle(cell: Cell) { @@ -151,4 +151,4 @@ export function useCellActive(options: Options) { return { hoverCell } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-graph-operations.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-graph-operations.ts index c48eb6a214..a3127d8f14 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-graph-operations.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-graph-operations.ts @@ -17,27 +17,22 @@ import type { Ref } from 'vue' import type { Node, Graph, Edge } from '@antv/x6' -import { - X6_NODE_NAME, - X6_EDGE_NAME, -} from './dag-config' -import { ALL_TASK_TYPES } from '../task/config'; -import utils from '@/utils'; +import { X6_NODE_NAME, X6_EDGE_NAME } from './dag-config' +import { ALL_TASK_TYPES } from '../task/config' +import utils from '@/utils' interface Options { graph: Ref } -type Coordinate = { x: number; y: number; } +type Coordinate = { x: number; y: number } /** * Expose some graph operation methods * @param {Options} options */ export function useGraphOperations(options: Options) { - - const { graph } = options; - + const { graph } = options /** * Build edge metadata @@ -45,7 +40,11 @@ export function useGraphOperations(options: Options) { * @param {string} targetId * @param {string} label */ - function buildEdgeMetadata(sourceId: string, targetId: string, label: string = ''): Edge.Metadata { + function buildEdgeMetadata( + sourceId: string, + targetId: string, + label: string = '' + ): Edge.Metadata { return { shape: X6_EDGE_NAME, source: { @@ -64,8 +63,13 @@ export function useGraphOperations(options: Options) { * @param {string} taskType * @param {Coordinate} coordinate Default is { x: 100, y: 100 } */ - function buildNodeMetadata(id: string, type: string, taskName: string, coordinate: Coordinate = { x: 100, y: 100 }): Node.Metadata { - const truncation = taskName ? utils.truncateText(taskName, 18) : id; + function buildNodeMetadata( + id: string, + type: string, + taskName: string, + coordinate: Coordinate = { x: 100, y: 100 } + ): Node.Metadata { + const truncation = taskName ? utils.truncateText(taskName, 18) : id return { id: id, shape: X6_NODE_NAME, @@ -93,7 +97,11 @@ export function useGraphOperations(options: Options) { * @param {string} taskType * @param {Coordinate} coordinate Default is { x: 100, y: 100 } */ - function addNode(id: string, type: string, coordinate: Coordinate = { x: 100, y: 100 }) { + function addNode( + id: string, + type: string, + coordinate: Coordinate = { x: 100, y: 100 } + ) { if (!ALL_TASK_TYPES[type]) { console.warn(`taskType:${type} is invalid!`) return @@ -139,12 +147,12 @@ export function useGraphOperations(options: Options) { * @param {string} code */ function navigateTo(code: string) { - if (!graph.value) return; + if (!graph.value) return const cell = graph.value.getCellById(code) graph.value.scrollToCell(cell, { animation: { duration: 600 } }) graph.value.cleanSelection() graph.value.select(cell) - }; + } return { buildEdgeMetadata, @@ -152,6 +160,6 @@ export function useGraphOperations(options: Options) { addNode, setNodeName, getNodes, - navigateTo, + navigateTo } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-node-search.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-node-search.ts index 0b26f309f1..59d96e8852 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-node-search.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-node-search.ts @@ -15,34 +15,32 @@ * limitations under the License. */ -import type { Graph } from '@antv/x6'; +import type { Graph } from '@antv/x6' import { ref, Ref } from 'vue' -import { useGraphOperations } from './dag-hooks'; - +import { useGraphOperations } from './dag-hooks' interface Options { - graph: Ref; + graph: Ref } /** * Node search and navigate */ export function useNodeSearch(options: Options) { + const { graph } = options - const { graph } = options; - - const searchInputVisible = ref(false); - const allNodes = ref([]); + const searchInputVisible = ref(false) + const allNodes = ref([]) const toggleSearchInput = () => { - searchInputVisible.value = !searchInputVisible.value; + searchInputVisible.value = !searchInputVisible.value } - const { getNodes, navigateTo } = useGraphOperations({ graph }); + const { getNodes, navigateTo } = useGraphOperations({ graph }) const searchNode = (val: string) => { navigateTo(val) } const getAllNodes = () => { - const nodes = getNodes(); - allNodes.value = nodes.map(node => { + const nodes = getNodes() + allNodes.value = nodes.map((node) => { return { label: node.name, value: node.code @@ -55,6 +53,6 @@ export function useNodeSearch(options: Options) { getAllNodes, allNodes, toggleSearchInput, - searchInputVisible, + searchInputVisible } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/use-sidebar-drag.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/use-sidebar-drag.ts index b501453a25..d7b6c5367b 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/use-sidebar-drag.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/use-sidebar-drag.ts @@ -15,20 +15,19 @@ * limitations under the License. */ -import type { Ref } from 'vue'; -import type { Dragged } from './dag'; +import type { Ref } from 'vue' +import type { Dragged } from './dag' interface Options { - readonly: Ref; - dragged: Ref; + readonly: Ref + dragged: Ref } /** * Sidebar drag */ export function useSidebarDrag(options: Options) { - - const { readonly, dragged } = options; + const { readonly, dragged } = options const onDragStart = (e: DragEvent, type: string) => { if (readonly.value) { @@ -45,4 +44,4 @@ export function useSidebarDrag(options: Options) { return { onDragStart } -} \ No newline at end of file +} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx index eff2932110..06fda18e44 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx @@ -16,18 +16,17 @@ */ import { defineComponent } from 'vue' -import Dag from './dag'; -import { NCard } from 'naive-ui'; -import styles from './workflow-definition-create.module.scss'; +import Dag from './dag' +import { NCard } from 'naive-ui' +import styles from './workflow-definition-create.module.scss' export default defineComponent({ - name: "WorkflowDefinitionCreate", + name: 'WorkflowDefinitionCreate', setup() { - const slots = { toolbarLeft: () => left-operations, toolbarRight: () => right-operations - }; + } return () => ( @@ -35,4 +34,4 @@ export default defineComponent({ ) } -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-details.tsx index ea9c726e83..ebcf9000bd 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-details.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-details.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "WorkflowDefinitionDetails", + name: 'WorkflowDefinitionDetails', setup() { - return () => ( -
WorkflowDefinitionDetails
- ) + return () =>
WorkflowDefinitionDetails
} -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-list.tsx index 2878ba5ab0..5b06713a54 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-list.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-list.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "WorkflowDefinitionList", + name: 'WorkflowDefinitionList', setup() { - return () => ( -
WorkflowDefinitionList
- ) + return () =>
WorkflowDefinitionList
} -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-details.tsx index 137c442a87..01d107e883 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-details.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-details.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "WorkflowInstanceDetails", + name: 'WorkflowInstanceDetails', setup() { - return () => ( -
WorkflowInstanceDetails
- ) + return () =>
WorkflowInstanceDetails
} -}) \ No newline at end of file +}) diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-list.tsx index 619e6ca22d..b79c035860 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-list.tsx +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-instance-list.tsx @@ -18,10 +18,8 @@ import { defineComponent } from 'vue' export default defineComponent({ - name: "WorkflowInstanceList", + name: 'WorkflowInstanceList', setup() { - return () => ( -
WorkflowInstanceList
- ) + return () =>
WorkflowInstanceList
} -}) \ No newline at end of file +})