Browse Source

[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.
3.2.0-release
songjianet 2 years ago committed by GitHub
parent
commit
213bf43ed6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      dolphinscheduler-ui/package.json
  2. 17
      dolphinscheduler-ui/pnpm-lock.yaml
  3. 34
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.module.scss
  4. 96
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-canvas.tsx
  5. 23
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.module.scss
  6. 33
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-node.tsx
  7. 21
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-setting.ts
  8. 23
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.module.scss
  9. 58
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
  10. 21
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.module.scss
  11. 53
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
  12. 30
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-edge.ts
  13. 35
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-graph.ts
  14. 22
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-node.ts
  15. 32
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-dag-resize.ts
  16. 30
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
  17. 40
      dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-task-form.ts
  18. 6
      dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx
  19. 28
      dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

1
dolphinscheduler-ui/package.json

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@antv/layout": "0.1.31", "@antv/layout": "0.1.31",
"@antv/x6": "^1.34.1", "@antv/x6": "^1.34.1",
"@antv/x6-vue-shape": "^1.5.3",
"@vueuse/core": "^9.2.0", "@vueuse/core": "^9.2.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"date-fns": "^2.29.3", "date-fns": "^2.29.3",

17
dolphinscheduler-ui/pnpm-lock.yaml

@ -20,6 +20,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@antv/layout': 0.1.31 '@antv/layout': 0.1.31
'@antv/x6': ^1.34.1 '@antv/x6': ^1.34.1
'@antv/x6-vue-shape': ^1.5.3
'@types/js-cookie': ^3.0.2 '@types/js-cookie': ^3.0.2
'@types/lodash': ^4.14.185 '@types/lodash': ^4.14.185
'@types/node': ^18.7.18 '@types/node': ^18.7.18
@ -65,6 +66,7 @@ specifiers:
dependencies: dependencies:
'@antv/layout': 0.1.31 '@antv/layout': 0.1.31
'@antv/x6': 1.34.1 '@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 '@vueuse/core': 9.2.0_vue@3.2.39
axios: 0.27.2 axios: 0.27.2
date-fns: 2.29.3 date-fns: 2.29.3
@ -171,6 +173,21 @@ packages:
ml-matrix: 6.10.2 ml-matrix: 6.10.2
dev: false 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: /@antv/x6/1.34.1:
resolution: {integrity: sha512-4dNE9h//SY5ID8W+9YU5dE58d0+V9lCXlg0CiI6+4jFCud3RfLkPjni1dpmUo+HDWtrQ0wB80o42HLat9+FYZA==} resolution: {integrity: sha512-4dNE9h//SY5ID8W+9YU5dE58d0+V9lCXlg0CiI6+4jFCud3RfLkPjni1dpmUo+HDWtrQ0wB80o42HLat9+FYZA==}
dependencies: dependencies:

34
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;
}

96
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 }

23
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;
}

33
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 }

21
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'

23
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;
}

58
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 }

21
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%;
}

53
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 }

30
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'
}
}
}

35
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
}
})
}

22
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'
}
}

32
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)
}

30
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 }
}

40
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'
}
}
]
}

6
dolphinscheduler-ui/src/views/projects/workflow/definition/create/index.tsx

@ -18,6 +18,7 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { useMessage } from 'naive-ui' import { useMessage } from 'naive-ui'
import Dag from '../../components/dag' import Dag from '../../components/dag'
import { DynamicDag } from '@/views/projects/workflow/components/dynamic-dag'
import { useThemeStore } from '@/store/theme/theme' import { useThemeStore } from '@/store/theme/theme'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { import {
@ -41,7 +42,6 @@ export default defineComponent({
name: 'WorkflowDefinitionCreate', name: 'WorkflowDefinitionCreate',
setup() { setup() {
const theme = useThemeStore() const theme = useThemeStore()
const message = useMessage() const message = useMessage()
const { t } = useI18n() const { t } = useI18n()
const route = useRoute() const route = useRoute()
@ -89,7 +89,9 @@ export default defineComponent({
theme.darkTheme ? Styles['dark'] : Styles['light'] theme.darkTheme ? Styles['dark'] : Styles['light']
]} ]}
> >
<Dag projectCode={projectCode} onSave={onSave} /> {
route.query.dynamic === 'true' ? <DynamicDag /> : <Dag projectCode={projectCode} onSave={onSave} />
}
</div> </div>
) )
} }

28
dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx

@ -94,6 +94,16 @@ export default defineComponent({
path: `/projects/${projectCode}/workflow/definitions/create` 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 const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
watch(useI18n().locale, () => { watch(useI18n().locale, () => {
@ -110,6 +120,7 @@ export default defineComponent({
handleSearch, handleSearch,
handleUpdateList, handleUpdateList,
createDefinition, createDefinition,
createDefinitionDynamic,
handleChangePageSize, handleChangePageSize,
batchDeleteWorkflow, batchDeleteWorkflow,
batchExportWorkflow, batchExportWorkflow,
@ -137,6 +148,15 @@ export default defineComponent({
> >
{t('project.workflow.create_workflow')} {t('project.workflow.create_workflow')}
</NButton> </NButton>
{
this.uiSettingStore.getDynamicTask && <NButton
type='warning'
size='small'
onClick={this.createDefinitionDynamic}
>
{t('project.workflow.create_workflow_dynamic')}
</NButton>
}
<NButton <NButton
strong strong
secondary secondary
@ -145,14 +165,6 @@ export default defineComponent({
> >
{t('project.workflow.import_workflow')} {t('project.workflow.import_workflow')}
</NButton> </NButton>
{
this.uiSettingStore.getDynamicTask && <NButton
size='small'
type='warning'
>
{t('project.workflow.create_workflow_dynamic')}
</NButton>
}
</NSpace> </NSpace>
<NSpace> <NSpace>
<NInput <NInput

Loading…
Cancel
Save