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 containerId = hash.containerId;
var html = '<td>'; var html = '<td>';
for (var i = 0; i < logFilesLen; i++) { 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 + '/' + html = html + '<a href="#/yarn-container-log/' + nodeId + '/' +
nodeAddr + '/' + containerId + '/' + logFiles[i] + '">' + logFiles[i] + nodeAddr + '/' + containerId + '/' + logFileName + '">' + logFileName +
'</a>'; '</a>';
if (i !== logFilesLen - 1) { if (i !== logFilesLen - 1) {
html = html + ","; html = html + ",";

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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