AMBARI-10839 Move error/warning decorator from actions area to beside config-name. (ababiichuk)

ambari-web/app/mixins/main/service/configs/widget_popover_support.js

@@ -48,8 +48,6 @@ App.WidgetPopoverSupport = Em.Mixin.create({
 
   initPopover: function () {
     if (this.get('isPopoverEnabled') !== false) {
-      if (this.get('config.name') == 'keyserver_port')
-        console.error(this.get('popoverPlacement'));
       var leftPopoverTemplate = '<div class="popover config-widget-left-popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>';
       App.popover(this.$('.original-widget'), {
         template: this.get('popoverPlacement') == 'left'? leftPopoverTemplate : undefined,

ambari-web/app/styles/widgets.less

@@ -52,6 +52,11 @@
     &.text-success {
       color: @green;
     }
+    .icon-warning-sign {
+      &.warning {
+        color: @health-status-yellow
+      }
+    }
   }
   .action-button {
     margin-right: @undo-btn-margin;
@@ -75,18 +80,14 @@
       text-decoration: none;
       display: block;
     }
-    .widget-action-final {
+    .widget-action-final,
+    .widget-action-switch-view {
       padding-left: 1px;
       color: @widget-config-override-action-color;
       &.active {
         color: @widget-config-override-action-active-color;
       }
     }
-    .icon-warning-sign {
-      &.warning {
-        color: @health-status-yellow
-      }
-    }
   }
 }
 
@@ -130,6 +131,7 @@
       line-height: 14px;
       min-width: 30px;
       z-index: 1;
+      visibility: inherit;
       &.tooltip-min,
       &.tooltip-max {
         display: none;
@@ -217,6 +219,7 @@
   .ui-slider-wrapper {
     .ui-slider-wrapper-inner {
       width: 68%;
+      padding-left: 10px;
       .slider.slider-horizontal {
         width: 100%;
       }

ambari-web/app/templates.js

@@ -26,3 +26,4 @@ require("templates/main/service/widgets/create/step2_number");
 require("templates/main/service/widgets/create/step2_template");
 require("templates/main/service/widgets/create/step2_graph");
 require('templates/common/configs/widgets/controls');
+require('templates/common/configs/widgets/config_label');

ambari-web/app/templates/common/configs/widgets/checkbox_config_widget.hbs

@@ -19,7 +19,10 @@
   <label>
     {{view view.configView class="pull-left"}}
     {{#if view.isOriginalSCP}}
-      <span class="widget-config-label">{{view.configLabel}}</span>
+      <span {{bindAttr class=":widget-config-label view.configLabelClass"}}>
+        {{view view.issueView configBinding="view.config"}}
+        {{view.configLabel}}
+      </span>
     {{else}}
       <span class="widget-config-label text-success">{{t common.override}}</span>
     {{/if}}

ambari-web/app/templates/common/configs/widgets/combo_config_widget.hbs

@@ -15,10 +15,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 }}
-{{#if view.isOriginalSCP}}
-  <div class="clearfix"></div>
-  <p class="widget-config-label">{{view.configLabel}}</p>
-{{/if}}
+{{template "templates/common/configs/widgets/config_label"}}
 <div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget view.disabled:disabled view.showAsTextBox:hide"}}>
   <div class="input-append">
     <div class="dropdown btn-group">

ambari-web/app/templates/common/configs/widgets/config_label.hbs

@@ -0,0 +1,25 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+{{#if view.isOriginalSCP}}
+  <div class="clearfix"></div>
+  <p {{bindAttr class=":widget-config-label view.configLabelClass"}}>
+   {{view view.issueView configBinding="view.config"}}
+   {{formatWordBreak view.configLabel}}
+  </p>
+{{/if}}

ambari-web/app/templates/common/configs/widgets/controls.hbs

@@ -24,13 +24,6 @@
   {{/if}}
   <div class="widget-config-controls">
     <div class="widget-col left">
-      {{#if view.supportSwitchToCheckBox}}
-        <a href="#"
-          {{bindAttr class=":icon-pencil view.isHover::hide"}}
-          {{action "toggleWidgetView" target="view"}}>
-        </a>
-      {{/if}}
-      {{view view.issueView configBinding="view.config"}}
       {{#if view.config.isNotDefaultValue}}
         {{#if view.undoAllowed}}
           <a class="widget-action widget-action-undo" href="#" {{action "restoreValue" target="view"}}>
@@ -38,6 +31,12 @@
           </a>
         {{/if}}
       {{/if}}
+      {{#if view.supportSwitchToCheckBox}}
+        <a href="#"
+          {{bindAttr class=":icon-pencil :widget-action :widget-action-switch-view view.isHover::hide view.showAsTextBox::active"}}
+          {{action "toggleWidgetView" target="view"}}>
+        </a>
+      {{/if}}
     </div>
     <div class="widget-col right">
       {{#if view.config.supportsFinal}}

ambari-web/app/templates/common/configs/widgets/directory_config_widget.hbs

@@ -16,11 +16,8 @@
 * limitations under the License.
 }}
 
-<div class="span10">
-  {{#if view.isOriginalSCP}}
-    <div class="clearfix"></div>
-    <span class="widget-config-label">{{view.config.displayName}}</span>
-  {{/if}}
+<div {{bindAttr class="view.isOriginalSCP:original-widget"}}>
+  {{template "templates/common/configs/widgets/config_label"}}
    <div class="directory-textarea-wrapper">
      {{view view.configView}}
    </div>

ambari-web/app/templates/common/configs/widgets/list_config_widget.hbs

@@ -17,10 +17,7 @@
 }}
 
 <div {{bindAttr class="view.config.isHiddenByFilter:hide view.isOriginalSCP:original-widget :widget-config :list-widget"}}>
-  {{#if view.isOriginalSCP}}
-    <div class="clearfix"></div>
-    <p class="widget-config-label">{{view.configLabel}}</p>
-  {{/if}}
+  {{template "templates/common/configs/widgets/config_label"}}
   <div class="pull-left btn-group">
     <a {{bindAttr class=":btn :dropdown-toggle view.config.isEditable::disabled view.showAsTextBox:hide"}} data-toggle="dropdown">{{view.displayVal}} <span class="caret"></span></a>
     <ul class="dropdown-menu">

ambari-web/app/templates/common/configs/widgets/radio_button_config.hbs

@@ -16,12 +16,7 @@
 * limitations under the License.
 }}
 
-{{#if view.isOriginalSCP}}
-  <div class="clearfix"></div>
-  <p class="widget-config-label">
-    {{view.configLabel}}
-  </p>
-{{/if}}
+{{template "templates/common/configs/widgets/config_label"}}
 <div class="pull-left">
   {{#each item in view.content}}
     <label>

ambari-web/app/templates/common/configs/widgets/slider_config_widget.hbs

@@ -17,10 +17,7 @@
 }}
 
 <div class="widget-config slider-widget">
-  {{#if view.isOriginalSCP}}
-    <div class="clearfix"></div>
-    <p class="widget-config-label">{{formatWordBreak view.configLabel}}</p>
-  {{/if}}
+  {{template "templates/common/configs/widgets/config_label"}}
   <div {{bindAttr class="view.isOriginalSCP:original-widget view.showAsTextBox:hide :ui-slider-wrapper"}}>
     <div {{bindAttr class=":pull-left :ui-slider-wrapper-inner"}}>{{view Ember.TextField valueBinding="view.config.value" class="input-mini slider-input"}}</div>
   </div>

ambari-web/app/templates/common/configs/widgets/textfield_config_widget.hbs

@@ -17,10 +17,7 @@
 }}
 
 <div>
-  {{#if view.isOriginalSCP}}
-    <div class="clearfix"></div>
-    <p class="widget-config-label">{{formatWordBreak view.configLabel}}</p>
-  {{/if}}
+  {{template "templates/common/configs/widgets/config_label"}}
   <div {{bindAttr class=":text-field-wrapper view.isOriginalSCP:original-widget"}}>
     {{view view.configView}}
   </div>

ambari-web/app/templates/common/configs/widgets/time_interval_spinner.hbs

@@ -16,10 +16,7 @@
 * limitations under the License.
 }}
 
-{{#if view.isOriginalSCP}}
-  <div class="clearfix"></div>
-  <p class="widget-config-label">{{view.configLabel}}</p>
-{{/if}}
+{{template "templates/common/configs/widgets/config_label"}}
 <div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget view.showAsTextBox:hide"}}>
   {{#each spinnerContent in view.content}}
     {{view App.SpinnerInputView contentBinding="spinnerContent" disabledBinding="view.disabled"}}

ambari-web/app/templates/common/configs/widgets/toggle_config_widget.hbs

@@ -16,10 +16,7 @@
 * limitations under the License.
 }}
 
-{{#if view.isOriginalSCP}}
-  <div class="clearfix"></div>
-  <p class="widget-config-label">{{view.configLabel}}</p>
-{{/if}}
+{{template "templates/common/configs/widgets/config_label"}}
 <div {{bindAttr class=":pull-left view.isOriginalSCP:original-widget"}}>
   {{view Ember.Checkbox checkedBinding="view.switcherValue"}}
 </div>

ambari-web/app/views/common/configs/widgets/config_widget_view.js

@@ -50,6 +50,12 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
    */
   canEdit: true,
 
+  /**
+   * Config label class attribute. Displays validation status of config.
+   * @type {string}
+   */
+  configLabelClass: '',
+
   /**
    * Tab where current widget placed
    * Bound in the template
@@ -110,17 +116,55 @@ App.ConfigWidgetView = Em.View.extend(App.SupportsDependentConfigs, App.WidgetPo
 
     config: null,
 
+    issueIconClass: '',
+
+    issueMessage: false,
+
     didInsertElement: function() {
       App.tooltip($(this.get('element')));
+      this.errorLevelObserver();
+      this.addObserver('issuedConfig.warnMessage', this, this.errorLevelObserver);
+      this.addObserver('issuedConfig.errorMessage', this, this.errorLevelObserver);
+    },
+
+    willDestroyElement: function() {
+      this.removeObserver('issuedConfig.warnMessage', this, this.errorLevelObserver);
+      this.removeObserver('issuedConfig.errorMessage', this, this.errorLevelObserver);
+    },
+
+    errorLevelObserver: function() {
+      var messageLevel = this.get('issuedConfig.errorMessage') ? 'ERROR': this.get('issuedConfig.warnMessage') ? 'WARN' : 'NONE';
+      var issue = {
+        ERROR: {
+          iconClass: '',
+          message: this.get('issuedConfig.errorMessage'),
+          configLabelClass: 'text-error'
+        },
+        WARN: {
+          iconClass: 'warning',
+          message: this.get('issuedConfig.warnMessage'),
+          configLabelClass: 'text-warning'
+        },
+        NONE: {
+          iconClass: 'hide',
+          message: false,
+          configLabelClass: ''
+        }
+      }[messageLevel];
+      this.set('parentView.configLabelClass', issue.configLabelClass);
+      this.set('issueIconClass', issue.iconClass);
+      this.set('issueMessage', issue.message);
     },
 
-    issueIconClass: function() {
-      return this.get('config.errorMessage') ? '': this.get('config.warnMessage') ? 'warning' : 'not-show';
-    }.property('config.warnMessage', 'config.errorMessage'),
+    issuedConfig: function() {
+      var config = this.get('config');
+      // check editable overrides
+      if (!config.get('isEditable') && config.get('overrides.length') && config.get('overrides').someProperty('isEditable', true)) {
+        config = config.get('overrides').findProperty('isEditable', true);
+      }
+      return config;
+    }.property('config.isEditable', 'config.overrides.length')
 
-    issueMessage: function() {
-      return this.get('config.errorMessage') || this.get('config.warnMessage');
-    }.property('config.warnMessage', 'config.errorMessage')
   }),
 
   /**

ambari-web/app/views/common/configs/widgets/directory_config_widget_view.js

@@ -31,12 +31,14 @@ App.DirectoryConfigWidgetView = App.ConfigWidgetView.extend({
    * @property configView
    */
   configView: App.ServiceConfigTextArea.extend({
+    isPopoverEnabled: 'false',
     widthClass: 'span12',
     serviceConfigBinding: 'parentView.config',
     popoverPlacement: 'top'
   }),
 
   didInsertElement: function() {
+    this.initPopover();
     this.set('config.displayType', this.get('config.stackConfigProperty.widget.type'));
   }