Repository: ambari Updated Branches: refs/heads/trunk 8f8582bb8 -> 784cae2b0
AMBARI-19432. Improve 'Install Wizard step 1' 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/784cae2b Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/784cae2b Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/784cae2b Branch: refs/heads/trunk Commit: 784cae2b01b0c5defcab1ea5219b3fdf2c6dac73 Parents: 8f8582b Author: Xi Wang <xiw...@apache.org> Authored: Mon Jan 9 16:27:44 2017 -0800 Committer: Xi Wang <xiw...@apache.org> Committed: Tue Jan 10 14:10:51 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/messages.js | 3 +- ambari-web/app/styles/wizard.less | 48 ++-- ambari-web/app/templates/wizard/step1.hbs | 322 ++++++++++++------------- 3 files changed, 187 insertions(+), 186 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/784cae2b/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index f02ba2a..fa82003 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -591,7 +591,8 @@ Em.I18n.translations = { 'installer.step0.clusterName.error.specialChar':'Cluster Name cannot contain special characters', 'installer.step1.header':'Select Version', - 'installer.step1.body':'Select the software version and method of delivery for your cluster. Using a Public Repository requires Internet connectivity. Using a Local Repository requires you have configured the software in a repository available in your network.', + 'installer.step1.body':'Select the software version and method of delivery for your cluster.', + 'installer.step1.repo.body':'Using a Public Repository requires Internet connectivity. Using a Local Repository requires you have configured the software in a repository available in your network.', 'installer.step1.addVersion.title':'Add Version', 'installer.step1.changeVersion.defaultVersion':'Default Version Definition', 'installer.step1.selectUseRepoOptions.public':'Use Public Repository', http://git-wip-us.apache.org/repos/asf/ambari/blob/784cae2b/ambari-web/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index bc228c1..b3a833d 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -540,34 +540,36 @@ } #select-stack { - .panel-heading { - font-weight: bold; - p { - margin-bottom: 0; - display: block; - } - } - .details-panel .patch-icon { - color: #ff4500; + .stacks-options { + margin-bottom: 30px; } - .details-panel .version-contents-section { - border: 1px solid #ddd; - max-height: 200px; - overflow: auto; - margin: 8px 0; - .table { - margin-bottom: 0; - tr:first-child td { - border-top: none; - } + .stacks-options .details-panel { + .patch-icon { + color: #ff4500; } - } - .inner-table { - td { - vertical-align: middle; + .version-contents-section { + border: 1px solid #ddd; + max-height: 200px; + overflow: auto; + margin: 8px 0; + .table { + margin-bottom: 0; + tr:first-child td { + border-top: none; + } + } } } .repos-panel { + .version-contents-body { + padding: 0px 10px; + .radio-group { + padding-bottom: 10px; + } + } + table > tbody > tr > td { + vertical-align: middle; + } .remove-icon { color: red; margin: 30px 0; http://git-wip-us.apache.org/repos/asf/ambari/blob/784cae2b/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 3b85895..6900624 100644 --- a/ambari-web/app/templates/wizard/step1.hbs +++ b/ambari-web/app/templates/wizard/step1.hbs @@ -22,191 +22,189 @@ <div class="panel panel-default"> <div class="panel-body"> {{! left tabs }} - <div class="row"> - <div class="col-md-2"> - <ul class="nav nav-tabs nav-stacked nav-tabs-left"> - {{#each stack in availableStackTypes}} - <li {{bindAttr class="stack.isSelected:active"}}><a {{action "selectRepoInList" stack target="controller"}} href="#">{{stack.stackName}}</a></li> - {{/each}} - </ul> - </div> - <div class="col-md-10"> - <div class="details-panel"> - <div class="version-info"> - <div class="btn-group"> - <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-info">{{controller.selectedStack.displayName}} <span class="caret"></span></button> - <ul class="dropdown-menu"> - {{#each stack in selectedStackType.stacks}} - <li> - {{!view view.stackRadioButton stackBinding="stack"}} - <a href="#" {{action "changeVersion" stack target="controller"}}>{{stack.displayName}} - {{#if stack.stackDefault}} - ({{t installer.step1.changeVersion.defaultVersion}}) - {{/if}} - </a> - </li> - {{/each}} - <li><a href="#" {{action "uploadVdf" target="controller"}}>{{t installer.step1.addVersion}} ...</a></li> - </ul> - </div> - </div> - <div class="version-contents-section"> - {{#unless servicesForSelectedStack}} - <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.content.empty}}</div> - {{/unless}} - <table class="table table-hover"> - <tbody> - {{#each service in servicesForSelectedStack}} - <tr> - <td class="col-md-4">{{service.displayName}}</td> - <td class="col-md-8">{{service.latestVersion}}</td> - </tr> - {{/each}} - </tbody> - </table> + <div class="tabs-menu"> + <ul class="nav nav-tabs"> + {{#each stack in availableStackTypes}} + <li {{bindAttr class="stack.isSelected:active"}}><a {{action "selectRepoInList" stack target="controller"}} href="#">{{stack.stackName}}</a></li> + {{/each}} + </ul> + </div> + <div class="stacks-options"> + <div class="details-panel"> + <div class="version-info"> + <div class="btn-group"> + <button type="button" data-toggle="dropdown" class="btn dropdown-toggle btn-default">{{controller.selectedStack.displayName}} <span class="caret"></span></button> + <ul class="dropdown-menu"> + {{#each stack in selectedStackType.stacks}} + <li> + {{!view view.stackRadioButton stackBinding="stack"}} + <a href="#" {{action "changeVersion" stack target="controller"}}>{{stack.displayName}} + {{#if stack.stackDefault}} + ({{t installer.step1.changeVersion.defaultVersion}}) + {{/if}} + </a> + </li> + {{/each}} + <li><a href="#" {{action "uploadVdf" target="controller"}}>{{t installer.step1.addVersion}} ...</a></li> + </ul> </div> </div> + <div class="version-contents-section"> + {{#unless servicesForSelectedStack}} + <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.content.empty}}</div> + {{/unless}} + <table class="table table-hover"> + <tbody> + {{#each service in servicesForSelectedStack}} + <tr> + <td class="col-md-4">{{service.displayName}}</td> + <td class="col-md-8">{{service.latestVersion}}</td> + </tr> + {{/each}} + </tbody> + </table> + </div> </div> </div> {{! left tabs end }} - {{! Public Repository radio }} - <div {{bindAttr class=":radio :big-radio :public-radio"}}> - {{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> - {{/if}} - </div> - {{! Public Repository radio END }} - - {{!--Local repo loaded info below--}} - {{view view.useLocalRepoRadioButton classNames="radio big-radio"}} - {{#if App.router.nextBtnClickInProgress}} {{view App.SpinnerView}} {{else}} <form id="repoVersionInfoForm" class="form-horizontal" role="form" name="localVersionInfoForm" novalidate> <div class="panel panel-default repos-panel"> - <div class="panel-heading"> + <div class="step-title"> <p>{{t common.repositories}}</p> </div> + <p class="step-description">{{t installer.step1.repo.body}}</p> <div class="panel-body version-contents-body"> - <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.alert.baseUrl}}</div> - {{#if view.showWarning}} - <div class="alert alert-warning">{{t installer.step1.attentionNeeded}}</div> - {{/if}} + <div class="row radio-group"> + {{! Public Repository radio }} + <div {{bindAttr class=":col-sm-4 :radio :big-radio :public-radio"}}> + {{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> + {{/if}} + </div> + {{!--Local repo radio--}} + {{view view.useLocalRepoRadioButton classNames="radio big-radio col-sm-4"}} + </div> + <div class="alert alert-info" role="alert">{{t installer.step1.useLocalRepo.infoForm.alert.baseUrl}}</div> + {{#if view.showWarning}} + <div class="alert alert-warning">{{t installer.step1.attentionNeeded}}</div> + {{/if}} - {{! OSes and Repositories }} - <div class="row"> - <div class="table-controls row col-sm-12 pull-right"> - <div class="col-sm-12"> - {{! Add OS }} - <div class="btn-group pull-right"> - <button - type="button" {{bindAttr data-original-title="view.addOsButtonTooltip" class=":btn :btn-default :dropdown-toggle :add-os-button view.isAddOsButtonDisabled:disabled"}} - data-toggle="dropdown"> - <i class="glyphicon glyphicon-plus"></i> {{t common.add}} <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - {{#each operatingSystem in selectedStack.operatingSystems}} - {{#unless operatingSystem.isSelected}} - <li><a {{action "addOS" operatingSystem target="controller"}}>{{operatingSystem.osType}}</a></li> - {{/unless}} - {{/each}} - </ul> - </div> - {{! Add OS END}} + {{! OSes and Repositories }} + <div class="row"> + <div class="table-controls row col-sm-12 pull-right"> + <div class="col-sm-12"> + {{! Add OS }} + <div class="btn-group pull-right"> + <button + type="button" {{bindAttr data-original-title="view.addOsButtonTooltip" class=":btn :btn-default :dropdown-toggle :add-os-button view.isAddOsButtonDisabled:disabled"}} + data-toggle="dropdown"> + <i class="glyphicon glyphicon-plus"></i> {{t common.add}} <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + {{#each operatingSystem in selectedStack.operatingSystems}} + {{#unless operatingSystem.isSelected}} + <li><a {{action "addOS" operatingSystem target="controller"}}>{{operatingSystem.osType}}</a></li> + {{/unless}} + {{/each}} + </ul> </div> + {{! Add OS END}} </div> </div> - <table class="table table-hover"> - <thead> - <tr> - <th class="col-sm-2">{{t common.os}}</th> - <th class="col-sm-3">{{t common.name}}</th> - <th class="col-sm-6">{{t installer.step1.advancedRepo.localRepo.column.baseUrl}}</th> - <th class="col-sm-1"></th> - </tr> - </thead> - <tbody> - {{#each operatingSystem in selectedStack.operatingSystems}} - {{#if operatingSystem.isSelected}} - <tr> - <td class="col-sm-2">{{operatingSystem.osType}}</td> - <td class="col-sm-9" colspan="2"> - <table class="table table-condensed no-borders inner-table"> - <tbody> - {{#each repository in operatingSystem.repositories}} - <tr> - <td class="col-sm-3">{{repository.repoId}}</td> - <td class="col-sm-1"> - {{view view.popoverView repositoryBinding="repository"}} - </td> - <td class="col-sm-8"> - <div {{bindAttr class=":repo-url repository.invalidFormatError:has-error repository.invalidError:has-error"}}> - {{view Ember.TextField placeholderBinding="repository.placeholder" valueBinding="repository.baseUrl" disabledBinding="controller.selectedStack.useRedhatSatellite" classNames="form-control"}} - {{#if controller.selectedStack.usePublicRepo}} - <i {{bindAttr class="repository.undo::invisible :icon-undo"}} - {{action "doRestoreDefaultValue" repository target="controller"}} - {{translateAttr title="common.undo"}}> - </i> - {{else}} - <i {{bindAttr class="repository.notEmpty::invisible :icon-undo"}} - {{action "doRestoreToEmpty" repository target="controller"}} - {{translateAttr title="common.undo"}}> - </i> - {{/if}} - </div> - </td> - </tr> - {{/each}} - </tbody> - </table> - </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> - {{t common.remove}} - </a> - </td> - </tr> - {{/if}} - {{/each}} - </tbody> - </table> - {{! 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 class="clearfix"></div> - </div> - {{! Skip Repository Base URL validation END }} + </div> + <table class="table table-hover"> + <thead> + <tr> + <th class="col-sm-2">{{t common.os}}</th> + <th class="col-sm-3">{{t common.name}}</th> + <th class="col-sm-6">{{t installer.step1.advancedRepo.localRepo.column.baseUrl}}</th> + <th class="col-sm-1"></th> + </tr> + </thead> + <tbody> + {{#each operatingSystem in selectedStack.operatingSystems}} + {{#if operatingSystem.isSelected}} + <tr> + <td class="col-sm-2">{{operatingSystem.osType}}</td> + <td class="col-sm-9" colspan="2"> + <table class="table table-condensed no-borders inner-table"> + <tbody> + {{#each repository in operatingSystem.repositories}} + <tr> + <td class="col-sm-3">{{repository.repoId}}</td> + <td class="col-sm-1"> + {{view view.popoverView repositoryBinding="repository"}} + </td> + <td class="col-sm-8"> + <div {{bindAttr class=":repo-url repository.invalidFormatError:has-error repository.invalidError:has-error"}}> + {{view Ember.TextField placeholderBinding="repository.placeholder" valueBinding="repository.baseUrl" disabledBinding="controller.selectedStack.useRedhatSatellite" classNames="form-control"}} + {{#if controller.selectedStack.usePublicRepo}} + <i {{bindAttr class="repository.undo::invisible :icon-undo"}} + {{action "doRestoreDefaultValue" repository target="controller"}} + {{translateAttr title="common.undo"}}> + </i> + {{else}} + <i {{bindAttr class="repository.notEmpty::invisible :icon-undo"}} + {{action "doRestoreToEmpty" repository target="controller"}} + {{translateAttr title="common.undo"}}> + </i> + {{/if}} + </div> + </td> + </tr> + {{/each}} + </tbody> + </table> + </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> + {{t common.remove}} + </a> + </td> + </tr> + {{/if}} + {{/each}} + </tbody> + </table> + {{! OSes and Repositories END }} - {{! Use RedHat Satellite/Spacewalk }} - <div id="use-redhat" class="checkbox"> - {{#view view.redhatCheckBoxView - classNames="use-redhat-checkbox" + {{! 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" }} - <label {{bindAttr for="view.checkboxId" class=":redhat-label :display-inline-block controller.selectedStack.usePublicRepo:disabled" data-original-title="view.redhatDisabledTooltip"}}> - {{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"}}> + <i class="glyphicon glyphicon-question-sign" rel="skip-validation-tooltip" + data-toggle="tooltip" {{translateAttr title="installer.step1.advancedRepo.skipValidation.tooltip"}}> </i> {{/view}} - </div> - {{! Use RedHat Satellite/Spacewalk END }} + <div class="clearfix"></div> + </div> + {{! Skip Repository Base URL validation END }} + + {{! Use RedHat Satellite/Spacewalk }} + <div id="use-redhat" class="checkbox"> + {{#view view.redhatCheckBoxView + classNames="use-redhat-checkbox" + }} + <label {{bindAttr for="view.checkboxId" class=":redhat-label :display-inline-block controller.selectedStack.usePublicRepo:disabled" data-original-title="view.redhatDisabledTooltip"}}> + {{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"}}> + </i> + {{/view}} + </div> + {{! Use RedHat Satellite/Spacewalk END }} </div> </div> </form>