Fix graph sizes and change display policy to show all or none (#1251)

src/app/frontend/common/components/graph/graphcard.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<kd-content-card ng-if="$ctrl.shouldShowGraph()" class="kd-graph-card">
+<kd-content-card ng-if="$ctrl.shouldShowGraph()">
   <kd-title>{{$ctrl.graphTitle}}</kd-title>
   <kd-content>
     <kd-graph metrics="::$ctrl.selectedMetrics"></kd-graph>

src/app/frontend/common/components/graph/graphcard.scss

@@ -14,16 +14,6 @@
 
 @import '../../../variables';
 
-.kd-left-graph {
-  .kd-graph-card {
-    margin-bottom: 0;
-    margin-right: 1.25 * $baseline-grid;
-  }
-}
-
-.kd-right-graph {
-  .kd-graph-card {
-    margin-bottom: 0;
-    margin-left: 1.25 * $baseline-grid;
-  }
+kd-graph-card {
+  flex: 1;
 }

src/app/frontend/common/components/graph/graphcard_component.js

@@ -49,14 +49,15 @@ export class GraphCardController {
   }
 
   /**
-   * Hide graph if at least 1 given metric do not have 2 or more data points.
+   * Hide graphs until all given metrics do not have 2 or more data points.
    *
    * @export
    * @return {boolean}
    */
   shouldShowGraph() {
-    return this.metrics !== null &&
-        this.selectedMetrics.filter((metric) => metric.dataPoints.length > 1).length > 0;
+    return this.metrics !== null && this.metrics.length > 0 &&
+        this.metrics.filter((metric) => metric.dataPoints.length > 1).length ===
+        this.metrics.length;
   }
 }
 

src/app/frontend/daemonsetdetail/daemonsetdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_DAEMON_SET_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.daemonSetDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.daemonSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_DAEMON_SET_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.daemonSetDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.daemonSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/daemonsetlist/daemonsetlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="ctrl.i18n.MSG_DAEMON_SET_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="ctrl.daemonSetList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::ctrl.i18n.MSG_DAEMON_SET_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::ctrl.daemonSetList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="ctrl.i18n.MSG_DAEMON_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="ctrl.daemonSetList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::ctrl.i18n.MSG_DAEMON_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::ctrl.daemonSetList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/deploymentdetail/deploymentdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.deploymentDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.deploymentDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.deploymentDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.deploymentDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 
@@ -29,12 +31,16 @@ limitations under the License.
   <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_TITLE}}</kd-title>
   <kd-content>
     <kd-replica-set-card-list ng-show="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name"
-            replica-set-list="::ctrl.newReplicaSetList">
+                              replica-set-list="::ctrl.newReplicaSetList">
     </kd-replica-set-card-list>
     <div class="kd-zerostate-message" layout-padding
          ng-hide="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name">
-      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE}}</div>
-      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT}}</div>
+      <div class="kd-zerostate-title">
+        {{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE}}
+      </div>
+      <div class="kd-zerostate-text">
+        {{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT}}
+      </div>
     </div>
   </kd-content>
 </kd-content-card>
@@ -49,10 +55,15 @@ limitations under the License.
     </kd-replica-set-card-list>
     <div class="kd-zerostate-message" layout-padding
          ng-hide="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length">
-      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE}}</div>
-      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT}}</div>
+      <div class="kd-zerostate-title">
+        {{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE}}
+      </div>
+      <div class="kd-zerostate-text">
+        {{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT}}
+      </div>
     </div>
   </kd-content>
 </kd-content-card>
 
-<kd-event-card-list event-list="::ctrl.deploymentDetail.eventList" event-list-resource="::ctrl.eventListResource"></kd-event-card-list>
+<kd-event-card-list event-list="::ctrl.deploymentDetail.eventList"
+                    event-list-resource="::ctrl.eventListResource"></kd-event-card-list>

src/app/frontend/deploymentdetail/deploymentdetail_controller.js

