You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by at...@apache.org on 2018/04/25 12:22:53 UTC
[ambari] branch trunk updated: AMBARI-23668 Heatmaps page style
changes (atkach)
This is an automated email from the ASF dual-hosted git repository.
atkach pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push:
new 33e536d AMBARI-23668 Heatmaps page style changes (atkach)
33e536d is described below
commit 33e536d0763d37656ab99ff81b2709df86572c1a
Author: Andrii Tkach <at...@apache.org>
AuthorDate: Tue Apr 24 14:38:57 2018 +0300
AMBARI-23668 Heatmaps page style changes (atkach)
---
.../main/charts/heatmap_metrics/heatmap_metric.js | 44 ++++++----------------
ambari-web/app/templates/main/charts/heatmap.hbs | 38 ++++++++++---------
.../main/charts/heatmap/heatmap_host_detail.hbs | 16 +++-----
.../app/views/common/widget/heatmap_widget_view.js | 2 +-
.../app/views/main/charts/heatmap/heatmap_host.js | 18 ++++-----
.../charts/heatmap_metrics/heatmap_metric_test.js | 20 +++++-----
.../views/main/charts/heatmap/heatmap_host_test.js | 22 +++++++++--
7 files changed, 77 insertions(+), 83 deletions(-)
diff --git a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js
index 4ff1d59..499920c 100644
--- a/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js
+++ b/ambari-web/app/controllers/main/charts/heatmap_metrics/heatmap_metric.js
@@ -51,31 +51,11 @@ App.MainChartHeatmapMetric = Em.Object.extend({
* @type {Array}
*/
slotColors: [
- { // Green
- r: 0x00,
- g: 0xcc,
- b: 0x00
- },
- { //Light green
- r: 0x9f,
- g: 0xee,
- b: 0x00
- },
- { // Yellow
- r: 0xff,
- g: 0xff,
- b: 0x00
- },
- { // Orange
- r: 0xff,
- g: 0xc0,
- b: 0x00
- },
- { // Red
- r: 0xff,
- g: 0x00,
- b: 0x00
- }
+ '#1EB475',
+ '#1FB418',
+ '#E9E23F',
+ '#E9A840',
+ '#EF6162'
],
/**
@@ -140,13 +120,13 @@ App.MainChartHeatmapMetric = Em.Object.extend({
notAvailable: true,
index: defs.length,
label: Em.I18n.t('charts.heatmap.label.notAvailable'),
- cssStyle: "background-color: dimgray"
+ cssStyle: "background-color: #666"
}));
defs.push(Em.Object.create({
notApplicable: true,
index: defs.length,
label: Em.I18n.t('charts.heatmap.label.notApplicable'),
- cssStyle: "background-color:rgb(200, 200, 200)"
+ cssStyle: "background-color:#ccc"
}));
return defs;
}.property('minimumValue', 'maximumValue', 'numberOfSlots'),
@@ -171,7 +151,7 @@ App.MainChartHeatmapMetric = Em.Object.extend({
from: from,
to: to,
label: fromLabel + " - " + toLabel,
- cssStyle: "background-color:rgb(" + slotColor.r + "," + slotColor.g + "," + slotColor.b + ")"
+ cssStyle: "background-color:" + slotColor
});
},
@@ -180,15 +160,15 @@ App.MainChartHeatmapMetric = Em.Object.extend({
* @return {String}
*/
getHatchStyle: function () {
- var hatchStyle = "background-color:rgb(135, 206, 250)";
+ var hatchStyle = "background-color:#666";
if (jQuery.browser.webkit) {
- hatchStyle = "background-image:-webkit-repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)";
+ hatchStyle = "background-image:-webkit-repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)";
} else if (jQuery.browser.mozilla) {
- hatchStyle = "background-image:repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)";
+ hatchStyle = "background-image:repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)";
} else if (jQuery.browser.msie && jQuery.browser.version) {
var majorVersion = parseInt(jQuery.browser.version.split('.')[0]);
if (majorVersion > 9) {
- hatchStyle = "background-image:repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)";
+ hatchStyle = "background-image:repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)";
}
}
return hatchStyle;
diff --git a/ambari-web/app/templates/main/charts/heatmap.hbs b/ambari-web/app/templates/main/charts/heatmap.hbs
index 9fedd37..ea11eaf 100644
--- a/ambari-web/app/templates/main/charts/heatmap.hbs
+++ b/ambari-web/app/templates/main/charts/heatmap.hbs
@@ -20,26 +20,30 @@
{{#if isLoaded}}
<div class="row">
<div class="col-md-3 legend-column background-text">
+ <div class="panel panel-default">
+ <div class="panel-body">
+ {{view view.dropdownView}}
- {{view view.dropdownView}}
+ {{#if controller.selectedMetric}}
- {{#if controller.selectedMetric}}
- <table class="legend">
- {{#each slot in controller.selectedMetric.slotDefinitions}}
- <tr>
- <td>
- <div class="tile" {{bindAttr style="slot.cssStyle"}}></div>
- </td>
- <td>{{slot.label}}</td>
- </tr>
- {{/each}}
- </table>
- {{t common.maximum}}:
- <div id="inputMaximum" class="control-group input-group">
- {{view Ember.TextField type="text" maxlength="8" valueBinding="controller.inputMaximum" class="form-control"}}
- <span class="input-group-addon">{{controller.selectedMetric.units}}</span>
+ <table class="legend">
+ {{#each slot in controller.selectedMetric.slotDefinitions}}
+ <tr>
+ <td>
+ <div class="tile" {{bindAttr style="slot.cssStyle"}}></div>
+ </td>
+ <td>{{slot.label}}</td>
+ </tr>
+ {{/each}}
+ </table>
+ {{t common.maximum}}:
+ <div id="inputMaximum" class="control-group input-group">
+ {{view Ember.TextField type="text" maxlength="8" valueBinding="controller.inputMaximum" class="form-control"}}
+ <span class="input-group-addon">{{controller.selectedMetric.units}}</span>
+ </div>
+ {{/if}}
</div>
- {{/if}}
+ </div>
</div>
{{#if controller.activeWidget}}
<div class="active-widget col-md-9" {{bindAttr id="activeWidget.id"}}>
diff --git a/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs b/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
index e158b64..82d02b1 100644
--- a/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
+++ b/ambari-web/app/templates/main/charts/heatmap/heatmap_host_detail.hbs
@@ -23,10 +23,12 @@
</tr>
</thead>
<tbody>
- <tr>
- <td>{{view.details.metricName}}</td>
- <td>{{view.details.metricValue}}</td>
- </tr>
+ {{#if view.details.metricName}}
+ <tr>
+ <td>{{view.details.metricName}}</td>
+ <td>{{view.details.metricValue}}</td>
+ </tr>
+ {{/if}}
<tr>
<td>{{t common.os}}</td>
<td>{{view.details.osType}}</td>
@@ -39,12 +41,6 @@
<td>{{t common.rack}}</td>
<td>{{view.details.rack}}</td>
</tr>
- {{#if view.details.metricName}}
- <tr>
- <td>{{view.details.metricName}}</td>
- <td>{{view.details.metricValue}}</td>
- </tr>
- {{/if}}
{{#if view.details.diskUsage}}
<tr>
<td>{{t common.disk}}</td>
diff --git a/ambari-web/app/views/common/widget/heatmap_widget_view.js b/ambari-web/app/views/common/widget/heatmap_widget_view.js
index cc2a7c4..9fa1e4a 100644
--- a/ambari-web/app/views/common/widget/heatmap_widget_view.js
+++ b/ambari-web/app/views/common/widget/heatmap_widget_view.js
@@ -151,7 +151,7 @@ App.HeatmapWidgetView = Em.View.extend(App.WidgetMixin, {
if (validExpression && this.get('MATH_EXPRESSION_REGEX').test(beforeCompute)) {
hostToValueMap[_hostName] = Number(window.eval(beforeCompute)).toString();
- } else if (beforeCompute === 'undefined') {
+ } else if (beforeCompute.contains('undefined')) {
// Data not available
hostToValueMap[_hostName] = undefined;
} else {
diff --git a/ambari-web/app/views/main/charts/heatmap/heatmap_host.js b/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
index 78c1970..9db8300 100644
--- a/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
+++ b/ambari-web/app/views/main/charts/heatmap/heatmap_host.js
@@ -153,20 +153,18 @@ App.MainChartsHeatmapHostView = Em.View.extend({
*/
setMetric: function (view, host) {
var selectedMetric = this.get('controller.selectedMetric');
+ const hostToSlotMap = this.get('controller.hostToSlotMap');
if (selectedMetric) {
- var metricName = selectedMetric.get('name');
- var h2vMap = selectedMetric.get('hostToValueMap');
+ const slotDefinitions = selectedMetric.get('slotDefinitions');
+ const metricName = selectedMetric.get('name');
+ const h2vMap = selectedMetric.get('hostToValueMap');
if (h2vMap && metricName) {
- var value = h2vMap[host.hostName];
- if (Em.isNone(value)) {
- value = this.t('charts.heatmap.unknown');
+ let value = h2vMap[host.hostName];
+ if (Em.isNone(value) || isNaN(Number(value))) {
+ value = slotDefinitions[hostToSlotMap[host.hostName]].get('label');
} else {
- if (isNaN(Number(value))) {
- value = this.t('charts.heatmap.unknown');
- } else {
- value = this.convertValue(value, selectedMetric.get('units'));
- }
+ value = this.convertValue(value, selectedMetric.get('units'));
}
view.set('details.metricName', metricName);
view.set('details.metricValue', value);
diff --git a/ambari-web/test/controllers/main/charts/heatmap_metrics/heatmap_metric_test.js b/ambari-web/test/controllers/main/charts/heatmap_metrics/heatmap_metric_test.js
index c2f7e85..36afc6b 100644
--- a/ambari-web/test/controllers/main/charts/heatmap_metrics/heatmap_metric_test.js
+++ b/ambari-web/test/controllers/main/charts/heatmap_metrics/heatmap_metric_test.js
@@ -51,7 +51,7 @@ describe('MainChartHeatmapMetric', function () {
expect(mainChartHeatmapMetric.generateSlot.callCount).to.be.equal(1);
});
it('generateSlot is called with correct arguments', function () {
- expect(mainChartHeatmapMetric.generateSlot.getCall(0).args).to.eql([0, 100, '', {r: 0, g: 204, b: 0}]);
+ expect(mainChartHeatmapMetric.generateSlot.getCall(0).args).to.eql([0, 100, '', '#1EB475']);
});
});
@@ -71,10 +71,10 @@ describe('MainChartHeatmapMetric', function () {
expect(mainChartHeatmapMetric.generateSlot.callCount).to.be.equal(2);
});
it('generateSlot 1st call has valid arguments', function () {
- expect(mainChartHeatmapMetric.generateSlot.getCall(0).args).to.eql([0, 50, '', {r: 0, g: 204, b: 0}]);
+ expect(mainChartHeatmapMetric.generateSlot.getCall(0).args).to.eql([0, 50, '', '#1EB475']);
});
it('generateSlot 2nd call has valid arguments', function () {
- expect(mainChartHeatmapMetric.generateSlot.getCall(1).args).to.eql([50, 100, '', {r: 159, g: 238, b: 0}]);
+ expect(mainChartHeatmapMetric.generateSlot.getCall(1).args).to.eql([50, 100, '', '#1FB418']);
});
});
@@ -93,12 +93,12 @@ describe('MainChartHeatmapMetric', function () {
});
it('generateSlot result is valid', function () {
- expect(mainChartHeatmapMetric.generateSlot(0, 1, '', {r: 0, g: 0, b: 0})).to.eql(Em.Object.create({
+ expect(mainChartHeatmapMetric.generateSlot(0, 1, '', '#1FB418')).to.eql(Em.Object.create({
hasBoundaries: true,
"from": "number",
"to": "number",
"label": "label - label",
- "cssStyle": "background-color:rgb(0,0,0)"
+ "cssStyle": "background-color:#1FB418"
}));
});
});
@@ -108,21 +108,21 @@ describe('MainChartHeatmapMetric', function () {
{
title: 'unknown browser',
data: {},
- result: 'background-color:rgb(135, 206, 250)'
+ result: 'background-color:#666'
},
{
title: 'webkit browser',
data: {
webkit: true
},
- result: 'background-image:-webkit-repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)'
+ result: 'background-image:-webkit-repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)'
},
{
title: 'mozilla browser',
data: {
mozilla: true
},
- result: 'background-image:repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)'
+ result: 'background-image:repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)'
},
{
title: 'IE version 9',
@@ -130,7 +130,7 @@ describe('MainChartHeatmapMetric', function () {
msie: true,
version: '9.0'
},
- result: 'background-color:rgb(135, 206, 250)'
+ result: 'background-color:#666'
},
{
title: 'IE version 10',
@@ -138,7 +138,7 @@ describe('MainChartHeatmapMetric', function () {
msie: true,
version: '10.0'
},
- result: 'background-image:repeating-linear-gradient(-45deg, #FF1E10, #FF1E10 3px, #ff6c00 3px, #ff6c00 6px)'
+ result: 'background-image:repeating-linear-gradient(-45deg, #666, #666 6px, #fff 6px, #fff 7px)'
}
];
diff --git a/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js b/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
index 3f7dc62..177bf95 100644
--- a/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
+++ b/ambari-web/test/views/main/charts/heatmap/heatmap_host_test.js
@@ -458,12 +458,20 @@ describe('App.MainChartsHeatmapHostView', function () {
it("host value is undefined", function () {
view.set('controller.selectedMetric', Em.Object.create({
name: 'm1',
- hostToValueMap: {}
+ hostToValueMap: {},
+ slotDefinitions: {
+ 7: Em.Object.create({
+ label: 'na'
+ })
+ }
}));
+ view.set('controller.hostToSlotMap', {
+ 'host1': 7
+ });
view.setMetric(viewObject, {hostName: 'host1'});
expect(viewObject.get('details')).to.eql({
metricName: 'm1',
- metricValue: Em.I18n.t('charts.heatmap.unknown')
+ metricValue: 'na'
});
});
@@ -487,12 +495,20 @@ describe('App.MainChartsHeatmapHostView', function () {
name: 'm1',
hostToValueMap: {
host1: 'val'
+ },
+ slotDefinitions: {
+ 7: Em.Object.create({
+ label: 'na'
+ })
}
}));
+ view.set('controller.hostToSlotMap', {
+ 'host1': 7
+ });
view.setMetric(viewObject, {hostName: 'host1'});
expect(viewObject.get('details')).to.eql({
metricName: 'm1',
- metricValue: Em.I18n.t('charts.heatmap.unknown')
+ metricValue: 'na'
});
});
--
To stop receiving notification emails like this one, please contact
atkach@apache.org.