Improve task filtering UX (#39119)

* Improve filtering grid/graph/gantt filtering by task UX * only show map index if greater than -1
apache · Apr 22, 2024 · 596e9ea · 596e9ea
1 parent 0d6ffef
commit 596e9ea
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 28 deletions.
diff --git a/airflow/www/static/js/dag/details/FilterTasks.tsx b/airflow/www/static/js/dag/details/FilterTasks.tsx
@@ -28,9 +28,11 @@ import {
 } from "@chakra-ui/react";
 import useFilters from "src/dag/useFilters";
 import { MdArrowDropDown } from "react-icons/md";
+import { useGridData } from "src/api";
+import { getTask } from "src/utils";
 
 interface Props {
-  taskId: string;
+  taskId: string | null;
 }
 
 const FilterTasks = ({ taskId }: Props) => {
@@ -40,50 +42,72 @@ const FilterTasks = ({ taskId }: Props) => {
     resetRoot,
   } = useFilters();
 
-  const onFilterUpstream = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: true,
-      filterDownstream: false,
-    });
+  const {
+    data: { groups },
+  } = useGridData();
 
-  const onFilterDownstream = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: false,
-      filterDownstream: true,
-    });
+  const label = "Filter upstream and/or downstream of a task";
 
-  const onFilterAll = () =>
-    onFilterTasksChange({
-      root: taskId,
-      filterUpstream: true,
-      filterDownstream: true,
-    });
+  if (!root && !taskId) return null;
 
-  const label = "Filter upstream and/or downstream of a task";
+  const onFilterUpstream = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: true,
+        filterDownstream: false,
+      });
+  };
+
+  const onFilterDownstream = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: false,
+        filterDownstream: true,
+      });
+  };
+
+  const onFilterAll = () => {
+    if (taskId)
+      onFilterTasksChange({
+        root: taskId,
+        filterUpstream: true,
+        filterDownstream: true,
+      });
+  };
+
+  const task = root ? getTask({ taskId: root, task: groups }) : undefined;
 
   return (
     <Menu>
       <MenuButton
         as={Button}
-        variant="outline"
+        variant={root ? "solid" : "outline"}
         colorScheme="blue"
         transition="all 0.2s"
         title={label}
         aria-label={label}
         mt={2}
       >
         <Flex>
-          {!root ? "Filter Tasks " : "Clear Task Filter "}
+          {root
+            ? `Filtered on ${task?.label || "unknown"}`
+            : "Filter DAG by task"}
           <MdArrowDropDown size="16px" />
         </Flex>
       </MenuButton>
       <MenuList>
-        <MenuItem onClick={onFilterUpstream}>Filter Upstream</MenuItem>
-        <MenuItem onClick={onFilterDownstream}>Filter Downstream</MenuItem>
-        <MenuItem onClick={onFilterAll}>Filter Upstream & Downstream</MenuItem>
-        {!!root && <MenuItem onClick={resetRoot}>Reset Root</MenuItem>}
+        {!!root && <MenuItem onClick={resetRoot}>Reset</MenuItem>}
+        {!!taskId && (
+          <>
+            <MenuItem onClick={onFilterUpstream}>Only upstream</MenuItem>
+            <MenuItem onClick={onFilterDownstream}>Only downstream</MenuItem>
+            <MenuItem onClick={onFilterAll}>
+              Both upstream & downstream
+            </MenuItem>
+          </>
+        )}
       </MenuList>
     </Menu>
   );

diff --git a/airflow/www/static/js/dag/details/Header.tsx b/airflow/www/static/js/dag/details/Header.tsx
@@ -124,7 +124,7 @@ const Header = ({ mapIndex }: Props) => {
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
-      {mapIndex !== undefined && (
+      {mapIndex !== undefined && mapIndex !== -1 && (
         <BreadcrumbItem isCurrentPage mt={4}>
           <BreadcrumbLink
             _hover={isMappedTaskDetails ? { cursor: "default" } : undefined}

diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
@@ -278,7 +278,7 @@ const Details = ({
               />
             </>
           )}
-          {taskId && runId && <FilterTasks taskId={taskId} />}
+          <FilterTasks taskId={taskId} />
         </Flex>
       </Flex>
       <Divider my={2} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -278,7 +278,7 @@ const Details = ({ @@
                   />
                 </>
               )}
-              {taskId && runId && <FilterTasks taskId={taskId} />}
+              <FilterTasks taskId={taskId} />
             </Flex>
           </Flex>
           <Divider my={2} />
@@ Expand Down @@