@@ -5,6 +5,8 @@
 export class DeploymentDetailController {
   /**
    * @param {!backendApi.DeploymentDetail} deploymentDetail
+   * @param {!angular.Resource} kdDeploymentEventsResource
+   * @param {!angular.Resource} kdDeploymentOldReplicaSetsResource
    * @ngInject
    */
   constructor(deploymentDetail, kdDeploymentEventsResource, kdDeploymentOldReplicaSetsResource) {

src/app/frontend/deploymentlist/deploymentlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_DEPLOYMENT_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.deploymentList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_DEPLOYMENT_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.deploymentList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_DEPLOYMENT_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.deploymentList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_DEPLOYMENT_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.deploymentList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/jobdetail/jobdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_JOB_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.jobDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.jobDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_JOB_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.jobDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.jobDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/joblist/joblist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_JOB_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.jobList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_JOB_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.jobList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_JOB_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.jobList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_JOB_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.jobList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/petsetdetail/petsetdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_PET_SET_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.petSetDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.petSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_PET_SET_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.petSetDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.petSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/petsetlist/petsetlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_PET_SET_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.petSetList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_PET_SET_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.petSetList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_PET_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.petSetList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_PET_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.petSetList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/poddetail/poddetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_POD_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.podDetail.metrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.podDetail.metrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_POD_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.podDetail.metrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.podDetail.metrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/podlist/podlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_POD_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_POD_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_POD_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_POD_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::ctrl.i18n.MSG_REPLICA_SET_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.replicaSetDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::ctrl.replicaSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::ctrl.i18n.MSG_REPLICA_SET_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::ctrl.replicaSetDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::ctrl.replicaSetDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/replicasetlist/replicasetlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_REPLICA_SET_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.replicaSetList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICA_SET_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.replicaSetList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_REPLICA_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.replicaSetList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICA_SET_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.replicaSetList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICATION_CONTROLLER_DETAIL_CPU_GRAPH_CARD_TITLE"
-                 metrics="::$ctrl.replicationControllerDetail.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::$ctrl.replicationControllerDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICATION_CONTROLLER_DETAIL_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::$ctrl.replicationControllerDetail.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::$ctrl.replicationControllerDetail.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/replicationcontrollerlist/replicationcontrollerlist.html

@@ -15,11 +15,13 @@ limitations under the License.
 -->
 
 <div layout="row">
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_REPLICATION_CONTROLLER_LIST_CPU_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.replicationControllerList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICATION_CONTROLLER_LIST_CPU_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.replicationControllerList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
-  <kd-graph-card graph-title="$ctrl.i18n.MSG_REPLICATION_CONTROLLER_LIST_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="$ctrl.replicationControllerList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+  <kd-graph-card graph-title="::$ctrl.i18n.MSG_REPLICATION_CONTROLLER_LIST_MEMORY_GRAPH_CARD_TITLE"
+                 metrics="::$ctrl.replicationControllerList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/app/frontend/workloads/workloads.html

@@ -16,10 +16,12 @@ limitations under the License.
 
 <div layout="row">
   <kd-graph-card graph-title="::$ctrl.i18n.MSG_WORKLOADS_CPU_GRAPH_CARD_TITLE"
-                 metrics="::$ctrl.workloads.podList.cumulativeMetrics" selected-metric-names="'cpu/usage_rate'" flex="auto" class="kd-left-graph">
+                 metrics="::$ctrl.workloads.podList.cumulativeMetrics"
+                 selected-metric-names="'cpu/usage_rate'">
   </kd-graph-card>
   <kd-graph-card graph-title="::$ctrl.i18n.MSG_WORKLOADS_MEMORY_GRAPH_CARD_TITLE"
-                 metrics="::$ctrl.workloads.podList.cumulativeMetrics" selected-metric-names="'memory/usage'" flex="auto" class="kd-right-graph">
+                 metrics="::$ctrl.workloads.podList.cumulativeMetrics"
+                 selected-metric-names="'memory/usage'">
   </kd-graph-card>
 </div>
 

src/test/frontend/common/components/graph/graphcard_component_test.js

@@ -44,6 +44,7 @@ let metricsWithTooFewDataPoints = [
   {
     'dataPoints': [
       {'x': 1472219880, 'y': 50},
+      {'x': 1472219940, 'y': 40},
     ],
     'metricName': 'cpu/usage_rate',
     'aggregation': 'sum',
@@ -87,6 +88,7 @@ describe('Graph card component controller', () => {
 
     expect(expected).toBeFalsy();
   });
+
   it('should hide graph card when metrics were not provided', () => {
     ctrl.metrics = null;
     ctrl.$onInit();
@@ -115,14 +117,4 @@ describe('Graph card component controller', () => {
 
     expect(expected).toEqual(2);
   });
-
-  it('should hide graph card when no metric names matched', () => {
-    ctrl.metrics = stdMetrics;
-    ctrl.selectedMetricNames = 'badname1,badname2';
-    ctrl.$onInit();
-
-    let expected = ctrl.shouldShowGraph();
-
-    expect(expected).toBeFalsy();
-  });
 });