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

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

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

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

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