AMBARI-15193 Auto-start UI edits (Joe Wang via rzang)

ambari-web/app/controllers/main/admin/service_auto_start.js

@@ -53,39 +53,52 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
     var tabs = [];
     this.get('componentsConfigs').forEach(function(component) {
       var serviceComponentInfo = component.ServiceComponentInfo;
-      if (serviceComponentInfo.category === "MASTER" || serviceComponentInfo.category === "SLAVE") {
-        var componentRecovery = Ember.Object.create({
-          display_name: App.format.role(serviceComponentInfo.component_name),
-          component_name: serviceComponentInfo.component_name,
-          //recovery_enabled: serviceComponentInfo.recovery_enabled === 'true',
-          recovery_enabled: false,
-          valueChanged: false,
-          service_name: serviceComponentInfo.service_name
-        });
-        if (services[serviceComponentInfo.service_name]) {
-          services[serviceComponentInfo.service_name].get('componentRecovery').push(componentRecovery);
-          services[serviceComponentInfo.service_name].set('enabledComponents', services[serviceComponentInfo.service_name].get('enabledComponents') + (componentRecovery.get('recovery_enabled') ? 1 : 0));
-          services[serviceComponentInfo.service_name].set('totalComponents', services[serviceComponentInfo.service_name].get('totalComponents') + 1);
-        } else {
-          services[serviceComponentInfo.service_name] = Ember.Object.create({
-            service_name: serviceComponentInfo.service_name,
-            display_name: App.format.role(serviceComponentInfo.service_name),
-            headingClass: "." + serviceComponentInfo.service_name,
-            isActive: false,
-            componentRecovery: [componentRecovery],
-            enabledComponents: componentRecovery.recovery_enabled ? 1 : 0,
-            totalComponents: 1,
-            indicator: function() {
-              var percentage = this.get('enabledComponents') / this.get('totalComponents');
-              var indicator = "icon-adjust";
-              if (percentage === 1) {
-                indicator = "icon-circle";
-              } else if (percentage === 0) {
-                indicator = "icon-circle-blank";
-              }
-              return indicator;
-            }.property('enabledComponents', 'totalComponents')
+      if (serviceComponentInfo.total_count) {
+        if (serviceComponentInfo.category === "MASTER" || serviceComponentInfo.category === "SLAVE") {
+          var componentRecovery = Ember.Object.create({
+            display_name: App.format.role(serviceComponentInfo.component_name),
+            component_name: serviceComponentInfo.component_name,
+            recovery_enabled: serviceComponentInfo.recovery_enabled === 'true',
+            valueChanged: false,
+            service_name: serviceComponentInfo.service_name
           });
+          if (services[serviceComponentInfo.service_name]) {
+            services[serviceComponentInfo.service_name].get('componentRecovery').push(componentRecovery);
+            services[serviceComponentInfo.service_name].set('enabledComponents', services[serviceComponentInfo.service_name].get('enabledComponents') + (componentRecovery.get('recovery_enabled') ? 1 : 0));
+            services[serviceComponentInfo.service_name].set('totalComponents', services[serviceComponentInfo.service_name].get('totalComponents') + 1);
+          } else {
+            services[serviceComponentInfo.service_name] = Ember.Object.create({
+              service_name: serviceComponentInfo.service_name,
+              display_name: App.format.role(serviceComponentInfo.service_name),
+              headingClass: "." + serviceComponentInfo.service_name,
+              isActive: false,
+              tooltip: function () {
+                var percentage = this.get('enabledComponents') / this.get('totalComponents');
+                var tooltip = '';
+                if (percentage === 1) {
+                  tooltip = Em.I18n.t('admin.serviceAutoStart.tooltip.text').format("All");
+                } else if (percentage === 0) {
+                  tooltip = Em.I18n.t('admin.serviceAutoStart.tooltip.text').format("No");
+                } else {
+                  tooltip = Em.I18n.t('admin.serviceAutoStart.tooltip.text').format(this.get('enabledComponents') + "/" + this.get('totalComponents'));
+                }
+                return tooltip;
+              }.property('enabledComponents', 'totalComponents'),
+              componentRecovery: [componentRecovery],
+              enabledComponents: componentRecovery.recovery_enabled ? 1 : 0,
+              totalComponents: 1,
+              indicator: function () {
+                var percentage = this.get('enabledComponents') / this.get('totalComponents');
+                var indicator = "icon-adjust";
+                if (percentage === 1) {
+                  indicator = "icon-circle";
+                } else if (percentage === 0) {
+                  indicator = "icon-circle-blank";
+                }
+                return indicator;
+              }.property('enabledComponents', 'totalComponents')
+            });
+          }
         }
       }
     });
@@ -108,6 +121,18 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
     this.set('isSaveDisabled', !valuesChanged);
   }.observes('valueChanged'),
 
+  enableAll: function (event) {
+    event.context.get('componentRecovery').forEach(function (component) {
+      component.set('recoveryEnabled', true);
+    });
+  },
+
+  disableAll: function (event) {
+    event.context.get('componentRecovery').forEach(function (component) {
+      component.set('recoveryEnabled', false);
+    });
+  },
+
   doReload: function () {
     window.location.reload();
   },
@@ -120,10 +145,22 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
    */
   showSavePopup: function (transitionCallback) {
     var self = this;
+    var title = '';
+    var body = '';
+    if (typeof transitionCallback === 'function') {
+      title = Em.I18n.t('admin.serviceAutoStart.save.popup.transition.title');
+      body = Em.I18n.t('admin.serviceAutoStart.save.popup.transition.body');
+    } else {
+      title = Em.I18n.t('admin.serviceAutoStart.save.popup.title');
+      body = Em.I18n.t('admin.serviceAutoStart.save.popup.body');
+    }
     return App.ModalPopup.show({
-      header: Em.I18n.t('dashboard.configHistory.info-bar.save.popup.title'),
+      header: title,
+      bodyClass: Ember.View.extend({
+        template: Ember.Handlebars.compile(body)
+      }),
       footerClass: Em.View.extend({
-        templateName: require('templates/main/service/info/save_popup_footer'),
+        templateName: require('templates/main/service/info/save_popup_footer')
       }),
       primary: Em.I18n.t('common.save'),
       secondary: Em.I18n.t('common.cancel'),
@@ -138,7 +175,7 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
         self.get('tabs').forEach(function (service) {
           service.get('componentRecovery').forEach(function (component) {
             if (component.get('valueChanged')) {
-              if (component.get('recoveryEnabled')) {
+              if (component.get('recovery_enabled')) {
                 enabledComponents.push(component.get('component_name'));
               } else {
                 disabledComponents.push(component.get('component_name'));

ambari-web/app/messages.js

@@ -137,6 +137,8 @@ Em.I18n.translations = {
   'common.ram':'RAM',
   'common.disabled':'Disabled',
   'common.enabled':'Enabled',
+  'common.enableAll':'Enable All',
+  'common.disableAll':'Disable All',
   'common.disk':'Disk',
   'common.diskUsage':'Disk Usage',
   'common.loadAvg':'Load Avg',
@@ -1467,7 +1469,8 @@ Em.I18n.translations = {
   'admin.serviceAutoStart.title': "Service Auto Start",
   'admin.serviceAutoStart.header': "Service Auto Start Configuration",
   'admin.serviceAutoStart.header.text': "Ambari services can be configured to start automatically on system boot. Each service can be configured to start all components, masters and workers, or selectively.",
-  'admin.serviceAutoStart.body.text': "Auto-Start Services Enabled",
+  'admin.serviceAutoStart.body.text': "Auto-Start Services",
+  'admin.serviceAutoStart.tooltip.text': "{0} components enabled",
 
   'admin.stackVersions.filter.notInstalled': "Not Installed ({0})",
   'admin.stackVersions.filter.all': "All ({0})",
@@ -2951,5 +2954,10 @@ Em.I18n.translations = {
       ' get back to a stable state. Are you sure you want to exit the wizard?',
   'admin.activateHawqStandby.wizard.step3.notice.inProgress':'Please wait while HAWQ Standby is being activated',
   'admin.activateHawqStandby.wizard.step3.notice.completed':'HAWQ Standby has been activated successfully.',
-  'admin.activateHawqStandby.wizard.step3.activateHawqStandbyCommand.context': "Execute HAWQ Standby activate command"
+  'admin.activateHawqStandby.wizard.step3.activateHawqStandbyCommand.context': "Execute HAWQ Standby activate command",
+  'admin.serviceAutoStart.save.popup.title': 'Save Auto-Start Configuration',
+  'admin.serviceAutoStart.save.popup.body': 'You are changing the auto-start configuration.' +
+      'Click <b>Save</b> to commit the change or <b>Discard</b> to revert your changes',
+  'admin.serviceAutoStart.save.popup.transition.title': 'Warning',
+  'admin.serviceAutoStart.save.popup.transition.body': 'You have unsaved changes'
 };

ambari-web/app/styles/application.less

@@ -5677,6 +5677,10 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
   margin-left: @space-s;
 }
 
+.mlm {
+  margin-left: @space-m;
+}
+
 .mll {
   margin-left: @space-l;
 }
@@ -6157,3 +6161,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
 .view-permission-header th {
   padding-top: 40px;
 }
+
+.enable-all-link {
+  margin-left: -10px;
+}

ambari-web/app/templates/main/admin/service_auto_start.hbs

@@ -25,8 +25,8 @@
   </div>
   <br/>
   <div class="cluster-switcher row-fluid">
-      <div class="span4">
-        {{t admin.serviceAutoStart.body.text}}
+      <div class="span2">
+          <strong>{{t admin.serviceAutoStart.body.text}}</strong>
       </div>
       <div class="span4">
           {{view Ember.Checkbox checkedBinding="view.switcherValue"}}
@@ -37,24 +37,24 @@
       </div>
   </div>
     {{#if view.switcherValue}}
+        <hr>
+        <div class="row-fluid mlm"><h5 class="span2">{{t common.service}}</h5><h5 class="span4">{{t common.component}}</h5><h5 class="span4">{{t common.status}}</h5></div>
         <div class="tabs-left">
-            <hr>
-            <ul class="nav nav-tabs">
+            <ul class="nav nav-tabs span2">
                 {{#each tab in controller.tabs}}
                     <li {{bindAttr class="tab.isActive:active"}}>
                         <a href="#" data-toggle="tab" {{bindAttr data-target="tab.headingClass"}}>
                             {{tab.display_name}}
-                            <i {{bindAttr class=":pull-right tab.indicator"}}>
-                            </i>
+                            {{view App.MainAdminServiceAutoStartIndicatorView tabBinding="tab"}}
                         </a>
                     </li>
                 {{/each}}
             </ul>
             <div class="tab-content">
                 {{#each tab in controller.tabs}}
-                    <div {{bindAttr class=":tab-pane tab.isActive:active tab.service_name :row-fluid"}}>
+                    <div {{bindAttr class=":tab-pane tab.isActive:active tab.service_name :row-fluid :mtm"}}>
                         {{#each component in tab.componentRecovery}}
-                            <div class="row-fluid">
+                            <div class="row-fluid mbm">
                                 <div class="span4">
                                     {{component.display_name}}
                                 </div>
@@ -63,6 +63,10 @@
                                 </div>
                             </div>
                         {{/each}}
+                        <div class="offset4">
+                            <a href="#" class="enable-all-link" {{action enableAll tab target="controller"}}>{{t common.enableAll}}</a> |
+                            <a href="#" {{action disableAll tab target="controller"}}>{{t common.disableAll}}</a>
+                        </div>
                     </div>
                 {{/each}}
             </div>

ambari-web/app/templates/main/admin/service_auto_start/service_auto_start_indicator.hbs

@@ -0,0 +1,19 @@
+{{!
+* 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.
+}}
+
+<i {{bindAttr class=":pull-right tab.indicator" data-original-title="tab.tooltip"}} rel="tooltip"></i>

ambari-web/app/utils/ajax/ajax.js

@@ -2356,7 +2356,7 @@ var urls = {
     'mock': ''
   },
   'components.get_category': {
-    'real': '/clusters/{clusterName}/components?fields=ServiceComponentInfo/component_name,ServiceComponentInfo/service_name,ServiceComponentInfo/category,ServiceComponentInfo/recovery_enabled&minimal_response=true',
+    'real': '/clusters/{clusterName}/components?fields=ServiceComponentInfo/component_name,ServiceComponentInfo/service_name,ServiceComponentInfo/category,ServiceComponentInfo/recovery_enabled,ServiceComponentInfo/total_count&minimal_response=true',
     'mock': ''
   },
   'components.update': {
@@ -2369,9 +2369,7 @@ var urls = {
           RequestInfo: {
             query: data.query
           },
-          Body: {
-            ServiceComponentInfo: data.ServiceComponentInfo
-          }
+          ServiceComponentInfo: data.ServiceComponentInfo
         })
       }
     }

ambari-web/app/views.js

@@ -143,6 +143,7 @@ require('views/main/host/addHost/step4_view');
 require('views/main/admin');
 require('views/main/admin/service_auto_start');
 require('views/main/admin/service_auto_start/component_auto_start');
+require('views/main/admin/service_auto_start/service_auto_start_indicator');
 require('views/main/admin/highAvailability/nameNode/wizard_view');
 require('views/main/admin/highAvailability/progress_view');
 require('views/main/admin/highAvailability/nameNode/rollback_view');

ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js

@@ -31,6 +31,10 @@ App.MainAdminServiceAutoStartComponentView = Em.View.extend({
     this.initSwitcher();
   },
 
+  onValueChange: function () {
+    this.get('switcher').bootstrapSwitch('state', this.get('component.recoveryEnabled'));
+  }.observes('component.recoveryEnabled'),
+
   /**
    * Init switcher plugin.
    *
@@ -39,7 +43,7 @@ App.MainAdminServiceAutoStartComponentView = Em.View.extend({
   initSwitcher: function () {
     var self = this;
     if (this.$()) {
-      this.$("input:eq(0)").bootstrapSwitch({
+      this.set('switcher', this.$("input:eq(0)").bootstrapSwitch({
         onText: Em.I18n.t('common.enabled'),
         offText: Em.I18n.t('common.disabled'),
         offColor: 'default',
@@ -51,7 +55,7 @@ App.MainAdminServiceAutoStartComponentView = Em.View.extend({
           self.set('component.valueChanged', self.get('savedRecoveryEnabled') !== state);
           self.get('parentView.controller').checkValuesChange();
         }
-      });
+      }));
     }
   }
 });

ambari-web/app/views/main/admin/service_auto_start/service_auto_start_indicator.js

@@ -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.MainAdminServiceAutoStartIndicatorView = Em.View.extend({
+  templateName: require('templates/main/admin/service_auto_start/service_auto_start_indicator'),
+  tagName: 'span',
+
+  tab: null,
+
+  didInsertElement: function () {
+    App.tooltip(this.$("[rel='tooltip']"));
+  },
+
+  willDestroyElement: function () {
+    this.$("[rel='tooltip']").tooltip('destroy');
+  }
+});