[FLINK-38899][runtime-web] Introduce the Rescales/History sub-page for streaming jobs with the adaptive scheduler enabled - Temporary commit for review (Changed the variable name and refresh for detail panel)

Author: 2948351

flink-runtime-web/web-dashboard/src/app/pages/job/rescales/job-rescales.component.html

@@ -27,7 +27,7 @@
     <nz-table
       class="no-border small"
       [nzSize]="'small'"
-      [nzData]="rescalesHistories || []"
+      [nzData]="jobRescaleDetails || []"
       [nzFrontPagination]="false"
       [nzShowPagination]="false"
     >
@@ -79,83 +79,85 @@
         </tr>
       </thead>
       <tbody>
-        <ng-container *ngFor="let history of rescalesHistories; trackBy: trackById">
+        <ng-container *ngFor="let jobRescaleDetails of rescalesHistory; trackBy: trackById">
           <tr>
             <td
               nzShowExpand
-              [nzExpand]="isExpanded(history.rescaleUuid)"
-              (nzExpandChange)="onExpandChange(history, $event)"
+              [nzExpand]="isExpanded(jobRescaleDetails.rescaleUuid)"
+              (nzExpandChange)="onExpandChange(jobRescaleDetails, $event)"
             ></td>
-            <td nz-tooltip [nzTooltipTitle]="history.rescaleUuid">
-              {{ truncateUuid(history.rescaleUuid) }}
+            <td nz-tooltip [nzTooltipTitle]="jobRescaleDetails.rescaleUuid">
+              {{ truncateUuid(jobRescaleDetails.rescaleUuid) }}
             </td>
-            <td>{{ history.rescaleAttemptId }}</td>
-            <td nz-tooltip [nzTooltipTitle]="history.resourceRequirementsUuid">
-              {{ truncateUuid(history.resourceRequirementsUuid) }}
+            <td>{{ jobRescaleDetails.rescaleAttemptId }}</td>
+            <td nz-tooltip [nzTooltipTitle]="jobRescaleDetails.resourceRequirementsUuid">
+              {{ truncateUuid(jobRescaleDetails.resourceRequirementsUuid) }}
             </td>
-            <td>{{ history.triggerCause }}</td>
+            <td>{{ jobRescaleDetails.triggerCause }}</td>
             <td>
               <flink-job-badge
-                *ngIf="history.terminalState"
-                [state]="history.terminalState"
+                *ngIf="jobRescaleDetails.terminalState"
+                [state]="jobRescaleDetails.terminalState"
               ></flink-job-badge>
