feat(ui/graph): enhance task status visibility (#34486)

apache · Sep 25, 2023 · d0ae60f · d0ae60f
1 parent 404666d
commit d0ae60f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/airflow/www/static/js/dag/details/graph/Node.tsx b/airflow/www/static/js/dag/details/graph/Node.tsx
@@ -93,6 +93,11 @@ export const BaseNode = ({
     [, operatorTextColor] = labelStyle.split(":");
   }
 
+  const nodeBorderColor =
+    instance?.state && stateColors[instance.state]
+      ? `${stateColors[instance.state]}.400`
+      : "gray.400";
+
   return (
     <Tooltip
       label={
@@ -107,8 +112,8 @@ export const BaseNode = ({
     >
       <Box
         borderRadius={5}
-        borderWidth={1}
-        borderColor={isSelected ? "blue.400" : "gray.400"}
+        borderWidth={isSelected ? 2.5 : 1.5}
+        borderColor={nodeBorderColor}
         bg={isSelected ? "blue.50" : bg}
         height={`${height}px`}
         width={`${width}px`}
@@ -150,7 +155,7 @@ export const BaseNode = ({
             {!!instance && instance.state && (
               <Flex alignItems="center">
                 <SimpleStatus state={instance.state} />
-                <Text ml={2} color="gray.500" fontSize="md">
+                <Text ml={2} color="gray.500" fontSize="lg">
                   {instance.state}
                 </Text>
               </Flex>

diff --git a/docs/apache-airflow/img/demo_graph_view.png b/docs/apache-airflow/img/demo_graph_view.png