AMBARI-2801. YARN queue summary should be shown in a tooltip. (srimanth)

ambari-web/app/styles/application.less

@@ -268,6 +268,11 @@ h1 {
   border-left-color: #dedede;
 }
 
+.text-tooltip {
+  border-bottom: 1px silver dotted;
+  cursor: pointer;
+}
+
 .wizard {
   h2 {
     margin-top: 0;
@@ -1539,6 +1544,12 @@ width:100%;
   .summary-view-host{
     float: right;
     padding-right: 20px;
+    a {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 }
 

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

@@ -104,7 +104,7 @@
       <!-- Queues -->
       <tr>
           <td>{{t dashboard.services.yarn.queues}}</td>
-          <td><a href="#" {{action showQueues target="view"}}>{{view.queues}}</a></td>
+          <td><span rel="queue-tooltip" class="text-tooltip" {{bindAttr data-original-title="view.service.queueFormatted" }}>{{view.queues}}</span></td>
       </tr>
     {{#unless view.showOnlyRows}}
       </tbody>

ambari-web/app/views/main/dashboard/service/yarn.js

@@ -116,17 +116,9 @@ App.MainDashboardServiceYARNView = App.MainDashboardServiceView.extend({
   queues: function() {
     return Em.I18n.t('dashboard.services.yarn.queues.msg').format(this.get('service.queuesCount'));
   }.property('service.queuesCount'),
-
-  showQueues: function() {
-    var self = this;
-    return App.ModalPopup.show({
-      secondary: null,
-      header: Em.I18n.t('dashboard.services.yarn.queues'),
-      bodyClass: Em.View.extend({
-        template: Em.Handlebars.compile('{{{view.queues}}}'),
-        queues: self.get('service.queueFormatted')
-      })
-    });
+  
+  didInsertElement: function(){
+    $("[rel='queue-tooltip']").tooltip({html: true, placement: "right"});
   }
 
 });