From 83f14ffbfb9f2e4e3a87c3a50ba3fe93ca2cb4df Mon Sep 17 00:00:00 2001
From: wjywbs <wjywbs@users.noreply.github.com>
Date: Thu, 31 Oct 2019 07:11:36 -0400
Subject: [PATCH] Add metric graphs on cronjob, job and pod list pages. (#4465)

* Add metric graphs on cronjob, job and pod list pages.

* fix test
---
 .../common/components/resourcelist/cronjob/component.ts     | 6 +++++-
 .../common/components/resourcelist/cronjob/template.html    | 3 +++
 .../common/components/resourcelist/job/component.ts         | 5 ++++-
 .../common/components/resourcelist/job/template.html        | 3 +++
 .../common/components/resourcelist/pod/component.ts         | 5 ++++-
 .../common/components/resourcelist/pod/template.html        | 3 +++
 src/app/frontend/overview/component.spec.ts                 | 1 +
 .../frontend/resource/workloads/cronjob/list/component.ts   | 2 +-
 src/app/frontend/resource/workloads/job/list/component.ts   | 2 +-
 src/app/frontend/resource/workloads/pod/list/component.ts   | 2 +-
 src/app/frontend/typings/backendapi.d.ts                    | 2 ++
 11 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/app/frontend/common/components/resourcelist/cronjob/component.ts b/src/app/frontend/common/components/resourcelist/cronjob/component.ts
index 5c32b13dc7fc..54348db74616 100644
--- a/src/app/frontend/common/components/resourcelist/cronjob/component.ts
+++ b/src/app/frontend/common/components/resourcelist/cronjob/component.ts
@@ -14,7 +14,7 @@
 
 import {HttpParams} from '@angular/common/http';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
-import {CronJob, CronJobList} from '@api/backendapi';
+import {CronJob, CronJobList, Metric} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
@@ -30,6 +30,9 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 })
 export class CronJobListComponent extends ResourceListWithStatuses<CronJobList, CronJob> {
   @Input() endpoint = EndpointManager.resource(Resource.cronJob, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
+
   constructor(
     private readonly cronJob_: NamespacedResourceService<CronJobList>,
     notifications: NotificationsService,
@@ -55,6 +58,7 @@ export class CronJobListComponent extends ResourceListWithStatuses<CronJobList,
   }
 
   map(cronJobList: CronJobList): CronJob[] {
+    this.cumulativeMetrics = cronJobList.cumulativeMetrics;
     return cronJobList.items;
   }
 
diff --git a/src/app/frontend/common/components/resourcelist/cronjob/template.html b/src/app/frontend/common/components/resourcelist/cronjob/template.html
index d39a24a30e23..04f73e59be12 100644
--- a/src/app/frontend/common/components/resourcelist/cronjob/template.html
+++ b/src/app/frontend/common/components/resourcelist/cronjob/template.html
@@ -14,6 +14,9 @@
 limitations under the License.
 -->
 
+<kd-graph-metrics [metrics]="cumulativeMetrics"
+                  *ngIf="showMetrics"></kd-graph-metrics>
+
 <kd-card role="table"
          [hidden]="isHidden()">
   <div title
diff --git a/src/app/frontend/common/components/resourcelist/job/component.ts b/src/app/frontend/common/components/resourcelist/job/component.ts
index 08dab7f68729..f447b7301d7f 100644
--- a/src/app/frontend/common/components/resourcelist/job/component.ts
+++ b/src/app/frontend/common/components/resourcelist/job/component.ts
@@ -20,7 +20,7 @@ import {
   ComponentFactoryResolver,
   Input,
 } from '@angular/core';
-import {Event, Job, JobList} from '@api/backendapi';
+import {Event, Job, JobList, Metric} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 
 import {ResourceListWithStatuses} from '../../../resources/list';
@@ -38,6 +38,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 export class JobListComponent extends ResourceListWithStatuses<JobList, Job> {
   @Input() title: string;
   @Input() endpoint = EndpointManager.resource(Resource.job, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly job_: NamespacedResourceService<JobList>,
@@ -66,6 +68,7 @@ export class JobListComponent extends ResourceListWithStatuses<JobList, Job> {
   }
 
   map(jobList: JobList): Job[] {
+    this.cumulativeMetrics = jobList.cumulativeMetrics;
     return jobList.jobs;
   }
 
diff --git a/src/app/frontend/common/components/resourcelist/job/template.html b/src/app/frontend/common/components/resourcelist/job/template.html
index 5cdbec339d05..daa59f7450e3 100644
--- a/src/app/frontend/common/components/resourcelist/job/template.html
+++ b/src/app/frontend/common/components/resourcelist/job/template.html
@@ -14,6 +14,9 @@
 limitations under the License.
 -->
 
+<kd-graph-metrics [metrics]="cumulativeMetrics"
+                  *ngIf="showMetrics"></kd-graph-metrics>
+
 <kd-card role="table"
          [hidden]="isHidden()">
   <div title
diff --git a/src/app/frontend/common/components/resourcelist/pod/component.ts b/src/app/frontend/common/components/resourcelist/pod/component.ts
index 18e9be4aa93e..d3c89c889b29 100644
--- a/src/app/frontend/common/components/resourcelist/pod/component.ts
+++ b/src/app/frontend/common/components/resourcelist/pod/component.ts
@@ -20,7 +20,7 @@ import {
   ComponentFactoryResolver,
   Input,
 } from '@angular/core';
-import {Event, Pod, PodList} from '@api/backendapi';
+import {Event, Metric, Pod, PodList} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 
 import {ResourceListWithStatuses} from '../../../resources/list';
@@ -37,6 +37,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 })
 export class PodListComponent extends ResourceListWithStatuses<PodList, Pod> {
   @Input() endpoint = EndpointManager.resource(Resource.pod, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly podList: NamespacedResourceService<PodList>,
@@ -65,6 +67,7 @@ export class PodListComponent extends ResourceListWithStatuses<PodList, Pod> {
   }
 
   map(podList: PodList): Pod[] {
+    this.cumulativeMetrics = podList.cumulativeMetrics;
     return podList.pods;
   }
 
diff --git a/src/app/frontend/common/components/resourcelist/pod/template.html b/src/app/frontend/common/components/resourcelist/pod/template.html
index e2f8ee142496..9214258ee770 100644
--- a/src/app/frontend/common/components/resourcelist/pod/template.html
+++ b/src/app/frontend/common/components/resourcelist/pod/template.html
@@ -14,6 +14,9 @@
 limitations under the License.
 -->
 
+<kd-graph-metrics [metrics]="cumulativeMetrics"
+                  *ngIf="showMetrics"></kd-graph-metrics>
+
 <kd-card role="table"
          [hidden]="isHidden()">
   <div title
diff --git a/src/app/frontend/overview/component.spec.ts b/src/app/frontend/overview/component.spec.ts
index f9d04ac959bd..0dc6813a40e3 100644
--- a/src/app/frontend/overview/component.spec.ts
+++ b/src/app/frontend/overview/component.spec.ts
@@ -50,6 +50,7 @@ const mockPodsData: PodList = {
 };
 
 const mockCronJobsData: CronJobList = {
+  cumulativeMetrics: [],
   listMeta: {totalItems: 18},
   items: [],
   status: {running: 8, pending: 1, succeeded: 4, failed: 5},
diff --git a/src/app/frontend/resource/workloads/cronjob/list/component.ts b/src/app/frontend/resource/workloads/cronjob/list/component.ts
index 61f2fc2580bb..d2e5b164a68c 100644
--- a/src/app/frontend/resource/workloads/cronjob/list/component.ts
+++ b/src/app/frontend/resource/workloads/cronjob/list/component.ts
@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-cron-job-list-state',
-  template: '<kd-cron-job-list></kd-cron-job-list>',
+  template: '<kd-cron-job-list [showMetrics]="true"></kd-cron-job-list>',
 })
 export class CronJobListComponent {}
diff --git a/src/app/frontend/resource/workloads/job/list/component.ts b/src/app/frontend/resource/workloads/job/list/component.ts
index ae7c792d87f0..13a836ad7500 100644
--- a/src/app/frontend/resource/workloads/job/list/component.ts
+++ b/src/app/frontend/resource/workloads/job/list/component.ts
@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-job-list-state',
-  template: '<kd-job-list></kd-job-list>',
+  template: '<kd-job-list [showMetrics]="true"></kd-job-list>',
 })
 export class JobListComponent {}
diff --git a/src/app/frontend/resource/workloads/pod/list/component.ts b/src/app/frontend/resource/workloads/pod/list/component.ts
index 04078c2d95e1..aedac2bf9fb7 100644
--- a/src/app/frontend/resource/workloads/pod/list/component.ts
+++ b/src/app/frontend/resource/workloads/pod/list/component.ts
@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-pod-list-state',
-  template: '<kd-pod-list></kd-pod-list>',
+  template: '<kd-pod-list [showMetrics]="true"></kd-pod-list>',
 })
 export class PodListComponent {}
diff --git a/src/app/frontend/typings/backendapi.d.ts b/src/app/frontend/typings/backendapi.d.ts
index eb80c2d1df52..8188f25569f3 100644
--- a/src/app/frontend/typings/backendapi.d.ts
+++ b/src/app/frontend/typings/backendapi.d.ts
@@ -75,6 +75,7 @@ export interface ConfigMapList extends ResourceList {
 }
 
 export interface CronJobList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   items: CronJob[];
   status: Status;
 }
@@ -117,6 +118,7 @@ export interface IngressList extends ResourceList {
 }
 
 export interface JobList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   jobs: Job[];
   status: Status;
 }