Add metric graphs to remaining views (#4449)

* Add metric graphs on node detail, pod detail, daemon sets list, deployments list, node list, replica set list and stateful sets list pages.

Part of #3866.

* Add missing field.

* fix:frontend:ts

* fix test

src/app/frontend/common/components/graphmetrics/component.ts

+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Component, Input} from '@angular/core';
+import {Metric} from '@api/backendapi';
+
+@Component({
+  selector: 'kd-graph-metrics',
+  templateUrl: './template.html',
+  styleUrls: ['./style.scss'],
+})
+export class GraphMetricsComponent {
+  @Input() metrics: Metric[];
+
+  showGraphs(): boolean {
+    return (
+      this.metrics &&
+      this.metrics.every(metrics => metrics.dataPoints && metrics.dataPoints.length > 1)
+    );
+  }
+}

src/app/frontend/common/components/graphmetrics/template.html

+<!--
+Copyright 2017 The Kubernetes Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div fxLayout="row"
+     *ngIf="showGraphs()">
+  <div class="graph-col">
+    <kd-graph-card graphTitle="CPU Usage"
+                   [metrics]="metrics"
+                   selectedMetricName="cpu/usage_rate"></kd-graph-card>
+  </div>
+  <div class="graph-col">
+    <kd-graph-card graphTitle="Memory Usage"
+                   [metrics]="metrics"
+                   selectedMetricName="memory/usage"></kd-graph-card>
+  </div>
+</div>

src/app/frontend/common/components/module.ts

@@ -46,6 +46,7 @@ import {ExternalEndpointComponent} from './endpoint/external/component';
 import {InternalEndpointComponent} from './endpoint/internal/component';
 import {GraphComponent} from './graph/component';
 import {GraphCardComponent} from './graphcard/component';
+import {GraphMetricsComponent} from './graphmetrics/component';
 import {HiddenPropertyComponent} from './hiddenproperty/component';
 import {ResourceLimitListComponent} from './limits/component';
 import {ColumnComponent} from './list/column/component';
@@ -121,8 +122,6 @@ const components = [
   CRDListComponent,
   CRDObjectListComponent,
   CRDVersionListComponent,
-  GraphComponent,
-  GraphCardComponent,
 
   DaemonSetListComponent,
   DateComponent,
@@ -133,6 +132,10 @@ const components = [
   ExternalEndpointComponent,
   EventListComponent,
 
+  GraphComponent,
+  GraphCardComponent,
+  GraphMetricsComponent,
+
   HiddenPropertyComponent,
 
   IngressListComponent,

src/app/frontend/common/components/resourcelist/daemonset/component.ts

@@ -20,7 +20,7 @@ import {
   ComponentFactoryResolver,
   Input,
 } from '@angular/core';
-import {DaemonSet, DaemonSetList, Event} from '@api/backendapi';
+import {DaemonSet, DaemonSetList, Event, Metric} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 
 import {ResourceListWithStatuses} from '../../../resources/list';
@@ -37,6 +37,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 })
 export class DaemonSetListComponent extends ResourceListWithStatuses<DaemonSetList, DaemonSet> {
   @Input() endpoint = EndpointManager.resource(Resource.daemonSet, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly daemonSet_: NamespacedResourceService<DaemonSetList>,
@@ -65,6 +67,7 @@ export class DaemonSetListComponent extends ResourceListWithStatuses<DaemonSetLi
   }
 
   map(daemonSetList: DaemonSetList): DaemonSet[] {
+    this.cumulativeMetrics = daemonSetList.cumulativeMetrics;
     return daemonSetList.daemonSets;
   }
 

src/app/frontend/common/components/resourcelist/daemonset/template.html

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 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/deployment/component.ts

@@ -20,7 +20,7 @@ import {
   ComponentFactoryResolver,
   Input,
 } from '@angular/core';
-import {Deployment, DeploymentList, Event} from '@api/backendapi';
+import {Deployment, DeploymentList, Event, Metric} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
@@ -36,6 +36,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 })
 export class DeploymentListComponent extends ResourceListWithStatuses<DeploymentList, Deployment> {
   @Input() endpoint = EndpointManager.resource(Resource.deployment, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly deployment_: NamespacedResourceService<DeploymentList>,
@@ -64,6 +66,7 @@ export class DeploymentListComponent extends ResourceListWithStatuses<Deployment
   }
 
   map(deploymentList: DeploymentList): Deployment[] {
+    this.cumulativeMetrics = deploymentList.cumulativeMetrics;
     return deploymentList.deployments;
   }
 

src/app/frontend/common/components/resourcelist/deployment/template.html

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 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/node/component.ts

@@ -14,7 +14,7 @@
 
 import {HttpParams} from '@angular/common/http';
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
-import {Node, NodeList} from '@api/backendapi';
+import {Metric, Node, NodeList} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
@@ -30,6 +30,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 })
 export class NodeListComponent extends ResourceListWithStatuses<NodeList, Node> {
   @Input() endpoint = EndpointManager.resource(Resource.node).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly node_: ResourceService<NodeList>,
@@ -54,6 +56,7 @@ export class NodeListComponent extends ResourceListWithStatuses<NodeList, Node>
   }
 
   map(nodeList: NodeList): Node[] {
+    this.cumulativeMetrics = nodeList.cumulativeMetrics;
     return nodeList.nodes;
   }
 

