AMBARI-11296. Enhanced Config pages take a long time to load - need to improve load time (onechiporenko)

ambari-web/app/models/configs/objects/service_config_property.js

@@ -234,6 +234,46 @@ App.ServiceConfigProperty = Em.Object.extend({
     return ["masterHost", "slaveHosts", "masterHosts", "slaveHost", "radio button"].contains(this.get('displayType'));
   }.property('displayType'),
 
+  /**
+   * Used in <code>templates/common/configs/service_config_category.hbs</code>
+   * @type {boolean}
+   */
+  undoAvailable: function () {
+    return this.get('cantBeUndone') && this.get('isNotDefaultValue');
+  }.property('cantBeUndone', 'isNotDefaultValue'),
+
+  /**
+   * Used in <code>templates/common/configs/service_config_category.hbs</code>
+   * @type {boolean}
+   */
+  removeAvailable: function () {
+    return this.get('isRemovable') && !this.get('isComparison');
+  }.property('isComparison', 'isRemovable'),
+
+  /**
+   * Used in <code>templates/common/configs/service_config_category.hbs</code>
+   * @type {boolean}
+   */
+  switchGroupAvailable: function () {
+    return !this.get('isEditable') && this.get('group');
+  }.property('isEditable', 'group'),
+
+  /**
+   * Used in <code>templates/common/configs/service_config_category.hbs</code>
+   * @type {boolean}
+   */
+  setRecommendedAvailable: function () {
+    return this.get('isEditable') && this.get('recommendedValueExists');
+  }.property('isEditable', 'recommendedValueExists'),
+
+  /**
+   * Used in <code>templates/common/configs/service_config_category.hbs</code>
+   * @type {boolean}
+   */
+  overrideAvailable: function () {
+    return !this.get('isComparison') && this.get('isPropertyOverridable');
+  }.property('isPropertyOverridable', 'isComparison'),
+
   isValid: function () {
     return this.get('errorMessage') === '';
   }.property('errorMessage'),

ambari-web/app/models/configs/tab.js

@@ -28,6 +28,7 @@ App.Tab = DS.Model.extend({
   serviceName: DS.attr('string'),
   sections: DS.hasMany('App.Section'),
   isAdvancedHidden: DS.attr('boolean', {defaultValue: false}),
+  isRendered: DS.attr('boolean', {defaultValue: false}),
 
   /**
    * Number of the errors in all sections in the current tab

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

@@ -116,15 +116,19 @@
       {{#each tab in view.tabs}}
         <div {{bindAttr class=":tab-pane tab.isActive:active tab.id"}}>
           {{#if tab.isAdvanced}}
-            {{#each category in selectedService.configCategories}}
-              <div class="accordion">
-                {{#if category.isCustomView}}
-                  {{view category.customView categoryBinding="category" serviceBinding="selectedService" canEditBinding="view.canEdit" serviceConfigsBinding="selectedService.configs"}}
-                {{else}}
-                  {{view App.ServiceConfigsByCategoryView categoryBinding="category" canEditBinding="view.canEdit" serviceBinding="selectedService" serviceConfigsBinding="selectedService.configs" supportsHostOverridesBinding="view.supportsHostOverrides"}}
-                {{/if}}
-              </div>
-            {{/each}}
+            {{#if tab.isRendered}}
+              {{#each category in selectedService.configCategories}}
+                <div class="accordion">
+                  {{#if category.isCustomView}}
+                    {{view category.customView categoryBinding="category" serviceBinding="selectedService" canEditBinding="view.canEdit" serviceConfigsBinding="selectedService.configs"}}
+                  {{else}}
+                    {{view App.ServiceConfigsByCategoryView categoryBinding="category" canEditBinding="view.canEdit" serviceBinding="selectedService" serviceConfigsBinding="selectedService.configs" supportsHostOverridesBinding="view.supportsHostOverrides"}}
+                  {{/if}}
+                </div>
+              {{/each}}
+            {{else}}
+              <div class="spinner"></div>
+            {{/if}}
           {{else}}
               {{! Render Enhanced Config Section }}
               {{view App.ServiceConfigLayoutTabView contentBinding="tab" canEditBinding="view.canEdit" }}

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

@@ -29,26 +29,25 @@
 <div class="accordion-body collapse in" {{bindAttr style="view.isCategoryBodyVisible"}}>
   <div class="accordion-inner service-config-section">
     <form class="form-horizontal" autocomplete="off">
-
       {{#each view.categoryConfigs}}
-        {{#unless widget}} {{! configs with widgets should be shown only on the EnhancedConfigs tabs  }}
+        {{#unless widget}} {{! configs with widgets should be shown only on the EnhancedConfigs tabs }}
           <div {{bindAttr class=":entry-row isHiddenByFilter:hide isOverridden:overridden-property hasCompareDiffs:overridden-property"}}>
             {{#if showLabel}}
               <span {{bindAttr class="errorMessage:error: :control-group :control-label-span"}}>
-              <label class="control-label">
-                {{formatWordBreak displayName}}
-                {{#if isSecureConfig}}
-                  <a href="javascript:void(null);"><i class="icon-lock" rel="tooltip" data-toggle="tooltip"
-                                                      title="security knob"></i></a>
-                {{/if}}
-                {{#if view.supportsHostOverrides}}
-                  {{#if isRestartRequired}}
-                    <i class="icon-refresh restart-required-property"
-                       rel="tooltip" {{bindAttr title="restartRequiredMessage"}}></i>
+                <label class="control-label">
+                  {{formatWordBreak displayName}}
+                  {{#if isSecureConfig}}
+                    <a href="javascript:void(null);"><i class="icon-lock" rel="tooltip" data-toggle="tooltip"
+                                                        title="security knob"></i></a>
                   {{/if}}
-                {{/if}}
-              </label>
-            </span>
+                  {{#if view.supportsHostOverrides}}
+                    {{#if isRestartRequired}}
+                      <i class="icon-refresh restart-required-property"
+                         rel="tooltip" {{bindAttr title="restartRequiredMessage"}}></i>
+                    {{/if}}
+                  {{/if}}
+                </label>
+              </span>
             {{/if}}
             <div {{bindAttr class="showLabel:controls"}}>
               {{! Here serviceConfigBinding should ideally be serviceConfigPropertyBinding }}
@@ -75,64 +74,48 @@
                   </a>
                 {{/if}}
                 {{#if view.canEdit}}
-                  {{#if isPropertyOverridable}}
-                    {{#if view.supportsHostOverrides}}
-                      {{#isAccessible ADMIN}}
-                        {{#unless this.isComparison}}
-                          <a class="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}}
-                      {{/isAccessible}}
-                    {{/if}}
-                  {{/if}}
-                  {{#unless cantBeUndone}}
-                    {{#if isNotDefaultValue}}
-                      <a class="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 view.supportsHostOverrides}}
                     {{#isAccessible ADMIN}}
-                      {{#unless this.isComparison}}
-                        <a class="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}}
-                    {{/isAccessible}}
-                  {{/if}}
-                  {{#unless isEditable}}
-                    {{#if group}}
-                      <a rel='SwitchGroupTooltip' {{bindAttr data-original-title="this.group.switchGroupTextShort"}}
-                         class="action" {{action selectConfigGroup group target="controller"}}>
-                        {{group.switchGroupTextShort}}
-                      </a>
-                    {{/if}}
-                  {{/unless}}
-                  {{#if isEditable}}
-                    {{#if recommendedValueExists}}
-                      <a class="btn-small" href="#" data-toggle="tooltip"
-                        {{action "setRecommendedValue" this target="view"}}
-                        {{translateAttr data-original-title="services.service.config.setRecommendedValue"}}>
-                        <i class="icon-repeat"></i>
+                      <a href="#" data-toggle="tooltip"
+                        {{action "createOverrideProperty" this target="view"}}
+                        {{translateAttr data-original-title="common.override"}}
+                        {{bindAttr class="overrideAvailable::hide :btn-small"}}>
+                        <i class="icon-plus-sign"></i>
                       </a>
-                    {{/if}}
+                    {{/isAccessible}}
                   {{/if}}
+                  <a href="#" data-toggle="tooltip"
+                    {{action "doRestoreDefaultValue" this target="view"}}
+                    {{translateAttr data-original-title="common.undo"}}
+                    {{bindAttr class="undoAvailable::hide :btn-small"}}>
+                    <i class="icon-undo"></i>
+                  </a>
+                  {{#isAccessible ADMIN}}
+                    <a href="#" data-toggle="tooltip"
+                      {{action "removeProperty" this target="view"}}
+                      {{translateAttr data-original-title="common.remove"}}
+                      {{bindAttr class="removeAvailable::hide :btn-small"}}>
+                      <i class="icon-minus-sign"></i>
+                    </a>
+                  {{/isAccessible}}
+                  <a rel='SwitchGroupTooltip' {{bindAttr data-original-title="this.group.switchGroupTextShort" class="switchGroupAvailable:show:hide :action"}}
+                    {{action selectConfigGroup group target="controller"}}>
+                    {{group.switchGroupTextShort}}
+                  </a>
+                  <a href="#" data-toggle="tooltip"
+                    {{action "setRecommendedValue" this target="view"}}
+                    {{translateAttr data-original-title="services.service.config.setRecommendedValue"}}
+                    {{bindAttr class="setRecommendedAvailable::hide :btn-small"}}>
+                    <i class="icon-repeat"></i>
+                  </a>
                 {{/if}}
                 <span class="help-inline">{{errorMessage}}</span>
                 <span class="help-inline">{{warnMessage}}</span>
               </div>
               {{#if this.isOverridden}}
                 {{view App.ServiceConfigView.SCPOverriddenRowsView
-                  serviceConfigPropertyBinding="this"
-                  isDefaultGroupSelectedBinding="controller.selectedConfigGroup.isDefault"
+                serviceConfigPropertyBinding="this"
+                isDefaultGroupSelectedBinding="controller.selectedConfigGroup.isDefault"
                 }}
               {{/if}}
               {{#if this.isComparison}}
@@ -149,7 +132,7 @@
       {{! For Advanced, Advanced Core Site, Advanced HDFS Site sections, show the 'Add Property' link.}}
       {{#isAccessible ADMIN}}
         {{#if view.canEdit}}
-          {{#if view.category.customCanAddProperty }}
+          {{#if view.category.customCanAddProperty}}
             <div>
               <a href="#" {{action "showAddPropertyWindow" this target="view" }} >{{t installer.step7.config.addProperty}}
                 ...</a>

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

@@ -114,6 +114,14 @@ App.ServiceConfigView = Em.View.extend({
     this.checkCanEdit();
   },
 
+  willDestroyElement: function() {
+    this.get('tabs').setEach('isActive', false);
+    var advancedTab = this.get('tabs').findProperty('isAdvanced', true);
+    if (advancedTab) {
+      advancedTab.set('isRendered', false);
+    }
+  },
+
   /**
    * Check if we should show Custom Property category
    */
@@ -129,10 +137,7 @@ App.ServiceConfigView = Em.View.extend({
       });
     }
 
-  }.observes(
-      'App.router.mainServiceInfoConfigsController.selectedConfigGroup.name',
-      'App.router.wizardStep7Controller.selectedConfigGroup.name'
-  ),
+  }.observes('controller.selectedConfigGroup.name'),
 
   setActiveTab: function (event) {
     if (event.context.get('isHiddenByFilter')) return false;
@@ -141,6 +146,7 @@ App.ServiceConfigView = Em.View.extend({
     });
     var currentTab = event.context;
     currentTab.set('isActive', true);
+    currentTab.set('isRendered', true);
   },
 
   /**

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

@@ -313,11 +313,20 @@ App.ServiceConfigsByCategoryView = Em.View.extend(App.UserPref, App.ConfigOverri
    */
   onToggleBlock: function () {
     this.$('.accordion-body').toggle('blind', 500);
-    this.set('category.isCollapsed', !this.get('category.isCollapsed'));
+    this.toggleProperty('category.isCollapsed');
+  },
+
+  /**
+   * Determines should accordion be collapsed by default
+   * @returns {boolean}
+   * @method calcIsCollapsed
+   */
+  calcIsCollapsed: function() {
+    return Em.isNone(this.get('category.isCollapsed')) ? (this.get('category.name').indexOf('Advanced') != -1 || this.get('category.name').indexOf('CapacityScheduler') != -1 || this.get('category.name').indexOf('Custom') != -1) : this.get('category.isCollapsed');
   },
 
   didInsertElement: function () {
-    var isCollapsed = this.get('category.isCollapsed') == undefined ? (this.get('category.name').indexOf('Advanced') != -1 || this.get('category.name').indexOf('CapacityScheduler') != -1 || this.get('category.name').indexOf('Custom') != -1) : this.get('category.isCollapsed');
+    var isCollapsed = this.calcIsCollapsed();
     var self = this;
     this.set('category.isCollapsed', isCollapsed);
     if (isCollapsed) {
@@ -345,11 +354,6 @@ App.ServiceConfigsByCategoryView = Em.View.extend(App.UserPref, App.ConfigOverri
     }
   },
 
-  isOneOfAdvancedSections: function () {
-    var category = this.get('category');
-    return category.indexOf("Advanced") != -1;
-  },
-
   /**
    * @returns {string}
    */

ambari-web/test/mappers/configs/themes_mapper_test.js

@@ -161,7 +161,8 @@ describe('App.themeMapper', function () {
         rows: "1",
         is_advanced: false,
         service_name: 'HDFS',
-        "is_advanced_hidden": false
+        is_advanced_hidden: false,
+        is_rendered: false
       });
 
       //checking section
@@ -220,7 +221,8 @@ describe('App.themeMapper', function () {
         "rows": 1,
         "is_advanced": true,
         "service_name": "HDFS",
-        "is_advanced_hidden": false
+        "is_advanced_hidden": false,
+        is_rendered: false
       });
     });
   });

ambari-web/test/views/common/configs/service_config_container_view_test.js

@@ -42,30 +42,30 @@ describe('App.ServiceConfigContainerView', function () {
   describe('#selectedServiceObserver', function () {
 
     it('should add a child view', function () {
-      view.set('controller', {
+      view.set('controller', Em.Object.create({
         selectedService: {
           configCategories: []
         }
-      });
+      }));
       expect(view.get('childViews')).to.have.length(1);
     });
 
     it('should set controller for the view', function () {
-      view.set('controller', {
+      view.set('controller', Em.Object.create({
         name: 'controller',
         selectedService: {
           configCategories: []
         }
-      });
+      }));
       expect(view.get('childViews.firstObject.controller.name')).to.equal('controller');
     });
 
     it('should add config categories', function () {
-      view.set('controller', {
+      view.set('controller', Em.Object.create({
         selectedService: {
           configCategories: [Em.Object.create(), Em.Object.create()]
         }
-      });
+      }));
       expect(view.get('childViews.firstObject.serviceConfigsByCategoryView.childViews')).to.have.length(2);
     });