This is an automated email from the ASF dual-hosted git repository.
bbovenzi 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 707b1ccf137 Clean up graph/grid UI (#69883)
707b1ccf137 is described below
commit 707b1ccf137269d488a8b9f7e7fbc9a32cd7b296
Author: Brent Bovenzi <[email protected]>
AuthorDate: Wed Jul 15 09:58:58 2026 -0400
Clean up graph/grid UI (#69883)
---
.../src/airflow/ui/public/i18n/locales/ar/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/ca/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/de/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/en/dag.json | 3 ---
.../src/airflow/ui/public/i18n/locales/fr/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/he/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/hi/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/hu/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/ko/dag.json | 3 ---
.../src/airflow/ui/public/i18n/locales/pl/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/tr/dag.json | 5 -----
.../src/airflow/ui/public/i18n/locales/zh-CN/dag.json | 5 -----
.../src/airflow/ui/src/components/Graph/TaskNode.tsx | 3 ++-
.../src/airflow/ui/src/components/Graph/elkGraphUtils.ts | 2 +-
airflow-core/src/airflow/ui/src/components/TaskName.tsx | 2 --
.../src/airflow/ui/src/layouts/Details/GridFilters.tsx | 7 ++++++-
.../src/airflow/ui/src/layouts/Details/PanelButtons.tsx | 15 +++------------
.../src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx | 4 ++--
18 files changed, 14 insertions(+), 75 deletions(-)
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/ar/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/ar/dag.json
index 44d0b882563..6253b5c4a31 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/ar/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/ar/dag.json
@@ -118,11 +118,6 @@
"viewInExternal": "عرض السجلات في {{name}} (المحاولة {{attempt}})",
"warning": "تحذير"
},
- "navigation": {
- "navigation": "التنقل: {{arrow}}",
- "openGraphFilters": "مرشحات المهام: Ctrl+Shift+F",
- "toggleGroup": "تبديل المجموعة: المسافة"
- },
"notFound": {
"back": "رجوع",
"backToDags": "العودة إلى Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/ca/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/ca/dag.json
index c90bc964f6d..3cd77f612a7 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/ca/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/ca/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "Veure els registres a {{name}} (intent {{attempt}})",
"warning": "ADVERTIMENT"
},
- "navigation": {
- "navigation": "Navegació: Shift+{{arrow}}",
- "openGraphFilters": "Filtres de tasques: Ctrl+Maj+F",
- "toggleGroup": "Alternar grup: Espai"
- },
"notFound": {
"back": "Enrere",
"backToDags": "Tornar als Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/de/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/de/dag.json
index 829a1aaac4d..d48f59856f6 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/de/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/de/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "Protokoll in {{name}} (Versuch {{attempt}}) ansehen",
"warning": "WARNING"
},
- "navigation": {
- "navigation": "Navigation: Umschalttaste+{{arrow}}",
- "openGraphFilters": "Task-Filter: Strg+Umschalt+F",
- "toggleGroup": "Gruppen umschalten: Leertaste"
- },
"notFound": {
"back": "Zurück",
"backToDags": "Zurück zu Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
index ab1e332ebae..907fba9e5ea 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/en/dag.json
@@ -102,9 +102,6 @@
"viewInExternal": "View logs in {{name}} (attempt {{attempt}})",
"warning": "WARNING"
},
- "navigation": {
- "openGraphFilters": "Task Filters: Ctrl+Shift+F"
- },
"notFound": {
"back": "Go Back",
"backToDags": "Back to Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/fr/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/fr/dag.json
index de7952e0220..b3a970fdf9d 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/fr/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/fr/dag.json
@@ -109,11 +109,6 @@
"viewInExternal": "Voir les journaux dans {{name}} (tentative
{{attempt}})",
"warning": "AVERTISSEMENT"
},
- "navigation": {
- "navigation": "Navigation : {{arrow}}",
- "openGraphFilters": "Filtres de tâches : Ctrl+Maj+F",
- "toggleGroup": "Basculer le groupe : Espace"
- },
"notFound": {
"back": "Retour",
"backToDags": "Retour aux Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/he/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/he/dag.json
index 0214ee91102..29b902030b7 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/he/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/he/dag.json
@@ -109,11 +109,6 @@
"viewInExternal": "צפה ברישומים ב-{{name}} (ניסיון {{attempt}})",
"warning": "WARNING"
},
- "navigation": {
- "navigation": "ניווט: {{arrow}}",
- "openGraphFilters": "פילטרים משימות: Ctrl+Shift+F",
- "toggleGroup": "החלפת קבוצה: רווח"
- },
"notFound": {
"back": "חזור",
"backToDags": "חזור ל-Dags",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/hi/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/hi/dag.json
index cbd6a675e78..8e436ab7a4b 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/hi/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/hi/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "{{name}} में लॉग्स देखें (प्रयास {{attempt}})",
"warning": "WARNING"
},
- "navigation": {
- "navigation": "नेवीगेशन: Shift+{{arrow}}",
- "openGraphFilters": "Task फ़िल्टर: Ctrl+Shift+F",
- "toggleGroup": "ग्रुप टॉगल करें: Space"
- },
"notFound": {
"back": "वापस जाएं",
"backToDags": "डैग्स पर वापस जाएं",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/hu/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/hu/dag.json
index 62b7a4cb790..a4a8c1cb057 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/hu/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/hu/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "Naplók megtekintése itt: {{name}} (próbálkozás:
{{attempt}})",
"warning": "FIGYELMEZTETÉS"
},
- "navigation": {
- "navigation": "Navigáció: {{arrow}}",
- "openGraphFilters": "Feladat szűrők: Ctrl+Shift+F",
- "toggleGroup": "Csoport váltása: Szóköz"
- },
"notFound": {
"back": "Vissza",
"backToDags": "Vissza a Dag-ekhez",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/ko/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/ko/dag.json
index 3ce445fa896..9b71c510afd 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/ko/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/ko/dag.json
@@ -102,9 +102,6 @@
"viewInExternal": "{{name}}에서 로그 보기 (시도 {{attempt}})",
"warning": "경고"
},
- "navigation": {
- "openGraphFilters": "태스크 필터: Ctrl+Shift+F"
- },
"notFound": {
"back": "뒤로",
"backToDags": "Dags로 돌아가기",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/pl/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/pl/dag.json
index a8c500309f3..0f29dda9351 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/pl/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/pl/dag.json
@@ -112,11 +112,6 @@
"viewInExternal": "Zobacz logi w {{name}} (próba {{attempt}})",
"warning": "WARNING"
},
- "navigation": {
- "navigation": "Przewiń: {{arrow}}",
- "openGraphFilters": "Filtry zadań: Ctrl+Shift+F",
- "toggleGroup": "Przełącz grupę: Space"
- },
"notFound": {
"back": "Wróć",
"backToDags": "Powrót do Dagów",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/tr/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/tr/dag.json
index 7770759b5e7..60b91f86bfd 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/tr/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/tr/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "Günlükleri {{name}} içinde görüntüle (deneme
{{attempt}})",
"warning": "UYARI"
},
- "navigation": {
- "navigation": "Gezin: {{arrow}}",
- "openGraphFilters": "Görev Filtreleri: Ctrl+Shift+F",
- "toggleGroup": "Grubu aç/kapat: Space"
- },
"notFound": {
"back": "Geri Dön",
"backToDags": "Dag'lere Geri Dön",
diff --git a/airflow-core/src/airflow/ui/public/i18n/locales/zh-CN/dag.json
b/airflow-core/src/airflow/ui/public/i18n/locales/zh-CN/dag.json
index 25dcfaf83c2..6a0c4613be0 100644
--- a/airflow-core/src/airflow/ui/public/i18n/locales/zh-CN/dag.json
+++ b/airflow-core/src/airflow/ui/public/i18n/locales/zh-CN/dag.json
@@ -106,11 +106,6 @@
"viewInExternal": "在 {{name}} 中查看日志(重试 {{attempt}})",
"warning": "WARNING"
},
- "navigation": {
- "navigation": "导航: {{arrow}}",
- "openGraphFilters": "任务筛选器: Ctrl+Shift+F",
- "toggleGroup": "展开/收起分组: 空格键"
- },
"notFound": {
"back": "返回",
"backToDags": "返回 Dags",
diff --git a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
index 5d8affeca30..0efe7dbbb81 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
+++ b/airflow-core/src/airflow/ui/src/components/Graph/TaskNode.tsx
@@ -19,6 +19,7 @@
import { Box, Button, Flex, HStack, LinkOverlay, Text } from
"@chakra-ui/react";
import type { NodeProps, Node as NodeType } from "@xyflow/react";
import { useTranslation } from "react-i18next";
+import { AiOutlineGroup } from "react-icons/ai";
import { TaskIcon } from "src/assets/TaskIcon";
import { StateBadge } from "src/components/StateBadge";
@@ -112,7 +113,7 @@ export const TaskNode = ({
width={`${width + (isSelected ? 4 : 0)}px`}
>
<HStack>
- <TaskIcon />
+ {isGroup ? <AiOutlineGroup /> : <TaskIcon />}
<LinkOverlay asChild>
<TaskLink
childCount={thisChildCount}
diff --git a/airflow-core/src/airflow/ui/src/components/Graph/elkGraphUtils.ts
b/airflow-core/src/airflow/ui/src/components/Graph/elkGraphUtils.ts
index 593dec17c9a..6e8548fbed1 100644
--- a/airflow-core/src/airflow/ui/src/components/Graph/elkGraphUtils.ts
+++ b/airflow-core/src/airflow/ui/src/components/Graph/elkGraphUtils.ts
@@ -366,7 +366,7 @@ export const generateElkGraph = ({
}
const label = `${node.label}${node.is_mapped ? "[1000]" :
""}${node.children ? ` + ${node.children.length} tasks` : ""}`;
- let width = getTextWidth(label, font);
+ let width = getTextWidth(label, font) + 16; // 16 for icons
const hasStateBar = Boolean(node.is_mapped) || Boolean(node.children);
let height = hasStateBar ? 90 : 80;
diff --git a/airflow-core/src/airflow/ui/src/components/TaskName.tsx
b/airflow-core/src/airflow/ui/src/components/TaskName.tsx
index 9349cb27a51..1f35b5bfc2e 100644
--- a/airflow-core/src/airflow/ui/src/components/TaskName.tsx
+++ b/airflow-core/src/airflow/ui/src/components/TaskName.tsx
@@ -55,7 +55,6 @@ export const TaskName = ({
fontWeight="bold"
overflow="hidden"
textOverflow="ellipsis"
- title={label}
whiteSpace="nowrap"
{...rest}
>
@@ -71,7 +70,6 @@ export const TaskName = ({
fontWeight="bold"
overflow="hidden"
textOverflow="ellipsis"
- title={label}
whiteSpace="nowrap"
{...rest}
>
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/GridFilters.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/GridFilters.tsx
index fe1ea80ab1a..ee30042ef70 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/GridFilters.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/GridFilters.tsx
@@ -31,6 +31,11 @@ export const GridFilters = () => {
const { filterConfigs, handleFiltersChange, initialValues } =
useFiltersHandler(searchParamKeys);
return (
- <FilterBar configs={filterConfigs} initialValues={initialValues}
onFiltersChange={handleFiltersChange} />
+ <FilterBar
+ configs={filterConfigs}
+ initialValues={initialValues}
+ onFiltersChange={handleFiltersChange}
+ showPresetFilters={false}
+ />
);
};
diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
index 5c34dde8bd3..6109d693190 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
@@ -24,14 +24,13 @@ import {
Portal,
Select,
type SelectValueChangeDetails,
- Text,
VStack,
} from "@chakra-ui/react";
import { useReactFlow } from "@xyflow/react";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { FiGrid } from "react-icons/fi";
-import { LuChartGantt, LuKeyboard } from "react-icons/lu";
+import { LuChartGantt } from "react-icons/lu";
import { MdOutlineAccountTree, MdSettings } from "react-icons/md";
import type { ImperativePanelGroupHandle } from "react-resizable-panels";
import { useParams } from "react-router-dom";
@@ -40,7 +39,7 @@ import { useLocalStorage } from "usehooks-ts";
import { DagVersionSelect } from "src/components/DagVersionSelect";
import { DirectionDropdown } from "src/components/Graph/DirectionDropdown";
import { GraphTaskFilters } from "src/components/GraphTaskFilters";
-import { IconButton, Tooltip } from "src/components/ui";
+import { IconButton } from "src/components/ui";
import { type ButtonGroupOption, ButtonGroupToggle } from
"src/components/ui/ButtonGroupToggle";
import type { DagView } from "src/constants/dagView";
import { dependenciesKey } from "src/constants/localStorage";
@@ -309,15 +308,7 @@ export const PanelButtons = ({
</Flex>
</Flex>
- {dagView === "graph" ? (
- <Flex justifyContent="flex-end" mt={1}>
- <Flex color="fg.muted" gap={2}>
- <Tooltip
content={<Text>{translate("dag:navigation.openGraphFilters")}</Text>} portalled>
- <LuKeyboard />
- </Tooltip>
- </Flex>
- </Flex>
- ) : (
+ {dagView !== "graph" && (
<Flex justifyContent="space-between" mt={1}>
<GridFilters />
<Flex color="fg.muted" gap={2} justifyContent="flex-end" mt={1}>
diff --git a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
index 513a3452760..8b0e4e557e9 100644
--- a/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/GroupTaskInstance/Header.tsx
@@ -19,7 +19,7 @@
import { Box } from "@chakra-ui/react";
import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";
-import { MdOutlineTask } from "react-icons/md";
+import { AiOutlineGroup } from "react-icons/ai";
import type { LightGridTaskInstanceSummary } from "openapi/requests/types.gen";
import { ClearTaskInstanceButton } from "src/components/Clear";
@@ -61,7 +61,7 @@ export const Header = ({ taskInstance }: { readonly
taskInstance: LightGridTaskI
<MarkTaskGroupAsButton groupTaskInstance={taskInstance}
isHotkeyEnabled />
</>
}
- icon={<MdOutlineTask />}
+ icon={<AiOutlineGroup />}
state={taskInstance.state}
stats={stats}
subTitle={<Time datetime={taskInstance.min_start_date} />}
