YARN-7546. Layout changes in Queue UI to show queue details on right pane. Contributed by Vasudevan Skm.

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js

@@ -146,7 +146,7 @@ export default Ember.Component.extend({
 
       }.bind(this))
     .on("dblclick", function (d) {
-      document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/info";
+      document.location.href = "#/yarn-queue/" + d.queueData.get("name") + "/apps";
     });
 
     nodeEnter.append("circle")

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js

@@ -33,15 +33,11 @@ export default Ember.Controller.extend({
       text: "Queues",
       routeName: 'yarn-queues',
       model: 'root'
-    }, {
-      text: `Queue [ ${queueName} ]`,
-      routeName: 'yarn-queue.info',
-      model: queueName
     }];
 
     if (path && path === "yarn-queue.apps") {
       crumbs.push({
-        text: "Applications",
+        text: `Queue [ ${queueName} ]`,
         routeName: 'yarn-queue.apps',
         model: queueName
       });

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js

@@ -21,8 +21,10 @@ import TableDefinition from 'em-table/utils/table-definition';
 import AppTableController from '../app-table-columns';
 
 export default AppTableController.extend({
-  // Your custom instance of table definition
-  tableDefinition: TableDefinition.create(),
+  tableDefinition: TableDefinition.create({
+    enableFaceting: true,
+    rowCount: 25
+  }),
 
   // Search text alias, any change in controller's searchText would affect the table's searchText, and vice-versa.
   _selectedObserver: Ember.on("init", Ember.observer("model.selected", function () {

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js

@@ -50,16 +50,19 @@ export default DS.Model.extend({
   capacitiesBarChartData: function() {
     var floatToFixed = Converter.floatToFixed;
     return [
-      {
-        label: "Absolute Capacity",
-        value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity"))
-      },
       {
         label: "Absolute Used",
+        style: "primary",
         value: this.get("name") === "root" ? floatToFixed(this.get("usedCapacity")) : floatToFixed(this.get("absUsedCapacity"))
       },
+      {
+        label: "Absolute Capacity",
+        style: "primary",
+        value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity"))
+      },
       {
         label: "Absolute Max Capacity",
+        style: "secondary",
         value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity"))
       }
     ];

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss

@@ -1,6 +1,7 @@
 @import 'variables.scss';
 @import 'layout.scss';
 @import 'yarn-app.scss';
+@import './compose-box.scss';
 
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
@@ -191,7 +192,7 @@ table.dataTable thead .sorting_desc_disabled {
 
 .breadcrumb {
   padding-bottom: 3px;
-  background-color: none;
+  background: none;
 }
 
 .navbar-default .navbar-nav > li > a {
@@ -744,4 +745,57 @@ div.service-action-mask img {
   background: none;
   border: none;
   box-shadow: none;
-}
+}
+
+.queue-page-breadcrumb,
+#tree-selector-container {
+  width: calc(100% - #{$compose-box-width});
+}
+
+#tree-selector-container {
+  overflow: scroll;
+}
+
+.flex {
+  display: flex;
+}
+
+.yarn-label {
+  border-radius: 3px;
+  margin-bottom: 5px;
+  border: 1px solid $yarn-panel-bg;
+  font-size: 12px;
+  > span {
+    padding: 5px;
+  }
+  &.primary {
+    display: inline-grid;
+    .label-key {
+      color: $yarn-panel-bg;
+      background: #666;
+    }
+    .label-value {
+      color: $yarn-panel-bg;
+      background: $yarn-success-border;
+    }
+  }
+  &.secondary {
+    display: inline-table;
+    .label-key {
+      color: $yarn-panel-bg;
+      background: #999;
+    }
+
+    .label-value {
+      color: $yarn-panel-bg;
+      background: yellowgreen;
+    }
+  }
+}
+
+.yarn-queues-container {
+  padding: 15px;
+  h3 {
+    margin-top: 0;
+  }
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss

@@ -0,0 +1,39 @@
+/**
+ * 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 'variables.scss';
+
+.yarn-compose-box {
+  position: fixed;
+  bottom: 0;
+  top: 0px;
+  right: 0px;
+  background-color: $yarn-panel-bg;
+  border: 1px solid $yarn-border-color;
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  max-width: $compose-box-width;
+  overflow: scroll;
+
+  .panel-heading {
+    background-color: $yarn-header-bg !important;
+    border-color: $yarn-border-color;
+    border-radius: 3px;
+  }
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss

@@ -40,3 +40,7 @@
 .tail-2 {
   margin-right: 10px
 }
+
+.top-1 {
+  margin-top: 5px;
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss

@@ -37,8 +37,7 @@ $yarn-warn-border: $color-yellow-secondary;
 $yarn-warn-bg: $color-yellow-primary;
 
 $yarn-gray-icon: $color-gray-40;
-
 $yarn-muted-text: $color-gray-60;
 
-
+$compose-box-width: 400px;
 //shadows

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs

@@ -16,60 +16,29 @@
  * limitations under the License.
 }}
 
-<div class="row">
-
-  <div class="col-lg-6 container-fluid">
+<div>
+  <div class="col-lg-6">
     <div class="panel panel-default">
       <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
+        Running Apps: {{model.selected}}
       </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=170
-        ratio=0.55
+      <div id="numapplications-donut-chart">
+        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+        showLabels=true
+        parentId="numapplications-donut-chart"
+        ratio=0.6
         maxHeight=350}}
       </div>
     </div>
   </div>
 
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
-      </div>
-        {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
-    </div>
-  </div>
-
-</div>
-
-<div class="row">
-
-    <div class="col-lg-6 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          Running Apps: {{model.selected}}
-        </div>
-        <div class="container-fluid" id="numapplications-donut-chart">
-          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-          showLabels=true
-          parentId="numapplications-donut-chart"
-          ratio=0.6
-          maxHeight=350}}
-        </div>
-      </div>
-    </div>
-
   {{#if model.selectedQueue.hasUserUsages}}
-    <div class="col-lg-6 container-fluid">
+    <div class="col-lg-6">
       <div class="panel panel-default">
         <div class="panel-heading">
           User Usages: {{model.selected}}
         </div>
-        <div class="container-fluid"  id="userusage-donut-chart">
+        <div id="userusage-donut-chart">
           {{donut-chart data=model.selectedQueue.userUsagesDonutChartData
           showLabels=true
           parentId="userusage-donut-chart"

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs

@@ -19,45 +19,56 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedCapacity" max="absMaxCapacity"}}
 
-<div class="row">
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
+<div class="yarn-compose-box yarn-queues-container">
+  <div>
+    <h3>
+      <a href="#/yarn-queue/{{model.selected}}/apps">
+        {{model.selected}}
+      </a>
+    </h3>
+    {{#if model.selectedQueue.state}}
+      <div>
+        {{em-table-simple-status-cell content=model.selectedQueue.state}}
       </div>
-        {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
+    {{/if}}
+    <div class="top-1">
+      {{#each model.selectedQueue.capacitiesBarChartData as |item|}}
+        <span class="yarn-label {{item.style}}">
+          <span class="label-key"> {{lower item.label}}</span>
+          <span class="label-value">{{item.value}}%</span>
+        </span>
+      {{/each}}
     </div>
-  </div>
-
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
-      </div>
+    <div class="top-1">
+      <span class="yarn-label secondary">
+        <span class="label-key">configured capacity</span>
+        <span class="label-value">{{model.selectedQueue.capacity}}%</span>
+      </span>
+      <span class="yarn-label secondary">
+        <span class="label-key">configured max capacity</span>
+        <span class="label-value">{{model.selectedQueue.maxCapacity}}%</span>
+      </span>
     </div>
+    {{#if model.selectedQueue.isLeafQueue}}
+      <div class="top-1">
+        <span class="yarn-label secondary">
+          <span class="label-key">user limit</span>
+          <span class="label-value">{{model.selectedQueue.userLimit}}%</span>
+        </span>
+        <span class="yarn-label secondary">
+          <span class="label-key">user limit factor</span>
+          <span class="label-value">{{model.selectedQueue.userLimitFactor}}</span>
+        </span>
+      </div>
+    {{/if}}
   </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Running Apps: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="numapplications-donut-chart">
-        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-        showLabels=true
-        parentId="numapplications-donut-chart"
-        ratio=0.6
-        maxHeight=350}}
-      </div>
-    </div>
+  <h5> Running Apps </h5>
+  <div id="numapplications-donut-chart">
+    {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+    showLabels=true
+    parentId="numapplications-donut-chart"
+    ratio=0.6
+    maxHeight=350}}
   </div>
 </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs

@@ -19,44 +19,46 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedResources.memory" max="clusterResources.memory"}}
 
-<div class="row">
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
+<div class="yarn-compose-box">
+  <div class="panel-heading">
+    Queue Information: {{model.selected}}
+  </div>
+  <div class="panel-body">
+    <div class="container-fluid">
+      <div class="panel panel-default">
+          {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
       </div>
-        {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Queue Capacities: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="capacity-bar-chart">
+          <br/>
+          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+          title=""
+          parentId="capacity-bar-chart"
+          textWidth=175
+          ratio=0.55
+          maxHeight=350}}
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Running Apps: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="numapplications-donut-chart">
-        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-        showLabels=true
-        parentId="numapplications-donut-chart"
-        ratio=0.6
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Running Apps: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="numapplications-donut-chart">
+          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+          showLabels=true
+          parentId="numapplications-donut-chart"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
       </div>
     </div>
   </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs

@@ -19,29 +19,30 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedNodeCapacity" max="totalNodeCapacity"}}
 
-<div class="row">
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
-      </div>
-        {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
-    </div>
+<div class="yarn-compose-box">
+  <div class="panel-heading">
+    Queue Information: {{model.selected}}
   </div>
-
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
+  <div class="panel-body">
+    <div class="container-fluid">
+      <div class="panel panel-default">
+          {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
       </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
+    </div>
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Queue Capacities: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="capacity-bar-chart">
+          <br/>
+          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+          title=""
+          parentId="capacity-bar-chart"
+          textWidth=175
+          ratio=0.55
+          maxHeight=350}}
+        </div>
       </div>
     </div>
   </div>

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

@@ -18,34 +18,61 @@
 
 {{breadcrumb-bar breadcrumbs=breadcrumbs}}
 
-<div class="col-md-12 container-fluid">
-  <div class="row">
-
-    <div class="col-md-2 container-fluid">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h4>Queue</h4>
+<div class="panel-group">
+  <div class="panel panel-default">
+    <div class="yarn-app-header">
+      <div class="flex">
+        <div class="top-1">
+          <h3>{{model.selected}}</h3>
+          {{#if model.selectedQueue.state}}
+          <div>
+            {{em-table-simple-status-cell content=model.selectedQueue.state}}
+          </div>
+          {{/if}}
+          <div class="top-1">
+            <span class="yarn-label secondary">
+              <span class="label-key">configured capacity</span>
+              <span class="label-value">{{model.selectedQueue.capacity}}%</span>
+            </span>
+            <span class="yarn-label secondary">
+              <span class="label-key">configured max capacity</span>
+              <span class="label-value">{{model.selectedQueue.maxCapacity}}%</span>
+            </span>
+            {{#if model.selectedQueue.isLeafQueue}}
+            <span class="yarn-label secondary">
+              <span class="label-key">user limit</span>
+              <span class="label-value">{{model.selectedQueue.userLimit}}%</span>
+            </span>
+            <span class="yarn-label secondary">
+              <span class="label-key">user limit factor</span>
+              <span class="label-value">{{model.selectedQueue.userLimitFactor}}</span>
+            </span>
+            {{/if}}
+          </div>
         </div>
-        <div class="panel-body">
-          <ul class="nav nav-pills nav-stacked" id="stacked-menu">
-            <ul class="nav nav-pills nav-stacked collapse in">
-              {{#link-to 'yarn-queue.info' tagName="li"}}
-                {{#link-to 'yarn-queue.info' model.selected}}Information
-                {{/link-to}}
-              {{/link-to}}
-              {{#link-to 'yarn-queue.apps' tagName="li"}}
-                {{#link-to 'yarn-queue.apps' model.selected}}Applications List
-                {{/link-to}}
-              {{/link-to}}
-            </ul>
-          </ul>
+        <div class="flex-right">
+          {{#each model.selectedQueue.capacitiesBarChartData as |item|}}
+            <span class="yarn-label primary">
+              <span class="label-key"> {{lower item.label}}</span>
+              <span class="label-value">{{item.value}}%</span>
+            </span>
+          {{/each}}
         </div>
       </div>
     </div>
-
-    <div class="col-md-10 container-fluid">
+        <div class="panel-heading">
+      <div class="clearfix">
+        <ul class="nav nav-pills">
+          <ul class="nav nav-pills collapse in">
+            {{#link-to 'yarn-queue.apps' tagName="li" class=(if (eq target.currentPath 'yarn-queue.apps') "active")}}
+              {{#link-to 'yarn-queue.apps' appId (query-params service=model.serviceName)}}Applications{{/link-to}}
+            {{/link-to}}
+          </ul>
+        </ul>
+      </div>
+    </div>
+    <div class="panel-body yarn-app-body">
       {{outlet}}
     </div>
-
   </div>
 </div>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs

@@ -17,9 +17,20 @@
 }}
 
 <div class="row">
-  <div class="col-lg-12 container-fluid">
+  <div class="col-lg-12">
+    <div class="row">
+      {{#if (eq model.queues.firstObject.type "capacity")}}
+        {{yarn-queue.capacity-queue-info model=model}}
+      {{else if (eq model.queues.firstObject.type "fair")}}
+        {{yarn-queue.fair-queue-info model=model}}
+      {{else}}
+        {{yarn-queue.fifo-queue-info model=model}}
+      {{/if}}
+    </div>
+  </div>
+  <div class="col-lg-12 yarn-applications-container">
     {{#if model.apps}}
-      {{em-table columns=columns rows=model.apps}}
+      {{em-table columns=columns rows=model.apps  definition=tableDefinitio}}
     {{else}}
       <h4 align = "center">Could not find any applications from this cluster</h4>
     {{/if}}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs

@@ -15,11 +15,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 }}
-
-{{#if (eq model.queues.firstObject.type "capacity")}}
-  {{yarn-queue.capacity-queue-info model=model}}
-{{else if (eq model.queues.firstObject.type "fair")}}
-  {{yarn-queue.fair-queue-info model=model}}
-{{else}}
-  {{yarn-queue.fifo-queue-info model=model}}
-{{/if}}
+<div class="row">
+  {{#if (eq model.queues.firstObject.type "capacity")}}
+    {{yarn-queue.capacity-queue-info model=model}}
+  {{else if (eq model.queues.firstObject.type "fair")}}
+    {{yarn-queue.fair-queue-info model=model}}
+  {{else}}
+    {{yarn-queue.fifo-queue-info model=model}}
+  {{/if}}
+</div>

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

@@ -15,8 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 }}
-
-{{breadcrumb-bar breadcrumbs=breadcrumbs}}
+<div class="queue-page-breadcrumb">
+  {{breadcrumb-bar breadcrumbs=breadcrumbs}}
+</div>
 <div class="container-fluid">
   {{#if (eq model.queues.firstObject.type "capacity")}}
     {{yarn-queue.capacity-queue model=model}}