Skip to content

[FLINK-39486][runtime-web] Adapt the size of the job-overview-list section based on screen size#27978

Merged
RocMarshal merged 1 commit intoapache:masterfrom
och5351:feature/FLINK-39486
Apr 22, 2026
Merged

[FLINK-39486][runtime-web] Adapt the size of the job-overview-list section based on screen size#27978
RocMarshal merged 1 commit intoapache:masterfrom
och5351:feature/FLINK-39486

Conversation

@och5351
Copy link
Copy Markdown
Contributor

@och5351 och5351 commented Apr 20, 2026 •
edited
Loading

What is the purpose of the change

When viewing a Job and navigating to the Overview tab, I noticed that the job-overview-list table size does not dynamically adjust based on the screen size. It's not a critical issue, but it does feel a bit inconvenient from a UX perspective.

Brief change log

Bigger Monitor

image

Smaller Monitor

image

Verifying this change

Does this pull request potentially affect one of the following parts:

  • Dependencies (does it add or upgrade a dependency): (yes / no)
  • The public API, i.e., is any changed class annotated with @Public(Evolving): (yes / no)
  • The serializers: (yes / no / don't know)
  • The runtime per-record code paths (performance sensitive): (yes / no / don't know)
  • Anything that affects deployment or recovery: JobManager (and its components), Checkpointing, Kubernetes/Yarn, ZooKeeper: (yes / no / don't know)
  • The S3 file system connector: (yes / no / don't know)

Documentation

  • Does this pull request introduce a new feature? (yes / no)
  • If yes, how is the feature documented? (not applicable / docs / JavaDocs / not documented)
Was generative AI tooling used to co-author this PR?
  • Yes (please specify the tool below)

@och5351 och5351 marked this pull request as draft April 20, 2026 12:43
@flinkbot
Copy link
Copy Markdown
Collaborator

flinkbot commented Apr 20, 2026 •
edited
Loading

CI report:

Bot commands The @flinkbot bot supports the following commands:
  • @flinkbot run azure re-run the last Azure build

@och5351 och5351 force-pushed the feature/FLINK-39486 branch from 112707a to 997d93b Compare April 20, 2026 14:46
@och5351 och5351 marked this pull request as ready for review April 20, 2026 14:48
@och5351 och5351 marked this pull request as draft April 20, 2026 14:48
@och5351 och5351 force-pushed the feature/FLINK-39486 branch from 33708dd to 1cd4a6e Compare April 20, 2026 14:58
@och5351 och5351 marked this pull request as ready for review April 20, 2026 14:58
@och5351 och5351 force-pushed the feature/FLINK-39486 branch from d03d0cc to 463f1d7 Compare April 20, 2026 15:04
@och5351 och5351 changed the title [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size. [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size Apr 20, 2026
spuru9
spuru9 reviewed Apr 20, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@spuru9 spuru9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Added a few nit.

Comment thread ...k-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html Outdated
Comment thread flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts Outdated

const calculatedLeft = Math.max(390, containerWidth - fixedColumnsWidth);
this.left = calculatedLeft;
this.dynamicResizeMin = calculatedLeft;
Copy link
Copy Markdown
Contributor

@spuru9 spuru9 Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: it would flexible to let dynamicResizeMin remain 390, and add flex-direction: column; in :host in job-overview-list.component.less.
This would help in adding speading the table through the width. While giving the user ability to move eqally space the column.

Before (Min possible Name column width):
Image
After (After flex):
Image

Copy link
Copy Markdown
Contributor Author

@och5351 och5351 Apr 21, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right. However, it seems the vertical bar size adjustment doesn't match the right side of the name column.

image

May I request a review again with changes made to accommodate this part as well?

spuru9 added a commit to spuru9/flink that referenced this pull request Apr 20, 2026
@spuru9
[FLINK-39486][runtime-web] Revert job-overview-list changes to defer …
9c611b8 
…to PR apache#27978

Drops the overlapping horizontal-sizing and vertical-fill changes on the
job-overview-list component so PR apache#27978 can own that scope. Retains
graph recentering and dynamic job-overview top on this branch.
@github-actions github-actions Bot added the community-reviewed PR has been reviewed by the community. label Apr 21, 2026
@och5351 och5351 force-pushed the feature/FLINK-39486 branch from c54e29b to d9f437a Compare April 21, 2026 13:24
@och5351
Copy link
Copy Markdown
Contributor Author

och5351 commented Apr 21, 2026 •
edited
Loading

Hi, @spuru9 !

Thanks for the review.
I tried your suggestion but ran into an issue with flex-direction: column, so I went with a different approach.

  1. Cleaned up nzScroll (https://github.com/apache/flink/pull/27978/changes#diff-2709849eeefeb5eaefa97806c937175b7cbf9e689e2b1228a4fe3be2200527ccR24)
    • Removed the y: null parameter
  2. Set dynamicResizeMin = 390 (https://github.com/apache/flink/pull/27978/changes#diff-938ea57e74636c38e5ea6e12b889ad6b43d3d1d006f7b561ab56023635c89ef0R153)
    • Now users can resize the Name column down to 390px even on larger screens
  3. Removed fixed width from End Time column (https://github.com/apache/flink/pull/27978/changes#diff-2709849eeefeb5eaefa97806c937175b7cbf9e689e2b1228a4fe3be2200527ccR39)
    • This column now fills the remaining space
  4. Calculate tableScrollX dynamically (https://github.com/apache/flink/pull/27978/changes#diff-938ea57e74636c38e5ea6e12b889ad6b43d3d1d006f7b561ab56023635c89ef0R151)
    • Ensures the table uses full container width

About flex-direction: column

I tested adding flex-direction: column to :host but it broke the resize bar alignment. When dragging the bar left, it moves further than the Name column, creating a visible gap between them.
So I fixed it differently - removed End Time's fixed width and made nzScroll.x calculate dynamically. This keeps the resize bar synced with the Name column while still making the table span the full width.

Let me know what you think!

@och5351 och5351 requested a review from spuru9 April 21, 2026 13:42
spuru9
spuru9 approved these changes Apr 21, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@spuru9 spuru9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on Mac 13" and 16" from 80% to 110%, LGTM

@och5351
Copy link
Copy Markdown
Contributor Author

och5351 commented Apr 21, 2026 •
edited
Loading

Tested on Mac 13" and 16" from 80% to 110%, LGTM

@spuru9
Thank you for your review.

@och5351
Copy link
Copy Markdown
Contributor Author

och5351 commented Apr 21, 2026

Hi, @RocMarshal !
Could you please review this when you have time?

RocMarshal
RocMarshal approved these changes Apr 22, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@RocMarshal RocMarshal left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

LGTM +1.
Thanks @och5351 @spuru9
Merging...

@RocMarshal RocMarshal merged commit 5a83061 into apache:master Apr 22, 2026
@RocMarshal RocMarshal changed the title [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [FLINK-39486][runtime-web] Adapt the size of the job-overview-list section based on screen size Apr 22, 2026
@och5351 och5351 mentioned this pull request Apr 22, 2026
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@RocMarshal RocMarshal RocMarshal approved these changes

+1 more reviewer

@spuru9 spuru9 spuru9 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

community-reviewed PR has been reviewed by the community.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@och5351 @flinkbot @spuru9 @RocMarshal