You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by "KatalKavya96 (via GitHub)" <gi...@apache.org> on 2025/09/18 22:17:23 UTC
[PR] UI(Pools): Fix gaps in PoolBar segments for seamless display [airflow]
KatalKavya96 opened a new pull request, #55861:
URL: https://github.com/apache/airflow/pull/55861
### Description
This PR fixes a low-priority visual issue in the PoolBar component where gaps appeared between slot segments (e.g. running, queued, deferred) when the counts were large or fractional flex rounding occurred. The result was that the bar did not render as a continuous distribution of slots.
Additionally, a small lint/type error in ClearGroupTaskInstanceDialog.tsx was resolved (onCheckedChange handler type).
### What was changed
- PoolBar.tsx
- Removed inner flex from child segments so only the wrapper controls width.
- Ensured the last segment absorbs rounding remainder so segments are seamless edge-to-edge.
- ClearGroupTaskInstanceDialog.tsx
- Updated Checkbox.onCheckedChange handler to use a typed boolean | "indeterminate" value instead of a KeyboardEvent, eliminating TS lint errors.
### How to reproduce (before fix)
- Create a pool (e.g. default_pool with 128 slots).
- Run a continuous DAG with many tasks (e.g. DateTimeSensorAsync mapped > 64).
- Pool slots bar shows visible white gaps between colored segments.
### After fix
- The PoolBar displays seamlessly with no gaps, regardless of slot counts.
- TypeScript errors in ClearGroupTaskInstanceDialog.tsx are resolved.
Demo Video
https://github.com/user-attachments/assets/08ab1cf7-c22b-4177-bb05-076242bc0140
Related Issue
closes: #55595
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] UI(Pools): Fix gaps in PoolBar segments for seamless display [airflow]
Posted by "KatalKavya96 (via GitHub)" <gi...@apache.org>.
KatalKavya96 commented on PR #55861:
URL: https://github.com/apache/airflow/pull/55861#issuecomment-3319903925
> Thanks for the pull request.
>
> I don't think we need to do all that. The issue is that we apply twice flex values in certain cases.
>
> I'm closing in favor of #55957
>
> Regardless I still provided a review of your work but we will most likely not merge this.
I understand, Thanks for the guidance.
Appreciate the time you took to review even though this won’t be merged.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] UI(Pools): Fix gaps in PoolBar segments for seamless display [airflow]
Posted by "pierrejeambrun (via GitHub)" <gi...@apache.org>.
pierrejeambrun closed pull request #55861: UI(Pools): Fix gaps in PoolBar segments for seamless display
URL: https://github.com/apache/airflow/pull/55861
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] UI(Pools): Fix gaps in PoolBar segments for seamless display [airflow]
Posted by "pierrejeambrun (via GitHub)" <gi...@apache.org>.
pierrejeambrun commented on code in PR #55861:
URL: https://github.com/apache/airflow/pull/55861#discussion_r2368590613
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -69,17 +110,18 @@ export const PoolBar = ({
</Tooltip>
);
+ // Wrapper owns the proportional width, so segments butt together with no gaps
return color !== "success" && "name" in pool ? (
- <Link asChild display="flex" flex={flexValue} key={key}>
+ <Link asChild display="flex" flex={correctedFlex} key={String(key)}>
Review Comment:
```suggestion
<Link asChild display="flex" flex={correctedFlex} key={key}>
```
##########
airflow-core/src/airflow/ui/src/components/PoolBar.tsx:
##########
@@ -69,17 +110,18 @@ export const PoolBar = ({
</Tooltip>
);
+ // Wrapper owns the proportional width, so segments butt together with no gaps
return color !== "success" && "name" in pool ? (
- <Link asChild display="flex" flex={flexValue} key={key}>
+ <Link asChild display="flex" flex={correctedFlex} key={String(key)}>
<RouterLink
to={`/task_instances?${SearchParamsKeys.STATE}=${color}&${SearchParamsKeys.POOL}=${pool.name}`}
>
- {poolContent}
+ {inner}
</RouterLink>
</Link>
) : (
- <Box display="flex" flex={flexValue} key={key}>
- {poolContent}
+ <Box display="flex" flex={correctedFlex} key={String(key)}>
Review Comment:
```suggestion
<Box display="flex" flex={correctedFlex} key={key}>
```
##########
airflow-core/src/airflow/api_fastapi/core_api/openapi/v2-rest-api-generated.yaml:
##########
@@ -5403,9 +5403,7 @@ paths:
description: Successful Response
content:
application/json:
- schema:
- type: 'null'
- title: Response Delete Task Instance
Review Comment:
Those change are unrelated, why are we updating the API spec ?
##########
providers/edge3/src/airflow/providers/edge3/openapi/v2-edge-generated.yaml:
##########
@@ -142,9 +142,7 @@ paths:
description: Successful Response
content:
application/json:
- schema:
Review Comment:
Same here, edge provider is not related, can you remove that ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org