src/app/frontend/common/components/resourcelist/node/template.html

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 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/replicaset/component.ts

@@ -21,7 +21,7 @@ import {
   Input,
 } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {Event, ReplicaSet, ReplicaSetList} from '@api/backendapi';
+import {Event, Metric, ReplicaSet, ReplicaSetList} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 
 import {ResourceListWithStatuses} from '../../../resources/list';
@@ -39,6 +39,8 @@ import {ListGroupIdentifier, ListIdentifier} from '../groupids';
 export class ReplicaSetListComponent extends ResourceListWithStatuses<ReplicaSetList, ReplicaSet> {
   @Input() title: string;
   @Input() endpoint = EndpointManager.resource(Resource.replicaSet, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly replicaSet_: NamespacedResourceService<ReplicaSetList>,
@@ -68,6 +70,7 @@ export class ReplicaSetListComponent extends ResourceListWithStatuses<ReplicaSet
   }
 
   map(rsList: ReplicaSetList): ReplicaSet[] {
+    this.cumulativeMetrics = rsList.cumulativeMetrics;
     return rsList.replicaSets;
   }
 

src/app/frontend/common/components/resourcelist/replicaset/template.html

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 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/statefulset/component.ts

@@ -20,7 +20,7 @@ import {
   ComponentFactoryResolver,
   Input,
 } from '@angular/core';
-import {Event, StatefulSet, StatefulSetList} from '@api/backendapi';
+import {Event, Metric, StatefulSet, StatefulSetList} from '@api/backendapi';
 import {Observable} from 'rxjs/Observable';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
@@ -39,6 +39,8 @@ export class StatefulSetListComponent extends ResourceListWithStatuses<
   StatefulSet
 > {
   @Input() endpoint = EndpointManager.resource(Resource.statefulSet, true).list();
+  @Input() showMetrics = false;
+  cumulativeMetrics: Metric[];
 
   constructor(
     private readonly statefulSet_: NamespacedResourceService<StatefulSetList>,
@@ -67,6 +69,7 @@ export class StatefulSetListComponent extends ResourceListWithStatuses<
   }
 
   map(statefulSetList: StatefulSetList): StatefulSet[] {
+    this.cumulativeMetrics = statefulSetList.cumulativeMetrics;
     return statefulSetList.statefulSets;
   }
 

src/app/frontend/common/components/resourcelist/statefulset/template.html

@@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
 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

@@ -34,6 +34,7 @@ import {OverviewComponent} from './component';
 import {Helper, ResourceRatioModes} from './helper';
 
 const mockDaemonSetData: DaemonSetList = {
+  cumulativeMetrics: [],
   listMeta: {totalItems: 1},
   daemonSets: [],
   status: {running: 1, pending: 0, succeeded: 0, failed: 0},

src/app/frontend/overview/component.ts

@@ -35,7 +35,6 @@ import {Helper, ResourceRatioModes} from './helper';
 @Component({
   selector: 'kd-overview',
   templateUrl: './template.html',
-  styleUrls: ['./style.scss'],
 })
 export class OverviewComponent extends GroupedResourceList {
   hasWorkloads(): boolean {
@@ -56,10 +55,4 @@ export class OverviewComponent extends GroupedResourceList {
       0
     );
   }
-
-  showGraphs(): boolean {
-    return this.cumulativeMetrics.every(
-      metrics => metrics.dataPoints && metrics.dataPoints.length > 1,
-    );
-  }
 }

src/app/frontend/overview/template.html

@@ -20,19 +20,7 @@ limitations under the License.
        i18n>Workloads</div>
 
   <div>
-    <div fxLayout="row"
-         *ngIf="showGraphs()">
-      <div class="graph-col">
-        <kd-graph-card graphTitle="CPU Usage"
-                       [metrics]="cumulativeMetrics"
-                       selectedMetricName="cpu/usage_rate"></kd-graph-card>
-      </div>
-      <div class="graph-col">
-        <kd-graph-card graphTitle="Memory Usage"
-                       [metrics]="cumulativeMetrics"
-                       selectedMetricName="memory/usage"></kd-graph-card>
-      </div>
-    </div>
+    <kd-graph-metrics [metrics]="cumulativeMetrics"></kd-graph-metrics>
 
     <!-- TODO: Workload statuses cause a memory leak. Has to be fixed before enabling it back. -->
     <kd-workload-statuses *ngIf="false"

src/app/frontend/resource/cluster/node/detail/template.html

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<kd-graph-metrics [metrics]="node?.metrics"></kd-graph-metrics>
+
 <kd-object-meta [initialized]="isInitialized"
                 [objectMeta]="node?.objectMeta"></kd-object-meta>
 

src/app/frontend/resource/cluster/node/list/component.ts

@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-node-list-state',
-  template: '<kd-node-list></kd-node-list>',
+  template: '<kd-node-list [showMetrics]="true"></kd-node-list>',
 })
 export class NodeListComponent {}

src/app/frontend/resource/workloads/component.ts

@@ -54,10 +54,4 @@ export class WorkloadsComponent extends GroupedResourceList {
       0
     );
   }
