You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2016/11/29 17:57:00 UTC
[53/55] [abbrv] ambari git commit: AMBARI-19011. Fix markup for
widgets browser (onechiporenko)
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-18634
Commit: a95284362adf794636c7437e6416ca4389046e63
Parents: 4dda1d7
Author: Oleg Nechiporenko <on...@apache.org>
Authored: Tue Nov 29 15:03:12 2016 +0200
Committer: Oleg Nechiporenko <on...@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 () {