big-data/hadoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sunil G 2017-12-01 13:26:01 +05:30
parent 60fd0d7fd7
commit 4653aa3eb3
16 changed files with 302 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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")

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

@ -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
});

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

@ -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 () {

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

@ -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"))
}
];

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

@ -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;
}
}

39
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss Normal file
View File

@ -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;
}
}

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

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

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

@ -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

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

@ -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"

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

@ -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 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">
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 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>

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

@ -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>
{{yarn-queue.fair-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-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="panel-body">
<div class="container-fluid">
<div class="panel panel-default">
{{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
</div>
</div>
</div>
<div class="col-lg-4 container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
Running Apps: {{model.selected}}
<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 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 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>

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

@ -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>

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

@ -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>

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

@ -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}}

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

@ -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>

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

@ -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}}