-
-  showGraphs(): boolean {
-    return this.cumulativeMetrics.every(
-      metrics => metrics.dataPoints && metrics.dataPoints.length > 1,
-    );
-  }
 }

src/app/frontend/resource/workloads/daemonset/list/component.ts

@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-daemon-set-list-state',
-  template: '<kd-daemon-set-list></kd-daemon-set-list>',
+  template: '<kd-daemon-set-list [showMetrics]="true"></kd-daemon-set-list>',
 })
 export class DaemonSetListComponent {}

src/app/frontend/resource/workloads/deployment/list/component.ts

@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-deployment-list-state',
-  template: '<kd-deployment-list></kd-deployment-list>',
+  template: '<kd-deployment-list [showMetrics]="true"></kd-deployment-list>',
 })
 export class DeploymentListComponent {}

src/app/frontend/resource/workloads/pod/detail/template.html

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<kd-graph-metrics [metrics]="pod?.metrics"></kd-graph-metrics>
+
 <kd-object-meta [initialized]="isInitialized"
                 [objectMeta]="pod?.objectMeta"></kd-object-meta>
 

src/app/frontend/resource/workloads/replicaset/list/component.ts

@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-replica-set-list-state',
-  template: '<kd-replica-set-list></kd-replica-set-list>',
+  template: '<kd-replica-set-list [showMetrics]="true"></kd-replica-set-list>',
 })
 export class ReplicaSetListComponent {}

src/app/frontend/resource/workloads/statefulset/list/component.ts

@@ -16,6 +16,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'kd-stateful-set-state',
-  template: '<kd-stateful-set-list></kd-stateful-set-list>',
+  template: '<kd-stateful-set-list [showMetrics]="true"></kd-stateful-set-list>',
 })
 export class StatefulSetListComponent {}

src/app/frontend/typings/backendapi.d.ts

@@ -89,11 +89,13 @@ export interface CRDObjectList extends ResourceList {
 }
 
 export interface DaemonSetList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   daemonSets: DaemonSet[];
   status: Status;
 }
 
 export interface DeploymentList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   deployments: Deployment[];
   status: Status;
 }
@@ -124,6 +126,7 @@ export interface NamespaceList extends ResourceList {
 }
 
 export interface NodeList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   nodes: Node[];
 }
 
@@ -147,6 +150,7 @@ export interface PodList extends ResourceList {
 }
 
 export interface ReplicaSetList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   replicaSets: ReplicaSet[];
   status: Status;
 }
@@ -169,6 +173,7 @@ export interface ServiceList extends ResourceList {
 }
 
 export interface StatefulSetList extends ResourceList {
+  cumulativeMetrics: Metric[] | null;
   statefulSets: StatefulSet[];
   status: Status;
 }
@@ -512,7 +517,7 @@ export interface PodDetail extends ResourceDetail {
   nodeName: string;
   restartCount: number;
   qosClass: string;
-  metrics: PodMetrics;
+  metrics: Metric[];
   conditions: Condition[];
   controller: Resource;
   eventList: EventList;
@@ -530,6 +535,7 @@ export interface NodeDetail extends ResourceDetail {
   initContainerImages: string[];
   addresses: NodeAddress[];
   taints: NodeTaint[];
+  metrics: Metric[];
   conditions: Condition[];
   podList: PodList;
   eventList: EventList;