diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js index c72d934..1d75bdd 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/app-usage-donut-chart.js @@ -22,6 +22,7 @@ import HrefAddressUtils from 'yarn-ui/utils/href-address-utils'; export default BaseUsageDonutChart.extend({ colors: d3.scale.category20().range(), + layoutName: "components/responsive-chart-component", draw: function() { var usageByApps = []; @@ -53,7 +54,7 @@ export default BaseUsageDonutChart.extend({ this.colors = ColorUtils.getColors(usageByApps.length, ["others", "good"], true); - this.renderDonutChart(usageByApps, this.get("title"), this.get("showLabels"), + this.renderDonutChart(usageByApps, this.get("title"), this.get("showLegend"), this.get("middleLabel"), "100%", "%"); }, }); \ No newline at end of file diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js index 05d78eb..30a36a7 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/bar-chart.js @@ -20,7 +20,7 @@ import Ember from 'ember'; import BaseChartComponent from 'yarn-ui/components/base-chart-component'; export default BaseChartComponent.extend({ - // data: + // data: // [{label=label1, value=value1}, ...] // ... renderBarChart: function(data, title, textWidth = 50) { @@ -45,9 +45,7 @@ export default BaseChartComponent.extend({ // 50 is for text var maxBarWidth = layout.x2 - layout.x1 - 2 * layout.margin - textWidth - 50; - - // 30 is for title - var maxBarsHeight = layout.y2 - layout.y1 - 2 * layout.margin - 30; + var maxBarsHeight = layout.y2 - layout.y1 - 2 * layout.margin; var gap = (maxBarsHeight - data.length * singleBarHeight) / (data.length - 1); @@ -63,7 +61,7 @@ export default BaseChartComponent.extend({ g.append("text") .text(getBarText(i)) .attr("y", layout.y1 + singleBarHeight / 2 + layout.margin + - (gap + singleBarHeight) * i + 30) + (gap + singleBarHeight) * i) .attr("x", layout.x1 + layout.margin); } @@ -73,7 +71,7 @@ export default BaseChartComponent.extend({ .enter() .append("rect") .attr("y", function(d, i) { - return layout.y1 + 30 + layout.margin + (gap + singleBarHeight) * i; + return layout.y1 + layout.margin + (gap + singleBarHeight) * i - 5; }) .attr("x", layout.x1 + layout.margin + textWidth) .attr("height", singleBarHeight) @@ -102,7 +100,7 @@ export default BaseChartComponent.extend({ g.append("text") .text(getBarValue(i)) .attr("y", layout.y1 + singleBarHeight / 2 + layout.margin + - (gap + singleBarHeight) * i + 30) + (gap + singleBarHeight) * i) .attr("x", layout.x1 + layout.margin + textWidth + 15 + xScaler(data[i].value)); } }, @@ -120,4 +118,4 @@ export default BaseChartComponent.extend({ this.initChart(); this.draw(); } -}); \ No newline at end of file +}); 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..aeafeff 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 @@ -32,6 +32,10 @@ export default Ember.Component.extend({ w: 0, tooltip: undefined }); + this.set("legend", { + svg: undefined, + g: undefined + }); }, initChart: function(removeLast = false) { diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js index b1e6ecf..eac3365 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js @@ -17,15 +17,17 @@ */ import Ember from 'ember'; -import BaseChartComponent from 'yarn-ui/components/base-chart-component'; +import ResponsiveChartComponent from 'yarn-ui/components/responsive-chart-component'; import ColorUtils from 'yarn-ui/utils/color-utils'; import Converter from 'yarn-ui/utils/converter'; -export default BaseChartComponent.extend({ +export default ResponsiveChartComponent.extend({ + layoutName: "components/responsive-chart-component", + /* * data = [{label="xx", value=},{...}] */ - renderDonutChart: function(data, title, showLabels = false, + renderDonutChart: function(data, title, showLegend = false, middleLabel = "Total", middleValue = undefined, suffix = "") { var g = this.chart.g; var layout = this.getLayout(); @@ -48,11 +50,7 @@ export default BaseChartComponent.extend({ } } - //Width and height - var h = layout.y2 - layout.y1; - - // 50 is for title - var outerRadius = (h - 50 - 2 * layout.margin) / 2; + var outerRadius = 150; // Ratio of inner radius to outer radius var radiusRatio = 0.75; @@ -62,13 +60,8 @@ export default BaseChartComponent.extend({ .innerRadius(innerRadius) .outerRadius(outerRadius); - var cx; - var cy = layout.y1 + 50 + layout.margin + outerRadius; - if (showLabels) { - cx = layout.x1 + layout.margin + outerRadius; - } else { - cx = (layout.x1 + layout.x2) / 2; - } + var cx = layout.x1 + outerRadius; + var cy = layout.y1 + outerRadius; var pie = d3.layout.pie(); pie.sort(null); @@ -124,43 +117,48 @@ export default BaseChartComponent.extend({ }.bind(this)); // Show labels - if (showLabels) { - var lx = layout.x1 + layout.margin + outerRadius * 2 + 30; + if (showLegend) { var squareW = 15; var margin = 10; - var select = g.selectAll(".rect") - .data(data) - .enter(); - select.append("rect") - .attr("fill", function(d, i) { - return this.colors[i]; - }.bind(this)) - .attr("x", lx) - .attr("y", function(d, i) { - return layout.y1 + 75 + (squareW + margin) * i + layout.margin; - }) - .attr("width", squareW) - .attr("height", squareW); - select.append("text") - .attr("x", lx + squareW + margin) - .attr("y", function(d, i) { - return layout.y1 + 80 + (squareW + margin) * i + layout.margin + squareW / 2; - }) - .text(function(d) { - var value = d.value; - if (this.get("type") === "memory") { - value = Converter.memoryToSimpliedUnit(value); - } - return d.label + ' = ' + value + suffix; - }.bind(this)); + var type = this.get("type"); + data.forEach(function(d, i) { + this.legend.g.append("rect") + .attr("fill", this.colors[i]) + .attr("x", 0) + .attr("y", (squareW + margin) * i) + .attr("width", squareW) + .attr("height", squareW); + var text; + if (d.link) { + var a = this.legend.g.append("a") + .attr("href", d.link); + text = a.append("text"); + } else { + text = this.legend.g.append("text"); + } + text + .attr("x", squareW + margin) + .attr("y", 5 + (squareW + margin) * i + squareW / 2) + .text(function() { + var value = d.value; + if (type === "memory") { + value = Converter.memoryToSimpliedUnit(value); + } + return d.label + ' = ' + value + suffix; + }); + }.bind(this)); + var bbox = this.legend.g.node().getBBox(); + var parentDiv = d3.select(this.legend.svg.node().parentNode); + parentDiv.style("width", this.get("legendWidth") + "px"); + this.legend.svg.attr("height", bbox.height); } if (middleLabel) { var highLightColor = this.colors[0]; - g.append("text").text(middleLabel).attr("x", cx).attr("y", cy - 10). + g.append("text").text(middleLabel).attr("x", cx).attr("y", cy - 18). attr("class", "donut-highlight-text").attr("fill", highLightColor); - g.append("text").text(middleValue).attr("x", cx).attr("y", cy + 15). + g.append("text").text(middleValue).attr("x", cx).attr("y", cy + 25). attr("class", "donut-highlight-sub").attr("fill", highLightColor); } @@ -171,7 +169,10 @@ export default BaseChartComponent.extend({ _dataChange: Ember.observer("data", function() { this.chart.g.selectAll("*").remove(); - if(this.get("data")) { + if (this.get("showLegend")) { + this.legend.g.selectAll("*").remove(); + } + if (this.get("data")) { this.draw(); } }), @@ -183,13 +184,12 @@ export default BaseChartComponent.extend({ var targets = colorTargets.split(" "); this.colors = ColorUtils.getColors(this.get("data").length, targets, colorTargetReverse); } - - this.renderDonutChart(this.get("data"), this.get("title"), this.get("showLabels"), - this.get("middleLabel"), this.get("middleValue")); + this.renderDonutChart(this.get("data"), this.get("title"), this.get("showLegend"), + this.get("middleLabel"), this.get("middleValue"), ""); }, didInsertElement: function() { this.initChart(); this.draw(); }, -}); \ No newline at end of file +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js index c939aaf..7f7329d 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js @@ -22,6 +22,7 @@ import HrefAddressUtils from 'yarn-ui/utils/href-address-utils'; export default BaseUsageDonutChart.extend({ colors: d3.scale.category20().range(), + layoutName: "components/responsive-chart-component", draw: function() { var usageByQueues = []; @@ -56,7 +57,7 @@ export default BaseUsageDonutChart.extend({ this.colors = ColorUtils.getColors(usageByQueues.length, ["others", "good"], true); - this.renderDonutChart(usageByQueues, this.get("title"), this.get("showLabels"), + this.renderDonutChart(usageByQueues, this.get("title"), this.get("showLegend"), this.get("middleLabel"), "100%", "%"); }, diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/responsive-chart-component.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/responsive-chart-component.js new file mode 100644 index 0000000..54f98b1 --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/responsive-chart-component.js @@ -0,0 +1,71 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import BaseChartComponent from 'yarn-ui/components/base-chart-component'; + +export default BaseChartComponent.extend({ + + initChart: function(removeLast = false) { + // Init tooltip if it is not initialized + // this.tooltip = d3.select("#chart-tooltip"); + if (!this.tooltip) { + this.tooltip = d3.select("body") + .append("div") + .attr("class", "tooltip") + .attr("id", "chart-tooltip") + .style("opacity", 0); + } + + var parentId = this.get("parentId"); + var parent = d3.select("#" + parentId); + + if (removeLast) { + var previousSvg = parent.select("svg"); + if (previousSvg) { + console.log(previousSvg); + previousSvg.remove(); + } + } + + var maxWidth = this.get("maxWidth"); + if (maxWidth) { + var table = parent.select("table"); + table.style("max-width", maxWidth + "px"); + } + + var chartDiv = parent.select(".chart"); + var bbox = chartDiv.node().getBoundingClientRect(); + this.chart.w = bbox.width; + this.chart.h = this.chart.w; + this.chart.svg = chartDiv.append("svg") + .attr("width", "100%") + .attr("id", parentId + "-svg") + .attr("viewBox", "0 0 300 300") + .attr("preserveAspectRatio", "xMinYMin meet"); + + this.chart.g = this.chart.svg.append("g"); + + var showLegend = this.get("showLegend"); + if (showLegend) { + var legendDiv = parent.select(".legend"); + this.legend.svg = legendDiv.append("svg") + .attr("width", "100%"); + this.legend.g = this.legend.svg.append("g"); + } + } +}); diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/cluster-overview.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/cluster-overview.js index 22e6267..0fb819b 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/cluster-overview.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/cluster-overview.js @@ -28,5 +28,4 @@ export default Ember.Controller.extend({ text: "Cluster Overview", routeName: 'cluster-overview', }] - }); \ No newline at end of file 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..02727f0 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 @@ -117,7 +117,7 @@ text.chart-title { } text.donut-highlight-text, text.donut-highlight-sub { - font-size: 15px; + font-size: 30px; font-family: sans-serif; text-anchor: middle; fill: Gray; @@ -125,7 +125,7 @@ text.donut-highlight-text, text.donut-highlight-sub { } text.donut-highlight-sub { - font-size: 23px; + font-size: 40px; margin-top: 10px; } @@ -326,6 +326,11 @@ li a.navigation-link.ember-view { width: 100%; } +.responsive-chart { + max-width: 500px; + margin: auto; +} + div.attempt-info-panel table { table-layout: fixed; } diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs index e549ce5..a4b6937 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs @@ -27,12 +27,14 @@
Cluster Resource Usage By Applications
-
- {{app-usage-donut-chart data=model.apps - showLabels=true - parentId="appusage-donut-chart" - ratio=0.5 - maxHeight=400}} +
+
+ {{app-usage-donut-chart data=model.apps + showLegend=true + parentId="appusage-donut-chart" + legendWidth=350 + maxWidth=900}} +
@@ -42,12 +44,14 @@
Cluster Resource Usage By Leaf Queues
-
- {{queue-usage-donut-chart data=model.queues - showLabels=true - parentId="queueusage-donut-chart" - ratio=0.5 - maxHeight=400}} +
+
+ {{queue-usage-donut-chart data=model.queues + showLegend=true + parentId="queueusage-donut-chart" + legendWidth=350 + maxWidth=900}} +
@@ -60,13 +64,14 @@
Finished Apps
-
- {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart - showLabels=true - parentId="finishedapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good warn error"}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart + showLegend=true + parentId="finishedapps-donut-chart" + legendWidth=170 + colorTargets="good warn error"}} +
@@ -76,13 +81,14 @@
Running Apps
-
- {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart - showLabels=true - parentId="runningapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="warn good"}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart + showLegend=true + parentId="runningapps-donut-chart" + legendWidth=170 + colorTargets="warn good"}} +
@@ -96,15 +102,15 @@
Resource - Memory
-
- {{donut-chart data=model.clusterMetrics.firstObject.getMemoryDataForDonutChart - showLabels=true - parentId="mem-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good" - colorTargetReverse=true - type="memory"}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getMemoryDataForDonutChart + showLegend=true + parentId="mem-donut-chart" + colorTargets="good" + colorTargetReverse=true + type="memory"}} +
@@ -114,14 +120,14 @@
Resource - VCores
-
- {{donut-chart data=model.clusterMetrics.firstObject.getVCoreDataForDonutChart - showLabels=true - parentId="vcore-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good" - colorTargetReverse=true}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getVCoreDataForDonutChart + showLegend=true + parentId="vcore-donut-chart" + colorTargets="good" + colorTargetReverse=true}} +
@@ -132,13 +138,14 @@
Node Managers
-
- {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart - showLabels=true - parentId="nodes-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good error warn"}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart + showLegend=true + parentId="nodes-donut-chart" + legendWidth=170 + colorTargets="good error warn"}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/responsive-chart-component.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/responsive-chart-component.hbs new file mode 100644 index 0000000..5f0b2bc --- /dev/null +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/responsive-chart-component.hbs @@ -0,0 +1,32 @@ +{{! + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +}} + + + + + {{#if showLegend}} + + {{/if}} + +
+
+
+
+
+
+
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs index 7d44e69..de54d89 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs @@ -23,14 +23,16 @@
Queue Capacities: {{model.selected}}
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=170 - ratio=0.55 - maxHeight=350}} +
+
+
+ {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=170 + ratio=0.55 + maxHeight=350}} +
@@ -53,12 +55,13 @@
Running Apps: {{model.selected}}
-
- {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} +
+
+ {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLegend=true + parentId="numapplications-donut-chart" + legendWidth=170}} +
@@ -69,13 +72,14 @@
User Usages: {{model.selected}}
-
- {{donut-chart data=model.selectedQueue.userUsagesDonutChartData - showLabels=true - parentId="userusage-donut-chart" - type="memory" - ratio=0.6 - maxHeight=350}} +
+
+ {{donut-chart data=model.selectedQueue.userUsagesDonutChartData + showLegend=true + parentId="userusage-donut-chart" + type="memory" + legendWidth=170}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs index 8b63b66..11a7eab 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs @@ -34,14 +34,16 @@
Queue Capacities: {{model.selected}}
-
-
- {{bar-chart data=model.selectedQueue.capacitiesBarChartData - title="" - parentId="capacity-bar-chart" - textWidth=175 - ratio=0.55 - maxHeight=350}} +
+
+
+ {{bar-chart data=model.selectedQueue.capacitiesBarChartData + title="" + parentId="capacity-bar-chart" + textWidth=175 + ratio=0.55 + maxHeight=350}} +
@@ -51,12 +53,13 @@
Running Apps: {{model.selected}}
-
- {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData - showLabels=true - parentId="numapplications-donut-chart" - ratio=0.6 - maxHeight=350}} +
+
+ {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData + showLegend=true + parentId="numapplications-donut-chart" + legendWidth=170}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs index 00701d9..f0400bb 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-apps.hbs @@ -41,36 +41,39 @@
{{#if model.clusterMetrics}}
-
+
Finished Apps
-
- {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart - showLabels=true - parentId="finishedapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good warn error" - }} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getFinishedAppsDataForDonutChart + showLegend=true + parentId="finishedapps-donut-chart" + legendWidth=170 + colorTargets="good warn error" + }} +
-
+
Running Apps
-
- {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart - showLabels=true - parentId="runningapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="warn good" - }} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getRunningAppsDataForDonutChart + showLegend=true + parentId="runningapps-donut-chart" + legendWidth=170 + maxHeight=350 + colorTargets="warn good" + }} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs index 1e8549b..b849afa 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-node.hbs @@ -89,15 +89,15 @@
Resource - Memory
-
- {{donut-chart data=model.rmNode.getMemoryDataForDonutChart - showLabels=true - parentId="mem-donut-chart" - ratio=0.6 - type="memory" - colorTargets="good" - colorTargetReverse=true - maxHeight=350}} +
+
+ {{donut-chart data=model.rmNode.getMemoryDataForDonutChart + showLegend=true + parentId="mem-donut-chart" + type="memory" + colorTargets="good" + colorTargetReverse=true}} +
@@ -107,14 +107,14 @@
Resource - VCores
-
- {{donut-chart data=model.rmNode.getVCoreDataForDonutChart - showLabels=true - parentId="vcore-donut-chart" - ratio=0.6 - colorTargets="good" - colorTargetReverse=true - maxHeight=350}} +
+
+ {{donut-chart data=model.rmNode.getVCoreDataForDonutChart + showLegend=true + parentId="vcore-donut-chart" + colorTargets="good" + colorTargetReverse=true}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs index 79d9efa..bd7af0a 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-nodes.hbs @@ -52,13 +52,14 @@
Node Managers
-
- {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart - showLabels=true - parentId="nodes-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good error warn"}} +
+
+ {{donut-chart data=model.clusterMetrics.firstObject.getNodesDataForDonutChart + showLegend=true + parentId="nodes-donut-chart" + maxHeight=350 + colorTargets="good error warn"}} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs index 04788be..2923262 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-services.hbs @@ -41,36 +41,40 @@
-
+
Finished Services
-
- {{donut-chart data=getFinishedServicesDataForDonutChart - showLabels=true - parentId="finishedapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="good warn error" - }} +
+
+ {{donut-chart data=getFinishedServicesDataForDonutChart + showLegend=true + parentId="finishedapps-donut-chart" + legendWidth=170 + maxHeight=350 + colorTargets="good warn error" + }} +
-
+
Running Services
-
- {{donut-chart data=getRunningServicesDataForDonutChart - showLabels=true - parentId="runningapps-donut-chart" - ratio=0.6 - maxHeight=350 - colorTargets="warn good" - }} +
+
+ {{donut-chart data=getRunningServicesDataForDonutChart + showLegend=true + parentId="runningapps-donut-chart" + legendWidth=170 + maxHeight=350 + colorTargets="warn good" + }} +
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/href-address-utils.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/href-address-utils.js index e36de4b..e8b41f7 100644 --- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/href-address-utils.js +++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/utils/href-address-utils.js @@ -18,10 +18,10 @@ export default { getApplicationLink: function(applicationId) { - return "#/yarn-app/" + applicationId; + return "#/yarn-app/" + applicationId + '/info'; }, getQueueLink: function(queueName) { - return '#/yarn-queue/' + queueName; + return '#/yarn-queue/' + queueName + '/info'; } };