Re: [PR] [FLINK-39486][runtime-web] Change the size of the job-overview-list section based on screen size [flink]

["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