Updated Branches: refs/heads/trunk 7790fbd5b -> 7598e25ac
AMBARI-4342. display filters on hosts page as dropdown list. (ababiichuk via onechiporenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/7598e25a Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/7598e25a Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/7598e25a Branch: refs/heads/trunk Commit: 7598e25ac48b34333aca57faad34c489f725988b Parents: 7790fbd Author: Oleg Nechiporenko <[email protected]> Authored: Thu Jan 23 12:37:31 2014 +0200 Committer: Oleg Nechiporenko <[email protected]> Committed: Thu Jan 23 12:37:31 2014 +0200 ---------------------------------------------------------------------- ambari-web/app/data/host/categories.js | 6 ++-- ambari-web/app/styles/application.less | 23 ++++++++------ ambari-web/app/templates/main/host.hbs | 49 +++++++++++++++-------------- ambari-web/app/views/main/host.js | 22 ++++++++----- 4 files changed, 57 insertions(+), 43 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/7598e25a/ambari-web/app/data/host/categories.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/data/host/categories.js b/ambari-web/app/data/host/categories.js index 857304d..94a0622 100644 --- a/ambari-web/app/data/host/categories.js +++ b/ambari-web/app/data/host/categories.js @@ -45,17 +45,17 @@ module.exports = [ { value: Em.I18n.t('hosts.host.healthStatusCategory.yellow'), isHealthStatus: true, + class: 'icon-question-sign', healthStatusValue: 'health-status-DEAD-YELLOW', observes: '[email protected]' }, { value: Em.I18n.t('hosts.host.alerts.label'), hostProperty: 'criticalAlertsCount', - class: 'label label-important alerts-status', + class: 'icon-exclamation-sign', isHealthStatus: false, healthStatusValue: 'health-status-WITH-ALERTS', column: 7, - separator: true, type: 'number', filterValue: '>0', observes: '[email protected]' @@ -95,4 +95,4 @@ module.exports = [ filterValue: '>0', observes: '[email protected]' } -]; \ No newline at end of file +]; http://git-wip-us.apache.org/repos/asf/ambari/blob/7598e25a/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index 330e3d9..b432b19 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -233,6 +233,10 @@ h1 { color: #999; } +.icon-exclamation-sign { + color:#B94A48; +} + .tooltip { z-index: 1050; } @@ -2670,11 +2674,17 @@ table.graphs { } } } + .icon-question-sign { + color:#FFD13D; + } .status-dot-position { background-position: center; background-repeat: no-repeat; height: 20px; width: 13px; + display: block; + float: left; + margin-right:4px; } .health-status-HEALTHY{ background-image: @status-live-marker; @@ -2693,8 +2703,6 @@ table.graphs { .status-dot-position; } .health-status-DEAD-YELLOW { - background-image: @status-dead-yellow-marker; - .status-dot-position; } .maintenance { color: #000; @@ -2729,7 +2737,8 @@ table.graphs { .health-status-bar { font-size: 0.9em; margin-left: 0; - margin-bottom: 15px; + margin-bottom: 10px; + margin-top: -7px; min-width: 790px; color: #b4b4b4; .health-status { @@ -2737,23 +2746,19 @@ table.graphs { margin-right: 3px; } a { - padding: 6px 4px 6px 4px; + padding: 5px 4px 5px 4px; text-decoration: none; } .category-item { - padding: 3px 0px; margin-right: 3px; border:1px solid transparent; -webkit-border-radius: 4px; border-radius: 4px; } - .category-item .label-important { - padding: 0px 2px; - } .category-item:hover { cursor: pointer; a { - color: #005580; + color: #ffffff; } border:1px solid #d3d3d3; } http://git-wip-us.apache.org/repos/asf/ambari/blob/7598e25a/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 37ed6d9..65c7707 100644 --- a/ambari-web/app/templates/main/host.hbs +++ b/ambari-web/app/templates/main/host.hbs @@ -20,30 +20,33 @@ <div class="box-header row"> <div class="health-status-bar pull-left"> - <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}} - {{#if category.separator}} - <br /><br /> - {{else}} - | - {{/if}} - <span {{bindAttr class="aaa :category-item category.itemClass"}}> - <a {{action selectCategory category target="view"}} href="#"> - {{#if category.isHealthStatus}} - <span {{bindAttr class=":health-status category.healthStatusValue"}}> </span> - {{else}} - <span {{bindAttr class="category.class"}}></span> - {{/if}} - {{category.label}} - </a> - </span> - {{/if}} - {{/each}} + <div class="btn-group display-inline-block"> + <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> + <span {{bindAttr class="view.class"}}></span> + {{view.comboBoxLabel}} + <span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li {{bindAttr class=":category-item view.filtersUsed::active"}}> + <a {{action clearFilter target="view"}} href="#">{{t common.all}} ({{content.length}})</a> + </li> + {{#each category in view.categories}} + {{#if category.isVisible}} + <li {{bindAttr class="aaa :category-item category.itemClass"}}> + <a {{action selectCategory category target="view"}} href="#"> + {{#if category.isHealthStatus}} + <span {{bindAttr class=":health-status category.healthStatusValue category.class"}}></span> + {{else}} + <span {{bindAttr class="category.class"}}></span> + {{/if}} + {{category.label}} + </a> + </li> + {{/if}} + {{/each}} + </ul> + </div> {{/view}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/7598e25a/ambari-web/app/views/main/host.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/host.js b/ambari-web/app/views/main/host.js index 8057a4f..5089f9a 100644 --- a/ambari-web/app/views/main/host.js +++ b/ambari-web/app/views/main/host.js @@ -315,12 +315,6 @@ App.MainHostView = App.TableView.extend({ */ filterValue: null, /** - * Should new line be inserted after this category - * @type {Boolean} - */ - separator: false, - - /** * <code>App.Host</code> property that should be used to calculate <code>hostsCount</code> (used if <code>isHealthStatus</code> is false) * @type {String} */ @@ -413,12 +407,23 @@ App.MainHostView = App.TableView.extend({ column: 0, categories: [], value: null, + class: "", + comboBoxLabel: function(){ + var selected = this.get('categories').findProperty('isActive',true); + if (!this.get('value') || !selected) { + return "%@ (%@)".fmt(Em.I18n.t('common.all'), this.get('parentView.content.length')); + } else { + return "%@ (%@)".fmt(selected.get('value'), selected.get('hostsCount')) + } + }.property('value'), /** * switch active category label */ onCategoryChange: function() { this.get('categories').setEach('isActive', false); - this.get('categories').findProperty('healthStatusValue', this.get('value')).set('isActive', true); + var selected = this.get('categories').findProperty('healthStatusValue', this.get('value')); + selected.set('isActive', true); + this.set('class', selected.get('class') || this.get('value')); }.observes('value'), showClearFilter: function(){ @@ -455,6 +460,7 @@ App.MainHostView = App.TableView.extend({ clearFilter: function() { this.get('categories').setEach('isActive', false); this.set('value', ''); + this.set('class', ''); this.showClearFilter(); } }), @@ -727,4 +733,4 @@ App.MainHostView = App.TableView.extend({ associations[10] = 'selected'; return associations; }.property() -}); \ No newline at end of file +});
