AMBARI-3790. Cleanup component filtering dialog control. (Jeff Sposetti via yusaku)

ambari-web/app/messages.js

@@ -1625,6 +1625,7 @@ Em.I18n.translations = {
   '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>',
   'apps.dagCharts.popup':'Job Charts',
   'apps.dagCharts.popup.job': 'Job',
   'apps.dagCharts.popup.dag':'Job Timeline',

ambari-web/app/styles/application.less

@@ -2541,6 +2541,9 @@ table.graphs {
         padding-left: 6px;
         text-align: left;
         width: 100px;
+        .icon-filter {
+          color: #999999;
+        }
       }
     }
 	thead {
@@ -2757,22 +2760,64 @@ table.graphs {
     }
     ul.filter-components {
       padding: 5px 0;
+      background: #777777;
+      color: #ffffff;
+      font-weight: normal;
+      font-size: 12px;
+      label {
+        font-size: 12px;
+      }
       li {
         display: block;
         padding: 3px 0 3px 5px;
         line-height: 20px;
-
         label.checkbox {
           padding-left: 3px;
         }
-
         input[type="checkbox"] {
           margin: 4px 4px 2px 2px;
         }
       }
+      li#title-bar {
+        text-align: left;
+        border-bottom: 1px solid #e4e4e4;
+        a.close {
+          background: #777777;
+          display: inline;
+          color: #ffffff;
+          padding-left: 35px;
+          padding-right: 12px;
+          text-shadow: 0 1px 0 #ffffff;
+          float: none;
+          font-size: 10px;
+          opacity: 0.6;
+        }
+        a.close:hover {
+          background: #777777;
+          opacity: 1.0;
+        }
+      }
+      li#selector-bar {
+        text-align: left;
+        border-bottom: 1px solid #e4e4e4;
+        font-size: 6px;
+      }
+      li#list-area {
+        font-weight: normal;
+        text-align: left;
+      }
+      li#button-bar {
+        text-align: center;
+        button {
+          font-size: 12px;
+        }
+      }
+      ul {
+        margin-left: 10px;
+      }
       &>li {
         &>ul {
-          height: 250px;
+          height: 150px;
           margin-left: 0;
           overflow-y: scroll;
         }

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

@@ -16,56 +16,58 @@
 * limitations under the License.
 }}
 
-    <button class="btn single-btn-group filter-btn" {{action "clickFilterButton" target="view"}}><i class="icon-filter"></i> {{t apps.filters.filter}}</button>
+<button class="btn single-btn-group filter-btn" {{action "clickFilterButton" target="view"}}>{{t apps.filters.filter}} <i class="icon-filter"></i></button>
     <ul class="dropdown-menu filter-components">
-        <li>
+      <li id="title-bar">{{t apps.filters.filterComponents}}
+        <a class="close" {{action "closeFilter" target="view"}}>X</a>
+      </li>
+      <li id="list-area">
+        <ul>
+          <li>
+            <label class="checkbox">
+            {{view Ember.Checkbox checkedBinding="view.masterComponentsChecked"}} {{t host.host.componentFilter.master}}:
+            </label>
             <ul>
-                <li>
-                    <label class="checkbox">
-                        {{view Ember.Checkbox checkedBinding="view.masterComponentsChecked"}} {{t host.host.componentFilter.master}}:
-                    </label>
-                    <ul>
-                        {{#each component in masterComponents}}
-                            <li>
-                                <label class="checkbox">
-                                    {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
-                                </label>
-                            </li>
-                        {{/each}}
-                    </ul>
-                </li>
-                <li>
-                    <label class="checkbox">
-                        {{view Ember.Checkbox checkedBinding="view.slaveComponentsChecked"}} {{t host.host.componentFilter.slave}}:
-                    </label>
-                    <ul>
-                        {{#each component in slaveComponents}}
-                            <li>
-                                <label class="checkbox">
-                                    {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
-                                </label>
-                            </li>
-                        {{/each}}
-                    </ul>
-                </li>
-                <li>
-                    <label class="checkbox">
-                        {{view Ember.Checkbox checkedBinding="view.clientComponentsChecked"}} {{t host.host.componentFilter.client}}:
-                    </label>
-                    <ul>
-                        {{#each component in clientComponents}}
-                            <li>
-                                <label class="checkbox">
-                                    {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
-                                </label>
-                            </li>
-                        {{/each}}
-                    </ul>
-                </li>
+            {{#each component in masterComponents}}
+              <li>
+                <label class="checkbox">
+                {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
+                </label>
+              </li>
+            {{/each}}
             </ul>
-        </li>
-        <li>
-            <button class="btn" {{action "closeFilter" target="view"}}>{{t common.cancel}}</button>
-            <button class="btn btn-primary" {{action "applyFilter" target="view"}}>{{t common.apply}}</button>
-        </li>
-    </ul>
+          </li>
+          <li>
+            <label class="checkbox">
+            {{view Ember.Checkbox checkedBinding="view.slaveComponentsChecked"}} {{t host.host.componentFilter.slave}}:
+            </label>
+            <ul>
+            {{#each component in slaveComponents}}
+              <li>
+                <label class="checkbox">
+                {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
+                </label>
+              </li>
+            {{/each}}
+            </ul>
+          </li>
+          <li>
+            <label class="checkbox">
+            {{view Ember.Checkbox checkedBinding="view.clientComponentsChecked"}} {{t host.host.componentFilter.client}}:
+            </label>
+            <ul>
+            {{#each component in clientComponents}}
+              <li>
+              <label class="checkbox">
+              {{view Ember.Checkbox checkedBinding="component.checkedForHostFilter" }} {{unbound component.displayName}}
+              </label>
+              </li>
+            {{/each}}
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li id="button-bar">
+        <button class="btn btn-inverse" {{action "applyFilter" target="view"}}>{{t common.apply}}</button>
+      </li>
+    </ul>