(airflow) branch main updated: AIP-38 Add operator name and type to the graph view (#44655)

[bbovenzi]

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

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new fbda2177281 AIP-38 Add operator name and type to the graph view 
(#44655)
fbda2177281 is described below

commit fbda2177281cbf00df615a5737b939de0a51bd74
Author: Pierre Jeambrun <pierrejb...@gmail.com>
AuthorDate: Thu Dec 5 02:39:57 2024 +0800

    AIP-38 Add operator name and type to the graph view (#44655)
---
 airflow/ui/src/pages/DagsList/Dag/Graph/TaskNode.tsx      | 10 +++++++---
 airflow/ui/src/pages/DagsList/Dag/Graph/reactflowUtils.ts |  2 ++
 airflow/ui/src/pages/DagsList/Dag/Graph/useGraphLayout.ts |  1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/airflow/ui/src/pages/DagsList/Dag/Graph/TaskNode.tsx 
b/airflow/ui/src/pages/DagsList/Dag/Graph/TaskNode.tsx
index 7cac53f6256..8237238362c 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Graph/TaskNode.tsx
+++ b/airflow/ui/src/pages/DagsList/Dag/Graph/TaskNode.tsx
@@ -34,7 +34,9 @@ export const TaskNode = ({
     isMapped,
     isOpen,
     label,
+    operator,
     setupTeardownType,
+    type: nodeType,
     width,
   },
   id,
@@ -61,9 +63,11 @@ export const TaskNode = ({
           width={`${width}px`}
         >
           <Box>
-            {/* TODO: replace 'Operator' */}
-            <Text fontSize="xs" fontWeight="lighter" textTransform="uppercase">
-              {isGroup ? "Task Group" : "Operator"}
+            <Text fontSize="xs" fontWeight="lighter" 
textTransform="capitalize">
+              {isGroup ? "Task Group" : operator}
+            </Text>
+            <Text color="blue.solid" textTransform="capitalize">
+              {nodeType}
             </Text>
             <TaskName
               id={id}
diff --git a/airflow/ui/src/pages/DagsList/Dag/Graph/reactflowUtils.ts 
b/airflow/ui/src/pages/DagsList/Dag/Graph/reactflowUtils.ts
index 793eb840c5d..91268f42b6f 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Graph/reactflowUtils.ts
+++ b/airflow/ui/src/pages/DagsList/Dag/Graph/reactflowUtils.ts
@@ -31,7 +31,9 @@ export type CustomNodeProps = {
   isMapped?: boolean;
   isOpen?: boolean;
   label: string;
+  operator?: string | null;
   setupTeardownType?: NodeResponse["setup_teardown_type"];
+  type: string;
   width?: number;
 };
 
diff --git a/airflow/ui/src/pages/DagsList/Dag/Graph/useGraphLayout.ts 
b/airflow/ui/src/pages/DagsList/Dag/Graph/useGraphLayout.ts
index 352c9ada008..3cdb6423db7 100644
--- a/airflow/ui/src/pages/DagsList/Dag/Graph/useGraphLayout.ts
+++ b/airflow/ui/src/pages/DagsList/Dag/Graph/useGraphLayout.ts
@@ -222,6 +222,7 @@ const generateElkGraph = ({
       isGroup: Boolean(node.children),
       isMapped: node.is_mapped === null ? undefined : node.is_mapped,
       label: node.label,
+      operator: node.operator,
       setupTeardownType: node.setup_teardown_type,
       type: node.type,
       width,