You are viewing a plain text version of this content. The canonical link for it is here.
Posted to common-commits@hadoop.apache.org by vi...@apache.org on 2017/12/02 02:38:22 UTC
[09/50] [abbrv] hadoop git commit: YARN-7546. Layout changes in Queue
UI to show queue details on right pane. Contributed by Vasudevan Skm.
YARN-7546. Layout changes in Queue UI to show queue details on right pane. Contributed by Vasudevan Skm.
Project: http://git-wip-us.apache.org/repos/asf/hadoop/repo
Commit: http://git-wip-us.apache.org/repos/asf/hadoop/commit/4653aa3e
Tree: http://git-wip-us.apache.org/repos/asf/hadoop/tree/4653aa3e
Diff: http://git-wip-us.apache.org/repos/asf/hadoop/diff/4653aa3e
Branch: refs/heads/HDFS-9806
Commit: 4653aa3eb31fb23fa19136173685464d71f86613
Parents: 60fd0d7
Author: Sunil G <su...@apache.org>
Authored: Fri Dec 1 13:26:01 2017 +0530
Committer: Sunil G <su...@apache.org>
Committed: Fri Dec 1 13:26:01 2017 +0530
----------------------------------------------------------------------
.../main/webapp/app/components/tree-selector.js | 2 +-
.../main/webapp/app/controllers/yarn-queue.js | 6 +-
.../webapp/app/controllers/yarn-queue/apps.js | 6 +-
.../app/models/yarn-queue/capacity-queue.js | 11 ++-
.../src/main/webapp/app/styles/app.scss | 58 +++++++++++++-
.../src/main/webapp/app/styles/compose-box.scss | 39 ++++++++++
.../src/main/webapp/app/styles/layout.scss | 4 +
.../src/main/webapp/app/styles/variables.scss | 3 +-
.../yarn-queue/capacity-queue-info.hbs | 51 +++---------
.../components/yarn-queue/capacity-queue.hbs | 81 +++++++++++---------
.../components/yarn-queue/fair-queue.hbs | 66 ++++++++--------
.../components/yarn-queue/fifo-queue.hbs | 43 ++++++-----
.../main/webapp/app/templates/yarn-queue.hbs | 73 ++++++++++++------
.../webapp/app/templates/yarn-queue/apps.hbs | 15 +++-
.../webapp/app/templates/yarn-queue/info.hbs | 17 ++--
.../main/webapp/app/templates/yarn-queues.hbs | 5 +-
16 files changed, 300 insertions(+), 180 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js
index 7a9d53b..4645a48 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/tree-selector.js
+++ b/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")
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js
index 3a72b60..e9f945b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue.js
+++ b/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
});
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js
index 905d96d..c10624e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/controllers/yarn-queue/apps.js
+++ b/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 () {
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js
index 1d162e9..f892c2b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/models/yarn-queue/capacity-queue.js
@@ -51,15 +51,18 @@ export default DS.Model.extend({
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"))
}
];
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
index 471e346..87ee9a9 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
+++ b/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;
-}
\ No newline at end of file
+}
+
+.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;
+ }
+}
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss
new file mode 100644
index 0000000..0bfadb0
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss
index d31f145..587df66 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/layout.scss
+++ b/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;
+}
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
index 8226770..e25b482 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
+++ b/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
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue-info.hbs
----------------------------------------------------------------------
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..a7260bc 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
@@ -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"
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs
----------------------------------------------------------------------
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..bb9a87e 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
@@ -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>
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
index 6d0e994..dcc80c1 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
index 90cbd27..98db5cb 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
index ef2d285..87b596e 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs
index 4a508c1..6417910 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/apps.hbs
+++ b/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}}
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs
index 2f138a7..b84425a 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queue/info.hbs
+++ b/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>
http://git-wip-us.apache.org/repos/asf/hadoop/blob/4653aa3e/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
----------------------------------------------------------------------
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
index fccdb5b..b3165d5 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-queues.hbs
+++ b/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}}
---------------------------------------------------------------------
To unsubscribe, e-mail: common-commits-unsubscribe@hadoop.apache.org
For additional commands, e-mail: common-commits-help@hadoop.apache.org