AMBARI-1536. Hosts page layout fixes. (Xi Wang via yusaku)

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

CHANGES.txt

@@ -75,6 +75,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1536. Hosts page layout fixes. (Xi Wang via yusaku)
+
  AMBARI-1502. Add the ability to assign configuration to a cluster. (Nate Cole via tbeerbower)
 
  AMBARI-1505. Hosts page: add filtering by host status. (yusaku)

ambari-web/app/styles/application.less

@@ -1452,31 +1452,32 @@ table.graphs {
       }
     }
   }
+  .status-dot-position {
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 20px;
+    width: 13px;
+  }
 
   .health-status-HEALTHY{
     background-image: @status-live-marker;
-    background-repeat:no-repeat;
-    background-position:center;
+    .status-dot-position;
   }
   .health-status-LIVE {
     background-image: @status-live-marker;
-    background-repeat:no-repeat;
-    background-position:center;
+    .status-dot-position;
   }
   .health-status-DEAD-RED {
     background-image: @status-dead-red-marker;
-    background-repeat:no-repeat;
-    background-position:center;
+    .status-dot-position;
   }
   .health-status-DEAD-ORANGE {
     background-image: @status-dead-orange-marker;
-    background-repeat:no-repeat;
-    background-position:center;
+    .status-dot-position;
   }
   .health-status-DEAD-YELLOW {
     background-image: @status-dead-yellow-marker;
-    background-repeat:no-repeat;
-    background-position:center;
+    .status-dot-position;
   }
   .host-name-search {
     position: relative;
@@ -1499,14 +1500,14 @@ table.graphs {
       float: right;
     }
     .health-status-bar {
-      font-size: 13px;
-      position: relative;
-      top: 20px;
-      left: 10px;
-      .active a{
+      font-size: 14px;
+      margin-left: 0;
+      width: 650px;
+      .active a {
         text-decoration: none;
         color: #000000;
       }
+
     }
   }
   .progress {
@@ -1531,9 +1532,9 @@ table.graphs {
     }
     td.first span {
       display: block;
-      float: left;
+      float: right;
       height: 13px;
-      margin: 4px 5px 0 0;
+      margin: 5px 0 0 0;
       width: 13px;
     }
     ul.filter-components {

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

@@ -18,9 +18,8 @@
 
 <div id="hosts">
 
-  <div class="box-header">
-
-    <div class="health-status-bar" >
+  <div class="box-header row">
+    <div class="health-status-bar span8" >
       {{#each category in view.categories}}
         <span {{bindAttr class="category.itemClass"}}>
           <span {{bindAttr class="category.healthStatusValue"}}> &nbsp;&nbsp;&nbsp; </span>
@@ -35,17 +34,15 @@
     </div>
 
     {{#if App.isAdmin}}
-    <div class="button-section pull-right ">
+    <div class="button-section pull-right span4">
       <button class="btn btn-inverse add-host-button" {{action addHost}}>
         <i class="icon-plus icon-white"></i>
         {{t hosts.host.add}}
       </button>
     </div>
     {{/if}}
-
   </div>
 
-
   <table class="datatable table table-bordered table-striped" id="hosts-table">
     <thead>
     <tr>
@@ -75,9 +72,16 @@
     {{#if view.pageContent}}
     {{#each host in view.pageContent}}
     {{#view view.HostView contentBinding="host"}}
+
       <td class="first">
-        <span {{bindAttr class="host.healthClass"}} {{bindAttr title="host.healthToolTip" }}></span>
+        <script type="text/javascript">
+          $(function () {
+            $("[rel='HealthTooltip']").tooltip();
+          });
+        </script>
+        <span rel="HealthTooltip" {{bindAttr class="host.healthClass"}} {{bindAttr title="host.healthToolTip" }}></span>
       </td>
+
       <td class="name">
         <a title="{{unbound host.publicHostName}}" href="#" {{action "showDetails" host}}>{{unbound host.publicHostNameFormatted}}</a>
         {{#if host.criticalAlertsCount}}
@@ -87,11 +91,18 @@
       <td>{{host.ip}}</td>
       <td>{{host.cpu}}</td>
       <td>{{host.memoryFormatted}}</td>
+
       <td>
-        <div class="progress progress-info" title="{{unbound host.diskInfoBar}}">
+        <script type="text/javascript">
+          $(function () {
+            $("[rel='UsageTooltip']").tooltip();
+          });
+        </script>
+        <div class="progress progress-info" title="{{unbound host.diskInfoBar}}" rel="UsageTooltip">
           <div class="bar" {{bindAttr style="view.usageStyle"}}></div>
         </div>
       </td>
+
       <td>{{host.loadAvg}}</td>
       <td>
         <span title="{{unbound view.labels}}">{{view.shortLabels}}</span>
@@ -120,3 +131,4 @@
     </div>
   </div>
 </div>
+