AMBARI-7492 Slider View: Multiple Create Slider App wizard issues. (Max Shepel via ababiichuk)

contrib/views/slider/src/main/resources/ui/app/styles/application.less

@@ -378,7 +378,7 @@ select {
 
 #createAppWizard {
   width: 80%;
-  margin: -250px 0 auto;
+  margin: 0 0 auto;
   left: 10%;
   .wizard-nav {
     padding-left: 0px;
@@ -387,10 +387,25 @@ select {
     font-weight: bold;
   }
   .slider-modal-body {
-    max-height: 505px;
+    height: 90%;
+    max-height: 90%;
     .wizard-content{
+      min-height: 95%;
+      padding-bottom: 49px;
       background-color: #ffffff;
     }
+    .container-fluid {
+      height: 100%;
+      .row {
+        height: 100%;
+      }
+      .btn-area {
+        position: absolute;
+        right: 19px;
+        bottom: 19px;
+        left: 19px;
+      }
+    }
   }
   .next-btn {
     margin-left: 5px;
@@ -586,6 +601,9 @@ select {
 .modal {
   overflow-y: hidden;
 }
+.modal-backdrop {
+  opacity: 0.8;
+}
 .modal-backdrop.in {
   opacity:0;
 }
@@ -812,35 +830,7 @@ select {
   }
 }
 
-.modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-}
-.modal-title {
-  line-height: 30px;
-  font-size: 24px;
-  font-family: inherit;
-  font-weight: bold;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-.modal-body{
-  padding: 15px;
-}
-.modal-footer {
-  margin-top: 0px;
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right;
-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-  -moz-border-radius: 0 0 6px 6px;
-  border-radius: 0 0 6px 6px;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-  -moz-box-shadow: inset 0 1px 0 #ffffff;
-  box-shadow: inset 0 1px 0 #ffffff;
-
+.btn-area {
   .btn{
     display: inline-block;
     padding: 4px 14px;
@@ -910,6 +900,39 @@ select {
     background-color: #51a351;
   }
 }
+
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+}
+.modal-title {
+  line-height: 30px;
+  font-size: 24px;
+  font-family: inherit;
+  font-weight: bold;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+.modal-body{
+  padding: 15px;
+}
+.modal-footer {
+  margin-top: 0px;
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+  -moz-border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 #ffffff;
+  box-shadow: inset 0 1px 0 #ffffff;
+
+  .btn-area();
+
+}
 .slider-app-title {
   font-style: italic;
   cursor: pointer;

contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard.hbs

@@ -15,6 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
+<div class="modal-backdrop"></div>
 <div class="slider-modal" id="createAppWizard">
   <div class="slider-modal-header">
     <button type="button" class="close" {{action hide target="view"}}>&times;</button>

contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs

@@ -43,5 +43,7 @@
       </div>
     {{/if}}
   </div>
-  <button class="btn btn-success pull-right next-btn" {{bind-attr disabled="controller.isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
-</div>
+  <div class="btn-area">
+    <button class="btn btn-success pull-right next-btn" {{bind-attr disabled="controller.isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
+  </div>
+</div>

contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step2.hbs

@@ -17,7 +17,7 @@
 }}
 <div id="step2">
   <p>
-    {{t wizard.step2.header}}
+    {{newApp.appType.displayName}}{{t wizard.step2.header}}
   </p>
   <div class="table-container">
     <table class="components-table">
@@ -50,6 +50,8 @@
   {{#if controller.isError}}
     <div class="alert alert-danger">{{t wizard.step2.error.numbers}}</div>
   {{/if}}
-  <button class="btn btn-success pull-right next-btn" {{bind-attr disabled="controller.isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}}</button>
-  <button class="btn pull-right" {{action prevStep}}>{{t common.back}}</button>
+  <div class="btn-area">
+    <button class="btn btn-success pull-right next-btn" {{bind-attr disabled="controller.isSubmitDisabled"}} {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
+    <button class="btn" {{action prevStep}}>&larr; {{t common.back}}</button>
+  </div>
 </div>

contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step3.hbs

@@ -17,7 +17,7 @@
 }}
 
 <p>
-  {{t wizard.step3.header}}
+  {{t wizard.step3.header.beginning}}{{appWizardController.newApp.appType.displayName}}{{t wizard.step3.header.end}}
 </p>
 <div {{bind-attr class="controller.isError:has-error :form-group :app-wiz-configs"}}>
   {{#each controller.sectionKeys}}
@@ -31,5 +31,7 @@
     <div class="alert alert-danger">{{t wizard.step3.error}}</div>
   {{/if}}
 </div>
-<button class="btn btn-success pull-right next-btn" {{action submit}}>{{t common.next}}</button>
-<button class="btn pull-right" {{action prevStep}}>{{t common.back}}</button>
+<div class="btn-area">
+  <button class="btn btn-success pull-right next-btn" {{action submit}}>{{t common.next}} &rarr;</button>
+  <button class="btn" {{action prevStep}}>&larr; {{t common.back}}</button>
+</div>

contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step4.hbs

@@ -31,5 +31,7 @@
 <h5>{{t common.configuration}}</h5>
 <pre>{{controller.configsFormatted}}</pre>
 
-<button class="btn btn-success pull-right" {{action finish target="controller"}}>{{t common.finish}}</button>
+<div class="btn-area">
+  <button class="btn btn-success pull-right" {{action finish target="controller"}}>{{t common.finish}}</button>
+</div>
 </div>

contrib/views/slider/src/main/resources/ui/app/translations.js

@@ -115,13 +115,14 @@ Em.I18n.translations = {
   'wizard.step1.nameRepeatError': 'App with entered Name already exists.',
   'wizard.step1.noAppTypesError': 'No Slider Application packages have been installed on this server. Please contact your Ambari server administrator to install Slider Application packages into /var/lib/ambari-server/resources/apps/ folder.',
   'wizard.step2.name': 'Allocate Resources',
-  'wizard.step2.header': 'HBase application requires resources to be allocated on the cluster. Provide resource allocation requests for each component of the application below.',
+  'wizard.step2.header': ' application requires resources to be allocated on the cluster. Provide resource allocation requests for each component of the application below.',
   'wizard.step2.table.instances': 'Number of Instances',
   'wizard.step2.table.memory': 'YARN Memory (MB)',
   'wizard.step2.table.cpu': 'YARN	CPU	Cores',
   'wizard.step2.error.numbers': 'All fields should be filled. Only integer numbers allowed.',
   'wizard.step3.name': 'Configuration',
-  'wizard.step3.header': 'Provide	configuration	details	for	HBase	application',
+  'wizard.step3.header.beginning': 'Provide	configuration	details	for	',
+  'wizard.step3.header.end': '	application',
   'wizard.step3.error': 'Only \"key\":\"value\" format allowed.',
   'wizard.step4.name': 'Deploy',
   'wizard.step4.appName': 'App Name',

contrib/views/slider/src/main/resources/ui/app/views/create_app_wizard_view.js

@@ -19,6 +19,8 @@
 App.CreateAppWizardView = Ember.View.extend({
 
   didInsertElement: function(){
+    this.setHeight();
+    $(window).resize(this.setHeight);
     this.get('controller').loadStep();
   },
 
@@ -66,5 +68,13 @@ App.CreateAppWizardView = Ember.View.extend({
   hidePopup: function () {
     $(this.get('element')).find('.modal').hide();
     this.get('controller').transitionToRoute('slider_apps');
+  },
+
+  setHeight: function () {
+    var height = $(window).height() * 0.8;
+    $('#createAppWizard').css({
+      height: height + 'px',
+      marginTop: -(height / 2) + 'px'
+    });
   }
 });