Updated Branches: refs/heads/trunk 498113477 -> 4fc8133b9
AMBARI-3611. Hosts: clarify which filter is in effect (xiwang) Project: http://git-wip-us.apache.org/repos/asf/incubator-ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-ambari/commit/4fc8133b Tree: http://git-wip-us.apache.org/repos/asf/incubator-ambari/tree/4fc8133b Diff: http://git-wip-us.apache.org/repos/asf/incubator-ambari/diff/4fc8133b Branch: refs/heads/trunk Commit: 4fc8133b9d19d9e9aad672363c629f9b05caeee0 Parents: 4981134 Author: Xi Wang <[email protected]> Authored: Wed Oct 30 16:13:32 2013 -0700 Committer: Xi Wang <[email protected]> Committed: Wed Oct 30 16:13:32 2013 -0700 ---------------------------------------------------------------------- ambari-web/app/messages.js | 2 ++ ambari-web/app/styles/application.less | 40 ++++++++++++++++++++++++-- ambari-web/app/templates/main/host.hbs | 19 +++++++----- ambari-web/app/views/common/table_view.js | 7 +++++ 4 files changed, 59 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/4fc8133b/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 67678f2..1413888 100644 --- a/ambari-web/app/messages.js +++ b/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', http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/4fc8133b/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 4977601..ce55792 100644 --- a/ambari-web/app/styles/application.less +++ b/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 { http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/4fc8133b/ambari-web/app/templates/main/host.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/host.hbs b/ambari-web/app/templates/main/host.hbs index 7f6efdc..2c1da97 100644 --- a/ambari-web/app/templates/main/host.hbs +++ b/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> </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"}}> </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"}}> </span> + {{/if}} {{category.label}} </a> </span> @@ -122,6 +124,9 @@ </table> <div class="page-bar"> + <div class="filtered-hosts-info span4"> + <label>{{view.filteredHostsInfo}} <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> http://git-wip-us.apache.org/repos/asf/incubator-ambari/blob/4fc8133b/ambari-web/app/views/common/table_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/table_view.js b/ambari-web/app/views/common/table_view.js index d092980..cc21fb8 100644 --- a/ambari-web/app/views/common/table_view.js +++ b/ambari-web/app/views/common/table_view.js @@ -91,6 +91,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 */ paginationInfo: function () {
