You are viewing a plain text version of this content. The canonical link for it is here.
Posted to common-commits@hadoop.apache.org by in...@apache.org on 2017/09/08 20:57:44 UTC
[12/45] hadoop git commit: YARN-7104. Improve Nodes Heatmap in new
YARN UI with better color coding. Contributed by Da Ding.
YARN-7104. Improve Nodes Heatmap in new YARN UI with better color coding. Contributed by Da Ding.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo
Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/ab8368d2
Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/ab8368d2
Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/ab8368d2
Branch: refs/heads/HDFS-10467
Commit: ab8368d2e0f3931615e6ef4550ad75d9e56047d2
Parents: b3a4d7d
Author: Sunil G <su...@apache.org>
Authored: Fri Sep 8 16:16:01 2017 +0530
Committer: Sunil G <su...@apache.org>
Committed: Fri Sep 8 16:16:01 2017 +0530
----------------------------------------------------------------------
.../app/components/base-chart-component.js | 2 +-
.../main/webapp/app/components/nodes-heatmap.js | 30 +++++++++++++-------
.../src/main/webapp/app/styles/app.css | 19 +++++++------
3 files changed, 31 insertions(+), 20 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/hadoop/blob/ab8368d2/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js
index aa41893..26aa2b0 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js
@@ -108,7 +108,7 @@ export default Ember.Component.extend({
data = d.data;
}
- this.tooltip.style("opacity", 0.9);
+ this.tooltip.style("opacity", 0.7);
var value = data.value;
if (this.get("type") === "memory") {
value = Converter.memoryToSimpliedUnit(value);
http://git-wip-us.apache.org/repos/asf/hadoop/blob/ab8368d2/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
index a1df480..84ff59e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
@@ -33,8 +33,9 @@ export default BaseChartComponent.extend({
totalContainers: 0,
bindTP: function(element, cell) {
+ var currentToolTip = this.tooltip;
element.on("mouseover", function() {
- this.tooltip
+ currentToolTip
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
cell.style("opacity", 1.0);
@@ -42,14 +43,20 @@ export default BaseChartComponent.extend({
.on("mousemove", function() {
// Handle pie chart case
var text = cell.attr("tooltiptext");
-
- this.tooltip.style("opacity", 0.9);
- this.tooltip.html(text)
- .style("left", (d3.event.pageX) + "px")
- .style("top", (d3.event.pageY - 28) + "px");
- }.bind(this))
+ currentToolTip
+ .style("background", "black")
+ .style("opacity", 0.7);
+ currentToolTip
+ .html(text)
+ .style('font-size', '12px')
+ .style('color', 'white')
+ .style('font-weight', '400');
+ currentToolTip
+ .style("left", (d3.event.pageX) + "px")
+ .style("top", (d3.event.pageY - 28) + "px");
+ }.bind(this))
.on("mouseout", function() {
- this.tooltip.style("opacity", 0);
+ currentToolTip.style("opacity", 0);
cell.style("opacity", 0.8);
}.bind(this));
},
@@ -115,7 +122,10 @@ export default BaseChartComponent.extend({
var xOffset = layout.margin;
var yOffset = layout.margin * 3;
- var colorFunc = d3.interpolate(d3.rgb("#bdddf5"), d3.rgb("#0f3957"));
+ var gradientStartColor = "#2ca02c";
+ var gradientEndColor = "#ffb014";
+
+ var colorFunc = d3.interpolateRgb(d3.rgb(gradientStartColor), d3.rgb(gradientEndColor));
var sampleXOffset = (layout.x2 - layout.x1) / 2 - 2.5 * this.SAMPLE_CELL_WIDTH -
2 * this.CELL_MARGIN;
@@ -128,7 +138,7 @@ export default BaseChartComponent.extend({
var rect = g.append("rect")
.attr("x", sampleXOffset)
.attr("y", sampleYOffset)
- .attr("fill", this.selectedCategory === i ? "#2ca02c" : colorFunc(ratio))
+ .attr("fill", this.selectedCategory === i ? "#2c7bb6" : colorFunc(ratio))
.attr("width", this.SAMPLE_CELL_WIDTH)
.attr("height", this.SAMPLE_HEIGHT)
.attr("class", "hyperlink");
http://git-wip-us.apache.org/repos/asf/hadoop/blob/ab8368d2/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
index 38e25e4..f48c186 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
@@ -58,8 +58,7 @@ text.queue {
}
text.heatmap-cell {
- font: 14px sans-serif;
- font-weight: bold;
+ font-size: 14px;
text-anchor: middle;
fill: Azure;
text-align: center;
@@ -83,11 +82,13 @@ text.heatmap-cell-notselected {
text-anchor: middle;
fill: Silver;
text-align: center;
+
}
text.heatmap-rack {
- font: 20px sans-serif;
- fill: DimGray;
+ font-size: 18px;
+ font-weight: 400;
+ fill: #4b5052;
}
path.queue {
@@ -111,9 +112,8 @@ line.chart {
*/
text.chart-title {
font-size: 30px;
- font-family: sans-serif;
text-anchor: middle;
- fill: Gray;
+ fill: #4b5052;
}
text.donut-highlight-text, text.donut-highlight-sub {
@@ -143,9 +143,10 @@ text.bar-chart-text {
div.tooltip {
position: absolute;
text-align: center;
- padding: 2px;
- font: 24px sans-serif;
- background: lightsteelblue;
+ padding: 10px;
+ font-size: 16px;
+ background: black;
+ color: white;
border: 0px;
border-radius: 8px;
pointer-events: none;
---------------------------------------------------------------------
To unsubscribe, e-mail: common-commits-unsubscribe@hadoop.apache.org
For additional commands, e-mail: common-commits-help@hadoop.apache.org