AMBARI-1235. Host health indicator should have a tooltip showing details. (yusaku)

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

CHANGES.txt

@@ -16,6 +16,9 @@ Trunk (unreleased changes):
  various hadoop artifacts back to Ambari. (Nate Cole via mahadev)
 
  IMPROVEMENTS
+
+ AMBARI-1235. Host health indicator should have a tooltip showing details.
+ (yusaku)
  
  AMBARI-1234. On Heatmap host hover, including list of components running.
  (yusaku)

ambari-web/app/messages.js

@@ -283,6 +283,9 @@ Em.I18n.translations = {
   'hosts.host.stop.popup.header':'Confirmation',
   'hosts.host.start.popup.body':'Are you sure?',
   'hosts.host.stop.popup.body':'Are you sure?',
+  'hosts.host.healthStatus.heartBeatNotReceived':'The server has not received a heartbeat from this host for more than 3 minutes.',
+  'hosts.host.healthStatus.mastersDown':"The following master components are down:\n",
+  'hosts.host.healthStatus.slavesDown':"The following slave components are down:\n",
   'hosts.decommission.popup.body':'Are you sure?',
   'hosts.decommission.popup.header':'Confirmation',
   'hosts.delete.popup.body':'Are you sure?',

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

@@ -59,7 +59,7 @@
     {{#view view.HostView contentBinding="host"}}
     <tr>
       <td class="first">
-        <span {{bindAttr class="host.healthClass"}}></span>
+        <span {{bindAttr class="host.healthClass"}} {{bindAttr title="view.healthToolTip" }}></span>
       </td>
       <td class="name">
         <a title="{{unbound host.publicHostName}}" href="#" {{action "showDetails" host}}>{{unbound host.publicHostNameFormatted}}</a>

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

@@ -17,7 +17,7 @@
 }}
 
 <div id="host-details">
-  <span {{bindAttr class="view.content.healthClass"}}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
+  <span {{bindAttr class="view.content.healthClass"}} {{bindAttr title="view.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
   <div><a href="javascript:void(null)" data-toggle="modal" {{action backToHostsList}}><i class="icon-arrow-left"></i>&nbsp;Back to Hosts</a></div>
 <!--   {{#if App.isAdmin}} -->
 <!--   <div class="host-maintenance"> -->

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

@@ -19,6 +19,7 @@
 var App = require('app');
 require('utils/data_table');
 var filters = require('views/common/filter_view');
+var date = require('utils/date');
 
 App.MainHostView = Em.View.extend({
   templateName:require('templates/main/host'),
@@ -69,6 +70,35 @@ App.MainHostView = Em.View.extend({
   HostView:Em.View.extend({
     content:null,
 
+    healthToolTip: function(){
+      var hostComponents = this.get('content.hostComponents').filter(function(item){
+        if(item.get('workStatus') !== App.HostComponentStatus.started){
+          return true;
+        }
+      });
+      var output = '';
+      switch (this.get('content.healthClass')){
+        case 'health-status-DEAD':
+          hostComponents = hostComponents.filterProperty('isMaster', true);
+          output = Em.I18n.t('hosts.host.healthStatus.mastersDown');
+          hostComponents.forEach(function(hc, index){
+            output += (index == (hostComponents.length-1)) ? hc.get('displayName') : (hc.get('displayName')+", ");
+          }, this);
+          break;
+        case 'health-status-DEAD-YELLOW':
+          output = Em.I18n.t('hosts.host.healthStatus.heartBeatNotReceived');
+          break;
+        case 'health-status-DEAD-ORANGE':
+          hostComponents = hostComponents.filterProperty('isSlave', true);
+          output = Em.I18n.t('hosts.host.healthStatus.slavesDown');
+          hostComponents.forEach(function(hc, index){
+            output += (index == (hostComponents.length-1)) ? hc.get('displayName') : (hc.get('displayName')+", ");
+          }, this);
+          break;
+      }
+      return output;
+    }.property('content.healthClass'),
+
     shortLabels: function() {
       var labels = this.get('content.hostComponents').getEach('displayName');
       var shortLabels = '';

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

@@ -17,6 +17,7 @@
  */
 
 var App = require('app');
+var date = require('utils/date');
 
 App.MainHostDetailsView = Em.View.extend({
   templateName: require('templates/main/host/details'),
@@ -28,5 +29,34 @@ App.MainHostDetailsView = Em.View.extend({
   maintenance: function(){
     var options = [{action: 'deleteHost', 'label': 'Delete Host'}];
     return options;
-  }.property('controller.content')
+  }.property('controller.content'),
+
+  healthToolTip: function(){
+    var hostComponents = this.get('content.hostComponents').filter(function(item){
+      if(item.get('workStatus') !== App.HostComponentStatus.started){
+        return true;
+      }
+    });
+    var output = '';
+    switch (this.get('content.healthClass')){
+      case 'health-status-DEAD':
+        hostComponents = hostComponents.filterProperty('isMaster', true);
+        output = Em.I18n.t('hosts.host.healthStatus.mastersDown');
+        hostComponents.forEach(function(hc, index){
+          output += (index == (hostComponents.length-1)) ? hc.get('displayName') : (hc.get('displayName')+", ");
+        }, this);
+        break;
+      case 'health-status-DEAD-YELLOW':
+        output = Em.I18n.t('hosts.host.healthStatus.heartBeatNotReceived');
+        break;
+      case 'health-status-DEAD-ORANGE':
+        hostComponents = hostComponents.filterProperty('isSlave', true);
+        output = Em.I18n.t('hosts.host.healthStatus.slavesDown');
+        hostComponents.forEach(function(hc, index){
+          output += (index == (hostComponents.length-1)) ? hc.get('displayName') : (hc.get('displayName')+", ");
+        }, this);
+        break;
+    }
+    return output;
+  }.property('content.healthClass')
 });