AMBARI-19011. Fix markup for widgets browser (onechiporenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/a9528436 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/a9528436 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/a9528436 Branch: refs/heads/branch-feature-AMBARI-18456 Commit: a95284362adf794636c7437e6416ca4389046e63 Parents: 4dda1d7 Author: Oleg Nechiporenko <onechipore...@apache.org> Authored: Tue Nov 29 15:03:12 2016 +0200 Committer: Oleg Nechiporenko <onechipore...@apache.org> Committed: Tue Nov 29 17:43:16 2016 +0200 ---------------------------------------------------------------------- ambari-web/app/messages.js | 3 + ambari-web/app/styles/application.less | 10 +- ambari-web/app/styles/bootstrap_overrides.less | 9 + .../app/styles/enhanced_service_dashboard.less | 343 +++++++------------ ambari-web/app/styles/hosts.less | 3 - .../modal_popups/widget_browser_popup.hbs | 108 +++--- .../main/service/widgets/create/expression.hbs | 36 +- .../main/service/widgets/create/step1.hbs | 18 +- .../main/service/widgets/create/step2.hbs | 22 +- .../service/widgets/create/step2_add_metric.hbs | 12 +- .../main/service/widgets/create/step2_graph.hbs | 4 +- .../service/widgets/create/step2_number.hbs | 4 +- .../service/widgets/create/step2_template.hbs | 4 +- .../main/service/widgets/create/step3.hbs | 42 ++- .../create/widget_property_threshold.hbs | 18 +- ambari-web/app/views/common/chosen_plugin.js | 21 +- ambari-web/app/views/common/controls_view.js | 2 +- .../main/service/widgets/create/step2_view.js | 2 + 18 files changed, 308 insertions(+), 353 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index a1d84a3..aa43687 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -3071,6 +3071,9 @@ Em.I18n.translations = { 'widget.create.wizard.step2.body.text':'Define the expression with any metrics and valid operators. </br>Use parentheses when necessary.', 'widget.create.wizard.step2.body.template':'Define the template with any number of expressions and any string. An expression can be referenced from a template by enclosing its name with double curly braces.', 'widget.create.wizard.step2.body.warning':'Note: Valid operators are +, -, *, /', + 'widget.create.wizard.step2.body.invalid.expression':'Expression is not complete or is invalid!', + 'widget.create.wizard.step2.body.invalid.expression2':'Invalid expression!', + 'widget.create.wizard.step2.body.invalid.msg2':'Only numbers or operators are allowed in this field.', 'widget.create.wizard.step2.body.template.invalid.msg':'Invalid expression name existed. Should use name "Expression#" with double curly braces.', 'widget.create.wizard.step2.addExpression': 'Add Expression', 'widget.create.wizard.step2.addDataset': 'Add data set', http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index d449ccb..4a50af7 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -28,6 +28,10 @@ html, body { height: 100%; } +.form-text { + line-height: 34px; +} + wbr { display: inline-block; } @@ -1075,9 +1079,7 @@ a:focus { color: #666; font-size: 13px; line-height: 16px; - .row { - margin-bottom: 8px; - } + .upgrade-status-warning { color: @health-status-red; } @@ -1535,6 +1537,8 @@ ul.filter { height: 38px; border: 1px solid #D4D4D4; border-radius: 4px; + margin-top: 1px; + margin-bottom: 1px; } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/styles/bootstrap_overrides.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less index 97c25ab..b8cdf49 100644 --- a/ambari-web/app/styles/bootstrap_overrides.less +++ b/ambari-web/app/styles/bootstrap_overrides.less @@ -113,6 +113,11 @@ select.form-control { } } +.row { + padding-top: 5px; + padding-bottom: 5px; +} + .form-control { float: none; } @@ -358,4 +363,8 @@ select.form-control { margin-left: 0; margin-right: 0; } +} + +.wizard .wizard-body { + padding: 0 !important; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/styles/enhanced_service_dashboard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less index 870e9a8..0d549d7 100644 --- a/ambari-web/app/styles/enhanced_service_dashboard.less +++ b/ambari-web/app/styles/enhanced_service_dashboard.less @@ -39,21 +39,6 @@ } } - .actions .dropdown-menu { - min-width: 270px; - label.checkbox { - padding: 0 20px 0 38px; - margin-bottom: 0; - margin-top: 5px; - } - li.btn-row { - padding: 5px 20px 10px 20px; - } - a.action { - border-bottom: 1px solid @border-color; - } - } - table.graphs { .screensaver{ margin-bottom: 25px; @@ -214,7 +199,7 @@ .corner-icon { display: none; .glyphicon-remove-sign{ - color: #000000; + color: #000; text-shadow: #fff 0 0 15px; position: absolute; left: -7px; @@ -228,7 +213,7 @@ .corner-icon { i { position: relative; - color: #555555; + color: #555; font-weight: bold; text-shadow: #fff -8px 8px 8px, #fff 8px 8px 8px, #fff -8px -8px 8px, #fff 8px -8px 8px; background-color: rgba(255,255,255,0.6); @@ -253,7 +238,7 @@ } & .hidden-description{ display: none; - color: #555555; + color: #555; z-index: 7; font-size: 12px; font-weight: bold; @@ -304,17 +289,13 @@ #add-widget-step1 { .widgets-info-container { .col-md-6.widget-info-section { - width: 44%; - height: 115px; - margin: 5px 15px; - padding-top: 10px; - padding-left: 5px; - } - .col-md-6.widget-info-section:hover { - background-color: #eee; - cursor: pointer; - .icon { - background-color: white; + height: 110px; + &:hover { + background-color: #eee; + cursor: pointer; + .icon { + background-color: white; + } } } .icon { @@ -327,23 +308,17 @@ } } .label-description { - padding-top: 5px; .label-text { - display: block; - font-size: 14px; font-weight: bold; - margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .description-text { font-size: 12px; - display: block; color: #808080; overflow: hidden; text-overflow: ellipsis; - height: 60px; } } } @@ -353,21 +328,14 @@ .control-label { width: auto; } - .threshold-input { - width: 100px; - } } .template.error { .ember-text-area{ border: 1px solid #b94a48; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; } } .badge-container { - width: 80px; - .OK, .WARNING, .CRITICAL { + label { line-height: 26px; height: 26px; display: inline-block; @@ -408,23 +376,12 @@ margin-bottom: 15px; height: 250px; .placeholder { - color: #999999; + color: #999; padding: 50px; } .actions-field { - margin-bottom: 5px; - height: 14%; - .add-operator { - margin-left: 25px; - } - .add-number { - margin-left: 40px; - .input-group-addon { - height: inherit; - } - } .is-invalid { - border-color: @invalid-color + border-color: @invalid-color; } } .metric-field { @@ -438,7 +395,6 @@ cursor: pointer; background: white; display: inline-block; - margin: 10px 0 10px 10px; padding: 5px 16px 5px 12px; border: 1px solid @border-color; position: relative; @@ -470,19 +426,7 @@ position: relative; font-weight: bold; margin: 8px 0 10px 10px; - padding: 5px; - border: 1px solid #dddddd; width: 50px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - border-radius: 0; - -webkit-border-radius: 0; - -moz-border-radius: 0; - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; - transition: none; } .ember-text-field.is-invalid { border: 1px solid @invalid-color; @@ -492,7 +436,7 @@ .template { margin-bottom: 10px; textarea { - width: ~"calc(100% - 10px)"; + width: 100%; } } fieldset { @@ -513,8 +457,6 @@ form { margin: 50px 0; .row { - line-height: 30px; - margin: 10px 0; .title { text-align: right; } @@ -523,115 +465,23 @@ font-size: 8px; margin-left: 2px; } - label.checkbox { - line-height: 20px; - margin-bottom: 0; - margin-top: 5px; - } - .description-text-area { - width: 320px; - height: 75px; - } - .col-md-10.error { - .ember-text-field, - .ember-text-area{ - border: 1px solid #b94a48; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } + textarea { + resize: vertical; + overflow: auto; } } } - #add-widget-step3-save { - margin-left: 5px;; - } } } .add-metric-menu{ .select-options-dropdown { width: 240px; - max-height: 123px; - padding: 0; border: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - li.metric-select { - padding: 5px; - padding-bottom: 0; - border: 1px #ccc solid; - border-bottom: none; - } - li.aggregator-select { - padding: 5px; - padding-bottom: 0; - border: 1px #ccc solid; - border-bottom: none; - border-top: none; - } - li.actions-buttons{ - padding: 5px; - padding-left: 8px; - border: 1px #ccc solid; - border-top: none; - button { - margin-right: 5px; - } - } - .chosen-container.chosen-container-single { - margin: 3px; - .chosen-single { - height: 30px; - width: 220px; - line-height: 20px; - color: #333333; - font-size: 14px; - padding: 4px 14px; - border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - background-color: #f5f5f5; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-repeat: repeat-x; - border: 1px solid #bbbbbb; - span { - margin-right: 8px; - } - div b { - background: none; - width: 0; - height: 0; - top: 13px; - left: -3px; - position: relative; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #333333; - } - } - - .chosen-drop { - margin-top: 2px; - overflow: auto; - min-width: 300px; - width: 300px; - border: 1px solid rgba(0, 0, 0, 0.2); - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + &>li>div { + padding: 3px; } } - } .widgets-browser-popup { @@ -648,43 +498,17 @@ min-width: 750px; max-width: 900px; #services-filter-bar { - position: fixed; - padding: 10px 10px 5px 10px; - margin-bottom: 5px; - border-bottom: transparent; - background-color: white; - width: 56%; - z-index: 10; - - li > a { - font-size: 14px; - padding: 5px 5px; - } - a:hover { - cursor: pointer; - border-bottom: transparent; - } - } - #create-widget-button { - position: fixed; - padding-top: 10px; - right: 23%; - z-index: 11; + margin-top: 10px; } #widgets-info { - padding-top: 40px; .widgets-info-container { .col-md-6.widget-info-section { - width: 44%; - height: 115px; - margin: 5px 15px; - padding-top: 10px; - padding-left: 5px; - } - .col-md-6.widget-info-section:hover { - background-color: #eee; - .icon { - background-color: white; + height: 125px; + &:hover { + background-color: #eee; + .icon { + background-color: white; + } } } .icon { @@ -697,26 +521,19 @@ } } .label-description { - padding-top: 5px; .label-text { display: inline-block; - font-size: 14px; font-weight: bold; - margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - width: 86%; } .is-shared-icon { display: inline-block; - margin-bottom: 0; - margin-right: 5px; color: #888; } .description-text { font-size: 12px; - display: block; color: #808080; overflow-x: hidden; overflow-y: auto; @@ -726,16 +543,8 @@ } .widget-section-actions { - position: relative; - top: -10px; - right: 5px; - .btn { - padding: 3px 8px; - width: 70px; - } + .added-btn.btn { - margin-left: 63px; - width: 85px; .glyphicon-ok { color: #468847; } @@ -753,3 +562,101 @@ } } } + +select.form-control + .chosen-container { + &.chosen-container-single { + width:100% !important; + + .chosen-single { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.428571429; + color: #555; + vertical-align: middle; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); + transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; + background-image:none; + &>span { + width: 90%; + display: block; + } + &>div>b { + line-height:34px; + &:after { + // same as '.caret' + content: " "; + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid \9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + } + } + } + + } + .chosen-drop { + background-color: #FFF; + border: 1px solid #CCC; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + background-clip: padding-box; + margin: 2px 0 0; + } + .chosen-search input[type=text] { + display: block; + width: 100%; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.428571429; + color: #555; + vertical-align: middle; + background-color: #FFF; + border: 1px solid #CCC; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + background-image:none; + } + .chosen-results { + margin: 2px 0 0; + padding: 5px 0; + font-size: 14px; + list-style: none; + background-color: #fff; + margin-bottom: 5px; + + li, li.active-result { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + color: #333; + white-space: nowrap; + background-image:none; + } + li:hover, li.active-result:hover, li.highlighted { + color: #FFF; + text-decoration: none; + background-color: #428BCA; + background-image:none; + } + li.disabled-result{ + background-color: #fff !important; + color: #333 !important; + } + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/styles/hosts.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/hosts.less b/ambari-web/app/styles/hosts.less index 0dde61d..9a7ce24 100644 --- a/ambari-web/app/styles/hosts.less +++ b/ambari-web/app/styles/hosts.less @@ -408,9 +408,6 @@ list-style: none; } } - &>.row { - padding-bottom: 10px; - } } .logs-tab-content { http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs b/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs index 3f76a0a..2cc40c2 100644 --- a/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs +++ b/ambari-web/app/templates/common/modal_popups/widget_browser_popup.hbs @@ -19,14 +19,6 @@ <div id="widget-browser-popup"> {{#if view.isLoaded}} <div class="widget-browser-content"> - {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}} - <!--Create new widget button--> - <div class="btn-group pull-right" id="create-widget-button"> - <button type="button" class="btn btn-primary" {{action "createWidget" target="view"}} > - <i class="glyphicon glyphicon-plus"></i> {{t dashboard.widgets.create}} - </button> - </div> - {{/isAuthorized}} <!--Filters bar: service name filter, status filter here--> <ul id="services-filter-bar" class="nav nav-tabs"> @@ -34,6 +26,13 @@ <li {{bindAttr class="service.isActive:active"}}> <a {{action "filterByService" service.value target="view"}}>{{service.label}}</a></li> {{/each}} + {{#isAuthorized "SERVICE.MODIFY_CONFIGS"}} + <li class="pull-right"> + <button type="button" class="btn btn-primary" {{action "createWidget" target="view"}} > + <i class="glyphicon glyphicon-plus"></i> {{t dashboard.widgets.create}} + </button> + </li> + {{/isAuthorized}} </ul> <!--Widgets table two column--> @@ -43,48 +42,57 @@ {{else}} <div class="widgets-info-container row"> {{#each widget in view.filteredContent}} - <div class="col-md-6 row widget-info-section"> - <div class="icon col-md-4"> - <a class="widget-icon-image" target="_blank"><img {{bindAttr src="widget.iconPath"}}></a> - </div> - <div class="label-description col-md-8"> - <p class="label-text">{{widget.widgetName}}</p> - <p class="is-shared-icon pull-right"> - {{#if widget.isShared}} - <i class="glyphicon glyphicon-group" rel="shared-icon-tooltip" - {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i> - {{/if}} - </p> - <p class="description-text">{{widget.description}}</p> - </div> - - <div class="widget-section-actions btn-group pull-right"> - {{#if widget.added}} - <button type="button" class="btn added-btn" {{action "hideWidget" widget target="controller"}} > - <i class="glyphicon glyphicon-ok"></i> {{t dashboard.widgets.browser.action.added}} - </button> - {{else}} - <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> - {{t common.more}}<span class="caret"></span> - </button> - <ul class="dropdown-menu"> - <li> - <a href="#" {{action "deleteWidget" widget target="controller"}}> - {{t dashboard.widgets.browser.action.delete}} - </a> - </li> - <li> - {{#unless widget.isShared}} - <a href="#" {{action "shareWidget" widget target="controller"}}> - {{t dashboard.widgets.browser.action.share}} - </a> - {{/unless}} - </li> - </ul> - <button type="button" class="btn btn-default" {{action "addWidget" widget target="controller"}} > - {{t dashboard.widgets.browser.action.add}} - </button> - {{/if}} + <div class="col-md-6 widget-info-section"> + <div class="row"> + <div class="col-md-4"> + <div class="icon"> + <a class="widget-icon-image" target="_blank"><img {{bindAttr src="widget.iconPath"}}></a> + </div> + </div> + <div class="col-md-8"> + <div class="label-description"> + <p class="label-text">{{widget.widgetName}}</p> + <p class="is-shared-icon pull-right"> + {{#if widget.isShared}} + <i class="glyphicon glyphicon-group" rel="shared-icon-tooltip" + {{translateAttr data-original-title="dashboard.widgets.browser.shareIcon.tooltip"}}></i> + {{/if}} + </p> + <p class="description-text">{{widget.description}}</p> + </div> + {{! buttons }} + <div class="widget-section-actions align-right"> + {{#if widget.added}} + <button type="button" class="btn added-btn" {{action "hideWidget" widget target="controller"}} > + <i class="glyphicon glyphicon-ok"></i> {{t dashboard.widgets.browser.action.added}} + </button> + {{else}} + <div class="btn-group"> + <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> + {{t common.more}}<span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li> + <a href="#" {{action "deleteWidget" widget target="controller"}}> + {{t dashboard.widgets.browser.action.delete}} + </a> + </li> + <li> + {{#unless widget.isShared}} + <a href="#" {{action "shareWidget" widget target="controller"}}> + {{t dashboard.widgets.browser.action.share}} + </a> + {{/unless}} + </li> + </ul> + </div> + <button type="button" class="btn btn-default" {{action "addWidget" widget target="controller"}} > + {{t dashboard.widgets.browser.action.add}} + </button> + {{/if}} + </div> + {{! buttons end }} + </div> </div> </div> {{/each}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/expression.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/expression.hbs b/ambari-web/app/templates/main/service/widgets/create/expression.hbs index 5d05b4a..42be0bc 100644 --- a/ambari-web/app/templates/main/service/widgets/create/expression.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/expression.hbs @@ -17,34 +17,42 @@ }} <div class="actions-field row"> - {{view App.AddMetricExpressionView class="add-metric-menu col-md-2"}} - <div class="col-md-2"> - <div class="btn-group add-operator"> - <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> + <div class="col-md-12"> + {{! add metric }} + {{view App.AddMetricExpressionView class="add-metric-menu pull-left"}} + {{! add metric end }} + + {{! add operator }} + <div class="btn-group add-operator pull-left mlm"> + <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"> {{t dashboard.widgets.wizard.step2.newOperator}} <span class="caret"></span> - </a> + </button> <ul class="dropdown-menu"> {{#each operator in view.OPERATORS}} <li><a href="#" {{action addOperator operator target="view"}}>{{operator}}</a></li> {{/each}} </ul> </div> - </div> - <div class="col-md-7 row add-number"> - <div class="input-group col-md-5"> - {{view App.AddNumberExpressionView valueBinding="view.numberValue" class="form-control col-md-3"}} - <div class="input-group-btn"> - <button class="btn btn-default" {{action addNumber target="view"}} {{bindAttr disabled="view.isNumberValueInvalid"}}>{{t dashboard.widgets.wizard.step2.newNumber}}</button> + {{! add operator end }} + + {{! add number }} + <div class="add-number pull-left mlm"> + <div class="input-group"> + {{view App.AddNumberExpressionView valueBinding="view.numberValue" class="form-control"}} + <div class="input-group-btn"> + <button class="btn btn-default" {{action addNumber target="view"}} {{bindAttr disabled="view.isNumberValueInvalid"}}>{{t dashboard.widgets.wizard.step2.newNumber}}</button> + </div> </div> </div> + {{! add number end }} </div> </div> {{#if view.isInvalid}} - <div class="alert alert-error"> - Invalid expression! + <div class="alert alert-danger"> + {{t widget.create.wizard.step2.body.invalid.expression2}} {{#if view.isInvalidTextfield}} - Only numbers or operators are allowed in this field. + {{t widget.create.wizard.step2.body.invalid.msg2}} {{/if}} </div> {{/if}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step1.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step1.hbs b/ambari-web/app/templates/main/service/widgets/create/step1.hbs index 0edc935..80fd23f 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step1.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step1.hbs @@ -25,15 +25,19 @@ <h4>{{t widget.create.wizard.step1.body.text}}</h4> <div class="widgets-info-container row"> {{#each option in options}} - <div class="col-md-6 row widget-info-section" rel="selectable-tooltip" + <div class="col-md-6 widget-info-section pts" rel="selectable-tooltip" {{translateAttr data-original-title="widget.create.wizard.step1.body.choose.tooltip"}} {{action "chooseOption" option.name target="controller"}}> - <div class="icon col-md-4"> - <a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a> - </div> - <div class="label-description col-md-8"> - <p class="label-text">{{option.displayName}}</p> - <p class="description-text">{{option.description}}</p> + <div class="row"> + <div class="col-md-4"> + <div class="icon"> + <a class="widget-icon-image" target="_blank"><img {{bindAttr src="option.iconPath"}}></a> + </div> + </div> + <div class="label-description col-md-8"> + <p class="label-text">{{option.displayName}}</p> + <p class="description-text">{{option.description}}</p> + </div> </div> </div> {{/each}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step2.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step2.hbs b/ambari-web/app/templates/main/service/widgets/create/step2.hbs index aac3726..42bfb02 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step2.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step2.hbs @@ -29,22 +29,30 @@ {{#if view.templateType.isTemplate}} {{template "templates/main/service/widgets/create/step2_template"}} {{/if}} + {{#if widgetPropertiesViews.length}} <div class="panel panel-default"> <div class="panel-body"> <form class="form-horizontal"> {{#each property in widgetPropertiesViews}} - <div {{bindAttr class=":form-group :col-md-12 property.name property.isValid::error"}}> - <label class="control-label">{{property.label}} - {{#if property.isRequired }} - <i class="glyphicon glyphicon-asterisk"></i> - {{/if}} - </label> - {{view property.viewClass propertyBinding="property"}} + <div {{bindAttr class="property.name property.isValid::error"}}> + <div class="form-group row"> + <div class="col-md-2"> + <label class="control-label">{{property.label}} + {{#if property.isRequired }} + <i class="glyphicon glyphicon-asterisk"></i> + {{/if}} + </label> + </div> + <div class="col-md-3"> + {{view property.viewClass propertyBinding="property"}} + </div> + </div> </div> {{/each}} </form> </div> </div> + {{/if}} </div> <div class="wizard-footer col-md-12"> <div class="btn-area"> http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs index 7d39dfc..31f4e33 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs @@ -17,8 +17,8 @@ }} <div class="btn-group dropdown"> - <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t dashboard.widgets.wizard.step2.newMetric}} - <span class="caret"></span></a> + <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t dashboard.widgets.wizard.step2.newMetric}} + <span class="caret"></span></button> <ul class="dropdown-menu service-level-dropdown"> {{#if controller.content.isMetricsLoaded}} <!--service level--> @@ -42,9 +42,11 @@ {{view App.JqueryChosenView optionsBinding="view.parentView.AGGREGATE_FUNCTIONS" elementIdBinding="component.aggregatorId" selectionObjBinding="view.aggregateFnSelectionObj"}} </li> <li class="actions-buttons"> - <button class="btn btn-default" href="#" {{action cancel target="view"}}>{{t common.cancel}}</button> - <button {{bindAttr class=":btn :btn-primary component.isAddEnabled::disabled"}} href="#" - {{action addMetric component target="view"}}>{{t common.add}}</button> + <div> + <button class="btn btn-default" href="#" {{action cancel target="view"}}>{{t common.cancel}}</button> + <button {{bindAttr class=":btn :btn-primary component.isAddEnabled::disabled"}} + {{action addMetric component target="view"}}>{{t common.add}}</button> + </div> </li> </ul> </li> http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs index 4a8638c..5b49613 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step2_graph.hbs @@ -23,8 +23,8 @@ <div class="panel panel-default"> <div class="panel-body"> {{#if isAnyExpressionInvalid}} - <div class="alert alert-error"> - Expression is not complete or is invalid! + <div class="alert alert-danger"> + {{t widget.create.wizard.step2.body.invalid.expression}} </div> {{/if}} {{#each dataSet in dataSets}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs index dfd86cd..3e5d481 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step2_number.hbs @@ -23,8 +23,8 @@ <div class="panel panel-default"> <div class="panel-body"> {{#if isAnyExpressionInvalid}} - <div class="alert alert-error"> - Expression is not complete or is invalid! + <div class="alert alert-danger"> + {{t widget.create.wizard.step2.body.invalid.expression}} </div> {{/if}} {{#each expression in expressions}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs index a743378..8df20d5 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step2_template.hbs @@ -36,8 +36,8 @@ {{t widget.create.wizard.step2.body.text}} </div> {{#if isAnyExpressionInvalid}} - <div class="alert alert-error"> - Expression is not complete or is invalid! + <div class="alert alert-danger"> + {{t widget.create.wizard.step2.body.invalid.expression}} </div> {{/if}} {{#each expression in expressions}} http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/step3.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/step3.hbs b/ambari-web/app/templates/main/service/widgets/create/step3.hbs index 45d3142..f078ea8 100644 --- a/ambari-web/app/templates/main/service/widgets/create/step3.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/step3.hbs @@ -20,22 +20,32 @@ <h4 class="step-title">{{t widget.create.wizard.step3.header}}</h4> <div class="panel panel-default"> <div class="panel-body"> - <form> - <div class="row"> - <div class="col-md-2 title">{{t widget.create.wizard.step3.widgetName}}<i class="glyphicon glyphicon-asterisk"></i></div> - <div {{bindAttr class=":col-md-10 isNameInvalid:error"}}> + <form class="form-horizontal"> + <div {{bindAttr class="isNameInvalid:has-error :row :form-group"}}> + <div class="col-md-2 title"> + <label class="control-label">{{t widget.create.wizard.step3.widgetName}}<i class="glyphicon glyphicon-asterisk"></i></label> + </div> + <div class="col-md-10"> {{view Ember.TextField valueBinding="widgetName" class="form-control"}} {{#if isNameInvalid}} - <div>{{widgetNameErrorMessage}}</div> + <div> + <span class="help-block validation-block"> + {{widgetNameErrorMessage}} + </span> + </div> {{/if}} </div> </div> <div class="row"> - <div class="col-md-2 title">{{t common.author}}</div> - <div class="col-md-10">{{widgetAuthor}}</div> + <div class="col-md-2 title"> + <label class="control-label">{{t common.author}}</label> + </div> + <div class="col-md-10"><span class="form-text">{{widgetAuthor}}</span></div> </div> <div class="row"> - <div class="col-md-2 title">{{t widget.create.wizard.step3.sharing}}</div> + <div class="col-md-2 title"> + <label class="control-label">{{t widget.create.wizard.step3.sharing}}</label> + </div> <div class="col-md-10"> {{view App.CheckboxView classNames="checkbox" @@ -46,12 +56,18 @@ </div> </div> - <div class="row"> - <div class="col-md-2 title">{{t common.description}}</div> - <div {{bindAttr class=":col-md-10 isDescriptionInvalid:error"}}> - {{view Ember.TextArea valueBinding="widgetDescription" class="description-text-area"}} + <div {{bindAttr class=":row :form-group isDescriptionInvalid:has-error"}}> + <div class="col-md-2 title"> + <label class="control-label">{{t common.description}}</label> + </div> + <div class="col-md-10"> + {{view Ember.TextArea valueBinding="widgetDescription" class="form-control description-text-area"}} {{#if isDescriptionInvalid}} - <div>{{descriptionErrorMessage}}</div> + <div> + <span class="help-block validation-block"> + {{descriptionErrorMessage}} + </span> + </div> {{/if}} </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs b/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs index 7196ddb..bbceabb 100644 --- a/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs +++ b/ambari-web/app/templates/main/service/widgets/create/widget_property_threshold.hbs @@ -17,16 +17,20 @@ }} <div class="row"> - <div class="col-md-3 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span> </div> - <div {{bindAttr class=":col-md-2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip" + <div class="col-md-4 badge-container"> + <label><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span></label> + </div> + <div {{bindAttr class=":col-md-8 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip" {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}> - {{view Em.TextField valueBinding="view.property.smallValue" class ="col-md-10 form-control"}} -</div> + {{view Em.TextField valueBinding="view.property.smallValue" class="form-control"}} + </div> </div> <div class="row"> - <div class="col-md-3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span> </div> - <div {{bindAttr class=":col-md-2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip" + <div class="col-md-4 badge-container"> + <label><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span></label> + </div> + <div {{bindAttr class=":col-md-8 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip" {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}> - {{view Em.TextField valueBinding="view.property.bigValue" class ="col-md-10 form-control"}} + {{view Em.TextField valueBinding="view.property.bigValue" class="form-control"}} </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/views/common/chosen_plugin.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/chosen_plugin.js b/ambari-web/app/views/common/chosen_plugin.js index 95f6c1e..3a897c5 100644 --- a/ambari-web/app/views/common/chosen_plugin.js +++ b/ambari-web/app/views/common/chosen_plugin.js @@ -19,7 +19,8 @@ App.JqueryChosenView = Em.View.extend({ templateName: require('templates/common/chosen_plugin'), tagName: 'select', - // This needs to be binded from template + classNames: ['form-control'], + // This needs to be bound from template elementId: '', title: '', options: [], @@ -42,23 +43,5 @@ App.JqueryChosenView = Em.View.extend({ no_results_text: self.get('selectionObj.no_results_text') }).change(self.get('selectionObj.onChangeCallback')); - // Expand the dropdown to accommodate the largest option on mouseenter event - // and reset it to the original fixed width on the mouseleave event - Em.run.later(this, function() { - var chosenDropDownId = elementId + '_chosen' + ' .chosen-drop'; - var chosenDropDownEl; - $(chosenDropDownId) - .each(function() { - chosenDropDownEl = $(this); - chosenDropDownEl.data("origWidth", chosenDropDownEl.outerWidth()); - }) - .mouseenter(function(){ - $(this).css("width", "auto"); - }) - .mouseleave(function(){ - chosenDropDownEl = $(this); - chosenDropDownEl.css("width", chosenDropDownEl.data("origWidth")); - }); - }, 1000); } }); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/views/common/controls_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/controls_view.js b/ambari-web/app/views/common/controls_view.js index 37d7165..dd475b6 100644 --- a/ambari-web/app/views/common/controls_view.js +++ b/ambari-web/app/views/common/controls_view.js @@ -943,7 +943,7 @@ App.ServiceConfigComponentHostsView = Ember.View.extend(App.ServiceConfigMultipl viewName: 'serviceConfigSlaveHostsView', - classNames: ['component-hosts'], + classNames: ['component-hosts', 'form-text'], valueBinding: 'serviceConfig.value', http://git-wip-us.apache.org/repos/asf/ambari/blob/a9528436/ambari-web/app/views/main/service/widgets/create/step2_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/service/widgets/create/step2_view.js b/ambari-web/app/views/main/service/widgets/create/step2_view.js index dbc5bc7..24a43da 100644 --- a/ambari-web/app/views/main/service/widgets/create/step2_view.js +++ b/ambari-web/app/views/main/service/widgets/create/step2_view.js @@ -65,6 +65,7 @@ App.WidgetWizardStep2View = Em.View.extend({ App.WidgetPropertyTextFieldView = Em.TextField.extend({ valueBinding: 'property.value', placeholderBinding: 'property.placeholder', + classNames: ['form-control'], classNameBindings: ['property.classNames', 'parentView.basicClass'] }); @@ -76,6 +77,7 @@ App.WidgetPropertyThresholdView = Em.View.extend({ App.WidgetPropertySelectView = Em.Select.extend({ contentBinding: 'property.options', classNameBindings: ['property.classNames', 'parentView.basicClass'], + classNames: ['form-control'], optionLabelPath: "content.label", optionValuePath: "content.value", didInsertElement: function () {
