AMBARI-4127. Hosts Filter does not say that a filter is enabled (not possible to figure out if a filter is enabled or not easily). (xiwang via yusaku)

ambari-web/app/styles/application.less

@@ -2555,12 +2555,29 @@ table.graphs {
       th {
         padding: 4px 4px 4px 8px;
       }
+      .active-sort {
+        color: #555555;
+        text-decoration: none;
+        background-color: #e5e5e5;
+        -webkit-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+        -moz-box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+        box-shadow: inset 0 5px 8px rgba(0, 0, 0, 0.100);
+      }
     }
+
     #filter-row {
       th {
         padding: 0px;
         padding-left: 8px;
       }
+      .active-filter {
+        color: #555555;
+        text-decoration: none;
+        background-color: #e5e5e5;
+        -webkit-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+        -moz-box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.05);
+      }
       input {
         font-size: 12px;
         height: 14px;

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

@@ -68,7 +68,7 @@
         {{view view.parentView.memorySort}}
         {{view view.parentView.diskUsageSort}}
         {{view view.parentView.loadAvgSort}}
-        <th>{{t common.components}}</th>
+        <th class="sort-view-6">{{t common.components}}</th>
       {{/view}}
       <tr id="filter-row">
         <th class="first"> </th>

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

@@ -73,11 +73,16 @@ var wrapperView = Ember.View.extend({
     if(!this.get('parentNode')){
       return;
     }
-
+    // get the sort view element in the same column to current filter view to highlight them together
+    var relatedSort = $('.sort-view-' + this.get('column'));
     if(this.isEmpty()){
+      this.get('parentNode').removeClass('active-filter');
       this.get('parentNode').addClass('notActive');
+      relatedSort.removeClass('active-sort');
     } else {
       this.get('parentNode').removeClass('notActive');
+      this.get('parentNode').addClass('active-filter');
+      relatedSort.addClass('active-sort');
     }
 
     if(this.get('fieldId')){

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

@@ -151,12 +151,16 @@ var wrapperView = Em.View.extend({
  */
 var fieldView = Em.View.extend({
   template:Em.Handlebars.compile('{{view.displayName}}'),
-  classNameBindings: ['status'],
+  classNameBindings: ['status', 'viewNameClass'],
   tagName: 'th',
   name: null,
   displayName: null,
   status: 'sorting',
+  viewNameClass: function () {
+    return 'sort-view-' + this.get('column');
+  }.property(),
   type: null,
+  column: 0,
   /**
    * callback that run sorting and define order of sorting
    * @param event

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

@@ -49,20 +49,24 @@ App.MainHostView = App.TableView.extend({
 
   sortView: sort.wrapperView,
   nameSort: sort.fieldView.extend({
+    column: 1,
     name:'publicHostName',
     displayName: Em.I18n.t('common.name')
   }),
   ipSort: sort.fieldView.extend({
+    column: 2,
     name:'ip',
     displayName: Em.I18n.t('common.ipAddress'),
     type: 'ip'
   }),
   cpuSort: sort.fieldView.extend({
+    column: 3,
     name:'cpu',
     displayName: Em.I18n.t('common.cpu'),
     type: 'number'
   }),
   memorySort: sort.fieldView.extend({
+    column: 4,
     name:'memory',
     displayName: Em.I18n.t('common.ram'),
     type: 'number'
@@ -72,6 +76,7 @@ App.MainHostView = App.TableView.extend({
     displayName: Em.I18n.t('common.diskUsage')
   }),
   loadAvgSort: sort.fieldView.extend({
+    column: 5,
     name:'loadAvg',
     displayName: Em.I18n.t('common.loadAvg'),
     type: 'number'