YARN-7546. Layout changes in Queue UI to show queue details on right pane. Contributed by Vasudevan Skm.
This commit is contained in:
Sunil G
parent
60fd0d7fd7
commit
4653aa3eb3
@ -146,7 +146,7 @@ export default Ember.Component.extend({
|
|||||||
|
|
||||||
}.bind(this))
|
}.bind(this))
|
||||||
.on("dblclick", function (d) {
|
.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")
|
nodeEnter.append("circle")
|
||||||
|
|||||||
@ -33,15 +33,11 @@ export default Ember.Controller.extend({
|
|||||||
text: "Queues",
|
text: "Queues",
|
||||||
routeName: 'yarn-queues',
|
routeName: 'yarn-queues',
|
||||||
model: 'root'
|
model: 'root'
|
||||||
}, {
|
|
||||||
text: `Queue [ ${queueName} ]`,
|
|
||||||
routeName: 'yarn-queue.info',
|
|
||||||
model: queueName
|
|
||||||
}];
|
}];
|
||||||
|
|
||||||
if (path && path === "yarn-queue.apps") {
|
if (path && path === "yarn-queue.apps") {
|
||||||
crumbs.push({
|
crumbs.push({
|
||||||
text: "Applications",
|
text: `Queue [ ${queueName} ]`,
|
||||||
routeName: 'yarn-queue.apps',
|
routeName: 'yarn-queue.apps',
|
||||||
model: queueName
|
model: queueName
|
||||||
});
|
});
|
||||||
|
|||||||
@ -21,8 +21,10 @@ import TableDefinition from 'em-table/utils/table-definition';
|
|||||||
import AppTableController from '../app-table-columns';
|
import AppTableController from '../app-table-columns';
|
||||||
|
|
||||||
export default AppTableController.extend({
|
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.
|
// 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 () {
|
_selectedObserver: Ember.on("init", Ember.observer("model.selected", function () {
|
||||||
|
|||||||
@ -50,16 +50,19 @@ export default DS.Model.extend({
|
|||||||
capacitiesBarChartData: function() {
|
capacitiesBarChartData: function() {
|
||||||
var floatToFixed = Converter.floatToFixed;
|
var floatToFixed = Converter.floatToFixed;
|
||||||
return [
|
return [
|
||||||
{
|
|
||||||
label: "Absolute Capacity",
|
|
||||||
value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity"))
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Absolute Used",
|
label: "Absolute Used",
|
||||||
|
style: "primary",
|
||||||
value: this.get("name") === "root" ? floatToFixed(this.get("usedCapacity")) : floatToFixed(this.get("absUsedCapacity"))
|
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",
|
label: "Absolute Max Capacity",
|
||||||
|
style: "secondary",
|
||||||
value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity"))
|
value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity"))
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
@import 'variables.scss';
|
@import 'variables.scss';
|
||||||
@import 'layout.scss';
|
@import 'layout.scss';
|
||||||
@import 'yarn-app.scss';
|
@import 'yarn-app.scss';
|
||||||
|
@import './compose-box.scss';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Licensed to the Apache Software Foundation (ASF) under one
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
@ -191,7 +192,7 @@ table.dataTable thead .sorting_desc_disabled {
|
|||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
background-color: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-default .navbar-nav > li > a {
|
.navbar-default .navbar-nav > li > a {
|
||||||
@ -745,3 +746,56 @@ div.service-action-mask img {
|
|||||||
border: none;
|
border: none;
|
||||||
box-shadow: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -40,3 +40,7 @@
|
|||||||
.tail-2 {
|
.tail-2 {
|
||||||
margin-right: 10px
|
margin-right: 10px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-1 {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|||||||
@ -37,8 +37,7 @@ $yarn-warn-border: $color-yellow-secondary;
|
|||||||
$yarn-warn-bg: $color-yellow-primary;
|
$yarn-warn-bg: $color-yellow-primary;
|
||||||
|
|
||||||
$yarn-gray-icon: $color-gray-40;
|
$yarn-gray-icon: $color-gray-40;
|
||||||
|
|
||||||
$yarn-muted-text: $color-gray-60;
|
$yarn-muted-text: $color-gray-60;
|
||||||
|
|
||||||
|
$compose-box-width: 400px;
|
||||||
//shadows
|
//shadows
|
||||||
|
|||||||
@ -16,60 +16,29 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
}}
|
}}
|
||||||
|
|
||||||
<div class="row">
|
<div>
|
||||||
|
<div class="col-lg-6">
|
||||||
<div class="col-lg-6 container-fluid">
|
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
Queue Capacities: {{model.selected}}
|
Running Apps: {{model.selected}}
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="capacity-bar-chart">
|
<div id="numapplications-donut-chart">
|
||||||
<br/>
|
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
||||||
{{bar-chart data=model.selectedQueue.capacitiesBarChartData
|
showLabels=true
|
||||||
title=""
|
parentId="numapplications-donut-chart"
|
||||||
parentId="capacity-bar-chart"
|
ratio=0.6
|
||||||
textWidth=170
|
|
||||||
ratio=0.55
|
|
||||||
maxHeight=350}}
|
maxHeight=350}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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}}
|
{{#if model.selectedQueue.hasUserUsages}}
|
||||||
<div class="col-lg-6 container-fluid">
|
<div class="col-lg-6">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
User Usages: {{model.selected}}
|
User Usages: {{model.selected}}
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="userusage-donut-chart">
|
<div id="userusage-donut-chart">
|
||||||
{{donut-chart data=model.selectedQueue.userUsagesDonutChartData
|
{{donut-chart data=model.selectedQueue.userUsagesDonutChartData
|
||||||
showLabels=true
|
showLabels=true
|
||||||
parentId="userusage-donut-chart"
|
parentId="userusage-donut-chart"
|
||||||
|
|||||||
@ -19,45 +19,56 @@
|
|||||||
{{queue-navigator model=model.queues selected=model.selected
|
{{queue-navigator model=model.queues selected=model.selected
|
||||||
used="usedCapacity" max="absMaxCapacity"}}
|
used="usedCapacity" max="absMaxCapacity"}}
|
||||||
|
|
||||||
<div class="row">
|
<div class="yarn-compose-box yarn-queues-container">
|
||||||
<div class="col-lg-4 container-fluid">
|
<div>
|
||||||
<div class="panel panel-default">
|
<h3>
|
||||||
<div class="panel-heading">
|
<a href="#/yarn-queue/{{model.selected}}/apps">
|
||||||
Queue Information: {{model.selected}}
|
{{model.selected}}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
{{#if model.selectedQueue.state}}
|
||||||
|
<div>
|
||||||
|
{{em-table-simple-status-cell content=model.selectedQueue.state}}
|
||||||
</div>
|
</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="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>
|
||||||
|
|
||||||
<div class="col-lg-4 container-fluid">
|
<h5> Running Apps </h5>
|
||||||
<div class="panel panel-default">
|
<div id="numapplications-donut-chart">
|
||||||
<div class="panel-heading">
|
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
||||||
Queue Capacities: {{model.selected}}
|
showLabels=true
|
||||||
</div>
|
parentId="numapplications-donut-chart"
|
||||||
<div class="container-fluid" id="capacity-bar-chart">
|
ratio=0.6
|
||||||
<br/>
|
maxHeight=350}}
|
||||||
{{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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,44 +19,46 @@
|
|||||||
{{queue-navigator model=model.queues selected=model.selected
|
{{queue-navigator model=model.queues selected=model.selected
|
||||||
used="usedResources.memory" max="clusterResources.memory"}}
|
used="usedResources.memory" max="clusterResources.memory"}}
|
||||||
|
|
||||||
<div class="row">
|
<div class="yarn-compose-box">
|
||||||
<div class="col-lg-4 container-fluid">
|
<div class="panel-heading">
|
||||||
<div class="panel panel-default">
|
Queue Information: {{model.selected}}
|
||||||
<div class="panel-heading">
|
|
||||||
Queue Information: {{model.selected}}
|
|
||||||
</div>
|
|
||||||
{{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
<div class="col-lg-4 container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
{{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
|
||||||
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>
|
|
||||||
|
|
||||||
<div class="col-lg-4 container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">
|
||||||
Running Apps: {{model.selected}}
|
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="container-fluid" id="numapplications-donut-chart">
|
</div>
|
||||||
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
|
||||||
showLabels=true
|
<div class="container-fluid">
|
||||||
parentId="numapplications-donut-chart"
|
<div class="panel panel-default">
|
||||||
ratio=0.6
|
<div class="panel-heading">
|
||||||
maxHeight=350}}
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,29 +19,30 @@
|
|||||||
{{queue-navigator model=model.queues selected=model.selected
|
{{queue-navigator model=model.queues selected=model.selected
|
||||||
used="usedNodeCapacity" max="totalNodeCapacity"}}
|
used="usedNodeCapacity" max="totalNodeCapacity"}}
|
||||||
|
|
||||||
<div class="row">
|
<div class="yarn-compose-box">
|
||||||
<div class="col-lg-6 container-fluid">
|
<div class="panel-heading">
|
||||||
<div class="panel panel-default">
|
Queue Information: {{model.selected}}
|
||||||
<div class="panel-heading">
|
|
||||||
Queue Information: {{model.selected}}
|
|
||||||
</div>
|
|
||||||
{{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
<div class="col-lg-6 container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
{{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
|
||||||
Queue Capacities: {{model.selected}}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="container-fluid" id="capacity-bar-chart">
|
</div>
|
||||||
<br/>
|
<div class="container-fluid">
|
||||||
{{bar-chart data=model.selectedQueue.capacitiesBarChartData
|
<div class="panel panel-default">
|
||||||
title=""
|
<div class="panel-heading">
|
||||||
parentId="capacity-bar-chart"
|
Queue Capacities: {{model.selected}}
|
||||||
textWidth=175
|
</div>
|
||||||
ratio=0.55
|
<div class="container-fluid" id="capacity-bar-chart">
|
||||||
maxHeight=350}}
|
<br/>
|
||||||
|
{{bar-chart data=model.selectedQueue.capacitiesBarChartData
|
||||||
|
title=""
|
||||||
|
parentId="capacity-bar-chart"
|
||||||
|
textWidth=175
|
||||||
|
ratio=0.55
|
||||||
|
maxHeight=350}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -18,34 +18,61 @@
|
|||||||
|
|
||||||
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
||||||
|
|
||||||
<div class="col-md-12 container-fluid">
|
<div class="panel-group">
|
||||||
<div class="row">
|
<div class="panel panel-default">
|
||||||
|
<div class="yarn-app-header">
|
||||||
<div class="col-md-2 container-fluid">
|
<div class="flex">
|
||||||
<div class="panel panel-default">
|
<div class="top-1">
|
||||||
<div class="panel-heading">
|
<h3>{{model.selected}}</h3>
|
||||||
<h4>Queue</h4>
|
{{#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>
|
||||||
<div class="panel-body">
|
<div class="flex-right">
|
||||||
<ul class="nav nav-pills nav-stacked" id="stacked-menu">
|
{{#each model.selectedQueue.capacitiesBarChartData as |item|}}
|
||||||
<ul class="nav nav-pills nav-stacked collapse in">
|
<span class="yarn-label primary">
|
||||||
{{#link-to 'yarn-queue.info' tagName="li"}}
|
<span class="label-key"> {{lower item.label}}</span>
|
||||||
{{#link-to 'yarn-queue.info' model.selected}}Information
|
<span class="label-value">{{item.value}}%</span>
|
||||||
{{/link-to}}
|
</span>
|
||||||
{{/link-to}}
|
{{/each}}
|
||||||
{{#link-to 'yarn-queue.apps' tagName="li"}}
|
|
||||||
{{#link-to 'yarn-queue.apps' model.selected}}Applications List
|
|
||||||
{{/link-to}}
|
|
||||||
{{/link-to}}
|
|
||||||
</ul>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="panel-heading">
|
||||||
<div class="col-md-10 container-fluid">
|
<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}}
|
{{outlet}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -17,9 +17,20 @@
|
|||||||
}}
|
}}
|
||||||
|
|
||||||
<div class="row">
|
<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}}
|
{{#if model.apps}}
|
||||||
{{em-table columns=columns rows=model.apps}}
|
{{em-table columns=columns rows=model.apps definition=tableDefinitio}}
|
||||||
{{else}}
|
{{else}}
|
||||||
<h4 align = "center">Could not find any applications from this cluster</h4>
|
<h4 align = "center">Could not find any applications from this cluster</h4>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|||||||
@ -15,11 +15,12 @@
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
}}
|
}}
|
||||||
|
<div class="row">
|
||||||
{{#if (eq model.queues.firstObject.type "capacity")}}
|
{{#if (eq model.queues.firstObject.type "capacity")}}
|
||||||
{{yarn-queue.capacity-queue-info model=model}}
|
{{yarn-queue.capacity-queue-info model=model}}
|
||||||
{{else if (eq model.queues.firstObject.type "fair")}}
|
{{else if (eq model.queues.firstObject.type "fair")}}
|
||||||
{{yarn-queue.fair-queue-info model=model}}
|
{{yarn-queue.fair-queue-info model=model}}
|
||||||
{{else}}
|
{{else}}
|
||||||
{{yarn-queue.fifo-queue-info model=model}}
|
{{yarn-queue.fifo-queue-info model=model}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|||||||
@ -15,8 +15,9 @@
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
}}
|
}}
|
||||||
|
<div class="queue-page-breadcrumb">
|
||||||
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
{{breadcrumb-bar breadcrumbs=breadcrumbs}}
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
{{#if (eq model.queues.firstObject.type "capacity")}}
|
{{#if (eq model.queues.firstObject.type "capacity")}}
|
||||||
{{yarn-queue.capacity-queue model=model}}
|
{{yarn-queue.capacity-queue model=model}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user