AMBARI-3611. Hosts: clarify which filter is in effect (xiwang)

ambari-web/app/messages.js

@@ -1567,6 +1567,8 @@ Em.I18n.translations = {
   'apps.filters.filtered': 'Filtered',
   'apps.filters.clearFilters': 'Clear filters',
   'apps.filters.paginationInfo': '{0} - {1} of {2}',
+  'apps.filters.clearAllFilters': 'Clear all filters',
+  'apps.filters.filteredHostsInfo': '{0} of {1} hosts filterd',
   'apps.filters.customRunDate':'Run Date custom filter',
   'apps.filters.nothingToShow': 'No jobs to display',
   'apps.dagCharts.popup':'Job Charts',

ambari-web/app/styles/application.less

@@ -2509,6 +2509,11 @@ table.graphs {
       display: inline-block;
       margin:0 10px;
     }
+    .filtered-hosts-info {
+      text-align: left;
+      margin-top: 8px;
+      margin-left: 17px;
+    }
     .items-on-page {
       label {
         display:inline;
@@ -2592,11 +2597,42 @@ table.graphs {
       font-size: 14px;
       margin-left: 0;
       min-width: 790px;
-      .active a {
+      a {
+        padding: 6px 4px 6px 4px;
         text-decoration: none;
-        color: #000000;
       }
+      .category-item {
+        padding: 6px 1px 6px 1px;
+        margin-right: 3px;
+        border:1px solid transparent;
+        -webkit-border-radius: 4px;
+        border-radius: 4px;
+      }
+      .category-item:hover {
+        cursor: pointer;
+        a {
+          color: #005580;
+        }
+        border:1px solid #d3d3d3;
+      }
+      .active {
+        a {
+          color: #ffffff;
+        }
+        background-color: #666666;
+        border-color: #666666;
+        border:1px solid transparent;
+        -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
+        -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
+        box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
 
+      }
+      .category-item.active:hover {
+        border:1px solid transparent;
+        a {
+          color: #ffffff;
+        }
+      }
     }
   }
   .progress {

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

@@ -20,19 +20,21 @@
 
   <div class="box-header row">
     <div class="health-status-bar pull-left">
-      <div class="pull-left"><span {{bindAttr class="view.filtersUsed::active"}}><a {{action clearFilters target="view"}} href="#">{{t common.all}} ({{content.length}})</a></span>&nbsp;</div>
+      <div class="pull-left">
+         <span {{bindAttr class=":category-item view.filtersUsed::active"}}><a {{action clearFilters target="view"}} href="#">{{t common.all}} ({{content.length}})</a></span>
+      </div>
       {{view view.alertFilter}}
       {{#view view.statusFilter categoriesBinding="view.categories"}}
         {{#each category in view.categories}}
           {{#if category.isVisible}}
             |
-            <span {{bindAttr class="category.itemClass"}}>
-            {{#if category.alerts}}
-                <span class="label label-important">{{t hosts.host.alerts.st}}</span>
-            {{else}}
-                <span {{bindAttr class="category.healthStatusValue"}}> &nbsp;&nbsp;&nbsp; </span>
-            {{/if}}
+            <span {{bindAttr class=":category-item category.itemClass"}}>
               <a {{action selectCategory category target="view"}} href="#">
+                {{#if category.alerts}}
+                  <span class="label label-important">{{t hosts.host.alerts.st}}</span>
+                {{else}}
+                  <span {{bindAttr class="category.healthStatusValue"}}> &nbsp;&nbsp;&nbsp; </span>
+                {{/if}}
                 {{category.label}}
               </a>
             </span>
@@ -122,6 +124,9 @@
   </table>
 
   <div class="page-bar">
+    <div class="filtered-hosts-info span4">
+      <label>{{view.filteredHostsInfo}} &nbsp; <a {{action clearFilters target="view"}} href="#">{{t apps.filters.clearAllFilters}}</a></label>
+    </div>
     <div class="items-on-page">
       <label>{{t common.show}}: {{view view.rowsPerPageSelectView selectionBinding="view.displayLength"}}</label>
     </div>

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

@@ -90,6 +90,13 @@ 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
    */