YARN-11758. [UI2] On the Cluster Metrics page make the Resource Usage… (#7331)

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/queue-usage-donut-chart.js

@@ -16,29 +16,35 @@
  * limitations under the License.
  */
 
-import BaseUsageDonutChart from 'yarn-ui/components/base-usage-donut-chart';
+import DonutChart from 'yarn-ui/components/donut-chart';
 import ColorUtils from 'yarn-ui/utils/color-utils';
 import HrefAddressUtils from 'yarn-ui/utils/href-address-utils';
 
-export default BaseUsageDonutChart.extend({
+export default DonutChart.extend({
   colors: d3.scale.category20().range(),
 
   draw: function() {
     var usageByQueues = [];
     var avail = 100;
 
-    this.get("data").forEach(function (queue) {
-      var v = queue.get("absUsedCapacity");
+    let partitionFilter = this.partition;
 
+    this.get("data").forEach(function (queue) {
       if (queue.get("isLeafQueue")) {
-        if (v > 1e-2) {
-          usageByQueues.push({
-            label: queue.get("id"),
-            link: HrefAddressUtils.getQueueLink(queue.get("id")),
-            value: v.toFixed(2)
-          });
+        let partitionMap = queue.get("partitionMap");
+        let absUsedForPartition = 0;
+        if(partitionMap[partitionFilter]){
+          let v = partitionMap[partitionFilter].absoluteUsedCapacity;
+
+          if (v > 1e-2) {
+            usageByQueues.push({
+              label: queue.get("id"),
+              link: HrefAddressUtils.getQueueLink(queue.get("id")),
+              value: v.toFixed(2)
+            });
 
-          avail = avail - v;
+            avail = avail - v;
+          }
         }
       }
     });
@@ -47,21 +53,14 @@ export default BaseUsageDonutChart.extend({
       return b.value - a.value;
     });
 
-    usageByQueues = this.mergeLongTails(usageByQueues, 8);
-
     usageByQueues.push({
       label: "Available",
       value: avail.toFixed(2)
     });
 
-    this.colors = ColorUtils.getColors(usageByQueues.length, ["others", "good"], true);
+    this.colors = ColorUtils.getColors(usageByQueues.length, [ "good"], true);
 
     this.renderDonutChart(usageByQueues, this.get("title"), this.get("showLabels"),
       this.get("middleLabel"), "100%", "%");
   },
-
-  didInsertElement: function() {
-    this.initChart();
-    this.draw();
-  },
-});
+});

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/cluster-overview.hbs

@@ -20,39 +20,24 @@
 
 {{#if model}}
 
-  <div class="col-md-12 container-fluid">
-    <div class="row">
-      <div class="col-lg-6 container-fluid">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            Cluster Resource Usage By Applications
-          </div>
-          <div class="container-fluid donut-chart" id="appusage-donut-chart">
-            {{app-usage-donut-chart data=model.apps
-            showLabels=true
-            parentId="appusage-donut-chart"
-            ratio=0.5
-            maxHeight=400}}
-          </div>
+<div class="col-md-12 container-fluid">
+  <h3>Applications</h3>
+  <div class="row">
+    <div class="col-lg-6 container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Cluster Resource Usage By Applications
         </div>
-      </div>
-
-      <div class="col-lg-6 container-fluid">
-        <div class="panel panel-default">
-          <div class="panel-heading">
-            Cluster Resource Usage By Leaf Queues
-          </div>
-          <div class="container-fluid donut-chart" id="queueusage-donut-chart">
-            {{queue-usage-donut-chart data=model.queues
-            showLabels=true
-            parentId="queueusage-donut-chart"
-            ratio=0.5
-            maxHeight=400}}
-          </div>
+        <div class="container-fluid donut-chart" id="appusage-donut-chart">
+          {{app-usage-donut-chart data=model.apps
+          showLabels=true
+          parentId="appusage-donut-chart"
+          ratio=0.5
+          maxHeight=500}}
         </div>
       </div>
     </div>
-    <hr>
+  </div>
 
   <div class="row">
     <div class="col-lg-4 container-fluid">
@@ -88,7 +73,30 @@
     </div>
   </div>
 
-  <hr>
+  <h3>Partitions</h3>
+  <div class="row">
+  {{#each model.queues.firstObject.partitions as | partition index|}}
+    <div class="col-lg-4 container-fluid">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        [{{partition}}] Cluster Resource Usage By Leaf Queues
+      </div>
+
+      <div class="container-fluid donut-chart" id="queueusage-donut-chart-{{index}}">
+        {{queue-usage-donut-chart data=model.queues
+        showLabels=true
+        parentIdPrefix="queueusage-donut-chart-"
+        id=index
+        ratio=0.5
+        maxHeight=350
+        partition=partition}}
+      </div>
+      </div>
+    </div>
+  {{/each}}
+  </div>
+
+  <h3>Resources</h3>
   <div class="row">
     <!-- When getAllResourceTypesDonutChart is not null, use it to show per-resource-type usages. Otherwise only show
          vcore/memory usage from metrics -->
@@ -154,8 +162,8 @@
         </div>
       </div>
     {{/if}}
-
   </div>
+
   <div class="row">
     <div class="col-lg-6 container-fluid">
       <div class="panel panel-default">