AMBARI-1363. Graphs jump around upon loading. (jaimin)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1443732 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -260,6 +260,8 @@ Trunk (unreleased changes):
 
  BUG FIXES
 
+ AMBARI-1363. Graphs jump around upon loading. (jaimin)
+
  AMBARI-1362. Alerts for the hosts with ZooKeeper Server grows on every poll. (jaimin)
 
  AMBARI-1360. Mouse cursor hover behavior is strange on Job Browser. (jaimin) 

ambari-web/app/styles/application.less

@@ -1210,7 +1210,10 @@ a:focus {
 }
 
 /*End Services*/
-
+table.graphs {
+  table-layout: fixed;
+  width: 100%;
+}
 /*Hosts*/
 #hosts {
   .health-status-HEALTHY{
@@ -2207,7 +2210,7 @@ ul.inline li {
 
 .screensaver{
   width: 90%;
-  height: 160px;
+  height: 157px;
   border: 1px solid silver;
   margin: 20px 15px 10px 15px;
   background: url(/img/spinner.gif) no-repeat center center;

ambari-web/app/templates/main/dashboard.hbs

@@ -44,22 +44,24 @@
         </div>
 			</div>
 			<div class="graphs-container">
-				<div class="row">
-					<div class="span6">
-						<div class="row">
-							<div class="span3">{{view App.ChartClusterMetricsNetwork}}</div>
-							<div class="span3">{{view App.ChartClusterMetricsLoad}}</div>
-						</div>
-					</div>
-				</div>
-				<div class="row">
-					<div class="span6">
-						<div class="row">
-							<div class="span3">{{view App.ChartClusterMetricsMemory}}</div>
-							<div class="span3">{{view App.ChartClusterMetricsCPU}}</div>
-						</div>
-					</div>
-				</div>
+        <table class="graphs">
+          <tr>
+            <td>
+              {{view App.ChartClusterMetricsNetwork}}
+            </td>
+            <td>
+              {{view App.ChartClusterMetricsLoad}}
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {{view App.ChartClusterMetricsMemory}}
+            </td>
+            <td>
+              {{view App.ChartClusterMetricsCPU}}
+            </td>
+          </tr>
+        </table>
 			</div>
 		</div>
 	</div>

ambari-web/app/templates/main/host/metrics.hbs

@@ -17,22 +17,30 @@
 }}
 
 <div class="host-metrics">
-	<div class="span6">
-	  {{view App.ChartHostMetricsCPU contentBinding="view.content"}}
-	</div> 
-	<div class="span6">
-	  {{view App.ChartHostMetricsDisk contentBinding="view.content"}}
-	</div> 
-	<div class="span6">
-	  {{view App.ChartHostMetricsLoad contentBinding="view.content"}}
-	</div> 
-	<div class="span6">
-	  {{view App.ChartHostMetricsMemory contentBinding="view.content"}}
-	</div> 
-	<div class="span6">
-	  {{view App.ChartHostMetricsNetwork contentBinding="view.content"}}
-	</div> 
-	<div class="span6">
-	  {{view App.ChartHostMetricsProcesses contentBinding="view.content"}}
-	</div> 
+    <table class="graphs">
+        <tr>
+            <td>
+              {{view App.ChartHostMetricsCPU contentBinding="view.content"}}
+            </td>
+            <td>
+              {{view App.ChartHostMetricsDisk contentBinding="view.content"}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+              {{view App.ChartHostMetricsLoad contentBinding="view.content"}}
+            </td>
+            <td>
+              {{view App.ChartHostMetricsMemory contentBinding="view.content"}}
+            </td>
+        </tr>
+        <tr>
+            <td>
+              {{view App.ChartHostMetricsNetwork contentBinding="view.content"}}
+            </td>
+            <td>
+              {{view App.ChartHostMetricsProcesses contentBinding="view.content"}}
+            </td>
+        </tr>
+    </table>
 </div>

ambari-web/app/templates/main/host/summary.hbs

@@ -120,7 +120,7 @@
           <a class="btn" rel="tooltip" title="Go to Ganglia" {{action "showGangliaCharts" target="view"}}><i class="icon-link"></i></a>
         </div>
       </div>
-      <div class="row-fluid">
+      <div>
 	     {{view App.MainHostMetricsView contentBinding="view.content"}}
 	    </div>
 	  </div>

ambari-web/app/templates/main/service/info/summary.hbs

@@ -152,12 +152,20 @@
         </div>
       </div>
       
-      <div class="summary-metric-graphs row-fluid">
-        {{#each graph in view.serviceMetricGraphs}}
-          <div class="span3">
-            {{view graph}}
-          </div> 
-        {{/each}}
+      <div class="">
+        <table class="graphs">
+          {{#each graphs in view.serviceMetricGraphs}}
+            <tr>
+              {{#each graph in graphs}}
+                <td>
+                  <div class="">
+                    {{view graph}}
+                  </div>
+                </td>
+              {{/each}}
+            </tr>
+          {{/each}}
+        </table>
       </div>
       
     </div>

ambari-web/app/views/main/service/info/summary.js

@@ -266,32 +266,32 @@ App.MainServiceInfoSummaryView = Em.View.extend({
     if (svcName) {
       switch (svcName.toLowerCase()) {
         case 'hdfs':
-          graphs = [ App.ChartServiceMetricsHDFS_SpaceUtilization.extend(),
+          graphs = [ [App.ChartServiceMetricsHDFS_SpaceUtilization.extend(),
             App.ChartServiceMetricsHDFS_FileOperations.extend(),
             App.ChartServiceMetricsHDFS_BlockStatus.extend(),
-            App.ChartServiceMetricsHDFS_IO.extend(),
-            App.ChartServiceMetricsHDFS_RPC.extend(),
+            App.ChartServiceMetricsHDFS_IO.extend()],
+            [App.ChartServiceMetricsHDFS_RPC.extend(),
             App.ChartServiceMetricsHDFS_GC.extend(),
             App.ChartServiceMetricsHDFS_JVMHeap.extend(),
-            App.ChartServiceMetricsHDFS_JVMThreads.extend()];
+            App.ChartServiceMetricsHDFS_JVMThreads.extend()]];
           break;
         case 'mapreduce':
-          graphs = [ App.ChartServiceMetricsMapReduce_JobsStatus.extend(),
+          graphs = [ [App.ChartServiceMetricsMapReduce_JobsStatus.extend(),
             App.ChartServiceMetricsMapReduce_TasksRunningWaiting.extend(),
             App.ChartServiceMetricsMapReduce_MapSlots.extend(),
-            App.ChartServiceMetricsMapReduce_ReduceSlots.extend(),
-            App.ChartServiceMetricsMapReduce_GC.extend(),
+            App.ChartServiceMetricsMapReduce_ReduceSlots.extend()],
+            [App.ChartServiceMetricsMapReduce_GC.extend(),
             App.ChartServiceMetricsMapReduce_RPC.extend(),
             App.ChartServiceMetricsMapReduce_JVMHeap.extend(),
-            App.ChartServiceMetricsMapReduce_JVMThreads.extend()];
+            App.ChartServiceMetricsMapReduce_JVMThreads.extend()]];
           break;
         case 'hbase':
-          graphs = [  App.ChartServiceMetricsHBASE_ClusterRequests.extend(),
+          graphs = [  [App.ChartServiceMetricsHBASE_ClusterRequests.extend(),
             App.ChartServiceMetricsHBASE_RegionServerReadWriteRequests.extend(),
             App.ChartServiceMetricsHBASE_RegionServerRegions.extend(),
-            App.ChartServiceMetricsHBASE_RegionServerQueueSize.extend(),
-            App.ChartServiceMetricsHBASE_HlogSplitTime.extend(),
-            App.ChartServiceMetricsHBASE_HlogSplitSize.extend()];
+            App.ChartServiceMetricsHBASE_RegionServerQueueSize.extend()],
+            [App.ChartServiceMetricsHBASE_HlogSplitTime.extend(),
+            App.ChartServiceMetricsHBASE_HlogSplitSize.extend()]];
           break;
         default:
           break;