ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From nc...@apache.org
Subject [53/55] [abbrv] ambari git commit: AMBARI-19011. Fix markup for widgets browser (onechiporenko)
Date Tue, 29 Nov 2016 17:57:00 GMT
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 <onechiporenko@apache.org>
Authored: Tue Nov 29 15:03:12 2016 +0200
Committer: Oleg Nechiporenko <onechiporenko@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> &nbsp; {{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> &nbsp; {{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> &nbsp; {{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> &nbsp; {{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}}
-    &nbsp;<span class="caret"></span></a>
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">{{t
dashboard.widgets.wizard.step2.newMetric}}
+    &nbsp;<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>&nbsp;</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>&nbsp;</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 () {


Mime
View raw message