AMBARI-3790. Cleanup component filtering dialog control. (Jeff Sposetti via yusaku)
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 3cc8bdc..3f4af4b 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1625,6 +1625,7 @@
'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',
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index db514f3..29b6e1b 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -2541,6 +2541,9 @@
padding-left: 6px;
text-align: left;
width: 100px;
+ .icon-filter {
+ color: #999999;
+ }
}
}
thead {
@@ -2757,22 +2760,64 @@
}
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;
}
diff --git a/ambari-web/app/templates/main/host/component_filter.hbs b/ambari-web/app/templates/main/host/component_filter.hbs
index 8a1ea49..ca71b79 100644
--- a/ambari-web/app/templates/main/host/component_filter.hbs
+++ b/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>
\ No newline at end of file
+ </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>
