UI: Update PoolBar to separate Scheduled and Deferred slots

[anshuksi282-ksolves]

Description

This PR addresses issue #53826.

Currently, the Pool Bar visually includes Scheduled and Deferred states inside the progress bar. This can be misleading as these states do not typically consume open pool slots, making the pool look "fuller" than it actually is.

Changes introduced:

1. PoolBar.tsx: Updated the filter logic to only display active slots (Running, Queued, Open) inside the visual bar.
2. PoolBarCard.tsx: Added logic to display Scheduled and Deferred counts as text/icons below the bar on the Pools administration page.
3. PoolSummary.tsx: Applied the same text display logic to the Dashboard "Pool Slots" widget for consistency.

Screenshots

Before:

After:

Related Issue

Closes #53826

---

^ 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.

[pierrejeambrun]

Also I think we need to implement a case for include_deferred.

When include_deferred is 'true' for the pool, deferred state will actually take an open slot, and in this case, they should be displayed in the 'Bar' normally to see pool occupation. const ACTIVE_SLOTS = ["running", "queued", "open"]; should have deferred ones.

If include_deferred is 'false', then this is correct.

For summary, it's the same I believe deferred slots for pool with 'include deferred=True' should be represented in the summary Bar. And bellow in the PoolBarCard, we should see 'scheduled' and remaining 'deferred' (without include_deferred activated).

Mainly the proplem here is that a Pool with include_deferred True will appear with 0 open slots, while the 'bar' could be empty of 'running' 'queued' and 'open' which is weird.

We could show the value of include_deffered in the tooltips to help people understand the difference between the two possible ways of displaying 'deferred' slots. (includ_deferred=True, include_deferred=False)

[anshuksi282-ksolves]

Thank you @bbovenzi and @pierrejeambrun for the detailed review!

I have updated the implementation based on your feedback:

1. UI Clean-up & Tooltip:

   • Removed the text stats below the pool bar in both PoolBarCard and PoolSummary to avoid code duplication and reduce UI clutter.
   • Moved all detailed statistics (Scheduled, Deferred, Total Pools) inside the Tooltip.
   • Updated the i18n keys to use common:state.* as suggested.

2. Logic Update (include_deferred):

   • Updated PoolBar.tsx to conditionally render "Deferred" slots in the visual bar only if include_deferred is set to True for that pool.
   • Added the "Include Deferred" status inside the tooltip to help users understand the bar's composition.

I have verified the logic locally:

• Default Pools: Deferred slots are excluded from the bar (clean UI).
• Configured Pools: If include_deferred is enabled, the visual bar correctly includes the deferred slots.

Ready for another look!

[pierrejeambrun]

Thanks for the PR.

A few suggestions.

Tooltip colors should be updated, background is too dark and we should have corresponding state colors.

[pierrejeambrun]

Also the deferred slot doesn't seem to be working.

[anshuksi282-ksolves]

Thanks @pierrejeambrun for the detailed feedback! I have updated the implementation to fully address the UI styling and logic concerns.

Changes included:

• Theme-Aware Tooltips: The tooltip now adapts to the theme—White in Light Mode and Dark Grey in Dark Mode for better readability.
• State Colors: The text inside the tooltip (Open, Running, Deferred) now matches its corresponding state color (Green, Skyblue, Purple).
• Clean UI: Removed the tooltip arrow because the global/root styling was causing color mismatches
• Logic Verified: Verified that Deferred slots appear in the bar only if include_deferred is True (or on the Dashboard).

[pierrejeambrun]

I liked your original design idea, i.e if a state does not occupy a slot, we shot it under the bar. So we can have the full 'pull' state at a glance, and it's easy to understand what 'fills' the bar, and what is under the pool bar for information.

And then you don't need a big tooltip like that, we can keep the original tooltip, 1 per segment, and will highlight the 'state' in plain letters. Because here, when 'include_deferred=False', there is nothing shown for 'deferred slots' but the tooltip shows 'deferred' slots, and people will most likely get confused at to 'where those come from?'.

[anshuksi282-ksolves]

Hi @pierrejeambrun and @bbovenzi,

I have squashed the commits and updated the logic based on your latest feedback:

• Reverted to "Under the Bar" Design: Informational stats (Scheduled, Deferred) are now displayed below the bar for better visibility.
• No Code Duplication: Handled the "Under the Bar" rendering directly inside PoolBar.tsx to keep parent components clean.
• Tooltips: Removed the large tooltip; restored individual tooltips with dynamic state colors.
  Fixes: Resolved parent container clipping issues and corrected i18n keys.

Ready for final review!

[bbovenzi]

Please don't try to change the colors of the tooltips. Let's just use the standard tooltip with the default text color

[anshuksi282-ksolves]

Hi @bbovenzi updated based on your feedback:

• Tooltips: Reverted to standard style and default colors.
• i18n: Cleaned up duplicate keys; now using existing common:states.*.

[pierrejeambrun]

LGTM, thanks!

Just rebased to see if that solves the CI issue. (error seemed unrelated)

[github-actions]

Backport successfully created: v3-1-test

Status	Branch	Result
✅	v3-1-test