Repository: ambari Updated Branches: refs/heads/trunk 7f60c1c40 -> 3bc68f875
AMBARI-5262 Implement pagination on "Assign Slaves and Clients" step. (atkach) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/3bc68f87 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/3bc68f87 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/3bc68f87 Branch: refs/heads/trunk Commit: 3bc68f875f8e2b06a092a63271873f6c61a3b2a4 Parents: 7f60c1c Author: atkach <atk...@hortonworks.com> Authored: Fri Mar 28 16:46:20 2014 +0200 Committer: atkach <atk...@hortonworks.com> Committed: Fri Mar 28 16:46:20 2014 +0200 ---------------------------------------------------------------------- .../app/controllers/wizard/step6_controller.js | 126 ++++++++----------- ambari-web/app/styles/application.less | 12 +- ambari-web/app/templates/wizard/step3.hbs | 3 +- ambari-web/app/templates/wizard/step6.hbs | 27 +++- ambari-web/app/views/wizard/step6_view.js | 51 ++++---- 5 files changed, 110 insertions(+), 109 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/3bc68f87/ambari-web/app/controllers/wizard/step6_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/wizard/step6_controller.js b/ambari-web/app/controllers/wizard/step6_controller.js index c35cce7..5d79303 100644 --- a/ambari-web/app/controllers/wizard/step6_controller.js +++ b/ambari-web/app/controllers/wizard/step6_controller.js @@ -18,7 +18,6 @@ var App = require('app'); var db = require('utils/db'); -var lazyloading = require('utils/lazy_loading'); /** * By Step 6, we have the following information stored in App.db and set on this @@ -48,10 +47,6 @@ App.WizardStep6Controller = Em.Controller.extend({ headers: [], /** - * number of checkboxes for detecting time point when they are completely inserted into the view - */ - checkboxesCount: 0, - /** * true - assign ZK, HB * false - slaves and clients */ @@ -72,20 +67,30 @@ App.WizardStep6Controller = Em.Controller.extend({ return this.get('content.controllerName') === 'addServiceController'; }.property('content.controllerName'), + /** + * verify condition that at least one checkbox of each component was checked + */ clearError: function () { var self = this; var isError = false; - var err = true; + var err = false; var hosts = this.get('hosts'); var headers = this.get('headers'); + var headersMap = {}; + headers.forEach(function (header) { - var all_false = true; - hosts.forEach(function (host) { - var checkboxes = host.get('checkboxes'); - all_false &= !checkboxes.findProperty('title', header.get('label')).checked; + headersMap[header.name] = true; + }); + hosts.forEach(function (host) { + host.get('checkboxes').forEach(function (checkbox) { + if (headersMap[checkbox.get('component')]) { + headersMap[checkbox.get('component')] = !checkbox.get('checked'); + } }); - err &= all_false; }); + for (var i in headersMap) { + err |= headersMap[i]; + } if (!err) { this.set('errorMessage', ''); @@ -110,15 +115,6 @@ App.WizardStep6Controller = Em.Controller.extend({ } }, - /** - * Check whether current host is currently selected as master - * @param hostName - * @return {Boolean} - */ - hasMasterComponents: function (hostName) { - return this.get('content.masterComponentHosts').someProperty('hostName', hostName); - }, - clearStep: function () { this.set('hosts', []); this.set('headers', []); @@ -178,10 +174,10 @@ App.WizardStep6Controller = Em.Controller.extend({ var allTrue = true; var allFalse = true; hosts.forEach(function (host) { - host.get('checkboxes').filterProperty('isInstalled', false).forEach(function (cb) { - if (cb.get('component') === component) { - allTrue &= cb.get('checked'); - allFalse &= !cb.get('checked'); + host.get('checkboxes').forEach(function (checkbox) { + if (checkbox.get('component') === component && !checkbox.get('isInstalled')) { + allTrue &= checkbox.get('checked'); + allFalse &= !checkbox.get('checked'); } }); }); @@ -271,7 +267,6 @@ App.WizardStep6Controller = Em.Controller.extend({ App.router.send('next'); } } - this.get('hosts').sort(function(a, b){return a.isMaster < b.isMaster;}); }, /** @@ -294,74 +289,64 @@ App.WizardStep6Controller = Em.Controller.extend({ */ render: function () { var hostsObj = []; - var allHosts = this.getHostNames(); + var masterHosts = []; + var headers = this.get('headers'); + var masterHostNames = this.get('content.masterComponentHosts').mapProperty('hostName').uniq(); - var self = this; - allHosts.forEach(function (_hostName) { + this.getHostNames().forEach(function (_hostName) { + var hasMaster = masterHostNames.contains(_hostName); var obj = Em.Object.create({ hostName: _hostName, - isMaster: false, + hasMaster: hasMaster, checkboxes: [] }); - self.get('headers').forEach(function (header) { + headers.forEach(function (header) { obj.checkboxes.pushObject(Em.Object.create({ component: header.name, title: header.label, checked: false, - isInstalled: false, - id: header.name + "_DELIMITER_" + _hostName + isInstalled: false })); }); - hostsObj.push(obj); + if (hasMaster) { + masterHosts.pushObject(obj) + } else { + hostsObj.pushObject(obj); + } }); - this.set('checkboxesCount', (allHosts.length * self.get('headers').length)); + //hosts with master components should be in the beginning of list + hostsObj.unshift.apply(hostsObj, masterHosts); if (this.get('isMasters')) { - hostsObj = this.renderMasters(hostsObj); - } - else { + hostsObj = this.selectMasterComponents(hostsObj); + } else { hostsObj = this.renderSlaves(hostsObj); } - if(hostsObj.length > 100) { - lazyloading.run({ - destination: this.get('hosts'), - source: hostsObj, - context: this, - initSize: 50, - chunkSize: 100, - delay: 50 - }); - } else { - hostsObj.forEach(function (host) { - this.get('hosts').pushObject(host); - }, this); - this.set('isLoaded', true); - } - this.get('headers').forEach(function (header) { - self.checkCallback(header.get('name')); - }); + this.set('hosts', hostsObj); + headers.forEach(function (header) { + this.checkCallback(header.get('name')); + }, this); + this.set('isLoaded', true); }, /** * - * @param hostsObj - * @return {*} + * @param {Array} hostsObj + * @return {Array} */ renderSlaves: function (hostsObj) { var self = this; - var allHosts = this.getHostNames(); var headers = this.get('headers'); var slaveComponents = this.get('content.slaveComponentHosts'); if (!slaveComponents) { // we are at this page for the first time var client_is_set = false; hostsObj.forEach(function (host) { - host.isMaster = self.hasMasterComponents(host.hostName); var checkboxes = host.get('checkboxes'); - checkboxes.setEach('checked', !host.isMaster); + checkboxes.setEach('checked', !host.hasMaster); checkboxes.setEach('isInstalled', false); checkboxes.findProperty('title', headers.findProperty('name', 'CLIENT').get('label')).set('checked', false); // First not Master should have Client (only first!) @@ -376,7 +361,7 @@ App.WizardStep6Controller = Em.Controller.extend({ } }); - if (this.get('isInstallerWizard') && hostsObj.everyProperty('isMaster', true)) { + if (this.get('isInstallerWizard') && hostsObj.everyProperty('hasMaster', true)) { var lastHost = hostsObj[hostsObj.length - 1]; lastHost.get('checkboxes').setEach('checked', true); } @@ -394,38 +379,31 @@ App.WizardStep6Controller = Em.Controller.extend({ }); } }); - allHosts.forEach(function (_hostname) { - var host = hostsObj.findProperty('hostName', _hostname); - if (host) { - host.set('isMaster', this.hasMasterComponents(_hostname)); - } - }, this); } return hostsObj; }, /** + * select checkboxes which correspond to master components * - * @param hostsObj - * @return {*} + * @param {Array} hostsObj + * @return {Array} */ - renderMasters: function (hostsObj) { - var self = this; + selectMasterComponents: function (hostsObj) { var masterComponentHosts = this.get('content.masterComponentHosts'); - console.warn('masterComponentHosts', masterComponentHosts); + console.log('Master components selected on:', masterComponentHosts.mapProperty('hostName').uniq().join(", ")); if (masterComponentHosts) { masterComponentHosts.forEach(function (item) { var host = hostsObj.findProperty('hostName', item.hostName); if (host) { - var checkbox = host.get('checkboxes').findProperty('title', item.display_name); + var checkbox = host.get('checkboxes').findProperty('component', item.component); if (checkbox) { checkbox.set('checked', true); } } }); } - return hostsObj; }, http://git-wip-us.apache.org/repos/asf/ambari/blob/3bc68f87/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index ac93e5d..e0c8afc 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -423,7 +423,9 @@ h1 { } th { input[type="checkbox"] { - margin: 0; + //fixes height discrepencies in IE + margin-bottom: -1px; + margin-top: -1px; } } } @@ -450,15 +452,17 @@ h1 { } } } + .progress { + margin-bottom: 0; + } + } + #confirm-hosts, #step6 { .page-bar { padding: 5px; .selected-hosts-info { margin: 0; } } - .progress { - margin-bottom: 0; - } } #step4, #step5, #step6 { a.selected { http://git-wip-us.apache.org/repos/asf/ambari/blob/3bc68f87/ambari-web/app/templates/wizard/step3.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step3.hbs b/ambari-web/app/templates/wizard/step3.hbs index 5b8bdad..dffc01d 100644 --- a/ambari-web/app/templates/wizard/step3.hbs +++ b/ambari-web/app/templates/wizard/step3.hbs @@ -62,8 +62,7 @@ <div class="btn-group"> <a class="btn"> {{view Ember.Checkbox checkedBinding="view.pageChecked"}} - </a> - <button class="btn dropdown-toggle" data-toggle="dropdown"> + </a><button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> http://git-wip-us.apache.org/repos/asf/ambari/blob/3bc68f87/ambari-web/app/templates/wizard/step6.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step6.hbs b/ambari-web/app/templates/wizard/step6.hbs index c310338..109380f 100644 --- a/ambari-web/app/templates/wizard/step6.hbs +++ b/ambari-web/app/templates/wizard/step6.hbs @@ -23,9 +23,7 @@ <div class="alert alert-error">{{errorMessage}}</div> {{/if}} - <div {{bindAttr class="controller.isLoaded::hidden-scroll :pre-scrollable" }}> - <div {{bindAttr class=":spinner-overlay controller.isLoaded:hidden"}}></div> - <i {{bindAttr class=":icon-spin :spinner controller.isLoaded:hidden"}}></i> + <div class="pre-scrollable"> <table class="table table-striped" id="component_assign_table"> <thead> <tr> @@ -44,24 +42,41 @@ </tr> </thead> <tbody> - {{#each host in hosts}} + {{#if view.pageContent}} + {{#each host in view.pageContent}} <tr> {{#view App.WizardStep6HostView hostBinding="host" }} {{host.hostName}} - {{#if host.isMaster}} + {{#if host.hasMaster}} <i class=icon-asterisks>✵</i> {{/if}} {{/view}} {{#each checkbox in host.checkboxes}} <td> - <label class="checkbox"><input {{bindAttr disabled="checkbox.isInstalled" checked="checkbox.checked" id="checkbox.id"}} type="checkbox"/>{{checkbox.title}}</label> + <label class="checkbox"> + {{#view view.checkboxView checkboxBinding="checkbox"}} + {{checkbox.title}} + {{/view}} + </label> </td> {{/each}} </tr> {{/each}} + {{/if}} </tbody> </table> </div> + <div id="hosts"> + <div class="page-bar"> + <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> + </div> <div class="btn-area"> <a class="btn" {{action back}}>← {{t common.back}}</a> <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} →</a> http://git-wip-us.apache.org/repos/asf/ambari/blob/3bc68f87/ambari-web/app/views/wizard/step6_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/wizard/step6_view.js b/ambari-web/app/views/wizard/step6_view.js index 3748168..8d3d933 100644 --- a/ambari-web/app/views/wizard/step6_view.js +++ b/ambari-web/app/views/wizard/step6_view.js @@ -19,12 +19,22 @@ var App = require('app'); -App.WizardStep6View = Em.View.extend({ +App.WizardStep6View = App.TableView.extend({ templateName: require('templates/wizard/step6'), title: '', + displayLength: "20", + + content: function () { + return this.get('controller.hosts'); + }.property('controller.hosts'), + + filteredContent: function () { + return this.get('content'); + }.property('content'), + didInsertElement: function () { var controller = this.get('controller'); if (controller.get('isMasters')) { @@ -60,30 +70,25 @@ App.WizardStep6View = Em.View.extend({ this.set('label', label); }, /** - * attach event handlers to checkboxes + * Binding host property with dynamic name + * @type {*} */ - attachHandlers: function () { - var controller = this.get('controller'); - var checkBuildStatus = function () { - setTimeout(function () { - var checkboxes = jQuery("#component_assign_table input[type=checkbox]"); - if (checkboxes.length === controller.get('checkboxesCount')) { - checkboxes.bind('click', function (event) { - var idInfo = event.target.id.split('_DELIMITER_'); - var component = idInfo[0]; - var hostName = idInfo[1]; - controller.get('hosts').findProperty('hostName', hostName).get('checkboxes').findProperty('component', component).toggleProperty('checked'); - controller.checkCallback(component); - }); - } else { - checkBuildStatus(); - } - }, 100); - }; - if (this.get('controller.isLoaded') && this.state === "inDOM") { - checkBuildStatus(); + checkboxView: Em.Checkbox.extend({ + /** + * Header object with host property name + */ + checkbox: null, + + //if setAll true there is no need to check every checkbox whether all checked or not + + checkedBinding: 'checkbox.checked', + + disabledBinding: 'checkbox.isInstalled', + + click: function () { + this.get('controller').checkCallback(this.get('checkbox.component')); } - }.observes('controller.isLoaded') + }) }); App.WizardStep6HostView = Em.View.extend({
