Add result count to dag run and task instance tabs

[cmbilly8]

Description

This PR adds the total element count to the Dag Runs and Task Instances grids, similar to the existing behavior in the Dags tab.

No new data fetching or logic was added; the count uses an already available attribute in the component's state.

Closes #57639

---

UI Preview

Dag Runs

Before

After

Task Instances

Before

After

Testing

Manually verified across multiple states and views.

DAG Runs:

Case	Screenshot
0 runs
1 run
Many runs

Task Instances:

Case	Screenshot
0 tasks
1 task
Many tasks

DAG Page (Dag Runs tab):

DAG Run Page (Task Instances tab):

RTL / i18n Validation:

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

[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: [email protected]
  Slack: https://s.apache.org/airflow-slack

[guan404ming]

Overall looks good. Small nit, I think we just need to output one not found message in UI is enough.

[KoviAnusha]

@cmbilly8 , Appreciate that you reused the existing state instead of adding extra API calls. One small thought for next time: adding a quick test or storybook screenshot for RTL/i18n coverage whenever we touch display components, just to keep those cases visible early.

[guan404ming]

Appreciate that you reused the existing state instead of adding extra API calls. One small thought for next time: adding a quick test or storybook screenshot for RTL/i18n coverage whenever we touch display components, just to keep those cases visible early.

Thanks for your suggestion. IMO, to provide RTL screenshot is great, but I think i18n coverage is not required here since this PR is not related to translation change.

[cmbilly8]

Overall looks good. Small nit, I think we just need to output one not found message in UI is enough.

Just updated to conditionally render the heading only if the result count is > 0 so that we aren't telling the user twice that there are no results:

Dag Runs

Results > 0

No results

Task Instances

Results > 0

No results

[bbovenzi]

Actually, one thought. We already pass the total_entries to . Perhaps we should make this part of the shared DataTable component so that it displays on everything, not just Dag Runs and Task Instances?

[pierrejeambrun]

Actually, one thought. We already pass the total_entries to . Perhaps we should make this part of the shared DataTable component so that it displays on everything, not just Dag Runs and Task Instances?

I thought exactly the same. It will avoid code duplication and make things easier if the TableComponent just had a 'header' showing the total number. (And we also already pass down the modelName too.

And probably find a way to also incorporate the same from the Dags page, which is pretty similar.

            <Heading py={3} size="md">
              {`${data?.total_entries ?? 0} ${translate("dag", { count: data?.total_entries ?? 0 })}`}
            </Heading>

[cmbilly8]

I refactored the DataTable to include the row count rendering logic, which involved moving the model name translation logic to within the DataTable so I could reuse the raw model name.

I also added the row count heading to the pages that it seemed appropriate on:

• connections
• pools
• variables
• task instances (already discussed)
• DagRuns (already discussed)

And updated the following pages that already show row counts to use the heading from the DataTable instead:

• AssetsList
• DagsList
• HITLTaskInstances

The only one that was not straightforward was the DagsList because it places the ToggleTableDisplay component between the row count heading and table (The screenshot shows how it shifted to above the row count heading). Since this component is only used on the DagsList page, does it make sense to support that layout through moving that toggle to an optional prop on the DataTable or should it be slotted in by the caller? Open to other approaches as well.

[bbovenzi]

The only one that was not straightforward was the DagsList because it places the ToggleTableDisplay component between the row count heading and table (The screenshot shows how it shifted to above the row count heading). Since this component is only used on the DagsList page, does it make sense to support that layout through moving that toggle to an optional prop on the DataTable or should it be slotted in by the caller? Open to other approaches as well.

Great work. Let's make it an optional prop so that we're not creating excess vertical space on the dags list page. Maybe in the future other table views will have card list variants.

[bbovenzi]

@cmbilly8 Care to rebase? This would still be nice to merge.

[cmbilly8]

I noticed I had also inadvertently added additional whitespace to the assets page and altered some alignment in the dags list while testing the prop for the ToggleTableDisplay. Since it was just those two pages, I kept their own row count rendering logic so that the pages could manager their own layouts, while the other pages still use the prop on the Datatable. (Also rebased on main)