You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by yu...@apache.org on 2012/10/25 22:02:40 UTC

svn commit: r1402309 [3/5] - in /incubator/ambari/branches/AMBARI-666: ./ ambari-web/app/ ambari-web/app/assets/img/ ambari-web/app/controllers/ ambari-web/app/controllers/installer/ ambari-web/app/controllers/main/ ambari-web/app/controllers/main/host...

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/wizard/step9.hbs
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/wizard/step9.hbs?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/wizard/step9.hbs (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/templates/wizard/step9.hbs Thu Oct 25 20:02:35 2012
@@ -0,0 +1,123 @@
+<!--
+* 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.
+-->
+
+<div id="deploy">
+
+	<h2>{{t installer.step9.header}}</h2>
+
+	<p class="alert alert-info">{{t installer.step9.body}}</p>
+
+	<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 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>
+		<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>
+
+				<tbody>
+				{{#each host in controller.hosts}}
+				{{#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}}
+
+				</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>

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views.js Thu Oct 25 20:02:35 2012
@@ -86,12 +86,14 @@ require('views/installer/step3_view');
 require('views/installer/step4_view');
 require('views/installer/step5_view');
 require('views/installer/step6_view');
-require('views/installer/step7_view');
-require('views/installer/step8_view');
-require('views/installer/step9_view');
 require('views/installer/step10_view');
+require('views/wizard/controls_view');
+require('views/wizard/step1_view');
 require('views/wizard/step2_view');
 require('views/wizard/step3_view');
 require('views/wizard/step4_view');
 require('views/wizard/step5_view');
 require('views/wizard/step6_view');
+require('views/wizard/step7_view');
+require('views/wizard/step8_view');
+require('views/wizard/step9_view');

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/common/modal_popup.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/common/modal_popup.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/common/modal_popup.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/common/modal_popup.js Thu Oct 25 20:02:35 2012
@@ -24,7 +24,10 @@ App.ModalPopup = Ember.View.extend({
     '<div class="modal-backdrop"></div><div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">',
     '<div class="modal-header">',
     '<a class="close" {{action onClose target="view"}}>x</a>',
-    '<h3 id="modal-label">{{view.header}}</h3>',
+    '<h3 id="modal-label">',
+    '{{#if headerClass}}{{view headerClass}}',
+    '{{else}}{{header}}{{/if}}',
+    '</h3>',
     '</div>',
     '<div class="modal-body">',
     '{{#if bodyClass}}{{view bodyClass}}',

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main.js Thu Oct 25 20:02:35 2012
@@ -20,18 +20,32 @@
 var App = require('app');
 
 App.MainView = Em.View.extend({
-  templateName: require('templates/main'),
-  isInHostsPath: function(){
-    var isInHostsPath = App.router.get('currentState.name') === 'hosts';
-    if (isInHostsPath){
-      App.router.get('mainHostController').startLoadOperationsPeriodically()
-    } else {
-      App.router.get('mainHostController').stopLoadOperationsPeriodically()
-    }
-    return isInHostsPath;
-  }.property('App.router.currentState.name'),
-  backgroundOperationsCount:function () {
-    return App.router.get('mainHostController.backgroundOperationsCount');
-  }.property('App.router.mainHostController.backgroundOperationsCount')
+  templateName: require('templates/main')
+});
 
+App.MainBackgroundOperation = Em.View.extend({
+  content: null,
+  classNames: ['background-operations'],
+  classNameBindings: ['isOpen'],
+  isOpen: false,
+  logDetails: null,
+  isOpenShowLog: false,
+  iconClass: function(){
+    return this.get('isOpen') ? 'icon-minus' : 'icon-plus';
+  }.property('isOpen'),
+  openDetails: function(){
+    this.set('isOpen', !this.get('isOpen'))
+  },
+  showOperationLog:function(){
+    var operation = this.get('content');
+    var self = this;
+    if (!this.get('isOpenShowLog') && !this.get('logDetails')) {
+      jQuery.getJSON('data/hosts/background_operations/logs/task' +operation.taskId + '.json',
+        function (data) {
+          self.set('logDetails', data);
+        }
+      );
+    }
+    this.set('isOpenShowLog', !this.get('isOpenShowLog'))
+  }
 });
\ No newline at end of file

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host.js Thu Oct 25 20:02:35 2012
@@ -19,39 +19,70 @@
 var App = require('app');
 
 App.MainHostView = Em.View.extend({
-  templateName: require('templates/main/host'),
-  content:function(){
+  templateName:require('templates/main/host'),
+  filterByName:"",
+  controller: function(){
+    return App.router.get('mainHostController');
+  }.property(),
+  content:function () {
     return App.router.get('mainHostController.content');
   }.property('App.router.mainHostController.content'),
   componentsIds: [1, 2, 3, 4, 5, 6, 7, 8],
-  isFilterOpen: false,
-  isApplyDisabled: function(){
+
+  isFilterOpen:false,
+  isApplyDisabled:function () {
     return !this.get('isFilterOpen')
   }.property('isFilterOpen'),
-  btnGroupClass: function(){
+  btnGroupClass:function () {
     return this.get('isFilterOpen') ? 'btn-group open' : 'btn-group';
   }.property('isFilterOpen'),
 
-  applyFilters: function(){
+  applyFilters:function () {
     this.set('isFilterOpen', false);
-    App.router.get('mainHostController').filterByComponentsIds(this.get('componentsIds'));
+    App.router.get('mainHostController').filterByComponentsIds();
   },
 
-  clickFilterButton: function(){
+  allComponentsChecked: true,
+  toggleAllComponents: function(){
+    this.set('masterComponentsChecked', this.get('allComponentsChecked'));
+    this.set('slaveComponentsChecked', this.get('allComponentsChecked'));
+  }.observes('allComponentsChecked'),
+
+  masterComponentsChecked: false,
+  toggleMasterComponents: function(){
+    var checked = this.get('masterComponentsChecked');
+    this.get('controller.masterComponents').forEach(function(comp){
+      comp.set('checkedForHostFilter', checked);
+    });
+  }.observes('masterComponentsChecked'),
+
+  slaveComponentsChecked:false,
+  toggleSlaveComponents: function(){
+    var checked = this.get('slaveComponentsChecked');
+    this.get('controller.slaveComponents').forEach(function(comp){
+      comp.set('checkedForHostFilter', checked);
+    });
+  }.observes('slaveComponentsChecked'),
+
+  applyHostFilter:function () {
+    App.router.get('mainHostController').filterHostsBy('hostName', this.get('filterByName'));
+  }.observes('filterByName'),
+
+  clickFilterButton:function () {
     var self = this;
     this.set('isFilterOpen', !this.get('isFilterOpen'));
-    if (this.get('isFilterOpen')){
+    if (this.get('isFilterOpen')) {
       var filters = App.router.get('mainHostController.filters.components');
       $('.filter-component').each(function () {
-        var componentId = parseInt($(this).attr('id').replace('component-',''));
+        var componentId = parseInt($(this).attr('id').replace('component-', ''));
         var index = filters.indexOf(componentId);
         $(this).attr('checked', index == -1);
       });
-      this.set('componentsIds', filters.toArray());
+//      this.set('componentsIds', filters.toArray());
 
       var dropDown = $('#filter-dropdown');
       var firstClick = true;
-      $(document).bind('click', function(e) {
+      $(document).bind('click', function (e) {
         if (!firstClick && $(e.target).closest(dropDown).length == 0) {
           self.set('isFilterOpen', false);
           $(document).unbind('click');
@@ -60,66 +91,60 @@ App.MainHostView = Em.View.extend({
       });
     }
   },
-  HostView: Em.View.extend({
-    content: null,
-    labels: '',
-    init: function(){
+  HostView:Em.View.extend({
+    content:null,
+    labels:'',
+    init:function () {
       this._super();
       var labels = this.get('content.components').getEach('label');
       this.set('labels', labels.join(', '));
     },
-    HostCheckboxView: Em.Checkbox.extend({
-      content: null,
-      isChecked: false,
-      change: function(event) {
+    usageStyle:function () {
+      return "width:" + this.get('content.diskUsage') + "%";
+    }.property('content.diskUsage'),
+    HostCheckboxView:Em.Checkbox.extend({
+      content:null,
+      isChecked:false,
+      change:function (event) {
         this.set('isChecked', !this.get('content.isChecked'));
         App.router.get('mainHostController').onHostChecked(this.get('content'));
       }
     })
   }),
-  ComponentCheckboxView: Em.Checkbox.extend({
-    content: null,
-    elementId: function(){
+
+  ComponentCheckboxView:Em.Checkbox.extend({
+    content:null,
+    elementId:function () {
       return 'component-' + this.get('content.id');
     }.property('content.id'),
-    classNames: ['filter-component'],
-    parentView: function(){
+    classNames:['filter-component'],
+    parentView:function () {
       return this._parentView.templateData.view;
     }.property(),
-    change: function(event) {
-      var parent = this._parentView.templateData.view;
-      var componentsIds = parent.get('componentsIds');
-      var componentId = this.get('content.id');
-      var index = componentsIds.indexOf(componentId);
-      if(index==-1) componentsIds.push(componentId);
-      else componentsIds.splice(index, 1);
-    }
-  })
-});
+    checkedBinding:"content.checkedForHostFilter"
 
-App.MainBackgroundOperation = Em.View.extend({
-  content: null,
-  classNames: ['background-operations'],
-  classNameBindings: ['isOpen'],
-  isOpen: false,
-  logDetails: null,
-  isOpenShowLog: false,
-  iconClass: function(){
-    return this.get('isOpen') ? 'icon-minus' : 'icon-plus';
-  }.property('isOpen'),
-  openDetails: function(){
-    this.set('isOpen', !this.get('isOpen'))
-  },
-  showOperationLog:function(){
-    var operation = this.get('content');
-    var self = this;
-    if (!this.get('isOpenShowLog') && !this.get('logDetails')) {
-      jQuery.getJSON('data/hosts/background_operations/logs/task' +operation.taskId + '.json',
-        function (data) {
-          self.set('logDetails', data);
-        }
-      );
-    }
-    this.set('isOpenShowLog', !this.get('isOpenShowLog'))
-  }
-});
+//    willInsertElement: function() {
+//      this._super();
+//      console.warn("CONTENT_HOST_CHECKED:", this.get('content.checkedForHostFilter'), " THIS CHECKED: ", this.get('checked'));
+//    },
+//
+//    didInsertElement: function(){
+//      this._super();
+//      this.propertyDidChange('content.checkedForHostFilter');
+//      console.warn("CONTENT_HOST_CHECKED:", this.get('content.checkedForHostFilter'), " THIS CHECKED: ", this.get('checked'));
+//    }
+
+//    test: function(){
+//      console.warn("Test:", this.get('content.checkedForHostFilter'));
+//    }.observes("content.checkedForHostFilter")
+
+//    change:function (event) {
+//      var parent = this._parentView.templateData.view;
+//      var componentsIds = parent.get('componentsIds');
+//      var componentId = this.get('content.id');
+//      var index = componentsIds.indexOf(componentId);
+//      if (index == -1) componentsIds.push(componentId);
+//      else componentsIds.splice(index, 1);
+//    }
+  })
+});
\ No newline at end of file

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/details.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/details.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/details.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/details.js Thu Oct 25 20:02:35 2012
@@ -27,4 +27,22 @@ App.MainHostDetailsView = Em.View.extend
     var options = [{action: 'deleteHost', 'label': 'Delete Host'}];
     return options;
   }.property('controller.content')
+});
+
+App.MainHostDetailsOperations = Em.View.extend({
+  content: null,
+  classNames: ['background-operations'],
+  classNameBindings: ['isOpen'],
+  isOpen: false,
+  logDetails: null,
+  isOpenShowLog: false,
+  iconClass: function(){
+    return this.get('isOpen') ? 'icon-minus' : 'icon-plus';
+  }.property('isOpen'),
+  openDetails: function(){
+    this.set('isOpen', !this.get('isOpen'))
+  },
+  showOperationLog:function(){
+    this.set('isOpenShowLog', !this.get('isOpenShowLog'))
+  }
 });
\ No newline at end of file

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/summary.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/summary.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/summary.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/host/summary.js Thu Oct 25 20:02:35 2012
@@ -33,7 +33,10 @@ App.MainHostSummaryView = Em.View.extend
     }.property('content.id') ,
     buttonClass: function() {
       return this.get('content.workStatus') ? 'btn btn-success dropdown-toggle' : 'btn btn-danger dropdown-toggle';
-    }.property('content.workStatus')
+    }.property('content.workStatus'),
+    isDataNode: function() {
+      return this.get('content.componentName') === 'DataNode';
+    }.property('content')
   })
 
 });
\ No newline at end of file

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/hosts.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/hosts.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/hosts.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/hosts.js Thu Oct 25 20:02:35 2012
@@ -1,4 +1,4 @@
-/**
+  /**
  * 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

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/menu.js Thu Oct 25 20:02:35 2012
@@ -69,6 +69,14 @@ App.MainMenuView = Em.CollectionView.ext
       }
     }.property(),
 
-    template:Ember.Handlebars.compile('<a href="#/main/{{unbound view.content.routing}}">{{unbound view.content.label}}{{#if view.alertsCount}}<span class="label label-important alerts-count">{{view.alertsCount}}</span>{{/if}}</a>')
+    hostDetailsOperationsCount:function () {
+      if (this.get('content').routing == 'hosts') {
+        if (App.router.currentState.parentState.name == 'hostDetails') {
+          return App.router.get('mainHostDetailsController.hostOperationsCount');
+        }
+      }
+    }.property('App.router.currentState.parentState.name', 'App.router.mainHostDetailsController.hostOperationsCount'),
+
+    templateName: require('templates/main/menu_item')
   })
 });
\ No newline at end of file

Modified: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/service/info/summary.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/service/info/summary.js?rev=1402309&r1=1402308&r2=1402309&view=diff
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/service/info/summary.js (original)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/main/service/info/summary.js Thu Oct 25 20:02:35 2012
@@ -26,6 +26,24 @@ App.MainServiceInfoSummaryView = Em.View
     mapreduce: false,
     hbase: false
   },
+
+  alerts: function(){
+    var serviceId = this.get('service.id');
+    if(serviceId) {
+      return App.Alert.find({'service_id':serviceId });
+    }
+    return [];
+//    return App.router.get('mainServiceInfoSummaryController.content.alerts');
+  }.property('App.router.mainServiceInfoSummaryController.content.alerts'),
+
+  controller: function(){
+    return App.router.get('mainServiceInfoSummaryController');
+  }.property(),
+
+  service: function(){
+    return this.get('controller.content');
+  }.property('controller.content'),
+
   isHide: true,
   moreStatsView: Em.View.extend({
     tagName: "a",
@@ -56,6 +74,7 @@ App.MainServiceInfoSummaryView = Em.View
         summaryView.set('serviceStatus.' + key, false);
       }
     });
+
     jQuery.getJSON('data/services/summary/' + serviceName + '.json',
       function (data) {
         if (data[serviceName]) {

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/controls_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/controls_view.js?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/controls_view.js (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/controls_view.js Thu Oct 25 20:02:35 2012
@@ -0,0 +1,436 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+
+/**
+ * Abstract view for config fields.
+ * Add popover support to control
+ */
+App.ServiceConfigPopoverSupport = Ember.Mixin.create({
+
+  /**
+   * Config object. It will instance of App.ServiceConfigProperty
+   */
+  serviceConfig: null,
+
+  isPopoverEnabled: true,
+
+  didInsertElement: function () {
+    if (this.get('isPopoverEnabled') !== 'false') {
+      this.$().popover({
+        title: this.get('serviceConfig.displayName') + '<br><small>' + this.get('serviceConfig.name') + '</small>',
+        content: this.get('serviceConfig.description'),
+        placement: 'right',
+        trigger: 'hover'
+      });
+    }
+  }
+});
+
+/**
+ * Default input control
+ * @type {*}
+ */
+App.ServiceConfigTextField = Ember.TextField.extend(App.ServiceConfigPopoverSupport, {
+
+  valueBinding: 'serviceConfig.value',
+  classNameBindings: 'textFieldClassName',
+
+  textFieldClassName: function () {
+    // sets the width of the field depending on display type
+    if (['directory', 'url', 'email', 'user', 'host'].contains(this.get('serviceConfig.displayType'))) {
+      return ['span6'];
+    } else {
+      return ['input-small'];
+    }
+  }.property('serviceConfig.displayType'),
+
+  disabled: function () {
+    return !this.get('serviceConfig.isEditable');
+  }.property('serviceConfig.isEditable')
+
+});
+
+/**
+ * Customized input control with Utits type specified
+ * @type {*}
+ */
+App.ServiceConfigTextFieldWithUnit = Ember.View.extend(App.ServiceConfigPopoverSupport, {
+  valueBinding: 'serviceConfig.value',
+  classNames: [ 'input-append' ],
+
+  template: Ember.Handlebars.compile('{{view App.ServiceConfigTextField serviceConfigBinding="view.serviceConfig" isPopoverEnabled="false"}}<span class="add-on">{{view.serviceConfig.unit}}</span>'),
+
+  disabled: function () {
+    return !this.get('serviceConfig.isEditable');
+  }.property('serviceConfig.isEditable')
+
+});
+
+/**
+ * Password control
+ * @type {*}
+ */
+App.ServiceConfigPasswordField = Ember.TextField.extend({
+
+  serviceConfig: null,
+  type: 'password',
+  valueBinding: 'serviceConfig.value',
+  classNames: [ 'span3' ],
+  placeholder: 'Type password',
+
+  template: Ember.Handlebars.compile('{{view view.retypePasswordView placeholder="Retype password"}}'),
+
+  retypePasswordView: Ember.TextField.extend({
+    type: 'password',
+    classNames: [ 'span3', 'retyped-password' ],
+    valueBinding: 'parentView.serviceConfig.retypedPassword'
+  })
+
+});
+
+/**
+ * Textarea control
+ * @type {*}
+ */
+App.ServiceConfigTextArea = Ember.TextArea.extend(App.ServiceConfigPopoverSupport, {
+
+  valueBinding: 'serviceConfig.value',
+  rows: 4,
+  classNames: ['span6'],
+
+  disabled: function () {
+    return !this.get('serviceConfig.isEditable');
+  }.property('serviceConfig.isEditable')
+
+});
+
+/**
+ * Textarea control with bigger height
+ * @type {*}
+ */
+App.ServiceConfigBigTextArea = App.ServiceConfigTextArea.extend({
+  rows: 10
+});
+
+/**
+ * Checkbox control
+ * @type {*}
+ */
+App.ServiceConfigCheckbox = Ember.Checkbox.extend(App.ServiceConfigPopoverSupport, {
+
+  checkedBinding: 'serviceConfig.value',
+
+  disabled: function () {
+    return !this.get('serviceConfig.isEditable');
+  }.property('serviceConfig.isEditable')
+
+});
+
+<!-- {{bindAttr name="view.name" value="option"}}  '<input type="radio" {{bindAttr name = "view.name" value="view.obj"}}>',-->
+App.ServiceConfigRadioButtons = Ember.View.extend({
+  template: Ember.Handlebars.compile([
+    '{{#each option in view.options}}',
+    '<label class="radio">',
+    '{{#view App.ServiceConfigRadioButton nameBinding = "view.name" valueBinding = "option.displayName"}}',
+    '{{/view}}',
+    '{{option.displayName}} &nbsp;',
+    '</label>',
+    '{{/each}}'
+  ].join('\n')),
+  serviceConfig: null,
+  categoryConfigs: null,
+  nameBinding: 'serviceConfig.radioName',
+  optionsBinding: 'serviceConfig.options'
+});
+
+App.ServiceConfigRadioButton = Ember.Checkbox.extend({
+  tagName: 'input',
+  attributeBindings: ['type', 'name', 'value', 'checked'],
+  checked: false,
+  type: 'radio',
+  name: null,
+  value: null,
+
+  didInsertElement: function () {
+    if (this.get('parentView.serviceConfig.value') === this.get('value')) {
+      this.set('checked', true);
+    }
+  },
+
+  click: function () {
+    this.set('checked', true);
+    this.onChecked();
+  },
+
+  onChecked: function () {
+    this.set('parentView.serviceConfig.value', this.get('value'));
+    var components = this.get('parentView.serviceConfig.options');
+    components.forEach(function (_component) {
+      _component.foreignKeys.forEach(function (_componentName) {
+        var component = this.get('parentView.categoryConfigs').findProperty('name', _componentName);
+        if (_component.displayName === this.get('value')) {
+          component.set('isVisible', true);
+        } else {
+          component.set('isVisible', false);
+        }
+      }, this);
+    }, this);
+  }.observes('checked')
+});
+
+App.ServiceConfigComboBox = Ember.Select.extend(App.ServiceConfigPopoverSupport, {
+  contentBinding: 'serviceConfig.options',
+  selectionBinding: 'serviceConfig.value',
+  classNames: [ 'span3' ]
+});
+
+
+/**
+ * Base component for host config with popover support
+ */
+App.ServiceConfigHostPopoverSupport = Ember.Mixin.create({
+
+  /**
+   * Config object. It will instance of App.ServiceConfigProperty
+   */
+  serviceConfig: null,
+
+  didInsertElement: function () {
+    this.$().popover({
+      title: this.get('serviceConfig.displayName'),
+      content: this.get('serviceConfig.description'),
+      placement: 'right',
+      trigger: 'hover'
+    });
+  }
+});
+
+/**
+ * Master host component.
+ * Show hostname without ability to edit it
+ * @type {*}
+ */
+App.ServiceConfigMasterHostView = Ember.View.extend(App.ServiceConfigHostPopoverSupport, {
+
+  classNames: ['master-host', 'span6'],
+  valueBinding: 'serviceConfig.value',
+
+  template: Ember.Handlebars.compile('{{value}}')
+
+});
+
+/**
+ * Base component to display Multiple hosts
+ * @type {*}
+ */
+App.ServiceConfigMultipleHostsDisplay = Ember.Mixin.create(App.ServiceConfigHostPopoverSupport, {
+
+  hasNoHosts: function () {
+    console.log('view', this.get('viewName')); //to know which View cause errors
+    console.log('controller', this.get('controller').name); //should be slaveComponentGroupsController
+    if(!this.get('value')){
+      debugger;
+    }
+    return this.get('value').length === 0;
+  }.property('value'),
+
+  hasOneHost: function () {
+    return this.get('value').length === 1;
+  }.property('value'),
+
+  hasMultipleHosts: function () {
+    return this.get('value').length > 1;
+  }.property('value'),
+
+  otherLength: function () {
+    var len = this.get('value').length;
+    if (len > 2) {
+      return (len - 1) + ' others';
+    } else {
+      return '1 other';
+    }
+  }.property('value')
+
+})
+
+
+/**
+ * Multiple master host component.
+ * Show hostnames without ability to edit it
+ * @type {*}
+ */
+App.ServiceConfigMasterHostsView = Ember.View.extend(App.ServiceConfigMultipleHostsDisplay, {
+
+  viewName : "serviceConfigMasterHostsView",
+  valueBinding: 'serviceConfig.value',
+
+  classNames: ['master-hosts', 'span6'],
+  templateName: require('templates/wizard/master_hosts'),
+
+  /**
+   * Onclick handler for link
+   */
+  showHosts: function () {
+    var serviceConfig = this.get('serviceConfig');
+    App.ModalPopup.show({
+      header: serviceConfig.  category + ' Hosts',
+      bodyClass: Ember.View.extend({
+        serviceConfig: serviceConfig,
+        templateName: require('templates/wizard/master_hosts_popup')
+      }),
+      onPrimary:function(){
+        this.hide();
+      }
+    });
+  }
+
+});
+
+/**
+ * Show tabs list for slave hosts
+ * @type {*}
+ */
+App.SlaveComponentGroupsMenu = Em.CollectionView.extend({
+
+  content: function(){
+    return this.get('controller.componentGroups');
+  }.property('controller.componentGroups'),
+
+  tagName:'ul',
+  classNames: ["nav", "nav-tabs"],
+
+  itemViewClass:Em.View.extend({
+    classNameBindings:["active"],
+
+    active:function(){
+      return this.get('content.active');
+    }.property('content.active'),
+
+    template:Ember.Handlebars.compile('<a {{action showSlaveComponentGroup view.content target="controller"}} href="#"> {{view.content.name}}</a><i {{action removeSlaveComponentGroup view.content target="controller"}} class="icon-remove"></i>')
+  })
+});
+
+/**
+ * <code>Add group</code> button
+ * @type {*}
+ */
+App.AddSlaveComponentGroupButton = Ember.View.extend({
+
+  tagName: 'span',
+  slaveComponentName: null,
+
+  didInsertElement: function () {
+    this.$().popover({
+      title: 'Add a ' + this.get('slaveComponentName') + ' Group',
+      content: 'If you need different settings on certain ' + this.get('slaveComponentName') + 's, you can add a ' + this.get('slaveComponentName') + ' group.<br>' +
+        'All ' + this.get('slaveComponentName') + 's within the same group will have the same set of settings.  You can create multiple groups.',
+      placement: 'right',
+      trigger: 'hover'
+    });
+  }
+
+});
+
+/**
+ * Multiple Slave Hosts component
+ * @type {*}
+ */
+App.ServiceConfigSlaveHostsView = Ember.View.extend(App.ServiceConfigMultipleHostsDisplay, {
+
+  viewName : 'serviceConfigSlaveHostsView',
+
+  classNames: ['slave-hosts', 'span6'],
+  valueBinding: 'hosts',
+
+  group: function(){
+    return this.get('controller.activeGroup');
+  }.property('controller.activeGroup'),
+
+  hosts: function(){
+    if (this.get('group')){
+      return this.get('controller').getHostsByGroup(this.get('group'))
+    }
+  }.property('controller.hosts.@each.group', 'group'),
+
+  templateName: require('templates/wizard/slave_component_hosts'),
+
+  disabled: function () {
+    return !this.get('serviceConfig.isEditable');
+  }.property('serviceConfig.isEditable')
+});
+
+/**
+ * DropDown component for <code>select hosts for groups</code> popup
+ * @type {*}
+ */
+App.SlaveComponentDropDownGroupView = Ember.View.extend({
+
+  viewName : "slaveComponentDropDownGroupView",
+
+  /**
+   * On change handler for <code>select hosts for groups</code> popup
+   * @param event
+   */
+  changeGroup: function(event) {
+    var host = this.get('content');
+    var groupName = $('#'+this.get('elementId') + ' select').val();
+    this.get('controller').changeHostGroup(host, groupName);
+  },
+
+  optionTag: Ember.View.extend({
+
+    /**
+     * Whether current value(OptionTag value) equals to host value(assigned to SlaveComponentDropDownGroupView.content)
+     */
+    selected: function(){
+      return this.get('parentView.content.group') === this.get('content');
+    }.property('content')
+  })
+});
+
+/**
+ * Show info about current group
+ * @type {*}
+ */
+App.SlaveComponentChangeGroupNameView = Ember.View.extend({
+
+  contentBinding: 'controller.activeGroup',
+  classNames: ['control-group'],
+  classNameBindings: 'error',
+  error: false,
+  setError: function(){
+    this.set('error', false);
+  }.observes('controller.activeGroup'),
+  errorMessage: function(){
+    return this.get('error') ? 'group with this name already exist' : '';
+  }.property('error'),
+
+  /**
+   * Onclick handler for saving updated group name
+   * @param event
+   */
+  changeGroupName: function(event) {
+    var inputVal = $('#'+this.get('elementId') + ' input[type="text"]').val();
+    if (inputVal !== this.get('content.name')){
+      var result = this.get('controller').changeSlaveGroupName(this.get('content'), inputVal);
+      this.set('error', result);
+    }
+  }
+});

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step1_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step1_view.js?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step1_view.js (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step1_view.js Thu Oct 25 20:02:35 2012
@@ -0,0 +1,34 @@
+/**
+ * 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.
+ */
+
+
+var App = require('app');
+
+App.WizardStep1View = Em.View.extend({
+
+  templateName: require('templates/wizard/step1'),
+
+  didInsertElement: function () {
+    $("[rel=popover]").popover({'placement': 'right', 'trigger': 'hover'});
+  },
+
+  onError: function () {
+    return this.get('controller.clusterNameError') !== '';
+  }.property('controller.clusterNameError')
+
+});

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step7_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step7_view.js?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step7_view.js (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step7_view.js Thu Oct 25 20:02:35 2012
@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+
+
+var App = require('app');
+
+App.WizardStep7View = Em.View.extend({
+
+  templateName: require('templates/wizard/step7'),
+
+  didInsertElement: function () {
+    var controller = this.get('controller');
+    controller.loadStep();
+  }
+
+});
+
+/**
+ * Since we need to use local Views and Controllers we should put them into separate context
+ * @type {*|Object}
+ */
+App.WizardStep7 = App.WizardStep7 || {};
+
+App.WizardStep7.ServiceConfigsByCategoryView = Ember.View.extend({
+
+  content: null,
+
+  category: null,
+  serviceConfigs: null, // General, Advanced, NameNode, SNameNode, DataNode, etc.
+
+  categoryConfigs: function () {
+    return this.get('serviceConfigs').filterProperty('category', this.get('category.name'))
+  }.property('serviceConfigs.@each').cacheable(),
+
+  layout: Ember.Handlebars.compile('<div class="accordion-body collapse in"><div class="accordion-inner">{{yield}}</div></div>')
+});
+
+App.WizardStep7.ServiceConfigTab = Ember.View.extend({
+
+  tagName: 'li',
+
+  selectService: function (event) {
+    this.set('controller.selectedService', event.context);
+  },
+
+  didInsertElement: function () {
+    var serviceName = this.get('controller.selectedService.serviceName');
+    this.$('a[href="#' + serviceName + '"]').tab('show');
+  }
+});

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step8_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step8_view.js?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step8_view.js (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step8_view.js Thu Oct 25 20:02:35 2012
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+
+var App = require('app');
+
+App.WizardStep8View = Em.View.extend({
+
+  templateName: require('templates/wizard/step8'),
+
+  didInsertElement: function () {
+    var controller = this.get('controller');
+    controller.loadStep();
+  }
+});

Added: incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step9_view.js
URL: http://svn.apache.org/viewvc/incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step9_view.js?rev=1402309&view=auto
==============================================================================
--- incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step9_view.js (added)
+++ incubator/ambari/branches/AMBARI-666/ambari-web/app/views/wizard/step9_view.js Thu Oct 25 20:02:35 2012
@@ -0,0 +1,116 @@
+/**
+ * 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.
+ */
+
+
+var App = require('app');
+
+App.WizardStep9View = Em.View.extend({
+
+  templateName: require('templates/wizard/step9'),
+  barColor: '',
+  resultMsg: '',
+  resultMsgColor: '',
+
+  didInsertElement: function () {
+    var controller = this.get('controller');
+    this.onStatus();
+    controller.navigateStep();
+  },
+
+  barWidth: function () {
+    var controller = this.get('controller');
+    var barWidth = 'width: ' + controller.get('progress') + '%;';
+    return barWidth;
+  }.property('controller.progress'),
+
+  onStatus: function () {
+    if (this.get('controller.status') === 'info') {
+      this.set('resultMsg', '');
+      this.set('barColor', 'progress-info');
+    } else if (this.get('controller.status') === 'warning') {
+      this.set('barColor', 'progress-warning');
+    } else if (this.get('controller.status') === 'failed') {
+      this.set('barColor', 'progress-danger');
+      console.log('TRACE: Inside error view step9');
+      this.set('resultMsg', Em.I18n.t('installer.step9.status.failed'));
+      this.set('resultMsgColor', 'alert-error');
+    } else if (this.get('controller.status') === 'success') {
+      console.log('TRACE: Inside success view step9');
+      this.set('barColor', 'progress-success');
+      this.set('resultMsg', Em.I18n.t('installer.step9.status.success'));
+      this.set('resultMsgColor', 'alert-success');
+    }
+  }.observes('controller.status')
+
+});
+
+App.HostStatusView = Em.View.extend({
+  tagName: 'tr',
+  obj: 'null',
+  barColor: '',
+
+  didInsertElement: function () {
+    var controller = this.get('controller');
+    this.onStatus();
+  },
+  barWidth: function () {
+    var barWidth = 'width: ' + this.get('obj.progress') + '%;';
+    return barWidth;
+  }.property('obj.progress'),
+
+  onStatus: function () {
+    if (this.get('obj.status') === 'info') {
+      this.set('barColor', 'progress-info');
+    } else if (this.get('obj.status') === 'warning') {
+      this.set('barColor', 'progress-warning');
+      this.set('obj.message', Em.I18n.t('installer.step9.host.status.warning'));
+    } else if (this.get('obj.status') === 'failed') {
+      this.set('barColor', 'progress-danger');
+      this.set('obj.message', Em.I18n.t('installer.step9.host.status.failed'));
+    } else if (this.get('obj.status') === 'success') {
+      this.set('barColor', 'progress-success');
+      this.set('obj.message', Em.I18n.t('installer.step9.host.status.success'));
+    }
+  }.observes('obj.status'),
+
+  isFailed: function () {
+    if (this.get('controller.isStepCompleted') === true && this.get('obj.status') === 'failed') {
+      return true;
+    } else {
+      return false;
+    }
+  }.property('controller.isStepCompleted', 'controller.status'),
+
+  isSuccess: function () {
+    if (this.get('controller.isStepCompleted') === true && this.get('obj.status') === 'success') {
+      return true;
+    } else {
+      return false;
+    }
+  }.property('controller.isStepCompleted', 'controller.status'),
+
+  isWarning: function () {
+    if (this.get('controller.isStepCompleted') === true && this.get('obj.status') === 'warning') {
+      return true;
+    } else {
+      return false;
+    }
+  }.property('controller.isStepCompleted', 'controller.status')
+
+});
+