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

Author: och5351

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>

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 {

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);