You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by on...@apache.org on 2014/01/23 11:37:43 UTC
git commit: AMBARI-4342. display filters on hosts page as dropdown
list. (ababiichuk via onechiporenko)
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 <on...@apache.org>
Authored: Thu Jan 23 12:37:31 2014 +0200
Committer: Oleg Nechiporenko <on...@apache.org>
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: 'view.content.@each.healthClass'
},
{
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: 'view.content.@each.criticalAlertsCount'
@@ -95,4 +95,4 @@ module.exports = [
filterValue: '>0',
observes: 'view.content.@each.componentsInMaintenanceCount'
}
-];
\ 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
+});