AMBARI-914. Fix issues related to Slave Component Group in Installer. (yusaku)

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

AMBARI-666-CHANGES.txt

@@ -357,6 +357,9 @@ AMBARI-666 branch (unreleased changes)
 
   BUG FIXES
 
+  AMBARI-914. Fix issues related to Slave Component Group in Installer.
+  (yusaku)
+
   AMBARI-909. Pass correct cluster info to Action Manager. (hitesh)
 
   AMBARI-904. Ensure state changes only happen after actionmanager persists

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

@@ -53,7 +53,7 @@ App.InstallerStep7Controller = Em.ArrayController.extend({
     this.clear();
     this.selectedServiceNames.clear();
     this.masterComponentHosts.clear();
-    this.slaveComponentHosts.clear();
+//    this.slaveComponentHosts.clear();
   },
 
   loadStep: function () {
@@ -252,14 +252,15 @@ App.SlaveComponentGroupsController = Ember.ArrayController.extend({
 
   addSlaveComponentGroup: function (event) {
     var component = this.get('selectedSlaveComponent');
-    var newGroupName;
+    var newGroupName = 'New Group';
     component.groups.setEach('active', false);
-    var newGroups = component.groups.filterProperty('type', 'new');
-    if (newGroups.length === 0) {
+    var newGroups = component.groups.filterProperty('name', newGroupName);
+    if (newGroups.length === 0)
       component.newGroupIndex = 0;
-      newGroupName = 'New Group';
-    } else {
-      component.newGroupIndex++;
+    else {
+      if(component.newGroupIndex === undefined)
+        component.newGroupIndex = 0;
+      this.checkGroupName();
       newGroupName = 'New Group ' + component.newGroupIndex;
     }
     var newGroup = {name: newGroupName, index: component.newGroupIndex, type: 'new', active: true};
@@ -267,6 +268,16 @@ App.SlaveComponentGroupsController = Ember.ArrayController.extend({
     $('.remove-group-error').hide();
   },
 
+  checkGroupName: function(){
+    var component = this.get('selectedSlaveComponent');
+    component.newGroupIndex++;
+    var newGroupName = 'New Group ' + component.newGroupIndex;
+    var groups = component.groups.filterProperty('name', newGroupName);
+    if (groups.length !== 0){
+      this.checkGroupName();
+    }
+  },
+
   showEditSlaveComponentGroups: function (event) {
     this.showAddSlaveComponentGroup(event);
   },
@@ -310,13 +321,15 @@ App.SlaveComponentGroupsController = Ember.ArrayController.extend({
 
   getGroupsForDropDown: function(){
      return this.get('componentGroups').getEach('name');
-  }.property('selectedComponentName', 'componentGroups.@each'),
+  }.property('selectedComponentName', 'componentGroups.@each.name'),
 
   activeGroup: function(){
-    var active = this.get('componentGroups').findProperty('active', true);
-    if (active !== undefined)
-      return active;
-  }.property('selectedComponentName', 'componentGroups.@each.active'),
+    if (this.get('componentGroups') !== undefined){
+      var active = this.get('componentGroups').findProperty('active', true);
+      if (active !== undefined)
+        return active;
+    }
+  }.property('selectedComponentName', 'componentGroups.@each.active', 'componentGroups.@each.name'),
 
   showSlaveComponentGroup: function(event){
     var component = this.get('selectedSlaveComponent');
@@ -355,6 +368,21 @@ App.SlaveComponentGroupsController = Ember.ArrayController.extend({
         lastGroup.setEach('active', true);
       }
     }
+  },
+
+  changeSlaveGroupName: function(group, newGroupName){
+    var component = this.get('selectedSlaveComponent');
+    var isExist = component.groups.filterProperty('name', newGroupName);
+    if (isExist.length !== 0)
+      return true;
+    else {
+      var assignedHosts = component.hosts.filterProperty('group', group.name);
+      if (assignedHosts.length !== 0)
+        assignedHosts.setEach('group', newGroupName);
+      var groupFilter = component.groups.filterProperty('name', group.name);
+      groupFilter.setEach('name', newGroupName);
+    }
+    return false;
   }
 
 });

ambari-web/app/controllers/main/host.js

@@ -41,6 +41,10 @@ App.MainHostController = Em.ArrayController.extend(App.Pagination, {
   }.property('sortingAsc'),
   isDisabled:true,
 
+  backgroundOperationsCount: function() {
+    return 5;
+  }.property(),
+
   onAllChecked: function () {
     var hosts = this.get('content');
     hosts.setEach('isChecked', this.get('allChecked'));

ambari-web/app/messages.js

@@ -220,6 +220,10 @@ Em.I18n.translations = {
   'services.service.summary.averageLoad': 'Average Load',
   'services.service.summary.masterHeap': 'Master Heap',
   'services.service.summary.moreStats': 'more stats here',
+  'services.service.actions.run.rebalancer': 'Run Rebalancer',
+  'services.service.actions.run.compaction': 'Run Compaction',
+  'services.service.actions.run.smoke': 'Run Smoke Test',
+  'services.service.actions.maintenance': 'Maintenance',
 
   'hosts.host.start.popup.header': 'Confirmation',
   'hosts.host.stop.popup.header': 'Confirmation',
@@ -239,17 +243,18 @@ Em.I18n.translations = {
   'charts.horizon.chart.attributes.network': 'Network',
   'charts.horizon.chart.attributes.io': 'I/O',
 
-  'metric.default': 'combined',
-  'metric.cpu': 'cpu',
-  'metric.memory': 'disk used',
-  'metric.network': 'network',
-  'metric.io': 'io',
-  'metric.more': 'more',
-  'metric.more.cpu': 'Cpu',
-
-  'metric.more.memory': 'Memory',
-  'metric.more.memory.swapFree': 'swap_free',
-  'metric.more.memory.memCached': 'mem_cached',
+  'metric.default':'combined',
+  'metric.cpu':'cpu',
+  'metric.memory':'disk used',
+  'metric.network':'network',
+  'metric.io':'io',
+  'metric.more':'more',
+  'metric.more.cpu':'CPU',
+  'metric.more.disk': 'Disk',
+  'metric.more.load': 'Load',
+  'metric.more.memory':'Memory',
+  'metric.more.network': 'Network',
+  'metric.more.process': 'Process',
 
   'hosts.add.header': 'Add Host Wizard',
   'hosts.add.step2.warning': 'Hosts are already part of the cluster and will be ignored',

ambari-web/app/models/service.js

@@ -156,7 +156,7 @@ App.Service.FIXTURES = [
     label:'HDFS',
     components: [1, 2, 3],
     service_audit: [1, 2, 3],
-    health_status: 'LIVE',
+    health_status: App.Service.Health.live,
     work_status: true,
     alerts: [1, 2],
     quick_links: [1, 2, 3, 4]
@@ -167,7 +167,7 @@ App.Service.FIXTURES = [
     label:'MapReduce',
     components: [4, 5],
     service_audit: [4, 5, 6],
-    health_status: 'STARTING',
+    health_status: App.Service.Health.start,
     work_status: true,
     alerts: [3, 4],
     quick_links: [5, 6, 7, 8, 9, 10]
@@ -177,7 +177,7 @@ App.Service.FIXTURES = [
     service_name:'hbase',
     label:'HBase',
     components: [6, 7],
-    health_status: 'DEAD',
+    health_status: App.Service.Health.dead,
     work_status: false,
     alerts: [5, 6],
     quick_links: [11, 12, 13, 14]
@@ -186,7 +186,7 @@ App.Service.FIXTURES = [
     id:4,
     service_name:'zookeeper',
     label:'Zookeeper',
-    health_status: 'STOPPING',
+    health_status: App.Service.Health.stop,
     work_status: false,
     alerts: [7, 8]
   },
@@ -194,7 +194,7 @@ App.Service.FIXTURES = [
     id:5,
     service_name:'oozie',
     label:'Oozie',
-    health_status: 'DEAD',
+    health_status: App.Service.Health.dead,
     work_status: false,
     alerts: [9, 10]
   },
@@ -202,7 +202,7 @@ App.Service.FIXTURES = [
     id:6,
     service_name:'hive',
     label:'Hive',
-    health_status: 'DEAD',
+    health_status: App.Service.Health.dead,
     work_status: false,
     alerts: [11, 12]
   }

ambari-web/app/styles/application.less

@@ -127,6 +127,10 @@ footer {
   .brand {
     font-size: 17px;
     border-right: 1px solid rgba(0, 0, 0, 0.08);
+    .operations-count{
+      margin-top: 5px;
+      background-color: #006DCC;
+    }
   }
   li {
     font-size: 15px;
@@ -265,15 +269,16 @@ h1 {
         a {
           padding-right: 24px;
         }
-        i {
+        .icon-remove {
           border: 1px solid white;
           position: absolute;
           right: 7px;
           top: 10px;
           z-index: 2;
           cursor: default;
+          color: #555555;
         }
-        i:hover {
+        .icon-remove:hover {
           border: 1px solid grey;
         }
       }
@@ -610,10 +615,19 @@ a:focus {
 #services-menu {
   .nav-list {
     .tab-marker-position {
-      padding-left: 30px;
-      padding-right: 30px;
-      background-position: 12px 9px;
+
+      background-position: 6px 5px;
       background-repeat: no-repeat;
+      list-style: none;
+      height: 20px;
+      width: 20px;
+      margin-left: 0;
+
+    //      padding-left: 30px;
+    //      padding-right: 30px;
+    //      background-position: 12px 9px;
+    //      background-repeat: no-repeat;
+
     }
     .health-status-LIVE {
       .tab-marker-position;
@@ -1164,18 +1178,14 @@ ul.inline li {
 
   .accordion {
     background: none repeat scroll 0 0 #FFFFFF;
-    border: 1px solid;
+  /*border: 1px solid;*/
     font-size: 12px;
-    padding: 5px 0;
+  /*padding: 5px 0;*/
     position: absolute;
+    z-index: 1000;
 
     .accordion-group {
-      border: none;
-
       .accordion-heading {
-        .accordion-toggle {
-          padding: 0 5px;
-        }
         i {
           text-decoration: none;
         }
@@ -1183,22 +1193,17 @@ ul.inline li {
 
       .accordion-body {
         .accordion-inner {
-          border: none;
-          padding: 0 8px;
-          width: 160px;
+        /*border: none;
+        padding: 0 8px;
+        width: 160px;*/
 
           ul.items {
-            border: 1px solid #000;
             list-style: none;
-            border-bottom: none;
-
             li {
-              border-bottom: 1px solid;
-              line-height: 12px;
-              padding: 2px 5px;
-              padding: 2px 5px;
+              a:hover {
+                cursor: pointer;
+              }
             }
-
             li.disabled {
               a {
                 color: #999999;

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

@@ -18,7 +18,7 @@
           {{#each groupName in controller.getGroupsForDropDown}}
             {{#view view.optionTag contentBinding="groupName"}}
               <option value="{{unbound groupName}}" {{bindAttr selected="view.selected"}} {{action changeGroup target="view"}}>
-                {{unbound groupName}}
+                {{groupName}}
               </option>
             {{/view}}
           {{/each}}

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

@@ -57,13 +57,16 @@
           {{/if}}
           <form class="form-horizontal">
             {{#if category.isForSlaveComponent}}
-            <div class="control-group">
+            {{#view App.SlaveComponentChangeGroupNameView}}
               <label class="control-label">Group name</label>
               <div class="controls">
-                <input class="span6" type="text" {{bindAttr value="App.router.slaveComponentGroupsController.activeGroup.name"}}>
-                <span class="help-inline"></span>
+                <div class="span6">
+                  <input class="span9" type="text" {{bindAttr value="view.content.name"}}>
+                  <button class="btn" {{action changeGroupName target="view"}}>Save</button>
+                </div>
+                <span class="help-inline">{{view.errorMessage}}</span>
               </div>
-            </div>
+            {{/view}}
             {{/if}}
             {{#each view.categoryConfigs}}
             <div {{bindAttr class="errorMessage:error: :control-group"}}>

ambari-web/app/templates/main.hbs

@@ -18,7 +18,14 @@
 <div id="main-nav">
   <div class="navbar">
     <div class="navbar-inner">
-      <a class="brand" href="#">My Cluster</a>
+      <a class="brand" href="#">
+        My Cluster
+        {{#if view.isInHostsPath}}
+          {{#if view.backgroundOperationsCount}}
+            <span class="label operations-count">{{view.backgroundOperationsCount}}</span>
+          {{/if}}
+        {{/if}}
+      </a>
       {{view App.MainMenuView}}
     </div>
   </div>

ambari-web/app/templates/main/dashboard/service/hdfs.hbs

@@ -18,7 +18,7 @@
 
 <div class="clearfix">
   <div class="name span2">
-    {{view App.MainDashboardServiceHealthView parentBinding="view"}}
+    {{view App.MainDashboardServiceHealthView serviceBinding="view.service"}}
     <a {{action selectService view.service href=true}}>{{view.service.label}}</a>
     {{#if view.criticalAlertsCount}}
     <span class="label label-important alerts-count">{{view.criticalAlertsCount}}</span>

ambari-web/app/templates/main/service/item.hbs

@@ -18,12 +18,20 @@
 
 {{view App.MainServiceInfoMenuView}}
 <div class="service-button">
-  {{#if showRebalancer}}
-  <a class="btn" href="javascript:void(null)">
-    <i class="icon-play-circle"></i>
-    Run Rebalancer
-  </a>
-  {{/if}}
+  <div class="btn-group display-inline-block">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      {{t services.service.actions.maintenance}}
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <!-- dropdown menu links -->
+      {{#each option in view.maintenance}}
+      <li>
+        <a {{action todo target="view" href=true}}>{{option.label}}</a>
+      </li>
+      {{/each}}
+    </ul>
+  </div>
   {{#if controller.content.workStatus}}
     <a href="javascript:void(null)" class="btn disabled">
       <i class="icon-play"></i>

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

@@ -26,6 +26,12 @@ var App = require('app');
  */
 App.MetricFilteringWidget = Em.View.extend({
   classNames:['metric-filtering-widget'],
+  /**
+   * chosen metric value
+   */
+  chosenMetric:null,
+  chosenMoreMetric:null,
+  showMore:0, // toggle more metrics indicator
   /**
    * metrics
    */
@@ -36,13 +42,58 @@ App.MetricFilteringWidget = Em.View.extend({
     Em.Object.create({ label:Em.I18n.t('metric.network'), value:'network'}),
     Em.Object.create({ label:Em.I18n.t('metric.io'), value:'io'})
   ],
-  /**
-   * chosen metric value
-   */
-  chosenMetric:null,
-  chosenMoreMetric: null,
 
-  showMore:0, // toggle more metrics indicator
+
+  moreMetrics:[
+    Em.Object.create({ label:Em.I18n.t('metric.more.cpu'), code:'cpu', items:[
+      Em.Object.create({value:"cpu_nice"}),
+      Em.Object.create({value:"cpu_wio"}),
+      Em.Object.create({value:"cpu_user"}),
+      Em.Object.create({value:"cpu_idle"}),
+      Em.Object.create({value:"cpu_system"}),
+      Em.Object.create({value:"cpu_aidle"})
+    ] }),
+
+    Em.Object.create({ label:Em.I18n.t('metric.more.disk'), code:'disk',
+      items:[
+        Em.Object.create({value:'disk_free'}),
+        Em.Object.create({value:'disk_total'}),
+        Em.Object.create({value:'part_max_used'})
+      ]
+    }),
+
+    Em.Object.create({ label:Em.I18n.t('metric.more.load'), code:'load',
+      items:[
+        Em.Object.create({value:'load_one'}),
+        Em.Object.create({value:'load_five'}),
+        Em.Object.create({value:'load_fifteen'})
+      ]
+    }),
+
+    Em.Object.create({ label:Em.I18n.t('metric.more.memory'), code:'memory',
+      items:[
+        Em.Object.create({value:'swap_free'}),
+        Em.Object.create({value:'cpu'})
+      ]
+    }),
+
+    Em.Object.create({ label:Em.I18n.t('metric.more.network'), code:'network',
+      items:[
+        Em.Object.create({value:'bytes_out'}),
+        Em.Object.create({value:'bytes_in'}),
+        Em.Object.create({value:'pkts_in'}),
+        Em.Object.create({value:'pkts_out'})
+      ]
+    }),
+
+    Em.Object.create({ label:Em.I18n.t('metric.more.process'), code:'process',
+      items:[
+        Em.Object.create({value:'proc_run'}),
+        Em.Object.create({value:'proc_total'}),
+      ]
+    })
+
+  ],
 
   /**
    * return array of chosen metrics
@@ -63,23 +114,20 @@ App.MetricFilteringWidget = Em.View.extend({
     isActive:function () {
       return this.get('metric.value') == this.get('widget.chosenMetric');
     }.property('widget.chosenMetric'),
-    template:Em.Handlebars.compile('<a {{action activate view.metric.value target="view.widget" href="true" }}>{{unbound view.metric.label}}</a>')
+    label:function () {
+      return this.get('metric.label');
+    }.property('metric.label'),
+    template:Em.Handlebars.compile('<a {{action activate view.metric.value target="view.widget" href="#" }}>{{unbound view.label}}</a>')
   }),
 
-  moreItemView: function(){
-    return this.get('itemView').extend({});
+  moreItemView:function () {
+    return this.get('itemView').extend({
+      label:function () {
+        return this.get('metric.value');
+      }.property('metric.value')
+    });
   }.property(),
 
-  moreMetrics:[
-    Em.Object.create({ label:Em.I18n.t('metric.more.cpu'), code:'cpu', items:[] }),
-    Em.Object.create({ label:Em.I18n.t('metric.more.memory'), code:'memory',
-      items:[
-        Em.Object.create({label:Em.I18n.t('metric.more.memory.swapFree'), value:'swap_free'}),
-        Em.Object.create({label:Em.I18n.t('metric.more.memory.memCached'), value:'cpu'})
-      ]
-    })
-  ],
-
   /**
    * return default selected metrics (currently - all)
    */

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

@@ -236,8 +236,10 @@ App.AddSlaveComponentGroupButton = Ember.View.extend({
 });
 
 App.SlaveComponentGroupsMenu = Em.CollectionView.extend({
-
-  contentBinding: 'App.router.slaveComponentGroupsController.componentGroups',
+  controllerBinding: 'App.router.slaveComponentGroupsController',
+  content: function(){
+    return this.get('controller.componentGroups');
+  }.property('controller.componentGroups'),
   tagName:'ul',
   classNames: ["nav", "nav-tabs"],
 
@@ -246,7 +248,7 @@ App.SlaveComponentGroupsMenu = Em.CollectionView.extend({
     active:function(){
       return this.get('content.active');
     }.property('content.active'),
-    template:Ember.Handlebars.compile('<a {{action showSlaveComponentGroup view.content target="App.router.slaveComponentGroupsController"}} href="#"> {{unbound view.content.name}}</a><i {{action removeSlaveComponentGroup view.content target="App.router.slaveComponentGroupsController"}} class="icon-remove"></i>')  })
+    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>')  })
 });
 
 App.ServiceConfigSlaveHostsView = Ember.View.extend(App.ServiceConfigMultipleHostsDisplay, {
@@ -281,3 +283,24 @@ App.SlaveComponentDropDownGroupView = Ember.View.extend({
     }
   })
 });
+
+App.SlaveComponentChangeGroupNameView = Ember.View.extend({
+  controllerBinding: 'App.router.slaveComponentGroupsController',
+  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'),
+  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);
+    }
+  }
+});

ambari-web/app/views/main.js

@@ -21,6 +21,13 @@ var App = require('app');
 
 App.MainView = Em.View.extend({
 
-  templateName: require('templates/main')
+  templateName: require('templates/main'),
+  isInHostsPath: function(){
+    console.log(App.router.get('currentState.name'))
+    return App.router.get('currentState.name') === 'hosts';
+  }.property('App.router.currentState.name'),
+  backgroundOperationsCount:function () {
+    return App.router.get('mainHostController.backgroundOperationsCount');
+  }.property('App.router.mainHostController.backgroundOperationsCount')
 
 });

ambari-web/app/views/main/dashboard/service.js

@@ -24,10 +24,11 @@ App.MainDashboardServiceHealthView = Em.View.extend({
   classNameBindings:["healthStatus"],
   template:Em.Handlebars.compile(""),
   blink:false,
+  tagName: 'span',
 
   status:function () {
-    return this.get('parent.service.healthStatus');
-  }.property('parent.service.healthStatus'),
+    return this.get('service.healthStatus');
+  }.property('service.healthStatus'),
 
   startBlink:function () {
     this.set('blink', true);

ambari-web/app/views/main/service/item.js

@@ -19,5 +19,22 @@
 var App = require('app');
 
 App.MainServiceItemView = Em.View.extend({
-  templateName: require('templates/main/service/item')
+  templateName: require('templates/main/service/item'),
+  maintenance: function(){
+    var options = [];
+    var service = this.get('controller.content');
+    switch(service.get('serviceName')) {
+      case 'hdfs':
+        options.push({action: 'runRebalancer', 'label': Em.I18n.t('services.service.actions.run.rebalancer')});
+        break;
+      case 'hbase':
+        options.push({action: 'runCompaction', 'label': Em.I18n.t('services.service.actions.run.compaction')});
+        break;
+    }
+    options.push({action: 'runSmokeTest', 'label': Em.I18n.t('services.service.actions.run.smoke')});
+    return options;
+  }.property('controller.content'),
+  todo: function(){
+    return alert('todo');
+  }
 });

ambari-web/app/views/main/service/menu.js

@@ -61,7 +61,7 @@ App.MainServiceMenuView = Em.CollectionView.extend({
   itemViewClass: Em.View.extend({
     classNameBindings: ["active"],
     active: "",
-    // {{action showService view.content}}
-    template: Ember.Handlebars.compile('<a href="#/main/services/{{unbound view.content.id}}/summary" class="health-status-{{unbound view.content.healthStatus}}"> {{unbound view.content.label}}</a>')
+
+    template: Em.Handlebars.compile('<a href="#/main/services/{{unbound view.content.id}}/summary">{{view App.MainDashboardServiceHealthView serviceBinding="view.content"}}&nbsp;<span>{{unbound view.content.label}}</span></a>')
   })
 });