Show dataset aliases in dependency graphs (apache#41128)

eladkal · Jul 31, 2024 · 77c4863 · 77c4863
1 parent 16ed4df
commit 77c4863
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/airflow/www/package.json b/airflow/www/package.json
@@ -129,7 +129,7 @@
     "moment-timezone": "^0.5.43",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-icons": "^5.1.0",
+    "react-icons": "^5.2.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.4",
     "react-query": "^3.39.1",

diff --git a/airflow/www/static/css/graph.css b/airflow/www/static/css/graph.css
@@ -166,6 +166,11 @@ g.node text {
   background-color: #fcecd4;
 }
 
+.legend-item.dataset-alias {
+  float: left;
+  background-color: #e8cfe4;
+}
+
 g.node.dag rect {
   fill: #e8f7e4;
 }
@@ -181,3 +186,7 @@ g.node.sensor rect {
 g.node.dataset rect {
   fill: #fcecd4;
 }
+
+g.node.dataset-alias rect {
+  fill: #e8cfe4;
+}
diff --git a/airflow/www/static/js/datasets/Graph/Legend.tsx b/airflow/www/static/js/datasets/Graph/Legend.tsx
@@ -21,6 +21,7 @@ import React from "react";
 import { Flex, Box, Text } from "@chakra-ui/react";
 import { MdOutlineAccountTree } from "react-icons/md";
 import { HiDatabase } from "react-icons/hi";
+import { PiRectangleDashed } from "react-icons/pi";
 
 const Legend = () => (
   <Box
@@ -35,10 +36,14 @@ const Legend = () => (
         <MdOutlineAccountTree size="14px" />
         <Text ml={1}>DAG</Text>
       </Flex>
-      <Flex alignItems="center">
+      <Flex alignItems="center" mr={2}>
         <HiDatabase size="14px" />
         <Text ml={1}>Dataset</Text>
       </Flex>
+      <Flex alignItems="center">
+        <PiRectangleDashed size="14px" />
+        <Text ml={1}>Dataset Alias</Text>
+      </Flex>
     </Flex>
   </Box>
 );

diff --git a/airflow/www/static/js/datasets/Graph/Node.tsx b/airflow/www/static/js/datasets/Graph/Node.tsx
@@ -22,6 +22,7 @@ import { Box, Text, Flex, useTheme } from "@chakra-ui/react";
 import { Handle, NodeProps, Position } from "reactflow";
 import { MdPlayArrow, MdSensors } from "react-icons/md";
 import { HiDatabase } from "react-icons/hi";
+import { PiRectangleDashed } from "react-icons/pi";
 
 import DagNode from "./DagNode";
 
@@ -72,6 +73,7 @@ const BaseNode = ({
           {type === "dataset" && <HiDatabase size="16px" />}
           {type === "sensor" && <MdSensors size="16px" />}
           {type === "trigger" && <MdPlayArrow size="16px" />}
+          {type === "dataset-alias" && <PiRectangleDashed size="16px" />}
           <Text ml={2}>{label}</Text>
         </Flex>
       )}

diff --git a/airflow/www/templates/airflow/dag_dependencies.html b/airflow/www/templates/airflow/dag_dependencies.html
@@ -44,6 +44,7 @@ <h2>
     <span class="legend-item trigger">trigger</span>
     <span class="legend-item sensor">sensor</span>
     <span class="legend-item dataset">dataset</span>
+    <span class="legend-item dataset-alias">dataset alias</span>
   </div>
   <div style="float:right">Last refresh: <time datetime="{{ last_refresh }}">{{ last_refresh }}</time></div>
 </div>

diff --git a/airflow/www/yarn.lock b/airflow/www/yarn.lock
@@ -10003,10 +10003,10 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-icons@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.1.0.tgz#9e7533cc256571a610c2a1ec8a7a143fb1222943"
-  integrity sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==
+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
 
 react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"