Browse Source

[Fix-10829][UI] display real workflow relation in `WorkFlow Relation` page (#10836)

3.0.0/version-upgrade
rockfang 2 years ago committed by caishunfeng
parent
commit
d8ee6c915c
  1. 2
      dolphinscheduler-ui/src/components/result/index.tsx
  2. 18
      dolphinscheduler-ui/src/views/projects/workflow/relation/components/Graph.tsx
  3. 1
      dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
  4. 19
      dolphinscheduler-ui/src/views/projects/workflow/relation/use-relation.ts

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

18
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
}
]

1
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': () => (

19
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)
}),
{}
)

Loading…
Cancel
Save