AMBARI-2733. Hosts and Host Details page UI tweaks. (Oleg Nechiporenko via yusaku)

ambari-web/app/models/host.js

@@ -47,7 +47,7 @@ App.Host = DS.Model.extend({
   }.property('App.router.clusterController.alerts.length'),
 
   publicHostNameFormatted: function() {
-    return this.get('publicHostName').length < 23 ? this.get('publicHostName') : this.get('publicHostName').substr(0, 20) + '...';
+    return this.get('publicHostName').length < 43 ? this.get('publicHostName') : this.get('publicHostName').substr(0, 40) + '...';
   }.property('publicHostName'),
   /**
    * API return diskTotal and diskFree. Need to save their different

ambari-web/app/styles/application.less

@@ -2611,6 +2611,20 @@ table.graphs {
       }
     }
   }
+  .host-components-expander {
+    .caret {
+      vertical-align: middle;
+      margin-right: 5px;
+      &.right {
+        border-left: 4px solid #000000;
+        border-top: 4px solid transparent;
+        border-bottom: 4px solid transparent;
+      }
+    }
+  }
+  .host-components {
+    display: none;
+  }
 }
 
 #host-warnings {

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

@@ -103,7 +103,10 @@
 
       <td>{{host.loadAvg}}</td>
       <td>
-        <span title="{{unbound view.labels}}">{{view.shortLabels}}</span>
+        <a href="#" class="host-components-expander" {{action toggleComponents target="view"}}> <span class="caret right"></span>{{view.componentsMessage}}</a>
+        <div id="host-{{unbound host.hostName}}" class="host-components">
+          {{{view.labels}}}
+        </div>
       </td>
     {{/view}}
     {{/each}}

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

@@ -18,30 +18,11 @@
 
 <div class="row-fluid">
   <div class="span12">
-  <div class="span6">
-  <div class="host-configuration">
-    <div class="box">
-		  <div class="box-header">
-		    <h4>{{t hosts.host.summary.header}}</h4>
-		  </div>
-		  <div class="host-summary-content">
-		    <dl class="dl-horizontal">
-          <dt>{{t hosts.host.summary.hostname}}:</dt><dd>&nbsp;{{view.content.publicHostName}}</dd>
-		      <dt>{{t common.ipAddress}}:</dt><dd>&nbsp;{{view.content.ip}}</dd>
-          <dt>{{t common.os}}:</dt><dd>&nbsp;{{view.content.osType}}&nbsp;({{view.content.osArch}})</dd>
-		      <dt>{{t common.cpu}}:</dt><dd>&nbsp;{{view.content.cpu}}</dd>
-          <dt>{{t common.disk}}:</dt><dd>&nbsp;{{view.content.diskInfoBar}}</dd>
-          <dt>{{t common.memory}}:</dt><dd>&nbsp;{{view.content.memoryFormatted}}</dd>
-		      <dt>{{t common.loadAvg}}:</dt><dd>&nbsp;{{view.content.loadAvg}}</dd>
-		      <dt>{{t hosts.host.summary.agentHeartbeat}}:</dt><dd>{{view.timeSinceHeartBeat}}</dd>
-		    </dl>
-		  </div>
-	  </div>
-  </div>
-    {{!components}}
+    <div class="span6">
+      {{!components}}
       <div class="box">
         <div class="box-header">
-          <h4>Components</h4>
+          <h4>{{t common.components}}</h4>
         </div>
         {{#if view.sortedComponents.length}}
         <div class="host-components">
@@ -166,20 +147,39 @@
         </div>
         {{/if}}
       </div>
+      <div class="host-configuration">
+            <div class="box">
+                <div class="box-header">
+                    <h4>{{t hosts.host.summary.header}}</h4>
+                </div>
+                <div class="host-summary-content">
+                    <dl class="dl-horizontal">
+                        <dt>{{t hosts.host.summary.hostname}}:</dt><dd>&nbsp;{{view.content.publicHostName}}</dd>
+                        <dt>{{t common.ipAddress}}:</dt><dd>&nbsp;{{view.content.ip}}</dd>
+                        <dt>{{t common.os}}:</dt><dd>&nbsp;{{view.content.osType}}&nbsp;({{view.content.osArch}})</dd>
+                        <dt>{{t common.cpu}}:</dt><dd>&nbsp;{{view.content.cpu}}</dd>
+                        <dt>{{t common.disk}}:</dt><dd>&nbsp;{{view.content.diskInfoBar}}</dd>
+                        <dt>{{t common.memory}}:</dt><dd>&nbsp;{{view.content.memoryFormatted}}</dd>
+                        <dt>{{t common.loadAvg}}:</dt><dd>&nbsp;{{view.content.loadAvg}}</dd>
+                        <dt>{{t hosts.host.summary.agentHeartbeat}}:</dt><dd>{{view.timeSinceHeartBeat}}</dd>
+                    </dl>
+                </div>
+            </div>
+        </div>
     </div>
   {{!metrics}}
- <div class="span6">
-    <div class="box">
-      <div class="box-header">
-        <h4>{{t hosts.host.summary.hostMetrics}}</h4>
-        <div class="btn-group">
-          <a class="btn" rel="tooltip" title="Go to Ganglia" {{action "showGangliaCharts" target="view"}}><i class="icon-link"></i></a>
+   <div class="span6">
+      <div class="box">
+        <div class="box-header">
+          <h4>{{t hosts.host.summary.hostMetrics}}</h4>
+          <div class="btn-group">
+            <a class="btn" rel="tooltip" title="Go to Ganglia" {{action "showGangliaCharts" target="view"}}><i class="icon-link"></i></a>
+          </div>
+        </div>
+        <div>
+         {{view App.MainHostMetricsView contentBinding="view.content"}}
         </div>
       </div>
-      <div>
-	     {{view App.MainHostMetricsView contentBinding="view.content"}}
-	    </div>
-	  </div>
+    </div>
   </div>
-</div>
 </div>

ambari-web/app/views/common/sort_view.js

@@ -53,8 +53,8 @@ var wrapperView = Em.View.extend({
           childViews.findProperty('name', st.name).set('status', st.status);
         }
       });
-      this.get('parentView').showProperPage();
     }
+    this.get('parentView').showProperPage();
   }.observes('parentView.filteringComplete'),
 
   /**

ambari-web/app/views/main/host.js

@@ -67,32 +67,28 @@ App.MainHostView = App.TableView.extend({
     didInsertElement: function(){
       this.$("[rel='HealthTooltip'], [rel='UsageTooltip']").tooltip();
     },
-    shortLabels: function() {
-      var labels = this.get('content.hostComponents').getEach('displayName');
-      var shortLabels = '';
-      var c = 0;
-      labels.forEach(function(label) {
-        if (label) {
-          if (c < 2) {
-            shortLabels += label.replace(/[^A-Z]/g, '') + ', ';
-            c++;
-          }
-        }
-      });
-      shortLabels = shortLabels.substr(0, shortLabels.length - 2);
-      if (labels.length > 2) {
-        shortLabels += ' ' + Em.I18n.t('and') + ' ' + (labels.length - 2) + ' ' + Em.I18n.t('more');
+
+    toggleComponents: function(event) {
+      this.$(event.target).find('.caret').toggleClass('right');
+      this.$('.host-components').toggle();
+    },
+
+    componentsMessage: function() {
+      var count = this.get('content.hostComponents.length');
+      if (count == 1) {
+        return count + ' ' + Em.I18n.t('common.component');
+      }
+      else {
+        return count + ' ' + Em.I18n.t('common.components');
       }
-      return shortLabels;
-    }.property('labels'),
+    }.property('content.hostComponents.@each'),
 
-    labels: function(){
-      return this.get('content.hostComponents').getEach('displayName').join('\n');
+    labels: function() {
+      return this.get('content.hostComponents').getEach('displayName').join("<br />");
     }.property('content.hostComponents.@each'),
 
     usageStyle:function () {
       return "width:" + this.get('content.diskUsage') + "%";
-      //return "width:" + (25+Math.random()*50) + "%"; // Just for tests purposes
     }.property('content.diskUsage')
 
   }),
@@ -209,6 +205,7 @@ App.MainHostView = App.TableView.extend({
    */
   nameFilterView: filters.createTextView({
     column: 1,
+    fieldType: 'input-xlarge',
     onChangeValue: function(){
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
     }
@@ -220,6 +217,7 @@ App.MainHostView = App.TableView.extend({
    */
   ipFilterView: filters.createTextView({
     column: 2,
+    fieldType: 'input-small',
     onChangeValue: function(){
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
     }