You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/10/28 12:27:13 UTC
[dolphinscheduler] branch dev updated: [Feature][UI] Create a dynamic task component canvas. (#12577)
This is an automated email from the ASF dual-hosted git repository.
songjian 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 213bf43ed6 [Feature][UI] Create a dynamic task component canvas. (#12577)
213bf43ed6 is described below
commit 213bf43ed620ce402d550e8a0a19da97e3b9a4c2
Author: songjianet <17...@qq.com>
AuthorDate: Fri Oct 28 20:27:02 2022 +0800
[Feature][UI] Create a dynamic task component canvas. (#12577)
* [Feature][UI] Create a dynamic task component canvas.
* [Feature][UI] Create a dynamic task component canvas.
* [Feature][UI] Create a dynamic task component canvas.
* [Feature][UI] Create a dynamic task component canvas.
* [Feature][UI] Create a dynamic task component canvas.
---
dolphinscheduler-ui/package.json | 1 +
dolphinscheduler-ui/pnpm-lock.yaml | 17 ++++
.../components/dynamic-dag/dag-canvas.module.scss | 34 ++++++++
.../workflow/components/dynamic-dag/dag-canvas.tsx | 96 ++++++++++++++++++++++
.../components/dynamic-dag/dag-node.module.scss | 23 ++++++
.../workflow/components/dynamic-dag/dag-node.tsx | 33 ++++++++
.../workflow/components/dynamic-dag/dag-setting.ts | 21 +++++
.../components/dynamic-dag/dag-sidebar.module.scss | 23 ++++++
.../components/dynamic-dag/dag-sidebar.tsx | 58 +++++++++++++
.../components/dynamic-dag/index.module.scss | 21 +++++
.../workflow/components/dynamic-dag/index.tsx | 53 ++++++++++++
.../components/dynamic-dag/use-dag-edge.ts | 30 +++++++
.../components/dynamic-dag/use-dag-graph.ts | 35 ++++++++
.../components/dynamic-dag/use-dag-node.ts | 22 +++++
.../components/dynamic-dag/use-dag-resize.ts | 32 ++++++++
.../workflow/components/dynamic-dag/use-sidebar.ts | 30 +++++++
.../components/dynamic-dag/use-task-form.ts | 40 +++++++++
.../projects/workflow/definition/create/index.tsx | 6 +-
.../views/projects/workflow/definition/index.tsx | 28 +++++--
19 files changed, 593 insertions(+), 10 deletions(-)
diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index f41ea1fff7..4a9f650cc1 100644
--- a/dolphinscheduler-ui/package.json
+++ b/dolphinscheduler-ui/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@antv/layout": "0.1.31",
"@antv/x6": "^1.34.1",
+ "@antv/x6-vue-shape": "^1.5.3",
"@vueuse/core": "^9.2.0",
"axios": "^0.27.2",
"date-fns": "^2.29.3",
diff --git a/dolphinscheduler-ui/pnpm-lock.yaml b/dolphinscheduler-ui/pnpm-lock.yaml
index 67abc01cf1..758f917302 100644
--- a/dolphinscheduler-ui/pnpm-lock.yaml
+++ b/dolphinscheduler-ui/pnpm-lock.yaml
@@ -20,6 +20,7 @@ lockfileVersion: 5.4
specifiers:
'@antv/layout': 0.1.31
'@antv/x6': ^1.34.1
+ '@antv/x6-vue-shape': ^1.5.3
'@types/js-cookie': ^3.0.2
'@types/lodash': ^4.14.185
'@types/node': ^18.7.18
@@ -65,6 +66,7 @@ specifiers:
dependencies:
'@antv/layout': 0.1.31
'@antv/x6': 1.34.1
+ '@antv/x6-vue-shape': 1.5.3_@antv+x6@1.34.1+vue@3.2.39
'@vueuse/core': 9.2.0_vue@3.2.39
axios: 0.27.2
date-fns: 2.29.3
@@ -171,6 +173,21 @@ packages:
ml-matrix: 6.10.2
dev: false
+ /@antv/x6-vue-shape/1.5.3_@antv+x6@1.34.1+vue@3.2.39:
+ resolution: {integrity: sha512-VnuXd8gE6bONYp4U51n3PxjM1UTuotca51f+hjaMqOy1X+HQf/nAN69oD+Y2wsPDRFZnZcipVol/dLxHS3Fd9w==}
+ peerDependencies:
+ '@antv/x6': '>=1.0.0'
+ '@vue/composition-api': ^1.0.0-rc.6
+ vue: ^2.6.12 || ^3.0.0
+ peerDependenciesMeta:
+ '@vue/composition-api':
+ optional: true
+ dependencies:
+ '@antv/x6': 1.34.1
+ vue: 3.2.39
+ vue-demi: 0.13.11_vue@3.2.39
+ dev: false
+
/@antv/x6/1.34.1:
resolution: {integrity: sha512-4dNE9h//SY5ID8W+9YU5dE58d0+V9lCXlg0CiI6+4jFCud3RfLkPjni1dpmUo+HDWtrQ0wB80o42HLat9+FYZA==}
dependencies:
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss
new file mode 100644
index 0000000000..657e07bfe6
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+.container {
+ height: 100%;
+ width: 100%;
+}
+
+.dag-container {
+ height: 100%;
+ width: 100%;
+}
+
+.minimap {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+ border: dashed 1px #e4e4e4;
+ z-index: 9000;
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
new file mode 100644
index 0000000000..c3f43a1bbb
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
@@ -0,0 +1,96 @@
+/*
+ * 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, ref, onMounted } from 'vue'
+import { Graph } from '@antv/x6'
+import { useDagResize } from './use-dag-resize'
+import { useDagGraph } from './use-dag-graph'
+import { useDagNode } from './use-dag-node'
+import { useDagEdge } from './use-dag-edge'
+import { DagNodeName, DagEdgeName } from './dag-setting'
+import styles from './dag-canvas.module.scss'
+
+const DagCanvas = defineComponent({
+ name: 'DagCanvas',
+ emits: ['drop'],
+ setup(props, context) {
+ const container = ref()
+ const dagContainer = ref()
+ const minimapContainer = ref()
+ const graph = ref<Graph>()
+
+ if (graph.value) {
+ useDagResize(dagContainer.value, graph.value)
+ }
+
+ const initGraph = () => {
+ graph.value = useDagGraph(container.value, minimapContainer.value)
+ }
+
+ const registerNode = () => {
+ Graph.unregisterNode(DagNodeName)
+ Graph.registerNode(DagNodeName, useDagNode())
+ }
+
+ const registerEdge = () => {
+ Graph.unregisterEdge(DagEdgeName)
+ Graph.registerEdge(
+ DagEdgeName,
+ useDagEdge(),
+ true
+ )
+ }
+
+ const handlePreventDefault = (e: DragEvent) => {
+ e.preventDefault()
+ }
+
+ const handleDrop = (e: DragEvent) => {
+ context.emit('drop', e)
+ }
+
+ onMounted(() => {
+ initGraph()
+ registerNode()
+ registerEdge()
+ })
+
+ return {
+ container,
+ 'dag-container': dagContainer,
+ minimapContainer,
+ handlePreventDefault,
+ handleDrop
+ }
+ },
+ render() {
+ return(
+ <>
+ <div ref='container' class={styles.container}
+ onDrop={this.handleDrop}
+ onDragenter={this.handlePreventDefault}
+ onDragover={this.handlePreventDefault}
+ onDragleave={this.handlePreventDefault}>
+ <div ref='dag-container' class={styles['dag-container']}/>
+ </div>
+ <div ref='minimapContainer' class={styles.minimap}/>
+ </>
+ )
+ }
+})
+
+export { DagCanvas }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss
new file mode 100644
index 0000000000..b877c0aed4
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.dag-node {
+ cursor: pointer;
+ height: 20px;
+ width: 100px;
+ border: 1px solid #1890ff;
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
new file mode 100644
index 0000000000..cbd6e8d261
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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 styles from './dag-node.module.scss'
+
+const DagNode = defineComponent({
+ name: 'DagNode',
+ setup() {
+
+ },
+ render() {
+ return (
+ <div class={styles['dag-node']}>1111</div>
+ )
+ }
+})
+
+export { DagNode }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
new file mode 100644
index 0000000000..7f9cdc66e7
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const DagNodeName = 'dag-node'
+export const DagEdgeName = 'dag-edge'
+export const NodeWidth = '200'
+export const NodeHeight = '50'
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
new file mode 100644
index 0000000000..7ada37d22e
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.task-item {
+ cursor: pointer;
+ height: 20px;
+ width: 100px;
+ border: 1px solid #1890ff;
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
new file mode 100644
index 0000000000..b35b69d02e
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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, onMounted, toRefs } from 'vue'
+import { useSidebar } from './use-sidebar'
+import styles from './dag-sidebar.module.scss'
+
+const DagSidebar = defineComponent({
+ name: 'DagSidebar',
+ emits: ['Dragend'],
+ setup(props, context) {
+ const { variables, getTaskList } = useSidebar()
+
+ const handleDragend = (e: DragEvent, task: any) => {
+ context.emit('Dragend', e, task)
+ }
+
+ onMounted(() => {
+ getTaskList()
+ })
+
+ return {
+ ...toRefs(variables),
+ handleDragend
+ }
+ },
+ render() {
+ return (
+ <div>
+ {
+ this.taskList.map(task => {
+ return (
+ <div class={styles['task-item']} draggable='true' onDragend={(e: DragEvent) => this.handleDragend(e, task)}>
+ {task}
+ </div>
+ )
+ })
+ }
+ </div>
+ )
+ }
+})
+
+export { DagSidebar }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss
new file mode 100644
index 0000000000..6088857ad4
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+.workflow-dag {
+ display: flex;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
new file mode 100644
index 0000000000..38312ff29c
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 { DagSidebar } from './dag-sidebar'
+import { DagCanvas } from './dag-canvas'
+import styles from './index.module.scss'
+
+const DynamicDag = defineComponent({
+ name: 'DynamicDag',
+ setup() {
+ const handelDragend = () => {
+ //console.log(e, task)
+ //if (readonly.value) {
+ // e.preventDefault()
+ // return
+ //}
+ //dragged.value = {
+ // x: e.offsetX,
+ // y: e.offsetY,
+ // type: task
+ //}
+ }
+
+ return {
+ handelDragend
+ }
+ },
+ render() {
+ return (
+ <div class={styles['workflow-dag']}>
+ <DagSidebar onDragend={this.handelDragend} />
+ <DagCanvas />
+ </div>
+ )
+ }
+})
+
+export { DynamicDag }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts
new file mode 100644
index 0000000000..0ea27d1a68
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts
@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function useDagEdge() {
+ return {
+ attrs: {
+ line: {
+ stroke: '#666',
+ strokeWidth: 0.5
+ }
+ },
+ router: {
+ name: 'orth'
+ }
+ }
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts
new file mode 100644
index 0000000000..5fa5e28812
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts
@@ -0,0 +1,35 @@
+/*
+ * 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 { Graph } from '@antv/x6'
+
+export function useDagGraph(container: any, minimapContainer: any) {
+ return new Graph({
+ container,
+ scroller: true,
+ grid: {
+ size: 10,
+ visible: true
+ },
+ minimap: {
+ enabled: true,
+ width: 200,
+ height: 120,
+ container: minimapContainer
+ }
+ })
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
new file mode 100644
index 0000000000..d8b06a5805
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function useDagNode() {
+ return {
+ inherit: 'rect'
+ }
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts
new file mode 100644
index 0000000000..1cc1f83284
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { debounce } from 'lodash'
+import { useResizeObserver } from '@vueuse/core'
+import { Graph } from '@antv/x6'
+
+export function useDagResize(dagContainer: any, graph: Graph) {
+ const resize = debounce(() => {
+ if (dagContainer) {
+ const w = dagContainer.offsetWidth
+ const h = dagContainer.offsetHeight
+ graph.resize(w, h)
+ }
+ }, 200)
+
+ useResizeObserver(dagContainer, resize)
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
new file mode 100644
index 0000000000..a5d2c5ce60
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { reactive } from 'vue'
+
+export function useSidebar() {
+ const variables = reactive({
+ taskList: []
+ })
+
+ const getTaskList = () => {
+ variables.taskList = ['shell'] as any
+ }
+
+ return { variables, getTaskList }
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
new file mode 100644
index 0000000000..7f0ba2ef4b
--- /dev/null
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
@@ -0,0 +1,40 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const useTaskForm = {
+ locales: {
+ zh_CN: {
+ node_name: '节点名称',
+ node_name_tips: '节点名称不能为空'
+ },
+ en_US: {
+ node_name: 'Node Name',
+ node_name_tips: 'Node name cannot be empty'
+ }
+ },
+ items: [
+ {
+ label: 'node_name',
+ type: 'input',
+ field: '',
+ validate: {
+ trigger: ['input', 'blur'],
+ message: 'node_name_tips'
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx
index fe7b9f3447..d15440ab7b 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx
@@ -18,6 +18,7 @@
import { defineComponent } from 'vue'
import { useMessage } from 'naive-ui'
import Dag from '../../components/dag'
+import { DynamicDag } from '@/views/projects/workflow/components/dynamic-dag'
import { useThemeStore } from '@/store/theme/theme'
import { useRoute, useRouter } from 'vue-router'
import {
@@ -41,7 +42,6 @@ export default defineComponent({
name: 'WorkflowDefinitionCreate',
setup() {
const theme = useThemeStore()
-
const message = useMessage()
const { t } = useI18n()
const route = useRoute()
@@ -89,7 +89,9 @@ export default defineComponent({
theme.darkTheme ? Styles['dark'] : Styles['light']
]}
>
- <Dag projectCode={projectCode} onSave={onSave} />
+ {
+ route.query.dynamic === 'true' ? <DynamicDag /> : <Dag projectCode={projectCode} onSave={onSave} />
+ }
</div>
)
}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 8773ea7c8e..d3bc8bb758 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -94,6 +94,16 @@ export default defineComponent({
path: `/projects/${projectCode}/workflow/definitions/create`
})
}
+
+ const createDefinitionDynamic = () => {
+ router.push({
+ path: `/projects/${projectCode}/workflow/definitions/create`,
+ query: {
+ dynamic: 'true'
+ }
+ })
+ }
+
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
watch(useI18n().locale, () => {
@@ -110,6 +120,7 @@ export default defineComponent({
handleSearch,
handleUpdateList,
createDefinition,
+ createDefinitionDynamic,
handleChangePageSize,
batchDeleteWorkflow,
batchExportWorkflow,
@@ -137,6 +148,15 @@ export default defineComponent({
>
{t('project.workflow.create_workflow')}
</NButton>
+ {
+ this.uiSettingStore.getDynamicTask && <NButton
+ type='warning'
+ size='small'
+ onClick={this.createDefinitionDynamic}
+ >
+ {t('project.workflow.create_workflow_dynamic')}
+ </NButton>
+ }
<NButton
strong
secondary
@@ -145,14 +165,6 @@ export default defineComponent({
>
{t('project.workflow.import_workflow')}
</NButton>
- {
- this.uiSettingStore.getDynamicTask && <NButton
- size='small'
- type='warning'
- >
- {t('project.workflow.create_workflow_dynamic')}
- </NButton>
- }
</NSpace>
<NSpace>
<NInput