AMBARI-7069. Configs: make comparision bar info more clear.(xiwang)

ambari-web/app/messages.js

@@ -1412,7 +1412,9 @@ Em.I18n.translations = {
   'services.service.config.configHistory.configGroup': 'Config Group',
   'services.service.config.configHistory.leftArrow.tooltip': 'Show earlier versions',
   'services.service.config.configHistory.rightArrow.tooltip': 'Show later versions',
+  'services.service.config.configHistory.dismissIcon.tooltip': 'Dismiss',
   'services.service.config.configHistory.makeCurrent.message': 'Created from service config version {0}',
+  'services.service.config.configHistory.comparing': 'Comparing',
 
   'services.add.header':'Add Service Wizard',
   'services.reassign.header':'Move Master Wizard',
@@ -2007,6 +2009,7 @@ Em.I18n.translations = {
   'dashboard.configHistory.info-bar.makeCurrent.popup.title': 'Make Current Confirmation',
   'dashboard.configHistory.info-bar.save.popup.placeholder': 'What did you change?',
   'dashboard.configHistory.info-bar.revert.button': 'Make Current',
+  'dashboard.configHistory.info-bar.revert.versionButton': 'Make {0} Current',
   'dashboard.configHistory.info-bar.view.button.disabled': 'You are currently viewing this version.',
   'dashboard.configHistory.info-bar.compare.button.disabled': 'You cannot compare against the same version.',
   'dashboard.configHistory.info-bar.revert.button.disabled': 'This is the current version.',

ambari-web/app/models/service_config.js

@@ -151,6 +151,9 @@ App.ServiceConfigProperty = Ember.Object.extend({
   isEditable: true, // by default a config property is editable
   isNotEditable: Ember.computed.not('isEditable'),
   isFinal: false,
+  hideFinalIcon: function () {
+    return (!this.get('isFinal'))&& this.get('isNotEditable');
+  }.property('isFinal', 'isNotEditable'),
   defaultIsFinal: false,
   supportsFinal: false,
   isVisible: true,

ambari-web/app/models/service_config_version.js

@@ -44,6 +44,9 @@ App.ServiceConfigVersion = DS.Model.extend({
   versionText: function () {
     return Em.I18n.t('dashboard.configHistory.table.version.versionText').format(this.get('version'));
   }.property('version'),
+  makeCurrentButtonText: function() {
+    return Em.I18n.t('dashboard.configHistory.info-bar.revert.versionButton').format(this.get('versionText'));
+  }.property('versionText'),
   modifiedDate: function () {
     return dateUtil.dateFormat(this.get('createTime'));
   }.property('createTime'),

ambari-web/app/styles/application.less

@@ -5092,10 +5092,19 @@ ul.inline li {
     -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
     box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
     margin: 5px 0;
     padding: 5px;
     width: 747px;
 
+    .icon-remove-circle {
+      color: #ffffff;
+      padding-left: 10px;
+      padding-top: 7px;
+      display: inline-block;
+    }
     .label-wrapper {
       line-height: 30px;
       margin-left: 10px;

ambari-web/app/templates/common/configs/compare_property.hbs

@@ -24,7 +24,7 @@
         <span class="label label-success">{{t common.current}}</span>
     {{/if}}
     {{#if view.serviceConfigProperty.compareConfig.supportsFinal}}
-        <a disabled="disabled" {{bindAttr class=":btn :btn-small :btn-final view.serviceConfigProperty.compareConfig.isFinal:active" }}>
+        <a disabled="disabled" {{bindAttr class=":btn :btn-small :btn-final view.serviceConfigProperty.compareConfig.isFinal:active view.serviceConfigProperty.compareConfig.hideFinalIcon:hidden" }}>
             <i class="icon-lock"></i>
         </a>
     {{/if}}

ambari-web/app/templates/common/configs/config_history_flow.hbs

@@ -59,10 +59,14 @@
   <div class="version-info-bar-wrapper">
       <div {{bindAttr class="view.showCompareVersionBar::hidden :version-info-bar"}}>
           <div class="row-fluid">
-              <div class="span1">
+              <div class="span1" {{action removeCompareVersionBar target="view"}} data-toggle="arrow-tooltip" {{translateAttr data-original-title="services.service.config.configHistory.dismissIcon.tooltip"}}>
+                  <i class="icon-remove-circle icon-large"></i>
               </div>
               <div class="label-wrapper span9"
                    data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.briefNotes"}}>
+                  {{t services.service.config.configHistory.comparing}}
+                  <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
+                  ...
                   <span class="label label-info">{{view.compareServiceVersion.versionText}}</span>
                 {{#if view.compareServiceVersion.isCurrent}}
                     <span class="label label-success">{{t common.current}}</span>
@@ -75,7 +79,7 @@
                       <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.versionActionsDisabled"}}>{{t common.cancel}}</button>
                       <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
                   </div>
-                  <button class="btn btn-success"  {{action revert target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.compareServiceVersion.isCurrent:hidden"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                  <button class="btn btn-success"  {{action revert target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.compareServiceVersion.isCurrent:hidden"}}>{{view.compareServiceVersion.makeCurrentButtonText}}</button>
               </div>
           </div>
       </div>
@@ -130,7 +134,7 @@
                       <button class="btn" {{action doCancel target="controller"}} {{bindAttr disabled="view.versionActionsDisabled"}}>{{t common.cancel}}</button>
                       <button class="btn btn-success" {{action save target="view"}} {{bindAttr disabled="view.isSaveDisabled"}}>{{t common.save}}</button>
                   </div>
-                  <button class="btn btn-success"  {{action revert target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                  <button class="btn btn-success"  {{action revert target="view"}} {{bindAttr disabled="view.versionActionsDisabled" class="view.displayedServiceVersion.isCurrent:hidden"}}>{{view.displayedServiceVersion.makeCurrentButtonText}}</button>
               </div>
           </div>
       </div>

ambari-web/app/templates/common/configs/overriddenProperty.hbs

@@ -21,7 +21,7 @@
     {{view overriddenSCP.viewClass serviceConfigBinding="overriddenSCP" categoryConfigsBinding="view.categoryConfigs"}}
     {{#if overriddenSCP.supportsFinal}}
       <a href="#" data-toggle="tooltip"
-        {{bindAttr class=":btn :btn-small :btn-final overriddenSCP.isFinal:active" disabled="overriddenSCP.isNotEditable"}}
+        {{bindAttr class=":btn :btn-small :btn-final overriddenSCP.isFinal:active overriddenSCP.hideFinalIcon:hidden" disabled="overriddenSCP.isNotEditable"}}
         {{action "toggleFinalFlag" overriddenSCP target="view"}}
         {{translateAttr data-original-title="services.service.config.final"}}>
         <i class="icon-lock"></i>

ambari-web/app/templates/common/configs/service_config_category.hbs

@@ -56,7 +56,7 @@
               {{/if}}
               {{#if supportsFinal}}
                 <a href="#" data-toggle="tooltip"
-                  {{bindAttr class=":btn :btn-small :btn-final isFinal:active" disabled="isNotEditable"}}
+                  {{bindAttr class=":btn :btn-small :btn-final isFinal:active hideFinalIcon:hidden" disabled="isNotEditable"}}
                   {{action "toggleFinalFlag" this target="view"}}
                   {{translateAttr data-original-title="services.service.config.final"}}>
                   <i class="icon-lock"></i>

ambari-web/app/views/common/configs/config_history_flow.js

@@ -253,6 +253,22 @@ App.ConfigHistoryFlowView = Em.View.extend({
     this.set('compareServiceVersion', event.context);
     this.get('controller').onConfigGroupChange();
   },
+  removeCompareVersionBar: function () {
+    var displayedVersion = this.get('displayedServiceVersion.version');
+    var versionIndex = 0;
+
+    this.set('compareServiceVersion', null);
+    this.get('serviceVersions').forEach(function (serviceVersion, index) {
+      if (serviceVersion.get('version') === displayedVersion) {
+        serviceVersion.set('isDisplayed', true);
+        versionIndex = index;
+      } else {
+        serviceVersion.set('isDisplayed', false);
+      }
+    });
+    this.shiftFlowOnSwitch(versionIndex);
+    this.get('controller').loadSelectedVersion(displayedVersion);
+  },
   /**
    * revert config values to chosen version and apply reverted configs to server
    */