AMBARI-11897. Widgets: cannot see metric names. (jaimin)

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -588,6 +588,7 @@
     .chosen-drop {
       margin-top: 2px;
       overflow: auto;
+      min-width: 300px;
       width: 300px;
       border: 1px solid rgba(0, 0, 0, 0.2);
       -webkit-border-radius: 0px;

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

@@ -41,5 +41,24 @@ App.JqueryChosenView = Em.View.extend({
       placeholder_text: self.get('selectionObj.placeholder_text'),
       no_results_text: self.get('selectionObj.no_results_text')
     }).change(self.get('selectionObj.onChangeCallback'));
+
+    // Expand the dropdown to accommodate the largest option on mouseenter event
+    // and reset it to the original fixed width on the mouseleave event
+    Em.run.later(this, function() {
+      var chosenDropDownId = elementId + '_chosen' + ' .chosen-drop';
+      var chosenDropDownEl;
+      $(chosenDropDownId)
+        .each(function() {
+          chosenDropDownEl = $(this);
+          chosenDropDownEl.data("origWidth", chosenDropDownEl.outerWidth());
+        })
+        .mouseenter(function(){
+          $(this).css("width", "auto");
+        })
+        .mouseleave(function(){
+          chosenDropDownEl = $(this);
+          chosenDropDownEl.css("width", chosenDropDownEl.data("origWidth"));
+        });
+    }, 1000);
   }
 });