From 8d7ed3f6c4aedce57ed714df958e68abe3fefde7 Mon Sep 17 00:00:00 2001
From: calvin <jianghuachinacom@163.com>
Date: Sat, 19 Feb 2022 16:20:37 +0800
Subject: [PATCH] [cherry-pick][Fix-8050] When the task is forbidden the node
 will obviously display.

---
 .../home/pages/dag/_source/canvas/canvas.vue  | 27 ++++++++++++++++---
 .../js/conf/home/pages/dag/_source/dag.vue    |  3 +++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
index 74387be3bd..38fb849361 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
@@ -297,7 +297,7 @@
 
         // Remove all tools when the mouse leaving
         this.graph.on('node:mouseleave', ({ node }) => {
-          node.removeTools()
+          node.removeTool('button')
         })
       },
       /**
@@ -365,6 +365,17 @@
           node.setData({ taskName: name })
         }
       },
+      setNodeForbiddenStatus (id, flag) {
+        id += ''
+        const node = this.graph.getCellById(id)
+        if (node) {
+          if (flag) {
+            node.attr('rect/fill', '#c4c4c4')
+          } else {
+            node.attr('rect/fill', '#ffffff')
+          }
+        }
+      },
       /**
        * Convert the graph to JSON
        * @return {{cells:Cell[]}}
@@ -522,20 +533,22 @@
           console.warn(`taskType:${taskType} is invalid!`)
           return
         }
-        const node = this.genNodeJSON(id, taskType, '', coordinate)
+        const node = this.genNodeJSON(id, taskType, '', false, coordinate)
         this.graph.addNode(node)
       },
       /**
        * generate node json
        * @param {number|string} id
        * @param {string} taskType
+       * @param {boolean} forbidden flag
        * @param {{x:number;y:number}} coordinate Default is { x: 100, y: 100 }
        */
-      genNodeJSON (id, taskType, taskName, coordinate = { x: 100, y: 100 }) {
+      genNodeJSON (id, taskType, taskName, flag, coordinate = { x: 100, y: 100 }) {
         id += ''
         const url = require(`../images/task-icos/${taskType.toLocaleLowerCase()}.png`)
         const truncation = taskName ? this.truncateText(taskName, 18) : id
-        return {
+
+        const nodeJson = {
           id: id,
           shape: X6_NODE_NAME,
           x: coordinate.x,
@@ -554,6 +567,12 @@
             }
           }
         }
+
+        if (flag) {
+          nodeJson.attrs.rect = { fill: '#c4c4c4' }
+        }
+
+        return nodeJson
       },
       /**
        * generate edge json
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index bac2aa1ce1..5362a9a4f3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -268,6 +268,7 @@
       addTaskInfo ({ item }) {
         this.addTask(item)
         this.$refs.canvas.setNodeName(item.code, item.name)
+        this.$refs.canvas.setNodeForbiddenStatus(item.code, item.flag === 'NO')
         this.taskDrawer = false
       },
       closeTaskDrawer ({ flag }) {
@@ -411,6 +412,7 @@
             task.code,
             task.taskType,
             task.name,
+            task.flag === 'NO',
             {
               x: location.x,
               y: location.y
@@ -418,6 +420,7 @@
           )
           nodes.push(node)
         })
+
         connects
           .filter((r) => !!r.preTaskCode)
           .forEach((c) => {