Reintroduce metrics and sparklines to pods (#871)

bryk · web-flow · commit 8ab77bbc4ed0 · 2016-06-10T14:14:14.000+02:00
Fixes #825 Also, moved logs link into an incon in actions column.
diff --git a/i18n/messages-en.xtb b/i18n/messages-en.xtb
@@ -361,4 +361,6 @@
 	<translation id="1076978057900823839" key="MSG_LIST_ACTION_BAR_UPLOAD_YAML_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for upload YAML button.">Upload YAML</translation>
 	<translation id="1984076222529061421" key="MSG_RC_DETAIL_ACTION_BAR_EDIT_PODS_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Tooltip for the 'scale' button on the action bar of a replication controller details view.">Scale</translation>
 	<translation id="8808405168042160441" key="MSG_RC_LIST_EDIT_POD_COUNT_ACTION" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Action 'Edit Pod Count' on the drop down menu for a single replication controller (replication controller list page).">Scale</translation>
+	<translation id="1811662550159188281" key="MSG_POD_LIST_CPU_USAGE_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label which appears as a column label in the table of pods">CPU (cores)</translation>
+	<translation id="9149343004693743620" key="MSG_POD_LIST_MEMORY_USAGE_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label which appears as a column label in the table of pods">Memory (bytes)</translation>
 </translationbundle>
diff --git a/i18n/messages-ja.xtb b/i18n/messages-ja.xtb
@@ -361,4 +361,6 @@
 	<translation id="1076978057900823839" key="MSG_LIST_ACTION_BAR_UPLOAD_YAML_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label for upload YAML button.">Upload YAML</translation>
 	<translation id="1984076222529061421" key="MSG_RC_DETAIL_ACTION_BAR_EDIT_PODS_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Tooltip for the 'scale' button on the action bar of a replication controller details view.">Scale</translation>
 	<translation id="8808405168042160441" key="MSG_RC_LIST_EDIT_POD_COUNT_ACTION" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Action 'Edit Pod Count' on the drop down menu for a single replication controller (replication controller list page).">Scale</translation>
-</translationbundle>
+	<translation id="1811662550159188281" key="MSG_POD_LIST_CPU_USAGE_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label which appears as a column label in the table of pods">CPU (cores)</translation>
+	<translation id="9149343004693743620" key="MSG_POD_LIST_MEMORY_USAGE_LABEL" source="/usr/local/google/home/bryk/src/github.com/dashboard/.tmp/serve/app-dev.js" desc="Label which appears as a column label in the table of pods">Memory (bytes)</translation>
+</translationbundle>
diff --git a/src/app/frontend/common/components/resourcecard/resourcecardcolumn.scss b/src/app/frontend/common/components/resourcecard/resourcecardcolumn.scss
@@ -33,10 +33,11 @@ kd-resource-card-column {
 
   // Add this class kd-resource-card-column to make it a compact column with icons.
   &.kd-icon-column {
+    margin-bottom: -$baseline-grid / 2;
+    padding-top: 0;
+
     .md-button {
-      height: auto;
       margin: 0;
-      padding: 0;
     }
 
     .kd-resource-card-column-container {
diff --git a/src/app/frontend/common/components/sparkline/sparkline.scss b/src/app/frontend/common/components/sparkline/sparkline.scss
@@ -0,0 +1,26 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// 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 '../../../variables';
+
+.kd-sparkline {
+  background-color: $body;
+  height: 2.5 * $baseline-grid;
+  vertical-align: -$baseline-grid / 2; // 20% below baseline, to flow with text
+  width: 12.5 * $baseline-grid;
+}
+
+.kd-sparkline-series {
+  fill: $chart-1;
+}
diff --git a/src/app/frontend/common/components/sparkline/sparkline_directive.js b/src/app/frontend/common/components/sparkline/sparkline_directive.js
@@ -25,6 +25,6 @@ export default function sparklineDirective() {
     templateUrl: 'common/components/sparkline/sparkline.html',
     templateNamespace: 'svg',
     scope: {},
-    bindToController: {'timeseries': '='},
+    bindToController: {'timeseries': '<'},
   };
 }
diff --git a/src/app/frontend/podlist/podcardlist.html b/src/app/frontend/podlist/podcardlist.html
@@ -18,13 +18,14 @@
                        ng-if="::$ctrl.podList.pods">
   <kd-resource-card-header-columns>
     <kd-resource-card-header-column size="medium" grow="4">{{::$ctrl.i18n.MSG_POD_LIST_NAME_LABEL}}</kd-resource-card-header-column>
-    <kd-resource-card-header-column>{{::$ctrl.i18n.MSG_POD_LIST_STATUS_LABEL}}</kd-resource-card-header-column>
+    <kd-resource-card-header-column grow="nogrow">{{::$ctrl.i18n.MSG_POD_LIST_STATUS_LABEL}}</kd-resource-card-header-column>
     <kd-resource-card-header-column size="small" grow="nogrow">
       {{::$ctrl.i18n.MSG_POD_LIST_RESTARTS_LABEL}}
     </kd-resource-card-header-column>
-    <kd-resource-card-header-column>{{::$ctrl.i18n.MSG_POD_LIST_AGE_LABEL}}</kd-resource-card-header-column>
-    <kd-resource-card-header-column>{{::$ctrl.i18n.MSG_POD_LIST_CLUSTER_IP_LABEL}}</kd-resource-card-header-column>
-    <kd-resource-card-header-column>{{::$ctrl.i18n.MSG_POD_LIST_LOGS_LABEL}}</kd-resource-card-header-column>
+    <kd-resource-card-header-column grow="nogrow">{{::$ctrl.i18n.MSG_POD_LIST_AGE_LABEL}}</kd-resource-card-header-column>
+    <kd-resource-card-header-column grow="nogrow">{{::$ctrl.i18n.MSG_POD_LIST_CLUSTER_IP_LABEL}}</kd-resource-card-header-column>
+    <kd-resource-card-header-column ng-if="::$ctrl.showMetrics()">{{::$ctrl.i18n.MSG_POD_LIST_CPU_USAGE_LABEL}}</kd-resource-card-header-column>
+    <kd-resource-card-header-column ng-if="::$ctrl.showMetrics()">{{::$ctrl.i18n.MSG_POD_LIST_MEMORY_USAGE_LABEL}}</kd-resource-card-header-column>
     <kd-resource-card-header-column size="small" grow="nogrow">
     </kd-resource-card-header-column>
   </kd-resource-card-header-columns>
@@ -69,16 +70,26 @@
         <div ng-if="::pod.podIP">{{::pod.podIP}}</div>
         <div ng-if="::!pod.podIP">-</div>
       </kd-resource-card-column>
-      <kd-resource-card-column>
-        <div ng-if="::$ctrl.getPodLogsHref(pod)">
-          <a ng-href="{{::$ctrl.getPodLogsHref(pod)}}" target="_blank">
-            {{::$ctrl.i18n.MSG_POD_LIST_LOGS_LABEL}}
-            <i class="material-icons kd-text-icon">open_in_new</i>
-          </a>
+      <kd-resource-card-column ng-if="::$ctrl.showMetrics()">
+        <div ng-if="::$ctrl.hasCpuUsage(pod)">
+          <kd-sparkline timeseries="::pod.metrics.cpuUsageHistory"></kd-sparkline>
+          {{::(pod.metrics.cpuUsage | kdCores)}}
+        </div>
+        <div ng-if="::!$ctrl.hasCpuUsage(pod)">-</div>
+      </kd-resource-card-column>
+      <kd-resource-card-column ng-if="::$ctrl.showMetrics()">
+        <div ng-if="::$ctrl.hasMemoryUsage(pod)">
+          <kd-sparkline timeseries="::pod.metrics.memoryUsageHistory"></kd-sparkline>
+          {{::(pod.metrics.memoryUsage | kdMemory)}}
         </div>
-        <div ng-hide="::$ctrl.getPodLogsHref(pod)">-</div>
+        <div ng-if="::!$ctrl.hasMemoryUsage(pod)">-</div>
       </kd-resource-card-column>
       <kd-resource-card-column class="kd-row-layout-column kd-icon-column">
+        <md-button ng-if="::$ctrl.getPodLogsHref(pod)"
+            ng-href="{{::$ctrl.getPodLogsHref(pod)}}" target="_blank" class="md-icon-button">
+          <md-icon md-font-library="material-icons">subject</md-icon>
+          <md-tooltip>{{::$ctrl.i18n.MSG_POD_LIST_LOGS_LABEL}}</md-tooltip>
+        </md-button>
         <kd-resource-card-menu>
           <kd-resource-card-delete-menu-item resource-kind-name="{{::$ctrl.i18n.MSG_POD_LIST_POD_TITLE}}">
           </kd-resource-card-delete-menu-item>
diff --git a/src/app/frontend/podlist/podcardlist_component.js b/src/app/frontend/podlist/podcardlist_component.js
@@ -49,6 +49,37 @@ export class PodCardListController {
     this.i18n = i18n;
   }
 
+  /**
+   * @return {boolean}
+   * @export
+   */
+  showMetrics() {
+    if (this.podList.pods && this.podList.pods.length > 0) {
+      let firstPod = this.podList.pods[0];
+      return !!firstPod.metrics;
+    }
+    return false;
+  }
+
+  /**
+   * @param {!backendApi.Pod} pod
+   * @return {boolean}
+   * @export
+   */
+  hasMemoryUsage(pod) {
+    return !!pod.metrics && !!pod.metrics.memoryUsageHistory &&
+        pod.metrics.memoryUsageHistory.length > 0;
+  }
+
+  /**
+   * @param {!backendApi.Pod} pod
+   * @return {boolean}
+   * @export
+   */
+  hasCpuUsage(pod) {
+    return !!pod.metrics && !!pod.metrics.cpuUsageHistory && pod.metrics.cpuUsageHistory.length > 0;
+  }
+
   /**
    * @param {!backendApi.Pod} pod
    * @return {string}
@@ -145,6 +176,10 @@ const i18n = {
   /** @export {string} @desc Label 'Cluster IP' which appears as a column label in the table of
      pods (pod list view). */
   MSG_POD_LIST_CLUSTER_IP_LABEL: goog.getMsg('Cluster IP'),
+  /** @export {string} @desc Label which appears as a column label in the table of pods */
+  MSG_POD_LIST_CPU_USAGE_LABEL: goog.getMsg('CPU (cores)'),
+  /** @export {string} @desc Label which appears as a column label in the table of pods */
+  MSG_POD_LIST_MEMORY_USAGE_LABEL: goog.getMsg('Memory (bytes)'),
   /** @export {string} @desc Label 'Logs' for the pod's logs which appears as a column label in the
      table of pods (pod list view). */
   MSG_POD_LIST_LOGS_LABEL: goog.getMsg('Logs'),
diff --git a/src/app/frontend/servicelist/servicecardlist.html b/src/app/frontend/servicelist/servicecardlist.html
@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<kd-resource-card-list selectable="::$ctrl.selectable" with-statuses="::$ctrl.withStatuses">
+<kd-resource-card-list selectable="::$ctrl.selectable" with-statuses="true">
   <kd-resource-card-header-columns>
     <kd-resource-card-header-column>Name</kd-resource-card-header-column>
     <kd-resource-card-header-column>Labels</kd-resource-card-header-column>
diff --git a/src/app/frontend/servicelist/servicecardlist_component.js b/src/app/frontend/servicelist/servicecardlist_component.js
@@ -86,8 +86,6 @@ export const serviceCardListComponent = {
     'services': '<',
     /** {boolean} */
     'selectable': '<',
-    /** {boolean} */
-    'withStatuses': '<',
   },
 };
 
diff --git a/src/app/frontend/servicelist/servicelist.html b/src/app/frontend/servicelist/servicelist.html
@@ -16,6 +16,6 @@
 
 <kd-content-card>
   <kd-content>
-    <kd-service-card-list services="::ctrl.serviceList.services" with-statuses="true"></kd-service-card-list>
+    <kd-service-card-list services="::ctrl.serviceList.services"></kd-service-card-list>
   </kd-content>
 </kd-content-card>
diff --git a/src/test/frontend/podlist/podcardlist_component_test.js b/src/test/frontend/podlist/podcardlist_component_test.js
@@ -105,4 +105,38 @@ describe('Pod card list controller', () => {
   it('should format the "pod start date" tooltip correctly', () => {
     expect(ctrl.getStartedAtTooltip('2016-06-06T09:13:12Z')).toBe('Started at 6/6/16 09:13 UTC');
   });
+
+  it('should show and hide metrics', () => {
+    ctrl.podList = {};
+    expect(ctrl.showMetrics()).toBe(false);
+
+    ctrl.podList.pods = [];
+    expect(ctrl.showMetrics()).toBe(false);
+
+    ctrl.podList.pods = [{}];
+    expect(ctrl.showMetrics()).toBe(false);
+
+    ctrl.podList.pods = [{metrics: {}}];
+    expect(ctrl.showMetrics()).toBe(true);
+  });
+
+  it('should show and hide cpu metrics', () => {
+    expect(ctrl.hasCpuUsage({})).toBe(false);
+
+    expect(ctrl.hasCpuUsage({metrics: {}})).toBe(false);
+
+    expect(ctrl.hasCpuUsage({metrics: {cpuUsageHistory: []}})).toBe(false);
+
+    expect(ctrl.hasCpuUsage({metrics: {cpuUsageHistory: [1]}})).toBe(true);
+  });
+
+  it('should show and hide memory metrics', () => {
+    expect(ctrl.hasMemoryUsage({})).toBe(false);
+
+    expect(ctrl.hasMemoryUsage({metrics: {}})).toBe(false);
+
+    expect(ctrl.hasMemoryUsage({metrics: {memoryUsageHistory: []}})).toBe(false);
+
+    expect(ctrl.hasMemoryUsage({metrics: {memoryUsageHistory: [1]}})).toBe(true);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,6 @@ export default function sparklineDirective() {`
`25`	`25`	`templateUrl: 'common/components/sparkline/sparkline.html',`
`26`	`26`	`templateNamespace: 'svg',`
`27`	`27`	`scope: {},`
`28`		`- bindToController: {'timeseries': '='},`
	`28`	`+ bindToController: {'timeseries': '<'},`
`29`	`29`	`};`
`30`	`30`	`}`