Apache
/
hadoop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

YARN-7104. Improve Nodes Heatmap in new YARN UI with better color coding. Contributed by Da Ding.

This commit is contained in:
Sunil G 2017-09-08 16:16:01 +05:30
parent b3a4d7d2a0
commit ab8368d2e0
3 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/base-chart-component.js
View File

@ -108,7 +108,7 @@ export default Ember.Component.extend({
data = d.data; data = d.data;
} }
this.tooltip.style("opacity", 0.9); this.tooltip.style("opacity", 0.7);
var value = data.value; var value = data.value;
if (this.get("type") === "memory") { if (this.get("type") === "memory") {
value = Converter.memoryToSimpliedUnit(value); value = Converter.memoryToSimpliedUnit(value);

30
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/nodes-heatmap.js
View File

@ -33,8 +33,9 @@ export default BaseChartComponent.extend({
totalContainers: 0, totalContainers: 0,
bindTP: function(element, cell) { bindTP: function(element, cell) {
var currentToolTip = this.tooltip;
element.on("mouseover", function() { element.on("mouseover", function() {
this.tooltip currentToolTip
.style("left", (d3.event.pageX) + "px") .style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px"); .style("top", (d3.event.pageY - 28) + "px");
cell.style("opacity", 1.0); cell.style("opacity", 1.0);
@ -42,14 +43,20 @@ export default BaseChartComponent.extend({
.on("mousemove", function() { .on("mousemove", function() {
// Handle pie chart case // Handle pie chart case
var text = cell.attr("tooltiptext"); var text = cell.attr("tooltiptext");
currentToolTip
this.tooltip.style("opacity", 0.9); .style("background", "black")
this.tooltip.html(text) .style("opacity", 0.7);
.style("left", (d3.event.pageX) + "px") currentToolTip
.style("top", (d3.event.pageY - 28) + "px"); .html(text)
}.bind(this)) .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() { .on("mouseout", function() {
this.tooltip.style("opacity", 0); currentToolTip.style("opacity", 0);
cell.style("opacity", 0.8); cell.style("opacity", 0.8);
}.bind(this)); }.bind(this));
}, },
@ -115,7 +122,10 @@ export default BaseChartComponent.extend({
var xOffset = layout.margin; var xOffset = layout.margin;
var yOffset = layout.margin * 3; 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 - var sampleXOffset = (layout.x2 - layout.x1) / 2 - 2.5 * this.SAMPLE_CELL_WIDTH -
2 * this.CELL_MARGIN; 2 * this.CELL_MARGIN;
@ -128,7 +138,7 @@ export default BaseChartComponent.extend({
var rect = g.append("rect") var rect = g.append("rect")
.attr("x", sampleXOffset) .attr("x", sampleXOffset)
.attr("y", sampleYOffset) .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("width", this.SAMPLE_CELL_WIDTH)
.attr("height", this.SAMPLE_HEIGHT) .attr("height", this.SAMPLE_HEIGHT)
.attr("class", "hyperlink"); .attr("class", "hyperlink");

19
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
View File

@ -58,8 +58,7 @@ text.queue {
} }
text.heatmap-cell { text.heatmap-cell {
font: 14px sans-serif; font-size: 14px;
font-weight: bold;
text-anchor: middle; text-anchor: middle;
fill: Azure; fill: Azure;
text-align: center; text-align: center;
@ -83,11 +82,13 @@ text.heatmap-cell-notselected {
text-anchor: middle; text-anchor: middle;
fill: Silver; fill: Silver;
text-align: center; text-align: center;
} }
text.heatmap-rack { text.heatmap-rack {
font: 20px sans-serif; font-size: 18px;
fill: DimGray; font-weight: 400;
fill: #4b5052;
} }
path.queue { path.queue {
@ -111,9 +112,8 @@ line.chart {
*/ */
text.chart-title { text.chart-title {
font-size: 30px; font-size: 30px;
font-family: sans-serif;
text-anchor: middle; text-anchor: middle;
fill: Gray; fill: #4b5052;
} }
text.donut-highlight-text, text.donut-highlight-sub { text.donut-highlight-text, text.donut-highlight-sub {
@ -143,9 +143,10 @@ text.bar-chart-text {
div.tooltip { div.tooltip {
position: absolute; position: absolute;
text-align: center; text-align: center;
padding: 2px; padding: 10px;
font: 24px sans-serif; font-size: 16px;
background: lightsteelblue; background: black;
color: white;
border: 0px; border: 0px;
border-radius: 8px; border-radius: 8px;
pointer-events: none; pointer-events: none;