[Improvement-7092][UI] Optimize DAG to adapt to situations without locations (#7102)

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue

@@ -50,7 +50,7 @@
   import { Graph, DataUri } from '@antv/x6'
   import dagTaskbar from './taskbar.vue'
   import contextMenu from './contextMenu.vue'
-  import layoutConfigModal, { LAYOUT_TYPE } from './layoutConfigModal.vue'
+  import layoutConfigModal, { LAYOUT_TYPE, DEFAULT_LAYOUT_CONFIG } from './layoutConfigModal.vue'
   import {
     NODE,
     EDGE,
@@ -430,6 +430,9 @@
        * @desc Auto layout use @antv/layout
        */
       format (layoutConfig) {
+        if (!layoutConfig) {
+          layoutConfig = DEFAULT_LAYOUT_CONFIG
+        }
         this.graph.cleanSelection()
 
         let layoutFunc = null

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/layoutConfigModal.vue

@@ -63,18 +63,20 @@
     DAGRE: 'dagre'
   }
 
+  export const DEFAULT_LAYOUT_CONFIG = {
+    cols: 0,
+    nodesep: 50,
+    padding: 50,
+    ranksep: 50,
+    rows: 0,
+    type: LAYOUT_TYPE.DAGRE
+  }
+
   export default {
     data () {
       return {
         visible: false,
-        form: {
+        form: { ...DEFAULT_LAYOUT_CONFIG },
-          type: LAYOUT_TYPE.DAGRE,
-          rows: 0,
-          cols: 0,
-          padding: 50,
-          ranksep: 50,
-          nodesep: 50
-        },
         LAYOUT_TYPE
       }
     },

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -404,6 +404,7 @@
       buildGraphJSON (tasks, locations, connects) {
         const nodes = []
         const edges = []
+        if (!locations) { locations = [] }
         tasks.forEach((task) => {
           const location = locations.find((l) => l.taskCode === task.code) || {}
           const node = this.$refs.canvas.genNodeJSON(
@@ -488,6 +489,10 @@
         const connects = this.connects
         const json = this.buildGraphJSON(tasks, locations, connects)
         this.$refs.canvas.fromJSON(json)
+        // Auto format
+        if (!locations) {
+          this.$refs.canvas.format()
+        }
       },
       /**
        * Return to the previous process

dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js

@@ -18,6 +18,16 @@
 import _ from 'lodash'
 import io from '@/module/io'
 
+// Avoid passing in illegal values when users directly call third-party interfaces
+const convertLocations = (locationStr) => {
+  let locations = null
+  if (!locationStr) return locations
+  try {
+    locations = JSON.parse(locationStr)
+  } catch (error) {}
+  return Array.isArray(locations) ? locations : null
+}
+
 export default {
   /**
    *  Task status acquisition
@@ -140,7 +150,7 @@ export default {
         // taskRelationJson
         state.connects = res.data.processTaskRelationList
         // locations
-        state.locations = JSON.parse(res.data.processDefinition.locations)
+        state.locations = convertLocations(res.data.processDefinition.locations)
         // global params
         state.globalParams = res.data.processDefinition.globalParamList
         // timeout
@@ -240,7 +250,7 @@ export default {
         // connects
         state.connects = processTaskRelationList
         // locations
-        state.locations = JSON.parse(processDefinition.locations)
+        state.locations = convertLocations(processDefinition.locations)
         // global params
         state.globalParams = processDefinition.globalParamList
         // timeout