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

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

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

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;