AMBARI-7614. Slider View: UI cleanup. (Denys Buzhor via akovalenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/9073879c Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/9073879c Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/9073879c Branch: refs/heads/branch-alerts-dev Commit: 9073879cd808d53485da22201c4d02d1a5ab9619 Parents: 8f7f717 Author: Aleksandr Kovalenko <[email protected]> Authored: Thu Oct 2 18:25:12 2014 +0300 Committer: Aleksandr Kovalenko <[email protected]> Committed: Thu Oct 2 18:25:12 2014 +0300 ---------------------------------------------------------------------- .../app/controllers/slider_apps_controller.js | 2 +- .../src/main/resources/ui/app/helpers/helper.js | 10 +++- .../main/resources/ui/app/mixins/with_panels.js | 5 +- .../main/resources/ui/app/styles/wizard.less | 11 +++++ .../ui/app/templates/createAppWizard/step1.hbs | 50 +++++++++++++------- .../src/main/resources/ui/app/translations.js | 21 +++++--- .../ui/app/views/createAppWizard/step1_view.js | 3 +- .../ui/app/views/create_app_wizard_view.js | 2 + 8 files changed, 77 insertions(+), 27 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js b/contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js index 894fe84..923e9f6 100644 --- a/contrib/views/slider/src/main/resources/ui/app/controllers/slider_apps_controller.js +++ b/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'), http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js index ab72661..58c5e55 100644 --- a/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js +++ b/contrib/views/slider/src/main/resources/ui/app/helpers/helper.js @@ -158,4 +158,12 @@ DS.attr.transforms = { } } } -}; \ No newline at end of file +}; +/** + * 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); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js b/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js index b1358be..972834f 100644 --- a/contrib/views/slider/src/main/resources/ui/app/mixins/with_panels.js +++ b/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) { http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less b/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less index d0eb4ae..a28355a 100644 --- a/contrib/views/slider/src/main/resources/ui/app/styles/wizard.less +++ b/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 { http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs b/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs index 500cbf3..4f49905 100644 --- a/contrib/views/slider/src/main/resources/ui/app/templates/createAppWizard/step1.hbs +++ b/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 --> http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/translations.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/translations.js b/contrib/views/slider/src/main/resources/ui/app/translations.js index 6e86ba4..979f0c8 100644 --- a/contrib/views/slider/src/main/resources/ui/app/translations.js +++ b/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', http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/views/createAppWizard/step1_view.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/views/createAppWizard/step1_view.js b/contrib/views/slider/src/main/resources/ui/app/views/createAppWizard/step1_view.js index 1f6a965..e6f6642 100644 --- a/contrib/views/slider/src/main/resources/ui/app/views/createAppWizard/step1_view.js +++ b/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')] }); http://git-wip-us.apache.org/repos/asf/ambari/blob/9073879c/contrib/views/slider/src/main/resources/ui/app/views/create_app_wizard_view.js ---------------------------------------------------------------------- diff --git a/contrib/views/slider/src/main/resources/ui/app/views/create_app_wizard_view.js b/contrib/views/slider/src/main/resources/ui/app/views/create_app_wizard_view.js index d99d2e7..a511095 100644 --- a/contrib/views/slider/src/main/resources/ui/app/views/create_app_wizard_view.js +++ b/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);
