You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@flink.apache.org by "och5351 (via GitHub)" <gi...@apache.org> on 2026/04/20 12:38:14 UTC
[PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size. [flink]
och5351 opened a new pull request, #27978:
URL: https://github.com/apache/flink/pull/27978
## 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
<img width="2546" height="1091" alt="image" src="https://github.com/user-attachments/assets/bd7637b4-0e49-47bd-ba0e-565a372f669e" />
### Smaller Monitor
<img width="1895" height="1038" alt="image" src="https://github.com/user-attachments/assets/9c571733-378b-4e9f-a48b-63b380e63b81" />
## 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?
<!--
If generative AI tooling has been used in the process of authoring this PR, please
change the checkbox below to `[X]` followed by the name of the tool, and uncomment the
"Generated-by" line. See the ASF Generative Tooling Guidance for details:
https://www.apache.org/legal/generative-tooling.html
You are responsible for the quality and correctness of every change in this PR
regardless of the tooling used. Low-effort AI-generated PRs will be closed. See
AGENTS.md for the full guidance.
-->
- [ ] Yes (please specify the tool below)
<!--
Generated-by: [Tool Name and Version]
-->
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "spuru9 (via GitHub)" <gi...@apache.org>.
spuru9 commented on code in PR #27978:
URL: https://github.com/apache/flink/pull/27978#discussion_r3111794526
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html:
##########
@@ -21,7 +21,7 @@
class="no-border small"
[nzSize]="'small'"
[nzData]="nodes"
- [nzScroll]="{ x: 1360 + left + 'px' }"
+ [nzScroll]="{ x: 1360 + left + 'px', y: null }"
Review Comment:
nit: y is already unset in master, null is the default. can be omitted.
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts:
##########
@@ -104,7 +117,58 @@ export class JobOverviewListComponent {
return this.innerNodes;
}
- constructor(public readonly elementRef: ElementRef, private readonly statusService: StatusService) {}
+ constructor(
+ public readonly elementRef: ElementRef,
+ private readonly statusService: StatusService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private readonly cdr: ChangeDetectorRef
+ ) {}
+
+ public ngAfterViewInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ setTimeout(() => this.updateLeftBasedOnScreenSize(), 0);
+
+ window.addEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ public ngOnDestroy(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ window.removeEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ private readonly handleWindowResize = (): void => {
+ this.updateLeftBasedOnScreenSize();
+ };
+
+ /**
+ * Calculate Name column width based on screen size
+ *
+ * Dynamically adjusts the Name column to fill available space by calculating
+ * the total width of all other columns and subtracting from container width.
+ * Minimum width is set to 390px.
+ */
+ private updateLeftBasedOnScreenSize(): void {
+ const containerWidth = this.elementRef.nativeElement.offsetWidth;
+
+ // Calculate total width of all columns except the first one (Name column)
+ const tableHeaders = this.elementRef.nativeElement.querySelectorAll('thead th');
+ let fixedColumnsWidth = 0;
+ tableHeaders.forEach((th: HTMLElement, index: number) => {
+ if (index > 0) {
+ const width = th.getAttribute('nzWidth');
+ if (width) {
+ fixedColumnsWidth += parseInt(width, 10);
+ }
+ }
+ });
+
+ const calculatedLeft = Math.max(390, containerWidth - fixedColumnsWidth);
+ this.left = calculatedLeft;
+ this.dynamicResizeMin = calculatedLeft;
Review Comment:
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):
<img width="1532" height="107" alt="Image" src="https://github.com/user-attachments/assets/e791674a-09d4-44fb-b494-af40653b616e" />
After (After flex):
<img width="1532" height="84" alt="Image" src="https://github.com/user-attachments/assets/e5cd57e7-cf2e-4880-86b1-98a8b7b90b71" />
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on code in PR #27978:
URL: https://github.com/apache/flink/pull/27978#discussion_r3116900967
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts:
##########
@@ -104,7 +117,58 @@ export class JobOverviewListComponent {
return this.innerNodes;
}
- constructor(public readonly elementRef: ElementRef, private readonly statusService: StatusService) {}
+ constructor(
+ public readonly elementRef: ElementRef,
+ private readonly statusService: StatusService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private readonly cdr: ChangeDetectorRef
+ ) {}
+
+ public ngAfterViewInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ setTimeout(() => this.updateLeftBasedOnScreenSize(), 0);
+
+ window.addEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ public ngOnDestroy(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ window.removeEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ private readonly handleWindowResize = (): void => {
+ this.updateLeftBasedOnScreenSize();
+ };
+
+ /**
+ * Calculate Name column width based on screen size
+ *
+ * Dynamically adjusts the Name column to fill available space by calculating
+ * the total width of all other columns and subtracting from container width.
+ * Minimum width is set to 390px.
+ */
+ private updateLeftBasedOnScreenSize(): void {
+ const containerWidth = this.elementRef.nativeElement.offsetWidth;
+
+ // Calculate total width of all columns except the first one (Name column)
+ const tableHeaders = this.elementRef.nativeElement.querySelectorAll('thead th');
+ let fixedColumnsWidth = 0;
+ tableHeaders.forEach((th: HTMLElement, index: number) => {
+ if (index > 0) {
+ const width = th.getAttribute('nzWidth');
+ if (width) {
+ fixedColumnsWidth += parseInt(width, 10);
+ }
+ }
+ });
+
+ const calculatedLeft = Math.max(390, containerWidth - fixedColumnsWidth);
+ this.left = calculatedLeft;
+ this.dynamicResizeMin = calculatedLeft;
Review Comment:
That's right. However, it seems the vertical bar size adjustment doesn't match the right side of the name column.
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "RocMarshal (via GitHub)" <gi...@apache.org>.
RocMarshal merged PR #27978:
URL: https://github.com/apache/flink/pull/27978
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on PR #27978:
URL: https://github.com/apache/flink/pull/27978#issuecomment-4292581069
> Tested on Mac 13" and 16" from 80% to 110%, LGTM
@spuru9
Thank you for your review.
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on PR #27978:
URL: https://github.com/apache/flink/pull/27978#issuecomment-4292584632
Hi, @RocMarshal !
Could you please review this when you have time?
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on code in PR #27978:
URL: https://github.com/apache/flink/pull/27978#discussion_r3116900967
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts:
##########
@@ -104,7 +117,58 @@ export class JobOverviewListComponent {
return this.innerNodes;
}
- constructor(public readonly elementRef: ElementRef, private readonly statusService: StatusService) {}
+ constructor(
+ public readonly elementRef: ElementRef,
+ private readonly statusService: StatusService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private readonly cdr: ChangeDetectorRef
+ ) {}
+
+ public ngAfterViewInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ setTimeout(() => this.updateLeftBasedOnScreenSize(), 0);
+
+ window.addEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ public ngOnDestroy(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ window.removeEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ private readonly handleWindowResize = (): void => {
+ this.updateLeftBasedOnScreenSize();
+ };
+
+ /**
+ * Calculate Name column width based on screen size
+ *
+ * Dynamically adjusts the Name column to fill available space by calculating
+ * the total width of all other columns and subtracting from container width.
+ * Minimum width is set to 390px.
+ */
+ private updateLeftBasedOnScreenSize(): void {
+ const containerWidth = this.elementRef.nativeElement.offsetWidth;
+
+ // Calculate total width of all columns except the first one (Name column)
+ const tableHeaders = this.elementRef.nativeElement.querySelectorAll('thead th');
+ let fixedColumnsWidth = 0;
+ tableHeaders.forEach((th: HTMLElement, index: number) => {
+ if (index > 0) {
+ const width = th.getAttribute('nzWidth');
+ if (width) {
+ fixedColumnsWidth += parseInt(width, 10);
+ }
+ }
+ });
+
+ const calculatedLeft = Math.max(390, containerWidth - fixedColumnsWidth);
+ this.left = calculatedLeft;
+ this.dynamicResizeMin = calculatedLeft;
Review Comment:
That's right. However, it seems the vertical bar size adjustment doesn't match the right side of the name column.
<img width="614" height="173" alt="image" src="https://github.com/user-attachments/assets/9ac98797-fbbf-4dc0-8c20-00e4053a3a54" />
May I request a review again with changes made to accommodate this part as well?
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on code in PR #27978:
URL: https://github.com/apache/flink/pull/27978#discussion_r3116900967
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts:
##########
@@ -104,7 +117,58 @@ export class JobOverviewListComponent {
return this.innerNodes;
}
- constructor(public readonly elementRef: ElementRef, private readonly statusService: StatusService) {}
+ constructor(
+ public readonly elementRef: ElementRef,
+ private readonly statusService: StatusService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private readonly cdr: ChangeDetectorRef
+ ) {}
+
+ public ngAfterViewInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ setTimeout(() => this.updateLeftBasedOnScreenSize(), 0);
+
+ window.addEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ public ngOnDestroy(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ window.removeEventListener('resize', this.handleWindowResize);
+ }
+ }
+
+ private readonly handleWindowResize = (): void => {
+ this.updateLeftBasedOnScreenSize();
+ };
+
+ /**
+ * Calculate Name column width based on screen size
+ *
+ * Dynamically adjusts the Name column to fill available space by calculating
+ * the total width of all other columns and subtracting from container width.
+ * Minimum width is set to 390px.
+ */
+ private updateLeftBasedOnScreenSize(): void {
+ const containerWidth = this.elementRef.nativeElement.offsetWidth;
+
+ // Calculate total width of all columns except the first one (Name column)
+ const tableHeaders = this.elementRef.nativeElement.querySelectorAll('thead th');
+ let fixedColumnsWidth = 0;
+ tableHeaders.forEach((th: HTMLElement, index: number) => {
+ if (index > 0) {
+ const width = th.getAttribute('nzWidth');
+ if (width) {
+ fixedColumnsWidth += parseInt(width, 10);
+ }
+ }
+ });
+
+ const calculatedLeft = Math.max(390, containerWidth - fixedColumnsWidth);
+ this.left = calculatedLeft;
+ this.dynamicResizeMin = calculatedLeft;
Review Comment:
That's right. However, it seems the vertical bar size adjustment doesn't match the right side of the name column.
May I request a review again with changes made to accommodate this part as well?
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size. [flink]
Posted by "flinkbot (via GitHub)" <gi...@apache.org>.
flinkbot commented on PR #27978:
URL: https://github.com/apache/flink/pull/27978#issuecomment-4280849902
<!--
Meta data
{
"version" : 1,
"metaDataEntries" : [ {
"hash" : "4c8ee003190eed8448fecf912b2bba3420d1d696",
"status" : "UNKNOWN",
"url" : "TBD",
"triggerID" : "4c8ee003190eed8448fecf912b2bba3420d1d696",
"triggerType" : "PUSH"
} ]
}-->
## CI report:
* 4c8ee003190eed8448fecf912b2bba3420d1d696 UNKNOWN
<details>
<summary>Bot commands</summary>
The @flinkbot bot supports the following commands:
- `@flinkbot run azure` re-run the last Azure build
</details>
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on PR #27978:
URL: https://github.com/apache/flink/pull/27978#issuecomment-4289002386
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!
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]
Posted by "och5351 (via GitHub)" <gi...@apache.org>.
och5351 commented on code in PR #27978:
URL: https://github.com/apache/flink/pull/27978#discussion_r3116902373
##########
flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html:
##########
@@ -21,7 +21,7 @@
class="no-border small"
[nzSize]="'small'"
[nzData]="nodes"
- [nzScroll]="{ x: 1360 + left + 'px' }"
+ [nzScroll]="{ x: 1360 + left + 'px', y: null }"
Review Comment:
Hi, @spuru9 !
Thank you for your notice. I'll change soon.
--
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: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org