AMBARI-5854 Background Operations popup hangs and makes UI non-responsive with requests containing 1000+ hosts. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/8c319639 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/8c319639 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/8c319639 Branch: refs/heads/trunk Commit: 8c3196390ea567cb10fdfc9a1a3bafbb157f9360 Parents: e3da23b Author: atkach <atk...@hortonworks.com> Authored: Thu May 22 13:44:12 2014 +0300 Committer: atkach <atk...@hortonworks.com> Committed: Thu May 22 13:44:12 2014 +0300 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 174 ++++++++----------- .../templates/common/host_progress_popup.hbs | 16 +- ambari-web/app/templates/common/modal_popup.hbs | 2 +- ambari-web/app/utils/host_progress_popup.js | 13 +- 4 files changed, 96 insertions(+), 109 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/8c319639/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index aac13a4..4222aee 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -351,6 +351,61 @@ footer { } } +.page-bar { + border: 1px solid #E4E4E4; + color: #7B7B7B; + text-align: right; + font-size: 12px; + label { + font-size: 12px; + } + div { + display: inline-block; + margin:0 10px; + } + .filtered-hosts-info, .selected-hosts-info { + text-align: left; + margin-top: 8px; + margin-left: 17px; + } + .items-on-page { + label { + display:inline; + } + select { + margin-bottom: 4px; + margin-top: 4px; + width:70px; + font-size: 12px; + height: 27px; + } + } + .paging_two_button { + a.paginate_disabled_next, a.paginate_disabled_previous { + color: gray; + &:hover { + color: gray; + text-decoration: none; + cursor: default; + } + } + + a.paginate_next, a.paginate_previous { + &:hover { + text-decoration: none; + cursor: pointer; + } + } + a { + padding:0 5px; + } + } +} + +.hidden-scroll { + overflow-y: hidden; +} + #version-mismatch-title { font-size: 18px; font-weight: bold; @@ -694,9 +749,6 @@ h1 { max-height: 440px; position: relative; } - .hidden-scroll { - overflow-y: hidden; - } .spinner-overlay { position: absolute; width: 100%; @@ -1754,6 +1806,8 @@ width:100%; } } #host-info, #service-info{ + overflow: auto; + max-height: 340px; .span2{ width:20%; float: left; @@ -1915,6 +1969,8 @@ width:100%; } #host-log { + max-height: 340px; + overflow: auto; .log-list-wrap { padding: 10px 10px 10px 20px; border-top: 1px solid #CCC; @@ -1961,7 +2017,10 @@ width:100%; } .task-detail-info { - + .task-detail-log-info { + max-height: 340px; + overflow: auto; + } .task-detail-log-clipboard { display: none; resize: none; @@ -3177,56 +3236,6 @@ table.graphs { background: none repeat scroll 0 0 #F8F8F8; } } - .page-bar { - border: 1px solid #E4E4E4; - color: #7B7B7B; - text-align: right; - font-size: 12px; - label { - font-size: 12px; - } - div { - display: inline-block; - margin:0 10px; - } - .filtered-hosts-info, .selected-hosts-info { - text-align: left; - margin-top: 8px; - margin-left: 17px; - } - .items-on-page { - label { - display:inline; - } - select { - margin-bottom: 4px; - margin-top: 4px; - width:70px; - font-size: 12px; - height: 27px; - } - } - .paging_two_button { - a.paginate_disabled_next, a.paginate_disabled_previous { - color: gray; - &:hover { - color: gray; - text-decoration: none; - cursor: default; - } - } - - a.paginate_next, a.paginate_previous { - &:hover { - text-decoration: none; - cursor: pointer; - } - } - a { - padding:0 5px; - } - } - } .status-dot-position { background-position: center; background-repeat: no-repeat; @@ -4491,58 +4500,6 @@ ul.filter { } } } - - .page-bar { - border: 1px solid #E4E4E4; - color: #7B7B7B; - text-align: right; - font-size: 12px; - label { - font-size: 12px; - } - div { - display: inline-block; - margin:0 10px; - } - .filtered-hosts-info, .selected-hosts-info { - text-align: left; - margin-top: 8px; - margin-left: 17px; - } - .items-on-page { - label { - display:inline; - } - select { - margin-bottom: 4px; - margin-top: 4px; - width:70px; - font-size: 12px; - height: 27px; - } - } - .paging_two_button { - a.paginate_disabled_next, a.paginate_disabled_previous { - color: gray; - &:hover { - color: gray; - text-decoration: none; - cursor: default; - } - } - - a.paginate_next, a.paginate_previous { - &:hover { - text-decoration: none; - cursor: pointer; - } - } - a { - padding:0 5px; - } - } - } - .status-dot-position { background-position: center; background-repeat: no-repeat; @@ -6134,6 +6091,11 @@ i.icon-asterisks { .mlc { margin-left: 0; } + +.mtm { + margin-top: @space-m; +} + #cleanerContainer { z-index: 2; position: absolute; http://git-wip-us.apache.org/repos/asf/ambari/blob/8c319639/ambari-web/app/templates/common/host_progress_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/host_progress_popup.hbs b/ambari-web/app/templates/common/host_progress_popup.hbs index 3e2d19d..c5e006c 100644 --- a/ambari-web/app/templates/common/host_progress_popup.hbs +++ b/ambari-web/app/templates/common/host_progress_popup.hbs @@ -106,7 +106,7 @@ {{#if view.isHostEmptyList}} <div class="log-list-wrap">{{t hostPopup.noHostsToShow}}</div> {{else}} - {{#each hostInfo in view.hosts}} + {{#each hostInfo in view.pageContent}} <div {{bindAttr class="hostInfo.isVisible::hidden :log-list-wrap"}}> <div {{action gotoTasks hostInfo}} class="task-list-line-cursor"> <div class="host-name-icon-wrap"> @@ -198,3 +198,17 @@ <div class="spinner"></div> {{/if}} </div> +{{#if view.pagination}} + <div class="page-bar pull-right no-borders mtm"> + <div class="items-on-page"> + <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label> + </div> + <div class="info">{{view.paginationInfo}}</div> + <div class="paging_two_button"> + {{view view.paginationFirst}} + {{view view.paginationLeft}} + {{view view.paginationRight}} + {{view view.paginationLast}} + </div> + </div> +{{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/8c319639/ambari-web/app/templates/common/modal_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/modal_popup.hbs b/ambari-web/app/templates/common/modal_popup.hbs index c2326d4..8ddc9c3 100644 --- a/ambari-web/app/templates/common/modal_popup.hbs +++ b/ambari-web/app/templates/common/modal_popup.hbs @@ -31,7 +31,7 @@ {{/if}} </h3> </div> - <div class="modal-body"> + <div {{bindAttr class=":modal-body view.isHideBodyScroll:hidden-scroll"}}> {{#if bodyClass}} {{view bodyClass}} {{else}} http://git-wip-us.apache.org/repos/asf/ambari/blob/8c319639/ambari-web/app/utils/host_progress_popup.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/utils/host_progress_popup.js b/ambari-web/app/utils/host_progress_popup.js index 64bc7c7..2176a4a 100644 --- a/ambari-web/app/utils/host_progress_popup.js +++ b/ambari-web/app/utils/host_progress_popup.js @@ -444,6 +444,8 @@ App.HostPopup = Em.Object.create({ }.property('count') }); self.set('isPopup', App.ModalPopup.show({ + + isHideBodyScroll: true, /** * no need to track is it loaded when popup contain only list of hosts * @type {bool} @@ -516,7 +518,7 @@ App.HostPopup = Em.Object.create({ }, secondary: null, - bodyClass: Em.View.extend({ + bodyClass: App.TableView.extend({ templateName: require('templates/common/host_progress_popup'), isLogWrapHidden: true, isTaskListHidden: true, @@ -534,6 +536,12 @@ App.HostPopup = Em.Object.create({ hosts: self.get('hosts'), services: self.get('servicesInfo'), + pagination: false, + displayLength: "25", + content: function() { + return this.get('hosts') || []; + }.property('hosts.length', 'isHostListHidden'), + currentHost: function () { return this.get('hosts') && this.get('hosts').findProperty('name', this.get('controller.currentHostName')); }.property('controller.currentHostName'), @@ -685,14 +693,17 @@ App.HostPopup = Em.Object.create({ * Depending on currently viewed tab, call setSelectCount function */ updateSelectView: function () { + var isPaginate; if (!this.get('isHostListHidden')) { //since lazy loading used for hosts, we need to get hosts info directly from controller, that always contains entire array of data this.get('controller').setSelectCount(this.get("controller.hosts"), this.get('categories')); + isPaginate = true; } else if (!this.get('isTaskListHidden')) { this.get('controller').setSelectCount(this.get("tasks"), this.get('categories')); } else if (!this.get('isServiceListHidden')) { this.get('controller').setSelectCount(this.get("services"), this.get('categories')); } + this.set('pagination', !!isPaginate); }.observes('tasks.@each.status', 'hosts.@each.status', 'isTaskListHidden', 'isHostListHidden', 'services.length', 'services.@each.status'), /**