AMBARI-14683 .Add Filter in Alert instances table (onechiporenko)

ambari-web/app/styles/alerts.less

@@ -155,24 +155,30 @@
   .col0,
   td:first-child,
   th:first-child {
-    width: 30%;
+    width: 10%;
   }
 
   .col1,
   td:first-child + td,
   th:first-child + th {
-    width: 23%;
+    width: 20%;
   }
 
   .col2,
   td:first-child + td + td,
   th:first-child + th + th {
-    width: 7%
+    width: 23%;
   }
 
   .col3,
   td:first-child + td + td + td,
   th:first-child + th + th + th {
+    width: 7%;
+  }
+
+  .col4,
+  td:first-child + td + td + td + td,
+  th:first-child + th + th + th + th {
     width: 40%;
   }
 
@@ -195,7 +201,7 @@
         margin: 5px;
       }
     }
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
   .definition-details-block {
     margin-top: 30px;

ambari-web/app/templates/main/alerts/definition_details.hbs

@@ -171,11 +171,19 @@
 
         <table class="table advanced-header-table table-bordered table-striped alerts-table" id="alert-instances-table">
           <thead>
-          <tr>
-            <th class="first">{{t alerts.definition.details.serviceHost}}</th>
-            <th>{{t common.status}}</th>
+          {{#view view.sortView classNames="label-row" contentBinding="view.filteredContent"}}
+            {{view view.parentView.serviceSort class="first service-sorting"}}
+            {{view view.parentView.hostNameSort class="host-sorting"}}
+            {{view view.parentView.stateSort class="state-sorting"}}
             <th>{{t alerts.definition.details.24-hour}}</th>
             <th>{{t alerts.table.header.check.response}}</th>
+          {{/view}}
+          <tr class="filter-row">
+            <th class="first">{{view view.serviceFilterView}}</th>
+            <th>{{view view.hostNameFilterView}}</th>
+            <th>{{view view.stateFilterView }}</th>
+            <th>{{!}}</th>
+            <th>{{!}}</th>
           </tr>
           </thead>
           <tbody>
@@ -183,7 +191,21 @@
             {{#each instance in view.pageContent}}
               {{#view view.instanceTableRow}}
                 <td class="first">
-                  {{view App.AlertInstanceServiceHostView instanceBinding="instance"}}
+                  {{#if instance.serviceDisplayName}}
+                    {{#if instance.service.isLoaded}}
+                      <a {{action goToService instance.service target="view"}}
+                        href="#">{{instance.serviceDisplayName}}</a>
+                    {{else}}
+                      {{instance.serviceDisplayName}}
+                    {{/if}}
+                  {{/if}}
+                </td>
+                <td>
+                  {{#if instance.hostName}}
+                    <a {{action goToHostAlerts instance.host target="view"}} href="#">
+                      {{instance.hostName}}
+                    </a>
+                  {{/if}}
                 </td>
                 <td>{{{instance.status}}}
                   <time class="timeago"

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

@@ -186,7 +186,7 @@ var wrapperView = Ember.View.extend({
         $optionEl.text(triggeredValue.displayAs);
         // the second one option should be hidden
         // as the result, on init stage we show only one option that could be selected
-        if (index == 1) {
+        if (index === 1) {
           $optionEl.css('display', 'none');
         }
       }, this);
@@ -207,7 +207,7 @@ var wrapperView = Ember.View.extend({
       var currentValueIndex = values.indexOf(this.get('value'));
       if (currentValueIndex < 0) return;
       // value assigned to hidden option
-      hiddenValue = values[Number(currentValueIndex == 0)];
+      hiddenValue = values[Number(currentValueIndex === 0)];
     }, this);
     if (hiddenValue) {
       // our select
@@ -282,7 +282,7 @@ var componentFieldView = Ember.View.extend({
       var dropDown = this.$('.filter-components');
       var firstClick = true;
       $(document).bind('click', function (e) {
-        if (!firstClick && $(e.target).closest(dropDown).length == 0) {
+        if (!firstClick && !$(e.target).closest(dropDown).length) {
           self.set('isFilterOpen', false);
           $(document).unbind('click');
         }
@@ -382,194 +382,148 @@ module.exports = {
         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) {
+          var compareValue = parseFloat(rangeExp.substr(compareChar ? 1 : 0));
+          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;
+            return true;
           }
-          rowValue = (jQuery(rowValue).text()) ? jQuery(rowValue).text() : rowValue;
+          var oneSymbolScales = {
+            k: 1024,
+            m: 1048576,
+            g: 1073741824
+          };
+          var twoSymbolsScales = {
+            KB: 1024,
+            MB: 1048576,
+            GB: 1073741824
+          };
+
+          compareValue *= oneSymbolScales[compareScale] ? oneSymbolScales[compareScale] : oneSymbolScales.g; // default value in GB
+          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;
+            if (twoSymbolsScales[rowValueScale]) {
+              convertedRowValue = parseFloat(rowValue) * twoSymbolsScales[rowValueScale];
             }
           }
 
           switch (compareChar) {
             case '<':
-              if (compareValue > convertedRowValue) match = true;
-              break;
+              return compareValue > convertedRowValue;
             case '>':
-              if (compareValue < convertedRowValue) match = true;
-              break;
+              return compareValue < convertedRowValue;
             case false:
             case '=':
-              if (compareValue == convertedRowValue) match = true;
-              break;
+              return compareValue === convertedRowValue;
+            default:
+              return false;
           }
-          return match;
         };
-        break;
       case 'duration':
         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) {
+          var compareValue = parseFloat(rangeExp.substr(compareChar ? 1 : 0));
+          if (rangeExp.length === 1 && compareChar !== false) {
             // User types only '=' or '>' or '<', so don't filter column values
-            match = true;
-            return match;
-          }
-          switch (compareScale) {
-            case 's':
-              compareValue *= 1000;
-              break;
-            case 'm':
-              compareValue *= 60000;
-              break;
-            case 'h':
-              compareValue *= 3600000;
-              break;
-            default:
-              compareValue *= 1000;
+            return true;
           }
-          rowValue = (jQuery(rowValue).text()) ? jQuery(rowValue).text() : rowValue;
+          var oneSymbolsScales = {
+            s: 1000,
+            m: 60000,
+            h: 3600000
+          };
+          compareValue *= oneSymbolsScales[compareScale] ? oneSymbolsScales[compareScale] : oneSymbolsScales.s;
+          rowValue = jQuery(rowValue).text() ? jQuery(rowValue).text() : rowValue;
 
           switch (compareChar) {
             case '<':
-              if (compareValue > rowValue) match = true;
-              break;
+              return compareValue > rowValue;
             case '>':
-              if (compareValue < rowValue) match = true;
-              break;
+              return compareValue < rowValue;
             case false:
             case '=':
-              if (compareValue == rowValue) match = true;
-              break;
+              return compareValue == rowValue;
           }
-          return match;
+          return false;
         };
-        break;
       case 'date':
         return function (rowValue, rangeExp) {
-          var match = false;
           var timePassed = App.dateTime() - rowValue;
           switch (rangeExp) {
             case 'Past 1 hour':
-              match = timePassed <= 3600000;
-              break;
+              return timePassed <= 3600000;
             case 'Past 1 Day':
-              match = timePassed <= 86400000;
-              break;
+              return timePassed <= 86400000;
             case 'Past 2 Days':
-              match = timePassed <= 172800000;
-              break;
+              return timePassed <= 172800000;
             case 'Past 7 Days':
-              match = timePassed <= 604800000;
-              break;
+              return timePassed <= 604800000;
             case 'Past 14 Days':
-              match = timePassed <= 1209600000;
-              break;
+              return timePassed <= 1209600000;
             case 'Past 30 Days':
-              match = timePassed <= 2592000000;
-              break;
+              return timePassed <= 2592000000;
             case 'Any':
-              match = true;
-              break;
+              return true;
+            default:
+              return false;
           }
-          return match;
+          return false;
         };
-        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))) {
+          if (rangeExp.length === 1) {
+            if (isNaN(parseInt(compareChar, 10))) {
               // User types only '=' or '>' or '<', so don't filter column values
-              match = true;
-              return match;
-            }
-            else {
-              compareValue = parseFloat(parseFloat(rangeExp).toFixed(2));
+              return true;
             }
+            compareValue = parseFloat(parseFloat(rangeExp).toFixed(2));
           }
           else {
-            if (isNaN(parseInt(compareChar))) {
+            if (isNaN(parseInt(compareChar, 10))) {
               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;
+          rowValue = parseFloat(jQuery(rowValue).text() ? jQuery(rowValue).text() : rowValue);
           switch (compareChar) {
             case '<':
-              if (compareValue > rowValue) match = true;
-              break;
+              return compareValue > rowValue;
             case '>':
-              if (compareValue < rowValue) match = true;
-              break;
+              return compareValue < rowValue
             case '=':
-              if (compareValue == rowValue) match = true;
-              break;
             default:
-              if (rangeExp == rowValue) match = true;
+              return compareValue === rowValue;
           }
-          return match;
+          return false;
         };
-        break;
       case 'sub-resource':
         return function (origin, compareValue) {
-          if (!Array.isArray(compareValue) || compareValue.length === 0) return true;
+          if (!Array.isArray(compareValue) || !compareValue.length) {
+            return true;
+          }
 
           return origin.some(function (item) {
             for (var i = 0, l = compareValue.length; i < l; i++) {
-              if(item.get(compareValue[i].property) !== compareValue[i].value) return false
+              if(item.get(compareValue[i].property) !== compareValue[i].value) {
+                return false;
+              }
             }
             return true;
           });
         };
-        break;
       case 'multiple':
         return function (origin, compareValue) {
           var options = compareValue.split(',');
-          if (typeof (origin) === "string") {
-            var rowValue = origin;
-          } else {
-            var rowValue = origin.mapProperty('componentName').join(" ");
-          }
+          var rowValue = typeof origin === "string" ? origin : origin.mapProperty('componentName').join(" ");
           var str = new RegExp(compareValue, "i");
           for (var i = 0; i < options.length; i++) {
             if (!isGlobal) {
@@ -581,34 +535,28 @@ module.exports = {
           }
           return false;
         };
-        break;
       case 'boolean':
-        return function (origin, compareValue) {
-          return origin === compareValue;
-        };
-        break;
       case 'select':
         return function (origin, compareValue) {
-          return origin == compareValue;
+          return origin === compareValue;
         };
-        break;
       case 'os':
         return function (origin, compareValue) {
           return origin.getEach('osType').contains(compareValue)
         };
-        break;
       case 'range':
         return function (origin, compareValue) {
           if (compareValue[1] && compareValue[0]) {
             return origin >= compareValue[0] && origin <= compareValue[1];
-          } else if (compareValue[0]) {
+          }
+          if (compareValue[0]) {
             return origin >= compareValue[0];
-          } else if (compareValue[1]) {
+          }
+          if (compareValue[1]) {
             return origin <= compareValue[1]
           }
           return true;
         };
-        break;
       case 'alert_status':
         /**
          * origin - alertDefinition.summary
@@ -627,27 +575,43 @@ module.exports = {
           }
           return !!origin[compareValue] && (origin[compareValue].count > 0 || origin[compareValue].maintenanceCount > 0);
         };
-        break;
       case 'alert_group':
         return function (origin, compareValue) {
           return origin.mapProperty('id').contains(compareValue);
         };
-        break;
       case 'enable_disable':
         return function (origin, compareValue) {
-          return origin == (compareValue == 'enabled');
+          return origin === (compareValue === 'enabled');
         };
-        break;
       case 'string':
       default:
         return function (origin, compareValue) {
           if (validator.isValidMatchesRegexp(compareValue)) {
             var regex = new RegExp(compareValue, "i");
             return regex.test(origin);
-          } else {
-            return false;
           }
+          return false;
         }
     }
+  },
+
+  getComputedServicesList: function () {
+    return Em.computed('App.router.clusterController.isLoaded', function () {
+      return [
+        {
+          value: '',
+          label: Em.I18n.t('common.all')
+        }
+      ].concat(App.Service.find().map(function (service) {
+        return {
+          value: service.get('serviceName'),
+          label: service.get('displayName')
+        }
+      })).concat({
+        value: 'AMBARI',
+        label: Em.I18n.t('app.name')
+      });
+    });
   }
+
 };

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

@@ -18,8 +18,7 @@
 
 var App = require('app');
 var filters = require('views/common/filter_view'),
-  sort = require('views/common/sort_view'),
-  date = require('utils/date/date');
+  sort = require('views/common/sort_view');
 
 App.MainAlertDefinitionsView = App.TableView.extend({
 
@@ -237,24 +236,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
   serviceFilterView: filters.createSelectView({
     column: 3,
     fieldType: 'filter-input-width',
-    content: function () {
-      return [
-        {
-          value: '',
-          label: Em.I18n.t('common.all')
-        }
-      ].concat(App.Service.find().map(function (service) {
-        return {
-          value: service.get('serviceName'),
-          label: service.get('displayName')
-        }
-      }).concat([
-        {
-          value: 'AMBARI',
-          label: Em.I18n.t('app.name')
-        }
-      ]));
-    }.property('App.router.clusterController.isLoaded'),
+    content: filters.getComputedServicesList(),
     onChangeValue: function () {
       this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
     }
@@ -447,7 +429,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
 
     onValueChange: function () {
       var value = this.get('value');
-      if (value != undefined) {
+      if (value !== undefined) {
         this.get('content').setEach('selected', false);
         this.set('selected', this.get('content').findProperty('value', value));
         var selectEntry = this.get('content').findProperty('value', value);
@@ -484,7 +466,7 @@ App.MainAlertDefinitionsView = App.TableView.extend({
    * @type {string}
    */
   paginationRightClass: function () {
-    if ((this.get("endIndex")) < this.get("filteredCount")) {
+    if (this.get("endIndex") < this.get("filteredCount")) {
       return "paginate_next";
     }
     return "paginate_disabled_next";

ambari-web/app/views/main/alerts/definition_details_view.js

@@ -17,6 +17,8 @@
  */
 
 var App = require('app');
+var filters = require('views/common/filter_view');
+var sort = require('views/common/sort_view');
 
 App.MainAlertDefinitionDetailsView = App.TableView.extend({
 
@@ -38,6 +40,8 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    */
   disabledDisplay: Em.I18n.t('alerts.table.state.disabled'),
 
+  colPropAssoc: ['serviceName', 'hostName', 'state'],
+
   content: function () {
     return this.get('controller.alerts');
   }.property('controller.alerts.@each'),
@@ -86,6 +90,101 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
     });
   }.observes('controller.content.enabled'),
 
+  sortView: sort.wrapperView.extend({}),
+
+  /**
+   * Sorting header for <label>alertDefinition.label</label>
+   * @type {Em.View}
+   */
+  serviceSort: sort.fieldView.extend({
+    column: 0,
+    name: 'serviceName',
+    displayName: Em.I18n.t('common.service')
+  }),
+
+  /**
+   * Sorting header for <label>alertDefinition.status</label>
+   * @type {Em.View}
+   */
+  hostNameSort: sort.fieldView.extend({
+    column: 1,
+    name: 'hostName',
+    displayName: Em.I18n.t('common.host')
+  }),
+
+  /**
+   * Sorting header for <label>alertDefinition.service.serviceName</label>
+   * @type {Em.View}
+   */
+  stateSort: sort.fieldView.extend({
+    column: 2,
+    name: 'state',
+    displayName: Em.I18n.t('common.status')
+  }),
+
+  /**
+   * Filtering header for <label>alertInstance.hostName</label>
+   * @type {Em.View}
+   */
+  hostNameFilterView: filters.createTextView({
+    column: 1,
+    fieldType: 'input-medium',
+    onChangeValue: function(){
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'string');
+    }
+  }),
+
+  /**
+   * Filtering header for <label>alertInstance.serviceName</label>
+   * @type {Em.View}
+   */
+  serviceFilterView: filters.createSelectView({
+    column: 0,
+    fieldType: 'input-small',
+    content: filters.getComputedServicesList(),
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
+    }
+  }),
+
+  /**
+   * Filtering header for <label>alertInstance.state</label>
+   * @type {Em.View}
+   */
+  stateFilterView: filters.createSelectView({
+    column: 2,
+    fieldType: 'filter-input-width',
+    content: [
+      {
+        value: '',
+        label: Em.I18n.t('common.all')
+      },
+      {
+        value: 'OK',
+        label: 'OK'
+      },
+      {
+        value: 'WARNING',
+        label: 'WARNING'
+      },
+      {
+        value: 'CRITICAL',
+        label: 'CRITICAL'
+      },
+      {
+        value: 'UNKNOWN',
+        label: 'UNKNOWN'
+      },
+      {
+        value: 'PENDING',
+        label: 'NONE'
+      }
+    ],
+    onChangeValue: function () {
+      this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
+    }
+  }),
+
   /**
    * View calculates and represents count of alerts on appropriate host during last day
    */
@@ -160,7 +259,7 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
    * @type {string}
    */
   paginationRightClass: function () {
-    if ((this.get("endIndex")) < this.get("filteredCount")) {
+    if (this.get("endIndex") < this.get("filteredCount")) {
       return "paginate_next";
     }
     return "paginate_disabled_next";

ambari-web/test/views/common/filter_view_test.js

@@ -109,7 +109,7 @@ describe('filters.getFilterByType', function () {
     ];
 
     testData.forEach(function(item){
-      it('Condition: ' + item.condition + ' - match value: ' + item.value, function () {
+      it('Condition: {0} - match value: {1}'.format(JSON.stringify(item.condition), JSON.stringify(item.value)), function () {
         expect(filter(item.value, item.condition)).to.equal(item.result);
       })
     });
@@ -193,7 +193,7 @@ describe('filters.getFilterByType', function () {
     ];
 
     testData.forEach(function(item){
-      it('Condition: ' + item.condition + ' - match value: ' + item.value, function () {
+      it('Condition: {0} - match value: {1}'.format(JSON.stringify(item.condition), JSON.stringify(item.value)), function () {
         expect(filter(item.value, item.condition)).to.equal(item.result);
       })
     });
@@ -236,7 +236,7 @@ describe('filters.getFilterByType', function () {
     ];
 
     testData.forEach(function(item){
-      it('Condition: ' + item.condition + ' - match value: ' + item.value, function () {
+      it('Condition: {0} - match value: {1}'.format(JSON.stringify(item.condition), JSON.stringify(item.value)), function () {
         var currentTime = App.dateTime();
         item.value = currentTime - item.value;
         expect(filter(item.value, item.condition)).to.equal(item.result);
@@ -286,7 +286,7 @@ describe('filters.getFilterByType', function () {
     ];
 
     testData.forEach(function(item){
-      it('Condition: ' + item.condition + ' - match value: ' + item.value, function () {
+      it('Condition: {0} - match value: {1}'.format(JSON.stringify(item.condition), JSON.stringify(item.value)), function () {
         expect(filter(item.value, item.condition)).to.equal(item.result);
       })
     });
@@ -570,4 +570,80 @@ describe('filters.getFilterByType', function () {
 
   });
 
+  describe('os', function () {
+
+    var filter = filters.getFilterByType('os');
+
+    [
+      {
+        origin: [{osType: 'os1'}, {osType: 'os2'}, {osType: 'os3'}],
+        compareValue: 'os1',
+        e: true
+      },
+      {
+        origin: [{osType: 'os1'}, {osType: 'os2'}, {osType: 'os3'}],
+        compareValue: 'os2',
+        e: true
+      },
+      {
+        origin: [{osType: 'os1'}, {osType: 'os2'}, {osType: 'os3'}],
+        compareValue: 'os3',
+        e: true
+      },
+      {
+        origin: [],
+        compareValue: 'os1',
+        e: false
+      },
+      {
+        origin: [{}, {}, {}],
+        compareValue: 'os1',
+        e: false
+      }
+    ].forEach(function (test, i) {
+      it('test #' + (i + 1), function () {
+        expect(filter(test.origin, test.compareValue)).to.be.equal(test.e);
+      });
+    });
+
+  });
+
+  describe('range', function () {
+
+    var filter = filters.getFilterByType('range');
+
+    [
+      {
+        compareValue: [2],
+        origin: 1,
+        e: false
+      },
+      {
+        compareValue: [0, 1],
+        origin: 1,
+        e: true
+      },
+      {
+        compareValue: [1, 1],
+        origin: 1,
+        e: true
+      },
+      {
+        compareValue: [2, 2],
+        origin: 1,
+        e: false
+      },
+      {
+        compareValue: [4, 2],
+        origin: 1,
+        e: false
+      }
+    ].forEach(function (test, i) {
+      it('test #' + (i + 1), function () {
+        expect(filter(test.origin, test.compareValue)).to.be.equal(test.e);
+      });
+    });
+
+  });
+
 });

ambari-web/test/views/main/alerts/definition_details_view_test.js

@@ -18,7 +18,7 @@
 
 var App = require('app');
 
-var view, instanceTableRow;
+var view;
 
 function getView() {
   return App.MainAlertDefinitionDetailsView.create({
@@ -183,7 +183,7 @@ describe('App.MainAlertDefinitionDetailsView', function () {
         expect(lastDayCountView.get('count')).to.equal(0);
       });
 
-      it("lastDayAlertsCount is null", function () {
+      it("lastDayAlertsCount is {host1: 1}", function () {
         lastDayCountView.set('parentView.controller.lastDayAlertsCount', {host1: 1});
         expect(lastDayCountView.get('count')).to.equal(1);
       });