AMBARI-6703. Final checkboxes should be moved beside values and should be in single line

ambari-web/app/styles/application.less

@@ -1154,18 +1154,30 @@ h1 {
   .common-config-category {
     .action {
       cursor: pointer;
-      .icon-plus-sign {
-        color: #5AB400;
-        margin-right: 2px;
-      }
-      .icon-minus-sign {
-        color: #FF4B4B;
-        margin-right: 2px;
-      }
-      .icon-undo {
-        color: rgb(243, 178, 11);
-        margin-right: 2px;
-      }
+    }
+    .btn-final .icon-lock {
+      color: grey;
+    }
+    .btn-final.active .icon-lock {
+      color: blue;
+    }
+    .btn-final.active[disabled] { //copied from Bootstrap .btn.active
+      background-color: #e6e6e6;
+      background-color: #d9d9d9 \9;
+      background-image: none;
+      outline: 0;
+      -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .icon-plus-sign {
+      color: #5AB400;
+    }
+    .icon-minus-sign {
+      color: #FF4B4B;
+    }
+    .icon-undo {
+      color: rgb(243, 178, 11);
     }
   }
   .capacity-scheduler {

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

@@ -20,21 +20,34 @@
   <div {{bindAttr class="overriddenSCP.errorMessage:error: :control-group :overrideField"}}>
     {{view overriddenSCP.viewClass serviceConfigBinding="overriddenSCP" categoryConfigsBinding="view.categoryConfigs"}}
     {{#if overriddenSCP.supportsFinal}}
-      <label class="checkbox inline">{{view Ember.Checkbox checkedBinding="overriddenSCP.isFinal" disabledBinding="overriddenSCP.isNotEditable"}}{{t services.service.config.final}}</label>
+      <a href="#" data-toggle="tooltip"
+        {{bindAttr class=":btn :btn-small :btn-final overriddenSCP.isFinal:active" disabled="overriddenSCP.isNotEditable"}}
+        {{action "toggleFinalFlag" overriddenSCP target="view"}}
+        {{translateAttr data-original-title="services.service.config.final"}}>
+        <i class="icon-lock"></i>
+      </a>
     {{/if}}
     {{#if view.isDefaultGroupSelected}}
       {{#if overriddenSCP.group}}
-        <a rel='SwitchGroupTooltip' {{bindAttr data-original-title="overriddenSCP.group.switchGroupTextFull" }} class="action" {{action selectConfigGroup overriddenSCP.group target="controller"}}>
+        <a href="#" data-toggle="tooltip" {{bindAttr data-original-title="overriddenSCP.group.switchGroupTextFull" }} class="action" {{action selectConfigGroup overriddenSCP.group target="controller"}}>
           {{overriddenSCP.group.switchGroupTextShort}}
         </a>
       {{/if}}
     {{else}}
       {{#if overriddenSCP.isEditable}}
         {{#if isNotDefaultValue}}
-          <a class="action" {{action "doRestoreDefaultValue" this target="view" }} ><i class="icon-undo"></i>{{t common.undo}}</a>
+          <a class="btn btn-small" href="#" data-toggle="tooltip"
+            {{action "doRestoreDefaultValue" overriddenSCP target="view"}}
+            {{translateAttr data-original-title="common.undo"}}>
+            <i class="icon-undo"></i>
+          </a>
         {{/if}}
         {{#if App.isAdmin}}
-          <a class="action" {{action "removeOverride" overriddenSCP target="view" }} ><i class="icon-minus-sign"></i>{{t common.remove}}</a>
+          <a class="btn btn-small" href="#" data-toggle="tooltip"
+            {{action "removeOverride" overriddenSCP target="view"}}
+            {{translateAttr data-original-title="common.remove"}}>
+            <i class="icon-minus-sign"></i>
+          </a>
         {{/if}}
           <span class="help-inline">{{overriddenSCP.errorMessage}}</span>
       {{else}}

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

@@ -49,29 +49,43 @@
             <div {{bindAttr class="errorMessage:error: warnMessage:warning: :control-group"}}>
               {{view viewClass serviceConfigBinding="this" categoryConfigsAllBinding="view.categoryConfigsAll" }}
               {{#if supportsFinal}}
-                <label class="checkbox inline">{{view Ember.Checkbox checkedBinding="isFinal" disabledBinding="isNotEditable"}}{{t services.service.config.final}}</label>
+                <a href="#" data-toggle="tooltip"
+                  {{bindAttr class=":btn :btn-small :btn-final isFinal:active" disabled="isNotEditable"}}
+                  {{action "toggleFinalFlag" this target="view"}}
+                  {{translateAttr data-original-title="services.service.config.final"}}>
+                  <i class="icon-lock"></i>
+                </a>
               {{/if}}
               {{#if view.canEdit}}
                 {{#if isPropertyOverridable}}
                   {{#if view.supportsHostOverrides}}
                     {{#if App.isAdmin}}
-                      <a class="action" {{action "createOverrideProperty" this target="view" }} ><i class="icon-plus-sign"></i>{{t common.override}}</a>
+                      <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>
                     {{/if}}
                   {{/if}}
                 {{/if}}
                 {{#unless cantBeUndone}}
                   {{#if isNotDefaultValue}}
-                    <a class="action" {{action "doRestoreDefaultValue" this target="view" }} ><i class="icon-undo"></i>{{t common.undo}}</a>
+                    <a class="btn btn-small" href="#" data-toggle="tooltip"
+                      {{action "doRestoreDefaultValue" this target="view"}}
+                      {{translateAttr data-original-title="common.undo"}}>
+                      <i class="icon-undo"></i>
+                    </a>
                   {{/if}}
                 {{/unless}}
                 {{#if isRemovable}}
                   {{#if App.isAdmin}}
-                    <a class="action" {{action "removeProperty" this target="view" }} ><i class="icon-minus-sign"></i>{{t common.remove}}</a>
+                    <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>
                   {{/if}}
                 {{/if}}
-                {{#if supportsFinal}}
-                  <label class="checkbox inline">{{view Ember.Checkbox checkedBinding="isFinal"}}{{t services.service.config.final}}</label>
-                {{/if}}
                 {{#unless isEditable}}
                   {{#if group}}
                     <a rel='SwitchGroupTooltip' {{bindAttr data-original-title="this.group.switchGroupTextShort"}} class="action" {{action selectConfigGroup group target="controller"}}>

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

@@ -34,8 +34,18 @@ App.ServiceConfigView.SCPOverriddenRowsView = Ember.View.extend({
           Em.I18n.t('services.service.config_groups.switchGroupTextFull').format(overriddenSCP.get('group.displayName')));
       })
       this.set('serviceConfigProperty.overrides', overrides);
-      App.tooltip(this.$("[rel='SwitchGroupTooltip']"));
     }
+    App.tooltip(this.$('[data-toggle=tooltip]'),{
+      placement: 'top'
+    });
+  },
+
+  toggleFinalFlag: function (event) {
+    var override = event.contexts[0];
+    if (override.get('isNotEditable')) {
+      return;
+    }
+    override.set('isFinal', !override.get('isFinal'));
   },
 
   removeOverride: function (event) {
@@ -50,5 +60,6 @@ App.ServiceConfigView.SCPOverriddenRowsView = Ember.View.extend({
     }
     overrides = overrides.without(scpToBeRemoved);
     this.set('serviceConfigProperty.overrides', overrides);
+    Em.$('body>.tooltip').remove(); //some tooltips get frozen when their owner's DOM element is removed
   }
 });

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

@@ -425,6 +425,9 @@ App.ServiceConfigsByCategoryView = Ember.View.extend(App.UserPref, {
     } else {
       this.$('.accordion-body').show();
     }
+    App.tooltip(this.$('[data-toggle=tooltip]'),{
+      placement: 'top'
+    });
     this.updateReadOnlyFlags();
     Em.run.next(function() {
       self.updateReadOnlyFlags();
@@ -663,6 +666,14 @@ App.ServiceConfigsByCategoryView = Ember.View.extend(App.UserPref, {
     }).bind(this));
   },
 
+  toggleFinalFlag: function (event) {
+    var serviceConfigProperty = event.contexts[0];
+    if (serviceConfigProperty.get('isNotEditable')) {
+      return;
+    }
+    serviceConfigProperty.set('isFinal', !serviceConfigProperty.get('isFinal'));
+  },
+
   /**
    * Removes the top-level property from list of properties.
    * Should be only called on user properties.
@@ -670,6 +681,7 @@ App.ServiceConfigsByCategoryView = Ember.View.extend(App.UserPref, {
   removeProperty: function (event) {
     var serviceConfigProperty = event.contexts[0];
     this.get('serviceConfigs').removeObject(serviceConfigProperty);
+    Em.$('body>.tooltip').remove(); //some tooltips get frozen when their owner's DOM element is removed
   },
 
   /**