AMBARI-896. Resolve all navigation related issues for Step6 (Slave and Client component) of installer wizard. (Jaimin Jetly via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/branches/AMBARI-666@1402284 13f79535-47bb-0310-9956-ffa450edef68

AMBARI-666-CHANGES.txt

@@ -360,6 +360,9 @@ AMBARI-666 branch (unreleased changes)
 
   BUG FIXES
 
+  AMBARI-896. Resolve all navigation related issues for Step6 (Slave and
+  Client component) of installer wizard. (Jaimin Jetly via yusaku)
+
   AMBARI-914. Fix issues related to Slave Component Group in Installer.
   (yusaku)
 

ambari-web/app/controllers/installer/step4_controller.js

@@ -49,12 +49,12 @@ App.InstallerStep4Controller = Em.ArrayController.extend({
     this.clear();
   },
 
-  loadStep: function() {
+  loadStep: function () {
     this.clearStep();
     this.renderStep(this.loadServices());
   },
 
-  loadServices: function() {
+  loadServices: function () {
     return db.getService();
   },
 
@@ -92,6 +92,21 @@ App.InstallerStep4Controller = Em.ArrayController.extend({
     }
   },
 
+  setClientsForSelectedServices: function () {
+    var clients = [];
+    var serviceComponents = require('data/service_components');
+    db.getService().filterProperty('isSelected',true).forEach(function (_service) {
+      var client = serviceComponents.filterProperty('service_name', _service.serviceName).findProperty('isClient', true);
+      if (client) {
+        clients.pushObject({
+          component_name: client.component_name,
+          display_name: client.display_name
+        });
+      }
+    }, this);
+    db.setClientsForSelectedServices(clients);
+  },
+
   gangliaOrNagiosNotSelected: function () {
     return (this.findProperty('serviceName', 'GANGLIA').get('isSelected') === false || this.findProperty('serviceName', 'NAGIOS').get('isSelected') === false);
   },
@@ -137,6 +152,7 @@ App.InstallerStep4Controller = Em.ArrayController.extend({
 
   proceed: function () {
     this.saveSelectedServiceNamesToDB();
+    this.setClientsForSelectedServices();
     App.router.send('next');
   }
 })

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

@@ -592,10 +592,6 @@ App.InstallerStep5Controller = Em.Controller.extend({
       });
     }, this);
     App.db.setHostToMasterComponent(hostsMasterServicesMapping);
-    App.db.getHostToMasterComponent().forEach(function (_hostcomponent) {
-      console.log("INFO: the name of this thimg is: " + _hostcomponent.hostname);
-      console.log("INFO: the name of this thimg is: " + _hostcomponent.components);
-    }, this);
   },
 
   submit: function () {

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

@@ -34,6 +34,7 @@ var db = require('utils/db');
  */
 App.InstallerStep6Controller = Em.Controller.extend({
 
+
   hosts: [],
   // TODO: hook up with user host selection
   rawHosts: [],
@@ -61,7 +62,7 @@ App.InstallerStep6Controller = Em.Controller.extend({
 
   isAllClients: function () {
     return this.get('hosts').everyProperty('isClient', true);
-  }.property('hosts.@each.isAllClient'),
+  }.property('hosts.@each.isClient'),
 
   isNoDataNodes: function () {
     return this.get('hosts').everyProperty('isDataNode', false);
@@ -89,7 +90,9 @@ App.InstallerStep6Controller = Em.Controller.extend({
   }.property('selectedServiceNames'),
 
   clearError: function () {
-    if (this.get('isNoDataNodes') === false && this.get('isNoTaskTrackers') === false && this.get('isNoRegionServers') === false && this.get('isNoClients') === false) {
+    if (this.get('isNoDataNodes') === false && (this.get('isNoTaskTrackers') === false || this.get('isMrSelected') ===
+      false) && (this.get('isNoRegionServers') === false || this.isHbaseSelected() === false) && this.get('isNoClients')
+      === false) {
       this.set('errorMessage', '');
     }
   }.observes('isNoDataNodes', 'isNoTaskTrackers', 'isNoRegionServers', 'isNoClients'),
@@ -157,37 +160,44 @@ App.InstallerStep6Controller = Em.Controller.extend({
     var slaveHosts = App.db.getSlaveComponentHosts();
     if (slaveHosts === undefined || slaveHosts === null) {
       allHosts.forEach(function (_hostname) {
-        var hostObj = {};
-        hostObj.hostname = _hostname;
-        hostObj.isMaster = this.hasMasterComponents(_hostname);
-        hostObj.isDataNode = !this.hasMasterComponents(_hostname);
-        hostObj.isTaskTracker = !this.hasMasterComponents(_hostname);
-        hostObj.isRegionServer = !this.hasMasterComponents(_hostname);
-        hostObj.isClient = false;
+        var hostObj = Ember.Object.create({
+          hostname: _hostname,
+          isMaster: this.hasMasterComponents(_hostname),
+          isDataNode: !this.hasMasterComponents(_hostname),
+          isTaskTracker: !this.hasMasterComponents(_hostname),
+          isRegionServer: !this.hasMasterComponents(_hostname),
+          isClient: false
+        });
         hostObjs.add(hostObj);
       }, this);
-      hostObjs.findProperty('isDataNode', true).isClient = true;
+      if (hostObjs.someProperty('isDataNode', true)) {
+        hostObjs.findProperty('isDataNode', true).set('isClient', true);
+      }
 
-      return hostObjs;
     } else {
       allHosts.forEach(function (_hostName) {
-        hostObjs.add({
-          hostname: _hostName
-        });
+        hostObjs.add(Ember.Object.create({
+          hostname: _hostName,
+          isMaster: false,
+          isDataNode: false,
+          isTaskTracker: false,
+          isRegionServer: false,
+          isClient: false
+        }));
       }, this);
       var datanodes = slaveHosts.findProperty('componentName', 'DATANODE');
       datanodes.hosts.forEach(function (_datanode) {
         var datanode = hostObjs.findProperty('hostname', _datanode.hostname);
-        if (datanode !== null) {
-          datanode.isDataNode = true;
+        if (datanode) {
+          datanode.set('isDataNode', true);
         }
       }, this);
       if (this.get('isMrSelected')) {
         var taskTrackers = slaveHosts.findProperty('componentName', 'TASKTRACKER');
         taskTrackers.hosts.forEach(function (_taskTracker) {
           var taskTracker = hostObjs.findProperty('hostname', _taskTracker.hostname);
-          if (taskTracker !== null) {
-            taskTracker.isTaskTracker = true;
+          if (taskTracker) {
+            taskTracker.set('isTaskTracker', true);
           }
         }, this);
       }
@@ -195,27 +205,27 @@ App.InstallerStep6Controller = Em.Controller.extend({
         var regionServers = slaveHosts.findProperty('componentName', 'HBASE_REGIONSERVER');
         regionServers.hosts.forEach(function (_regionServer) {
           var regionServer = hostObjs.findProperty('hostname', _regionServer.hostname);
-          if (regionServer !== null) {
-            regionServer.isRegionServer = true;
+          if (regionServer) {
+            regionServer.set('isRegionServer', true);
           }
         }, this);
       }
       var clients = slaveHosts.findProperty('componentName', 'CLIENT');
       clients.hosts.forEach(function (_client) {
         var client = hostObjs.findProperty('hostname', _client.hostname);
-        if (client !== null) {
-          client.isClient = true;
+        if (client) {
+          client.set('isClient', true);
         }
       }, this);
       allHosts.forEach(function (_hostname) {
         var host = hostObjs.findProperty('hostname', _hostname);
-        if (host !== null) {
-          host.isMaster = this.hasMasterComponents(_hostname);
+        if (host) {
+          host.set('isMaster', this.hasMasterComponents(_hostname));
         }
       }, this);
 
-      return hostObjs;
     }
+    return hostObjs;
   },
 
   getMasterComponentsforHost: function (hostname) {
@@ -228,12 +238,13 @@ App.InstallerStep6Controller = Em.Controller.extend({
 
   setSlaveHost: function (hostObj) {
     hostObj.forEach(function (_hostObj) {
-      this.get('hosts').pushObject(Ember.Object.create(_hostObj));
+      this.get('hosts').pushObject(_hostObj);
     }, this);
   },
 
   validate: function () {
-    return !(this.get('isNoDataNodes') || this.get('isNoTaskTrackers') || this.get('isNoRegionServers') || this.get('isNoClients'));
+    return !(this.get('isNoDataNodes') || this.get('isNoClients') || (this.get('isMrSelected') &&
+      this.get('isNoTaskTrackers')) || (this.isHbaseSelected() && this.get('isNoRegionServers')));
   },
 
   submit: function () {
@@ -250,25 +261,25 @@ App.InstallerStep6Controller = Em.Controller.extend({
 
     this.get('hosts').forEach(function (host) {
       if (host.get('isDataNode')) {
-        dataNodeHosts.push({
+        dataNodeHosts.pushObject({
           hostname: host.hostname,
           group: 'Default'
         });
       }
-      if (this.get('isMrSelected') && host.get('isRegionServer')) {
+      if (this.get('isMrSelected') && host.get('isTaskTracker')) {
         taskTrackerHosts.push({
           hostname: host.hostname,
           group: 'Default'
         });
       }
       if (this.isHbaseSelected() && host.get('isRegionServer')) {
-        regionServerHosts.push({
+        regionServerHosts.pushObject({
           hostname: host.hostname,
           group: 'Default'
         });
       }
       if (host.get('isClient')) {
-        clientHosts.push({
+        clientHosts.pushObject({
           hostname: host.hostname,
           group: 'Default'
         });
@@ -276,34 +287,35 @@ App.InstallerStep6Controller = Em.Controller.extend({
     }, this);
 
     var slaveComponentHosts = [];
-    slaveComponentHosts.push({
+    slaveComponentHosts.pushObject({
       componentName: 'DATANODE',
       displayName: 'DataNode',
       hosts: dataNodeHosts
     });
     if (this.get('isMrSelected')) {
-      slaveComponentHosts.push({
+      slaveComponentHosts.pushObject({
         componentName: 'TASKTRACKER',
         displayName: 'TaskTracker',
         hosts: taskTrackerHosts
       });
     }
     if (this.isHbaseSelected()) {
-      slaveComponentHosts.push({
+      slaveComponentHosts.pushObject({
         componentName: 'HBASE_REGIONSERVER',
         displayName: 'RegionServer',
         hosts: regionServerHosts
       });
     }
-    slaveComponentHosts.push({
+    slaveComponentHosts.pushObject({
       componentName: 'CLIENT',
       displayName: 'client',
       hosts: clientHosts
     });
 
     App.db.setSlaveComponentHosts(slaveComponentHosts);
-
     App.router.send('next');
 
   }
-});
+
+})
+;

ambari-web/app/data/mock/step3_hosts.js

@@ -1,3 +1,21 @@
+/**
+ * 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.
+ */
+
 module.exports = new Ember.Set([
   {
     name: '192.168.1.1',

ambari-web/app/data/mock/step3_single_host.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+
+
+module.exports = new Ember.Set([
+  {
+    name: '192.168.1.2',
+    bootStatus: 'success',
+    cpu: '4',
+    memory: '4'
+  }
+]);

ambari-web/app/messages.js

@@ -107,7 +107,7 @@ Em.I18n.translations = {
   'installer.step5.body': 'Assign master components to hosts you want to run them on.',
 
   'installer.step6.header': 'Assign Slaves and Clients',
-  'installer.step6.body': 'Assign slave and client components to hosts you want to run them on. <br/>Client component will install Hadoop client, HBase client and Pig client on the machine.',
+  'installer.step6.body': 'Assign slave and client components to hosts you want to run them on. <br/>Client component will install ',
   'installer.step6.error.mustSelectOne': 'You must assign at least one host to each.',
 
   'installer.step7.header': 'Customize Services',

ambari-web/app/routes/installer.js

@@ -108,7 +108,7 @@ module.exports = Em.Route.extend({
     back: Em.Router.transitionTo('step2'),
     next: function (router, context) {
       App.db.setBootStatus(true);
-      App.db.setService(router.get('installerStep4Controller.rawContent'));
+      App.db.setService(require('data/mock/services'));
       router.transitionTo('step4');
     }
   }),
@@ -116,7 +116,6 @@ module.exports = Em.Route.extend({
   step4: Em.Route.extend({
     route: '/step4',
     connectOutlets: function (router, context) {
-
       router.setNavigationFlow('step4');
       router.setInstallerCurrentStep('4', false);
       router.get('installerController').connectOutlet('installerStep4');

ambari-web/app/styles/application.less

@@ -151,6 +151,7 @@ footer {
 }
 
 @green: #69BE28;
+@blue: #0572ff;
 
 h1 {
   color: @green;
@@ -974,6 +975,24 @@ margin-bottom: 10px;
 
 /*end assign masters*/
 
+.assign-clients {
+  .round-corners {
+    border-radius: 8px;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+  }
+  .assignedService {
+    padding: 2px 8px;
+    border: solid 1px #cccccc;
+    margin: 2px;
+    background-color: @blue;
+    color: white;
+    white-space: nowrap;
+    font-size: 0.9em;
+    display: inline-block;
+  }
+}
+
 /*Dashboard*/
 .alerts-count {
   margin-left: 5px;

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

@@ -19,7 +19,7 @@
 <div id="step6">
   <h2>{{t installer.step6.header}}</h2>
 
-  <div class="alert alert-info">{{t installer.step6.body}}</div>
+  <div class="alert alert-info">{{{view.label}}}</div>
   {{#if errorMessage}}
   <div class="alert alert-error">{{errorMessage}}</div>
   {{/if}}
@@ -30,36 +30,28 @@
       <tr>
         <th>Host</th>
         <th>
-          <a
-            href="#" {{bindAttr class="isAllDataNodes:selected:deselected"}} {{action selectAllDataNodes target="controller"}}>all</a>
+          <a href="#" {{bindAttr class="isAllDataNodes:selected:deselected"}} {{action selectAllDataNodes target="controller"}}>all</a>
           |
-          <a
-            href="#" {{bindAttr class="isNoDataNodes:selected:deselected"}} {{action deselectAllDataNodes target="controller"}}>none</a>
+          <a href="#" {{bindAttr class="isNoDataNodes:selected:deselected"}} {{action deselectAllDataNodes target="controller"}}>none</a>
         </th>
         {{#if controller.isMrSelected}}
         <th>
-          <a
-            href="#" {{bindAttr class="isAllTaskTrackers:selected:deselected"}} {{action selectAllTaskTrackers target="controller"}}>all</a>
+          <a href="#" {{bindAttr class="isAllTaskTrackers:selected:deselected"}} {{action selectAllTaskTrackers target="controller"}}>all</a>
           |
-          <a
-            href="#" {{bindAttr class="isNoTaskTrackers:selected:deselected"}} {{action deselectAllTaskTrackers target="controller"}}>none</a>
+          <a href="#" {{bindAttr class="isNoTaskTrackers:selected:deselected"}} {{action deselectAllTaskTrackers target="controller"}}>none</a>
         </th>
         {{/if}}
         {{#if showHbase}}
         <th>
-          <a
-            href="#" {{bindAttr class="isAllRegionServers:selected:deselected"}} {{action selectAllRegionServers target="controller"}}>all</a>
+          <a href="#" {{bindAttr class="isAllRegionServers:selected:deselected"}} {{action selectAllRegionServers target="controller"}}>all</a>
           |
-          <a
-            href="#" {{bindAttr class="isNoRegionServers:selected:deselected"}} {{action deselectAllRegionServers target="controller"}}>none</a>
+          <a href="#" {{bindAttr class="isNoRegionServers:selected:deselected"}} {{action deselectAllRegionServers target="controller"}}>none</a>
         </th>
         {{/if}}
         <th>
-          <a
-            href="#" {{bindAttr class="isAllClients:selected:deselected"}} {{action selectAllClients target="controller"}}>all</a>
+          <a href="#" {{bindAttr class="isAllClients:selected:deselected"}} {{action selectAllClients target="controller"}}>all</a>
           |
-          <a
-            href="#" {{bindAttr class="isNoClients:selected:deselected"}} {{action deselectAllClients target="controller"}}>none</a>
+          <a href="#" {{bindAttr class="isNoClients:selected:deselected"}} {{action deselectAllClients target="controller"}}>none</a>
         </th>
       </tr>
       </thead>
@@ -67,8 +59,8 @@
 
       {{#each hosts}}
       <tr>
-        <td>{{#view App.InstallerStep6HostView hostBinding = "this" }} {{hostname}} {{#if isMaster}}<i
-          class=icon-asterisks>&#10037</i>{{/if}}{{/view}} </td>
+        {{#view App.InstallerStep6HostView hostBinding = "this" }} {{hostname}} {{#if isMaster}}<i
+              class=icon-asterisks>&#10037</i>{{/if}}{{/view}}
         <td><label class="checkbox">{{view Ember.Checkbox checkedBinding="isDataNode"}}DataNode</label></td>
         {{#if controller.isMrSelected}}
         <td><label class="checkbox">{{view Ember.Checkbox checkedBinding="isTaskTracker"}}TaskTracker</label></td>

ambari-web/app/utils/db.js

@@ -220,6 +220,13 @@ App.db.setSelectedServiceNames = function (serviceNames) {
   localStorage.setObject('ambari', App.db.data);
 }
 
+App.db.setClientsForSelectedServices = function(clientInfo) {
+  App.db.data = localStorage.getObject('ambari');
+  var user = App.db.data.app.loginName;
+  App.db.data[user].Installer.clientInfo = clientInfo;
+  localStorage.setObject('ambari', App.db.data);
+}
+
 App.db.setMasterComponentHosts = function (masterComponentHosts) {
   App.db.data = localStorage.getObject('ambari');
   var user = App.db.data.app.loginName;
@@ -414,6 +421,12 @@ App.db.getSelectedServiceNames = function () {
   return App.db.data[user].Installer.selectedServiceNames;
 }
 
+App.db.getClientsForSelectedServices = function() {
+  App.db.data = localStorage.getObject('ambari');
+  var user = App.db.data.app.loginName;
+  return App.db.data[user].Installer.clientInfo;
+}
+
 App.db.getMasterComponentHosts = function () {
   App.db.data = localStorage.getObject('ambari');
   var user = App.db.data.app.loginName;

ambari-web/app/views/installer/step6_view.js

@@ -22,16 +22,43 @@ var App = require('app');
 App.InstallerStep6View = Em.View.extend({
 
   templateName: require('templates/installer/step6'),
+  label: '',
+
   didInsertElement: function () {
     var controller = this.get('controller');
+    this.setLabel();
+    var client = App.db.getClientsForSelectedServices();
+    this.set('client', client);
+    var self = this;
+    $('body').tooltip({
+      selector: '[rel=tooltip]'
+    });
     controller.loadStep();
-  }
+  },
 
+  setLabel: function () {
+    var label = Em.I18n.t('installer.step6.body');
+    var clients = App.db.getClientsForSelectedServices();
+    clients.forEach(function (_client) {
+      if (clients.length === 1) {
+        label = label + ' ' + _client.display_name;
+      } else if (_client !== clients[clients.length - 1]) {           // [clients.length - 1]
+        label = label + ' ' + _client.display_name;
+        if(_client !== clients[clients.length - 2]) {
+          label = label + ',';
+        }
+      } else {
+        label = label + ' and ' + _client.display_name + '.';
+      }
+    }, this);
+    this.set('label', label);
+  }
 });
 
 App.InstallerStep6HostView = Em.View.extend({
 
   host: null,
+  tagName: 'td',
   didInsertElement: function (event, context) {
     var self = this;
     var components = this.get('controller').getMasterComponentsforHost(this.get('host.hostname')).toString();
@@ -47,4 +74,7 @@ App.InstallerStep6HostView = Em.View.extend({
       });
     }
   }
-});
+});
+
+
+