You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by xi...@apache.org on 2014/04/01 22:42:24 UTC
git commit: AMBARI-5266. Red / green colorblind problem with service
status dashboard, etc.(xiwang)
Repository: ambari
Updated Branches:
refs/heads/trunk 04ed90db0 -> 945bb7ac1
AMBARI-5266. Red / green colorblind problem with service status dashboard, etc.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/945bb7ac
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/945bb7ac
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/945bb7ac
Branch: refs/heads/trunk
Commit: 945bb7ac12e336763e52225c06b217f473d2f941
Parents: 04ed90d
Author: Xi Wang <xi...@apache.org>
Authored: Mon Mar 31 15:47:09 2014 -0700
Committer: Xi Wang <xi...@apache.org>
Committed: Tue Apr 1 13:41:37 2014 -0700
----------------------------------------------------------------------
ambari-web/app/config.js | 4 +
ambari-web/app/data/host/categories.js | 7 +-
ambari-web/app/models/host.js | 20 ++++
ambari-web/app/models/host_component.js | 19 ++++
ambari-web/app/styles/application.less | 114 ++++++++++---------
ambari-web/app/templates/main/host.hbs | 2 +-
ambari-web/app/templates/main/host/details.hbs | 2 +-
.../main/host/details/host_component.hbs | 2 +-
.../service/info/summary/master_components.hbs | 2 +-
ambari-web/app/views/main/dashboard/service.js | 22 +++-
ambari-web/app/views/main/host.js | 2 +-
.../main/host/details/host_component_view.js | 26 +++++
12 files changed, 160 insertions(+), 62 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/config.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/config.js b/ambari-web/app/config.js
index 33b54c9..09a1472 100644
--- a/ambari-web/app/config.js
+++ b/ambari-web/app/config.js
@@ -42,6 +42,10 @@ App.singleNodeAlias = document.location.hostname;
App.minDiskSpace = 2.0; // minimum disk space required for '/' for each host before install, unit GB
App.minDiskSpaceUsrLib = 1.0; // minimum disk space for '/usr/lib' for each host before install, unit GB
App.mirroringDatasetNamePrefix = 'ambari-mirroring-'; // special prefix to be added for each Falcon feed name created with Ambari
+App.healthIconClassGreen = 'icon-ok-sign'; // bootstrap icon class for healthy/started service/host/host-component
+App.healthIconClassRed = 'icon-warning-sign'; // bootstrap icon class for master down/stopped service/host/host-component
+App.healthIconClassOrange = 'icon-minus-sign'; // bootstrap icon class for slave down/decommissioned host/host-component
+App.healthIconClassYellow = 'icon-question-sign'; // bootstrap icon class for heartbeat lost service/host/host-component
// experimental features are automatically enabled if running on brunch server
App.enableExperimental = false;
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/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 6eebbe2..1c8bcb7 100644
--- a/ambari-web/app/data/host/categories.js
+++ b/ambari-web/app/data/host/categories.js
@@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
+var App = require('app');
module.exports = [
{
value: Em.I18n.t('common.all'),
@@ -27,25 +27,28 @@ module.exports = [
{
value: Em.I18n.t('hosts.host.healthStatusCategory.green'),
isHealthStatus: true,
+ class: App.healthIconClassGreen,
healthStatusValue: 'health-status-LIVE',
observes: 'view.content.@each.healthClass'
},
{
value: Em.I18n.t('hosts.host.healthStatusCategory.red'),
isHealthStatus: true,
+ class: App.healthIconClassRed,
healthStatusValue: 'health-status-DEAD-RED',
observes: 'view.content.@each.healthClass'
},
{
value: Em.I18n.t('hosts.host.healthStatusCategory.orange'),
isHealthStatus: true,
+ class: App.healthIconClassOrange,
healthStatusValue: 'health-status-DEAD-ORANGE',
observes: 'view.content.@each.healthClass'
},
{
value: Em.I18n.t('hosts.host.healthStatusCategory.yellow'),
isHealthStatus: true,
- class: 'icon-question-sign',
+ class: App.healthIconClassYellow,
healthStatusValue: 'health-status-DEAD-YELLOW',
observes: 'view.content.@each.healthClass'
},
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/models/host.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/host.js b/ambari-web/app/models/host.js
index 947bb89..4018074 100644
--- a/ambari-web/app/models/host.js
+++ b/ambari-web/app/models/host.js
@@ -213,6 +213,26 @@ App.Host = DS.Model.extend({
return statusMap[this.get('healthStatus')] || 'health-status-DEAD-YELLOW';
}.property('healthStatus'),
+ healthIconClass: function () {
+ switch (this.get('healthClass')) {
+ case 'health-status-LIVE':
+ return App.healthIconClassGreen;
+ break;
+ case 'health-status-DEAD-RED':
+ return App.healthIconClassRed;
+ break;
+ case 'health-status-DEAD-YELLOW':
+ return App.healthIconClassYellow;
+ break;
+ case 'health-status-DEAD-ORANGE':
+ return App.healthIconClassOrange;
+ break;
+ default:
+ return "";
+ break;
+ }
+ }.property('healthClass'),
+
/**
* Tooltip for host indicator
* Contains affected host components names (based on <code>healthClass</code>)
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/models/host_component.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/models/host_component.js b/ambari-web/app/models/host_component.js
index 9883a4c..9e5df85 100644
--- a/ambari-web/app/models/host_component.js
+++ b/ambari-web/app/models/host_component.js
@@ -170,6 +170,25 @@ App.HostComponent = DS.Model.extend({
return this.get('isActive') ? this.get('workStatus') : 'icon-medkit';
}.property('workStatus','isActive'),
+ statusIconClass: function () {
+ switch (this.get('statusClass')) {
+ case 'STARTED':
+ case 'STARTING':
+ return App.healthIconClassGreen;
+ break;
+ case 'INSTALLED':
+ case 'STOPPING':
+ return App.healthIconClassRed;
+ break;
+ case 'UNKNOWN':
+ return App.healthIconClassYellow;
+ break;
+ default:
+ return "";
+ break;
+ }
+ }.property('statusClass'),
+
componentTextStatus: function () {
return App.HostComponentStatus.getTextStatus(this.get("workStatus"));
}.property('workStatus','isDecommissioning')
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index b6a3d3f..6eafc5d 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -236,6 +236,16 @@ h1 {
.show {
visibility: visible;
}
+/************************************************************************
+* Health status(service/host/host component health)icon colors
+***********************************************************************/
+@health-status-red: red;
+@health-status-green: #5AB400;
+@health-status-yellow: #FFD13D;
+@health-status-orange: #FF8E00;
+/************************************************************************
+* Health status(service/host/host component health)icon colors ends
+***********************************************************************/
/***************
* Ambari wide icon colors
@@ -1721,29 +1731,28 @@ width:100%;
}
.tab-marker-position {
- background-position: 6px 5px;
- background-repeat: no-repeat;
list-style: none;
- float: left;
min-height: 20px;
min-width: 20px;
- margin-left: 0;
+ margin-left: 6px;
+ float: none;
+ display: inline;
}
.health-status-LIVE, .health-status-STARTING {
.tab-marker-position;
- background-image: @status-live-marker;
+ color: @health-status-green;
}
.health-status-DEAD-RED, .health-status-STOPPING {
.tab-marker-position;
- background-image: @status-dead-red-marker;
+ color: @health-status-red;
}
.health-status-DEAD-ORANGE {
.tab-marker-position;
- background-image: @status-dead-orange-marker;
+ color: @health-status-orange;
}
.health-status-DEAD-YELLOW {
.tab-marker-position;
- background-image: @status-dead-yellow-marker;
+ color: @health-status-yellow;
}
dt {
text-align: left;
@@ -1836,18 +1845,20 @@ width:100%;
height: 20px;
width: 20px;
margin-left: 0;
+ display: inline !important;
+ float: none !important;
}
.STARTING, .STARTED {
.tab-marker-position;
- background-image: @status-live-marker;
+ color: @health-status-green;
}
.STOPPING, .INSTALLED {
.tab-marker-position;
- background-image: @status-dead-red-marker;
+ color: @health-status-red;
}
.UNKNOWN {
.tab-marker-position;
- background-image: @status-dead-yellow-marker;
+ color: @health-status-yellow;
}
.summary-view-host{
@@ -2174,28 +2185,24 @@ width:100%;
.services-menu {
.nav-list {
.tab-marker-position {
- background-position: 6px 5px;
- background-repeat: no-repeat;
list-style: none;
- float: left;
height: 20px;
width: 20px;
- margin-left: 0; // padding-left: 30px;
- // padding-right: 30px;
- // background-position: 12px 9px;
- // background-repeat: no-repeat;
+ margin-left: 6px;
+ display: inline;
+ float: none;
}
.health-status-LIVE, .health-status-STARTING {
.tab-marker-position;
- background-image: @status-live-marker;
+ color: @health-status-green;
}
.health-status-DEAD-RED, .health-status-STOPPING {
.tab-marker-position;
- background-image: @status-dead-red-marker;
+ color: @health-status-red;
}
.health-status-DEAD-YELLOW {
.tab-marker-position;
- background-image: @status-dead-yellow-marker;
+ color: @health-status-yellow;
}
li {
line-height: 24px;
@@ -2814,10 +2821,6 @@ table.graphs {
float: left;
padding-right: 10px;
}
- .icon-question-sign {
- color:#FFD13D;
- }
-
#hosts-table {
margin-top: 10px;
@@ -2927,35 +2930,38 @@ table.graphs {
background-repeat: no-repeat;
height: 20px;
width: 13px;
- display: block;
- float: left;
- margin-right:4px;
- }
- .health-status-HEALTHY{
- background-image: @status-live-marker;
- .status-dot-position;
+ display: inline !important;
+ float: none !important;
}
+ .health-status-HEALTHY,
.health-status-LIVE {
- background-image: @status-live-marker;
.status-dot-position;
+ color: @health-status-green;
+ margin-right: 1px;
+ margin-left: 1px;
}
.health-status-DEAD-RED {
- background-image: @status-dead-red-marker;
.status-dot-position;
+ color: @health-status-red;
}
.health-status-DEAD-ORANGE {
- background-image: @status-dead-orange-marker;
.status-dot-position;
+ color: @health-status-orange;
+ margin-right: 1px;
+ margin-left: 1px;
}
.health-status-DEAD-YELLOW {
- background-image: @status-dead-yellow-marker;
.status-dot-position;
- &.icon-question-sign {
- background-image: none !important;
- display: inline !important;
- float: none !important;
- }
+ color: @health-status-yellow;
+ margin-right: 1px;
+ margin-left: 1px;
+ }
+ .icon-exclamation-sign,
+ .icon-refresh {
+ margin-right: 1px;
+ margin-left: 1px;
}
+
.passive-state {
color: #000;
}
@@ -2993,10 +2999,6 @@ table.graphs {
font-size: 0.9em;
margin-left: 0;
color: #b4b4b4;
- .health-status {
- margin-left: -1px;
- margin-right: 3px;
- }
a {
text-decoration: none;
}
@@ -3390,6 +3392,8 @@ table.graphs {
display: inline-block;
height: 13px;
width: 13px;
+ display: inline !important;
+ float: none !important;
}
.components-health.icon-arrow-up{
@@ -3397,28 +3401,28 @@ table.graphs {
}
.health-status-started, .health-status-starting {
- background-image: @status-live-marker;
.marker;
+ color: @health-status-green;
}
.health-status-installed, .health-status-stopping {
- background-image: @status-dead-red-marker;
.marker;
+ color: @health-status-red;
}
.health-status-unknown {
- background-image: @status-dead-yellow-marker;
.marker;
+ color: @health-status-yellow;
}
.health-status-LIVE {
- background-image: @status-live-marker;
.marker;
+ color: @health-status-green;
}
.health-status-DEAD-RED {
- background-image: @status-dead-red-marker;
.marker;
+ color: @health-status-red;
}
.health-status-color-blue {
@@ -3430,13 +3434,13 @@ table.graphs {
}
.health-status-DEAD-ORANGE {
- background-image: @status-dead-orange-marker;
.marker;
+ color: @health-status-orange;
}
.health-status-DEAD-YELLOW {
- background-image: @status-dead-yellow-marker;
.marker;
+ color: @health-status-yellow;
}
.back {
@@ -4231,14 +4235,16 @@ ul.filter {
background-repeat: no-repeat;
height: 20px;
width: 13px;
+ display: inline;
+ float: none;
}
.health-status-LIVE {
- background-image: @status-live-marker;
.status-dot-position;
+ color: @health-status-green;
}
.health-status-DEAD-RED {
- background-image: @status-dead-red-marker;
.status-dot-position;
+ color: @health-status-red;
}
.dataset-selected {
background-color: #E6F1F6;
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/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 d7bcc5d..36c5eae 100644
--- a/ambari-web/app/templates/main/host.hbs
+++ b/ambari-web/app/templates/main/host.hbs
@@ -96,7 +96,7 @@
<td class="first">{{view Ember.Checkbox checkedBinding="host.selected"}}</td>
<td class="health">
- <span rel="HealthTooltip" {{bindAttr class="host.healthClass"}} {{bindAttr data-original-title="host.healthToolTip" }}></span>
+ <span rel="HealthTooltip" {{bindAttr class="host.healthClass host.healthIconClass"}} {{bindAttr data-original-title="host.healthToolTip" }}></span>
</td>
<td class="name">
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/templates/main/host/details.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/details.hbs b/ambari-web/app/templates/main/host/details.hbs
index 0c40a90..c964348 100644
--- a/ambari-web/app/templates/main/host/details.hbs
+++ b/ambari-web/app/templates/main/host/details.hbs
@@ -18,7 +18,7 @@
<div id="host-details">
<div class="status-info">
- <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
+ <span rel="HealthTooltip" {{bindAttr class="view.content.healthClass view.content.healthIconClass"}} {{bindAttr data-original-title="view.content.healthToolTip" }}></span><span class='host-title'>{{unbound view.content.publicHostName}}</span>
{{#if view.content.criticalAlertsCount}}
<span class="label label-important alerts-count" {{action "showAlertsPopup" content target="App.router.mainHostController"}}>{{view.content.criticalAlertsCount}}</span>
{{else}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/templates/main/host/details/host_component.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/details/host_component.hbs b/ambari-web/app/templates/main/host/details/host_component.hbs
index ee28fde..f9d8c37 100644
--- a/ambari-web/app/templates/main/host/details/host_component.hbs
+++ b/ambari-web/app/templates/main/host/details/host_component.hbs
@@ -24,7 +24,7 @@
</a>
{{/if}}
{{else}}
- <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass :components-health" data-original-title="view.componentTextStatus"}}></span>
+ <span rel='componentHealthTooltip' {{bindAttr class="view.statusClass view.statusIconClass :components-health" data-original-title="view.componentTextStatus"}}></span>
{{/if}}
{{#if component.displayNameAdvanced}}
{{component.displayNameAdvanced}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/templates/main/service/info/summary/master_components.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/service/info/summary/master_components.hbs b/ambari-web/app/templates/main/service/info/summary/master_components.hbs
index 44d901b..dc9a4ee 100644
--- a/ambari-web/app/templates/main/service/info/summary/master_components.hbs
+++ b/ambari-web/app/templates/main/service/info/summary/master_components.hbs
@@ -28,7 +28,7 @@
</a>
</td>
<td>
- <span rel='healthTooltip' {{bindAttr class="masterComp.statusClass" data-original-title="masterComp.passiveTooltip"}}></span>
+ <span rel='healthTooltip' {{bindAttr class="masterComp.statusClass masterComp.statusIconClass" data-original-title="masterComp.passiveTooltip"}}></span>
{{masterComp.componentTextStatus}}
</td>
</tr>
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/views/main/dashboard/service.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/dashboard/service.js b/ambari-web/app/views/main/dashboard/service.js
index 943272a..92a0054 100644
--- a/ambari-web/app/views/main/dashboard/service.js
+++ b/ambari-web/app/views/main/dashboard/service.js
@@ -22,7 +22,7 @@ var uiEffects = require('utils/ui_effects');
require('models/alert');
App.MainDashboardServiceHealthView = Em.View.extend({
- classNameBindings: ["healthStatus"],
+ classNameBindings: ["healthStatus", "healthStatusClass"],
//template: Em.Handlebars.compile(""),
blink: false,
tagName: 'span',
@@ -91,6 +91,26 @@ App.MainDashboardServiceHealthView = Em.View.extend({
return 'health-status-' + status;
}.property('service.healthStatus','service.passiveState','service.isClientsOnly'),
+ healthStatusClass: function () {
+ switch (this.get('healthStatus')) {
+ case 'health-status-LIVE':
+ return App.healthIconClassGreen;
+ break;
+ case 'health-status-DEAD-RED':
+ return App.healthIconClassRed;
+ break;
+ case 'health-status-DEAD-YELLOW':
+ return App.healthIconClassYellow;
+ break;
+ case 'health-status-DEAD-ORANGE':
+ return App.healthIconClassOrange;
+ break;
+ default:
+ return "";
+ break;
+ }
+ }.property('healthStatus'),
+
didInsertElement: function () {
this.updateToolTip();
App.tooltip($("[rel='HealthTooltip']"));
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/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 f9d0f0f..3c0a009 100644
--- a/ambari-web/app/views/main/host.js
+++ b/ambari-web/app/views/main/host.js
@@ -444,7 +444,7 @@ App.MainHostView = App.TableView.extend({
this.get('categories').setEach('isActive', false);
var selected = this.get('categories').findProperty('healthStatusValue', this.get('value'));
selected.set('isActive', true);
- this.set('class', selected.get('class') || this.get('value'));
+ this.set('class', selected.get('class') + ' ' + this.get('value'));
}.observes('value'),
showClearFilter: function(){
http://git-wip-us.apache.org/repos/asf/ambari/blob/945bb7ac/ambari-web/app/views/main/host/details/host_component_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/host/details/host_component_view.js b/ambari-web/app/views/main/host/details/host_component_view.js
index a9e7f86..0d246e8 100644
--- a/ambari-web/app/views/main/host/details/host_component_view.js
+++ b/ambari-web/app/views/main/host/details/host_component_view.js
@@ -84,6 +84,32 @@ App.HostComponentView = Em.View.extend({
return 'health-status-' + App.HostComponentStatus.getKeyName(this.get('workStatus'));
}.property('workStatus'),
+ /**
+ * CSS-icon-class for host component status
+ * @type {String}
+ */
+ statusIconClass: function () {
+ switch (this.get('statusClass')) {
+ case 'health-status-started':
+ case 'health-status-starting':
+ return App.healthIconClassGreen;
+ break;
+ case 'health-status-installed':
+ case 'health-status-stopping':
+ return App.healthIconClassRed;
+ break;
+ case 'health-status-unknown':
+ return App.healthIconClassYellow;
+ break;
+ case 'health-status-DEAD-ORANGE':
+ return App.healthIconClassOrange;
+ break;
+ default:
+ return "";
+ break;
+ }
+ }.property('statusClass'),
+
/**
* CSS-class for disabling drop-down menu with list of host component actions