-              <span *ngIf="!history.terminalState">-</span>
+              <span *ngIf="!jobRescaleDetails.terminalState">-</span>
+            </td>
+            <td>{{ jobRescaleDetails.terminatedReason || '-' }}</td>
+            <td>
+              {{ jobRescaleDetails.startTimestampInMillis | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}
             </td>
-            <td>{{ history.terminatedReason || '-' }}</td>
-            <td>{{ history.startTimestampInMillis | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
             <td>
               {{
-                (history.endTimestampInMillis || Date.now()) - history.startTimestampInMillis
-                  | humanizeDuration
+                (jobRescaleDetails.endTimestampInMillis || Date.now()) -
+                  jobRescaleDetails.startTimestampInMillis | humanizeDuration
               }}
             </td>
             <td>
               {{
-                history.endTimestampInMillis
-                  ? (history.endTimestampInMillis | date: 'yyyy-MM-dd HH:mm:ss.SSS')
+                jobRescaleDetails.endTimestampInMillis
+                  ? (jobRescaleDetails.endTimestampInMillis | date: 'yyyy-MM-dd HH:mm:ss.SSS')
                   : '-'
               }}
             </td>
           </tr>
-          <tr [nzExpand]="isExpanded(history.rescaleUuid)">
-            <td colspan="10" *ngIf="isExpanded(history.rescaleUuid)" class="collapse-td">
+          <tr [nzExpand]="isExpanded(jobRescaleDetails.rescaleUuid)">
+            <td colspan="10" *ngIf="isExpanded(jobRescaleDetails.rescaleUuid)" class="collapse-td">
               <div class="rescale-details-wrapper">
                 <div class="rescale-details-box">
                   <h3><strong>Rescale Details</strong></h3>
                   <tr>
                     <td>
                       <span>
                         <strong>Rescale UUID:</strong>
-                        {{ truncateUuid(history.rescaleUuid) }}
+                        {{ truncateUuid(jobRescaleDetails.rescaleUuid) }}
                       </span>
                       <nz-divider nzType="vertical"></nz-divider>
                       <span>
                         <strong>Attempt ID:</strong>
-                        {{ history.rescaleAttemptId }}
+                        {{ jobRescaleDetails.rescaleAttemptId }}
                       </span>
                       <nz-divider nzType="vertical"></nz-divider>
                       <span>
                         <strong>Requirements ID:</strong>
-                        {{ truncateUuid(history.resourceRequirementsUuid) }}
+                        {{ truncateUuid(jobRescaleDetails.resourceRequirementsUuid) }}
                       </span>
                       <nz-divider nzType="vertical"></nz-divider>
                       <span>
                         <strong>Trigger Cause:</strong>
-                        {{ history.triggerCause }}
+                        {{ jobRescaleDetails.triggerCause }}
                       </span>
                       <nz-divider nzType="vertical"></nz-divider>
                       <span>
                         <strong>Terminal State:</strong>
-                        {{ history?.terminalState || '-' }}
+                        {{ jobRescaleDetails?.terminalState || '-' }}
                       </span>
                       <nz-divider nzType="vertical"></nz-divider>
                       <span>
                         <strong>Terminal Reason:</strong>
-                        {{ history?.terminatedReason || '-' }}
+                        {{ jobRescaleDetails?.terminatedReason || '-' }}
                       </span>
                     </td>
                   </tr>
-                  <ng-container *ngIf="getDetail(history.rescaleUuid) as detail">
+                  <ng-container *ngIf="getDetail(jobRescaleDetails.rescaleUuid) as detail">
                     <nz-table
                       class="small"
                       [nzData]="detail.vertices | keyvalue"
@@ -362,7 +364,7 @@ <h3><strong>Rescale Details</strong></h3>
                     </nz-table>
                   </ng-container>
 
-                  <div *ngIf="!getDetail(history.rescaleUuid)">Loading...</div>
+                  <div *ngIf="!getDetail(jobRescaleDetails.rescaleUuid)">Loading...</div>
                 </div>
               </div>
             </td>

flink-runtime-web/web-dashboard/src/app/pages/job/rescales/job-rescales.component.ts

@@ -66,7 +66,7 @@ import { JobLocalService } from '../job-local.service';
   ]
 })
 export class JobRescalesComponent implements OnInit, OnDestroy {
-  public rescalesHistories?: RescalesHistory;
+  public rescalesHistory?: RescalesHistory;
   public rescaleDetailsMap = new Map<string, JobRescaleDetails>();
   public rescalesConfig?: JobRescaleConfigInfo;
   public jobDetail: JobDetail;
@@ -102,7 +102,7 @@ export class JobRescalesComponent implements OnInit, OnDestroy {
         takeUntil(this.destroy$)
       )
       .subscribe(([histories, config]) => {
-        this.rescalesHistories = histories;
+        this.rescalesHistory = histories;
         this.rescalesConfig = config;
         this.cdr.markForCheck();
       });
@@ -127,27 +127,40 @@ export class JobRescalesComponent implements OnInit, OnDestroy {
   }
 
   public refresh(): void {
+    // Reload expanded rescale details without clearing (to avoid flickering)
+    const expandedUuids = Array.from(this.expandedRowsSet);
+
+    expandedUuids.forEach(uuid => {
+      this.jobService
+        .loadRescaleDetail(this.jobDetail.jid, uuid)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(detail => {
+          this.rescaleDetailsMap.set(uuid, detail);
+          this.cdr.markForCheck();
+        });
+    });
+
     this.refresh$.next();
   }
 
   public trackById(item: BriefJobRescaleDetails): string {
     return item.rescaleUuid;
   }
 
-  public onExpandChange(history: BriefJobRescaleDetails, expanded: boolean): void {
+  public onExpandChange(jobRescaleDetails: BriefJobRescaleDetails, expanded: boolean): void {
     if (expanded) {
-      this.expandedRowsSet.add(history.rescaleUuid);
-      if (!this.rescaleDetailsMap.has(history.rescaleUuid)) {
+      this.expandedRowsSet.add(jobRescaleDetails.rescaleUuid);
+      if (!this.rescaleDetailsMap.has(jobRescaleDetails.rescaleUuid)) {
         this.jobService
-          .loadRescaleDetail(this.jobDetail.jid, history.rescaleUuid)
+          .loadRescaleDetail(this.jobDetail.jid, jobRescaleDetails.rescaleUuid)
           .pipe(takeUntil(this.destroy$))
           .subscribe(detail => {
-            this.rescaleDetailsMap.set(history.rescaleUuid, detail);
+            this.rescaleDetailsMap.set(jobRescaleDetails.rescaleUuid, detail);
             this.cdr.markForCheck();
           });
       }
     } else {
-      this.expandedRowsSet.delete(history.rescaleUuid);
+      this.expandedRowsSet.delete(jobRescaleDetails.rescaleUuid);
     }
   }