YARN-6196. Improve Resource Donut chart with better label in Node page of new YARN UI. Contributed by Akhil PB.

This commit is contained in:
Sunil G 2017-03-10 16:17:48 +05:30
parent fd26783aaf
commit e06ff18ab6
7 changed files with 37 additions and 21 deletions

View File

@ -35,8 +35,16 @@ export default Ember.Helper.helper(function(params,hash) {
var containerId = hash.containerId;
var html = '<td>';
for (var i = 0; i < logFilesLen; i++) {
var logFileName = "";
if (logFiles[i]) {
if (typeof logFiles[i] === "object" && logFiles[i].containerLogFiles) {
logFileName = logFiles[i].containerLogFiles;
} else if (typeof logFiles[i] === "string") {
logFileName = logFiles[i];
}
}
html = html + '<a href="#/yarn-container-log/' + nodeId + '/' +
nodeAddr + '/' + containerId + '/' + logFiles[i] + '">' + logFiles[i] +
nodeAddr + '/' + containerId + '/' + logFileName + '">' + logFileName +
'</a>';
if (i !== logFilesLen - 1) {
html = html + ",";

View File

@ -30,7 +30,7 @@ export default DS.JSONAPISerializer.extend({
containerId: payload.id,
state: payload.state,
user: payload.user,
diagnostics: payload.diagnostics,
diagnostics: payload.diagnostics || 'N/A',
exitCode: payload.exitCode,
totalMemoryNeeded: payload.totalMemoryNeededMB,
totalVCoresNeeded: payload.totalVCoresNeeded,

View File

@ -36,8 +36,8 @@ export default DS.JSONAPISerializer.extend({
pmemCheckEnabled: payload.pmemCheckEnabled,
nodeHealthy: payload.nodeHealthy,
lastNodeUpdateTime: Converter.timeStampToDate(payload.lastNodeUpdateTime),
healthReport: payload.healthReport,
nmStartupTime: Converter.timeStampToDate(payload.nmStartupTime),
healthReport: payload.healthReport || 'N/A',
nmStartupTime: payload.nmStartupTime? Converter.timeStampToDate(payload.nmStartupTime) : '',
nodeManagerBuildVersion: payload.nodeManagerBuildVersion,
hadoopBuildVersion: payload.hadoopBuildVersion
}

View File

@ -34,7 +34,7 @@ export default DS.JSONAPISerializer.extend({
nodeHostName: payload.nodeHostName,
nodeHTTPAddress: payload.nodeHTTPAddress,
lastHealthUpdate: Converter.timeStampToDate(payload.lastHealthUpdate),
healthReport: payload.healthReport,
healthReport: payload.healthReport || 'N/A',
numContainers: payload.numContainers,
usedMemoryMB: payload.usedMemoryMB,
availMemoryMB: payload.availMemoryMB,
@ -57,7 +57,7 @@ export default DS.JSONAPISerializer.extend({
normalizeArrayResponse(store, primaryModelClass, payload/*, id, requestType*/) {
// expected response is of the form { data: [ {}, {} ] }
var normalizedArrayResponse = {};
if (payload.nodes) {
if (payload.nodes && payload.nodes.node) {
// payload is of the form { "nodes": { "node": [ {},{},{} ] } }
normalizedArrayResponse.data = payload.nodes.node.map(singleNode => {
return this.internalNormalizeSingleResponse(store, primaryModelClass,

View File

@ -28,7 +28,7 @@
<div class="row">
<div class="col-md-12 container-fluid">
<div class="panel panel-default">
<div class="panel-heading">Node Information</div>
<div class="panel-heading">Node Information: {{model.rmNode.id}}</div>
<table class="table">
<tbody>
<tr>
@ -63,10 +63,12 @@
<td>Node Health Report</td>
<td>{{model.node.healthReport}}</td>
</tr>
{{#if model.node.nmStartupTime}}
<tr>
<td>Node Manager Start Time</td>
<td>{{model.node.nmStartupTime}}</td>
</tr>
{{/if}}
<tr>
<td>Node Manager Version</td>
<td>{{model.node.nodeManagerBuildVersion}}</td>
@ -82,22 +84,25 @@
</div>
<div class="row">
<div class="col-lg-5 container-fluid">
<div class="col-lg-6 container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
Resource - Memory (in MB)
Resource - Memory
</div>
<div class="container-fluid" id="mem-donut-chart">
{{donut-chart data=model.rmNode.getMemoryDataForDonutChart
showLabels=true
parentId="mem-donut-chart"
ratio=0.6
type="memory"
colorTargets="good"
colorTargetReverse=true
maxHeight=350}}
</div>
</div>
</div>
<div class="col-lg-5 container-fluid">
<div class="col-lg-6 container-fluid">
<div class="panel panel-default">
<div class="panel-heading">
Resource - VCores
@ -107,6 +112,8 @@
showLabels=true
parentId="vcore-donut-chart"
ratio=0.6
colorTargets="good"
colorTargetReverse=true
maxHeight=350}}
</div>
</div>

View File

@ -29,7 +29,7 @@
<ul class="nav nav-pills nav-stacked collapse in">
{{#link-to "yarn-nodes.table" tagName="li"}}
{{#link-to 'yarn-nodes.table'}}Nodes Table
{{#link-to 'yarn-nodes.table'}}Information
{{/link-to}}
{{/link-to}}

View File

@ -16,12 +16,13 @@
limitations under the License.
--}}
<div class="row">
<div class="col-md-12">
{{#if model.nodes}}
{{em-table columns=columns rows=model.nodes}}
{{else}}
<h4 align="center">No nodes found on this cluster</h4>
{{/if}}
</div>
</div>
{{outlet}}