AMBARI-1444. Make install, service \& host configuration pages reuse same configuration code. (srimanth via yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1448452 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -45,6 +45,9 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1444. Make install, service & host configuration pages reuse same
+ configuration code. (srimanth via yusaku)
+
  AMBARI-1457. Improve Job Diagnostics. (Billie Rinaldi via yusaku)
  
  AMBARI-1453. Move Ambari Web application config from initialize.js to

ambari-web/app/templates/common/service_config.hbs

@@ -0,0 +1,54 @@
+{{!
+* 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 class="accordion">
+  {{#each category in selectedService.configCategories}}
+    <div class="accordion-group {{unbound category.name}}">
+      <div class="accordion-heading" {{action "onToggleBlock" category target="view"}}>
+        {{#if category.isCollapsed}}
+          <i class='icon-caret-right pull-left accordion-toggle'></i>
+        {{else}}
+          <i class='icon-caret-down pull-left accordion-toggle'></i>
+        {{/if}}
+        <a class="accordion-toggle">
+          {{category.name}}
+        </a>
+      </div>
+
+
+      {{#view App.ServiceConfigsByCategoryView categoryBinding="category" serviceConfigsBinding="selectedService.configs"}}
+        <form class="form-horizontal">
+
+          {{#each view.categoryConfigs}}
+            {{#if isVisible}}
+              <div {{bindAttr class="errorMessage:error: :control-group"}}>
+                <label class="control-label">{{displayName}}</label>
+
+                <div class="controls">
+                  {{view viewClass serviceConfigBinding="this" categoryConfigsBinding="view.categoryConfigs"}}
+                  <span class="help-inline">{{errorMessage}}</span>
+                </div>
+              </div>
+            {{/if}}
+          {{/each}}
+
+        </form>
+      {{/view}}
+    </div>
+  {{/each}}
+</div>

ambari-web/app/templates/common/services_config.hbs

@@ -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.
+}}
+
+<ul class="nav nav-tabs">
+  {{#each service in controller.stepConfigs}}
+    {{#if service.showConfig}}
+      {{#view App.ServiceConfigTab}}
+        <a class="active" href="#{{unbound service.serviceName}}"
+           data-toggle="tab" {{action selectService service target="view"}}>
+          {{service.displayName}}{{#if service.errorCount}}<span
+                class="badge badge-important">{{service.errorCount}}</span>{{/if}}</a>
+      {{/view}}
+    {{/if}}
+  {{/each}}
+</ul>
+{{view App.ServiceConfigView}}
+{{#if isSubmitDisabled}}
+  <div class="alert">{{t installer.step7.attentionNeeded}}</div>
+{{/if}}

ambari-web/app/templates/main/service/info/configs.hbs

@@ -18,48 +18,13 @@
 
 <div id="serviceConfig">
   {{#if dataIsLoaded}}
-    <div class="accordion">
-      {{#each category in selectedService.configCategories}}
-          <div class="accordion-group {{unbound category.name}}">
-              <div class="accordion-heading" {{action "onToggleBlock" category target="view"}}>
-                {{#if category.isCollapsed}}
-                    <i class='icon-caret-right pull-left accordion-toggle'></i>
-                {{else}}
-                    <i class='icon-caret-down pull-left accordion-toggle'></i>
-                {{/if}}
-                  <a class="accordion-toggle">
-                    {{category.name}}
-                  </a>
-              </div>
-
-
-            {{#view App.ServiceConfigsByCategoryView categoryBinding="category" serviceConfigsBinding="selectedService.configs"}}
-                <form class="form-horizontal">
-
-                  {{#each view.categoryConfigs}}
-                    {{#if isVisible}}
-                        <div {{bindAttr class="errorMessage:error: :control-group"}}>
-                            <label class="control-label">{{displayName}}</label>
-
-                            <div class="controls">
-                              {{view viewClass serviceConfigBinding="this" categoryConfigsBinding="view.categoryConfigs"}}
-                                <span class="help-inline">{{errorMessage}}</span>
-                            </div>
-                        </div>
-                    {{/if}}
-                  {{/each}}
-
-                </form>
-            {{/view}}
-          </div>
-      {{/each}}
-    </div>
+    {{view App.ServiceConfigView}}
     {{#if App.isAdmin}}
-    <p class="pull-right">
+      <p class="pull-right">
         <!--<input class="btn btn-primary" type="button" value="Save" {{!bindAttr disabled="isSubmitDisabled"}} />-->
         <a class="btn btn-primary" {{bindAttr disabled="isSubmitDisabled"}}
           {{action restartServicePopup target="controller"}}>{{t common.save}}</a>
-    </p>
+      </p>
     {{/if}}
   {{else}}
     <div class="spinner"></div>

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

@@ -23,59 +23,7 @@
       {{t installer.step7.body}}
     </div>
 
-    <ul class="nav nav-tabs">
-      {{#each service in controller.stepConfigs}}
-        {{#if service.showConfig}}
-          {{#view App.WizardStep7.ServiceConfigTab}}
-              <a class="active" href="#{{unbound service.serviceName}}"
-                 data-toggle="tab" {{action selectService service target="view"}}>
-                {{service.displayName}}{{#if service.errorCount}}<span
-                      class="badge badge-important">{{service.errorCount}}</span>{{/if}}</a>
-          {{/view}}
-        {{/if}}
-      {{/each}}
-    </ul>
-
-    <div class="accordion">
-      {{#each category in selectedService.configCategories}}
-          <div class="accordion-group {{unbound category.name}}">
-              <div class="accordion-heading" {{action "onToggleBlock" category target="view"}}>
-                {{#if category.isCollapsed}}
-                    <i class='icon-caret-right pull-left accordion-toggle'></i>
-                {{else}}
-                    <i class='icon-caret-down pull-left accordion-toggle'></i>
-                {{/if}}
-                  <a class="accordion-toggle">
-                    {{category.name}}
-                  </a>
-              </div>
-
-
-              {{#view App.WizardStep7.ServiceConfigsByCategoryView categoryBinding="category" serviceConfigsBinding="selectedService.configs"}}
-                  <form class="form-horizontal">
-
-                    {{#each view.categoryConfigs}}
-                      {{#if isVisible}}
-                          <div {{bindAttr class="errorMessage:error: :control-group"}}>
-                              <label class="control-label">{{displayName}}</label>
-
-                              <div class="controls">
-                                {{view viewClass serviceConfigBinding="this" categoryConfigsBinding="view.categoryConfigs"}}
-                                  <span class="help-inline">{{errorMessage}}</span>
-                              </div>
-                          </div>
-                      {{/if}}
-                    {{/each}}
-
-                  </form>
-              {{/view}}
-          </div>
-      {{/each}}
-    </div>
-
-  {{#if isSubmitDisabled}}
-      <div class="alert">{{t installer.step7.attentionNeeded}}</div>
-  {{/if}}
+    {{view App.ServicesConfigView}}
 
     <div class="btn-area">
         <a class="btn" {{action back}}>&larr; {{t common.back}}</a>

ambari-web/app/views.js

@@ -30,6 +30,7 @@ require('views/common/metric');
 require('views/common/time_range');
 require('views/common/form/field');
 require('views/common/quick_view_link_view');
+require('views/common/services_config');
 require('views/login');
 require('views/main');
 require('views/main/menu');

ambari-web/app/views/common/services_config.js

@@ -0,0 +1,74 @@
+
+
+/**
+ * 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.ServicesConfigView = Em.View.extend({
+  templateName: require('templates/common/services_config'),
+  didInsertElement: function () {
+    var controller = this.get('controller');
+    controller.loadStep();
+  }
+});
+
+App.ServiceConfigView = Em.View.extend({
+  templateName: require('templates/common/service_config'),
+  onToggleBlock: function (event) {
+    $(document.getElementById(event.context.name)).toggle('blind', 500);
+    event.context.set('isCollapsed', !event.context.get('isCollapsed'));
+  }
+});
+
+
+App.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(),
+  didInsertElement: function () {
+    if (this.get('category.name') == 'Advanced') {
+      this.set('category.isCollapsed', true);
+      $("#Advanced").hide();
+    } else {
+      this.set('category.isCollapsed', false);
+    }
+  },
+  layout: Ember.Handlebars.compile('<div {{bindAttr id="view.category.name"}} class="accordion-body collapse in"><div class="accordion-inner">{{yield}}</div></div>')
+});
+
+App.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');
+  }
+});
+

ambari-web/app/views/main/service/info/configs.js

@@ -23,31 +23,5 @@ App.MainServiceInfoConfigsView = Em.View.extend({
   didInsertElement: function () {
     var controller = this.get('controller');
     controller.loadStep();
-  },
-  onToggleBlock: function(event){
-    $(document.getElementById(event.context.name)).toggle('blind', 500);
-    event.context.set('isCollapsed', !event.context.get('isCollapsed'));
   }
 });
-
-App.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(),
-  didInsertElement: function () {
-    if (this.get('category.name') == 'Advanced') {
-      this.set('category.isCollapsed', true);
-      $("#Advanced").hide();
-    } else {
-      this.set('category.isCollapsed', false);
-    }
-  },
-  layout: Ember.Handlebars.compile('<div {{bindAttr id="view.category.name"}} class="accordion-body collapse in"><div class="accordion-inner">{{yield}}</div></div>')
-});

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

@@ -21,58 +21,6 @@ var App = require('app');
 
 App.WizardStep7View = Em.View.extend({
 
-  templateName: require('templates/wizard/step7'),
+  templateName: require('templates/wizard/step7')
 
-  didInsertElement: function () {
-    var controller = this.get('controller');
-    var slaveController = App.router.get('slaveComponentGroupsController');
-    controller.loadStep();
-    //slaveController.loadStep();  // TODO: remove it to enable slaveConfiguration
-  },
-  onToggleBlock: function(event){
-    $(document.getElementById(event.context.name)).toggle('blind', 500);
-    event.context.set('isCollapsed', !event.context.get('isCollapsed'));
-  }
-
-});
-
-/**
- * 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(),
-  didInsertElement: function () {
-    if (this.get('category.name') == 'Advanced') {
-      this.set('category.isCollapsed', true);
-      $("#Advanced").hide();
-    } else {
-      this.set('category.isCollapsed', false);
-    }
-  },
-  layout: Ember.Handlebars.compile('<div {{bindAttr id="view.category.name"}} 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');
-  }
 });