AMBARI-1365. Make Hosts table update dynamically. (jaimin)

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

CHANGES.txt

@@ -40,6 +40,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1365. Make Hosts table update dynamically. (jaimin)
+
  AMBARI-1361. Install progress dialog WARN icon + color. (jaimin)
 
  AMBARI-1347. Expose host-level alerts via nagios_alerts.php with associated

ambari-web/app/initialize.js

@@ -43,7 +43,6 @@ $.ajaxSetup({
 
 require('messages');
 require('utils/base64');
-require('utils/data_table');
 require('utils/db');
 require('utils/helper');
 require('models');

ambari-web/app/messages.js

@@ -424,6 +424,7 @@ Em.I18n.translations = {
 
   'hosts.host.add':'Add New Hosts',
   'hosts.host.back':'Back to Hosts',
+  'hosts.table.noHosts':'No hosts to display',
 
   'hosts.host.metrics.cpu':'CPU Usage',
   'hosts.host.metrics.disk':'Disk Usage',

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

@@ -17,16 +17,21 @@
 }}
 
 <div id="hosts">
-  {{#if App.isAdmin}}
+
   <div class="box-header">
-    <div class="button-section">
+    <div class="pull-left">
+        <span>Search:&nbsp;</span>{{view Ember.TextField valueBinding="view.globalSearchValue"}}
+    </div>
+    {{#if App.isAdmin}}
+    <div class="button-section pull-right">
       <button class="btn btn-inverse add-host-button" {{action addHost}}>
         <i class="icon-plus icon-white"></i>
         {{t hosts.host.add}}
       </button>
     </div>
+    {{/if}}
   </div>
-  {{/if}}
+
   <table class="datatable table table-bordered table-striped" id="hosts-table">
     <thead>
     <tr>
@@ -38,8 +43,6 @@
       <th>{{t common.diskUsage}}</th>
       <th>{{t common.loadAvg}}</th>
       <th>{{t common.components}}</th>
-      <th></th>
-      <th></th>
     </tr>
     <tr>
       <th class="first">&nbsp;</th>
@@ -50,12 +53,11 @@
       <th></th>
       <th>{{view view.loadAvgFilterView}}</th>
       <th>{{view view.componentsFilterView}}</th>
-      <th></th>
-      <th></th>
     </tr>
     </thead>
     <tbody>
-    {{#each host in controller}}
+    {{#if view.filteredContent.length}}
+    {{#each host in view.filteredContent}}
     {{#view view.HostView contentBinding="host"}}
     <tr>
       <td class="first">
@@ -79,15 +81,17 @@
       <td>
         <span title="{{unbound view.labels}}">{{view.shortLabels}}</span>
       </td>
-      <td>
-        {{host.publicHostName}}
-      </td>
-      <td>
-        {{view.labels}}
-      </td>
     </tr>
     {{/view}}
     {{/each}}
+    {{else}}
+    <tr>
+        <td class="first"></td>
+        <td colspan="7">
+            {{t hosts.table.noHosts}}
+        </td>
+    </tr>
+    {{/if}}
     </tbody>
   </table>
 </div>

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

@@ -245,5 +245,138 @@ module.exports = {
     config.emptyValue = 'Any';
 
     return wrapperView.extend(config);
+  },
+  /**
+   * returns the filter function, which depends on the type of property
+   * @param type
+   * @param isGlobal check is search global
+   * @return {Function}
+   */
+  getFilterByType: function(type, isGlobal){
+    switch (type){
+      case 'ambari-bandwidth':
+        return function(rowValue, rangeExp){
+          var compareChar = isNaN(rangeExp.charAt(0)) ? rangeExp.charAt(0) : false;
+          var compareScale = rangeExp.charAt(rangeExp.length - 1);
+          var compareValue = compareChar ? parseFloat(rangeExp.substr(1, rangeExp.length)) : parseFloat(rangeExp.substr(0, rangeExp.length));
+          var match = false;
+          if (rangeExp.length == 1 && compareChar !== false) {
+            // User types only '=' or '>' or '<', so don't filter column values
+            match = true;
+            return match;
+          }
+          switch (compareScale) {
+            case 'g':
+              compareValue *= 1073741824;
+              break;
+            case 'm':
+              compareValue *= 1048576;
+              break;
+            case 'k':
+              compareValue *= 1024;
+              break;
+            default:
+              //default value in GB
+              compareValue *= 1073741824;
+          }
+          rowValue = (jQuery(rowValue).text()) ? jQuery(rowValue).text() : rowValue;
+
+          var convertedRowValue;
+          if (rowValue === '<1KB') {
+            convertedRowValue = 1;
+          } else {
+            var rowValueScale = rowValue.substr(rowValue.length - 2, 2);
+            switch (rowValueScale) {
+              case 'KB':
+                convertedRowValue = parseFloat(rowValue)*1024;
+                break;
+              case 'MB':
+                convertedRowValue = parseFloat(rowValue)*1048576;
+                break;
+              case 'GB':
+                convertedRowValue = parseFloat(rowValue)*1073741824;
+                break;
+            }
+          }
+
+          switch (compareChar) {
+            case '<':
+              if (compareValue > convertedRowValue) match = true;
+              break;
+            case '>':
+              if (compareValue < convertedRowValue) match = true;
+              break;
+            case false:
+            case '=':
+              if (compareValue == convertedRowValue) match = true;
+              break;
+          }
+          return match;
+        }
+        break;
+      case 'number':
+        return function(rowValue, rangeExp){
+          var compareChar = rangeExp.charAt(0);
+          var compareValue;
+          var match = false;
+          if (rangeExp.length == 1) {
+            if (isNaN(parseInt(compareChar))) {
+              // User types only '=' or '>' or '<', so don't filter column values
+              match = true;
+              return match;
+            }
+            else {
+              compareValue = parseFloat(parseFloat(rangeExp).toFixed(2));
+            }
+          }
+          else {
+            if (isNaN(parseInt(compareChar))) {
+              compareValue = parseFloat(parseFloat(rangeExp.substr(1, rangeExp.length)).toFixed(2));
+            }
+            else {
+              compareValue = parseFloat(parseFloat(rangeExp.substr(0, rangeExp.length)).toFixed(2));
+            }
+          }
+          rowValue = parseFloat((jQuery(rowValue).text()) ? jQuery(rowValue).text() : rowValue);
+          match = false;
+          switch (compareChar) {
+            case '<':
+              if (compareValue > rowValue) match = true;
+              break;
+            case '>':
+              if (compareValue < rowValue) match = true;
+              break;
+            case '=':
+              if (compareValue == rowValue) match = true;
+              break;
+            default:
+              if (rangeExp == rowValue) match = true;
+          }
+          return match;
+        }
+        break;
+      case 'multiple':
+        return function(origin, compareValue){
+          var options = compareValue.split(',');
+          var rowValue = origin.mapProperty('componentName').join(" ");
+          var str = new RegExp(compareValue, "i");
+          for (var i = 0; i < options.length; i++) {
+            if(!isGlobal) {
+              str = new RegExp('(\\W|^)' + options[i] + '(\\W|$)');
+            }
+            if (rowValue.search(str) !== -1) {
+              return true;
+            }
+          }
+          return false;
+        }
+        break;
+      case 'string':
+      default:
+        return function(origin, compareValue){
+          var regex = new RegExp(compareValue,"i");
+          return regex.test(origin);
+        }
+    }
   }
 };

ambari-web/app/views/main/apps/item/dag_view.js

@@ -97,38 +97,6 @@ App.MainAppsItemDagView = Em.View.extend({
   },
 
   draw: function(){
-
-    var innerTable = this.$('#innerTable').dataTable({
-      "sDom": 'rt<"page-bar"lip><"clear">',
-      "oLanguage": {
-        "sSearch": "<i class='icon-question-sign'>&nbsp;Search</i>",
-        "sLengthMenu": "Show: _MENU_",
-        "sInfo": "_START_ - _END_ of _TOTAL_",
-        "oPaginate":{
-          "sPrevious": "<i class='icon-arrow-left'></i>",
-          "sNext": "<i class='icon-arrow-right'></i>"
-        }
-      },
-      "iDisplayLength": 5,
-      "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
-      "aaSorting": [],
-      "aoColumns":[
-        null,
-        null,
-        null,
-        null,
-        null,
-        { "sType":"ambari-bandwidth" },
-        { "sType":"ambari-bandwidth" },
-        null
-      ]
-    });
-
-    // Hard reset filter settings
-    innerTable.fnSettings().aiDisplay = innerTable.fnSettings().aiDisplayMaster.slice();
-    // Redraw table
-    innerTable.fnDraw(false);
-    innerTable.fnSettings().oFeatures.bFilter = false;
     var dagSchema = this.get('controller.content.workflowContext');
     var jobs = this.get('jobs');
     this.resizeModal();

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

@@ -17,55 +17,18 @@
  */
 
 var App = require('app');
-require('utils/data_table');
 var filters = require('views/common/filter_view');
 var date = require('utils/date');
 
 App.MainHostView = Em.View.extend({
   templateName:require('templates/main/host'),
-  controller:function () {
-    return App.router.get('mainHostController');
-  }.property(),
   content:function () {
     return App.router.get('mainHostController.content');
   }.property('App.router.mainHostController.content'),
   oTable: null,
 
   didInsertElement:function () {
-    var oTable = $('#hosts-table').dataTable({
-      "sDom": '<"search-bar"f><"clear">rt<"page-bar"lip><"clear">',
-      "oLanguage": {
-        "sSearch": "Search:",
-        "sLengthMenu": "Show: _MENU_",
-        "sInfo": "_START_ - _END_ of _TOTAL_",
-        "sInfoEmpty": "0 - _END_ of _TOTAL_",
-        "sInfoFiltered": "",
-        "oPaginate":{
-          "sPrevious": "<i class='icon-arrow-left'></i>",
-          "sNext": "<i class='icon-arrow-right'></i>"
-        }
-      },
-      "bSortCellsTop": true,
-      "iDisplayLength": 10,
-      "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
-      "oSearch": {"bSmart":false},
-      "bAutoWidth": false,
-      "aoColumns":[
-        { "bSortable": false },
-        { "sType":"html" },
-        { "sType":"html" },
-        { "sType":"num-html" },
-        { "sType":"ambari-bandwidth" },
-        { "sType":"html" },
-        { "sType":"num-html" },
-        { "sType":"html", "bSortable": false  },
-        { "bVisible": false }, // hidden column for raw public host name value
-        { "bVisible": false } // hidden column for raw components list
-      ],
-      "aaSorting": [[ 1, "asc" ]]
-    });
-    this.set('oTable', oTable);
-    this.set('allComponentsChecked', true); // select all components (checkboxes) on start.
+    this.filter()
   },
 
   HostView:Em.View.extend({
@@ -107,7 +70,7 @@ App.MainHostView = Em.View.extend({
    */
   nameFilterView: filters.createTextView({
     onChangeValue: function(){
-      this.get('parentView').updateFilter(8, this.get('value'));
+      this.get('parentView').updateFilter(1, this.get('value'), 'string');
     }
   }),
 
@@ -117,7 +80,7 @@ App.MainHostView = Em.View.extend({
    */
   ipFilterView: filters.createTextView({
     onChangeValue: function(){
-      this.get('parentView').updateFilter(2, this.get('value'));
+      this.get('parentView').updateFilter(2, this.get('value'), 'string');
     }
   }),
 
@@ -129,7 +92,7 @@ App.MainHostView = Em.View.extend({
     fieldType: 'input-mini',
     fieldId: 'cpu_filter',
     onChangeValue: function(){
-      this.get('parentView').updateFilter(3);
+      this.get('parentView').updateFilter(3, this.get('value'), 'number');
     }
   }),
 
@@ -141,7 +104,7 @@ App.MainHostView = Em.View.extend({
     fieldType: 'input-mini',
     fieldId: 'load_avg_filter',
     onChangeValue: function(){
-      this.get('parentView').updateFilter(5);
+      this.get('parentView').updateFilter(5, this.get('value'), 'number');
     }
   }),
 
@@ -153,7 +116,7 @@ App.MainHostView = Em.View.extend({
     fieldType: 'input-mini',
     fieldId: 'ram_filter',
     onChangeValue: function(){
-      this.get('parentView').updateFilter(4);
+      this.get('parentView').updateFilter(4, this.get('value'), 'ambari-bandwidth');
     }
   }),
 
@@ -225,13 +188,13 @@ App.MainHostView = Em.View.extend({
         var chosenComponents = [];
 
         this.get('masterComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('displayName'));
+          chosenComponents.push(item.get('id'));
         });
         this.get('slaveComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('displayName'));
+          chosenComponents.push(item.get('id'));
         });
         this.get('clientComponents').filterProperty('checkedForHostFilter', true).forEach(function(item){
-          chosenComponents.push(item.get('displayName'));
+          chosenComponents.push(item.get('id'));
         });
         this.set('value', chosenComponents.toString());
       },
@@ -246,9 +209,8 @@ App.MainHostView = Em.View.extend({
       }
 
     }),
-    fieldId: 'components_filter',
     onChangeValue: function(){
-      this.get('parentView').updateFilter(9);
+      this.get('parentView').updateFilter(6, this.get('value'), 'multiple');
     }
   }),
 
@@ -257,13 +219,95 @@ App.MainHostView = Em.View.extend({
   }.property(),
 
   /**
-   * Apply each filter to dataTable
+   * Apply each filter to host
    *
    * @param iColumn number of column by which filter
    * @param value
    */
-  updateFilter: function(iColumn, value){
-    this.get('oTable').fnFilter(value || '', iColumn);
-  }
-
+  updateFilter: function(iColumn, value, type){
+    var filterCondition = this.get('filterConditions').findProperty('iColumn', iColumn);
+    if(filterCondition) {
+      filterCondition.value = value;
+    } else {
+      filterCondition = {
+        iColumn: iColumn,
+        value: value,
+        type: type
+      }
+      this.get('filterConditions').push(filterCondition);
+    }
+    this.filter();
+  },
+  /**
+   * associations between host property and column index
+   */
+  colPropAssoc: function(){
+    var associations = [];
+    associations[1] = 'publicHostName';
+    associations[2] = 'ip';
+    associations[3] = 'cpu';
+    associations[4] = 'memoryFormatted';
+    associations[5] = 'loadAvg';
+    associations[6] = 'hostComponents';
+    return associations;
+  }.property(),
+  globalSearchValue:null,
+  /**
+   * filter table by all fields
+   */
+  globalFilter: function(){
+    var content = this.get('content');
+    var searchValue = this.get('globalSearchValue');
+    var result;
+    if(searchValue){
+      result = content.filter(function(host){
+        var match = false;
+        this.get('colPropAssoc').forEach(function(item){
+          var filterFunc = filters.getFilterByType('string', false);
+          if(item === 'hostComponents'){
+            filterFunc = filters.getFilterByType('multiple', true);
+          }
+          if(!match){
+            match = filterFunc(host.get(item), searchValue);
+          }
+        });
+        return match;
+      }, this);
+      this.set('filteredContent', result);
+    } else {
+      this.filter();
+    }
+  }.observes('globalSearchValue', 'content'),
+  /**
+   * contain filter conditions for each column
+   */
+  filterConditions: [],
+  filteredContent: null,
+  /**
+   * filter table by filterConditions
+   */
+  filter: function(){
+    var content = this.get('content');
+    var filterConditions = this.get('filterConditions').filterProperty('value');
+    var result;
+    var self = this;
+    var assoc = this.get('colPropAssoc');
+    if(!this.get('globalSearchValue')){
+      if(filterConditions.length){
+        result = content.filter(function(host){
+          var match = true;
+          filterConditions.forEach(function(condition){
+            var filterFunc = filters.getFilterByType(condition.type, false);
+            if(match){
+              match = filterFunc(host.get(assoc[condition.iColumn]), condition.value);
+            }
+          });
+          return match;
+        });
+        this.set('filteredContent', result);
+      } else {
+        this.set('filteredContent', content);
+      }
+    }
+  }.observes('content')
 });

ambari-web/config.coffee

@@ -51,7 +51,6 @@ exports.config =
           'vendor/scripts/jquery.ui.slider.js',
           'vendor/scripts/jquery.ui.sortable.js',
           'vendor/scripts/jquery.ui.custom-effects.js',
-          'vendor/scripts/jquery.dataTables.js',
           'vendor/scripts/jquery.timeago.js',
           'vendor/scripts/jquery.ajax-retry.js',
           'vendor/scripts/workflow_visualization.js',