UI: add task instance summary to DAG cards

[Saadmadni84]

What does this PR do?

Adds a compact Task Instance summary to DAG cards on the DAG list page,
showing task state counts for the most recent DagRun.

This helps operators quickly identify DAGs that need attention and restores
at-a-glance operational visibility similar to what existed in Airflow 2.

How was this implemented?

• UI-only change
• Uses existing Task Instance query hooks
• Displays task state counts for the most recent DagRun
• Clickable state badges link to the filtered task list

Testing

This is a UI-only change. I was not able to fully run the Airflow UI locally,
but the implementation follows existing DagCard patterns and relies on
existing APIs. CI should validate the build and types.

Related issue

Fixes #50624

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

• Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
• Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
• Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: dev@airflow.apache.org
  Slack: https://s.apache.org/airflow-slack

[bbovenzi]

Before any more dev work. Please provide:

• a screenshot of a dag card with every state badge at once.
• also do a manual test of the dags page with many example dags that have run, at least one with 1000 tasks (This is a good use for an AI tool, have it generate a bunch of large dags for you to test against)

[Saadmadni84]

Hi @bbovenzi,
I’ve addressed the requested changes and fixed the lint issue in TaskInstanceSummary.
CI has been rerun. Thanks for taking another look.

[bbovenzi]

Hi @bbovenzi, I’ve addressed the requested changes and fixed the lint issue in TaskInstanceSummary. CI has been rerun. Thanks for taking another look.

Again, we need a fastapi update to support this. Fetching 1000 task instances for every dag on the dags list page will affect the performance too much to be acceptable for users.

You can look at our dags with runs endpoint in /ui. In this case we don't even want the entire task instance object. Just stats. So the response can look like:

{
 ...dag,
 latest_dag_runs: [],
 latest_run_stats: {
   success: 5,
   failed: 1,
   queued: 1,
   upstream_failed: 2
 }
}

[Saadmadni84]

Hi @bbovenzi, I’ve addressed the requested changes and fixed the lint issue in TaskInstanceSummary. CI has been rerun. Thanks for taking another look.

Again, we need a fastapi update to support this. Fetching 1000 task instances for every dag on the dags list page will affect the performance too much to be acceptable for users.

You can look at our dags with runs endpoint in /ui. In this case we don't even want the entire task instance object. Just stats. So the response can look like:

{
 ...dag,
 latest_dag_runs: [],
 latest_run_stats: {
   success: 5,
   failed: 1,
   queued: 1,
   upstream_failed: 2
 }
}

Thanks for the clarification — that makes sense.
I’ll explore adding a FastAPI endpoint that returns aggregated task instance stats (similar to the DAG runs endpoint under /ui) and update the UI to consume only those summaries instead of fetching full task instance objects.

[Saadmadni84]

Hi @bbovenzi,
I’ve pushed the requested changes. The /ui/dags endpoint now includes aggregated task instance stats (grouped by state) computed server-side for the latest DAG run, following the existing DAG run summary pattern. The UI has been updated to consume only these summaries and no longer fetches task instances, avoiding large payloads and client-side aggregation.
Please let me know if you’d like this structured differently or adjusted further.

[bbovenzi]

Can you please do a little bit of manual testing? I am not your AI prompt writer.

1. We also need to update our openapi and react-query codegens. This will error if you tried to run it
2. Let's add backend tests
3. I'm wary of adding two new selects to this backend query

[Saadmadni84]

Can you please do a little bit of manual testing? I am not your AI prompt writer.

1. We also need to update our openapi and react-query codegens. This will error if you tried to run it
2. Let's add backend tests
3. I'm wary of adding two new selects to this backend query

Thanks for the feedback @bbovenzi — I’ve addressed all the points raised:

1. OpenAPI and react-query codegen updated
   I regenerated the OpenAPI spec and reran the react-query/TypeScript codegen. The task_instance_summary field is now included in the generated client types. No additional schema inconsistencies were observed after regeneration.
2. Backend tests added
   Added comprehensive backend coverage in test_dags.py, including:
   Aggregated task instance counts by state
   Ensuring only the latest DAG run is included in the summary
   Handling the empty case when no task instances exist
   All tests pass locally.
3. Query design clarification
   Regarding the concern about additional selects: the implementation uses a single subquery with a window function (RANK()) to identify the latest DAG run per DAG, followed by aggregation of task instance counts. This avoids N+1 queries and limits the scope to indexed columns (dag_id, run_id, state).
   While working on this, I also fixed an issue where the join incorrectly referenced a non-existent dag_run_id column; it now correctly joins on the composite key (dag_id, run_id).
   Manual testing was performed to verify correct rendering of task instance summaries on DAG cards in the UI.
   Happy to make further adjustments if needed — thanks for the review.

[jason810496]

Thanks for the PR. The overall API changes and the test scenarios LGTM.

[jason810496]

Thanks for the update!