This is an automated email from the ASF dual-hosted git repository.
RocMarshal pushed a commit to branch release-2.3
in repository https://gitbox.apache.org/repos/asf/flink.git
The following commit(s) were added to refs/heads/release-2.3 by this push:
new 0674dd8115b [FLINK-39486][runtime-web] Adapt the size of the
job-overview-list section based on screen size (#27995)
0674dd8115b is described below
commit 0674dd8115b193394aecf57a929e5fb5a259b6af
Author: Chan hae OH <[email protected]>
AuthorDate: Wed Apr 22 23:10:57 2026 +0900
[FLINK-39486][runtime-web] Adapt the size of the job-overview-list section
based on screen size (#27995)
---
.../overview/list/job-overview-list.component.html | 10 ++-
.../overview/list/job-overview-list.component.less | 4 ++
.../overview/list/job-overview-list.component.ts | 75 ++++++++++++++++++++--
3 files changed, 82 insertions(+), 7 deletions(-)
diff --git
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
index 15027efa9a0..25b1fc5dba8 100644
---
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.html
+++
b/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: tableScrollX + 'px' }"
[nzFrontPagination]="false"
[nzShowPagination]="false"
>
@@ -36,7 +36,7 @@
<th [nzSortFn]="sortParallelismFn" nzWidth="100px">Parallelism</th>
<th [nzSortFn]="sortStartTimeFn" nzWidth="150px">Start Time</th>
<th [nzSortFn]="sortDurationFn" nzWidth="150px">Duration</th>
- <th [nzSortFn]="sortEndTimeFn" nzWidth="150px">End Time</th>
+ <th [nzSortFn]="sortEndTimeFn">End Time</th>
<th nzWidth="60px" nzRight>Tasks</th>
<th *ngIf="webRescaleEnabled" nzWidth="80px" nzRight>Scale</th>
</tr>
@@ -136,7 +136,11 @@
</tr>
</tbody>
</nz-table>
-<flink-resize [(left)]="left" [baseElement]="elementRef"
[resizeMin]="390"></flink-resize>
+<flink-resize
+ [(left)]="left"
+ [baseElement]="elementRef"
+ [resizeMin]="dynamicResizeMin"
+></flink-resize>
<ng-template #loadingTemplate>
<span class="text-secondary">loading...</span>
</ng-template>
diff --git
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
index 3a1f1b81ada..05e8a271c45 100644
---
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
+++
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.less
@@ -26,6 +26,10 @@
color: @text-color-secondary;
font-size: @font-size-sm;
}
+
+ ::ng-deep .ant-table-wrapper {
+ width: 100%;
+ }
}
.name {
diff --git
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
index aa517e91b53..90431707589 100644
---
a/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
+++
b/flink-runtime-web/web-dashboard/src/app/pages/job/overview/list/job-overview-list.component.ts
@@ -16,8 +16,20 @@
* limitations under the License.
*/
-import { DecimalPipe, NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input,
Output } from '@angular/core';
+import { DecimalPipe, NgForOf, NgIf, isPlatformBrowser } from
'@angular/common';
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Inject,
+ Input,
+ OnDestroy,
+ Output,
+ PLATFORM_ID
+} from '@angular/core';
import { HumanizeBytesPipe } from
'@flink-runtime-web/components/humanize-bytes.pipe';
import { HumanizeDatePipe } from
'@flink-runtime-web/components/humanize-date.pipe';
@@ -63,7 +75,9 @@ const rescaleTimeout = 2500;
NzBadgeModule
]
})
-export class JobOverviewListComponent {
+export class JobOverviewListComponent implements AfterViewInit, OnDestroy {
+ private static readonly END_TIME_MIN_WIDTH = 200; // Minimum space for End
Time column
+
public readonly trackById = (_: number, node: NodesItemCorrect): string =>
node.id;
public readonly webRescaleEnabled =
this.statusService.configuration.features['web-rescale'];
@@ -79,6 +93,8 @@ export class JobOverviewListComponent {
public innerNodes: NodesItemCorrect[] = [];
public left = 390;
+ public dynamicResizeMin = 390;
+ public tableScrollX = 0;
public desiredParallelism = new Map<string, number>();
@@ -104,7 +120,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();
+ };
+
+ /**
+ * Initialize table dimensions
+ */
+ private updateLeftBasedOnScreenSize(): void {
+ this.left = 390;
+ this.dynamicResizeMin = 390;
+
+ const tableHeaders = this.elementRef.nativeElement.querySelectorAll('thead
th');
+ let fixedColumnsWidth = 0;
+ let foundRightColumn = false;
+
+ tableHeaders.forEach((th: HTMLElement, index: number) => {
+ if (index > 0 && !foundRightColumn) {
+ if (th.hasAttribute('nzright')) {
+ foundRightColumn = true;
+ } else {
+ const width = th.getAttribute('nzWidth');
+ if (width) {
+ fixedColumnsWidth += parseInt(width, 10);
+ }
+ }
+ }
+ });
+
+ this.tableScrollX = this.left + fixedColumnsWidth +
JobOverviewListComponent.END_TIME_MIN_WIDTH;
+ this.cdr.detectChanges();
+ }
public clickNode(node: NodesItemCorrect): void {
this.nodeClick.emit(node);
