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

…llow task status transitions This closes apache#20372
mbalassi · 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] }));
  }
 }