AMBARI-1236. Display a progress bar during deploy prep. (yusaku)

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

CHANGES.txt

@@ -17,6 +17,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1236. Display a progress bar during deploy prep. (yusaku)
+
  AMBARI-1249. Update mock data to make App.testMode work. (yusaku)
 
  AMBARI-1239. Host health status should show orange when there is at least one

ambari-web/app/controllers/wizard/step8_controller.js

@@ -799,6 +799,18 @@ App.WizardStep8Controller = Em.Controller.extend({
     }
   },
 
+  /**
+   * Used in progress bar
+   */
+  ajaxQueueLength: function() {
+    return this.get('ajaxQueue').length;
+  }.property('ajaxQueue.length'),
+
+  /**
+   * Used in progress bar
+   */
+  ajaxQueueLeft: 0,
+
   setAmbariUIDb: function () {
     var dbContent = this.get('content.slaveGroupProperties');
     var slaveComponentConfig = this.get("slaveComponentConfig");
@@ -1423,6 +1435,7 @@ App.WizardStep8Controller = Em.Controller.extend({
 
     var first = queue[0];
     this.set('ajaxQueue', queue.slice(1));
+    this.set('ajaxQueueLeft', this.get('ajaxQueue').length);
 
     this.set('ajaxBusy', true);
     console.log('AJAX send ' + first.url);

ambari-web/app/templates/wizard/step8_log_popup.hbs

@@ -0,0 +1,22 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+<p>Preparing to Deploy: <strong>{{view.ajaxQueueComplete}}</strong> of <strong>{{view.ajaxQueueLength}}</strong> tasks completed.</p>
+<div class="progress">
+    <div class="bar" {{bindAttr style="view.barWidth"}}>
+    </div>
+</div>

ambari-web/app/views/common/modal_popup.js

@@ -23,7 +23,7 @@ App.ModalPopup = Ember.View.extend({
   template: Ember.Handlebars.compile([
     '<div class="modal-backdrop"></div><div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">',
     '<div class="modal-header">',
-    '<a class="close" {{action onClose target="view"}}>x</a>',
+    '{{#if showCloseButton}}<a class="close" {{action onClose target="view"}}>x</a>{{/if}}',
     '<h3 id="modal-label">',
     '{{#if headerClass}}{{view headerClass}}',
     '{{else}}{{header}}{{/if}}',
@@ -67,6 +67,11 @@ App.ModalPopup = Ember.View.extend({
 
   showFooter: true,
 
+  /**
+   * Hide or show 'X' button for closing popup
+   */
+  showCloseButton: true,
+
   didInsertElement: function(){
     if(this.autoHeight){
       this._super();

ambari-web/app/views/wizard/step8_view.js

@@ -34,49 +34,52 @@ App.WizardStep8View = Em.View.extend({
     o.jqprint();
   },
 
-  showLoadingIndicator: function(){
+  ajaxQueueLength: function() {
+    return this.get('controller.ajaxQueueLength');
+  }.property('controller.ajaxQueueLength'),
+
+  ajaxQueueLeft: function() {
+    return this.get('controller.ajaxQueueLeft');
+  }.property('controller.ajaxQueueLeft'),
+
+  showLoadingIndicator: function() {
     if(this.get('controller.hasErrorOccurred')){
-      $('.spinner').hide();
       return;
     }
     if(!this.get('controller.isSubmitDisabled')){
       return;
     }
 
-    var opts = {
-      lines: 13, // The number of lines to draw
-      length: 7, // The length of each line
-      width: 4, // The line thickness
-      radius: 10, // The radius of the inner circle
-      corners: 1, // Corner roundness (0..1)
-      rotate: 0, // The rotation offset
-      color: '#000', // #rgb or #rrggbb
-      speed: 1, // Rounds per second
-      trail: 60, // Afterglow percentage
-      shadow: false, // Whether to render a shadow
-      hwaccel: false, // Whether to use hardware acceleration
-      className: 'spinner', // The CSS class to assign to the spinner
-      zIndex: 2e9, // The z-index (defaults to 2000000000)
-      top: 'auto', // Top position relative to parent in px
-      left: 'auto' // Left position relative to parent in px
-    };
-    var target = $('#spinner')[0];
-    this.set('spinner', new Spinner(opts).spin(target));
-
-    /*var el = $('#spinner').children('b');
-    el.css('display', 'inline-block');
-    var deg = 0;
-    var timeoutId = setInterval(function(){
-      if(!$('#spinner').length){
-        clearInterval(timeoutId);
-      }
-      deg += 15;
-      deg %= 360;
-      el.css('transform', 'rotate(' + deg + 'deg)');
-      el.css('-ms-transform', 'rotate(' + deg + 'deg)');
-      el.css('-o-transform', 'rotate(' + deg + 'deg)');
-      el.css('-moz-transform', 'rotate(' + deg + 'deg)');
-      el.css('-webkit-transform', 'rotate(' + deg + 'deg)');
-    }, 80);*/
+    App.ModalPopup.show({
+      header: '',
+
+      showFooter: false,
+
+      showCloseButton: false,
+
+      bodyClass: Ember.View.extend({
+        templateName: require('templates/wizard/step8_log_popup'),
+
+        controllerBinding: 'App.router.wizardStep8Controller',
+
+        ajaxQueueLength: function() {
+          return this.get('controller.ajaxQueueLength');
+        }.property(),
+
+        ajaxQueueComplete: function() {
+          return this.get('ajaxQueueLength') - this.get('controller.ajaxQueueLeft');
+        }.property('controller.ajaxQueueLeft', 'ajaxQueueLength'),
+
+        barWidth: function () {
+          return 'width: ' + (this.get('ajaxQueueComplete') / this.get('ajaxQueueLength') * 100) + '%;';
+        }.property('ajaxQueueComplete', 'ajaxQueueLength'),
+
+        autoHide: function() {
+          if (this.get('ajaxQueueComplete') === this.get('ajaxQueueLength')) {
+            this.get('parentView').hide();
+          }
+        }.observes('ajaxQueueComplete', 'ajaxQueueLength')
+      })
+    });
   }.observes('controller.isSubmitDisabled','controller.hasErrorOccurred')
 });