Browse Source

AMBARI-8712 Upgrade progress window should occupy available vertical space. (atkach)

Andrii Tkach 10 years ago
parent
commit
5bcb0ff4eb

+ 12 - 0
ambari-web/app/routes/stack_upgrade_routes.js

@@ -36,6 +36,18 @@ module.exports = App.WizardRoute.extend({
         secondary: null,
         secondary: null,
         didInsertElement: function () {
         didInsertElement: function () {
           this.fitHeight();
           this.fitHeight();
+          this.fitInnerHeight();
+        },
+
+        /**
+         * fir height of scrollable block inside of modal body
+         */
+        fitInnerHeight: function () {
+          var block = this.$().find('#modal > .modal-body');
+          var scrollable = this.$().find('#modal .scrollable-block');
+
+          scrollable.css('max-height', Number(block.css('max-height').slice(0, -2)) - block.height());
+          block.css('max-height', 'none');
         },
         },
         onClose: function() {
         onClose: function() {
           var self = this, header, body;
           var self = this, header, body;

+ 16 - 14
ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_dialog.hbs

@@ -17,25 +17,27 @@
 }}
 }}
 
 
 <div id="stack-upgrade-dialog">
 <div id="stack-upgrade-dialog">
-  {{#if view.isLoaded}}
-    <div class="row-fluid">
-      <div class="span2">{{statusIcon controller.upgradeData.Upgrade.request_status}}&nbsp;{{view.upgradeStatusLabel}}</div>
-      <div class="span9">
-        <div class="progress progress-striped active">
-          <div class="bar" {{bindAttr style="view.progressWidth"}}></div>
-        </div>
-      </div>
-      <div class="span1">
-        {{view.overallProgress}}%
+  <div {{bindAttr class="view.isLoaded::hidden :row-fluid"}}>
+    <div class="span2">{{statusIcon controller.upgradeData.Upgrade.request_status}}
+      &nbsp;{{view.upgradeStatusLabel}}</div>
+    <div class="span9">
+      <div class="progress progress-striped active">
+        <div class="bar" {{bindAttr style="view.progressWidth"}}></div>
       </div>
       </div>
     </div>
     </div>
+    <div class="span1">
+      {{view.overallProgress}}%
+    </div>
+  </div>
 
 
-    <div class="task-list limited-height-2">
+  <div class="task-list scrollable-block">
+    {{#if view.isLoaded}}
       {{#each group in controller.upgradeData.upgradeGroups}}
       {{#each group in controller.upgradeData.upgradeGroups}}
         {{view App.upgradeGroupView contentBinding="group"}}
         {{view App.upgradeGroupView contentBinding="group"}}
       {{/each}}
       {{/each}}
-    </div>
-  {{else}}
+    {{/if}}
+  </div>
+  {{#unless view.isLoaded}}
     <div class="spinner"></div>
     <div class="spinner"></div>
-  {{/if}}
+  {{/unless}}
 </div>
 </div>