Skip to content

A
atlas
Commit c3da6d5f by sameer79 Committed by Sarath Subramanian
Options

ATLAS-3463 UI : Show JVM resources stats on statistics modal

Signed-off-by: 's avatarSarath Subramanian <sarath@apache.org>
parent 596b74b0
Showing with 264 additions and 22 deletions
dashboardv2/public/css/scss/common.scss
......@@ -189,6 +189,21 @@ pre {
font-family: monospace;
}
}
.panel-body .memory-details {
pre {
&.code-block {
&.shrink {
height: 144px;
code {
height: 130px;
}
}
}
}
}
.footer-content {
position: fixed;
right: 0px;
......@@ -225,18 +240,18 @@ pre {
}
.custom-col-0{
.custom-col-0 {
text-align: center;
vertical-align: middle;
line-height: 31px;
width: 3%;
}
.custom-col-1{
width: 38%;
.custom-col-1 {
width: 39%;
}
.custom-col-2{
.custom-col-2 {
text-align: center;
width: 17%;
margin-left: 1%;
......
dashboardv2/public/js/templates/site/Statistics_tmpl.html
......@@ -16,7 +16,7 @@
-->
<div class="panel-group server-stats-container statsContainer hide" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
<div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true">
<div class="panel-heading" data-toggle="collapse" href="#entityCountCollapse" aria-expanded="true">
<h4 class="panel-title">
<a>Entities <span class="count">(0)</span></a>
</h4>
......@@ -24,7 +24,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div id="entityCountCollapse" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table entityTable" data-id="entity-card">
<tbody>
......@@ -37,7 +37,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="stats">
<div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true">
<div class="panel-heading" data-toggle="collapse" href="#serverDetailcollapse" aria-expanded="true">
<h4 class="panel-title">
<a>Server Statistics </a>
</h4>
......@@ -45,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse in">
<div id="serverDetailcollapse" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-sm-12">
<div class="card-container panel panel-primary">
......@@ -87,6 +87,62 @@
</div>
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="systemDetails">
<div class="panel-heading" data-toggle="collapse" href="#systemDetailCollapse" aria-expanded="false">
<h4 class="panel-title">
<a>System Details</a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="systemDetailCollapse" class="panel-collapse collapse ">
<div class="panel-body">
<div class="col-sm-6">
<div class="card-container panel panel-primary">
<div class="panel-heading">OS</div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="os-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card-container panel panel-primary">
<div class="panel-heading">Runtime</div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="runtime-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card-container panel panel-primary">
<div class="panel-heading">Memory</div>
<div class="panel-body">
<table class="table stat-table memory-details">
<tbody data-id="memory-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv2/public/js/views/site/Statistics.js
......@@ -49,7 +49,13 @@ define(['require',
notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']",
offsetCard: "[data-id='offset-card']"
offsetCard: "[data-id='offset-card']",
osCard: "[data-id='os-card']",
runtimeCard: "[data-id='runtime-card']",
memoryCard: "[data-id='memory-card']"
},
/** ui events hash */
events: function() {},
......@@ -92,6 +98,7 @@ define(['require',
var data = _.first(data.toJSON());
that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) {
......@@ -141,10 +148,10 @@ define(['require',
if (type === "active") {
activeEntityCount += intVal;
}
if(type === "deleted"){
if (type === "deleted") {
deletedEntityCount += intVal;
}
if(type === "shell") {
if (type === "shell") {
shellEntityCount += intVal
}
intVal = _.numberFormatWithComa(intVal)
......@@ -277,6 +284,50 @@ define(['require',
);
}
},
renderSystemDeatils: function(options) {
var that = this,
data = options.data,
systemData = data.system,
systemOS = systemData.os || {},
systemRuntimeData = systemData.runtime || {},
systemMemoryData = systemData.memory || {},
createSystemTable = function(obj) {
var tableBody = '',
data = obj.data;
_.each(data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value
}) + '</td></tr>';
});
return tableBody;
};
if (!_.isEmpty(systemOS)) {
that.ui.osCard.html(
createSystemTable({
"data": systemOS
})
);
}
if (!_.isEmpty(systemRuntimeData)) {
_.each(systemRuntimeData, function(val, key) {
var space
})
that.ui.runtimeCard.html(
createSystemTable({
"data": systemRuntimeData
})
);
}
if (!_.isEmpty(systemMemoryData)) {
var memoryTable = CommonViewFunction.propertyTable({
scope: this,
valueObject: systemMemoryData
});
that.ui.memoryCard.html(
memoryTable);
}
},
getValue: function(options) {
var value = options.value,
type = options.type;
......
dashboardv3/public/css/scss/common.scss
......@@ -188,6 +188,20 @@ pre {
}
}
.panel-body .memory-details{
pre {
&.code-block {
&.shrink {
height: 144px;
code {
height: 130px;
}
}
}
}
}
#accordion {
.panel-default>.panel-heading {
cursor: pointer;
......@@ -224,18 +238,18 @@ pre {
}
.custom-col-0{
.custom-col-0 {
text-align: center;
vertical-align: middle;
line-height: 31px;
width: 3%;
}
.custom-col-1{
width: 38%;
.custom-col-1 {
width: 39%;
}
.custom-col-2{
.custom-col-2 {
text-align: center;
width: 17%;
margin-left: 1%;
......
dashboardv3/public/js/templates/site/Statistics_tmpl.html
......@@ -16,7 +16,7 @@
-->
<div class="panel-group server-stats-container statsContainer hide" id="accordion">
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="entity">
<div class="panel-heading" data-toggle="collapse" href="#collapse1" aria-expanded="true">
<div class="panel-heading" data-toggle="collapse" href="#entityCountCollapse" aria-expanded="true">
<h4 class="panel-title">
<a>Entities <span class="count">(0)</span></a>
</h4>
......@@ -24,7 +24,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div id="entityCountCollapse" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table stat-table entityTable" data-id="entity-card">
<tbody>
......@@ -37,7 +37,7 @@
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="stats">
<div class="panel-heading" data-toggle="collapse" href="#collapse3" aria-expanded="true">
<div class="panel-heading" data-toggle="collapse" href="#serverDetailcollapse" aria-expanded="true">
<h4 class="panel-title">
<a>Server Statistics </a>
</h4>
......@@ -45,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="collapse3" class="panel-collapse collapse in">
<div id="serverDetailcollapse" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-sm-12">
<div class="card-container panel panel-primary">
......@@ -87,6 +87,63 @@
</div>
</div>
</div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="systemDetails">
<div class="panel-heading" data-toggle="collapse" href="#systemDetailCollapse" aria-expanded="false">
<h4 class="panel-title">
<a>System Details</a>
</h4>
<div class="btn-group pull-left">
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div>
</div>
<div id="systemDetailCollapse" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-6">
<div class="card-container panel panel-primary">
<div class="panel-heading">OS</div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="os-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card-container panel panel-primary">
<div class="panel-heading">Runtime</div>
<div class="panel-body">
<table class="table stat-table">
<tbody data-id="runtime-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card-container panel panel-primary">
<div class="panel-heading">Memory</div>
<div class="panel-body">
<table class="table stat-table memory-details">
<tbody data-id="memory-card">
<tr class="empty text-center">
<td colspan="2"><span>No records found!</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv3/public/js/views/site/Statistics.js
......@@ -49,7 +49,11 @@ define(['require',
notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']",
offsetCard: "[data-id='offset-card']"
offsetCard: "[data-id='offset-card']",
osCard: "[data-id='os-card']",
runtimeCard: "[data-id='runtime-card']",
memoryCard: "[data-id='memory-card']",
memoryPoolUsage: "[data-id='memory-pool-usage-card']"
},
/** ui events hash */
events: function() {},
......@@ -92,6 +96,7 @@ define(['require',
var data = _.first(data.toJSON());
that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) {
......@@ -141,10 +146,10 @@ define(['require',
if (type == "active") {
activeEntityCount += intVal;
}
if(type == "deleted"){
if (type == "deleted") {
deletedEntityCount += intVal;
}
if(type == "shell") {
if (type == "shell") {
shellEntityCount += intVal
}
intVal = _.numberFormatWithComa(intVal)
......@@ -277,6 +282,50 @@ define(['require',
);
}
},
renderSystemDeatils: function(options) {
var that = this,
data = options.data,
systemData = data.system,
systemOS = systemData.os || {},
systemRuntimeData = systemData.runtime || {},
systemMemoryData = systemData.memory || {},
createSystemTable = function(obj) {
var tableBody = '',
data = obj.data;
_.each(data, function(value, key, list) {
tableBody += '<tr><td>' + key + '</td><td class="">' + that.getValue({
"value": value
}) + '</td></tr>';
});
return tableBody;
};
if (!_.isEmpty(systemOS)) {
that.ui.osCard.html(
createSystemTable({
"data": systemOS
})
);
}
if (!_.isEmpty(systemRuntimeData)) {
_.each(systemRuntimeData, function(val, key) {
var space
})
that.ui.runtimeCard.html(
createSystemTable({
"data": systemRuntimeData
})
);
}
if (!_.isEmpty(systemMemoryData)) {
var memoryTable = CommonViewFunction.propertyTable({
scope: this,
valueObject: systemMemoryData
});
that.ui.memoryCard.html(
memoryTable);
}
},
getValue: function(options) {
var value = options.value,
type = options.type;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment