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 5652834..c6354f3 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 @@ -26,6 +26,7 @@ export default BaseChartComponent.extend({ CELL_MARGIN: 2, RACK_MARGIN: 20, filter: "", + selectedCategory: 0, bindTP: function(element) { element.on("mouseover", function() { @@ -49,6 +50,41 @@ export default BaseChartComponent.extend({ }.bind(this)); }, + bindSelectCategory: function(element, i) { + element.on("click", function() { + if (this.selectedCategory == i) { + // Remove selection for second click + this.selectedCategory = 0; + } else { + this.selectedCategory = i; + } + this.didInsertElement(); + }.bind(this)); + }, + + isNodeSelected: function(node) { + if (this.filter) { + var rack = node.get("rack"); + var host = node.get("nodeHostName"); + if (!rack.includes(this.filter) && !host.includes(this.filter)) { + return false; + } + } + + if (this.selectedCategory === 0) { + return true; + } + + var usage = node.get("usedMemoryMB") / + (node.get("usedMemoryMB") + node.get("availMemoryMB")) + var lowerLimit = (this.selectedCategory - 1) * 0.2; + var upperLimit = this.selectedCategory * 0.2; + if (lowerLimit <= usage && usage <= upperLimit) { + return true; + } + return false; + }, + // data: // [{label=label1, value=value1}, ...] // ... @@ -84,17 +120,20 @@ export default BaseChartComponent.extend({ for (i = 1; i <= 5; i++) { var ratio = i * 0.2 - 0.1; - g.append("rect") + var rect = g.append("rect") .attr("x", sampleXOffset) .attr("y", sampleYOffset) - .attr("fill", colorFunc(ratio)) + .attr("fill", this.selectedCategory === i ? "#2ca02c" : colorFunc(ratio)) .attr("width", this.SAMPLE_CELL_WIDTH) - .attr("height", this.SAMPLE_HEIGHT); - g.append("text") + .attr("height", this.SAMPLE_HEIGHT) + .attr("class", "heatmap-category"); + this.bindSelectCategory(rect, i); + var text = g.append("text") .text("" + (ratio * 100).toFixed(1) + "% Used") .attr("y", sampleYOffset + this.SAMPLE_HEIGHT / 2 + 5) .attr("x", sampleXOffset + this.SAMPLE_CELL_WIDTH / 2) - .attr("class", "heatmap-cell"); + .attr("class", "heatmap-cell heatmap-category"); + this.bindSelectCategory(text, i); sampleXOffset += this.CELL_MARGIN + this.SAMPLE_CELL_WIDTH; } @@ -118,7 +157,7 @@ export default BaseChartComponent.extend({ var host = data[j].get("nodeHostName"); if (rack === racksArray[i]) { - if (!rack.includes(this.filter) && !host.includes(this.filter)) { + if (!this.isNodeSelected(data[j])) { this.addNode(g, xOffset, yOffset, colorFunc, data[j], false); g.append("text") .text(host) @@ -202,6 +241,7 @@ export default BaseChartComponent.extend({ actions: { applyFilter: function(event) { this.filter = event.srcElement.value; + this.selectedCategory = 0; this.didInsertElement(); } } 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 7ac21bc..8c82f95 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 @@ -63,6 +63,14 @@ text.heatmap-cell { text-align: center; } +.heatmap-category { + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + text.heatmap-cell-notselected { font: 14px sans-serif; font-weight: bold;