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;
}
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);

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,
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");

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 {
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;