AMBARI-4249. Select all/none checkbox. (onechiporenko)

ambari-web/app/messages.js

@@ -166,6 +166,7 @@ Em.I18n.translations = {
   'common.discard': 'Discard',
   'common.actions': 'Actions',
   'common.maintenance': 'Maintenance',
+  'common.selected': 'Selected',
   'maintenance.turnOn':'Turn On Maintenance Mode',
   'maintenance.turnOff':'Turn Off Maintenance Mode',
 
@@ -1304,6 +1305,13 @@ Em.I18n.translations = {
   'hosts.host.add':'Add New Hosts',
   'hosts.table.noHosts':'No hosts to display',
 
+  'hosts.filters.filteredHostsInfo': '{0} of {1} hosts showing',
+
+  'hosts.filters.selectedHostInfo': 'host selected',
+  'hosts.filters.selectedHostsInfo': 'hosts selected',
+
+  'hosts.filters.clearSelection': 'clear selection',
+
   'hosts.table.restartComponents.withNames':'Restart {0}',
   'hosts.table.restartComponents.withoutNames':'{0} components should be restarted',
 
@@ -1646,6 +1654,12 @@ Em.I18n.translations = {
   'apps.item.dag.output': 'Output',
   'apps.item.dag.duration': 'Duration',
 
+  'tableView.filters.all': 'All',
+  'tableView.filters.filtered': 'Filtered',
+  'tableView.filters.clearFilters': 'Clear filters',
+  'tableView.filters.paginationInfo': '{0} - {1} of {2}',
+  'tableView.filters.clearAllFilters': 'clear filters',
+
   'apps.table.column.appId':'App ID',
   'apps.table.column.runDate': 'Run Date',
   'apps.avgTable.avg': 'Avg',
@@ -1657,13 +1671,7 @@ Em.I18n.translations = {
   'apps.avgTable.duration': 'Duration',
   'apps.avgTable.oldest': 'Oldest',
   'apps.avgTable.mostRecent': 'Most Recent',
-  'apps.filters.all': 'All',
-  'apps.filters.filtered': 'Filtered',
   'apps.filters.filter': 'Filter',
-  'apps.filters.clearFilters': 'Clear filters',
-  'apps.filters.paginationInfo': '{0} - {1} of {2}',
-  'apps.filters.clearAllFilters': 'clear filters',
-  'apps.filters.filteredHostsInfo': '{0} of {1} hosts showing - ',
   'apps.filters.customRunDate':'Run Date custom filter',
   'apps.filters.nothingToShow': 'No jobs to display',
   'apps.filters.filterComponents': 'Filter by <strong>Component</strong>',

ambari-web/app/models/host.js

@@ -45,6 +45,11 @@ App.Host = DS.Model.extend({
   cpuSystem:DS.attr('number'),
   cpuUser:DS.attr('number'),
 
+  /**
+   * Is host checked at the main Hosts page
+   */
+  selected:DS.attr('boolean'),
+
   /**
    * Overall CPU usage (system and user)
    * @returns {Number}

ambari-web/app/templates/main/apps.hbs

@@ -53,13 +53,13 @@
   <div class="filter_info">
 
     <div class="span4" id="filter_buttons">{{t common.show}}:
-      <a class="all" {{action "clickViewType" target="view"}} data-view-type="all">{{t apps.filters.all}}
+      <a class="all" {{action "clickViewType" target="view"}} data-view-type="all">{{t tableView.filters.all}}
         ({{controller.paginationObject.iTotalRecords}})</a> &#124;
-      <a class="filtered" {{action "clickViewType" target="view"}} data-view-type="filtered">{{t apps.filters.filtered}}
+      <a class="filtered" {{action "clickViewType" target="view"}} data-view-type="filtered">{{t tableView.filters.filtered}}
         ({{controller.filterObject.filteredDisplayRecords}})</a>
     </div>
     <div class="span2 clear_filter">
-        <a {{action "clearFilters" target="controller"}}>{{t apps.filters.clearFilters}}</a>
+        <a {{action "clearFilters" target="controller"}}>{{t tableView.filters.clearFilters}}</a>
     </div>
     <div class="search-bar">
         {{view view.appSearchThrough valueBinding="controller.filterObject.sSearch"}}

ambari-web/app/templates/main/host.hbs

@@ -69,6 +69,7 @@
     <thead>
       {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
         <th class="first"> </th>
+        <th> </th>
         {{view view.parentView.nameSort}}
         <th> </th>
         <th> </th>
@@ -80,7 +81,8 @@
         <th class="sort-view-6">{{t common.components}}</th>
       {{/view}}
       <tr id="filter-row">
-        <th class="first"> </th>
+        <th class="first"><div class="ember-view view-wrapper">{{view Ember.Checkbox checkedBinding="view.selectAllHosts"}}</div></th>
+        <th> </th>
         <th>{{view view.nameFilterView}}</th>
         <th> </th>
         <th> </th>
@@ -97,7 +99,9 @@
       {{#each host in view.pageContent}}
         {{#view view.HostView contentBinding="host"}}
 
-          <td class="first">
+          <td class="first">{{view Ember.Checkbox checkedBinding="host.selected"}}</td>
+
+          <td class="health">
             <span rel="HealthTooltip" {{bindAttr class="host.healthClass"}} {{bindAttr data-original-title="host.healthToolTip" }}></span>
           </td>
 
@@ -114,7 +118,7 @@
           </td>
           <td class="maintenance">
             {{#if host.componentsInMaintenanceCount}}
-                <span class="icon-medkit" rel="ComponentsTooltip" {{bindAttr title="view.componentsInMaintenanceMessage"}}></span>
+              <span class="icon-medkit" rel="ComponentsTooltip" {{bindAttr title="view.componentsInMaintenanceMessage"}}></span>
             {{/if}}
           </td>
           <td>{{host.ip}}</td>
@@ -138,8 +142,8 @@
       {{/each}}
     {{else}}
       <tr>
-        <td class="first"></td>
-        <td colspan="9">
+        <td class="first"> </td>
+        <td colspan="11">
           {{t hosts.table.noHosts}}
         </td>
       </tr>
@@ -149,7 +153,17 @@
 
   <div class="page-bar">
     <div class="filtered-hosts-info span4">
-      <label>{{view.filteredHostsInfo}} <a {{action clearFilters target="view"}} href="#">{{t apps.filters.clearAllFilters}}</a></label>
+      <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}} href="#">{{t tableView.filters.clearAllFilters}}</a></label>
+    </div>
+    <div class="selected-hosts-info span4">
+      {{#if view.selectedCategory.hostsCount}}
+        {{#view view.statusFilter categoriesBinding="view.categories"}}
+          <a {{action selectCategory view.parentView.selectedCategory target="view"}} href="#">
+            {{view.parentView.selectedCategory.hostsCount}}
+            {{pluralize view.parentView.selectedCategory.hostsCount singular="t:hosts.filters.selectedHostInfo" plural="t:hosts.filters.selectedHostsInfo"}}
+          </a>
+        {{/view}} - <a {{action clearSelection target="view"}} href="#">{{t hosts.filters.clearSelection}}</a>
+      {{/if}}
     </div>
     <div class="items-on-page">
       <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>

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

@@ -322,7 +322,7 @@ module.exports = {
               break;
           }
           return match;
-        }
+        };
         break;
       case 'duration':
         return function (rowValue, rangeExp) {
@@ -363,7 +363,7 @@ module.exports = {
               break;
           }
           return match;
-        }
+        };
         break;
       case 'date':
         return function (rowValue, rangeExp) {
@@ -390,7 +390,7 @@ module.exports = {
               break;
           }
           return match;
-        }
+        };
         break;
       case 'number':
         return function(rowValue, rangeExp){
@@ -431,7 +431,7 @@ module.exports = {
               if (rangeExp == rowValue) match = true;
           }
           return match;
-        }
+        };
         break;
       case 'multiple':
         return function(origin, compareValue){
@@ -447,7 +447,12 @@ module.exports = {
             }
           }
           return false;
-        }
+        };
+        break;
+      case 'boolean':
+        return function (origin, compareValue){
+          return origin === compareValue;
+        };
         break;
       case 'string':
       default:

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

@@ -162,18 +162,11 @@ App.TableView = Em.View.extend({
     });
   },
 
-  /**
-   * return filtered number of all content number information displayed on the page footer bar
-   */
-  filteredHostsInfo: function () {
-    return this.t('apps.filters.filteredHostsInfo').format(this.get('filteredContent.length'), this.get('content').get('length'));
-  }.property('content.length', 'filteredContent.length'),
-
   /**
    * return pagination information displayed on the page
    */
   paginationInfo: function () {
-    return this.t('apps.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
+    return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
   }.property('displayLength', 'filteredContent.length', 'startIndex', 'endIndex'),
 
   paginationLeft: Ember.View.extend({

ambari-web/app/views/main/apps_view.js

@@ -22,7 +22,7 @@ var filters = require('views/common/filter_view');
 App.MainAppsView = Em.View.extend({
   templateName: require('templates/main/apps'),
   paginationInfo: function() {
-    return this.t('apps.filters.paginationInfo').format(this.get('controller.paginationObject.startIndex'), this.get('controller.paginationObject.endIndex'), this.get('controller.paginationObject.iTotalDisplayRecords'));
+    return this.t('tableView.filters.paginationInfo').format(this.get('controller.paginationObject.startIndex'), this.get('controller.paginationObject.endIndex'), this.get('controller.paginationObject.iTotalDisplayRecords'));
   }.property('controller.paginationObject.startIndex', 'controller.paginationObject.endIndex', 'controller.paginationObject.iTotalDisplayRecords'),
   //Pagination left/right buttons css class
   paginationLeft: Ember.View.extend({

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

@@ -27,10 +27,6 @@ App.MainHostView = App.TableView.extend({
     return this.get('controller.content');
   }.property('controller.content.length'),
 
-  willInsertElement: function() {
-    this._super();
-  },
-
   clearFiltersObs: function() {
     var self = this;
     Em.run.next(function() {
@@ -44,6 +40,59 @@ App.MainHostView = App.TableView.extend({
   didInsertElement: function() {
     this.addObserver('controller.clearFilters', this, this.clearFiltersObs);
     this.clearFiltersObs();
+    this.addObserver('selectAllHosts', this, this.toggleAllHosts);
+  },
+
+  /**
+   * return filtered number of all content number information displayed on the page footer bar
+   * @returns {String}
+   */
+  filteredContentInfo: function () {
+    return this.t('hosts.filters.filteredHostsInfo').format(this.get('filteredContent.length'), this.get('content').get('length'));
+  }.property('content.length', 'filteredContent.length'),
+
+  /**
+   * Select/deselect all visible hosts flag
+   * @property {bool}
+   */
+  selectAllHosts: false,
+
+  /**
+   * Set <code>selected</code> property for each App.Host
+   */
+  toggleAllHosts: function() {
+    this.get('pageContent').setEach('selected', this.get('selectAllHosts'));
+  },
+
+  /**
+   * Trigger updating <code>selectedHostsCount</code> only 1 time
+   */
+  selectedHostsObserver: function() {
+    Ember.run.once(this, 'updateCheckedFlags');
+  }.observes('pageContent.@each.selected'),
+
+  /**
+   * Update <code>selectAllHosts</code> value
+   */
+  updateCheckedFlags: function() {
+    this.removeObserver('selectAllHosts', this, this.toggleAllHosts);
+    if (this.get('pageContent').length) {
+      this.set('selectAllHosts', this.get('pageContent').everyProperty('selected', true));
+    }
+    else {
+      this.set('selectAllHosts', false);
+    }
+    this.addObserver('selectAllHosts', this, this.toggleAllHosts);
+  },
+
+  /**
+   * Clear selectedFilter
+   * Set <code>selected</code> to false for each host
+   */
+  clearSelection: function() {
+    this.get('pageContent').setEach('selected', false);
+    this.set('selectAllHosts', false);
+    this.clearFilters();
   },
 
   sortView: sort.wrapperView,
@@ -148,6 +197,7 @@ App.MainHostView = App.TableView.extend({
       var alerts = this.get('alerts');
       var restart = this.get('restart');
       var maintenance = this.get('maintenance');
+      var selected = this.get('selected');
       if(alerts) {
         return this.get('view.content').filterProperty('criticalAlertsCount').get('length');
       }
@@ -160,16 +210,21 @@ App.MainHostView = App.TableView.extend({
             return this.get('view.content').filterProperty('componentsInMaintenanceCount').get('length');
           }
           else {
-            if (statusString == "") {
-              return this.get('view.content').get('length');
+            if (selected) {
+              return this.get('view.content').filterProperty('selected').get('length');
             }
             else {
-              return this.get('view.content').filterProperty('healthClass', statusString ).get('length');
+              if (statusString == "") {
+                return this.get('view.content').get('length');
+              }
+              else {
+                return this.get('view.content').filterProperty('healthClass', statusString ).get('length');
+              }
             }
           }
         }
       }
-    }.property('view.content.@each.healthClass', 'view.content.@each.criticalAlertsCount', 'view.content.@each.componentsInMaintenanceCount', 'view.content.@each.componentsWithStaleConfigsCount'),
+    }.property('view.content.@each.selected', 'view.content.@each.healthClass', 'view.content.@each.criticalAlertsCount', 'view.content.@each.componentsInMaintenanceCount', 'view.content.@each.componentsWithStaleConfigsCount'),
 
     label: function () {
       return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
@@ -186,7 +241,7 @@ App.MainHostView = App.TableView.extend({
       }.property('isActive')
     });
 
-    var categories = [
+    return [
       self.categoryObject.create({value: Em.I18n.t('common.all'), healthStatusValue: '', isActive: true, isVisible: false}),
       self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.green'), healthStatusValue: 'health-status-LIVE', isVisible: true}),
       self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.red'), healthStatusValue: 'health-status-DEAD-RED', isVisible: true}),
@@ -194,12 +249,17 @@ App.MainHostView = App.TableView.extend({
       self.categoryObject.create({value: Em.I18n.t('hosts.host.healthStatusCategory.yellow'), healthStatusValue: 'health-status-DEAD-YELLOW', isVisible: true}),
       self.categoryObject.create({value: Em.I18n.t('hosts.host.alerts.label'), healthStatusValue: 'health-status-WITH-ALERTS', alerts: true, isVisible: true }),
       self.categoryObject.create({value: Em.I18n.t('common.restart'), healthStatusValue: 'health-status-RESTART', restart: true, isVisible: true }),
+      self.categoryObject.create({value: Em.I18n.t('common.selected'), healthStatusValue: 'health-status-SELECTED', selected: true, isVisible: false }),
       self.categoryObject.create({value: Em.I18n.t('common.maintenance'), healthStatusValue: 'health-status-MAINTENANCE', maintenance: true, last: true, isVisible: true })
     ];
-
-    return categories;
   }.property(),
 
+  /**
+   * Category for <code>selected</code> property of each App.Host
+   */
+  selectedCategory: function() {
+    return this.get('categories').findProperty('selected', true);
+  }.property('categories.@each.selected'),
 
   statusFilter: Em.View.extend({
     column: 0,
@@ -226,6 +286,7 @@ App.MainHostView = App.TableView.extend({
         this.get('parentView').updateFilter(7, '>0', 'number');
         this.get('parentView').updateFilter(8, '', 'number');
         this.get('parentView').updateFilter(9, '', 'number');
+        this.get('parentView').updateFilter(10, '', 'boolean');
       }
       else {
         if(category.get('restart')) {
@@ -233,7 +294,7 @@ App.MainHostView = App.TableView.extend({
           this.get('parentView').updateFilter(7, '', 'number');
           this.get('parentView').updateFilter(8, '>0', 'number');
           this.get('parentView').updateFilter(9, '', 'number');
-
+          this.get('parentView').updateFilter(10, '', 'boolean');
         }
         else {
           if(category.get('maintenance')) {
@@ -241,12 +302,23 @@ App.MainHostView = App.TableView.extend({
             this.get('parentView').updateFilter(7, '', 'number');
             this.get('parentView').updateFilter(8, '', 'number');
             this.get('parentView').updateFilter(9, '>0', 'number');
+            this.get('parentView').updateFilter(10, '', 'boolean');
           }
           else {
-            this.get('parentView').updateFilter(0, category.get('healthStatusValue'), 'string');
-            this.get('parentView').updateFilter(7, '', 'number');
-            this.get('parentView').updateFilter(8, '', 'number');
-            this.get('parentView').updateFilter(9, '', 'number');
+            if(category.get('selected')) {
+              this.get('parentView').updateFilter(0, '', 'string');
+              this.get('parentView').updateFilter(7, '', 'number');
+              this.get('parentView').updateFilter(8, '', 'number');
+              this.get('parentView').updateFilter(9, '', 'number');
+              this.get('parentView').updateFilter(10, true, 'boolean');
+            }
+            else {
+              this.get('parentView').updateFilter(0, category.get('healthStatusValue'), 'string');
+              this.get('parentView').updateFilter(7, '', 'number');
+              this.get('parentView').updateFilter(8, '', 'number');
+              this.get('parentView').updateFilter(9, '', 'number');
+              this.get('parentView').updateFilter(10, '', 'boolean');
+            }
           }
         }
       }
@@ -309,6 +381,21 @@ App.MainHostView = App.TableView.extend({
     }
   }),
 
+  selectedFilter: Em.View.extend({
+    column: 10,
+    value: null,
+    class: ['noDisplay'],
+    showClearFilter: function(){
+      var mockEvent = {
+        context: this.get('parentView.categories').findProperty('healthStatusValue', 'health-status-SELECTED')
+      };
+      if(this.get('value')) {
+        this.get('parentView.childViews').findProperty('column', 0).selectCategory(mockEvent);
+      }
+    }
+  }),
+
+
   /**
    * Filter view for name column
    * Based on <code>filters</code> library
@@ -505,6 +592,7 @@ App.MainHostView = App.TableView.extend({
     associations[7] = 'criticalAlertsCount';
     associations[8] = 'componentsWithStaleConfigsCount';
     associations[9] = 'componentsInMaintenanceCount';
+    associations[10] = 'selected';
     return associations;
   }.property()
 });