Repository: ambari Updated Branches: refs/heads/trunk c825ed214 -> 8ee1cce1e
AMBARI-5135 Improve responsiveness of Host Selection popup. (atkach) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/8ee1cce1 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/8ee1cce1 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/8ee1cce1 Branch: refs/heads/trunk Commit: 8ee1cce1ec0117872fe1fb7b22810e8a0ecbcf89 Parents: c825ed2 Author: atkach <[email protected]> Authored: Wed Mar 19 12:55:45 2014 +0200 Committer: atkach <[email protected]> Committed: Wed Mar 19 12:55:45 2014 +0200 ---------------------------------------------------------------------- .../templates/common/configs/overrideWindow.hbs | 13 +++--- ambari-web/app/utils/hosts.js | 42 ++++++++++++++++---- .../app/views/common/quick_view_link_view.js | 3 +- 3 files changed, 42 insertions(+), 16 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/8ee1cce1/ambari-web/app/templates/common/configs/overrideWindow.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/overrideWindow.hbs b/ambari-web/app/templates/common/configs/overrideWindow.hbs index 1afbd5d..ab0de8a 100644 --- a/ambari-web/app/templates/common/configs/overrideWindow.hbs +++ b/ambari-web/app/templates/common/configs/overrideWindow.hbs @@ -38,9 +38,10 @@ <div class="span2" id="filter-dropdown-div"> <!-- Filter text box with drop-down --> <div class="input-append"> - {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton" placeholderBinding="view.filterTextPlaceholder" class="span2"}} + {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton" + placeholderBinding="view.filterTextPlaceholder" class="span2" disabledBinding="view.isDisabled"}} <div class="btn-group"> - <button class="btn dropdown-toggle" data-toggle="dropdown"> + <button class="btn dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}> <span class="caret"></span> </button> <ul class="dropdown-menu"> @@ -63,10 +64,10 @@ <div class="span2" id="component-dropdown-div"> <!-- Host-components drop-down --> <div class="btn-group"> - <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <button class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}> {{t common.components}} <span class="caret"></span> - </a> + </button> <ul class="dropdown-menu"> <!-- dropdown menu links --> {{#each component in view.filterComponents}} @@ -92,7 +93,7 @@ <thead> <tr class="success"> <th width="10%"> - {{view Ember.Checkbox checkedBinding="view.allHostsSelected"}} + {{view Ember.Checkbox checkedBinding="view.allHostsSelected" disabledBinding="view.isDisabled"}} </th> <th width="45%">{{t common.host}}</th> <th width="45%">{{view.filterColumn.name}}</th> @@ -101,7 +102,7 @@ </table> <div class="hosts-table-container"> <table class="table table-striped hosts-table"> - {{#each entry in view.availableHosts}} + {{#each entry in view.parentView.availableHosts}} <tr {{bindAttr class="entry.filtered::hidden"}}> <td width="10%"> {{view Ember.Checkbox checkedBinding="entry.selected"}} http://git-wip-us.apache.org/repos/asf/ambari/blob/8ee1cce1/ambari-web/app/utils/hosts.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/utils/hosts.js b/ambari-web/app/utils/hosts.js index 2a3d513..a25a326 100644 --- a/ambari-web/app/utils/hosts.js +++ b/ambari-web/app/utils/hosts.js @@ -14,6 +14,9 @@ * License for the specific language governing permissions and limitations under * the License. */ + +var lazyloading = require('utils/lazy_loading'); + module.exports = { /** @@ -33,7 +36,7 @@ module.exports = { * Example: {header: 'header', dialogMessage: 'message'} * is closed, cancelled or OK is pressed. */ - launchHostsSelectionDialog : function(availableHosts, selectedHosts, + launchHostsSelectionDialog : function(initialHosts, selectedHosts, selectAtleastOneHost, validComponents, callback, popupDescription) { // set default popup description var defaultPopupDescription = { @@ -48,9 +51,10 @@ module.exports = { header: popupDescription.header, dialogMessage: popupDescription.dialogMessage, warningMessage: null, + availableHosts: [], onPrimary: function () { this.set('warningMessage', null); - var arrayOfSelectedHosts = availableHosts.filterProperty('selected', true).mapProperty('host.id'); + var arrayOfSelectedHosts = this.get('availableHosts').filterProperty('selected', true).mapProperty('host.id'); if (selectAtleastOneHost && arrayOfSelectedHosts.length < 1) { this.set('warningMessage', Em.I18n.t('hosts.selectHostsDialog.message.warning')); return; @@ -59,6 +63,9 @@ module.exports = { console.debug('(new-selectedHosts)=', arrayOfSelectedHosts); this.hide(); }, + disablePrimary: function () { + return !this.get('isLoaded'); + }.property('isLoaded'), onSecondary: function () { callback(null); this.hide(); @@ -68,7 +75,6 @@ module.exports = { controllerBinding: 'App.router.mainServiceInfoConfigsController', filterText: '', filterTextPlaceholder: Em.I18n.t('hosts.selectHostsDialog.filter.placeHolder'), - availableHosts: availableHosts, filterColumn: null, filterColumns: Ember.A([ Ember.Object.create({id: 'ip', name: 'IP Address', selected: true}), @@ -82,9 +88,29 @@ module.exports = { showOnlySelectedHosts: false, filterComponents: validComponents, filterComponent: null, + isDisabled: function () { + return !this.get('parentView.isLoaded'); + }.property('parentView.isLoaded'), didInsertElement: function(){ var defaultFilterColumn = this.get('filterColumns').findProperty('selected'); this.set('filterColumn', defaultFilterColumn); + this.initContent(); + }, + initContent: function () { + initialHosts.setEach('filtered', true); + if (initialHosts.length > 100) { + lazyloading.run({ + destination: this.get('parentView.availableHosts'), + source: initialHosts, + context: this.get('parentView'), + initSize: 50, + chunkSize: 100, + delay: 50 + }); + } else { + this.set('parentView.availableHosts', initialHosts); + this.set('parentView.isLoaded', true); + } }, filterHosts: function () { var filterText = this.get('filterText'); @@ -92,7 +118,7 @@ module.exports = { var filterComponent = this.get('filterComponent'); var filterColumn = this.get('filterColumn'); - this.get('availableHosts').forEach(function (host) { + this.get('parentView.availableHosts').forEach(function (host) { var skip = showOnlySelectedHosts && !host.get('selected'); var value = host.get('host').get(filterColumn.id); var hostComponentNames = host.get('hostComponentNames'); @@ -111,12 +137,12 @@ module.exports = { } host.set('filtered', !skip); }, this); - }.observes('availableHosts', 'filterColumn', 'filterText', 'filterComponent', 'filterComponent.componentName', 'showOnlySelectedHosts'), + }.observes('parentView.availableHosts', 'filterColumn', 'filterText', 'filterComponent', 'filterComponent.componentName', 'showOnlySelectedHosts'), hostSelectMessage: function () { - var hosts = this.get('availableHosts'); + var hosts = this.get('parentView.availableHosts'); var selectedHosts = hosts.filterProperty('selected', true); return this.t('hosts.selectHostsDialog.selectedHostsLink').format(selectedHosts.get('length'), hosts.get('length')) - }.property('[email protected]'), + }.property('[email protected]'), selectFilterColumn: function (event) { if (event != null && event.context != null && event.context.id != null) { var filterColumn = this.get('filterColumn'); @@ -144,7 +170,7 @@ module.exports = { }, allHostsSelected: false, toggleSelectAllHosts: function (event) { - this.get('availableHosts').filterProperty('filtered').setEach('selected', this.get('allHostsSelected')); + this.get('parentView.availableHosts').filterProperty('filtered').setEach('selected', this.get('allHostsSelected')); }.observes('allHostsSelected'), toggleShowSelectedHosts: function () { var currentFilter = this.get('filterComponent'); http://git-wip-us.apache.org/repos/asf/ambari/blob/8ee1cce1/ambari-web/app/views/common/quick_view_link_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/quick_view_link_view.js b/ambari-web/app/views/common/quick_view_link_view.js index a39e804..af147fc 100644 --- a/ambari-web/app/views/common/quick_view_link_view.js +++ b/ambari-web/app/views/common/quick_view_link_view.js @@ -25,8 +25,7 @@ App.QuickViewLinks = Em.View.extend({ App.ajax.send({ name: 'config.tags.sync', sender: this, - success: 'loadTagsSuccess', - error: 'loadTagsError' + success: 'loadTagsSuccess' }); },
