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))
|
||||
.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")
|
||||
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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"))
|
||||
}
|
||||
];
|
||||
|
||||
@ -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 {
|
||||
@ -745,3 +746,56 @@ div.service-action-mask img {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
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-gray-icon: $color-gray-40;
|
||||
|
||||
$yarn-muted-text: $color-gray-60;
|
||||
|
||||
|
||||
$compose-box-width: 400px;
|
||||
//shadows
|
||||
|
||||
@ -16,44 +16,13 @@
|
||||
* limitations under the License.
|
||||
}}
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6 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=170
|
||||
ratio=0.55
|
||||
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>
|
||||
<div class="col-lg-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
Running Apps: {{model.selected}}
|
||||
</div>
|
||||
<div class="container-fluid" id="numapplications-donut-chart">
|
||||
<div id="numapplications-donut-chart">
|
||||
{{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
|
||||
showLabels=true
|
||||
parentId="numapplications-donut-chart"
|
||||
@ -64,12 +33,12 @@
|
||||
</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"
|
||||
|
||||
@ -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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,17 +19,18 @@
|
||||
{{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="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>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 container-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
Queue Capacities: {{model.selected}}
|
||||
@ -46,7 +47,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 container-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
Running Apps: {{model.selected}}
|
||||
@ -60,4 +61,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,17 +19,17 @@
|
||||
{{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="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.fifo-queue-conf-table queue=model.selectedQueue}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 container-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
Queue Capacities: {{model.selected}}
|
||||
@ -45,4 +45,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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-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="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="panel-heading">
|
||||
<h4>Queue</h4>
|
||||
</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}}
|
||||
<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>
|
||||
|
||||
<div class="col-md-10 container-fluid">
|
||||
<div class="panel-body yarn-app-body">
|
||||
{{outlet}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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")}}
|
||||
<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")}}
|
||||
{{else if (eq model.queues.firstObject.type "fair")}}
|
||||
{{yarn-queue.fair-queue-info model=model}}
|
||||
{{else}}
|
||||
{{else}}
|
||||
{{yarn-queue.fifo-queue-info model=model}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
@ -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}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user