YARN-6182. Fix alignment issues and missing information in new YARN UI's Queue page. Contributed by Akhil PB.
This commit is contained in:
Sunil G
parent
592bf2d550
commit
f702c95754
|
|
@ -258,7 +258,6 @@ export default BaseChartComponent.extend({
|
|||
},
|
||||
|
||||
didInsertElement: function () {
|
||||
var parentId = this.get("parentId");
|
||||
var self = this;
|
||||
var optionsData = [this.memoryLabel, this.cpuLabel, this.containersLabel];
|
||||
d3.select("#heatmap-select")
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ export default Ember.Component.extend({
|
|||
.attr("r", 1e-6)
|
||||
.style("fill", function(d) {
|
||||
var maxCap = d.queueData.get(this.max);
|
||||
maxCap = maxCap == undefined ? 100 : maxCap;
|
||||
maxCap = maxCap === undefined ? 100 : maxCap;
|
||||
var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
|
||||
if (usedCap <= 60.0) {
|
||||
return "LimeGreen";
|
||||
|
|
@ -172,7 +172,7 @@ export default Ember.Component.extend({
|
|||
.attr("text-anchor", function() { return "middle"; })
|
||||
.text(function(d) {
|
||||
var maxCap = d.queueData.get(this.max);
|
||||
maxCap = maxCap == undefined ? 100 : maxCap;
|
||||
maxCap = maxCap === undefined ? 100 : maxCap;
|
||||
var usedCap = d.queueData.get(this.used) / maxCap * 100.0;
|
||||
if (usedCap >= 100.0) {
|
||||
return usedCap.toFixed(0) + "%";
|
||||
|
|
|
|||
|
|
@ -50,6 +50,13 @@ export default Ember.Controller.extend({
|
|||
html = html + '><a href="yarn-nodes">Nodes<span class="sr-only">' +
|
||||
'(current)</span></a></li>';
|
||||
return Ember.String.htmlSafe(html);
|
||||
}.property('currentPath'),
|
||||
|
||||
isQueuesTabActive: function() {
|
||||
var path = this.get('currentPath');
|
||||
if (path === 'yarn-queues') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}.property('currentPath')
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
*/
|
||||
|
||||
import DS from 'ember-data';
|
||||
import Converter from 'yarn-ui/utils/converter';
|
||||
|
||||
export default DS.Model.extend({
|
||||
name: DS.attr('string'),
|
||||
|
|
@ -46,18 +47,19 @@ export default DS.Model.extend({
|
|||
}.property("children"),
|
||||
|
||||
capacitiesBarChartData: function() {
|
||||
var floatToFixed = Converter.floatToFixed;
|
||||
return [
|
||||
{
|
||||
label: "Absolute Capacity",
|
||||
value: this.get("name") === "root" ? 100 : this.get("absCapacity")
|
||||
value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absCapacity"))
|
||||
},
|
||||
{
|
||||
label: "Absolute Used",
|
||||
value: this.get("name") === "root" ? this.get("usedCapacity") : this.get("absUsedCapacity")
|
||||
value: this.get("name") === "root" ? floatToFixed(this.get("usedCapacity")) : floatToFixed(this.get("absUsedCapacity"))
|
||||
},
|
||||
{
|
||||
label: "Absolute Max Capacity",
|
||||
value: this.get("name") === "root" ? 100 : this.get("absMaxCapacity")
|
||||
value: this.get("name") === "root" ? 100 : floatToFixed(this.get("absMaxCapacity"))
|
||||
}
|
||||
];
|
||||
}.property("absCapacity", "usedCapacity", "absMaxCapacity"),
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
*/
|
||||
|
||||
import DS from 'ember-data';
|
||||
import Converter from 'yarn-ui/utils/converter';
|
||||
|
||||
export default DS.Model.extend({
|
||||
name: DS.attr('string'),
|
||||
|
|
@ -48,18 +49,19 @@ export default DS.Model.extend({
|
|||
}.property("children"),
|
||||
|
||||
capacitiesBarChartData: function() {
|
||||
var floatToFixed = Converter.floatToFixed;
|
||||
return [
|
||||
{
|
||||
label: "Steady Fair Memory",
|
||||
value: this.get("steadyFairResources.memory")
|
||||
value: floatToFixed(this.get("steadyFairResources.memory"))
|
||||
},
|
||||
{
|
||||
label: "Used Memory",
|
||||
value: this.get("usedResources.memory")
|
||||
value: floatToFixed(this.get("usedResources.memory"))
|
||||
},
|
||||
{
|
||||
label: "Maximum Memory",
|
||||
value: this.get("maxResources.memory")
|
||||
value: floatToFixed(this.get("maxResources.memory"))
|
||||
}
|
||||
];
|
||||
}.property("maxResources.memory", "usedResources.memory", "maxResources.memory"),
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
*/
|
||||
|
||||
import DS from 'ember-data';
|
||||
import Converter from 'yarn-ui/utils/converter';
|
||||
|
||||
export default DS.Model.extend({
|
||||
name: DS.attr('string'),
|
||||
|
|
@ -33,18 +34,19 @@ export default DS.Model.extend({
|
|||
type: DS.attr('string'),
|
||||
|
||||
capacitiesBarChartData: function() {
|
||||
var floatToFixed = Converter.floatToFixed;
|
||||
return [
|
||||
{
|
||||
label: "Available Capacity",
|
||||
value: this.get("availNodeCapacity")
|
||||
value: floatToFixed(this.get("availNodeCapacity"))
|
||||
},
|
||||
{
|
||||
label: "Used Capacity",
|
||||
value: this.get("usedNodeCapacity")
|
||||
value: floatToFixed(this.get("usedNodeCapacity"))
|
||||
},
|
||||
{
|
||||
label: "Total Capacity",
|
||||
value: this.get("totalNodeCapacity")
|
||||
value: floatToFixed(this.get("totalNodeCapacity"))
|
||||
}
|
||||
];
|
||||
}.property("availNodeCapacity", "usedNodeCapacity", "totalNodeCapacity")
|
||||
|
|
|
|||
|
|
@ -59,8 +59,9 @@ export default DS.JSONAPISerializer.extend({
|
|||
|
||||
handleQueue(store, primaryModelClass, payload, id, requestType) {
|
||||
var data = [];
|
||||
var includedData = [];
|
||||
if(!payload) return data;
|
||||
if (!payload) {
|
||||
return data;
|
||||
}
|
||||
var result = this.normalizeSingleResponse(store, primaryModelClass,
|
||||
payload, id, requestType);
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<span class="sr-only">(current)</span>
|
||||
{{/link-to}}
|
||||
{{/link-to}}
|
||||
{{#link-to 'yarn-queues' 'root' tagName="li"}}
|
||||
{{#link-to 'yarn-queues' 'root' tagName="li" classNameBindings="isQueuesTabActive:active"}}
|
||||
{{#link-to 'yarn-queues' 'root' class="navigation-link"}}Queues
|
||||
<span class="sr-only">(current)</span>
|
||||
{{/link-to}}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<td><b>Configurations</b></td>
|
||||
<td>Value</td>
|
||||
<td><b>Value</b></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -32,10 +32,12 @@
|
|||
<td>Configured Max Capacity</td>
|
||||
<td>{{queue.maxCapacity}}</td>
|
||||
</tr>
|
||||
{{#if queue.state}}
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>{{queue.state}}</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
{{#if queue.isLeafQueue}}
|
||||
<tr>
|
||||
<td>User Limit Percent</td>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<td><b>Configurations</b></td>
|
||||
<td>Value</td>
|
||||
<td><b>Value</b></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
{{bar-chart data=model.selectedQueue.capacitiesBarChartData
|
||||
title=""
|
||||
parentId="capacity-bar-chart"
|
||||
textWidth=150
|
||||
textWidth=175
|
||||
ratio=0.55
|
||||
maxHeight=350}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<td><b>Configurations</b></td>
|
||||
<td>Value</td>
|
||||
<td><b>Value</b></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -32,10 +32,12 @@
|
|||
<td>Used Capacity</td>
|
||||
<td>{{queue.usedCapacity}}</td>
|
||||
</tr>
|
||||
{{#if queue.state}}
|
||||
<tr>
|
||||
<td>State</td>
|
||||
<td>{{queue.state}}</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
<tr>
|
||||
<td>Minimum Queue Memory Capacity</td>
|
||||
<td>{{queue.minQueueMemoryCapacity}}</td>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
{{bar-chart data=model.selectedQueue.capacitiesBarChartData
|
||||
title=""
|
||||
parentId="capacity-bar-chart"
|
||||
textWidth=150
|
||||
textWidth=175
|
||||
ratio=0.55
|
||||
maxHeight=350}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -165,5 +165,11 @@ export default {
|
|||
unit = "GB";
|
||||
}
|
||||
return value.toFixed(1) + " " + unit;
|
||||
},
|
||||
floatToFixed: function(value, fixed=2) {
|
||||
if (value && value.toFixed) {
|
||||
return parseFloat(value.toFixed(fixed));
|
||||
}
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue