AMBARI-7563 Slider View: Multiple issues which make create Slider App wizard large. (Max Shepel via atkach)

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

@@ -29,6 +29,9 @@ html {
 }
 .tooltip {
   z-index: 1500;
+  .tooltip-inner {
+    text-align: left;
+  }
 }
 .popover {
   max-width: 800px;

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

@@ -29,23 +29,10 @@
     font-weight: bold;
   }
   .slider-modal-body {
-    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;
+      label {
+        font-weight: normal;
       }
     }
   }
@@ -67,17 +54,28 @@
   }
   #step2 {
     .table-container {
-      max-height: 248px;
       border: 1px solid #e3e3e3;
       padding: 5px;
       border-radius: 4px;
-      overflow: hidden;
+      overflow: auto;
       .components-table {
         width: 100%;
         border-spacing: 10px;
         border-collapse: separate;
-        input[type="text"]{
-          width: 100px;
+        th {
+          padding-right: 1px;
+        }
+        .cell-narrow {
+          width: 4em;
+        }
+        .cell-wide {
+          width: 5em;
+        }
+        .cell-auto {
+          input {
+            width: 100%;
+            min-width: 7em;
+          }
         }
       }
       margin-bottom: 30px;
@@ -87,9 +85,15 @@
     select {
       padding: 4px 0;
     }
-    .row {
+    hr {
       .table-row();
     }
+    label {
+      width: 100%;
+    }
+    .row {
+      margin: 5px 0;
+    }
     .app-types-alert {
       margin-top: 20px;
     }

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

@@ -18,7 +18,7 @@
 <div id="step1">
   <form role="form" class="form-horizontal">
     <!-- Available Applications -->
-    <h3>{{t wizard.step1.header}}</h3>
+    <strong>{{t wizard.step1.header}}</strong>
     <div class="form-group row">
       <div class="col-xs-3">
         <label class="control-label">{{t wizard.step1.appTypes}}</label>
@@ -69,7 +69,7 @@
     <!-- Scheduler Options -->
     <hr />
     <div class="row">
-      <h3>{{t wizard.step1.schedulerOptions.label}}</h3>
+      <strong>{{t wizard.step1.schedulerOptions.label}}</strong>
     </div>
     <div class="row">
       <div class="col-xs-3">
@@ -83,7 +83,7 @@
     <!-- YARN Labels -->
     <hr />
     <div class="row">
-      <h3>{{t wizard.step1.yarnLabels.label}}</h3>
+      <strong>{{t wizard.step1.yarnLabels.label}}</strong>
     </div>
     <div class="row">
       <div class="col-xs-3">
@@ -116,7 +116,7 @@
     <!-- Log Aggregation -->
     <hr />
     <div class="row">
-      <h3>{{t wizard.step1.logAggregation.label}}</h3>
+      <strong>{{t wizard.step1.logAggregation.label}}</strong>
     </div>
     <div class="row">
       <div class="col-xs-3">

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

@@ -34,15 +34,15 @@
       {{#each}}
         <tr>
           <td>{{displayName}}</td>
-          <td>{{input valueBinding="numInstances"}}</td>
-          <td>{{input valueBinding="yarnMemory"}}</td>
-          <td>{{input valueBinding="yarnCPU"}}</td>
+          <td>{{input class="cell-narrow" valueBinding="numInstances"}}</td>
+          <td>{{input class="cell-wide" valueBinding="yarnMemory"}}</td>
+          <td>{{input class="cell-narrow" valueBinding="yarnCPU"}}</td>
           <td>
             <div {{bs-bind-tooltip content=view.checkBoxPopover}}>
               {{input type="checkbox" checkedBinding="yarnLabelChecked" class="checkbox-inline"}}
             </div>
           </td>
-          <td>
+          <td class="cell-auto">
             <div {{bs-bind-tooltip content=view.yarnLabelPopover}}>
               {{input valueBinding="yarnLabel" disabledBinding="yarnLabelNotChecked"}}
             </div>

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

@@ -130,10 +130,10 @@ Em.I18n.translations = {
   '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': ' 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.table.yarnLabels': 'YARN Lables',
+  'wizard.step2.table.instances': 'Instances',
+  'wizard.step2.table.memory': 'Memory (MB)',
+  'wizard.step2.table.cpu': 'CPU	Cores',
+  'wizard.step2.table.yarnLabels': 'YARN Labels',
   'wizard.step2.table.popoverCheckbox': 'Check box to enable YARN labels on component',
   'wizard.step2.table.popoverLabel': 'Provide YARN label to make component run on labeled hosts. Empty value would make component run on non-labeled hosts.',
   'wizard.step2.error.numbers': 'All fields should be filled. Only integer numbers allowed.',

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

@@ -72,9 +72,7 @@ App.CreateAppWizardView = Ember.View.extend({
 
   setHeight: function () {
     var height = $(window).height() * 0.8;
-    $('#createAppWizard').css({
-      height: height + 'px',
-      marginTop: -(height / 2) + 'px'
-    });
+    $('.slider-modal-body').css('max-height', height + 'px');
+    $('#createAppWizard').css('margin-top', -(height / 2) + 'px');
   }
 });