AMBARI-1546. Improve Cluster Management loading screen. (Xi Wang via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1454142 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -105,6 +105,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1546. Improve Cluster Management loading screen. (Xi Wang via yusaku)
+
  AMBARI-1537. Constrain the width of all wizard popups. (Xi Wang via yusaku)
 
  AMBARI-1536. Hosts page layout fixes. (Xi Wang via yusaku)

ambari-web/app/controllers/global/cluster_controller.js

@@ -22,6 +22,7 @@ App.ClusterController = Em.Controller.extend({
   name:'clusterController',
   cluster:null,
   isLoaded:false,
+  clusterDataLoadedPercent: 'width:0', // 0 to 1
   /**
    * Whether we need to update statuses automatically or not
    */
@@ -29,13 +30,19 @@ App.ClusterController = Em.Controller.extend({
   updateLoadStatus:function (item) {
     var loadList = this.get('dataLoadList');
     var loaded = true;
+    var numLoaded= 0;
     loadList.set(item, true);
     for (var i in loadList) {
       if (loadList.hasOwnProperty(i) && !loadList[i] && loaded) {
         loaded = false;
       }
+      // calculate the number of true
+      if (loadList.hasOwnProperty(i) && loadList[i]){
+        numLoaded++;
+      }
     }
     this.set('isLoaded', loaded);
+    this.set('clusterDataLoadedPercent', 'width:' + (Math.floor(numLoaded/6*100)).toString() + '%');
   },
 
   dataLoadList:Em.Object.create({
@@ -294,7 +301,7 @@ App.ClusterController = Em.Controller.extend({
         self.updateLoadStatus('cluster');
       }
     }, function (jqXHR, textStatus) {
-      self.updateLoadStatus('cluster');
+        self.updateLoadStatus('cluster');
     });
 
     App.HttpClient.get(hostsUrl, App.hostsMapper, {
@@ -302,7 +309,7 @@ App.ClusterController = Em.Controller.extend({
         self.updateLoadStatus('hosts');
       }
     }, function (jqXHR, textStatus) {
-      self.updateLoadStatus('hosts');
+        self.updateLoadStatus('hosts');
     });
 
     App.HttpClient.get(usersUrl, App.usersMapper, {
@@ -310,15 +317,15 @@ App.ClusterController = Em.Controller.extend({
         self.updateLoadStatus('users');
       }
     }, function (jqXHR, textStatus) {
-      self.updateLoadStatus('users');
+        self.updateLoadStatus('users');
     });
 
     App.router.get('updateController').updateServiceMetric(function(){
-      self.updateLoadStatus('services');
+        self.updateLoadStatus('services');
     }, true);
 
     this.loadAlerts(function(){
-      self.updateLoadStatus('alerts');
+        self.updateLoadStatus('alerts');
     });
 
   },

ambari-web/app/controllers/main.js

@@ -34,8 +34,12 @@ App.MainController = Em.Controller.extend({
   }.observes('App.router.clusterController.clusterName'),
 
   isClusterDataLoaded: function(){
-      return App.router.get('clusterController.isLoaded');
+    return App.router.get('clusterController.isLoaded');
   }.property('App.router.clusterController.isLoaded'),
+
+  clusterDataLoadedPercent: function(){
+    return App.router.get('clusterController.clusterDataLoadedPercent');
+  }.property('App.router.clusterController.clusterDataLoadedPercent'),
   /**
    * run all processes and cluster's data loading
    */

ambari-web/app/templates/main.hbs

@@ -17,14 +17,18 @@
 }}
 
 {{#if isClusterDataLoaded}}
-<div id="main-nav">
-  <div class="navbar">
-    <div class="navbar-inner">
-      {{view App.MainMenuView}}
+  <div id="main-nav">
+    <div class="navbar">
+      <div class="navbar-inner">
+        {{view App.MainMenuView}}
+      </div>
     </div>
   </div>
-</div>
-{{outlet}}
-{{else}}
-<h2>{{t app.loadingPlaceholder}}</h2>
-{{/if}}
+  {{outlet}}
+{{/if}}
+{{#unless isClusterDataLoaded}}
+  <h2>{{t app.loadingPlaceholder}} </h2>
+  <div class="progress progress-striped active">
+    <div class="bar" {{bindAttr style="controller.clusterDataLoadedPercent"}}></div>
+  </div>
+{{/unless}}