AMBARI-10744. Create Widget Wizard - Add Metric popup UI changes.(XIWANG)

ambari-web/app/messages.js

@@ -2523,6 +2523,8 @@ Em.I18n.translations = {
   'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
   'dashboard.widgets.wizard.step2.newMetric': '+ New Metric',
   'dashboard.widgets.wizard.step2.newOperator': '+ New Operator',
+  'dashboard.widgets.wizard.step2.Component': 'Component',
+  'dashboard.widgets.wizard.step2.Metric': 'Metric',
   'dashboard.widgets.wizard.step2.selectComponent': 'Select a Component',
   'dashboard.widgets.wizard.step2.selectMetric': 'Select a Metric',
   'dashboard.widgets.wizard.step2.addMetric': 'Add Metric',

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -407,6 +407,14 @@
   }
 }
 
+.add-metric-modal.modal-690px-width {
+  .modal {
+    max-height: 600px;
+    .modal-body {
+      min-height: 380px;;
+    }
+  }
+}
 #add-metric-popup {
   min-height: 200px;
   div.row-fluid {
@@ -416,12 +424,24 @@
     }
   }
   .component-select {
+    .btn.dropdown-toggle {
+      border-radius: 4px;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      width: 220px;
+      text-align: left;
+      white-space: normal;
+    }
+    ul.dropdown-menu {
+      overflow: auto;
+      max-height: 280px;
+    }
     .accordion-group {
       border: none;
     }
     .accordion-toggle {
       text-decoration: none;
-      padding-bottom: 0;
+      padding: 3px 15px;
       .icon-caret-down {
         width: 10px;
         display: inline-block;
@@ -432,7 +452,6 @@
     }
     .accordion-toggle.collapsed {
       text-decoration: none;
-      padding-bottom: 0;
       .icon-caret-down {
         display: none;
       }
@@ -456,6 +475,56 @@
       background: transparent;
     }
   }
+  .chosen-container-single {
+    width: 250px;
+    .chosen-single {
+      height: 30px;
+      line-height: 20px;
+      color: #333333;
+      font-size: 14px;
+      padding: 4px 14px;
+      border-radius: 4px;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      background-color: #f5f5f5;
+      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+      background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+      background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+      background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+      background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+      background-repeat: repeat-x;
+      border: 1px solid #bbbbbb;
+      span {
+        margin-right: 8px;
+      }
+      div b {
+        background: none;
+        width: 0;
+        height: 0;
+        top: 13px;
+        left: -3px;
+        position: relative;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 4px solid #333333;
+      }
+    }
+
+    .chosen-drop {
+      margin-top: 2px;
+      overflow: auto;
+      width: 300px;
+      max-height: 280px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+      border-radius: 0px;
+      -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+    }
+  }
+
 }
 
 .sixty-percent-width-modal.widgets-browser-popup {

ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs

@@ -17,25 +17,30 @@
 }}
 
 <div class="row-fluid">
-  <div class="span3">{{t dashboard.widgets.wizard.step2.selectComponent}}</div>
+  <div class="span3">{{t dashboard.widgets.wizard.step2.Component}}</div>
   <div class="btn-group component-select span5">
-    <button class="btn">{{t dashboard.widgets.wizard.step2.selectComponent}}</button>
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      <span class="caret"></span>
-    </button>
+    {{#if view.selectedComponent}}
+      <button class="btn dropdown-toggle" data-toggle="dropdown">
+        {{view.selectedComponent.displayName}}<span class="caret pull-right"></span>
+      </button>
+    {{else}}
+      <button class="btn dropdown-toggle" data-toggle="dropdown">
+        {{t dashboard.widgets.wizard.step2.selectComponent}}<span class="caret pull-right"></span>
+      </button>
+    {{/if}}
     <ul class="dropdown-menu accordion" id="accordion2">
       {{#each service in view.componentMap}}
         <li class="accordion-group keep-open">
           <div class="accordion-heading">
             <a class="accordion-toggle collapsed" data-toggle="collapse" {{bindAttr href="service.href"}}>
-              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}&nbsp;({{service.count}})
+              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}
             </a>
           </div>
           <div {{bindAttr id="service.serviceName"}} class="accordion-body collapse">
             <ul class="accordion-inner">
               {{#each component in service.components}}
                 <li>
-                  <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}&nbsp;({{component.count}})</a>
+                  <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}</a>
                 </li>
               {{/each}}
             </ul>
@@ -47,7 +52,7 @@
 </div>
 
 <div class="row-fluid">
-  <div class="span3">{{t dashboard.widgets.wizard.step2.selectMetric}}</div>
+  <div class="span3">{{t dashboard.widgets.wizard.step2.Metric}}</div>
   <div class="span9">
     <select class="chosen-select">
       {{#each metric in view.selectedComponent.metrics}}

ambari-web/app/views/main/service/widgets/create/expression_view.js

@@ -157,10 +157,11 @@ App.WidgetWizardExpressionView = Em.View.extend({
   addMetric: function () {
     return App.ModalPopup.show({
       header: Em.I18n.t('dashboard.widgets.wizard.step2.addMetric'),
-      classNames: ['modal-690px-width'],
+      classNames: ['modal-690px-width', 'add-metric-modal'],
       disablePrimary: function () {
         return Em.isNone(this.get('selectedMetric'));
       }.property('selectedMetric'),
+      isHideBodyScroll: true,
       expression: this.get('expression'),
 
       /**
@@ -185,7 +186,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
           });
 
           $(".chosen-select").chosen({
-            placeholder_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound'),
+            placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.selectMetric'),
             no_results_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound')
           }).change(function (event, obj) {
             self.set('parentView.selectedMetric', Em.Object.create({
@@ -289,7 +290,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
           return result;
         }.property('controller.filteredMetrics')
       }),
-      primary: Em.I18n.t('common.save'),
+      primary: Em.I18n.t('common.add'),
       onPrimary: function () {
         var data = this.get('expression.data');
         var id = (data.length > 0) ? Math.max.apply(this, data.mapProperty('id')) + 1 : 1;