[dolphinscheduler] 01/40: [Improvement-14835][UI] Support to immediately adjust the fill color of the task node after changing the run flag of the task. (#14837)

[zh...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zhongjiajie pushed a commit to branch 3.2.0-release
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git

commit baf7b5ef450ef86a1be820d56bfb2d4064a411df
Author: calvin <ji...@163.com>
AuthorDate: Fri Sep 1 09:01:16 2023 +0800

    [Improvement-14835][UI] Support to immediately adjust the fill color of the task node after changing the run flag of the task. (#14837)
    
    * worked out this issue
    
    (cherry picked from commit 168a3930faa6da24b4a7b1852e8b89a48350d132)
---
 .../projects/workflow/components/dag/use-cell-update.ts    | 14 ++++++++++++++
 .../projects/workflow/components/dag/use-task-edit.ts      |  6 ++++++
 2 files changed, 20 insertions(+)

diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts
index 63e6927474..b4f87a76e6 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-cell-update.ts
@@ -51,6 +51,19 @@ export function useCellUpdate(options: Options) {
     }
   }
 
+  /**
+   * Set the node's fill color by id
+   * @param {string} id
+   * @param {string} color
+   */
+  function setNodeFillColor(id: string, color: string) {
+    const node = graph.value?.getCellById(id)
+    if (!node) {
+      return false
+    }
+    node.attr('rect/fill', color)
+  }
+
   /**
    * Add a node to the graph
    * @param {string} id
@@ -124,6 +137,7 @@ export function useCellUpdate(options: Options) {
 
   return {
     setNodeName,
+    setNodeFillColor,
     setNodeEdge,
     addNode,
     removeNode,
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts
index 9056d94e48..4590490eb3 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-task-edit.ts
@@ -47,6 +47,7 @@ export function useTaskEdit(options: Options) {
     getSources,
     getTargets,
     setNodeName,
+    setNodeFillColor,
     setNodeEdge
   } = useCellUpdate({
     graph
@@ -167,6 +168,11 @@ export function useTaskEdit(options: Options) {
       processDefinition.value.taskDefinitionList.map((task) => {
         if (task.code === currTask.value?.code) {
           setNodeName(task.code + '', taskDef.name)
+          let fillColor = '#f3f3f5'
+          if (task.flag === 'NO') {
+            fillColor = '#ffffff'
+          }
+          setNodeFillColor(task.code + '', fillColor)
 
           setNodeEdge(String(task.code), data.preTasks)
           updatePreTasks(data.preTasks, task.code)