You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by ka...@apache.org on 2025/04/22 09:34:54 UTC
(airflow) branch v3-0-test updated: update ui guide for 3.0 (#49532)
This is an automated email from the ASF dual-hosted git repository.
kaxilnaik pushed a commit to branch v3-0-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-0-test by this push:
new 305ed74d24b update ui guide for 3.0 (#49532)
305ed74d24b is described below
commit 305ed74d24b2332ff750f34c6a4c1f75952327d1
Author: Constance Martineau <co...@gmail.com>
AuthorDate: Tue Apr 22 05:29:19 2025 -0400
update ui guide for 3.0 (#49532)
* Update ui guide for 3.0
This PR expands the Airflow UI guide with the following new sections:
• DAG Run View: Includes task-level metadata, code snapshotting, and visual debugging via Graph View
• Task Instance Details: Covers log inspection, error tracing, rendered templates, and XComs
• Asset Views: Introduces the Assets tab, asset graphs, event tracking, and asset-triggered DAGs
• Admin Views: Documents key features in Variables, Pools, Connections, Plugins, Providers, and Config
Also includes:
• Screenshot callouts for both light and dark modes
• Minor formatting and nesting cleanup to improve readability
Related: #45649
* Rearrange dir for screenshots
---------
Co-authored-by: Kaxil Naik <ka...@gmail.com>
(cherry picked from commit b52c846e562e2366f9fd97ba38048f0e6658f92e)
---
.../authoring-and-scheduling/asset-scheduling.rst | 3 +-
airflow-core/docs/howto/usage-cli.rst | 2 +-
.../docs/img/ui-dark/admin_connections.png | Bin 0 -> 150932 bytes
.../docs/img/ui-dark/admin_connections_add.png | Bin 0 -> 167151 bytes
.../docs/img/ui-dark/asset_list_consuming_dags.png | Bin 0 -> 127796 bytes
airflow-core/docs/img/ui-dark/asset_view.png | Bin 0 -> 229760 bytes
.../img/ui-dark/dag_graph_all_dependencies.png | Bin 0 -> 285637 bytes
.../img/ui-dark/dag_graph_external_conditions.png | Bin 0 -> 164762 bytes
airflow-core/docs/img/ui-dark/dag_list.png | Bin 0 -> 220039 bytes
.../img/ui-dark/dag_list_asset_condition_popup.png | Bin 0 -> 84639 bytes
.../docs/img/ui-dark/dag_overview_code.png | Bin 0 -> 256143 bytes
.../docs/img/ui-dark/dag_overview_dashboard.png | Bin 0 -> 354517 bytes
.../docs/img/ui-dark/dag_overview_details.png | Bin 0 -> 117313 bytes
.../docs/img/ui-dark/dag_overview_events.png | Bin 0 -> 128461 bytes
.../docs/img/ui-dark/dag_overview_graph.png | Bin 0 -> 247453 bytes
.../docs/img/ui-dark/dag_overview_grid.png | Bin 0 -> 74307 bytes
.../docs/img/ui-dark/dag_overview_runs.png | Bin 0 -> 328557 bytes
.../docs/img/ui-dark/dag_overview_tasks.png | Bin 0 -> 257795 bytes
.../img/ui-dark/dag_run_code_hello_airflow.png | Bin 0 -> 414435 bytes
.../docs/img/ui-dark/dag_run_code_hello_world.png | Bin 0 -> 411759 bytes
airflow-core/docs/img/ui-dark/dag_run_details.png | Bin 0 -> 244367 bytes
airflow-core/docs/img/ui-dark/dag_run_graph.png | Bin 0 -> 323997 bytes
.../img/ui-dark/dag_run_task_instance_xcom.png | Bin 0 -> 103983 bytes
.../docs/img/ui-dark/dag_run_task_instances.png | Bin 0 -> 381299 bytes
.../docs/img/ui-dark/dag_task_instance_details.png | Bin 0 -> 121964 bytes
.../docs/img/ui-dark/dag_task_instance_logs.png | Bin 0 -> 342132 bytes
airflow-core/docs/img/ui-dark/home_dark.png | Bin 0 -> 203744 bytes
.../img/ui-light/asset_list_consuming_dags.png | Bin 0 -> 122966 bytes
airflow-core/docs/img/ui-light/asset_view.png | Bin 0 -> 236941 bytes
.../img/ui-light/dag_graph_all_dependencies.png | Bin 0 -> 309325 bytes
.../img/ui-light/dag_graph_external_conditions.png | Bin 0 -> 136359 bytes
airflow-core/docs/img/ui-light/dag_list.png | Bin 0 -> 225518 bytes
.../ui-light/dag_list_asset_condition_popup.png | Bin 0 -> 85925 bytes
.../docs/img/ui-light/dag_overview_code.png | Bin 0 -> 236640 bytes
.../docs/img/ui-light/dag_overview_dashboard.png | Bin 0 -> 360724 bytes
.../docs/img/ui-light/dag_overview_details.png | Bin 0 -> 117433 bytes
.../docs/img/ui-light/dag_overview_events.png | Bin 0 -> 127872 bytes
.../docs/img/ui-light/dag_overview_graph.png | Bin 0 -> 291099 bytes
.../docs/img/ui-light/dag_overview_grid.png | Bin 0 -> 73707 bytes
.../docs/img/ui-light/dag_overview_runs.png | Bin 0 -> 335716 bytes
.../docs/img/ui-light/dag_overview_tasks.png | Bin 0 -> 268167 bytes
.../img/ui-light/dag_run_code_hello_airflow.png | Bin 0 -> 410290 bytes
.../docs/img/ui-light/dag_run_code_hello_world.png | Bin 0 -> 407651 bytes
airflow-core/docs/img/ui-light/dag_run_details.png | Bin 0 -> 256723 bytes
airflow-core/docs/img/ui-light/dag_run_graph.png | Bin 0 -> 340520 bytes
.../img/ui-light/dag_run_task_instance_xcom.png | Bin 0 -> 103285 bytes
.../docs/img/ui-light/dag_run_task_instances.png | Bin 0 -> 390877 bytes
.../img/ui-light/dag_task_instance_details.png | Bin 0 -> 121197 bytes
.../docs/img/ui-light/dag_task_instance_logs.png | Bin 0 -> 325063 bytes
airflow-core/docs/img/ui-light/home_light.png | Bin 0 -> 213214 bytes
airflow-core/docs/ui.rst | 536 +++++++++++++++++----
docs/spelling_wordlist.txt | 4 +
52 files changed, 437 insertions(+), 108 deletions(-)
diff --git a/airflow-core/docs/authoring-and-scheduling/asset-scheduling.rst b/airflow-core/docs/authoring-and-scheduling/asset-scheduling.rst
index ed1b5d6521c..fc9086cb078 100644
--- a/airflow-core/docs/authoring-and-scheduling/asset-scheduling.rst
+++ b/airflow-core/docs/authoring-and-scheduling/asset-scheduling.rst
@@ -67,8 +67,7 @@ You can use assets to specify data dependencies in your dags. The following exam
...
-You can find a listing of the relationships between assets and dags in the
-:ref:`Assets View<ui:assets-view>`
+You can find a listing of the relationships between assets and dags in the :ref:`Asset Views <ui-asset-views>`.
Multiple assets
-----------------
diff --git a/airflow-core/docs/howto/usage-cli.rst b/airflow-core/docs/howto/usage-cli.rst
index 82005804b10..a7dcc71abba 100644
--- a/airflow-core/docs/howto/usage-cli.rst
+++ b/airflow-core/docs/howto/usage-cli.rst
@@ -76,7 +76,7 @@ For example, to print the ``example_complex`` DAG to the terminal:
airflow dags show example_complex
-This will print the rendered DAG structure (similar to :ref:`Graph <ui:graph-view>`) to the screen in DOT format.
+This will print the rendered DAG structure to the screen in DOT format.
Multiple file formats are supported. To use them, add the argument ``--save [filename].[format]``.
diff --git a/airflow-core/docs/img/ui-dark/admin_connections.png b/airflow-core/docs/img/ui-dark/admin_connections.png
new file mode 100644
index 00000000000..119a57b54d2
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/admin_connections.png differ
diff --git a/airflow-core/docs/img/ui-dark/admin_connections_add.png b/airflow-core/docs/img/ui-dark/admin_connections_add.png
new file mode 100644
index 00000000000..ff2ebdbd192
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/admin_connections_add.png differ
diff --git a/airflow-core/docs/img/ui-dark/asset_list_consuming_dags.png b/airflow-core/docs/img/ui-dark/asset_list_consuming_dags.png
new file mode 100644
index 00000000000..d9b40acc4a5
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/asset_list_consuming_dags.png differ
diff --git a/airflow-core/docs/img/ui-dark/asset_view.png b/airflow-core/docs/img/ui-dark/asset_view.png
new file mode 100644
index 00000000000..a42d0eca5d1
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/asset_view.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_graph_all_dependencies.png b/airflow-core/docs/img/ui-dark/dag_graph_all_dependencies.png
new file mode 100644
index 00000000000..08f360734da
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_graph_all_dependencies.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_graph_external_conditions.png b/airflow-core/docs/img/ui-dark/dag_graph_external_conditions.png
new file mode 100644
index 00000000000..38537e1850b
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_graph_external_conditions.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_list.png b/airflow-core/docs/img/ui-dark/dag_list.png
new file mode 100644
index 00000000000..c7b378a4594
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_list.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_list_asset_condition_popup.png b/airflow-core/docs/img/ui-dark/dag_list_asset_condition_popup.png
new file mode 100644
index 00000000000..ef85b6fab45
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_list_asset_condition_popup.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_code.png b/airflow-core/docs/img/ui-dark/dag_overview_code.png
new file mode 100644
index 00000000000..74243c17028
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_code.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_dashboard.png b/airflow-core/docs/img/ui-dark/dag_overview_dashboard.png
new file mode 100644
index 00000000000..e851cbf07a5
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_dashboard.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_details.png b/airflow-core/docs/img/ui-dark/dag_overview_details.png
new file mode 100644
index 00000000000..c3c72220600
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_details.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_events.png b/airflow-core/docs/img/ui-dark/dag_overview_events.png
new file mode 100644
index 00000000000..4523ca77fb8
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_events.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_graph.png b/airflow-core/docs/img/ui-dark/dag_overview_graph.png
new file mode 100644
index 00000000000..52e1f471bc5
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_graph.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_grid.png b/airflow-core/docs/img/ui-dark/dag_overview_grid.png
new file mode 100644
index 00000000000..2b866d8e6b7
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_grid.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_runs.png b/airflow-core/docs/img/ui-dark/dag_overview_runs.png
new file mode 100644
index 00000000000..cda308df785
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_runs.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_overview_tasks.png b/airflow-core/docs/img/ui-dark/dag_overview_tasks.png
new file mode 100644
index 00000000000..5eaa24aaf7a
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_overview_tasks.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_code_hello_airflow.png b/airflow-core/docs/img/ui-dark/dag_run_code_hello_airflow.png
new file mode 100644
index 00000000000..291e4d90659
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_code_hello_airflow.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_code_hello_world.png b/airflow-core/docs/img/ui-dark/dag_run_code_hello_world.png
new file mode 100644
index 00000000000..d244452e8b4
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_code_hello_world.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_details.png b/airflow-core/docs/img/ui-dark/dag_run_details.png
new file mode 100644
index 00000000000..fe0a1648d03
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_details.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_graph.png b/airflow-core/docs/img/ui-dark/dag_run_graph.png
new file mode 100644
index 00000000000..09b4b897458
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_graph.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_task_instance_xcom.png b/airflow-core/docs/img/ui-dark/dag_run_task_instance_xcom.png
new file mode 100644
index 00000000000..e0d16c6461f
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_task_instance_xcom.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_run_task_instances.png b/airflow-core/docs/img/ui-dark/dag_run_task_instances.png
new file mode 100644
index 00000000000..cebbae11c8b
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_run_task_instances.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_task_instance_details.png b/airflow-core/docs/img/ui-dark/dag_task_instance_details.png
new file mode 100644
index 00000000000..d6dd08f9ec5
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_task_instance_details.png differ
diff --git a/airflow-core/docs/img/ui-dark/dag_task_instance_logs.png b/airflow-core/docs/img/ui-dark/dag_task_instance_logs.png
new file mode 100644
index 00000000000..253146a1594
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/dag_task_instance_logs.png differ
diff --git a/airflow-core/docs/img/ui-dark/home_dark.png b/airflow-core/docs/img/ui-dark/home_dark.png
new file mode 100644
index 00000000000..6436ff43384
Binary files /dev/null and b/airflow-core/docs/img/ui-dark/home_dark.png differ
diff --git a/airflow-core/docs/img/ui-light/asset_list_consuming_dags.png b/airflow-core/docs/img/ui-light/asset_list_consuming_dags.png
new file mode 100644
index 00000000000..e2967719b0f
Binary files /dev/null and b/airflow-core/docs/img/ui-light/asset_list_consuming_dags.png differ
diff --git a/airflow-core/docs/img/ui-light/asset_view.png b/airflow-core/docs/img/ui-light/asset_view.png
new file mode 100644
index 00000000000..69cc8ff5089
Binary files /dev/null and b/airflow-core/docs/img/ui-light/asset_view.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_graph_all_dependencies.png b/airflow-core/docs/img/ui-light/dag_graph_all_dependencies.png
new file mode 100644
index 00000000000..e091c5225c0
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_graph_all_dependencies.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_graph_external_conditions.png b/airflow-core/docs/img/ui-light/dag_graph_external_conditions.png
new file mode 100644
index 00000000000..1c4b2e0d69e
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_graph_external_conditions.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_list.png b/airflow-core/docs/img/ui-light/dag_list.png
new file mode 100644
index 00000000000..ceb1065dcc4
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_list.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_list_asset_condition_popup.png b/airflow-core/docs/img/ui-light/dag_list_asset_condition_popup.png
new file mode 100644
index 00000000000..785b91a0333
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_list_asset_condition_popup.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_code.png b/airflow-core/docs/img/ui-light/dag_overview_code.png
new file mode 100644
index 00000000000..6ee86c3f121
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_code.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_dashboard.png b/airflow-core/docs/img/ui-light/dag_overview_dashboard.png
new file mode 100644
index 00000000000..d864a89dd37
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_dashboard.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_details.png b/airflow-core/docs/img/ui-light/dag_overview_details.png
new file mode 100644
index 00000000000..cfb18a3cfca
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_details.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_events.png b/airflow-core/docs/img/ui-light/dag_overview_events.png
new file mode 100644
index 00000000000..39213ece77c
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_events.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_graph.png b/airflow-core/docs/img/ui-light/dag_overview_graph.png
new file mode 100644
index 00000000000..1ea3ee566c6
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_graph.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_grid.png b/airflow-core/docs/img/ui-light/dag_overview_grid.png
new file mode 100644
index 00000000000..a5b7d8cdc4c
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_grid.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_runs.png b/airflow-core/docs/img/ui-light/dag_overview_runs.png
new file mode 100644
index 00000000000..069d2b44887
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_runs.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_overview_tasks.png b/airflow-core/docs/img/ui-light/dag_overview_tasks.png
new file mode 100644
index 00000000000..5db41309b8f
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_overview_tasks.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_code_hello_airflow.png b/airflow-core/docs/img/ui-light/dag_run_code_hello_airflow.png
new file mode 100644
index 00000000000..69932d954bf
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_code_hello_airflow.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_code_hello_world.png b/airflow-core/docs/img/ui-light/dag_run_code_hello_world.png
new file mode 100644
index 00000000000..4b73719ad94
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_code_hello_world.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_details.png b/airflow-core/docs/img/ui-light/dag_run_details.png
new file mode 100644
index 00000000000..b0a271e2342
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_details.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_graph.png b/airflow-core/docs/img/ui-light/dag_run_graph.png
new file mode 100644
index 00000000000..31dccef7612
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_graph.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_task_instance_xcom.png b/airflow-core/docs/img/ui-light/dag_run_task_instance_xcom.png
new file mode 100644
index 00000000000..ab2c387f13d
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_task_instance_xcom.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_run_task_instances.png b/airflow-core/docs/img/ui-light/dag_run_task_instances.png
new file mode 100644
index 00000000000..42c71c958de
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_run_task_instances.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_task_instance_details.png b/airflow-core/docs/img/ui-light/dag_task_instance_details.png
new file mode 100644
index 00000000000..e2a3be93226
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_task_instance_details.png differ
diff --git a/airflow-core/docs/img/ui-light/dag_task_instance_logs.png b/airflow-core/docs/img/ui-light/dag_task_instance_logs.png
new file mode 100644
index 00000000000..9ed7f2824e5
Binary files /dev/null and b/airflow-core/docs/img/ui-light/dag_task_instance_logs.png differ
diff --git a/airflow-core/docs/img/ui-light/home_light.png b/airflow-core/docs/img/ui-light/home_light.png
new file mode 100644
index 00000000000..e74307bb770
Binary files /dev/null and b/airflow-core/docs/img/ui-light/home_light.png differ
diff --git a/airflow-core/docs/ui.rst b/airflow-core/docs/ui.rst
index b6984c7c5f5..20a91cd4922 100644
--- a/airflow-core/docs/ui.rst
+++ b/airflow-core/docs/ui.rst
@@ -17,197 +17,523 @@
-UI / Screenshots
-=================
-The Airflow UI makes it easy to monitor and troubleshoot your data pipelines.
-Here's a quick overview of some of the features and visualizations you
-can find in the Airflow UI.
+UI Overview
+===========
+The Airflow UI provides a powerful way to monitor, manage, and troubleshoot your data pipelines and data assets. As of
+Airflow 3, the UI has been refreshed with a modern look, support for dark and light themes, and a redesigned navigation
+experience.
+This guide offers a reference-style walkthrough of key UI components, with annotated screenshots to help new and
+experienced users alike.
-.. _ui:home:
+.. note::
+ Screenshots in this guide use **dark theme** by default. Select views are also shown in **light theme** for comparison. You can toggle themes from user settings located at the bottom corner of the Airflow UI.
+
+.. _ui-home:
Home Page
-.........
+---------
+The Home Page provides a high-level overview of the system state and recent activity. It is the default landing page in
+Airflow 3 and includes:
-Gives an overview about recent running dags and tasks and basic system health.
+- **Health indicators** for system components such as the MetaDatabase, Scheduler, Triggerer, and Dag Processor
+- **Quick links** to DAGs filtered by status (e.g., Failed DAGs, Running DAGs, Active DAGs)
+- **DAG and Task Instance history**, showing counts and success/failure rates over a selectable time range
+- **Recent asset events**, including materializations and triggered DAGs
-------------
+This page is useful for quickly assessing the health of your environment and identifying recent issues or
+asset-triggered events.
-.. image:: img/ui-dark/home.png
+.. image:: img/ui-dark/home_dark.png
+ :alt: Airflow Home Page showing system health, DAG/task stats, and asset events (Dark Mode)
-------------
+|
+.. image:: img/ui-light/home_light.png
+ :alt: Airflow Home Page showing system health, DAG/task stats, and asset events (Dark Mode)
-Dags View
-.........
+.. _ui-dag-list:
-List of the dags in your environment, and a set of shortcuts to useful pages.
-You can see exactly how many tasks succeeded, failed, or are currently
-running at a glance.
+DAG List View
+-------------
-In order to filter dags (e.g. by team), you can add tags in each DAG.
-The filter is saved in a cookie and can be reset by the reset button.
-For example:
+The DAG List View appears when you click the **DAGs** tab in the main navigation bar. It displays all DAGs available in
+your environment, with a clear summary of their status, recent runs, and configuration.
-.. code-block:: python
+Each row includes:
- dag = DAG("dag", tags=["team1", "sql"])
+- **DAG ID**
+- **Schedule** and next run time
+- **Status of the latest DAG run**
+- **Bar chart of recent runs**
+- **Tags**, which can be used for grouping or filtering DAGs (e.g., ``example``, ``produces``)
+- **Pause/resume toggle**
+- Links to access DAG-level views
+At the top of the view, you can:
-------------
+- Use **filters** for DAG status, schedule state, and tags
+- Use **search** or **advanced search (⌘+K)** to find specific DAGs
+- Sort the list using the dropdown (e.g., Latest Run Start Date)
-.. image:: img/ui-dark/dags.png
+.. image:: img/ui-dark/dag_list.png
+ :alt: DAG List View in dark mode showing search, filters, and DAG-level controls
-------------
+|
+.. image:: img/ui-light/dag_list.png
+ :alt: DAG List View in light mode showing the same DAGs and actions for comparison
-.. _ui:assets-view:
+|
-Asset View
-..........
+Some DAGs in this list may interact with data assets. For example, DAGs that are triggered by asset conditions may
+display popups showing upstream asset inputs.
-A combined listing of the current assets and details how they are produced and consumed by dags.
+.. image:: img/ui-dark/dag_list_asset_condition_popup.png
+ :alt: DAG List View showing asset condition popup (Dark Mode)
-Clicking on any asset detail in the list will show it and its relationships, and filter the list to show the recent history of task instances that have updated that dataset and whether it has triggered further DAG runs.
+|
-------------
+.. image:: img/ui-light/dag_list_asset_condition_popup.png
+ :alt: DAG List View showing asset condition popup (Light Mode)
-.. image:: img/ui-dark/assets.png
+.. _ui-dag-details:
-------------
+DAG Details Page
+----------------
-.. image:: img/ui-dark/assets_graph.png
+Clicking a DAG from the list opens the DAG Details Page. This view offers centralized access to a DAG's metadata, recent
+activity, and task-level diagnostics.
-------------
+Key elements include:
+- **DAG metadata**, including ID, owner, tags, schedule, and latest DAG version
+- **Action buttons** to trigger the DAG, reparse it, or pause/resume
+- **Tabbed interface**: Overview (recent failures, run counts, task logs); Grid View (status heatmap); Graph View (task dependencies); Runs (full run history); Tasks (aggregated stats); Events (system- or asset-triggered); Code (DAG source); and Details (extended metadata)
+
+This page also includes a visual **timeline of recent DAG runs** and a **log preview for failures**, helping users quickly identify issues across runs.
+
+.. image:: img/ui-dark/dag_overview_dashboard.png
+ :alt: DAG Details Page in dark mode showing overview dashboard and failure diagnostics
+
+|
+
+.. image:: img/ui-light/dag_overview_dashboard.png
+ :alt: DAG Details Page in light mode showing overview dashboard and failure diagnostics
+
+.. _ui-grid-view:
Grid View
-.........
+'''''''''
-A bar chart and grid representation of the DAG that spans across time.
-The top row is a chart of DAG Runs by duration,
-and below, task instances. If a pipeline is late,
-you can quickly see where the different steps are and identify
-the blocking ones.
+The Grid View is the primary interface for inspecting DAG runs and task states. It offers an interactive way to debug,
+retry, or monitor workflows over time.
-The overview panel on the right provides fast access to recently failed tasks and logs.
+Use Grid View to:
-The overview includes the Dag runtime for the last execution to find outliers.
+- **Understand the status of recent DAG runs** at a glance
+- **Identify failed or retried tasks** by color and tooltip
+- **Take action** by clicking a task cell to view logs or mark task instances as successful, failed, or cleared
+- **Filter tasks** by name or partial ID
+- **Select a run range**, like "last 25 runs" using the dropdown above the grid
-------------
+Each row represents a task, and each column represents a DAG run. You can hover over any task instance for more detail,
+or click to drill down into logs and metadata.
-.. image:: img/ui-dark/grid.png
+.. image:: img/ui-dark/dag_overview_grid.png
+ :alt: Grid View showing DAG run status matrix with varied task states (Dark Mode)
-------------
+|
+
+.. image:: img/ui-light/dag_overview_grid.png
+ :alt: Grid View showing DAG run status matrix with varied task states (Light Mode)
-The details panel will update when selecting a DAG Run by clicking on a duration bar:
+.. _ui-graph-view:
-.. image:: img/ui-dark/grid_run_details.png
+Graph View
+''''''''''
-Or selecting a Task Instance by clicking on a status box:
+The Graph View shows the logical structure of your DAG—how tasks are connected, what order they run in, and how
+branching or retries are configured.
-.. image:: img/ui-dark/grid_instance_details.png
+This view is helpful when:
-Or selecting a Task across all runs by click on the task_id.
+- **Debugging why a task didn't run** (e.g., skipped due to a trigger rule)
+- **Understanding task dependencies** across complex pipelines
+- **Inspecting run-specific task states** (e.g., success, failed, upstream failed)
-This also plots the duration of your different tasks over the past N runs. This view lets
-you find outliers and quickly understand where the time is spent in your
-DAG over many runs.
+Each node represents a task. Edges show the dependencies between them. You can click any task to view its metadata and
+recent run history.
-.. image:: img/ui-dark/grid_task_details.png
+Use the dropdown at the top to switch between DAG runs and see how task states changed across executions.
-Manual runs are indicated by a play icon (just like the Trigger DAG button).
-Asset triggered runs are indicated by a database icon.
-Normal scheduled runs have no indicator.
-If a backfill was used to create the DAG run, it will be indicated by a arrow icon:
+.. image:: img/ui-dark/dag_overview_graph.png
+ :alt: Graph View showing DAG structure with no DAG run selected (Dark Mode)
-.. image:: img/ui-dark/run_types.png
+|
-Task groups are indicated by a caret and can be opened or closed:
+.. image:: img/ui-light/dag_overview_graph.png
+ :alt: Graph View showing DAG structure with no DAG run selected (Light Mode)
-.. image:: img/ui-dark/grid_task_group.png
+.. _ui-dag-tabs:
-Mapped Tasks are indicated by square brackets and will show a table of each mapped task instance in the Mapped Tasks panel:
+DAG Tabs
+--------
+In addition to the interactive views like Grid and Graph, the DAG Details page includes several other tabs that provide
+deeper insights and metadata:
-.. image:: img/ui-dark/grid_mapped_task.png
+Runs Tab
+''''''''
+The **Runs** tab displays a sortable table of all DAG runs, along with their status, execution duration, run type, and DAG version.
-------------
+.. image:: img/ui-dark/dag_overview_runs.png
+ :alt: DAG Runs Tab (Dark Mode)
+|
-.. _ui:graph-view:
+.. image:: img/ui-light/dag_overview_runs.png
+ :alt: DAG Runs Tab (Light Mode)
-Graph View
-..........
+|
-The graph view is perhaps the most comprehensive. Visualize your DAG's
-dependencies and their current status for a specific run.
+Tasks Tab
+'''''''''
-------------
+The **Tasks** tab shows metadata for each task in the DAG, including operator type, trigger rule, most recent run status, and run history.
-.. image:: img/ui-dark/graph.png
+.. image:: img/ui-dark/dag_overview_tasks.png
+ :alt: DAG Tasks Tab (Dark Mode)
-------------
+|
-If you use the options to display external dependencies, you can follow asset conditions and events.
+.. image:: img/ui-light/dag_overview_tasks.png
+ :alt: DAG Tasks Tab (Light Mode)
-------------
+|
-.. image:: img/ui-dark/graph_dependencies.png
+Events Tab
+''''''''''
-------------
+The **Events** tab surfaces structured events related to the DAG, such as DAG triggers and version patches. This tab is especially useful for DAG versioning and troubleshooting changes.
-Variable View
-.............
+.. image:: img/ui-dark/dag_overview_events.png
+ :alt: DAG Events Tab (Dark Mode)
-The variable view allows you to list, create, edit or delete the key-value pair
-of a variable used during jobs. The value of a variable will be hidden if the key contains
-any words in ('password', 'secret', 'passwd', 'authorization', 'api_key', 'apikey', 'access_token')
-by default, but can be configured to show in cleartext. See :ref:`security:mask-sensitive-values`.
+|
-------------
+.. image:: img/ui-light/dag_overview_events.png
+ :alt: DAG Events Tab (Light Mode)
-.. image:: img/ui-dark/variable_hidden.png
+Code Tab
+''''''''
-------------
+The **Code** tab displays the current version of the DAG definition, including the timestamp of the last parse. Users can view the code for any specific DAG version.
-Code View
-.........
+.. image:: img/ui-dark/dag_overview_code.png
+ :alt: DAG Code Tab (Dark Mode)
-Transparency is everything. While the code for your pipeline is in source
-control, this is a quick way to get to the code that generates the DAG and
-provide yet more context.
+|
-------------
+.. image:: img/ui-light/dag_overview_code.png
+ :alt: DAG Code Tab (Light Mode)
+
+|
-.. image:: img/ui-dark/code.png
+Details Tab
+'''''''''''
-Backfill
-........
+The **Details** tab provides configuration details and metadata for the DAG, including schedule, file location, concurrency limits, and version identifiers.
-If runs in your scheduled Dag are missing you can use the backfill option in the UI to re-run missing
-executions for a selective time interval.
+.. image:: img/ui-dark/dag_overview_details.png
+ :alt: DAG Details Tab (Dark Mode)
+|
+
+.. image:: img/ui-light/dag_overview_details.png
+ :alt: DAG Details Tab (Light Mode)
+
+.. _ui-dag-runs:
+
+DAG Run View
------------
+Each DAG Run has its own view, accessible by selecting a specific row in the DAG's **Runs** tab. The DAG Run view
+displays metadata about the selected run, as well as task-level details, rendered code, and more.
+
+.. image:: img/ui-dark/dag_run_task_instances.png
+ :alt: DAG Run - Task Instances tab (dark mode)
-.. image:: img/ui-dark/backfill.png
+|
-Trigger Form
-............
-If you trigger a manual DAG run with the arrow-button, a form is displayed.
-The form display is based on the DAG Parameters as described in :doc:`core-concepts/params`.
+Key elements include:
+- **DAG Run metadata**, including logical date, run type, duration, DAG version, and parsed time
+- **Action buttons** to clear or mark the run, or add a note
+- A persistent **Grid View sidebar**, which shows task durations and states across recent DAG runs. This helps spot recurring issues or performance trends at a glance.
+
+DAG Run Tabs
------------
-.. image:: img/ui-dark/trigger-dag-tutorial-form-1.png
+Task Instances
+''''''''''''''
+
+Displays the status and metadata for each task instance within the DAG Run. Columns include:
+
+- Task ID
+- State
+- Start and End Dates
+- Try Number
+- Operator Type
+- Duration
+- DAG Version
+
+Each row also includes a mini Gantt-style timeline that visually represents the task's duration.
+
+.. image:: img/ui-light/dag_run_task_instances.png
+ :alt: DAG Run - Task Instances (light mode)
Events
-......
+''''''
+
+If available, this tab lists system-level or asset-triggered events that contributed to this DAG Run's execution.
+
+Code
+''''
+
+Displays the DAG source code as it was at the time this run was parsed. This view is helpful for debugging version drift
+or comparing behavior across DAG Runs that used different code.
+
+DAG Run code for ``hello >> airflow()``:
+
+.. image:: img/ui-dark/dag_run_code_hello_airflow.png
+ :alt: DAG Run Code Snapshot - airflow() (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_run_code_hello_airflow.png
+ :alt: DAG Run Code Snapshot - airflow() (light mode)
+
+|
+
+DAG Run code for ``hello >> world()``:
+
+.. image:: img/ui-dark/dag_run_code_hello_world.png
+ :alt: DAG Run Code Snapshot - world() (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_run_code_hello_world.png
+ :alt: DAG Run Code Snapshot - world() (light mode)
+
+Details
+'''''''
+
+Provides extended metadata for the DAG Run, including:
+
+- Run ID and Trigger Type
+- Queued At, Start and End Time, and Duration
+- Data Interval boundaries
+- Trigger Source and Run Config
+- DAG Version ID and Bundle Name
+
+.. image:: img/ui-dark/dag_run_details.png
+ :alt: DAG Run - Details tab (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_run_details.png
+ :alt: DAG Run - Details tab (light mode)
+
+Graph View
+''''''''''
+
+Shows the DAG's task dependency structure overlaid with the status of each task in this specific run. This is useful for visual debugging of task failure paths or identifying downstream blockers.
+
+Each node includes a visual indicator of task duration.
+
+.. image:: img/ui-dark/dag_run_graph.png
+ :alt: DAG Run - Graph View (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_run_graph.png
+ :alt: DAG Run - Graph View (light mode)
+
+.. _ui-ti-view:
-See all events related to a DAG.
+Task Instance View
+------------------
+
+When you click on a specific task from the DAG Run view, you're brought to the **Task Instance View**, which shows
+detailed logs and metadata for that individual task execution.
+
+.. image:: img/ui-dark/dag_task_instance_logs.png
+ :alt: Task Logs (dark mode)
+
+.. _ui-ti-tabs:
+
+Task Instance Tabs
+------------------
+
+Each task instance has a tabbed view providing access to logs, rendered templates, XComs, and execution metadata.
+
+Logs
+''''
+The default tab shows the task logs, which include system output, error messages, and traceback information. This is the first place to look when a task fails.
+
+.. image:: img/ui-light/dag_task_instance_logs.png
+ :alt: Task Logs (light mode)
+
+Rendered Templates
+''''''''''''''''''
+Displays the rendered version of templated fields in your task. Useful for debugging context variables or verifying
+dynamic content.
+
+XCom
+''''
+Shows any values pushed via ``XCom.push()`` or returned from Python functions when using TaskFlow.
+
+.. image:: img/ui-dark/dag_run_task_instance_xcom.png
+ :alt: Task Instance - XCom tab (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_run_task_instance_xcom.png
+ :alt: Task Instance - XCom tab (light mode)
+
+Events
+''''''
+If present, displays relevant events related to this specific task instance execution.
+
+Code
+''''
+Shows the DAG source code parsed at the time of execution. This helps verify what version of the DAG the task ran with.
+
+Details
+'''''''
+Displays runtime metadata about the task instance, including:
+
+- Task ID and State
+- DAG Run ID, DAG Version, and Bundle Name
+- Operator used and runtime duration
+- Pool and slot usage
+- Executor and configuration
+
+.. image:: img/ui-dark/dag_task_instance_details.png
+ :alt: Task Instance - Details tab (dark mode)
+
+|
+
+.. image:: img/ui-light/dag_task_instance_details.png
+ :alt: Task Instance - Details tab (light mode)
+
+.. _ui-asset-views:
+
+Asset Views
+-----------
+
+The **Assets** section provides a dedicated interface to monitor and debug asset-centric workflows. Assets represent
+logical data units—such as files, tables, or models—that tasks can produce or consume. Airflow tracks these dependencies
+and provides visualizations to better understand their orchestration.
+
+Asset List
+''''''''''
+
+The Asset List shows all known assets, grouped by name. For each asset, you can see:
+
+- The group the asset belongs to (if any)
+- The DAGs that consume the asset
+- The tasks that produce the asset
+
+Hovering over a count of DAGs or tasks shows a tooltip with the full list of producers or consumers.
+
+.. image:: img/ui-dark/asset_list_consuming_dags.png
+ :alt: Asset Graph View (dark mode)
+
+|
+
+.. image:: img/ui-light/asset_list_consuming_dags.png
+ :alt: Asset Graph View (light mode)
+
+Clicking on the link takes you to the Asset Graph View.
+
+Asset Graph View
+''''''''''''''''
+
+The Asset Graph View shows the asset in context, including upstream producers and downstream consumers. You can use this view to:
+
+- Understand asset lineage and the DAGs involved
+- Trigger asset events manually
+- View recent asset events and the DAG runs they triggered
+
+.. image:: img/ui-dark/asset_view.png
+ :alt: Asset Graph View (dark mode)
+
+|
+
+.. image:: img/ui-light/asset_view.png
+ :alt: Asset Graph View (light mode)
+
+
+Graph Overlays in DAG View
+''''''''''''''''''''''''''
+
+When a DAG contains asset-producing or asset-consuming tasks, you can enable asset overlays on the DAG Graph view. Toggle the switches next to each asset to:
+
+- See how assets flow between DAGs
+- Inspect asset-triggered dependencies
+
+Two graph modes are available:
+
+- **All DAG Dependencies**: Shows all DAG-to-DAG and task-level connections
+
+ .. image:: img/ui-dark/dag_graph_all_dependencies.png
+ :alt: DAG Graph View - All Dependencies (dark mode)
+
+ |
+
+ .. image:: img/ui-light/dag_graph_all_dependencies.png
+ :alt: DAG Graph View - All Dependencies (light mode)
+
+ |
+
+- **External Conditions**: Shows only DAGs triggered via asset events
+
+ .. image:: img/ui-dark/dag_graph_external_conditions.png
+ :alt: DAG Graph View - External Conditions Only (dark mode)
+
+ |
+
+ .. image:: img/ui-light/dag_graph_external_conditions.png
+ :alt: DAG Graph View - External Conditions Only (light mode)
+
+.. _ui-admin-views:
+
+Admin Views
+-----------
+
+The **Admin** tab provides system-level tools for configuring and extending Airflow. These views are primarily intended for administrators and platform operators responsible for deployment, integration, and performance tuning.
+
+Key pages include:
+
+- **Variables** – Store key-value pairs accessible from DAGs. Variables can be used to manage environment-specific parameters or secrets.
+- **Connections** – Define connection URIs to external systems such as databases, cloud services, or APIs. These are consumed by Airflow operators and hooks.
+- **Pools** – Control resource allocation by limiting the number of concurrently running tasks assigned to a named pool. Useful for managing contention or quota-constrained systems.
+- **Providers** – View installed provider packages (e.g., ``apache-airflow-providers-google``), including available hooks, sensors, and operators. This is helpful for verifying provider versions or troubleshooting import errors.
+- **Plugins** – Inspect registered Airflow plugins that extend the platform via custom operators, macros, or UI elements.
+- **Config** – View the full effective Airflow configuration as parsed from ``airflow.cfg``, environment variables, or overridden defaults. This can help debug issues related to scheduler behavior, secrets backends, and more.
+
+.. note::
+ The Admin tab is only visible to users with appropriate RBAC permissions.
------------
-.. image:: img/ui-dark/events.png
+.. image:: img/ui-dark/variable_hidden.png
------------
+
+.. image:: img/ui-dark/admin_connections.png
+
+------------
+
+.. image:: img/ui-dark/admin_connections_add.png
diff --git a/docs/spelling_wordlist.txt b/docs/spelling_wordlist.txt
index 281999d3976..93514805fd5 100644
--- a/docs/spelling_wordlist.txt
+++ b/docs/spelling_wordlist.txt
@@ -800,6 +800,7 @@ hdfscli
hdp
healthjump
heartrate
+heatmap
Highcharts
hivecmd
hiveconf
@@ -1083,6 +1084,7 @@ MarketingTeam
MarkupSafe
Masternode
masterType
+materializations
Matomo
matomo
Maxime
@@ -1477,6 +1479,7 @@ remoting
renderer
renderers
renewer
+reparse
replicaSet
repo
repos
@@ -1961,6 +1964,7 @@ volumeMounts
VolumeSizeInGB
vpc
WaiterModel
+walkthrough
wape
warmup
Wasb