AMBARI-4067 UI improvements for Config groups.. (ababiichuk)

ambari-web/app/styles/application.less

@@ -4956,9 +4956,9 @@ i.icon-asterisks {
   .select-create-config-group-div {
     margin-left: 20px;
     margin-bottom: 20px;
-    .message{
-      color: #777;
-    }
+  }
+  .message{
+    color: #777;
   }
 }
 

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

@@ -28,7 +28,7 @@
     </div>
     <label class="radio">
       {{view view.selectConfigGroupRadioButton}}
-      {{t config.group.selection.dialog.option.select serviceNameBinding="selectedService.displayName"}}
+      <span {{bindAttr class="view.parentView.hasExistedGroups::message"}}>{{t config.group.selection.dialog.option.select serviceNameBinding="selectedService.displayName"}}</span>
     </label>
     {{#if view.parentView.availableConfigGroups.length}}
     <div class="select-create-config-group-div">

ambari-web/app/utils/config.js

@@ -1060,6 +1060,9 @@ App.config = Em.Object.create({
       optionCreateConfigGroup: function(){
         return !this.get('optionSelectConfigGroup');
       }.property('optionSelectConfigGroup'),
+      hasExistedGroups: function() {
+        return !!this.get('availableConfigGroups').length;
+      }.property('availableConfigGroups'),
       availableConfigGroups: availableConfigGroups,
       selectedConfigGroup: selectedConfigGroup,
       newConfigGroupName: '',
@@ -1125,7 +1128,7 @@ App.config = Em.Object.create({
             this.set('parentView.parentView.optionSelectConfigGroup', true);
           },
           didInsertElement: function () {
-            if (!this.get('parentView.parentView.availableConfigGroups').length) {
+            if (!this.get('parentView.parentView.hasExistedGroups')) {
               this.set('disabled', true);
               this.set('parentView.parentView.optionSelectConfigGroup', false);
             }