From 213bf43ed620ce402d550e8a0a19da97e3b9a4c2 Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Fri, 28 Oct 2022 20:27:02 +0800 Subject: [PATCH] [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 ++++ .../dynamic-dag/dag-canvas.module.scss | 34 +++++++ .../components/dynamic-dag/dag-canvas.tsx | 96 +++++++++++++++++++ .../dynamic-dag/dag-node.module.scss | 23 +++++ .../components/dynamic-dag/dag-node.tsx | 33 +++++++ .../components/dynamic-dag/dag-setting.ts | 21 ++++ .../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 +++++++ .../components/dynamic-dag/use-sidebar.ts | 30 ++++++ .../components/dynamic-dag/use-task-form.ts | 40 ++++++++ .../workflow/definition/create/index.tsx | 6 +- .../projects/workflow/definition/index.tsx | 28 ++++-- 19 files changed, 593 insertions(+), 10 deletions(-) create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts create mode 100644 dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts 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() + + 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( + <> +
+
+
+
+ + ) + } +}) + +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 ( +
1111
+ ) + } +}) + +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 ( +
+ { + this.taskList.map(task => { + return ( +
this.handleDragend(e, task)}> + {task} +
+ ) + }) + } +
+ ) + } +}) + +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 ( +
+ + +
+ ) + } +}) + +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'] ]} > - + { + route.query.dynamic === 'true' ? : + }
) } 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')} + { + this.uiSettingStore.getDynamicTask && + {t('project.workflow.create_workflow_dynamic')} + + } {t('project.workflow.import_workflow')} - { - this.uiSettingStore.getDynamicTask && - {t('project.workflow.create_workflow_dynamic')} - - }