[FLINK-28698][runtime-web] fix order of subtask duration badges to fo…

…llow task status transitions This closes apache#20372
liuzidi · Jul 28, 2022 · 1e18047 · 1e18047
1 parent b0c37b8
commit 1e18047
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/flink-runtime-web/web-dashboard/src/app/interfaces/job-vertex.ts b/flink-runtime-web/web-dashboard/src/app/interfaces/job-vertex.ts
@@ -44,12 +44,20 @@ export interface AggregatedStatistics {
   p95: number;
 }
 
+export enum JobVertexStatus {
+  CREATED = 'CREATED',
+  SCHEDULED = 'SCHEDULED',
+  DEPLOYING = 'DEPLOYING',
+  INITIALIZING = 'INITIALIZING',
+  RUNNING = 'RUNNING'
+}
+
 export interface JobVertexStatusDuration<T> {
-  CREATED: T;
-  INITIALIZING: T;
-  RUNNING: T;
-  SCHEDULED: T;
-  DEPLOYING: T;
+  [JobVertexStatus.CREATED]: T;
+  [JobVertexStatus.INITIALIZING]: T;
+  [JobVertexStatus.RUNNING]: T;
+  [JobVertexStatus.SCHEDULED]: T;
+  [JobVertexStatus.DEPLOYING]: T;
 }
 
 export interface JobVertexAggregated {

diff --git a/...dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html b/...dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.html
@@ -97,7 +97,7 @@
                 <ng-template #badges>
                   <flink-dynamic-host
                     *ngFor="let duration of convertStatusDuration(subtask['status-duration'])"
-                    [data]="{ state: duration.key, duration: duration.value }"
+                    [data]="duration"
                     [component]="durationBadgeComponent"
                   ></flink-dynamic-host>
                 </ng-template>

diff --git a/...b-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.ts b/...b-dashboard/src/app/pages/job/overview/subtasks/job-overview-drawer-subtasks.component.ts
@@ -20,7 +20,12 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestro
 import { of, Subject } from 'rxjs';
 import { catchError, mergeMap, takeUntil } from 'rxjs/operators';
 
-import { JobVertexAggregated, JobVertexStatusDuration, JobVertexSubTask } from '@flink-runtime-web/interfaces';
+import {
+  JobVertexAggregated,
+  JobVertexStatus,
+  JobVertexStatusDuration,
+  JobVertexSubTask
+} from '@flink-runtime-web/interfaces';
 import {
   JOB_OVERVIEW_MODULE_CONFIG,
   JOB_OVERVIEW_MODULE_DEFAULT_CONFIG,
@@ -106,10 +111,15 @@ export class JobOverviewDrawerSubtasksComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-  convertStatusDuration(duration: JobVertexStatusDuration<number>): Array<{ key: string; value: number }> {
-    return Object.keys(duration || {}).map(key => ({
-      key,
-      value: duration[key as keyof JobVertexStatusDuration<number>]
-    }));
+  convertStatusDuration(statusDuration: JobVertexStatusDuration<number>): Array<{ state: string; duration: number }> {
+    const orderedKeys = [
+      JobVertexStatus.CREATED,
+      JobVertexStatus.SCHEDULED,
+      JobVertexStatus.DEPLOYING,
+      JobVertexStatus.INITIALIZING,
+      JobVertexStatus.RUNNING
+    ];
+
+    return orderedKeys.map(key => ({ state: key, duration: statusDuration[key] }));
   }
 }