AMBARI-5158. Mirroring: add info message/tooltips for Cluster fields. (akovalenko)

ambari-web/app/controllers/main/mirroring/manage_clusters_controller.js

@@ -24,6 +24,11 @@ App.MainMirroringManageClustersController = Em.ArrayController.extend({
   // link to popup object
   popup: null,
 
+  executeTooltip: Em.I18n.t('mirroring.manageClusters.executeTooltip'),
+  readonlyTooltip: Em.I18n.t('mirroring.manageClusters.readonlyTooltip'),
+  workflowTooltip: Em.I18n.t('mirroring.manageClusters.workflowTooltip'),
+  writeTooltip: Em.I18n.t('mirroring.manageClusters.writeTooltip'),
+
   clusters: [],
 
   newCluster: null,
@@ -87,8 +92,8 @@ App.MainMirroringManageClustersController = Em.ArrayController.extend({
           workflow: '',
           write: '',
           readonly: '',
-          staging: '/apps/falcon/' + clusterName + '/staging',
-          working: '/apps/falcon/' + clusterName + '/working',
+          staging: '/apps/falcon/<cluster-name>/staging',
+          working: '/apps/falcon/<cluster-name>/working',
           temp: '/tmp'
         });
         self.set('newCluster', newCluster);

ambari-web/app/messages.js

@@ -1895,6 +1895,11 @@ Em.I18n.translations = {
   'mirroring.manageClusters.error' :'Error in saving changes',
   'mirroring.manageClusters.create.cluster.popup' :'Create Target Cluster',
   'mirroring.manageClusters.remove.confirmation' :'Are you sure you want to delete the target cluster {0}?',
+  'mirroring.manageClusters.executeTooltip' :'The "execute" interface specifies the endpoint for ResourceManager.<br>Example: resourcemanager-host:8050',
+  'mirroring.manageClusters.readonlyTooltip' :'The "readonly" interface specifies the endpoint for Hadoop\'s HFTP protocol.<br>Example: hftp://namenode-host:50070',
+  'mirroring.manageClusters.workflowTooltip' :'The "workflow" interface specifies the endpoint for Oozie URL.<br>Example: http://oozie-host:11000/oozie',
+  'mirroring.manageClusters.writeTooltip' :'The "write" interface is the endpoint to write to HDFS. Set this to the value of fs.defaultFS (in core-site.xml) of the target cluster.<br>Example:<br>hdfs://namenode-host:8020 (non-HA); hdfs://nameservice-id:8020 (HA)',
+  'mirroring.manageClusters.locationsMessage' :'Specify the following for the target cluster, not the source cluster.',
 
   'mirroring.table.noDatasets':'No datasets to display',
   'mirroring.table.datasetStatus':'Status',

ambari-web/app/styles/application.less

@@ -275,7 +275,7 @@ h1 {
 }
 
 .tooltip {
-  z-index: 1050;
+  z-index: 10000;
 }
 
 .tooltip-inner {
@@ -4272,22 +4272,21 @@ ul.filter {
     margin-bottom: 0;
   }
   .control-label-manage-clusters {
-    float: left;
-    width: 80px;
     padding-top: 5px;
   }
   .control-group {
-    margin-left: 15px;
+    padding: 0 15px;
+    box-sizing: border-box;
     margin-bottom: 10px;
   }
-  .category-title {
-    margin-bottom: 15px
+  .input-fluid {
+    width: 100%;
   }
-  .target-cluster-name {
-    margin-left: 40px
+  .category-title {
+    margin: 15px 0;
   }
   .target-cluster-form {
-    padding-left: 15px
+    padding-left: 15px;
   }
 }
 

ambari-web/app/templates/main/mirroring/create_new_cluster.hbs

@@ -17,42 +17,59 @@
 }}
 <div class="mirroring-manage-clusters">
   <form class="form-horizontal">
-    <div class="control-group target-cluster-name">
-      <label class="control-label-manage-clusters">{{t common.name}}</label>
-      {{view Ember.TextField class="span5" valueBinding="controller.newCluster.name"}}
+    <div class="control-group row-fluid">
+      <div class="control-label-manage-clusters span2">{{t common.name}}</div>
+      <div class="span10">
+        {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.name"}}
+      </div>
     </div>
     <div class="control-group form-category">
       <div class="category-title">{{t mirroring.manageClusters.interfaces}}</div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.execute}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.execute" placeholder="resourcemanager-host:8050"}}
-      </div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.readonly}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.readonly" placeholder="hftp://namenode-host:50070"}}
-      </div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.workflow}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.workflow" placeholder="http://oozie-host:11000/oozie"}}
-      </div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.write}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.write" placeholder="hdfs://namenode-host:8020"}}
-      </div>
+      {{#view App.InputContainer titleBinding="controller.executeTooltip"}}
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.execute}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.execute" placeholder="resourcemanager-host:8050"}}
+        </div>
+      {{/view}}
+      {{#view App.InputContainer titleBinding="controller.readonlyTooltip"}}
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.readonly}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.readonly" placeholder="hftp://namenode-host:50070"}}
+        </div>
+      {{/view}}
+      {{#view App.InputContainer titleBinding="controller.workflowTooltip"}}
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.workflow}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.workflow" placeholder="http://oozie-host:11000/oozie"}}
+        </div>
+      {{/view}}
+      {{#view App.InputContainer titleBinding="controller.writeTooltip"}}
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.write}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.write" placeholder="hdfs://namenode-host:8020"}}
+        </div>
+      {{/view}}
     </div>
+    <div class="alert alert-info">{{t mirroring.manageClusters.locationsMessage}}</div>
     <div class="control-group form-category">
       <div class="category-title">{{t mirroring.manageClusters.locations}}</div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.staging}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.staging"}}
+      <div class="control-group row-fluid">
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.staging}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.staging"}}
+        </div>
       </div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.working}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.working"}}
+      <div class="control-group row-fluid">
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.working}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.working"}}
+        </div>
       </div>
