[FLINK-38899][runtime-web] Introduce the Rescales/History sub-page for streaming jobs with the adaptive scheduler enabled - Temporary commit for review (Changed the expand and styles in the job-rescales.component.html.)

Author: och5351

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

@@ -82,7 +82,7 @@
           <tr>
             <td
               nzShowExpand
-              [(nzExpand)]="history.expand"
+              [nzExpand]="isExpanded(history.rescaleUuid)"
               (nzExpandChange)="onExpandChange(history, $event)"
             ></td>
             <td nz-tooltip [nzTooltipTitle]="history.rescaleUuid">
@@ -101,29 +101,44 @@
             </td>
             <td>{{ history.endTimestampInMillis | date: 'yyyy-MM-dd HH:mm:ss.SSS' }}</td>
           </tr>
-          <tr [nzExpand]="history.expand">
-            <td colspan="10" *ngIf="history.expand" class="collapse-td">
+          <tr [nzExpand]="isExpanded(history.rescaleUuid)">
+            <td colspan="10" *ngIf="isExpanded(history.rescaleUuid)" class="collapse-td">
               <div class="rescale-details-wrapper">
                 <div class="rescale-details-box">
                   <h3><strong>Rescale Details</strong></h3>
-                  <p>
-                    Rescale UUID:
-                    {{ truncateUuid(history.rescaleUuid) }}
-                    <nz-divider nzType="vertical"></nz-divider>
-                    Attempt ID:
-                    {{ history.rescaleAttemptId }}
-                    <nz-divider nzType="vertical"></nz-divider>
-                    Requirements ID:
-                    {{ truncateUuid(history.resourceRequirementsUuid) }}
-                    <nz-divider nzType="vertical"></nz-divider>
-                    Trigger Cause:
-                    {{ history.triggerCause }}
-                    <nz-divider nzType="vertical"></nz-divider>
-                    Terminal State:
-                    {{ history.terminalState }}
-                    <nz-divider nzType="vertical"></nz-divider>
-                    Terminal Reason: {{ history.terminatedReason }}
-                  </p>
+                  <tr>
+                    <td>
+                      <span>
+                        <strong>Rescale UUID:</strong>
+                        {{ truncateUuid(history.rescaleUuid) }}
+                      </span>
+                      <nz-divider nzType="vertical"></nz-divider>
+                      <span>
+                        <strong>Attempt ID:</strong>
+                        {{ history.rescaleAttemptId }}
+                      </span>
+                      <nz-divider nzType="vertical"></nz-divider>
+                      <span>
+                        <strong>Requirements ID:</strong>
+                        {{ truncateUuid(history.resourceRequirementsUuid) }}
+                      </span>
+                      <nz-divider nzType="vertical"></nz-divider>
+                      <span>
+                        <strong>Trigger Cause:</strong>
+                        {{ history.triggerCause }}
+                      </span>
+                      <nz-divider nzType="vertical"></nz-divider>
+                      <span>
+                        <strong>Terminal State:</strong>
+                        {{ history.terminalState }}
+                      </span>
+                      <nz-divider nzType="vertical"></nz-divider>
+                      <span>
+                        <strong>Terminal Reason:</strong>
+                        {{ history.terminatedReason }}
+                      </span>
+                    </td>
+                  </tr>
                   <ng-container *ngIf="getDetail(history.rescaleUuid) as detail">
                     <nz-table
                       class="small"

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

@@ -70,6 +70,7 @@ export class JobRescalesComponent implements OnInit, OnDestroy {
   public rescaleDetailsMap = new Map<string, JobRescaleDetails>();
   public rescalesConfig?: JobRescaleConfigInfo;
   public jobDetail: JobDetail;
+  public expandedRowsSet = new Set<string>();
 
   private refresh$ = new Subject<void>();
   private destroy$ = new Subject<void>();
@@ -133,17 +134,26 @@ export class JobRescalesComponent implements OnInit, OnDestroy {
   }
 
   public onExpandChange(history: BriefJobRescaleDetails, expanded: boolean): void {
-    if (expanded && !this.rescaleDetailsMap.has(history.rescaleUuid)) {
-      this.jobService
-        .loadRescaleDetail(this.jobDetail.jid, history.rescaleUuid)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(detail => {
-          this.rescaleDetailsMap.set(history.rescaleUuid, detail);
-          this.cdr.markForCheck();
-        });
+    if (expanded) {
+      this.expandedRowsSet.add(history.rescaleUuid);
+      if (!this.rescaleDetailsMap.has(history.rescaleUuid)) {
+        this.jobService
+          .loadRescaleDetail(this.jobDetail.jid, history.rescaleUuid)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe(detail => {
+            this.rescaleDetailsMap.set(history.rescaleUuid, detail);
+            this.cdr.markForCheck();
+          });
+      }
+    } else {
+      this.expandedRowsSet.delete(history.rescaleUuid);
     }
   }
 
+  public isExpanded(rescaleUuid: string): boolean {
+    return this.expandedRowsSet.has(rescaleUuid);
+  }
+
   public getDetail(rescaleUuid: string): JobRescaleDetails | undefined {
     return this.rescaleDetailsMap.get(rescaleUuid);
   }