AMBARI-5983 Convert UI code of configs and config groups to lazy loading hosts and hosts component info. (Max Shepel via atkach )

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

@@ -20,6 +20,7 @@
 var App = require('app');
 var hostsManagement = require('utils/hosts');
 var componentHelper = require('utils/component');
+var lazyLoading = require('utils/lazy_loading');
 
 App.ManageConfigGroupsController = Em.Controller.extend({
   name: 'manageConfigGroupsController',
@@ -76,7 +77,6 @@ App.ManageConfigGroupsController = Em.Controller.extend({
 
   onLoadConfigGroupsSuccess: function (data) {
     var usedHosts = [];
-    var unusedHosts = [];
     var serviceName = this.get('serviceName');
     var defaultConfigGroup = App.ConfigGroup.create({
       name: App.Service.DisplayNames[serviceName] + " Default",
@@ -100,12 +100,27 @@ App.ManageConfigGroupsController = Em.Controller.extend({
           isDefault: false,
           parentConfigGroup: defaultConfigGroup,
           service: App.Service.find().findProperty('serviceName', configGroup.tag),
-          hosts: hostNames,
+          hosts: [],
           configSiteTags: [],
           properties: [],
           apiResponse: configGroup
         });
-        usedHosts = usedHosts.concat(newConfigGroup.get('hosts'));
+        lazyLoading.run({
+          initSize: 20,
+          chunkSize: 50,
+          delay: 50,
+          destination: newConfigGroup.get('hosts'),
+          source: hostNames,
+          context: Em.Object.create()
+        });
+        lazyLoading.run({
+          initSize: 20,
+          chunkSize: 50,
+          delay: 50,
+          destination: usedHosts,
+          source: newConfigGroup.get('hosts'),
+          context: Em.Object.create()
+        });
         configGroups.push(newConfigGroup);
         var newConfigGroupSiteTags = newConfigGroup.get('configSiteTags');
         configGroup.desired_configs.forEach(function (config) {
@@ -119,21 +134,71 @@ App.ManageConfigGroupsController = Em.Controller.extend({
           groupToTypeToTagMap[configGroup.group_name][config.type] = config.tag;
         });
       }, this);
-      unusedHosts = App.Host.find().mapProperty('hostName');
-      usedHosts.uniq().forEach(function (host) {
-        unusedHosts = unusedHosts.without(host);
-      }, this);
-      defaultConfigGroup.set('childConfigGroups', configGroups);
-      defaultConfigGroup.set('hosts', unusedHosts);
-      var allGroups = [defaultConfigGroup].concat(configGroups);
-      this.set('configGroups', allGroups);
-      var originalGroups = this.copyConfigGroups(allGroups);
-      this.set('originalConfigGroups', originalGroups);
-      this.loadProperties(groupToTypeToTagMap);
-      this.set('isLoaded', true);
+      var requestName = (this.get('content.controllerName') == 'installerController') ? 'hosts.all.install' : 'hosts.all';
+      App.ajax.send({
+        name: requestName,
+        sender: this,
+        data: {
+          clusterName: App.get('clusterName'),
+          usedHosts: usedHosts,
+          defaultConfigGroup: defaultConfigGroup,
+          configGroups: configGroups,
+          groupToTypeToTagMap: groupToTypeToTagMap
+        },
+        success: 'unusedHostsSuccessCallBack',
+        error: ''
+      });
     }
   },
 
+  unusedHostsSuccessCallBack: function (response, request, data) {
+    var unusedHosts = response.items.mapProperty('Hosts.host_name');
+    data.usedHosts.uniq().forEach(function (host) {
+      unusedHosts = unusedHosts.without(host);
+    }, this);
+    data.defaultConfigGroup.set('hosts', []);
+    lazyLoading.run({
+      initSize: 20,
+      chunkSize: 50,
+      delay: 50,
+      destination: data.defaultConfigGroup.get('hosts'),
+      source: unusedHosts,
+      context: Em.Object.create()
+    });
+    data.defaultConfigGroup.set('childConfigGroups', data.configGroups);
+    data.defaultConfigGroup.set('hosts', unusedHosts);
+    var allGroups = [data.defaultConfigGroup];
+    lazyLoading.run({
+      initSize: 20,
+      chunkSize: 50,
+      delay: 50,
+      destination: allGroups,
+      source: data.configGroups,
+      context: Em.Object.create()
+    });
+    this.set('configGroups', []);
+    lazyLoading.run({
+      initSize: 20,
+      chunkSize: 50,
+      delay: 50,
+      destination: this.get('configGroups'),
+      source: allGroups,
+      context: Em.Object.create()
+    });
+    var originalGroups = this.copyConfigGroups(allGroups);
+    this.set('originalConfigGroups', []);
+    lazyLoading.run({
+      initSize: 20,
+      chunkSize: 50,
+      delay: 50,
+      destination: this.get('originalConfigGroups'),
+      source: originalGroups,
+      context: Em.Object.create()
+    });
+    this.loadProperties(data.groupToTypeToTagMap);
+    this.set('isLoaded', true);
+  },
+
   onLoadConfigGroupsError: function () {
     console.error('Unable to load config groups for service.');
   },

ambari-web/app/templates/main/service/info/configs_save_popup.hbs

@@ -28,21 +28,25 @@
     </ul>
   </div>
 {{/unless}}
-{{#if view.runningHosts}}
-  <i class="icon-warning-sign"></i>  {{view.runningHostsMessage}}
-  <table class="table-striped running-host-components-table">
-    <tr><th>{{t common.host}}</th><th>{{t common.components}}</th></tr>
-    {{#each host in view.runningHosts}}
-    <tr><td>{{host.name}}</td><td>{{host.components}}</td></tr>
-    {{/each}}
-  </table>
-{{/if}}
-{{#if view.unknownHosts}}
-  <i class="icon-warning-sign"></i>  {{view.unknownHostsMessage}}
-  <table class="table-striped running-host-components-table">
-    <tr><th>{{t common.host}}</th><th>{{t common.components}}</th></tr>
-    {{#each host in view.unknownHosts}}
-      <tr><td>{{host.name}}</td><td>{{host.components}}</td></tr>
-    {{/each}}
-  </table>
+{{#if view.isLoaded}}
+  {{#if view.runningHosts}}
+      <i class="icon-warning-sign"></i>  {{view.runningHostsMessage}}
+      <table class="table-striped running-host-components-table">
+          <tr><th>{{t common.host}}</th><th>{{t common.components}}</th></tr>
+        {{#each host in view.runningHosts}}
+            <tr><td>{{host.name}}</td><td>{{host.components}}</td></tr>
+        {{/each}}
+      </table>
+  {{/if}}
+  {{#if view.unknownHosts}}
+      <i class="icon-warning-sign"></i>  {{view.unknownHostsMessage}}
+      <table class="table-striped running-host-components-table">
+          <tr><th>{{t common.host}}</th><th>{{t common.components}}</th></tr>
+        {{#each host in view.unknownHosts}}
+            <tr><td>{{host.name}}</td><td>{{host.components}}</td></tr>
+        {{/each}}
+      </table>
+  {{/if}}
+{{else}}
+  <div class="spinner"></div>
 {{/if}}

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

@@ -16,77 +16,81 @@
 * limitations under the License.
 }}
 <div class="alert alert-info margin-bottom-5">{{t services.service.config_groups_popup.notice serviceNameBinding="view.displayName"}}</div>
-<div class="row-fluid  manage-configuration-group-content">
-  <div class="span12">
-    <div class="row-fluid">
-      <div class="span4">
-        <span>&nbsp;</span>
-        {{view Em.Select
-          contentBinding="configGroups"
-          optionLabelPath="content.displayNameHosts"
-          selectionBinding="view.selectedConfigGroup"
-          multiple="multiple"
-          class="group-select"
-        }}
-        <div class="btn-toolbar pull-right">
-          <button rel="button-info" class="btn" {{bindAttr data-original-title="view.addButtonTooltip"}}
-            {{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 dropdown-toggle" data-toggle="dropdown">
-              <i class="icon-cog"></i>&nbsp;<span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">
-              <li {{bindAttr class="view.isRenameButtonDisabled:disabled"}}>
-                <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.renameButtonTooltip"}} {{action renameConfigGroup target="controller"}}>{{t services.service.config_groups_popup.rename}}</a>
-              </li>
-              <li {{bindAttr class="view.isDuplicateButtonDisabled:disabled"}}>
-                <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.duplicateButtonTooltip"}} {{action duplicateConfigGroup target="controller"}}>{{t services.service.config_groups_popup.duplicate}}</a>
-              </li>
-            </ul>
-          </div>
+  {{#if controller.isLoaded}}
+    <div class="row-fluid  manage-configuration-group-content">
+        <div class="span12">
+            <div class="row-fluid">
+                <div class="span4">
+                    <span>&nbsp;</span>
+                  {{view Em.Select
+                  contentBinding="configGroups"
+                  optionLabelPath="content.displayNameHosts"
+                  selectionBinding="view.selectedConfigGroup"
+                  multiple="multiple"
+                  class="group-select"
+                  }}
+                    <div class="btn-toolbar pull-right">
+                        <button rel="button-info" class="btn" {{bindAttr data-original-title="view.addButtonTooltip"}}
+                          {{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 dropdown-toggle" data-toggle="dropdown">
+                                <i class="icon-cog"></i>&nbsp;<span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                <li {{bindAttr class="view.isRenameButtonDisabled:disabled"}}>
+                                    <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.renameButtonTooltip"}} {{action renameConfigGroup target="controller"}}>{{t services.service.config_groups_popup.rename}}</a>
+                                </li>
+                                <li {{bindAttr class="view.isDuplicateButtonDisabled:disabled"}}>
+                                    <a href="" rel="button-info-dropdown" {{bindAttr data-original-title="view.duplicateButtonTooltip"}} {{action duplicateConfigGroup target="controller"}}>{{t services.service.config_groups_popup.duplicate}}</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="span8">
+                    <span>&nbsp;</span>
+                    <div class="row-fluid">
+                        <div class="span12 pull-right">
+                          {{view Em.Select
+                          contentBinding="selectedConfigGroup.hosts"
+                          multiple="multiple"
+                          class="group-select"
+                          selectionBinding="selectedHosts"
+                          }}
+                        </div>
+                        <div class="button-group pull-right">
+                            <a rel="button-info" class="btn" {{bindAttr data-original-title="view.addHostTooltip" class="selectedConfigGroup.isAddHostsDisabled:disabled"}} {{action addHosts target="controller"}} ><i class="icon-plus"></i></a>
+                            <a rel="button-info" class="btn" {{bindAttr data-original-title="view.removeHostTooltip" class="isDeleteHostsDisabled:disabled"}} {{action deleteHosts target="controller"}} ><i class="icon-minus"></i></a>
+                        </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"}}
+                              {{bindAttr data-original-title="selectedConfigGroup.propertiesList" }}>{{selectedConfigGroup.properties.length}} {{t common.properties}}</a>
+                        </div>
+                    </div>
+                    <div class="clearfix"></div>
+                    <div class="row-fluid">
+                        <div class="span2"><span class="prrl">{{t common.description}}</span></div>
+                        <div class="span10 group-description">{{selectedConfigGroup.description}}</div>
+                    </div>
+                </div>
+                <div class="clearfix"></div>
+                <div class="row-fluid">
+                    <div class="span12 text-error" id="manage-config-group-error-div">
+                      {{#if errorMessage}}
+                        {{errorMessage}}
+                      {{else}}
+                          &nbsp;
+                      {{/if}}
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="span8">
-        <span>&nbsp;</span>
-        <div class="row-fluid">
-          <div class="span12 pull-right">
-            {{view Em.Select
-              contentBinding="selectedConfigGroup.hosts"
-              multiple="multiple"
-              class="group-select"
-              selectionBinding="selectedHosts"
-            }}
-          </div>
-          <div class="button-group pull-right">
-            <a rel="button-info" class="btn" {{bindAttr data-original-title="view.addHostTooltip" class="selectedConfigGroup.isAddHostsDisabled:disabled"}} {{action addHosts target="controller"}} ><i class="icon-plus"></i></a>
-            <a rel="button-info" class="btn" {{bindAttr data-original-title="view.removeHostTooltip" class="isDeleteHostsDisabled:disabled"}} {{action deleteHosts target="controller"}} ><i class="icon-minus"></i></a>
-          </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"}}
-              {{bindAttr data-original-title="selectedConfigGroup.propertiesList" }}>{{selectedConfigGroup.properties.length}} {{t common.properties}}</a>
-          </div>
-        </div>
-        <div class="clearfix"></div>
-        <div class="row-fluid">
-          <div class="span2"><span class="prrl">{{t common.description}}</span></div>
-          <div class="span10 group-description">{{selectedConfigGroup.description}}</div>
-        </div>
-      </div>
-      <div class="clearfix"></div>
-      <div class="row-fluid">
-        <div class="span12 text-error" id="manage-config-group-error-div">
-          {{#if errorMessage}}
-            {{errorMessage}}
-          {{else}}
-              &nbsp;
-          {{/if}}
-        </div>
-      </div>
     </div>
-  </div>
-</div>
+  {{else}}
+    <div class="spinner"></div>
+  {{/if}}

ambari-web/app/utils/ajax/ajax.js

@@ -345,7 +345,7 @@ var urls = {
     'mock': '/data/clusters/cluster.json'
   },
   'config.tags_and_groups': {
-    'real': '/clusters/{clusterName}?fields=Clusters/desired_configs,config_groups/*',
+    'real': '/clusters/{clusterName}?fields=Clusters/desired_configs,config_groups/*{urlParams}',
     'mock': '/data/clusters/tags_and_groups.json'
   },
   'config.tags.sync': {
@@ -2098,6 +2098,34 @@ var urls = {
   'host.status.counters': {
     'real': '/clusters/{clusterName}?fields=alerts,Clusters/health_report,Clusters/total_hosts&minimal_response=true',
     'mock': '/data/hosts/HDP2/host_status_counters.json'
+  },
+  'components.filter_by_status': {
+  'real': '/clusters/{clusterName}/components/fields=host_components/HostRoles/host_name,ServiceComponentInfo/component_name,ServiceComponentInfo/started_count{urlParams}&minimal_response=true',
+    'mock': ''
+  },
+  'hosts.all.install': {
+    'real': '/hosts?minimal_response=true',
+    'mock': ''
+  },
+  'hosts.all': {
+    'real': '/clusters/{clusterName}/hosts?minimal_response=true',
+    'mock': ''
+  },
+  'hosts.with_public_host_names': {
+    'real': '/clusters/{clusterName}/hosts?fields=Hosts/public_host_name&minimal_response=true',
+    'mock': ''
+  },
+  'hosts.confirmed': {
+    'real': '/clusters/{clusterName}/hosts?fields=Hosts/cpu_count,Hosts/disk_info,Hosts/total_mem&minimal_response=true',
+    'mock': ''
+  },
+  'host_components.all': {
+    'real': '/clusters/{clusterName}/host_components?fields=HostRoles/host_name&minimal_response=true',
+    'mock': ''
+  },
+  'host_components.with_services_names': {
+    'real': '/clusters/{clusterName}/host_components?fields=component/ServiceComponentInfo/service_name,HostRoles/host_name&minimal_response=true',
+    'mock': ''
   }
 };
 /**