-      <div class="control-group">
-        <label class="control-label-manage-clusters">{{t mirroring.manageClusters.temp}}</label>
-        {{view Ember.TextField class="span5" valueBinding="controller.newCluster.temp"}}
+      <div class="control-group row-fluid">
+        <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.temp}}</div>
+        <div class="span10">
+          {{view Ember.TextField class="input-fluid" valueBinding="controller.newCluster.temp"}}
+        </div>
       </div>
     </div>
   </form>

ambari-web/app/templates/main/mirroring/manage_clusters.hbs

@@ -28,36 +28,50 @@
       <form class="form-horizontal">
         <div class="control-group form-category">
           <div class="category-title">{{t mirroring.manageClusters.interfaces}}</div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.execute}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.execute" disabled="disabled"}}
-          </div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.readonly}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.readonly" disabled="disabled"}}
-          </div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.workflow}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.workflow" disabled="disabled"}}
-          </div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.write}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.write" disabled="disabled"}}
-          </div>
+          {{#view App.InputContainer titleBinding="controller.executeTooltip"}}
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.execute}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.execute" disabled="disabled"}}
+            </div>
+          {{/view}}
+          {{#view App.InputContainer titleBinding="controller.readonlyTooltip"}}
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.readonly}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.readonly" disabled="disabled"}}
+            </div>
+          {{/view}}
+          {{#view App.InputContainer titleBinding="controller.workflowTooltip"}}
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.workflow}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.workflow" disabled="disabled"}}
+            </div>
+          {{/view}}
+          {{#view App.InputContainer titleBinding="controller.writeTooltip"}}
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.write}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.write" disabled="disabled"}}
+            </div>
+          {{/view}}
         </div>
         <div class="control-group form-category">
           <div class="category-title">{{t mirroring.manageClusters.locations}}</div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.staging}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.staging" disabled="disabled"}}
+          <div class="control-group row-fluid">
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.staging}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.staging" disabled="disabled"}}
+            </div>
           </div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.working}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.working" disabled="disabled"}}
+          <div class="control-group row-fluid">
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.working}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.working" disabled="disabled"}}
+            </div>
           </div>
-          <div class="control-group">
-            <label class="control-label-manage-clusters">{{t mirroring.manageClusters.temp}}</label>
-            {{view Ember.TextField class="span9" valueBinding="controller.selectedCluster.temp" disabled="disabled"}}
+          <div class="control-group row-fluid">
+            <div class="control-label-manage-clusters span2">{{t mirroring.manageClusters.temp}}</div>
+            <div class="span10">
+              {{view Ember.TextField class="input-fluid" valueBinding="controller.selectedCluster.temp" disabled="disabled"}}
+            </div>
           </div>
         </div>
       </form>

ambari-web/app/views/main/mirroring/manage_clusters_view.js

@@ -66,4 +66,13 @@ App.MainMirroringManageClusterstView = Em.View.extend({
   }
 });
 
+App.InputContainer = Em.View.extend({
+  tagName: 'div',
+  classNames: ['control-group', 'row-fluid'],
+  attributeBindings: ['title'],
+  didInsertElement: function () {
+    $(this.get('element')).tooltip({placement: 'right'});
+  }
+});
+
 

ambari-web/test/installer/step9_test.js

@@ -123,35 +123,6 @@ describe('App.InstallerStep9Controller', function () {
     });
   });
 
-  describe('#visibleHosts', function () {
-    var hosts = [
-      Em.Object.create({status: 'failed'}),
-      Em.Object.create({status: 'heartbeat_lost'}),
-      Em.Object.create({status: 'success'}),
-      Em.Object.create({status: 'success'}),
-      Em.Object.create({status: 'warning'}),
-      Em.Object.create({status: 'info'}),
-      Em.Object.create({status: 'info'})
-    ];
-    var tests = Em.A([
-      {category: {hostStatus: 'all'}, e: hosts.length},
-      {category: {hostStatus: 'inProgress'}, e: 2},
-      {category: {hostStatus: 'warning'}, e: 1},
-      {category: {hostStatus: 'failed'}, e: 2},
-      {category: {hostStatus: 'success'}, e: 2}
-    ]);
-
-    tests.forEach(function (test) {
-      it('selected category with hostStatus "' + test.category.hostStatus + '"', function () {
-        var controller = App.WizardStep9Controller.create({
-          hosts: hosts
-        });
-        controller.selectCategory({context: test.category});
-        expect(controller.get('visibleHosts.length')).to.equal(test.e);
-      });
-    });
-  });
-
   describe('#showRetry', function () {
     it('cluster status is not INSTALL FAILED', function () {
       var controller = App.WizardStep9Controller.create({content: {cluster: {status: 'INSTALLED'}}});