AMBARI-6906. Validation error and warning should be shown as hovers

ambari-server/src/main/resources/stacks/HDP/2.0.6/services/stack_advisor.py

@@ -192,8 +192,8 @@ class HDP206StackAdvisor(StackAdvisor):
       secondaryNameNodeHosts = secondaryNameNodeHosts[0]
       commonHosts = list(set(nameNodeHosts).intersection(secondaryNameNodeHosts))
       for host in commonHosts:
-        items.append( { "type": 'host-component', "level": 'ERROR', "message": 'NameNode and Secondary NameNode cannot be hosted on same machine', "component-name": 'NAMENODE', "host": str(host) } )
-        items.append( { "type": 'host-component', "level": 'ERROR', "message": 'NameNode and Secondary NameNode cannot be hosted on same machine', "component-name": 'SECONDARY_NAMENODE', "host": str(host) } )
+        items.append( { "type": 'host-component', "level": 'WARN', "message": 'NameNode and Secondary NameNode cannot be hosted on same machine', "component-name": 'NAMENODE', "host": str(host) } )
+        items.append( { "type": 'host-component', "level": 'WARN', "message": 'NameNode and Secondary NameNode cannot be hosted on same machine', "component-name": 'SECONDARY_NAMENODE', "host": str(host) } )
 
     # Validating cardinality
     for component in componentsList:
@@ -489,7 +489,7 @@ def getXmxSize(value):
     return result[0] + result[1].lower()
   return result[0]
 
-def formatXmxSizeToBytes(value):	
+def formatXmxSizeToBytes(value):
   value = value.lower()
   if len(value) == 0:
     return 0

ambari-web/app/controllers/wizard/step5_controller.js

