AMBARI-13092. After page refresh created config groups are showed with delay (alexantonenko)

ambari-web/app/styles/application.less

@@ -4800,7 +4800,6 @@ li.break {
   .config-groups-dropdown-menu {
     overflow: auto;
     max-height: 416px;
-    margin-top: 16px;
   }
 }
 
@@ -5957,3 +5956,23 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     }
   }
 }
+
+.config-manage-nav {
+  .config-groups-dropdown {
+    display: inline-block;
+    .btn.dropdown-toggle.first {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .spinner {
+      background-size: 20px;
+      height: 20px;
+      width: 20px;
+    }
+  }
+  .filter-combobox {
+    margin-bottom: 0;
+  }
+}

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

@@ -46,25 +46,29 @@
   {{/if}}
 {{/if}}
 {{#if view.supportsHostOverrides}}
-  <div class="alert alert-info">
+  <div class="alert alert-info config-manage-nav">
 
     {{t common.group}}&nbsp;
-	  <span class="btn-group">
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle"
-                                                                    data-toggle="dropdown">{{selectedConfigGroup.displayNameHosts}}</button>
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
-      </button>
-		  <ul class="dropdown-menu config-groups-dropdown-menu">
-        <!-- available config group menu links -->
-        {{#each configGroup in configGroups}}
-          <li>
-            <a href="#" {{action "selectConfigGroup" configGroup target="controller"}}>
-              {{configGroup.displayNameHosts}}
-            </a>
-          </li>
-        {{/each}}
-      </ul>
+	  <span class="btn-group config-groups-dropdown">
+      {{#if controller.configGroupsAreLoaded}}
+        <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle first"
+                                                                      data-toggle="dropdown">{{selectedConfigGroup.displayNameHosts}}</button>
+        <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle" data-toggle="dropdown">
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu config-groups-dropdown-menu">
+          <!-- available config group menu links -->
+          {{#each configGroup in configGroups}}
+            <li>
+              <a href="#" {{action "selectConfigGroup" configGroup target="controller"}}>
+                {{configGroup.displayNameHosts}}
+              </a>
+            </li>
+          {{/each}}
+        </ul>
+      {{else}}
+        <div class="pull-left spinner"></div>
+      {{/if}}
 		</span>
     {{#isAccessible ADMIN}}
       {{#if controller.isHostsConfigsPage}}
@@ -76,6 +80,7 @@
     <div class="pull-right">
       {{view App.FilterComboCleanableView filterBinding="view.filter" columnsBinding="view.columns" popoverDescriptionBinding="view.propertyFilterPopover"}}
     </div>
+    <div class="clearfix"></div>
   </div>
 {{/if}}
 

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

@@ -17,14 +17,14 @@
 }}
 
 {{#if view.supportsHostOverrides}}
-  <div class="alert alert-info">
+  <div class="alert alert-info config-manage-nav">
     {{t common.group}}&nbsp;
-	  <span class="btn-group">
-		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn">{{selectedConfigGroup.displayNameHosts}}</button>
+	  <span class="btn-group config-groups-dropdown">
+		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle first" data-toggle="dropdown">{{selectedConfigGroup.displayNameHosts}}</button>
 		  <button {{bindAttr disabled="controller.isHostsConfigsPage"}} class="btn dropdown-toggle" data-toggle="dropdown">
         <span class="caret"></span>
       </button>
-		  <ul class="dropdown-menu">
+		  <ul class="dropdown-menu config-groups-dropdown-menu">
         <!-- available config group menu links -->
         {{#each configGroup in configGroups}}
           <li>
@@ -45,6 +45,7 @@
     <div class="pull-right">
       {{view App.FilterComboCleanableView filterBinding="view.filter" columnsBinding="view.columns" popoverDescriptionBinding="view.propertyFilterPopover"}}
     </div>
+    <div class="clearfix"></div>
   </div>
 {{/if}}