You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by at...@apache.org on 2014/01/10 14:33:22 UTC
git commit: AMBARI-4258 Reduce loading delay on Heatmaps and Hosts
page routing. (atkach)
Updated Branches:
refs/heads/trunk 19e31745a -> 0ad06758f
AMBARI-4258 Reduce loading delay on Heatmaps and Hosts page routing. (atkach)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/0ad06758
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/0ad06758
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/0ad06758
Branch: refs/heads/trunk
Commit: 0ad06758fa17927d93068fe413cf17fd7e89e86f
Parents: 19e3174
Author: atkach <at...@hortonworks.com>
Authored: Fri Jan 10 15:33:18 2014 +0200
Committer: atkach <at...@hortonworks.com>
Committed: Fri Jan 10 15:33:18 2014 +0200
----------------------------------------------------------------------
.../app/controllers/main/charts/heatmap.js | 20 ++++++--
.../app/templates/main/charts/heatmap.hbs | 2 +-
.../main/charts/heatmap/heatmap_rack.hbs | 7 +--
ambari-web/app/views/main/charts/heatmap.js | 6 ++-
.../views/main/charts/heatmap/heatmap_rack.js | 49 ++++++++++----------
ambari-web/app/views/main/host.js | 4 +-
6 files changed, 49 insertions(+), 39 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/controllers/main/charts/heatmap.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/controllers/main/charts/heatmap.js b/ambari-web/app/controllers/main/charts/heatmap.js
index 6446ad2..66cf2c8 100644
--- a/ambari-web/app/controllers/main/charts/heatmap.js
+++ b/ambari-web/app/controllers/main/charts/heatmap.js
@@ -19,9 +19,19 @@ var App = require('app');
App.MainChartsHeatmapController = Em.Controller.extend({
name: 'mainChartsHeatmapController',
- cluster: function () {
- return App.Cluster.find().objectAt(0);
- }.property(''),
+ modelRacks: App.Rack.find(),
+ racks: function () {
+ var racks = [];
+ this.get('modelRacks').forEach(function (rack) {
+ racks.push(Em.Object.create({
+ name: rack.get('name'),
+ hosts: rack.get('hosts'),
+ isLoaded: false
+ }));
+ });
+ return racks;
+ }.property('modelRacks.@each.isLoaded'),
+
allMetrics: function () {
var metrics = [
Em.Object.create({
@@ -133,7 +143,7 @@ App.MainChartsHeatmapController = Em.Controller.extend({
* @this App.MainChartsHeatmapController
*/
rackClass: function () {
- var rackCount = this.get('cluster.racks.length');
+ var rackCount = this.get('racks.length');
if (rackCount < 2) {
return "span12";
} else if (rackCount == 2) {
@@ -141,5 +151,5 @@ App.MainChartsHeatmapController = Em.Controller.extend({
} else {
return "span4";
}
- }.property('cluster')
+ }.property('racks.length')
});
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/templates/main/charts/heatmap.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/charts/heatmap.hbs b/ambari-web/app/templates/main/charts/heatmap.hbs
index 6be3d18..3b5a750 100644
--- a/ambari-web/app/templates/main/charts/heatmap.hbs
+++ b/ambari-web/app/templates/main/charts/heatmap.hbs
@@ -64,7 +64,7 @@
<span id="heatmap-metric-title">{{controller.selectedMetric.name}}</span>
</h4>
<div class="row-fluid">
- {{#each rack in controller.cluster.racks}}
+ {{#each rack in controller.racks}}
<div {{bindAttr class="controller.rackClass"}}>
{{view App.MainChartsHeatmapRackView rackBinding="rack" }}
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs b/ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs
index 0bb176b..818f764 100644
--- a/ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs
+++ b/ambari-web/app/templates/main/charts/heatmap/heatmap_rack.hbs
@@ -20,9 +20,6 @@
<div class="statusName clearfix">
<div {{bindAttr class="view.statusIndicator rack.status"}}></div>
<div class="rackName">{{rack.name}}</div>
- <!--<a href="#" class="toggler" {{!action toggleRack target="view" on="click" }}>-->
- <!--<span {{!bindAttr class="view.heatmapTogglerClass"}}></span>-->
- <!--</a>-->
</div>
</div>
<!--<div class="hostsSummary clearfix">-->
@@ -42,8 +39,8 @@
<!--</div>-->
<!--{{!/if}}-->
<!--</div>-->
-<div {{bindAttr class="view.heatmapTogglerClass view.hostsBlockClass"}}>
- {{#each rack.hosts}}
+<div class="isActive hosts clearfix">
+ {{#each view.hosts}}
<div {{bindAttr style="view.hostCssStyle"}}>
{{view App.MainChartsHeatmapHostView contentBinding="this"}}
</div>
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/views/main/charts/heatmap.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/charts/heatmap.js b/ambari-web/app/views/main/charts/heatmap.js
index a25ad49..3f18493 100644
--- a/ambari-web/app/views/main/charts/heatmap.js
+++ b/ambari-web/app/views/main/charts/heatmap.js
@@ -24,12 +24,14 @@ App.MainChartsHeatmapView = Em.View.extend({
this._super();
// set default metric
this.set('controller.selectedMetric', this.get('controller.allMetrics')[0].get('items')[0]);
+ this.get('controller.racks').setEach('isLoaded', false);
$("#heatmapDetailsBlock").hide();
},
showLoading: function () {
- if (this.get('controller.selectedMetric.loading')) {
+ if (this.get('controller.selectedMetric.loading') || !this.get('controller.racks').everyProperty('isLoaded')) {
var e = document.getElementById("heatmap-metric-loading");
if (e) {
+ $(e).children('div.spinner').remove();
var spinOpts = {
lines: 9,
length: 4,
@@ -47,5 +49,5 @@ App.MainChartsHeatmapView = Em.View.extend({
}
this.set('spinner', null);
}
- }.observes('controller.selectedMetric.loading')
+ }.observes('controller.selectedMetric.loading', 'controller.racks.@each.isLoaded')
});
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/views/main/charts/heatmap/heatmap_rack.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/charts/heatmap/heatmap_rack.js b/ambari-web/app/views/main/charts/heatmap/heatmap_rack.js
index 9783643..b0d0638 100644
--- a/ambari-web/app/views/main/charts/heatmap/heatmap_rack.js
+++ b/ambari-web/app/views/main/charts/heatmap/heatmap_rack.js
@@ -17,50 +17,51 @@
*/
var App = require('app');
+var lazyloading = require('utils/lazy_loading');
App.MainChartsHeatmapRackView = Em.View.extend({
templateName: require('templates/main/charts/heatmap/heatmap_rack'),
classNames: ['rack'],
classNameBindings: ['visualSchema'],
- /**
- * this is the class for binding attribute to hosts block
- * @private
- */
- hostsBlockClass:"hosts clearfix",
- heatmapIsOpened: 1,
/** rack status block class */
statusIndicator:'statusIndicator',
+ /** loaded hosts of rack */
+ hosts: [],
- toggleRack: function(){
- var newHeatmapStatus = 1 - this.get('heatmapIsOpened');
- this.set('heatmapIsOpened', newHeatmapStatus);
+ willInsertElement: function () {
+ this.set('hosts', []);
},
- /**
- * change toggler class, depends on heatmapIsOpened property
- * @this App.MainChartsHeatmapRackView
- */
- heatmapTogglerClass:function () {
- if (this.heatmapIsOpened) {
- return "isActive"
+ didInsertElement: function () {
+ var rackHosts = this.get('rack.hosts').toArray();
+ if (rackHosts.length > 100) {
+ lazyloading.run({
+ destination: this.get('hosts'),
+ source: rackHosts,
+ context: this.get('rack'),
+ initSize: 25,
+ chunkSize: 100,
+ delay: 25
+ });
+ } else {
+ this.set('hosts', rackHosts);
+ this.set('rack.isLoaded', true);
}
- return "";
- }.property("heatmapIsOpened"),
-
+ },
/**
* Provides the CSS style for an individual host.
* This can be used as the 'style' attribute of element.
*/
- hostCssStyle: function(){
+ hostCssStyle: function () {
var rack = this.get('rack');
var widthPercent = 100;
var hostCount = rack.get('hosts.length');
- if(hostCount<11){
- widthPercent = (100/hostCount)-0.5;
- }else{
+ if (hostCount < 11) {
+ widthPercent = (100 / hostCount) - 0.5;
+ } else {
widthPercent = 10; // max out at 10%
}
- return "width:"+widthPercent+"%;float:left;";
+ return "width:" + widthPercent + "%;float:left;";
}.property('rack')
});
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/ambari/blob/0ad06758/ambari-web/app/views/main/host.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/host.js b/ambari-web/app/views/main/host.js
index 17f8db5..31187d9 100644
--- a/ambari-web/app/views/main/host.js
+++ b/ambari-web/app/views/main/host.js
@@ -175,7 +175,7 @@ App.MainHostView = App.TableView.extend({
*/
labels: function() {
return this.get('content.hostComponents').getEach('displayName').join("<br />");
- }.property('content.hostComponents.@each'),
+ }.property('content.hostComponents.length'),
/**
* CSS value for disk usage bar
@@ -228,7 +228,7 @@ App.MainHostView = App.TableView.extend({
label: function () {
return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
- }.property('value', 'hostsCount')
+ }.property('hostsCount')
}),
categories: function () {