@@ -140,6 +140,13 @@ App.WizardStep5Controller = Em.Controller.extend({
    */
   generalWarningMessages: [],
 
+  /**
+   * true if any warning exists
+   */
+  anyWarning: function() {
+    return this.get('servicesMasters').some(function(m) { return m.get('warnMessage'); }) || this.get('generalWarningMessages').some(function(m) { return m; });
+  }.property('servicesMasters.@each.warnMessage', 'generalWarningMessages'),
+
   /**
    * List of host with assigned masters
    * Format:
@@ -274,8 +281,8 @@ App.WizardStep5Controller = Em.Controller.extend({
   updateValidationsSuccessCallback: function (data) {
     var self = this;
 
-    this.set('generalErrorMessages', []);
-    this.set('generalWarningMessages', []);
+    generalErrorMessages = [];
+    generalWarningMessages = [];
     this.get('servicesMasters').setEach('warnMessage', null);
     this.get('servicesMasters').setEach('errorMessage', null);
     var anyErrors = false;
@@ -296,13 +303,16 @@ App.WizardStep5Controller = Em.Controller.extend({
         var details = " (" + item['component-name'] + " on " + item.host + ")";
         if (item.level === 'ERROR') {
           anyErrors = true;
-          self.get('generalErrorMessages').push(item.message + details);
+          generalErrorMessages.push(item.message + details);
         } else if (item.level === 'WARN') {
-          self.get('generalWarningMessages').push(item.message + details);
+          generalWarningMessages.push(item.message + details);
         }
       }
     });
 
+    this.set('generalErrorMessages', generalErrorMessages);
+    this.set('generalWarningMessages', generalWarningMessages);
+
     this.set('submitDisabled', anyErrors);
   },
 
@@ -1030,19 +1040,35 @@ App.WizardStep5Controller = Em.Controller.extend({
   submit: function () {
     var self = this;
 
-    var goNextStepIfValid = function() {
-      if (!self.get('submitDisabled')) {
-        App.router.send('next');
-      }
-    };
+    var primary = function() {
+      var goNextStepIfValid = function() {
+        if (!self.get('submitDisabled')) {
+          App.router.send('next');
+        }
+      };
 
-    if (App.supports.serverRecommendValidate ) {
-      self.recommendAndValidate(function() {
+      if (App.supports.serverRecommendValidate ) {
+        self.recommendAndValidate(function() {
+          goNextStepIfValid();
+        });
+      } else {
+        self.updateIsSubmitDisabled();
         goNextStepIfValid();
+      }
+    }
+
+    if (self.get('anyWarning')) {
+      App.ModalPopup.show({
+        primary: Em.I18n.t('common.continueAnyway'),
+        header: Em.I18n.t('installer.step5.warningsAttention.header'),
+        body: Em.I18n.t('installer.step5.warningsAttention'),
+        onPrimary: function () {
+          this.hide();
+          primary();
+        }
       });
     } else {
-      self.updateIsSubmitDisabled();
-      goNextStepIfValid();
+      primary();
     }
   }
 });

ambari-web/app/controllers/wizard/step6_controller.js

@@ -109,6 +109,22 @@ App.WizardStep6Controller = Em.Controller.extend({
    */
   generalWarningMessages: [],
 
+  /**
+   * true if validation has any general error message
+   */
+  anyErrors: function() {
+    var messages = this.get('generalErrorMessages');
+    return this.get('errorMessage') || (messages && messages.length > 0);
+  }.property('generalErrorMessages', 'generalErrorMessages.@each', 'errorMessage'),
+
+  /**
+   * true if validation has any general warning message
+   */
+  anyWarnings: function() {
+    var messages = this.get('generalWarningMessages');
+    return messages && messages.length > 0;
+  }.property('generalWarningMessages', 'generalWarningMessages.@each'),
+
   /**
    * Verify condition that at least one checkbox of each component was checked
    * @method clearError

ambari-web/app/messages.js

@@ -218,6 +218,7 @@ Em.I18n.translations = {
   'common.view': 'View',
   'common.compare': 'Compare',
   'common.latest': 'Latest',
+  'common.continueAnyway': 'Continue Anyway',
 
   'passiveState.turnOn':'Turn On Maintenance Mode',
   'passiveState.turnOff':'Turn Off Maintenance Mode',
@@ -616,6 +617,8 @@ Em.I18n.translations = {
   'installer.step5.body.coHostedComponents':'<i class="icon-asterisks">&#10037;</i> {0} will be hosted on the same host.',
   'installer.step5.hostInfo':'%@ (%@, %@ cores)',
   'installer.step5.hiveGroup':'HiveServer2, WebHCat Server, MySQL Server',
+  'installer.step5.warningsAttention.header': 'Warnings',
+  'installer.step5.warningsAttention': 'Your master component assignment has warnings and needs attention.',
 
   'installer.step6.header':'Assign Slaves and Clients',
   'installer.step6.body':'Assign slave and client components to hosts you want to run them on.<br/>Hosts that are assigned master components are shown with <i class=icon-asterisks>&#10037;</i>.',

ambari-web/app/templates/wizard/step5.hbs

@@ -81,8 +81,16 @@
                           {{view App.RemoveControlView componentNameBinding="component_name" serviceComponentIdBinding="serviceComponentId"}}
                         {{/if}}
 
-                        <span class="help-block">{{warnMessage}}</span>
-                        <span class="help-block">{{errorMessage}}</span>
+                        <span rel="popover" title="Warning" {{bindAttr data-content="warnMessage"}}>
+                          {{#if warnMessage}}
+                            <i class="icon-warning-sign icon-large"></i>
+                          {{/if}}
+                        </span>
+                        <span rel="popover" title="Error" {{bindAttr data-content="errorMessage"}}>
+                          {{#if errorMessage}}
+                            <i class="icon-remove-sign icon-large"></i>
+                          {{/if}}
+                        </span>
                       </div>
                     {{/if}}
                   </div>

ambari-web/app/templates/wizard/step6.hbs

@@ -20,15 +20,28 @@
   <h2>{{view.title}}</h2>
 
   <div class="alert alert-info">{{{view.label}}}</div>
-  {{#if errorMessage}}
-    <div class="alert alert-error">{{errorMessage}}</div>
+  {{#if anyErrors}}
+    <div class="alert alert-error">
+      <ul>
+        {{#if errorMessage}}
+          <li>{{errorMessage}}</li>
+        {{/if}}
+        {{#each msg in controller.generalErrorMessages}}
+            <li>{{msg}}</li>
+        {{/each}}
+      </ul>
+    </div>
+  {{/if}}
+
+  {{#if anyWarnings}}
+    <div class="alert alert-warning">
+      <ul>
+        {{#each msg in controller.generalWarningMessages}}
+            <li>{{msg}}</li>
+        {{/each}}
+      </ul>
+    </div>
   {{/if}}
-  {{#each msg in controller.generalErrorMessages}}
-      <div class="alert alert-error">{{msg}}</div>
-  {{/each}}
-  {{#each msg in controller.generalWarningMessages}}
-      <div class="alert alert-warning">{{msg}}</div>
-  {{/each}}
 
   <div class="pre-scrollable">
     <table class="table" id="component_assign_table">

ambari-web/app/views/wizard/step5_view.js

@@ -127,6 +127,7 @@ App.SelectHostView = Em.Select.extend(App.SelectHost, {
   didInsertElement: function () {
     this.initContent();
     this.set("value", this.get("component.selectedHost"));
+    App.popover($("[rel=popover]"), {'placement': 'right', 'trigger': 'hover'});
   },
 
   /**