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 de3d9423d1 [Fix-10829][UI] display real workflow relation in `WorkFlow
Relation` page (#10836)
de3d9423d1 is described below
commit de3d9423d149087dffe0c321976deb443644fb9f
Author: rockfang <[email protected]>
AuthorDate: Fri Jul 8 00:19:13 2022 -0500
[Fix-10829][UI] display real workflow relation in `WorkFlow Relation` page
(#10836)
---
dolphinscheduler-ui/src/components/result/index.tsx | 2 +-
.../projects/workflow/relation/components/Graph.tsx | 18 +++++++++++++++++-
.../src/views/projects/workflow/relation/index.tsx | 1 +
.../views/projects/workflow/relation/use-relation.ts | 19 ++++++++++++++-----
4 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/dolphinscheduler-ui/src/components/result/index.tsx
b/dolphinscheduler-ui/src/components/result/index.tsx
index dcc31c3990..84f31a1f65 100644
--- a/dolphinscheduler-ui/src/components/result/index.tsx
+++ b/dolphinscheduler-ui/src/components/result/index.tsx
@@ -43,7 +43,7 @@ const props = {
},
contentStyle: {
type: String as PropType<string | CSSProperties>,
- default: defaultContentStyle
+ default: JSON.stringify(defaultContentStyle)
}
}
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx
index 64e150c568..ad6d54332b 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx
+++
b/dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx
@@ -33,6 +33,9 @@ const props = {
type: Array as PropType<Array<any>>,
default: () => []
},
+ links: {
+ default: () => []
+ },
labelShow: {
type: Boolean as PropType<boolean>,
default: true
@@ -117,7 +120,7 @@ const GraphChart = defineComponent({
draggable: true,
force: {
repulsion: 300,
- edgeLength: 100
+ edgeLength: 200
},
symbol: 'roundRect',
symbolSize: 70,
@@ -136,6 +139,11 @@ const GraphChart = defineComponent({
return newStr.length > 60 ? newStr.slice(0, 60) + '...' : newStr
}
},
+ edgeSymbol: ['circle', 'arrow'],
+ edgeSymbolSize: [4, 10],
+ edgeLabel: {
+ fontSize: 20
+ },
data: props.seriesData.map((item) => {
const category = getCategory(
Number(item.schedulePublishStatus),
@@ -175,6 +183,14 @@ const GraphChart = defineComponent({
itemStyle
}
}),
+ links: props.links,
+ lineStyle: {
+ opacity: 0.9,
+ width: 2,
+ curveness: 0
+ },
+ nodeScaleRatio: 0,
+ zoom: 1,
categories: legendData
}
]
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
index 3bbb229a0e..6da6326adf 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
@@ -79,6 +79,7 @@ const workflowRelation = defineComponent({
<Graph
seriesData={this.seriesData}
labelShow={this.labelShow}
+ links={this.links}
/>
),
'header-extra': () => (
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/relation/use-relation.ts
b/dolphinscheduler-ui/src/views/projects/workflow/relation/use-relation.ts
index 7515fc3ea6..7b49e910f7 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/relation/use-relation.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/relation/use-relation.ts
@@ -32,19 +32,28 @@ export function useRelation() {
workflowOptions: [],
workflow: ref(null),
seriesData: [],
- labelShow: ref(true)
+ labelShow: ref(true),
+ links: []
})
- const formatWorkflow = (obj: Array<WorkFlowListRes>) => {
+ const formatWorkflow = (obj: WorkflowRes) => {
variables.seriesData = []
+ variables.links = []
- variables.seriesData = obj.map((item) => {
+ variables.seriesData = obj.workFlowList.map((item) => {
return {
name: item.workFlowName,
id: item.workFlowCode,
...item
}
}) as any
+
+ variables.links = obj.workFlowRelationList.map((item) => {
+ return {
+ source: String(item.sourceWorkFlowCode),
+ target: String(item.targetWorkFlowCode)
+ }
+ }) as any
}
const getWorkflowName = (projectCode: number) => {
@@ -71,7 +80,7 @@ export function useRelation() {
{ workFlowCode: workflowCode },
{ projectCode }
).then((res: WorkflowRes) => {
- formatWorkflow(res.workFlowList)
+ formatWorkflow(res)
}),
{}
)
@@ -84,7 +93,7 @@ export function useRelation() {
queryWorkFlowList({
projectCode
}).then((res: WorkflowRes) => {
- formatWorkflow(res.workFlowList)
+ formatWorkflow(res)
}),
{}
)
