You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by yu...@apache.org on 2013/02/22 22:34:23 UTC
svn commit: r1449221 - in /incubator/ambari/trunk: CHANGES.txt
ambari-web/app/styles/application.less ambari-web/app/templates/main/host.hbs
ambari-web/app/views/common/sort_view.js ambari-web/app/views/main/host.js
Author: yusaku
Date: Fri Feb 22 21:34:23 2013
New Revision: 1449221
URL: http://svn.apache.org/r1449221
Log:
AMBARI-1484. Reintroduce client-side paging for Hosts table. (yusaku)
Modified:
incubator/ambari/trunk/CHANGES.txt
incubator/ambari/trunk/ambari-web/app/styles/application.less
incubator/ambari/trunk/ambari-web/app/templates/main/host.hbs
incubator/ambari/trunk/ambari-web/app/views/common/sort_view.js
incubator/ambari/trunk/ambari-web/app/views/main/host.js
Modified: incubator/ambari/trunk/CHANGES.txt
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/CHANGES.txt?rev=1449221&r1=1449220&r2=1449221&view=diff
==============================================================================
--- incubator/ambari/trunk/CHANGES.txt (original)
+++ incubator/ambari/trunk/CHANGES.txt Fri Feb 22 21:34:23 2013
@@ -51,6 +51,8 @@ Trunk (unreleased changes):
IMPROVEMENTS
+ AMBARI-1484. Reintroduce client-side paging for Hosts table. (yusaku)
+
AMBARI-1473. Further optimization of querying host information from the
server. (yusaku)
Modified: incubator/ambari/trunk/ambari-web/app/styles/application.less
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/styles/application.less?rev=1449221&r1=1449220&r2=1449221&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/styles/application.less (original)
+++ incubator/ambari/trunk/ambari-web/app/styles/application.less Fri Feb 22 21:34:23 2013
@@ -1265,6 +1265,45 @@ table.graphs {
}
/*Hosts*/
#hosts {
+ .page-bar {
+ border: 1px solid silver;
+ text-align:right;
+ div {
+ display: inline-block;
+ margin:0 10px;
+ }
+ .items-on-page {
+ label {
+ display:inline;
+ }
+ select {
+ margin-bottom: 4px;
+ margin-top: 4px;
+ width:70px;
+ }
+ }
+ .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;
+ }
+ }
+ }
+
.health-status-HEALTHY{
background-image: @status-live-marker;
}
@@ -1357,20 +1396,6 @@ table.graphs {
.sorting_desc { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAIEAAAIDAQAAAAAAAAAAAAAAAAAGBwgJCgEBAAIDAQAAAAAAAAAAAAAAAAMFBAYHCBAAAAUDAwMFAAAAAAAAAAAAAQIDBAUABgcSNTYRFQgTZFUWZhEAAAQEAggGAwAAAAAAAAAAAAECAxEhBAYSMjFBYRMzFDQFUZFSYmMHJFRk/9oADAMBAAIRAxEAPwDv4oAKACgCKc1tMmusb3Eph6cSgsgx7fucEZxGRks2llGIGVWgVm8q1dt0+6ogKaapSgdNbQPXTqAdwsN602bopk3vTnUW24rduwccbU2S5E8Sm1JM92czSZwNOKUYDFrCqTp1corDUFMpEcYap+Ipb4P5O8n81y9xXXlG50yY+thR3AEivqFvRDmduvSUrhuLtrFNXqCFvJm1LAQ5RMuchB6gBy13f7+tP6lsOipuz2jSGdy1ZJeNzmXnEtU+pWFTikmbxyTEjgglKKZpMU3ZanudYtTtSr8dMoYSKKvKMte0aUV5YGxgoASbD2iQ4Tyi6uB7Rvz/AHD9R8r7/wBWr64uta6/pKfq+JwUZP5/1/hwCFjIeTMrLo0np93q2xDtVCJh/9k=) no-repeat right 50%; }
.sorting { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAGgAAAIDAQAAAAAAAAAAAAAAAAUHAAYICgEBAQAAAAAAAAAAAAAAAAAAAAEQAAEEAQIFAgcAAAAAAAAAAAECAwQFABEGIRI0NQcTFDFBMmNUZRYRAQEBAQAAAAAAAAAAAAAAAAABEUH/2gAMAwEAAhEDEQA/AO93cd/XbXpLC9tHQ1Dr46nljUBby/gzGZB+p+Q6QhA+ZOApfDnllW/ha1tv6Ee7iyH5kRlvlbTIqHndWkNJ0HO7XFQbWeJUkpUeOpySrZh65UUnyFUW1ztaexRmIbaPyzoLE6vg2UWW9GC1e0XHnsSGEqfQohCwApK9OIGuAjfBP9VuG0m39vGqINVUe4r2xF21TVsuXZOI9N9lMmLBYkttQ21auBKhqtSUngCMkW5xqjKiYASh6SR2Tulr2HpOvf6j9p+V9/mwDeB//9k=) no-repeat right 50%; }
- a.paginate_disabled_next, a.paginate_disabled_previous {
- color: gray;
- &:hover {
- color: gray;
- text-decoration: none;
- }
- }
-
- a.paginate_enabled_next, a.paginate_enabled_previous {
- &:hover {
- text-decoration: none;
- }
- }
-
div.view-wrapper {
.btn-group{
margin-bottom: 9px;
Modified: incubator/ambari/trunk/ambari-web/app/templates/main/host.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/templates/main/host.hbs?rev=1449221&r1=1449220&r2=1449221&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/templates/main/host.hbs (original)
+++ incubator/ambari/trunk/ambari-web/app/templates/main/host.hbs Fri Feb 22 21:34:23 2013
@@ -58,8 +58,8 @@
</tr>
</thead>
<tbody>
- {{#if view.filteredContent.length}}
- {{#each host in view.filteredContent}}
+ {{#if view.pageContent}}
+ {{#each host in view.pageContent}}
{{#view view.HostView contentBinding="host"}}
<td class="first">
<span {{bindAttr class="host.healthClass"}} {{bindAttr title="host.healthToolTip" }}></span>
@@ -94,4 +94,15 @@
{{/if}}
</tbody>
</table>
+
+ <div class="page-bar">
+ <div class="items-on-page">
+ <label>{{t common.show}}: {{view view.hostPerPageSelectView selectionBinding="view.displayLength"}}</label>
+ </div>
+ <div class="info">{{view.paginationInfo}}</div>
+ <div class="paging_two_button">
+ {{view view.paginationLeft}}
+ {{view view.paginationRight}}
+ </div>
+ </div>
</div>
Modified: incubator/ambari/trunk/ambari-web/app/views/common/sort_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/common/sort_view.js?rev=1449221&r1=1449220&r2=1449221&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/common/sort_view.js (original)
+++ incubator/ambari/trunk/ambari-web/app/views/common/sort_view.js Fri Feb 22 21:34:23 2013
@@ -106,10 +106,10 @@ var fieldView = Em.View.extend({
*/
click: function(event){
if(this.get('status') === 'sorting_desc'){
- this.get('parentView').sort(this, true);
+ this.get('parentView').sort(this, false);
this.set('status', 'sorting_asc');
} else {
- this.get('parentView').sort(this, false);
+ this.get('parentView').sort(this, true);
this.set('status', 'sorting_desc');
}
}
Modified: incubator/ambari/trunk/ambari-web/app/views/main/host.js
URL: http://svn.apache.org/viewvc/incubator/ambari/trunk/ambari-web/app/views/main/host.js?rev=1449221&r1=1449220&r2=1449221&view=diff
==============================================================================
--- incubator/ambari/trunk/ambari-web/app/views/main/host.js (original)
+++ incubator/ambari/trunk/ambari-web/app/views/main/host.js Fri Feb 22 21:34:23 2013
@@ -37,6 +37,87 @@ App.MainHostView = Em.View.extend({
this.set('controller.filteredByAlerts', false);
}
},
+
+ /**
+ * return pagination information displayed on the hosts page
+ */
+ paginationInfo: function () {
+ return this.t('apps.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
+ }.property('displayLength', 'filteredContent.length', 'startIndex', 'endIndex'),
+
+ paginationLeft: Ember.View.extend({
+ tagName: 'a',
+ template: Ember.Handlebars.compile('<i class="icon-arrow-left"></i>'),
+ classNameBindings: ['class'],
+ class: function () {
+ if (this.get("parentView.startIndex") > 1) {
+ return "paginate_previous";
+ }
+ return "paginate_disabled_previous";
+ }.property("parentView.startIndex", 'filteredContent.length'),
+
+ click: function () {
+ this.get('parentView').previousPage();
+ }
+ }),
+
+ paginationRight: Ember.View.extend({
+ tagName: 'a',
+ template: Ember.Handlebars.compile('<i class="icon-arrow-right"></i>'),
+ classNameBindings: ['class'],
+ class: function () {
+ if ((this.get("parentView.endIndex")) < this.get("parentView.filteredContent.length")) {
+ return "paginate_next";
+ }
+ return "paginate_disabled_next";
+ }.property("parentView.endIndex", 'filteredContent.length'),
+
+ click: function () {
+ this.get('parentView').nextPage();
+ }
+ }),
+
+ hostPerPageSelectView: Em.Select.extend({
+ content: ['10', '25', '50']
+ }),
+
+ // start index for displayed content on the hosts page
+ startIndex: 1,
+
+ // calculate end index for displayed content on the hosts page
+ endIndex: function () {
+ return Math.min(this.get('filteredContent.length'), this.get('startIndex') + parseInt(this.get('displayLength')) - 1);
+ }.property('startIndex', 'displayLength', 'filteredContent.length'),
+
+ /**
+ * onclick handler for previous page button on the hosts page
+ */
+ previousPage: function () {
+ var result = this.get('startIndex') - parseInt(this.get('displayLength'));
+ if (result < 2) {
+ result = 1;
+ }
+ this.set('startIndex', result);
+ },
+
+ /**
+ * onclick handler for next page button on the hosts page
+ */
+ nextPage: function () {
+ var result = this.get('startIndex') + parseInt(this.get('displayLength'));
+ if (result - 1 < this.get('filteredContent.length')) {
+ this.set('startIndex', result);
+ }
+ },
+
+ // the number of hosts to show on every page of the hosts page view
+ displayLength: null,
+
+ // calculates default value for startIndex property after applying filter or changing displayLength
+ updatePaging: function () {
+ this.set('startIndex', Math.min(1, this.get('filteredContent.length')));
+ }.observes('displayLength', 'filteredContent.length'),
+
sortView: sort.wrapperView,
nameSort: sort.fieldView.extend({
name:'publicHostName',
@@ -257,10 +338,6 @@ App.MainHostView = Em.View.extend({
}
}.observes('controller.filteredByAlerts'),
- startIndex : function(){
- return Math.random();
- }.property(),
-
/**
* Apply each filter to host
*
@@ -326,7 +403,13 @@ App.MainHostView = Em.View.extend({
* contain filter conditions for each column
*/
filterConditions: [],
- filteredContent: null,
+ filteredContent: [],
+
+ // contain content to show on the current page of hosts page view
+ pageContent: function () {
+ return this.get('filteredContent').slice(this.get('startIndex') - 1, this.get('endIndex'));
+ }.property('filteredContent.length', 'startIndex', 'endIndex'),
+
/**
* filter table by filterConditions
*/
@@ -350,7 +433,7 @@ App.MainHostView = Em.View.extend({
});
this.set('filteredContent', result);
} else {
- this.set('filteredContent', content);
+ this.set('filteredContent', content.toArray());
}
}
}.observes('content')