AMBARI-7053 Config History: Compare UI tweaks. (atkach)

ambari-web/app/controllers/main/service/info/configs.js

@@ -572,6 +572,11 @@ App.MainServiceInfoConfigsController = Em.Controller.extend(App.ServerValidatorM
           allConfigs.push(this.getMockConfig(prop, serviceName, App.config.getOriginalFileName(configuration.type)));
         }
       }
+      if (configuration.properties_attributes && configuration.properties_attributes.final) {
+        for (var final in configuration.properties_attributes.final) {
+          serviceVersionMap[final].isFinal = (configuration.properties_attributes.final[final] === 'true');
+        }
+      }
     }, this);
 
     allConfigs.forEach(function (serviceConfig) {
@@ -587,6 +592,8 @@ App.MainServiceInfoConfigsController = Em.Controller.extend(App.ServerValidatorM
           compareObject.isMock = false;
         }
         serviceConfig.compareConfig = App.ServiceConfigProperty.create(compareObject);
+        this.setSupportsFinal(serviceConfig.compareConfig);
+        serviceConfig.compareConfig.set('isFinal', compareConfig.isFinal);
         serviceConfig.compareConfig.set('value', App.config.formatOverrideValue(serviceConfig, compareConfig.value));
         serviceConfig.isComparison = true;
       } else if (serviceConfig.isUserProperty) {

ambari-web/app/messages.js

@@ -1993,6 +1993,7 @@ Em.I18n.translations = {
   'dashboard.configHistory.table.created.title' : 'Created',
   'dashboard.configHistory.table.empty' : 'No history to display',
   'dashboard.configHistory.table.version.versionText' : 'V{0}',
+  'dashboard.configHistory.table.version.prefix' : 'V',
   'dashboard.configHistory.table.current.tooltip' : 'Current config for {0}:{1}',
   'dashboard.configHistory.table.restart.tooltip' : 'Restart required',
   'dashboard.configHistory.table.filteredHostsInfo': '{0} of {1} versions showing',

ambari-web/app/styles/application.less

@@ -4953,8 +4953,14 @@ ul.inline li {
   }
 }
 
-#config_history_flow {
+.one-story-bar {
   margin-bottom: 80px;
+}
+.two-stories-bar {
+  margin-bottom: 120px;
+}
+
+#config_history_flow {
   .version-slider {
     width: 100%;
     height: 100px;
@@ -5069,6 +5075,10 @@ ul.inline li {
       }
     }
   }
+  .version-info-bar-wrapper {
+    position: fixed;
+    z-index: 2;
+  }
   .version-info-bar {
     background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
@@ -5081,8 +5091,6 @@ ul.inline li {
     box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
     margin: 5px 0;
     padding: 5px;
-    position: fixed;
-    z-index: 2;
     width: 747px;
 
     .label-wrapper {

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

@@ -20,5 +20,13 @@
   {{view view.serviceConfigProperty.compareConfig.viewClass serviceConfigBinding="view.serviceConfigProperty.compareConfig"}}
   {{#unless view.serviceConfigProperty.compareConfig.isMock}}
     <span class="label label-info">{{view.serviceConfigProperty.compareConfig.serviceVersion.versionText}}</span>
+    {{#if view.serviceConfigProperty.compareConfig.serviceVersion.isCurrent}}
+        <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" }}>
+            <i class="icon-lock"></i>
+        </a>
+    {{/if}}
   {{/unless}}
 </div>

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

@@ -17,7 +17,7 @@
 }}
 
 
-<div id="config_history_flow">
+<div id="config_history_flow" {{bindAttr class="view.showCompareVersionBar:two-stories-bar:one-story-bar"}}>
   <div class="version-slider">
     <div {{bindAttr class=":icon-chevron-box :pull-left view.showLeftArrow::hide"}} {{action shiftBack target="view"}}><i class="icon-chevron-left icon-3x"></i></div>
     {{#each serviceVersion in view.visibleServiceVersion}}
@@ -54,59 +54,83 @@
     {{/each}}
     <div {{bindAttr class=":icon-chevron-box :pull-right view.showRightArrow::hide"}} {{action shiftForward target="view"}}><i class="icon-chevron-right icon-3x"></i></div>
   </div>
-  <div class="version-info-bar">
-    <div class="row-fluid">
-      <div class="btn-group pull-left">
-        <button class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
-          <i class="icon-random"></i>
-          <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu">
-          {{#each serviceVersion in view.dropDownList}}
-            <li class="pointer dropdown-submenu">
-              <div class="row-fluid" {{action switchVersion serviceVersion target="view"}}>
-                <div class="span2">{{serviceVersion.versionText}}</div>
-                <div class="span6">{{serviceVersion.modifiedDate}}</div>
-                <div class="span3">{{serviceVersion.author}}</div>
-                <div class="pull-right"><i class="icon-caret-right"></i></div>
+  <div class="version-info-bar-wrapper">
+      <div {{bindAttr class="view.showCompareVersionBar::hidden :version-info-bar"}}>
+          <div class="row-fluid">
+              <div class="span1">
               </div>
-              <ul class="dropdown-menu">
-                <div class="content"> <strong>{{serviceVersion.serviceName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
-                    <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
-                    <div class="notes">{{serviceVersion.briefNotes}}</div>
-                </div>
-                <div>
-                  <button class="btn" {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
-                  <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
-                  <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
-                </div>
-              </ul>
-            </li>
-          {{/each}}
-          {{#unless view.showFullList}}
-            <li class="align-center pointer" id="show_more">
-              <a {{action openFullList target="view"}}>
-                {{t dashboard.configHistory.info-bar.showMore}}&nbsp;{{view.serviceName}}
-                  &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
-              </a>
-            </li>
-          {{/unless}}
-        </ul>
+              <div class="label-wrapper span9"
+                   data-toggle="tooltip" {{bindAttr data-original-title="view.compareServiceVersion.briefNotes"}}>
+                  <span class="label label-info">{{view.compareServiceVersion.versionText}}</span>
+                {{#if view.compareServiceVersion.isCurrent}}
+                    <span class="label label-success">{{t common.current}}</span>
+                {{/if}}
+                  <strong>{{view.compareServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}
+                  &nbsp;<strong>{{view.compareServiceVersion.modifiedDate}}</strong>
+              </div>
+              <div class="pull-right">
+                  <div {{bindAttr class="view.compareServiceVersion.isCurrent::hidden"}}>
+                      <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>
+              </div>
+          </div>
       </div>
-        <div class="label-wrapper span9" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.briefNotes"}}>
-          <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
-          {{#if view.displayedServiceVersion.isCurrent}}
-            <span class="label label-success">{{t common.current}}</span>
-          {{/if}}
-          <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.modifiedDate}}</strong>
-        </div>
-        <div class="pull-right">
-          <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
-            <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 class="version-info-bar">
+          <div class="row-fluid">
+              <div class="btn-group pull-left">
+                  <button class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{action hideFullList target="view"}} {{bindAttr disabled="view.versionActionsDisabled"}}>
+                      <i class="icon-random"></i>
+                      <span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu">
+                    {{#each serviceVersion in view.dropDownList}}
+                        <li class="pointer dropdown-submenu">
+                            <div class="row-fluid" {{action switchVersion serviceVersion target="view"}}>
+                                <div class="span2">{{serviceVersion.versionText}}</div>
+                                <div class="span6">{{serviceVersion.modifiedDate}}</div>
+                                <div class="span3">{{serviceVersion.author}}</div>
+                                <div class="pull-right"><i class="icon-caret-right"></i></div>
+                            </div>
+                            <ul class="dropdown-menu">
+                                <div class="content"> <strong>{{serviceVersion.serviceName}}</strong> <span class="label label-info">{{serviceVersion.versionText}}</span> &nbsp;
+                                    <strong>{{t services.service.config.configHistory.configGroup}}:{{serviceVersion.configGroupName}}</strong>
+                                    <div class="notes">{{serviceVersion.briefNotes}}</div>
+                                </div>
+                                <div>
+                                    <button class="btn" {{action switchVersion serviceVersion target="view"}}><i class="icon-search"></i>&nbsp;{{t common.view}}</button>
+                                    <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action compare serviceVersion target="view"}}><i class="icon-copy"></i>&nbsp;{{t common.compare}}</button>
+                                    <button class="btn" {{bindAttr disabled="serviceVersion.isDisabled"}} {{action revert serviceVersion target="view"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button>
+                                </div>
+                            </ul>
+                        </li>
+                    {{/each}}
+                    {{#unless view.showFullList}}
+                        <li class="align-center pointer" id="show_more">
+                            <a {{action openFullList target="view"}}>
+                              {{t dashboard.configHistory.info-bar.showMore}}&nbsp;{{view.serviceName}}
+                                &nbsp;<span class="lowercase ellipsis">{{t dashboard.configHistory.title}}</span>
+                            </a>
+                        </li>
+                    {{/unless}}
+                  </ul>
+              </div>
+              <div class="label-wrapper span9" data-toggle="tooltip" {{bindAttr data-original-title="view.displayedServiceVersion.briefNotes"}}>
+                  <span class="label label-info">{{view.displayedServiceVersion.versionText}}</span>
+                {{#if view.displayedServiceVersion.isCurrent}}
+                    <span class="label label-success">{{t common.current}}</span>
+                {{/if}}
+                  <strong>{{view.displayedServiceVersion.author}}</strong>&nbsp;{{t dashboard.configHistory.info-bar.authoredOn}}&nbsp;<strong>{{view.displayedServiceVersion.modifiedDate}}</strong>
+              </div>
+              <div class="pull-right">
+                  <div {{bindAttr class="view.displayedServiceVersion.isCurrent::hidden"}}>
+                      <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>
+              </div>
           </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>
-        </div>
-    </div>
+      </div>
   </div>
 </div>

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

@@ -48,6 +48,12 @@
             {{! Here serviceConfigBinding should ideally be serviceConfigPropertyBinding }}
             <div {{bindAttr class="errorMessage:error: warnMessage:warning: :control-group"}}>
               {{view viewClass serviceConfigBinding="this" categoryConfigsAllBinding="view.categoryConfigsAll" }}
+              {{#if this.isComparison}}
+                  <span class="label label-info">{{t dashboard.configHistory.table.version.prefix}}{{controller.selectedVersion}}</span>
+                {{#if controller.isCurrentSelected}}
+                    <span class="label label-success">{{t common.current}}</span>
+                {{/if}}
+              {{/if}}
               {{#if supportsFinal}}
                 <a href="#" data-toggle="tooltip"
                   {{bindAttr class=":btn :btn-small :btn-final isFinal:active" disabled="isNotEditable"}}
@@ -60,11 +66,13 @@
                 {{#if isPropertyOverridable}}
                   {{#if view.supportsHostOverrides}}
                     {{#if App.isAdmin}}
-                      <a class="btn btn-small" href="#" data-toggle="tooltip"
-                        {{action "createOverrideProperty" this target="view"}}
-                        {{translateAttr data-original-title="common.override"}}>
-                        <i class="icon-plus-sign"></i>
-                      </a>
+                      {{#unless this.isComparison}}
+                          <a class="btn btn-small" href="#" data-toggle="tooltip"
+                            {{action "createOverrideProperty" this target="view"}}
+                            {{translateAttr data-original-title="common.override"}}>
+                              <i class="icon-plus-sign"></i>
+                          </a>
+                      {{/unless}}
                     {{/if}}
                   {{/if}}
                 {{/if}}
@@ -79,11 +87,13 @@
                 {{/unless}}
                 {{#if isRemovable}}
                   {{#if App.isAdmin}}
-                    <a class="btn btn-small" href="#" data-toggle="tooltip"
-                      {{action "removeProperty" this target="view"}}
-                      {{translateAttr data-original-title="common.remove"}}>
-                      <i class="icon-minus-sign"></i>
-                    </a>
+                    {{#unless this.isComparison}}
+                        <a class="btn btn-small" href="#" data-toggle="tooltip"
+                          {{action "removeProperty" this target="view"}}
+                          {{translateAttr data-original-title="common.remove"}}>
+                            <i class="icon-minus-sign"></i>
+                        </a>
+                    {{/unless}}
                   {{/if}}
                 {{/if}}
                 {{#unless isEditable}}

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

@@ -33,6 +33,11 @@ App.ConfigHistoryFlowView = Em.View.extend({
    * flag identify whether to show all versions or short list of them
    */
   showFullList: false,
+  compareServiceVersion: null,
+
+  showCompareVersionBar: function() {
+    return !Em.isNone(this.get('compareServiceVersion'));
+  }.property('compareServiceVersion'),
 
   isSaveDisabled: function () {
     return (this.get('controller.isSubmitDisabled') || !this.get('controller.versionLoaded'));
@@ -172,7 +177,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
     $(window).unbind('scroll');
 
     $(window).on('scroll', function (event) {
-      var infoBar = $('#config_history_flow>.version-info-bar');
+      var infoBar = $('#config_history_flow>.version-info-bar-wrapper');
       var scrollTop = $(window).scrollTop();
 
       if (infoBar.length === 0) {
@@ -220,6 +225,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
     var version = event.context.get('version');
     var versionIndex = 0;
 
+    this.set('compareServiceVersion', null);
     this.get('serviceVersions').forEach(function (serviceVersion, index) {
       if (serviceVersion.get('version') === version) {
         serviceVersion.set('isDisplayed', true);
@@ -241,6 +247,7 @@ App.ConfigHistoryFlowView = Em.View.extend({
     var isDisabled = event.context ? event.context.get('isDisabled') : false;
     if (isDisabled) return;
     this.set('controller.compareServiceVersion', event.context);
+    this.set('compareServiceVersion', event.context);
     this.get('controller').onConfigGroupChange();
   },
   /**