AMBARI-880. Implement Review Page (Step 8) for the Ambari Installer Wizard. (Jaimin Jetly via yusaku)

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

AMBARI-666-CHANGES.txt

@@ -12,6 +12,9 @@ AMBARI-666 branch (unreleased changes)
 
   NEW FEATURES
 
+  AMBARI-880. Implement Review Page (Step 8) for the Ambari Installer
+  Wizard. (Jaimin Jetly via yusaku)
+
   AMBARI-872. Hookup Nagios alerts section in Ambari UI to backend
   server. (Srimanth Gunturi via yusaku)
 

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

@@ -83,6 +83,12 @@ App.InstallerStep6Controller = Em.Controller.extend({
 		return this.get('selectedServiceNames').contains('MAPREDUCE');
 	}.property('selectedServiceNames'),
 
+	clearError: function () {
+		if (this.get('isNoDataNodes') === false && this.get('isNoTaskTrackers') === false && this.get('isNoRegionServers') === false) {
+			this.set('errorMessage', '');
+		}
+	}.observes('isNoDataNodes', 'isNoTaskTrackers', 'isNoRegionServers'),
+
 	selectAllDataNodes: function () {
 		this.get('hosts').setEach('isDataNode', true);
 	},
@@ -111,21 +117,18 @@ App.InstallerStep6Controller = Em.Controller.extend({
 	clearStep: function () {
 		this.set('hosts', []);
 		this.set('selectedServiceNames', []);
+		this.clearError();
 	},
 
 	loadStep: function () {
 		console.log("TRACE: Loading step6: Assign Slaves");
 		this.clearStep();
-		this.set('selectedServiceNames',db.getSelectedServiceNames());
+		this.set('selectedServiceNames', db.getSelectedServiceNames());
 		this.set('showHbase', this.isHbaseSelected());
 		this.set('showTaskTracker', this.get('isMrSelected'));
 		this.setSlaveHost(this.getSlaveHosts());
 	},
 
-	navigateStep: function () {
-		this.loadStep();
-	},
-
 	getHostNames: function () {
 		var hostInfo = db.getHosts();
 		var hostNames = [];

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

@@ -26,7 +26,7 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 
 	clearStep: function () {
 		this.clear();
-		this.services.clear();
+		this.get('services').clear();
 	},
 
 	loadStep: function () {
@@ -35,8 +35,8 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 		var configObj = new Ember.Set();
 		this.loadClusterName();
 		this.loadHosts();
+		this.loadRepo();
 		this.loadServices();
-		// this.doConfigsUneditable();
 	},
 
 	loadClusterName: function () {
@@ -61,8 +61,289 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 		this.pushObject(Ember.Object.create(totalHostsObj));
 	},
 
+	loadRepo: function () {
+		var repoOption = App.db.getSoftRepo().repoType;
+		var repoObj = this.rawContent.findProperty('config_name', 'Repo');
+		if (repoOption === 'local') {
+			repoObj.config_value = 'Yes';
+		} else {
+			repoObj.config_value = 'No';
+		}
+		this.pushObject(Ember.Object.create(repoObj));
+	},
+
 	loadServices: function () {
 		this.set('services', App.db.getSelectedServiceNames());
+		var services = App.db.getService().filterProperty('isSelected', true);
+		services.forEach(function (_service) {
+			console.log('INFO: step8: Name of the service from getService function: ' + _service.serviceName);
+			var serviceObj = {};
+			//var tempObj = {};
+			var reviewService = this.rawContent.findProperty('config_name', 'services');
+			serviceObj = reviewService.config_value.findProperty('service_name', _service.serviceName);
+			if (serviceObj !== undefined) {
+				switch (serviceObj.service_name) {
+					case 'HDFS':
+						this.loadHDFS(serviceObj);
+						break;
+					case 'MAPREDUCE':
+						this.loadMapReduce(serviceObj);
+						break;
+					case 'HIVE':
+						this.loadHive(serviceObj);
+						break;
+					case 'HBASE':
+						this.loadHbase(serviceObj);
+						break;
+					case 'ZOOKEEPER':
+						this.loadZk(serviceObj);
+						break;
+					case 'OOZIE':
+						this.loadOozie(serviceObj);
+						break;
+					case 'NAGIOS':
+						this.loadNagios(serviceObj);
+						break;
+					case 'GANGLIA':
+						this.loadGanglia(serviceObj);
+					case 'HCATALOG':
+						break;
+					default:
+				}
+			}
+			//serviceObj.displayName = tempObj.service_name;
+			//serviceObj.componentNames =  tempObj.service_components;
+
+		}, this);
+	},
+
+	loadHDFS: function (hdfsObj) {
+		hdfsObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'NameNode':
+					this.loadNnValue(_component);
+					break;
+				case 'SecondaryNameNode':
+					this.loadSnnValue(_component);
+					break;
+				case 'DataNodes':
+					this.loadDnValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		//var
+		this.services.pushObject(hdfsObj);
+	},
+
+	loadNnValue: function (nnComponent) {
+		var nnHostName = App.db.getMasterComponentHosts().findProperty('component', nnComponent.display_name);
+		nnComponent.set('component_value', nnHostName.hostName);
+	},
+
+	loadSnnValue: function (snnComponent) {
+		var snnHostName = App.db.getMasterComponentHosts().findProperty('component', 'SNameNode');
+		snnComponent.set('component_value', snnHostName.hostName);
+	},
+
+	loadDnValue: function (dnComponent) {
+		var dnHosts = App.db.getSlaveComponentHosts().findProperty('displayName', 'DataNode');
+		var totalDnHosts = dnHosts.hosts.length;
+		var dnHostGroups = [];
+		dnHosts.hosts.forEach(function (_dnHost) {
+			dnHostGroups.push(_dnHost.group);
+
+		}, this);
+		var totalGroups = dnHostGroups.uniq().length;
+		var groupLabel;
+		if (totalGroups == 1) {
+			groupLabel = 'group';
+		} else {
+			groupLabel = 'groups';
+		}
+		dnComponent.set('component_value', totalDnHosts + ' hosts ' + '(' + totalGroups + ' ' + groupLabel + ')');
+	},
+
+	loadMapReduce: function (mrObj) {
+		mrObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'JobTracker':
+					this.loadJtValue(_component);
+					break;
+				case 'TaskTrackers':
+					this.loadTtValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(mrObj);
+	},
+
+	loadJtValue: function (jtComponent) {
+		var jtHostName = App.db.getMasterComponentHosts().findProperty('component', jtComponent.display_name);
+		jtComponent.set('component_value', jtHostName.hostName);
+	},
+
+	loadTtValue: function (ttComponent) {
+		var ttHosts = App.db.getSlaveComponentHosts().findProperty('displayName', 'TaskTracker');
+		var totalTtHosts = ttHosts.hosts.length;
+		var ttHostGroups = [];
+		ttHosts.hosts.forEach(function (_ttHost) {
+			ttHostGroups.push(_ttHost.group);
+		}, this);
+		var totalGroups = ttHostGroups.uniq().length;
+		var groupLabel;
+		if (totalGroups == 1) {
+			groupLabel = 'group';
+		} else {
+			groupLabel = 'groups';
+		}
+		ttComponent.set('component_value', totalTtHosts + ' hosts ' + '(' + totalGroups + ' ' + groupLabel + ')');
+	},
+
+	loadHive: function (hiveObj) {
+		hiveObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'Hive Metastore Server':
+					this.loadHiveMetaStoreValue(_component);
+					break;
+				case 'Database':
+					this.loadHiveDbValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(hiveObj);
+
+	},
+
+	loadHiveMetaStoreValue: function (metaStoreComponent) {
+		var hiveHostName = App.db.getMasterComponentHosts().findProperty('component', 'Hive Metastore');
+		metaStoreComponent.set('component_value', hiveHostName.hostName);
+	},
+
+	loadHiveDbValue: function (dbComponent) {
+		dbComponent.set('component_value', 'MySQL');
+	},
+
+	loadHbase: function (hbaseObj) {
+		hbaseObj.service_components.forEach(function (_component) {
+			switch (_component.display_name) {
+				case 'Master':
+					this.loadMasterValue(_component);
+					break;
+				case 'Region Servers':
+					this.loadRegionServerValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(hbaseObj);
+	},
+
+	loadMasterValue: function (hbaseMaster) {
+		var hbaseHostName = App.db.getMasterComponentHosts().findProperty('component', 'HBase Master');
+		hbaseMaster.set('component_value', hbaseHostName.hostName);
+	},
+
+	loadRegionServerValue: function (rsComponent) {
+		var rsHosts = App.db.getSlaveComponentHosts().findProperty('displayName', 'RegionServer');
+		var totalRsHosts = rsHosts.hosts.length;
+		var rsHostGroups = [];
+		rsHosts.hosts.forEach(function (_ttHost) {
+			rsHostGroups.push(_ttHost.group);
+		}, this);
+		var totalGroups = rsHostGroups.uniq().length;
+		var groupLabel;
+		if (totalGroups == 1) {
+			groupLabel = 'group';
+		} else {
+			groupLabel = 'groups';
+		}
+		rsComponent.set('component_value', totalRsHosts + ' hosts '  + '(' + totalGroups + ' ' + groupLabel + ')');
+	},
+
+	loadZk: function (zkObj) {
+		zkObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'Servers':
+					this.loadZkServerValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(zkObj);
+	},
+
+	loadZkServerValue: function (serverComponent) {
+		var zkHostNames = App.db.getMasterComponentHosts().filterProperty('component', 'ZooKeeper').length;
+		var hostSuffix;
+		if (zkHostNames === 1) {
+			hostSuffix = 'host';
+		} else {
+			hostSuffix = 'hosts';
+		}
+		serverComponent.set('component_value', zkHostNames + ' ' + hostSuffix);
+	},
+
+	loadOozie: function (oozieObj) {
+		oozieObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'Server':
+					this.loadOozieServerValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(oozieObj);
+	},
+
+	loadOozieServerValue: function (oozieServer) {
+		var oozieServerName = App.db.getMasterComponentHosts().findProperty('component', 'Oozie Server');
+		oozieServer.set('component_value', oozieServerName.hostName);
+	},
+
+	loadNagios: function (nagiosObj) {
+		nagiosObj.service_components.forEach(function (_component) {
+			switch (_component.display_name) {
+				case 'Server':
+					this.loadNagiosServerValue(_component);
+					break;
+				case 'Administrator':
+					this.loadNagiosAdminValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(nagiosObj);
+	},
+
+	loadNagiosServerValue: function (nagiosServer) {
+		var nagiosServerName = App.db.getMasterComponentHosts().findProperty('component', 'Nagios Server');
+		nagiosServer.set('component_value', nagiosServerName.hostName);
+	},
+
+	loadNagiosAdminValue: function (nagiosAdmin) {
+		var adminLoginName = App.db.getServiceConfigProperties().findProperty('name', 'nagios_web_login');
+		var adminEmail = App.db.getServiceConfigProperties().findProperty('name', 'nagios_contact');
+		nagiosAdmin.set('component_value', adminLoginName.value + ' / (' + adminEmail.value +')');
+	},
+
+	loadGanglia: function (gangliaObj) {
+		gangliaObj.get('service_components').forEach(function (_component) {
+			switch (_component.get('display_name')) {
+				case 'Server':
+					this.loadGangliaServerValue(_component);
+					break;
+				default:
+			}
+		}, this);
+		this.get('services').pushObject(gangliaObj);
+	},
+
+	loadGangliaServerValue: function (gangliaServer) {
+		var gangliaServerName = App.db.getMasterComponentHosts().findProperty('component', 'Ganglia Collector');
+		gangliaServer.set('component_value', gangliaServerName.hostName);
 	},
 
 	submit: function () {
@@ -74,6 +355,9 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 
 	},
 
+
+	/* Following create* functions are called on submitting step8 */
+
 	createCluster: function () {
 		var self = this;
 		var clusterName = this.findProperty('config_name', 'cluster').config_value;
@@ -207,7 +491,6 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 				console.log("TRACE: STep8 -> In success function for the createComponent with new host call");
 				console.log("TRACE: STep8 -> value of the url is: " + url);
 				console.log("TRACE: STep8 -> value of the received data is: " + jsonData);
-
 			},
 
 			error: function (request, ajaxOptions, error) {
@@ -221,22 +504,8 @@ App.InstallerStep8Controller = Em.ArrayController.extend({
 })
 
 
-/*
- doConfigsUneditable: function () {
- this.content.forEach(function (_service) {
- _service.get('configs').forEach(function (_serviceConfig) {
- console.log('value of isEditable before for: ' + _serviceConfig.name);
- console.log('value of isEditable before: ' + _serviceConfig.isEditable);
- console.log('value of displayType before: ' + _serviceConfig.displayType);
- _serviceConfig.set('isEditable', false);
- _serviceConfig.set('displayType', 'string');
- console.log('value of isEditable after for: ' + _serviceConfig.name);
- console.log('value of isEditable after: ' + _serviceConfig.isEditable);
- console.log('value of displayType after: ' + _serviceConfig.displayType);
- }, this);
- }, this);
- }
- + 
- */
-  
-  
+
+
+
+
+

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

@@ -82,12 +82,14 @@ module.exports = [
   },
   {
     serviceName: 'ZOOKEEPER',
+	  displayName: 'ZooKeeper',
     isDisabled: false,
     isSelected: true,
     isHidden: true
   },
   {
     serviceName: 'HCATALOG',
+	  displayName: 'HCatalog',
     isDisabled: false,
     isSelected: true,
     isHidden: true

ambari-web/app/data/review_configs.js

@@ -16,124 +16,141 @@
  * limitations under the License.
  */
 
-module.exports = new Ember.Set([
+module.exports = [
 
-  {
-    config_name: 'cluster',
-    display_name: 'Cluster Name',
-    config_value: ''
-  },
-  {
-    config_name: 'hosts',
-    display_name: 'Total Hosts',
-    config_value: ''
-  },
-  {
-    config_name: 'Repo',
-    display_name: 'Local Repository',
-    config_value: ''
-  },
-  {
-    config_name: 'services',
-    display_name: 'Services',
-    config_value: [
-      {
-        service_name: 'HDFS',
-        service_components:  [
-          {
-            display_name: 'NameNode',
-            component_value: ''
-          },
-          {
-            display_name: 'SecondaryNameNode',
-            component_value: ''
-          },
-          {
-            display_name: 'DataNodes',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'MapReduce',
-        service_components:  [
-          {
-            display_name: 'JobTracker',
-            component_value: ''
-          },
-          {
-            display_name: 'TaskTrackers',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'Hive + HCatalog',
-        service_components:  [
-          {
-            display_name: 'Hive Metastore Server',
-            component_value: ''
-          },
-          {
-            display_name: 'Database',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'HBase',
-        service_components:  [
-          {
-            display_name: 'Master',
-            component_value: ''
-          },
-          {
-            display_name: 'Region Servers',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'ZooKeeper',
-        service_components:  [
-          {
-            display_name: 'Servers',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'Oozie',
-        service_components:  [
-          {
-            display_name: 'Server',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'Nagios',
-        service_components:  [
-          {
-            display_name: 'Server',
-            component_value: ''
-          },
-          {
-            display_name: 'Administrator',
-            component_value: ''
-          }
-        ]
-      },
-      {
-        service_name: 'Ganglia',
-        service_components:  [
-          {
-            display_name: 'Server',
-            component_value: ''
-          }
-        ]
-      }
+	{
+		config_name: 'cluster',
+		display_name: 'Cluster Name',
+		config_value: ''
+	},
+	{
+		config_name: 'hosts',
+		display_name: 'Total Hosts',
+		config_value: ''
+	},
+	{
+		config_name: 'Repo',
+		display_name: 'Local Repository',
+		config_value: ''
+	},
+	{
+		config_name: 'services',
+		display_name: 'Services',
+		config_value: [
+			Ember.Object.create({
+				service_name: 'HDFS',
+				display_name: 'HDFS',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'NameNode',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'SecondaryNameNode',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'DataNodes',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'MAPREDUCE',
+				display_name: 'MapReduce',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'JobTracker',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'TaskTrackers',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'HIVE',
+				display_name: 'Hive + HCatalog',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Hive Metastore Server',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'Database',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'HBASE',
+				display_name: 'HBase',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Master',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'Region Servers',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'ZOOKEEPER',
+				display_name: 'ZooKeeper',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Servers',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'OOZIE',
+				display_name: 'Oozie',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Server',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'NAGIOS',
+				display_name: 'Nagios',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Server',
+						component_value: ''
+					}),
+					Ember.Object.create({
+						display_name: 'Administrator',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'GANGLIA',
+				display_name: 'Ganglia',
+				service_components: [
+					Ember.Object.create({
+						display_name: 'Server',
+						component_value: ''
+					})
+				]
+			}),
+			Ember.Object.create({
+				service_name: 'HCATALOG',
+				display_name: 'HCatalog',
+				service_components: [
+					Ember.Object.create({
 
-    ]
-  }
-]);
+					})
+				]
+			})
+
+		]
+	}
+];

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

@@ -17,92 +17,98 @@
 -->
 
 <div id="confirm-hosts">
-<h2>{{t installer.step3.header}}</h2>
-<p class="alert alert-info">{{t installer.step3.body}}</p>
-<div class="box">
-  <div class="box-header">
-    <div class="button-section">
-      <a class="btn btn-primary decommission" {{bindAttr disabled="noHostsSelected"}}
-         href="#" {{action retrySelectedHosts target="controller"}}><i
-        class="icon-repeat icon-white"></i>
-        Retry
-      </a>
-      <a class="btn btn-primary" {{bindAttr disabled="noHostsSelected"}}
-         href="#" {{action removeSelectedHosts target="controller" }}><i
-        class="icon-trash icon-white"></i>
-        Remove
-      </a>
-      <a class="btn btn-info"
-         href="#" {{action mockBtn target="controller" }}>
-        mockData
-      </a>
-      <a class="btn btn-info"
-         href="#" {{action pollBtn target="controller" }}>
-         pollData
-      </a>
+	<h2>{{t installer.step3.header}}</h2>
 
-      <div id="host-filter" class="dropdown pull-right">
-        {{view Ember.Select class="pull-right"
+	<p class="alert alert-info">{{t installer.step3.body}}</p>
+
+	<div class="box">
+		<div class="box-header">
+			<div class="button-section">
+				<a class="btn btn-primary decommission" {{bindAttr disabled="noHostsSelected"}}
+					 href="#" {{action retrySelectedHosts target="controller"}}><i
+								class="icon-repeat icon-white"></i>
+					Retry
+				</a>
+				<a class="btn btn-primary" {{bindAttr disabled="noHostsSelected"}}
+					 href="#" {{action removeSelectedHosts target="controller" }}><i
+								class="icon-trash icon-white"></i>
+					Remove
+				</a>
+				<a class="btn btn-info"
+					 href="#" {{action mockBtn target="controller" }}>
+					mockData
+				</a>
+				<a class="btn btn-info"
+					 href="#" {{action pollBtn target="controller" }}>
+					pollData
+				</a>
+
+				<div id="host-filter" class="dropdown pull-right">
+					{{view Ember.Select class="pull-right"
        contentBinding="controller.categories"
        selectionBinding="controller.category"
        }}
-        <h5 class="pull-right">Show:</h5>
-      </div>
-
-    </div>
-  </div>
+					<h5 class="pull-right">Show:</h5>
+				</div>
 
+			</div>
+		</div>
 
-  <table class="table table-bordered table-striped">
-    <thead>
-    <tr>
-      <th class="span1">{{view Ember.Checkbox checkedBinding="allChecked"}}</th>
-      <th class="span2">Status</th>
-      <!--  given by the parsing function that parses data from bootstrap call -->
-      <th class="span4">Host</th>
-      <!-- retrieved from local storage initially -->
-      <th class="span2">Message</th>
-      <!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
-      <th class="span3">Action</th>
-      <!-- trash icon -->
-      <!-- retry icon -->
-    </tr>
-    </thead>
+		<div class="pre-scrollable" style="max-height: 440px;">
+			<table class="table table-bordered table-striped">
+				<thead>
+				<tr>
+					<th class="span1">{{view Ember.Checkbox checkedBinding="allChecked"}}</th>
+					<th class="span2">Status</th>
+					<!--  given by the parsing function that parses data from bootstrap call -->
+					<th class="span4">Host</th>
+					<!-- retrieved from local storage initially -->
+					<th class="span2">Message</th>
+					<!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
+					<th class="span3">Action</th>
+					<!-- trash icon -->
+					<!-- retry icon -->
+				</tr>
+				</thead>
 
-    <tbody>
+				<tbody>
 
-    {{#each host in visibleHosts}}
-    {{#view App.InstallerHostView categoryBinding="controller.category" hostInfoBinding="host"}}
-      <td>
-        {{view Ember.Checkbox checkedBinding="host.isChecked"}}
-      </td>
-      <td>
-        {{host.bootStatus}}
-      </td>
-      <td>
-        {{host.name}}
-      </td>
-      <td>
-        <a  href="javascript:void(null)" data-toggle="modal" {{action hostLogPopup target="controller"}}>{{host.message}}</a>
-      </td>
-      <td>
-        {{#if view.isRemovable}}<a class="btn btn-mini" {{action remove target="view"}}><i class="icon-trash"></i> Remove</a>{{/if}}
-        {{#if view.isRetryable}}<a class="btn btn-mini" {{action retry target="view"}}><i class="icon-repeat"></i> Retry</a>{{/if}}
-      </td>
-    {{/view}}
-    {{/each}}
+				{{#each host in visibleHosts}}
+				{{#view App.InstallerHostView categoryBinding="controller.category" hostInfoBinding="host"}}
+				<td>
+					{{view Ember.Checkbox checkedBinding="host.isChecked"}}
+				</td>
+				<td>
+					{{host.bootStatus}}
+				</td>
+				<td>
+					{{host.name}}
+				</td>
+				<td>
+					<a href="javascript:void(null)"
+						 data-toggle="modal" {{action hostLogPopup target="controller"}}>{{host.message}}</a>
+				</td>
+				<td>
+					{{#if view.isRemovable}}<a class="btn btn-mini" {{action remove target="view"}}><i class="icon-trash"></i>
+					Remove</a>{{/if}}
+					{{#if view.isRetryable}}<a class="btn btn-mini" {{action retry target="view"}}><i class="icon-repeat"></i>
+					Retry</a>{{/if}}
+				</td>
+				{{/view}}
+				{{/each}}
 
-    </tbody>
+				</tbody>
 
-  </table>
-  <div class="box-footer">
-    <hr/>
-    <div class="footer-pagination">
-    </div>
-  </div>
-</div>
-<div class="btn-area">
-  <a class="btn pull-left" {{action back}}>&larr; Back</a>
-  <a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>Next &rarr;</a>
-</div>
+			</table>
+		</div>
+		<div class="box-footer">
+			<hr/>
+			<div class="footer-pagination">
+			</div>
+		</div>
+	</div>
+	<div class="btn-area">
+		<a class="btn pull-left" {{action back}}>&larr; Back</a>
+		<a class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>Next &rarr;</a>
+	</div>
 </div>

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

@@ -17,17 +17,34 @@
 -->
 
 <h2>{{t installer.step8.header}}</h2>
+
 <div class="alert alert-info">
-    {{t installer.step8.body}}
+	{{t installer.step8.body}}
 </div>
+<div id="step8-content" class="well pre-scrollable" style="max-height: 570px;">
+	{{#each item in controller}}
+	<p>
+		<b>{{item.display_name}}</b> : {{item.config_value}}
+	</p>
+	{{/each}}
 
-{{#each item in controller}}
-<p>
-    {{item.display_name}} : {{item.config_value}}
-</p>
-{{/each}}
+	<div>
+		<p><b>Services</b></p>
+		{{#each controller.services}}
+		<div>
+			<ul><em><b>{{display_name}}</b></em>
 
+				<div>
+					{{#each component in this.service_components}}
+					<ul><span class="text text-info">{{component.display_name }} : </span>{{component.component_value}}</ul>
+					{{/each}}
+				</div>
+			</ul>
+		</div>
+		{{/each}}
+	</div>
+</div>
 <div class="btn-area">
-    <a class="btn pull-left" {{action back}}>&larr; Back</a>
-    <a class="btn btn-success pull-right" {{action submit target="controller"}}>Next &rarr;</a>
+	<a class="btn pull-left" {{action back}}>&larr; Back</a>
+	<a class="btn btn-success pull-right" {{action submit target="controller"}}>Next &rarr;</a>
 </div>

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

@@ -18,103 +18,106 @@
 
 <div id="deploy">
 
-<h2>{{t installer.step9.header}}</h2>
-<p class="alert alert-info">{{t installer.step9.body}}</p>
+	<h2>{{t installer.step9.header}}</h2>
 
-<div id="overallProgress">
-  {{view.isStepCompleted}}
-  <div class="row-fluid">
-    <div class="span10">
-      <div {{bindAttr class="isStepCompleted::progress-striped isStepCompleted::active view.barColor :progress"}}>
-        <div class="bar" {{bindAttr style="view.barWidth"}}><!--<strong style="color: #00008b;">Overall Progress</strong>-->
-        </div>
-      </div>
-    </div>
-    <div class="span2">{{progress}}% overall</div>
-  </div>
-</div>
+	<p class="alert alert-info">{{t installer.step9.body}}</p>
 
-<div class="box">
-  <div class="box-header">
-    <div class="pull-left">
-      <a
-        class="btn btn-primary " {{bindAttr disabled="isSubmitDisabled"}}
-        href="#" {{action retry target="controller"}}><i
-        class="icon-repeat icon-white"></i>
-        Retry
-      </a>
-      <a
-        class="btn btn-info"
-        href="#" {{action mockBtn target="controller"}}>
-        mockData
-      </a>
-      <a
-        class="btn btn-primary "
-        href="#" {{action pollBtn target="controller"}}><i
-        class="icon-repeat icon-white"></i>
-        pollData
-      </a>
-    </div>
+	<div id="overallProgress">
+		{{view.isStepCompleted}}
+		<div class="row-fluid">
+			<div class="span10">
+				<div {{bindAttr class="isStepCompleted::progress-striped isStepCompleted::active view.barColor :progress"}}>
+					<div class="bar" {{bindAttr style="view.barWidth"}}>
+						<!--<strong style="color: #00008b;">Overall Progress</strong>-->
+					</div>
+				</div>
+			</div>
+			<div class="span2">{{progress}}% overall</div>
+		</div>
+	</div>
 
-  </div>
-  <table id="deploy-status-by-host" class="table table-bordered table-striped">
-    <thead>
-    <tr>
-      <th class="host">
-        Host
-      </th>
-      <th class="status">Status</th>
-      <!--  given by the parsing function that parses data from bootstrap call -->
-      <th class="message">Message</th>
-      <!-- retrieved from local storage initially -->
-    </tr>
-    </thead>
+	<div class="box">
+		<div class="box-header">
+			<div class="pull-left">
+				<a
+								class="btn btn-primary " {{bindAttr disabled="isSubmitDisabled"}}
+								href="#" {{action retry target="controller"}}><i
+								class="icon-repeat icon-white"></i>
+					Retry
+				</a>
+				<a
+								class="btn btn-info"
+								href="#" {{action mockBtn target="controller"}}>
+					mockData
+				</a>
+				<a
+								class="btn btn-primary "
+								href="#" {{action pollBtn target="controller"}}><i
+								class="icon-repeat icon-white"></i>
+					pollData
+				</a>
+			</div>
 
-    <tbody>
+		</div>
+		<div class="pre-scrollable" style="max-height: 750px;">
+			<table id="deploy-status-by-host" class="table table-bordered table-striped">
+				<thead>
+				<tr>
+					<th class="host">
+						Host
+					</th>
+					<th class="status">Status</th>
+					<!--  given by the parsing function that parses data from bootstrap call -->
+					<th class="message">Message</th>
+					<!-- retrieved from local storage initially -->
+				</tr>
+				</thead>
 
-    {{#each host in controller}}
-    {{#view App.HostStatusView objBinding="host"}}
-    <td>
-      {{host.name}}
-    </td>
-    <td>
-        <div class="progress-bar pull-left">
-          <div {{bindAttr class="isStepCompleted::progress-striped isStepCompleted::active view.barColor :progress"}}>
-            <div class="bar" {{bindAttr style="view.barWidth"}}>
-            </div>
-          </div>
-        </div>
-        <div class="progress-percentage pull-left">{{host.progress}}%</div>
-    </td>
-    <td>
-      <a {{bindAttr class="view.isFailed:text-error view.isSuccess:text-success view.isWarning:text-warning"}}
-        href="javascript:void(null)"
-        data-toggle="modal" {{action "hostLogPopup" target="controller"}}>{{host.message}}</a>
-    </td>
+				<tbody>
+				{{#each host in controller}}
+				{{#view App.HostStatusView objBinding="host"}}
+				<td>
+					{{host.name}}
+				</td>
+				<td>
+					<div class="progress-bar pull-left">
+						<div {{bindAttr class="isStepCompleted::progress-striped isStepCompleted::active view.barColor :progress"}}>
+							<div class="bar" {{bindAttr style="view.barWidth"}}>
+							</div>
+						</div>
+					</div>
+					<div class="progress-percentage pull-left">{{host.progress}}%</div>
+				</td>
+				<td>
+					<a {{bindAttr class="view.isFailed:text-error view.isSuccess:text-success view.isWarning:text-warning"}}
+									href="javascript:void(null)"
+									data-toggle="modal" {{action "hostLogPopup" target="controller"}}>{{host.message}}</a>
+				</td>
 
-    {{/view}}
-    {{/each}}
+				{{/view}}
+				{{/each}}
 
-    </tbody>
-  </table>
-  <div class="box-footer">
-    <hr/>
-    <div class="footer-pagination">
-    </div>
-  </div>
-</div>
+				</tbody>
+			</table>
+			</div>
+			<div class="box-footer">
+				<hr/>
+				<div class="footer-pagination">
+				</div>
+			</div>
+		</div>
 
-<div>
-  {{#if view.resultMsg}}
-  <p {{bindAttr class="view.resultMsgColor"}}>{{view.resultMsg}}</p>
-  {{/if}}
-  <div class="btn-area">
-    <a
-      class="btn pull-left" {{bindAttr disabled="isSubmitDisabled"}} {{action back target="controller"}}>&larr;
-      Back</a>
-    <a
-      class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>Next &rarr;</a>
-  </div>
-</div>
+		<div>
+			{{#if view.resultMsg}}
+			<p {{bindAttr class="view.resultMsgColor"}}>{{view.resultMsg}}</p>
+			{{/if}}
+			<div class="btn-area">
+				<a
+								class="btn pull-left" {{bindAttr disabled="isSubmitDisabled"}} {{action back target="controller"}}>&larr;
+					Back</a>
+				<a
+								class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action submit target="controller"}}>Next &rarr;</a>
+			</div>
+		</div>
 
-</div>
+	</div>

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

@@ -25,13 +25,6 @@ App.InstallerStep8View = Em.View.extend({
 
   didInsertElement: function () {
     var controller = this.get('controller');
-    console.log('***^^^****2 over here*****^^^^*******');
     controller.loadStep();
-    //this.doConfigsUneditable();
-  },
-
-  doConfigsUneditable: function() {
-
   }
-
 });