Add metric graphs on cronjob, job and pod list pages. (#4465)

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

* fix test

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;
   }
 

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

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;
   }
 

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

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;
   }
 

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

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},

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 {}

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 {}

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 {}

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;
 }