Repository: ambari Updated Branches: refs/heads/trunk 629cf6870 -> 03f48a26e
AMBARI-19536. Improve 'Install Wizard step 2-10' after new guidelines.(xiwang) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/03f48a26 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/03f48a26 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/03f48a26 Branch: refs/heads/trunk Commit: 03f48a26e40fa526551e9597fe4feabb5023ba05 Parents: 629cf68 Author: Xi Wang <[email protected]> Authored: Thu Jan 12 10:54:15 2017 -0800 Committer: Xi Wang <[email protected]> Committed: Fri Jan 13 10:11:21 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/messages.js | 2 +- .../app/styles/theme/bootstrap-ambari.css | 10 +- ambari-web/app/styles/wizard.less | 53 +++++++- ambari-web/app/templates/wizard/step1.hbs | 28 ++--- ambari-web/app/templates/wizard/step2.hbs | 120 ++++++++++--------- ambari-web/app/templates/wizard/step3.hbs | 45 ++++--- ambari-web/app/views/wizard/step2_view.js | 7 +- 7 files changed, 163 insertions(+), 102 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index bd60f90..7ed5826 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -638,7 +638,7 @@ Em.I18n.translations = { 'installer.step1.advancedRepo.localRepo.label.baseUrl':'Repository Base URL', 'installer.step1.advancedRepo.localRepo.label.stack':'Stack', 'installer.step1.advancedRepo.localRepo.placeholder': 'Enter Base URL or remove this OS', - 'installer.step1.advancedRepo.skipValidation.tooltip':'<b>Warning:</b> This is for advanced users only. Use this option if you want to skip validation for Repository Base URLs.', + 'installer.step1.advancedRepo.skipValidation.tooltip':'Warning: This is for advanced users only. Use this option if you want to skip validation for Repository Base URLs.', 'installer.step1.advancedRepo.useRedhatSatellite.tooltip':'Disable distributed repositories and use RedHat Satellite/Spacewalk channels instead', 'installer.step1.advancedRepo.useRedhatSatellite.disabled.tooltip':'Use of RedHat Satellite/Spacewalk is not available when is using Public Repositories', 'installer.step1.advancedRepo.skipValidation.message':'Skip Repository Base URL validation (Advanced)', http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index 5b18417..cd5179a 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -589,7 +589,7 @@ h2.table-title { color: #999; } .wizard .wizard-body .wizard-nav .nav li .step-index { - line-height: 18px; + line-height: 16px; } .wizard .wizard-body .wizard-nav .nav li .step-description { font-family: 'Roboto', sans-serif; @@ -699,6 +699,9 @@ input[type="radio"].disabled + label:hover:before { background-color: #b2b8c1; border-color: #b2b8c1; } +input[type="checkbox"] + label { + margin-top: -2px; +} input[type="checkbox"] + label:before { content: ''; position: absolute; @@ -719,13 +722,14 @@ input[type="checkbox"]:checked + label:after { top: 2px; left: 2px; font-size: 9px; + line-height: 1.42; } input[type="radio"] + label:before, input.radio + label:before { content: ''; position: absolute; left: 0; - top: 0; + top: 2px; width: 12px; height: 12px; box-sizing: border-box; @@ -739,7 +743,7 @@ input.radio:checked + label:after { content: ''; background-color: #FFF; position: absolute; - top: 3px; + top: 5px; left: 3px; width: 6px; height: 6px; http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index b3a833d..2dbdd03 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -59,21 +59,53 @@ } #installOptions { + #targetHosts { + .step-title { + margin-bottom: 10px; + } + } + .radio-button-options { + margin-top: 10px; + margin-bottom: 10px; + } + .wizard-plain-text { + color: #666; + } .ssh-user, .ssh-port { - padding-top: 5px; + padding-top: 8px; } #sshKey { - color: #000; + color: #555; font-family: "Courier New","courier"; font-size: 0.9em; + min-height: 110px; } input[type="radio"]:focus { outline: none; } + .ssh-key-input-indentation { + //hide the original ugly input + .inputfileUgly { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + #selectedFileName { + padding: 5px 20px; + color: #666; + } + } + } #confirm-hosts { + .compact-panel-heading { + padding: 10px; + } .page-bar { border: none; } @@ -146,6 +178,9 @@ white-space: nowrap; } } + #warningsSection { + margin: 0px 10px; + } } #step4, #step5, #step6 { a.selected { @@ -371,6 +406,10 @@ .help-block { white-space: normal; } + select > option { + height: 100px; + color: #ccc; + } } label.host-name { @@ -565,6 +604,7 @@ padding: 0px 10px; .radio-group { padding-bottom: 10px; + color: #666; } } table > tbody > tr > td { @@ -583,8 +623,13 @@ width: 90%; } #skip-validation, #use-redhat { - span.disabled { - opacity: 0.7; + label { + color: #666; + font-weight: normal; + margin-top: -2px; + &.disabled { + opacity: 0.7; + } } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/templates/wizard/step1.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step1.hbs b/ambari-web/app/templates/wizard/step1.hbs index 6900624..f72258b 100644 --- a/ambari-web/app/templates/wizard/step1.hbs +++ b/ambari-web/app/templates/wizard/step1.hbs @@ -81,7 +81,7 @@ <div class="panel-body version-contents-body"> <div class="row radio-group"> {{! Public Repository radio }} - <div {{bindAttr class=":col-sm-4 :radio :big-radio :public-radio"}}> + <div {{bindAttr class=":col-sm-4 :radio :big-radio :public-radio :wizard-plain-text"}}> {{view view.usePublicRepoRadioButton classNames="display-inline-block"}} {{#if networkIssuesExist}} <a id="public-disabled-link" class="display-inline-block" {{action "openPublicOptionDisabledWindow" target="view"}}>{{t installer.step1.selectUseRepoOptions.public.networkLost}}</a> @@ -164,7 +164,7 @@ </td> <td class="col-sm-1"> <a class="action remove-icon" href="#" {{action "removeOS" operatingSystem target="view"}}> - <span class="icon icon-minus" {{translateAttr title="common.remove"}}></span> + <span class="icon icon-minus"></span> {{t common.remove}} </a> </td> @@ -176,17 +176,17 @@ {{! OSes and Repositories END }} {{! Skip Repository Base URL validation }} - <div id="skip-validation" {{bindAttr class="controller.selectedStack.useRedhatSatellite:disabled :checkbox"}}> - {{#view App.CheckboxView - labelTranslate="installer.step1.advancedRepo.skipValidation.message" - labelClassNamesBinding="controller.selectedStack.useRedhatSatellite:disabled" - checkedBinding="skipValidationChecked" - disabledBinding="controller.selectedStack.useRedhatSatellite" - }} - <i class="glyphicon glyphicon-question-sign" rel="skip-validation-tooltip" - data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.skipValidation.tooltip"}}> - </i> - {{/view}} + <div id="skip-validation" {{bindAttr class="controller.selectedStack.useRedhatSatellite:disabled"}}> + {{#view App.CheckboxView + labelTranslate="installer.step1.advancedRepo.skipValidation.message" + labelClassNamesBinding="controller.selectedStack.useRedhatSatellite:disabled" + checkedBinding="skipValidationChecked" + disabledBinding="controller.selectedStack.useRedhatSatellite" + }} + <i class="glyphicon glyphicon-question-sign" rel="skip-validation-tooltip" + data-toggle="tooltip" {{translateAttr data-original-title="installer.step1.advancedRepo.skipValidation.tooltip"}}> + </i> + {{/view}} <div class="clearfix"></div> </div> {{! Skip Repository Base URL validation END }} @@ -200,7 +200,7 @@ {{t installer.step1.advancedRepo.useRedhatSatellite.message}} </label> <i class="glyphicon glyphicon-question-sign" rel="use-redhat-tooltip" - data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.useRedhatSatellite.tooltip"}}> + data-toggle="tooltip" {{translateAttr data-original-title="installer.step1.advancedRepo.useRedhatSatellite.tooltip"}}> </i> {{/view}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/templates/wizard/step2.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step2.hbs b/ambari-web/app/templates/wizard/step2.hbs index 4912851..e024088 100644 --- a/ambari-web/app/templates/wizard/step2.hbs +++ b/ambari-web/app/templates/wizard/step2.hbs @@ -24,10 +24,9 @@ <div class="panel-body"> <div id="targetHosts"> - <strong>{{t installer.step2.targetHosts}}</strong> - + <div class="step-title">{{t installer.step2.targetHosts}}</div> <div {{bindAttr class="hostsError:has-error :form-group :target-hosts-input"}}> - <p>{{t installer.step2.targetHosts.info}}. {{t installer.step2.orUse}} + <p class="wizard-plain-text">{{t installer.step2.targetHosts.info}}. {{t installer.step2.orUse}} <a href="javascript:void(null)" rel="popover" {{translateAttr title="installer.step2.hostPattern.tooltip.title" data-content="installer.step2.hostPattern.tooltip.content"}}> @@ -36,12 +35,12 @@ </p> <div class="row"> - <div class="col-md-7"> + <div class="col-md-8"> {{view Ember.TextArea id="host-names" class="form-control" valueBinding="content.installOptions.hostNames" rows="5" placeholder="host names"}} </div> {{#if hostsError}} - <div class="col-md-5"> + <div class="col-md-4"> <p class="help-block validation-block">{{hostsError}}</p> </div> {{/if}} @@ -51,42 +50,71 @@ <div id="hostConnectivity"> <div class="ambari-agents"> - <strong>{{t installer.step2.sshKey}}</strong> - - {{#view view.providingSSHKeyRadioButton}} - {{#if useSSH}} - {{t installer.step2.useSsh.provide}} - <a href="javascript:void(null)" - rel="popover" - {{translateAttr title="installer.step2.useSsh.tooltip.title" data-content="installer.step2.useSsh.tooltip.content"}}> - {{t installer.step2.useSsh.tooltip.title}}</a> - {{t installer.step2.useSsh.provide_id_rsa}} - {{else}} - {{t installer.step2.install.perform}} - <a href="javascript:void(null)" - rel="popover" - {{translateAttr title="installer.step2.automaticInstall.tooltip.title" data-content="installer.step2.automaticInstall.tooltip.content"}}> - {{t installer.step2.automaticInstall.tooltip.title}}</a> - {{t installer.step2.install.perform_on_hosts}} - {{/if}} - {{/view}} + <div class="step-title">{{t installer.step2.sshKey}}</div> + <div class="row radio-button-options"> + <div class="col-sm-5 row"> + <div class="col-sm-1"> + {{#view view.providingSSHKeyRadioButton}}{{/view}} + </div> + <div class="col-sm-10 wizard-plain-text"> + {{#if useSSH}} + {{t installer.step2.useSsh.provide}} + <a href="javascript:void(null)" + rel="popover" + {{translateAttr title="installer.step2.useSsh.tooltip.title" data-content="installer.step2.useSsh.tooltip.content"}}> + {{t installer.step2.useSsh.tooltip.title}}</a> + {{t installer.step2.useSsh.provide_id_rsa}} + {{else}} + {{t installer.step2.install.perform}} + <a href="javascript:void(null)" + rel="popover" + {{translateAttr title="installer.step2.automaticInstall.tooltip.title" data-content="installer.step2.automaticInstall.tooltip.content"}}> + {{t installer.step2.automaticInstall.tooltip.title}}</a> + {{t installer.step2.install.perform_on_hosts}} + {{/if}} + </div> + </div> + <div class="col-sm-5 row"> + <div class="col-sm-1"> + {{#view view.manualRegistrationRadioButton}}{{/view}} + </div> + <div class="col-sm-10 wizard-plain-text"> + {{t installer.step2.install.perform}} + {{#if useSSH}} + <a href="javascript:void(null)" + rel="popover" + {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content"}}> + {{t installer.step2.manualInstall.tooltip.title}}</a> + {{else}} + <a href="javascript:void(null)" + rel="popover" + {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content_no_ssh"}}> + {{t installer.step2.manualInstall.tooltip.title}}</a> + {{/if}} + {{t installer.step2.install.perform_on_hosts}} + {{#if useSSH}} + {{t installer.step2.install.without_ssh}} + {{/if}} + </div> + </div> + </div> {{#if useSSH}} <div class="ssh-key-input"> {{#if view.isFileApi}} - <div class="form-group"> + <div> {{view App.SshKeyFileUploader disabledBinding="view.sshKeyState"}} </div> {{/if}} {{! ssh key }} <div {{bindAttr class="sshKeyError:has-error :form-group :row"}}> - <div class="col-md-7"> + <div class="col-md-8"> {{view Ember.TextArea class="form-control" rows="3" id="sshKey" placeholder="ssh private key" disabledBinding="view.sshKeyState" valueBinding="content.installOptions.sshKey"}} </div> {{#if sshKeyError}} - <div class="col-md-5"> + <div class="col-md-4"> <span class="help-block validation-block">{{sshKeyError}}</span> </div> {{/if}} @@ -96,15 +124,15 @@ {{! ssh user }} <div {{bindAttr class="sshUserError:has-error :row"}}> <div class="col-md-4"> - <label rel="tooltip" {{translateAttr title="installer.step2.sshUser.toolTip"}} class="ssh-user"> + <label rel="tooltip" {{translateAttr title="installer.step2.sshUser.toolTip"}} class="ssh-user wizard-plain-text"> {{t installer.step2.sshUser}} </label> </div> - <div {{bindAttr class="sshUserError:has-error :form-group :col-md-3"}}> + <div {{bindAttr class="sshUserError:has-error :form-group :col-md-4"}}> {{view view.textFieldView valueBinding="content.installOptions.sshUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control pull-right"}} </div> {{#if sshUserError}} - <div class="col-md-5"> + <div class="col-md-4"> <span class="help-block validation-block help-inline">{{sshUserError}}</span> </div> {{/if}} @@ -114,15 +142,15 @@ {{! ssh port }} <div {{bindAttr class="sshPortError:has-error :row"}}> <div class="col-md-4"> - <label rel="tooltip" {{translateAttr title="installer.step2.sshPort.toolTip"}} class="ssh-port"> + <label rel="tooltip" {{translateAttr title="installer.step2.sshPort.toolTip"}} class="ssh-port wizard-plain-text"> {{t installer.step2.sshPort}} </label> </div> - <div class="form-group col-md-3"> + <div class="form-group col-md-4"> {{view view.textFieldView valueBinding="content.installOptions.sshPort" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}} </div> {{#if sshPortError}} - <div class="col-md-5"> + <div class="col-md-4"> <span class="help-block validation-block help-inline">{{sshPortError}}</span> </div> {{/if}} @@ -133,43 +161,23 @@ {{#if App.supports.customizeAgentUserAccount}} <div {{bindAttr class="agentUserError:has-error :row"}}> <div class="col-md-4"> - <label rel="tooltip" {{translateAttr title="installer.step2.agentUser.toolTip"}} class="ssh-user"> + <label rel="tooltip" {{translateAttr title="installer.step2.agentUser.toolTip"}} class="ssh-user wizard-plain-text"> {{t installer.step2.agentUser}} </label> </div> - <div {{bindAttr class="agentUserError:has-error :form-group :col-md-3"}}> + <div {{bindAttr class="agentUserError:has-error :form-group :col-md-4"}}> {{view view.textFieldView valueBinding="content.installOptions.agentUser" isEnabledBinding="content.installOptions.useSsh" classNames="form-control"}} </div> {{#if agentUserError}} - <div class="col-md-5"> + <div class="col-md-4"> <span class="help-block validation-block help-inline">{{agentUserError}}</span> </div> {{/if}} </div> {{/if}} {{! ambari agent user end }} - </div> {{/if}} - - {{#view view.manualRegistrationRadioButton}} - {{t installer.step2.install.perform}} - {{#if useSSH}} - <a href="javascript:void(null)" - rel="popover" - {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content"}}> - {{t installer.step2.manualInstall.tooltip.title}}</a> - {{else}} - <a href="javascript:void(null)" - rel="popover" - {{translateAttr title="installer.step2.manualInstall.tooltip.title" data-content="installer.step2.manualInstall.tooltip.content_no_ssh"}}> - {{t installer.step2.manualInstall.tooltip.title}}</a> - {{/if}} - {{t installer.step2.install.perform_on_hosts}} - {{#if useSSH}} - {{t installer.step2.install.without_ssh}} - {{/if}} - {{/view}} </div> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/templates/wizard/step3.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/step3.hbs b/ambari-web/app/templates/wizard/step3.hbs index 2ba87e1..09ba206 100644 --- a/ambari-web/app/templates/wizard/step3.hbs +++ b/ambari-web/app/templates/wizard/step3.hbs @@ -24,20 +24,19 @@ <div class="panel-body"> <div class="panel panel-default panel-internal"> - <div class="panel-heading"> + <div class="panel-heading compact-panel-heading"> <div class="button-section"> - {{#unless isBackDisabled}} - <button class="btn btn-primary step3-remove-selected-btn" {{bindAttr disabled="view.noHostsSelected"}} - {{action removeSelectedHosts target="controller" }}> + {{#unless view.noHostsSelected}} + <button class="btn btn-primary step3-remove-selected-btn" {{action removeSelectedHosts target="controller" }}> <i class="glyphicon glyphicon-trash glyphicon-white"></i> <span class="hidden-sm">{{t installer.step3.removeSelected}}</span> </button> {{/unless}} {{#unless isRetryDisabled}} - <a class="btn btn-primary decommission" href="#" {{action retrySelectedHosts target="view"}}> + <button class="btn btn-primary decommission" {{action retrySelectedHosts target="view"}}> <i class="glyphicon glyphicon-repeat glyphicon-white"></i> <span class="hidden-sm">{{t installer.step3.retryFailed}}</span> - </a> + </button> {{/unless}} <div id="host-filter" class="pull-right"> @@ -123,24 +122,24 @@ </table> </div> </div> - - {{#if hasMoreRegisteredHosts}} - <div {{bindAttr class=":alert :alert-warning"}}> - <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a> - </div> - {{/if}} - {{#unless disableHostCheck}} - <div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}}> - {{view.message}} - <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a> - {{#unless isBootstrapFailed}} - {{#unless isWarningsLoaded}} - {{view App.SpinnerView}} + <div id="warningsSection"> + {{#if hasMoreRegisteredHosts}} + <div {{bindAttr class=":alert :alert-warning"}}> + <a href="#" {{action registeredHostsPopup target="controller"}}>{{view.registeredHostsMessage}}</a> + </div> + {{/if}} + {{#unless disableHostCheck}} + <div {{bindAttr class=":alert :alert-warning view.status isWarningsBoxVisible::hidden"}}> + {{view.message}} + <a href="#" {{action hostWarningsPopup warnings target="controller"}}>{{view.linkText}}</a> + {{#unless isBootstrapFailed}} + {{#unless isWarningsLoaded}} + {{view App.SpinnerView}} + {{/unless}} {{/unless}} - {{/unless}} - </div> - {{/unless}} - + </div> + {{/unless}} + </div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/03f48a26/ambari-web/app/views/wizard/step2_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/wizard/step2_view.js b/ambari-web/app/views/wizard/step2_view.js index 719227d..0fbdb59 100644 --- a/ambari-web/app/views/wizard/step2_view.js +++ b/ambari-web/app/views/wizard/step2_view.js @@ -23,7 +23,9 @@ App.SshKeyFileUploader = Em.View.extend({ //TODO: rewrite it using tagName and attribute binding //TODO: rewrite it as independent component and place it somewhere in utils // alternative is to move it to App.WizardStep2View - template: Em.Handlebars.compile('<input type="file" {{bindAttr disabled="view.disabled"}} />'), + template: Em.Handlebars.compile('<input class="inputfileUgly" type="file" name="file" id="file" {{bindAttr disabled="view.disabled"}} />' + + '<label class="btn btn-default" for="file" {{bindAttr disabled="view.disabled"}}>Choose file</label>' + + '<span id="selectedFileName">No file selected</span>'), classNames: ['ssh-key-input-indentation'], @@ -35,6 +37,9 @@ App.SshKeyFileUploader = Em.View.extend({ reader.onload = (function () { return function (e) { + var fileNameArray = $("#file").val().toString().split("\\"); + var selectedFileName = fileNameArray[fileNameArray.length -1]; + $('#selectedFileName').html(selectedFileName); $('#sshKey').html(e.target.result); self.get("controller").setSshKey(e.target.result); };
