Repository: ambari Updated Branches: refs/heads/trunk 7e7e26b4d -> b9ba67531
AMBARI-5983 Convert UI code of configs and config groups to lazy loading hosts and hosts component info. (Max Shepel via atkach ) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/b9ba6753 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/b9ba6753 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/b9ba6753 Branch: refs/heads/trunk Commit: b9ba6753106b407e483eee98dc33e57ad1abe1ce Parents: 7e7e26b Author: atkach <[email protected]> Authored: Mon Jun 2 13:53:20 2014 +0300 Committer: atkach <[email protected]> Committed: Mon Jun 2 13:53:20 2014 +0300 ---------------------------------------------------------------------- .../service/manage_config_groups_controller.js | 95 ++++++++++-- .../main/service/info/configs_save_popup.hbs | 38 ++--- .../manage_configuration_groups_popup.hbs | 148 ++++++++++--------- ambari-web/app/utils/ajax/ajax.js | 30 +++- 4 files changed, 206 insertions(+), 105 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/b9ba6753/ambari-web/app/controllers/main/service/manage_config_groups_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/service/manage_config_groups_controller.js b/ambari-web/app/controllers/main/service/manage_config_groups_controller.js index fa8bfd3..ea38041 100644 --- a/ambari-web/app/controllers/main/service/manage_config_groups_controller.js +++ b/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.'); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/b9ba6753/ambari-web/app/templates/main/service/info/configs_save_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/info/configs_save_popup.hbs b/ambari-web/app/templates/main/service/info/configs_save_popup.hbs index 7ff83a6..a5a1ae6 100644 --- a/ambari-web/app/templates/main/service/info/configs_save_popup.hbs +++ b/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}} http://git-wip-us.apache.org/repos/asf/ambari/blob/b9ba6753/ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs b/ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs index 9d20458..ec7eea4 100644 --- a/ambari-web/app/templates/main/service/manage_configuration_groups_popup.hbs +++ b/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> </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> <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> </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> <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> </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}} + + {{/if}} + </div> + </div> + </div> </div> - </div> - <div class="span8"> - <span> </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}} - - {{/if}} - </div> - </div> </div> - </div> -</div> + {{else}} + <div class="spinner"></div> + {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/b9ba6753/ambari-web/app/utils/ajax/ajax.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/utils/ajax/ajax.js b/ambari-web/app/utils/ajax/ajax.js index 0cf3937..6fb5eaf 100644 --- a/ambari-web/app/utils/ajax/ajax.js +++ b/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': '' } }; /**
