AMBARI-7614. Slider View: UI cleanup. (Denys Buzhor via akovalenko)

contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js

@@ -21,7 +21,7 @@ App.SliderAppsController = Ember.ArrayController.extend({
    * show modal popup that says apps currently unavailable
    */
   showUnavailableAppsPopup: function(message) {
-    this.set('errorMessage', message);
+    this.set('errorMessage', message || Em.I18n.t('slider.apps.undefined.issue'));
     Bootstrap.ModalManager.open(
       "apps-warning-modal",
       Em.I18n.t('common.warning'),

contrib/views/slider/src/main/resources/ui/app/helpers/helper.js

@@ -158,4 +158,12 @@ DS.attr.transforms = {
       }
     }
   }
-};
+};
+/**
+ * Allow get translation value used in I18n for attributes that ends with Translation.
+ * For example:
+ * <code>
+ *  {{input name="new" placeholderTranslation="any"}}
+ * </code>
+ **/
+Em.TextField.reopen(Em.I18n.TranslateableAttributes);

contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js

@@ -39,7 +39,10 @@ App.WithPanels = Ember.Mixin.create({
    */
   addCarets: function() {
     var panel = $('.panel');
-    panel.find('.panel-heading').prepend('<span class="pull-left icon icon-caret-down"></span>');
+    panel.find('.panel-heading').prepend('<span class="pull-left icon icon-caret-right"></span>');
+    panel.find('.panel-collapse.collapse.in').each(function() {
+      $(this).parent().find('.icon.icon-caret-right:first-child').addClass('icon-caret-down').removeClass('icon-caret-right');
+    });
     panel.on('hidden.bs.collapse', function (e) {
       $(e.delegateTarget).find('span.icon').addClass('icon-caret-right').removeClass('icon-caret-down');
     }).on('shown.bs.collapse', function (e) {

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

@@ -18,6 +18,12 @@
 
 @import-once 'common.less';
 
+.create-app-wizard-wrapper {
+  .modal-backdrop {
+    opacity: 0;
+  }
+}
+
 #createAppWizard {
   width: 80%;
   margin: 0 0 auto;
@@ -34,6 +40,11 @@
       label {
         font-weight: normal;
       }
+      .form-horizontal {
+        .control-label {
+          text-align: left;
+        }
+      }
     }
   }
   .next-btn {

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

@@ -18,19 +18,36 @@
 <div id="step1">
   <form role="form" class="form-horizontal">
     <!-- Available Applications -->
+    {{#if controller.isAppTypesError}}
+      <div class="row">
+        <div class="col-xs-12 alert alert-info app-types-alert">
+          {{t wizard.step1.noAppTypesError}}
+        </div>
+      </div>
+    {{/if}}
     <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>
       </div>
       <div class="col-xs-7">
-        {{view
-          Em.Select
-          contentBinding="controller.availableTypes"
-          optionLabelPath="content.displayName"
-          class="form-control type-select"
-          valueBinding="controller.selectedType"
-        }}
+        {{#if controller.isAppTypesError}}
+          {{view
+            Em.Select
+            contentBinding="view.noAppsAvailableSelect"
+            class="form-control type-select"
+            disabled=true
+          }}
+        {{else}}
+          {{view
+            Em.Select
+            contentBinding="controller.availableTypes"
+            optionLabelPath="content.displayName"
+            class="form-control type-select"
+            valueBinding="controller.selectedType"
+            disabledBinding="controller.isAppTypesError"
+          }}
+        {{/if}}
       </div>
     </div>
     <div class="form-group row">
@@ -38,7 +55,13 @@
         <label class=" control-label">{{t wizard.step1.description}}</label>
       </div>
       <div class="col-xs-7">
-        <span class="pseudo-label control-label">{{controller.typeDescription}}</span>
+        <span class="pseudo-label control-label">
+          {{#if controller.isAppTypesError}}
+            {{t slider.apps.no.description.available}}
+          {{else}}
+            {{controller.typeDescription}}
+          {{/if}}
+        </span>
       </div>
     </div>
     <div class="form-group row">
@@ -48,7 +71,7 @@
         </div>
       </div>
       <div class="col-xs-7">
-        {{input id="app-name-input" class="form-control" valueBinding="controller.newApp.name"}}
+        {{input id="app-name-input" class="form-control" valueBinding="controller.newApp.name" disabledBinding="controller.isAppTypesError"}}
       </div>
     </div>
     {{#if controller.isNameError}}
@@ -58,13 +81,6 @@
         </div>
       </div>
     {{/if}}
-    {{#if controller.isAppTypesError}}
-      <div class="row">
-        <div class="col-xs-12 alert alert-info app-types-alert">
-          {{t wizard.step1.noAppTypesError}}
-        </div>
-      </div>
-    {{/if}}
     <!-- Available Applications end -->
     <!-- Scheduler Options -->
     <hr />
@@ -76,7 +92,7 @@
         <label class="control-label">{{t wizard.step1.schedulerOptions.queueName}}</label>
       </div>
       <div class="col-xs-7">
-        {{input class="form-control" valueBinding="controller.newApp.queueName"}}
+        {{input class="form-control" valueBinding="controller.newApp.queueName" placeholderTranslation="form.placeholder.optional"}}
       </div>
     </div>
     <!-- Scheduler Options end -->

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

@@ -61,6 +61,12 @@ Em.I18n.translations = {
     'save': 'Save'
   },
 
+  'form': {
+    'placeholder': {
+      'optional': '(optional)'
+    }
+  },
+
   'error.config_is_empty': 'Config <strong>{0}</strong> should not be empty',
   'error.config_is_empty_2': 'Config <strong>{0}</strong> should not be empty, because <strong>{1}</strong> is set to "true"',
 
@@ -84,7 +90,10 @@ Em.I18n.translations = {
   'slider.apps.title': 'Slider Apps',
   'slider.apps.create': 'Create App',
   'slider.apps.unavailable': 'Unable to get list of Slider Apps due to issues below. Possible reasons include incorrect or invalid view parameters. Please contact administrator for setting up proper view parameters and verifying necessary services are working.',
+  'slider.apps.undefined.issue': 'Undefined issue',
   'sliderApps.filters.info': '{0} of {1} sliders showing',
+  'slider.apps.no.description.available': 'No Description Available',
+  'slider.apps.no.applications.available': 'No Applications Available',
 
   'sliderApp.flex.invalid_counts': 'Instance counts should be integer and >= 0',
   'sliderApp.flex.message': 'Update the number of desired instances for each component of this application',
@@ -114,15 +123,15 @@ Em.I18n.translations = {
 
   'wizard.name': 'Create App',
   'wizard.step1.name': 'Select Type',
-  'wizard.step1.header': 'Available Applications',
+  'wizard.step1.header': 'Select Application',
   'wizard.step1.appTypes': 'Application Types',
   'wizard.step1.description': 'Description',
-  'wizard.step1.schedulerOptions.label': 'Scheduler Options (optional)',
-  'wizard.step1.schedulerOptions.queueName': 'Queue name',
+  'wizard.step1.schedulerOptions.label': 'Scheduler Options',
+  'wizard.step1.schedulerOptions.queueName': 'Queue Name',
   'wizard.step1.yarnLabels.label': 'YARN Labels',
-  'wizard.step1.yarnLabels.options.anyHost': 'Any host',
-  'wizard.step1.yarnLabels.options.nonLabeledHost': 'Non-labeled host',
-  'wizard.step1.yarnLabels.options.specifyLabel': 'Specify label',
+  'wizard.step1.yarnLabels.options.anyHost': 'Any Host',
+  'wizard.step1.yarnLabels.options.nonLabeledHost': 'Non-Labeled Host',
+  'wizard.step1.yarnLabels.options.specifyLabel': 'Specify Label',
   'wizard.step1.logAggregation.label': 'Log Aggregation',
   'wizard.step1.logAggregation.filePatterns.include': 'Include File Patterns',
   'wizard.step1.logAggregation.filePatterns.exclude': 'Exclude File Patterns',

contrib/views/slider/src/main/resources/ui/app/views/createAppWizard/step1_view.js

@@ -40,7 +40,8 @@ App.CreateAppWizardStep1View = Ember.View.extend({
    * Enable "Special-label" text-field only when "spec-label"-radio is checked
    * @type {bool}
    */
-  specLabelEnabled: Ember.computed.lt('controller.newApp.selectedYarnLabel', '2')
+  specLabelEnabled: Ember.computed.lt('controller.newApp.selectedYarnLabel', '2'),
 
+  noAppsAvailableSelect: [Em.I18n.t('slider.apps.no.applications.available')]
 
 });

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

@@ -18,6 +18,8 @@
 
 App.CreateAppWizardView = Ember.View.extend({
 
+  classNames: ['create-app-wizard-wrapper'],
+
   didInsertElement: function(){
     this.setHeight();
     $(window).resize(this.setHeight);