Repository: ambari Updated Branches: refs/heads/branch-feature-AMBARI-14714-ui 153477463 -> 96959e9bb
AMBARI-22330. Additional UI work for Mpack installer wizard (Ishan Bhatt) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/96959e9b Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/96959e9b Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/96959e9b Branch: refs/heads/branch-feature-AMBARI-14714-ui Commit: 96959e9bbbfcae3b3c30986593be8711f49aa665 Parents: 1534774 Author: Ishan Bhatt <[email protected]> Authored: Sat Oct 28 18:23:59 2017 -0700 Committer: Ishan Bhatt <[email protected]> Committed: Sat Oct 28 18:23:59 2017 -0700 ---------------------------------------------------------------------- ambari-web/app/messages.js | 6 ++- ambari-web/app/styles/application.less | 23 ++++++++ ambari-web/app/styles/wizard.less | 31 ++++++++++- .../app/templates/wizard/configureDownload.hbs | 6 +-- .../app/templates/wizard/selectMpacks.hbs | 56 ++++++++++---------- .../app/templates/wizard/selectMpacks/mpack.hbs | 13 +++-- .../selectMpacks/selectedMpackVersion.hbs | 10 ++-- 7 files changed, 99 insertions(+), 46 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index bb8b218..82adc80 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -601,7 +601,9 @@ Em.I18n.translations = { 'installer.selectMpacks.header': 'Select Management Packs', 'installer.selectMpacks.body.header': 'Select Management Packs', 'installer.selectMpacks.noMpacksAvailable': 'No management packs are available.', - 'installer.selectMpacks.noMpacksSelected': 'Select from the list of available products.', + 'installer.selectMpacks.noMpacksSelected': 'No Management Packs selected', + 'installer.selectMpacks.body.options.header': 'Management Packs', + 'installer.selectMpacks.body.selected.header': 'Selected Management Packs', 'installer.step0.header':'Get Started', 'installer.step0.body.header':'Get Started', @@ -626,6 +628,8 @@ Em.I18n.translations = { 'installer.downloadProducts.body.title': 'Downloading and validating Management Packs', 'installer.downloadProducts.body.description': 'Ambari is downloading the Management Packs and validating its contents', + + 'installer.step1.header':'Select Version', '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.', http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index ace89f9..7823c10 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2810,4 +2810,27 @@ a.abort-icon:hover { .repo-not-selected { opacity: 0.6; +} + +.capsule { + height: 22px; + width: auto; + border-radius: 12px; + background: #f0f0f0; + font-size: 10px; + align-items: center; + border: none; + padding-left: 10px; + padding-right: 10px; + .icon { + color: #999; + font-style: normal; + } +} +.display-flex { + display: flex; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index 53987b4..4330c6a 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -598,6 +598,35 @@ } } +#select-mpacks { + .selected-list { + background-color: #f5f5f5; + .panel-heading { + background-color: #f5f5f5; + } + .capsule { + background-color: #ddd; + } + .empty-selection { + padding: 40px; + font-size: 11px; + font-style: italic; + color: #999; + } + } + .options-list, .selected-list { + margin-bottom: 20px; + .mpack-body { + padding: 15px 0px; + border-bottom: 1px solid; + border-color: #f0f0f0; + .mpack-title { + font-size: 12px; + } + } + } +} + #select-stack .stack-version-selection{ .select-version-label { padding: 5px 25px; @@ -708,7 +737,7 @@ .repo-group { bottom: 0px; position: absolute; - background-color: #5cb85c; + background-color: #3FAE2A; color: white; padding: 5px 10px; width: 100%; http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/templates/wizard/configureDownload.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/configureDownload.hbs b/ambari-web/app/templates/wizard/configureDownload.hbs index c28660e..b62a4d9 100644 --- a/ambari-web/app/templates/wizard/configureDownload.hbs +++ b/ambari-web/app/templates/wizard/configureDownload.hbs @@ -16,7 +16,7 @@ * limitations under the License. }} <div id="select-stack" class="wizard-content col-md-9" {{QAAttr "select-stack-page"}}> - <h4 class="step-title">{{t installer.configureDownload.header}}</h4> + <h4 class="step-header">{{t installer.configureDownload.header}}</h4> <div class="panel panel-default"> <div class="panel-body"> @@ -32,7 +32,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 :wizard-plain-text"}} {{action usePublicRepo target="controller"}}> + <div {{bindAttr class=":col-sm-4 :radio :big-radio :public-radio :wizard-plain-text controller.content.downloadConfig.usePublicRepo:repo-selected:repo-not-selected"}} {{action usePublicRepo target="controller"}}> {{view view.usePublicRepoRadioButton classNames="repo-checkbox" labelIdentifier="use-public-repo"}} <p>{{t installer.configureDownload.publicRepo.hoverDesc}}</p> <i class="icon icon-cloud-download"></i> @@ -40,7 +40,7 @@ </div> {{!--Local repo radio--}} {{!--Not allowing any action on Local Repository for the first iteration. Will use action useLocalRepo later when this option is allowed--}} - <div {{bindAttr class=":col-sm-4 :radio :big-radio :local-radio :wizard-plain-text"}}> + <div {{bindAttr class=":col-sm-4 :radio :big-radio :local-radio :wizard-plain-text controller.content.downloadConfig.usePublicRepo:repo-not-selected:repo-selected"}}> {{view view.useLocalRepoRadioButton classNames="repo-checkbox" labelIdentifier="use-local-repo"}} <p>{{t installer.configureDownload.localRepo.hoverDesc}}</p> <i class="icon icon-tasks"></i> http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/templates/wizard/selectMpacks.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/selectMpacks.hbs b/ambari-web/app/templates/wizard/selectMpacks.hbs index b325b8c..dd55ff3 100644 --- a/ambari-web/app/templates/wizard/selectMpacks.hbs +++ b/ambari-web/app/templates/wizard/selectMpacks.hbs @@ -18,40 +18,38 @@ <div id="select-mpacks" class="wizard-content col-md-9"> <h4 class="step-title">{{t installer.selectMpacks.body.header}}</h4> - <div class="panel panel-default"> + <div class="display-flex"> + <div class="panel panel-default col-md-8"> + <div class="panel-heading"> + <p>{{t installer.selectMpacks.body.options.header}}</p> + </div> <div class="panel-body"> <!-- Registry --> - <div class="col-md-6"> - <div class="panel panel-default"> - <div class="panel-body"> - {{#if controller.content.mpacks}} - {{#each mpack in controller.content.mpacks}} - {{view App.WizardMpackView mpackBinding="mpack"}} - {{/each}} - {{else}} - {{t installer.selectMpacks.noMpacksAvailable}} - {{/if}} - </div> - </div> - </div> - - <!-- Selection --> - <div class="col-md-6"> - <div class="panel panel-default"> - <div class="panel-body"> - {{#if controller.hasSelectedMpackVersions}} - {{#each mpackVersion in controller.selectedMpackVersions}} - {{view App.WizardSelectedMpackVersionView mpackVersionBinding="mpackVersion"}} - {{/each}} - {{else}} - {{t installer.selectMpacks.noMpacksSelected}} - {{/if}} - </div> - </div> + <div class="options-list"> + {{#if controller.content.mpacks}} + {{#each mpack in controller.content.mpacks}} + {{view App.WizardMpackView mpackBinding="mpack"}} + {{/each}} + {{else}} + {{t installer.selectMpacks.noMpacksAvailable}} + {{/if}} </div> - </div> </div> + <!-- Selection --> + <div class="panel panel-default col-md-4 selected-list"> + <div class="panel-heading"> + <p>{{t installer.selectMpacks.body.selected.header}} ({{controller.selectedMpackVersions.length}})</p> + </div> + {{#if controller.hasSelectedMpackVersions}} + {{#each mpackVersion in controller.selectedMpackVersions}} + {{view App.WizardSelectedMpackVersionView mpackVersionBinding="mpackVersion"}} + {{/each}} + {{else}} + <div class="empty-selection">{{t installer.selectMpacks.noMpacksSelected}}</div> + {{/if}} + </div> + </div> </div> <div class="wizard-footer col-md-12"> http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs b/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs index 0f24859..aea598e 100644 --- a/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs +++ b/ambari-web/app/templates/wizard/selectMpacks/mpack.hbs @@ -15,17 +15,16 @@ * See the License for the specific language governing permissions and * limitations under the License. }} -<div class="panel panel-default"> - <div class="panel-heading" role="tab" id="headingOne"> - <h4 class="panel-title">{{mpack.name}} {{view.version}}</h4> - <p>{{mpack.description}}</p> +<div class="mpack-body"> + <div class="mpack-title" role="tab" id="headingOne"> + <p>{{mpack.name}} {{view.version}}</p> </div> <div> {{#each service in view.services}} - <button {{bindAttr id="service.name"}} class="btn-service" {{action "selectService" service.id target="controller"}}> - {{service.name}} + <button {{bindAttr id="service.name"}} class="capsule" {{action "selectService" service.id target="controller"}}> + {{service.name}} <i class="icon icon-plus"></i> <span {{bindAttr class="selected:service-remove:service-add"}} {{bindAttr title="service.version"}}></span> </button> {{/each}} </div> -</div> +</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/96959e9b/ambari-web/app/templates/wizard/selectMpacks/selectedMpackVersion.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/wizard/selectMpacks/selectedMpackVersion.hbs b/ambari-web/app/templates/wizard/selectMpacks/selectedMpackVersion.hbs index 8b24c25..cba1177 100644 --- a/ambari-web/app/templates/wizard/selectMpacks/selectedMpackVersion.hbs +++ b/ambari-web/app/templates/wizard/selectMpacks/selectedMpackVersion.hbs @@ -15,15 +15,15 @@ * See the License for the specific language governing permissions and * limitations under the License. }} -<div class="panel panel-default"> - <div class="panel-heading" role="tab" id="headingOne"> - <h4 class="panel-title">{{mpackVersion.mpack.name}} {{mpackVersion.version}}</h4> +<div class="mpack-body"> + <div class="mpack-title" role="tab" id="headingOne"> + <p>{{mpackVersion.mpack.name}} {{mpackVersion.version}}</p> </div> <div> {{#each service in mpackVersion.services}} {{#if service.selected}} - <button {{bindAttr id="service.name"}} class="btn-service" {{action "removeService" service.id target="controller"}}> - {{service.name}} + <button {{bindAttr id="service.name"}} class="capsule" {{action "removeService" service.id target="controller"}}> + {{service.name}} <i class="icon">×</i> <span {{bindAttr class="selected:service-remove:service-add" title="service.version"}}></span> </button> {{/if}}
