You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/01/19 13:56:57 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Add workflow relation layout and format. (#8125)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 8ef72fc [Feature][UI Next] Add workflow relation layout and format. (#8125)
8ef72fc is described below
commit 8ef72fcffceedbf2cc5f1f47f13d7ef911d125ab
Author: songjianet <17...@qq.com>
AuthorDate: Wed Jan 19 21:56:18 2022 +0800
[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 +-
.../src/service/modules/task-definition/index.ts | 5 +-
dolphinscheduler-ui-next/src/store/menu/menu.ts | 2 +-
dolphinscheduler-ui-next/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
.../{project => projects}/list/index.module.scss | 0
.../src/views/{project => projects}/list/index.tsx | 0
.../views/{project => projects}/list/use-form.ts | 0
.../views/{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
.../workflow-monitor/components/state-card.tsx | 0
.../workflow-monitor/index.tsx | 0
.../workflow-monitor/types.ts | 0
.../workflow-monitor/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
.../index.tsx} | 44 ++--
.../src/views/projects/workflow/dag-canvas.tsx | 44 ++--
.../src/views/projects/workflow/dag-config.ts | 34 +--
.../src/views/projects/workflow/dag-hooks.ts | 16 +-
.../src/views/projects/workflow/dag-sidebar.tsx | 52 +++--
.../src/views/projects/workflow/dag-toolbar.tsx | 251 +++++++++++++--------
.../src/views/projects/workflow/dag.tsx | 34 ++-
.../src/views/projects/workflow/hook-demo.ts | 10 +-
.../src/views/projects/workflow/use-canvas-drop.ts | 50 ++--
.../src/views/projects/workflow/use-canvas-init.ts | 32 ++-
.../src/views/projects/workflow/use-cell-active.ts | 34 +--
.../projects/workflow/use-graph-operations.ts | 44 ++--
.../src/views/projects/workflow/use-node-search.ts | 26 +--
.../views/projects/workflow/use-sidebar-drag.ts | 13 +-
.../workflow/workflow-definition-create.tsx | 13 +-
.../workflow/workflow-definition-details.tsx | 8 +-
.../projects/workflow/workflow-definition-list.tsx | 8 +-
.../workflow/workflow-instance-details.tsx | 8 +-
.../projects/workflow/workflow-instance-list.tsx | 8 +-
47 files changed, 595 insertions(+), 487 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx b/dolphinscheduler-ui-next/src/components/chart/modules/Graph.tsx
index 4eec06f..c11c54a 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<string | number>,
- default: 400
- },
- width: {
- type: [String, Number] as PropType<string | number>,
- default: '100%'
- },
- tooltipFormat: {
- type: String as PropType<string>,
- default: ''
- },
- legendData: {
- type: Array as PropType<Array<string>>,
- default: () => []
- },
- seriesData: {
- type: Array as PropType<Array<string>>,
- default: () => []
- },
- labelShow: {
- type: Array as PropType<Array<string>>,
- default: () => []
- },
- linksData: {
- type: Array as PropType<Array<string>>,
- default: () => []
- },
- labelFormat: {
- type: String as PropType<string>,
- default: ''
- }
+ height: {
+ type: [String, Number] as PropType<string | number>,
+ default: 400
+ },
+ width: {
+ type: [String, Number] as PropType<string | number>,
+ default: '100%'
+ },
+ tooltipFormat: {
+ type: String as PropType<string>,
+ default: ''
+ },
+ legendData: {
+ type: Array as PropType<Array<string>>,
+ default: () => []
+ },
+ seriesData: {
+ type: Array as PropType<Array<string>>,
+ default: () => []
+ },
+ labelShow: {
+ type: Array as PropType<Array<string>>,
+ default: () => []
+ },
+ linksData: {
+ type: Array as PropType<Array<string>>,
+ default: () => []
+ },
+ labelFormat: {
+ type: String as PropType<string>,
+ default: ''
+ }
}
const GraphChart = defineComponent({
- name: 'GraphChart',
- props,
- setup(props) {
- const graphChartRef: Ref<HTMLDivElement | null> = ref(null)
+ name: 'GraphChart',
+ props,
+ setup(props) {
+ const graphChartRef: Ref<HTMLDivElement | null> = 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 (
- <div
- ref='graphChartRef'
- style={{
- height: typeof height === 'number' ? height + 'px' : height,
- width: typeof width === 'number' ? width + 'px' : width
- }}
- />
- )
- }
+ return { graphChartRef }
+ },
+ render() {
+ const { height, width } = this
+ return (
+ <div
+ ref='graphChartRef'
+ style={{
+ height: typeof height === 'number' ? height + 'px' : height,
+ width: typeof width === 'number' ? width + 'px' : width
+ }}
+ />
+ )
+ }
})
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 2d23ae8..689a95b 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 f49adf8..aa058b5 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 517f819..a77d862 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 1c36fd1..eb4c8b1 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 56454a5..86c04b8 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -48,20 +48,28 @@ export default {
}
},
{
+ 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 0770c86..bc501f9 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<unknown, number[]>({
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 e1beed3..0149d7c 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 0bc12cd..ddcd951 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 4639c2c..c6a02b2 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 2605ac0..a127875 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 e6769c4..7b43218 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 () => (
- <div>Projects</div>
- )
+ return () => <div>Projects</div>
}
-})
\ 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 f19efb7..260cbc9 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 3ae6873..31df000 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 () => (
- <div>TaskConfigModal</div>
- )
+ return () => <div>TaskConfigModal</div>
}
-})
\ 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/workflow-definition-create.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx
similarity index 51%
copy from dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx
copy to dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx
index eff2932..c88abde 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/workflow-definition-create.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-relation/index.tsx
@@ -16,23 +16,39 @@
*/
import { defineComponent } from 'vue'
-import Dag from './dag';
-import { NCard } from 'naive-ui';
-import styles from './workflow-definition-create.module.scss';
+import { useI18n } from 'vue-i18n'
+import { NSelect, NButton, NIcon } from 'naive-ui'
+import { ReloadOutlined, EyeOutlined } from '@vicons/antd'
+import Card from '@/components/card'
-export default defineComponent({
- name: "WorkflowDefinitionCreate",
+const workflowRelation = defineComponent({
+ name: 'workflow-relation',
setup() {
+ const { t } = useI18n()
- const slots = {
- toolbarLeft: () => <span>left-operations</span>,
- toolbarRight: () => <span>right-operations</span>
- };
+ return { t }
+ },
+ render() {
+ const { t } = this
- return () => (
- <NCard class={styles.container}>
- <Dag v-slots={slots} />
- </NCard>
+ return (
+ <Card title={t('project.workflow_relation.workflow_relation')}>
+ <div>
+ <NSelect />
+ <NButton strong secondary circle type='info'>
+ <NIcon>
+ <ReloadOutlined />
+ </NIcon>
+ </NButton>
+ <NButton strong secondary circle type='info'>
+ <NIcon>
+ <EyeOutlined />
+ </NIcon>
+ </NButton>
+ </div>
+ </Card>
)
}
-})
\ No newline at end of file
+})
+
+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 797c876..e953f4a 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 () => (
- <div ref={container} class={Styles.canvas} onDrop={onDrop} onDragenter={onDragenter} onDragover={onDragover} onDragleave={onDragleave}>
+ <div
+ ref={container}
+ class={Styles.canvas}
+ onDrop={onDrop}
+ onDragenter={onDragenter}
+ onDragover={onDragover}
+ onDragleave={onDragleave}
+ >
<div ref={paper} class={Styles.paper}></div>
<div ref={minimap} class={Styles.minimap}></div>
</div>
- );
+ )
}
-})
\ 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 3f8238f..5f73e2f 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 0823ad3..f9054d0 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 c1c6b3d..e1ec7d2 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 () => (
<div class={Styles.sidebar}>
- {
- allTaskTypes.map(task => (
- <div
- class={Styles.draggable}
- draggable="true"
- onDragstart={(e) => onDragStart(e, task.type)}
- >
- <em class={`${Styles['sidebar-icon']} ${Styles['icon-' + task.type.toLocaleLowerCase()]}`}></em>
- <span>{task.alias}</span>
- </div>
- ))
- }
+ {allTaskTypes.map((task) => (
+ <div
+ class={Styles.draggable}
+ draggable='true'
+ onDragstart={(e) => onDragStart(e, task.type)}
+ >
+ <em
+ class={`${Styles['sidebar-icon']} ${
+ Styles['icon-' + task.type.toLocaleLowerCase()]
+ }`}
+ ></em>
+ <span>{task.alias}</span>
+ </div>
+ ))}
</div>
)
}
-})
\ 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 599664c..6d2eef0 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 () => (
<div class={Styles.toolbar}>
- <span class={Styles['workflow-name']}>{t("project.dag.createWorkflow")}</span>
+ <span class={Styles['workflow-name']}>
+ {t('project.dag.createWorkflow')}
+ </span>
<div class={Styles['toolbar-right-part']}>
{/* Search node */}
- <NTooltip v-slots={{
- trigger: () => (
- <NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={toggleSearchInput} v-slots={{
- icon: () => (
- <NIcon>
- <SearchOutlined />
- </NIcon>
- )
- }} />
- ),
- default: () => t('project.dag.search')
- }}>
- </NTooltip>
+ <NTooltip
+ v-slots={{
+ trigger: () => (
+ <NButton
+ class={Styles['toolbar-right-item']}
+ strong
+ secondary
+ circle
+ type='info'
+ onClick={toggleSearchInput}
+ v-slots={{
+ icon: () => (
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ )
+ }}
+ />
+ ),
+ default: () => t('project.dag.search')
+ }}
+ ></NTooltip>
<div
- class={`${Styles['toolbar-right-item']} ${Styles['node-selector']} ${searchInputVisible.value ? Styles['visible'] : ''}`}
+ class={`${Styles['toolbar-right-item']} ${
+ Styles['node-selector']
+ } ${searchInputVisible.value ? Styles['visible'] : ''}`}
>
- <NSelect size="small" options={allNodes.value} onFocus={getAllNodes} onUpdateValue={searchNode} filterable />
+ <NSelect
+ size='small'
+ options={allNodes.value}
+ onFocus={getAllNodes}
+ onUpdateValue={searchNode}
+ filterable
+ />
</div>
{/* Download workflow PNG */}
- <NTooltip v-slots={{
- trigger: () => (
- <NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={() => downloadPNG()} v-slots={{
- icon: () => (
- <NIcon>
- <DownloadOutlined />
- </NIcon>
- )
- }} />
- ),
- default: () => t('project.dag.download_png')
- }}>
- </NTooltip>
+ <NTooltip
+ v-slots={{
+ trigger: () => (
+ <NButton
+ class={Styles['toolbar-right-item']}
+ strong
+ secondary
+ circle
+ type='info'
+ onClick={() => downloadPNG()}
+ v-slots={{
+ icon: () => (
+ <NIcon>
+ <DownloadOutlined />
+ </NIcon>
+ )
+ }}
+ />
+ ),
+ default: () => t('project.dag.download_png')
+ }}
+ ></NTooltip>
{/* Toggle fullscreen */}
- <NTooltip v-slots={{
- trigger: () => (
- <NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={toggle} v-slots={{
- icon: () => (
- <NIcon>
- {isFullscreen.value ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
- </NIcon>
- )
- }} />
- ),
- default: () => isFullscreen.value ? t('project.dag.fullscreen_close') : t('project.dag.fullscreen_open')
- }}>
- </NTooltip>
+ <NTooltip
+ v-slots={{
+ trigger: () => (
+ <NButton
+ class={Styles['toolbar-right-item']}
+ strong
+ secondary
+ circle
+ type='info'
+ onClick={toggle}
+ v-slots={{
+ icon: () => (
+ <NIcon>
+ {isFullscreen.value ? (
+ <FullscreenExitOutlined />
+ ) : (
+ <FullscreenOutlined />
+ )}
+ </NIcon>
+ )
+ }}
+ />
+ ),
+ default: () =>
+ isFullscreen.value
+ ? t('project.dag.fullscreen_close')
+ : t('project.dag.fullscreen_open')
+ }}
+ ></NTooltip>
{/* DAG Format */}
- <NTooltip v-slots={{
- trigger: () => (
- <NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={openDagFormatModal} v-slots={{
- icon: () => (
- <NIcon>
- <FormatPainterOutlined />
- </NIcon>
- )
- }} />
- ),
- default: () => t('project.dag.format')
- }}>
- </NTooltip>
+ <NTooltip
+ v-slots={{
+ trigger: () => (
+ <NButton
+ class={Styles['toolbar-right-item']}
+ strong
+ secondary
+ circle
+ type='info'
+ onClick={openDagFormatModal}
+ v-slots={{
+ icon: () => (
+ <NIcon>
+ <FormatPainterOutlined />
+ </NIcon>
+ )
+ }}
+ />
+ ),
+ default: () => t('project.dag.format')
+ }}
+ ></NTooltip>
{/* Version info */}
- <NTooltip v-slots={{
- trigger: () => (
- <NButton class={Styles['toolbar-right-item']} strong secondary circle type="info" onClick={openVersionModal} v-slots={{
- icon: () => (
- <NIcon>
- <InfoCircleOutlined />
- </NIcon>
- )
- }} />
- ),
- default: () => t('project.dag.workflow_version')
- }}>
- </NTooltip>
+ <NTooltip
+ v-slots={{
+ trigger: () => (
+ <NButton
+ class={Styles['toolbar-right-item']}
+ strong
+ secondary
+ circle
+ type='info'
+ onClick={openVersionModal}
+ v-slots={{
+ icon: () => (
+ <NIcon>
+ <InfoCircleOutlined />
+ </NIcon>
+ )
+ }}
+ />
+ ),
+ default: () => t('project.dag.workflow_version')
+ }}
+ ></NTooltip>
{/* Save workflow */}
- <NButton class={Styles['toolbar-right-item']} type="info" secondary round>{t('project.dag.save')}</NButton>
+ <NButton
+ class={Styles['toolbar-right-item']}
+ type='info'
+ secondary
+ round
+ >
+ {t('project.dag.save')}
+ </NButton>
{/* Return to previous page */}
- <NButton secondary round onClick={onClose}>{t('project.dag.close')}</NButton>
+ <NButton secondary round onClick={onClose}>
+ {t('project.dag.close')}
+ </NButton>
</div>
</div>
)
}
-})
\ 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 2f0ce4a..6852412 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<Graph>();
- provide('graph', graph);
+ const graph = ref<Graph>()
+ provide('graph', graph)
// The sidebar slots
const toolbarSlots = {
@@ -52,7 +50,7 @@ export default defineComponent({
x: 0,
y: 0,
type: ''
- });
+ })
return () => (
<div class={Styles.dag}>
@@ -64,4 +62,4 @@ export default defineComponent({
</div>
)
}
-})
\ 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 0e5f0e0..73cd465 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 32fb0d0..7036052 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<boolean>;
- graph: Ref<Graph | undefined>;
- container: Ref<HTMLElement | undefined>;
- dragged: Ref<Dragged>;
- projectCode: string;
+ readonly: Ref<boolean>
+ graph: Ref<Graph | undefined>
+ container: Ref<HTMLElement | undefined>
+ dragged: Ref<Dragged>
+ 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 16c4479..01ea5da 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<boolean>;
- graph: Ref<Graph | undefined>;
+ readonly: Ref<boolean>
+ graph: Ref<Graph | undefined>
}
/**
@@ -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<HTMLElement>(); // The graph mount HTMLElement
- const minimap = ref<HTMLElement>(); // The minimap mount HTMLElement
- const container = ref<HTMLElement>(); // The container of paper and minimap
+ const paper = ref<HTMLElement>() // The graph mount HTMLElement
+ const minimap = ref<HTMLElement>() // The minimap mount HTMLElement
+ const container = ref<HTMLElement>() // 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 341f3d0..4a58094 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<Graph | undefined>
@@ -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 c48eb6a..a3127d8 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<Graph | undefined>
}
-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 0b26f30..59d96e8 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 | undefined>;
+ graph: Ref<Graph | undefined>
}
/**
* Node search and navigate
*/
export function useNodeSearch(options: Options) {
+ const { graph } = options
- const { graph } = options;
-
- const searchInputVisible = ref(false);
- const allNodes = ref<any>([]);
+ const searchInputVisible = ref(false)
+ const allNodes = ref<any>([])
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 b501453..d7b6c53 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<boolean>;
- dragged: Ref<Dragged>;
+ readonly: Ref<boolean>
+ dragged: Ref<Dragged>
}
/**
* 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 eff2932..06fda18 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: () => <span>left-operations</span>,
toolbarRight: () => <span>right-operations</span>
- };
+ }
return () => (
<NCard class={styles.container}>
@@ -35,4 +34,4 @@ export default defineComponent({
</NCard>
)
}
-})
\ 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 ea9c726..ebcf900 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 () => (
- <div>WorkflowDefinitionDetails</div>
- )
+ return () => <div>WorkflowDefinitionDetails</div>
}
-})
\ 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 2878ba5..5b06713 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 () => (
- <div>WorkflowDefinitionList</div>
- )
+ return () => <div>WorkflowDefinitionList</div>
}
-})
\ 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 137c442..01d107e 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 () => (
- <div>WorkflowInstanceDetails</div>
- )
+ return () => <div>WorkflowInstanceDetails</div>
}
-})
\ 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 619e6ca..b79c035 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 () => (
- <div>WorkflowInstanceList</div>
- )
+ return () => <div>WorkflowInstanceList</div>
}
-})
\ No newline at end of file
+})