This is an automated email from the ASF dual-hosted git repository. jedcunningham pushed a commit to branch v2-9-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 20910721674cf3c7fdef159a48a0661a5f91b708 Author: Brent Bovenzi <[email protected]> AuthorDate: Mon Apr 22 10:15:07 2024 -0400 Improve task filtering UX (#39119) * Improve filtering grid/graph/gantt filtering by task UX * only show map index if greater than -1 (cherry picked from commit 596e9ea10c1e7359d63532b74f3b7f12b42599e5) --- airflow/www/static/js/dag/details/FilterTasks.tsx | 76 +++++++++++++++-------- airflow/www/static/js/dag/details/Header.tsx | 2 +- airflow/www/static/js/dag/details/index.tsx | 2 +- 3 files changed, 52 insertions(+), 28 deletions(-) diff --git a/airflow/www/static/js/dag/details/FilterTasks.tsx b/airflow/www/static/js/dag/details/FilterTasks.tsx index 33d830b74d..7bc9b976b9 100644 --- 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,34 +42,48 @@ 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} @@ -75,15 +91,23 @@ const FilterTasks = ({ taskId }: Props) => { 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 index d13dfa6c81..78f30f3620 100644 --- 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 index 96c9a7c100..b459a82266 100644 --- a/airflow/www/static/js/dag/details/index.tsx +++ b/airflow/www/static/js/dag/details/index.tsx @@ -287,7 +287,7 @@ const Details = ({ /> </> )} - {taskId && runId && <FilterTasks taskId={taskId} />} + <FilterTasks taskId={taskId} /> </Flex> </Flex> <Divider my={2} />
