This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun 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 4a44c93d8d5 Fix #47671: Task name and status overlap in Airflow 3 grid
view (#47994)
4a44c93d8d5 is described below
commit 4a44c93d8d521ce1c0303db076425a256b05b184
Author: Diogo Rodrigues <[email protected]>
AuthorDate: Thu Apr 10 10:57:51 2025 +0100
Fix #47671: Task name and status overlap in Airflow 3 grid view (#47994)
* Fix #47671: Task name and status overlap in Airflow 3 grid view
Problem: In grid view, task names overlap with task status
check bars when resizing the window also the status check
bars are also dragged along improperly.
Updated: the grid layout so that task names no longer overlap
with the status bar. The status bars are now fully visible,
while task names use the remaining space. If a task name
doesn’t fit, it’s truncated with an ellipsis, and hovering
over it reveals the full name in a tooltip.
* Flex grow the left part of the grid
---------
Co-authored-by: pierrejeambrun <[email protected]>
---
.../src/airflow/ui/src/components/TaskName.tsx | 20 ++++++++++++++++++--
.../src/airflow/ui/src/layouts/Details/Grid/Grid.tsx | 6 +++---
2 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/components/TaskName.tsx
b/airflow-core/src/airflow/ui/src/components/TaskName.tsx
index c909f27cbd3..b2c1ebcea2b 100644
--- a/airflow-core/src/airflow/ui/src/components/TaskName.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TaskName.tsx
@@ -51,7 +51,15 @@ export const TaskName = ({
// We don't have a task group details page to link to
if (isGroup) {
return (
- <Text fontSize="md" fontWeight="bold" {...rest}>
+ <Text
+ fontSize="md"
+ fontWeight="bold"
+ overflow="hidden"
+ textOverflow="ellipsis"
+ title={label}
+ whiteSpace="nowrap"
+ {...rest}
+ >
{label}
{isMapped ? " [ ]" : undefined}
</Text>
@@ -59,7 +67,15 @@ export const TaskName = ({
}
return (
- <Text fontSize={isZoomedOut ? "lg" : "md"} fontWeight="bold" {...rest}>
+ <Text
+ fontSize={isZoomedOut ? "lg" : "md"}
+ fontWeight="bold"
+ overflow="hidden"
+ textOverflow="ellipsis"
+ title={label}
+ whiteSpace="nowrap"
+ {...rest}
+ >
{label}
{isMapped ? ` [${childCount ?? " "}]` : undefined}
{setupTeardownType === "setup" && <FiArrowUpRight size={isZoomedOut ? 24
: 15} style={iconStyle} />}
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index a06ba88f7ed..ba4ecad0b01 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -71,11 +71,11 @@ export const Grid = ({ limit }: Props) => {
);
return (
- <Flex justifyContent="flex-end" position="relative" pt={50} width="100%">
- <Box position="absolute" top="150px" width="100%">
+ <Flex justifyContent="flex-start" position="relative" pt={50} width="100%">
+ <Box flexGrow={1} minWidth={7} mr={3} position="relative" top="100px">
<TaskNames nodes={flatNodes} />
</Box>
- <Box>
+ <Box position="relative">
<Flex position="relative">
<DurationAxis top="100px" />
<DurationAxis top="50px" />
