AMBARI-3835. Manage Configuration Group needs various UI tweaks(alexantonenko)

ambari-web/app/controllers/main/service/manage_config_groups_controller.js

@@ -190,6 +190,16 @@ App.ManageConfigGroupsController = Em.Controller.extend({
     this.set('selectedHosts', []);
   },
 
+  /**
+   * confirm delete config group
+   */
+  confirmDelete : function () {
+    var self = this;
+    App.showConfirmationPopup(function() {
+      self.deleteConfigGroup();
+    });
+  },
+
   /**
    * delete selected config group
    */

ambari-web/app/messages.js

@@ -1129,6 +1129,12 @@ Em.I18n.translations = {
   'services.service.config_groups_popup.group_name_lable':'Name',
   'services.service.config_groups_popup.group_desc_lable':'Description',
   'services.service.config_groups_popup.properties':'Properties',
+  'services.service.config_groups_popup.addButton':'Create new Configuration Group',
+  'services.service.config_groups_popup.removeButton':'Delete Configuration Group',
+  'services.service.config_groups_popup.renameButton':'Rename Configuration Group',
+  'services.service.config_groups_popup.addHost':'Add hosts to selected Configuration Group',
+  'services.service.config_groups_popup.removeHost':'Remove hosts from selected Configuration Group',
+  'services.service.config_groups_popup.duplicateButton':'Duplicate Configuration Group',
   'services.service.config_groups.add_config_group_popup.header':'Create New Configuration Group',
   'services.service.config_groups.duplicate_config_group_popup.header':'Duplicate Configuration Group',
   'services.service.config_groups.rename_config_group_popup.header':'Rename Configuration Group',

ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs

@@ -29,8 +29,10 @@
           class="group-select"
         }}
         <div class="btn-toolbar pull-right">
-          <button class="btn" {{bindAttr disabled="isHostsModified"}} {{action addConfigGroup target="controller"}}><i class="icon-plus"></i></button>
-          <button class="btn" {{bindAttr disabled="isDeleteGroupDisabled"}} {{action deleteConfigGroup target="controller"}}><i class="icon-minus"></i></button>
+          <button rel="button-info" class="btn" {{bindAttr data-original-title="view.addButtonTooltip" disabled="isHostsModified"}}
+            {{action addConfigGroup target="controller"}}><i class="icon-plus"></i></button>
+          <button rel="button-info" class="btn" {{bindAttr data-original-title="view.removeButtonTooltip" disabled="view.isRemoveButtonDisabled"}}
+            {{action confirmDelete target="controller"}}><i class="icon-minus"></i></button>
           <div class="btn-group">
             <button class="btn" {{bindAttr disabled="isHostsModified"}}><i class="icon-cog"></i></button>
             <button class="btn dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="isHostsModified"}}>
@@ -38,10 +40,10 @@
             </button>
             <ul class="dropdown-menu">
               <li {{bindAttr class="view.isRenameButtonDisabled:disabled"}}>
-                <a {{action renameConfigGroup target="controller"}}>{{t services.service.config_groups_popup.rename}}</a>
+                <a  rel="button-info" {{bindAttr data-original-title="view.renameButtonTooltip"}} {{action renameConfigGroup target="controller"}}>{{t services.service.config_groups_popup.rename}}</a>
               </li>
               <li>
-                <a {{action duplicateConfigGroup target="controller"}}>{{t services.service.config_groups_popup.duplicate}}</a>
+                <a  rel="button-info" {{bindAttr data-original-title="view.duplicateButtonTooltip"}} {{action duplicateConfigGroup target="controller"}}>{{t services.service.config_groups_popup.duplicate}}</a>
               </li>
             </ul>
           </div>
@@ -59,18 +61,19 @@
             }}
           </div>
           <div class="button-group pull-right">
-            <button class="btn" {{bindAttr disabled="selectedConfigGroup.isAddHostsDisabled"}} {{action addHosts target="controller"}} ><i class="icon-plus"></i></button>
-            <button class="btn" {{bindAttr disabled="selectedConfigGroup.isDeleteHostsDisabled"}} {{action deleteHosts target="controller"}} ><i class="icon-minus"></i></button>
+            <button rel="button-info" class="btn" {{bindAttr data-original-title="view.addHostTooltip" disabled="selectedConfigGroup.isAddHostsDisabled"}} {{action addHosts target="controller"}} ><i class="icon-plus"></i></button>
+            <button rel="button-info" class="btn" {{bindAttr data-original-title="view.removeHostTooltip" disabled="selectedConfigGroup.isDeleteHostsDisabled"}} {{action deleteHosts target="controller"}} ><i class="icon-minus"></i></button>
           </div>
         </div>
         <div class="row-fluid">
           <div class="span2">{{t common.overrides}}</div>
           <div class="span10">
             <a href="" class="properties-link" {{action showProperties target="controller"}}
-               rel="HealthTooltip" {{bindAttr data-original-title="selectedConfigGroup.propertiesList" }}>{{selectedConfigGroup.properties.length}} {{t common.properties}}</a>
+              {{bindAttr data-original-title="selectedConfigGroup.propertiesList" }}>{{selectedConfigGroup.properties.length}} {{t common.properties}}</a>
           </div>
         </div>
       </div>
+      <div class="span12">{{selectedConfigGroup.description}}</div>
       <div class="span12 text-error" id="manage-config-group-error-div">
         {{#if errorMessage}}
           {{errorMessage}}

ambari-web/app/views/main/service/manage_config_groups_view.js

@@ -61,5 +61,26 @@ App.MainServiceManageConfigGroupView = Em.View.extend({
   didInsertElement: function () {
     this.get('controller').loadConfigGroups(this.get('serviceName'));
     $('.properties-link').tooltip();
-  }
+    $("[rel='button-info']").tooltip();
+  },
+
+  addButtonTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.addButton');
+  }.property(),
+  removeButtonTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.removeButton');
+  }.property(),
+  renameButtonTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.renameButton');
+  }.property(),
+  duplicateButtonTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.duplicateButton');
+  }.property(),
+  addHostTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.addHost');
+  }.property(),
+  removeHostTooltip: function () {
+    return  Em.I18n.t('services.service.config_groups_popup.removeHost');
+  }.property()
+
 });