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 { ...@@ -189,6 +189,21 @@ pre {
font-family: monospace; font-family: monospace;
} }
} }
.panel-body .memory-details {
pre {
&.code-block {
&.shrink {
height: 144px;
code {
height: 130px;
}
}
}
}
}
.footer-content { .footer-content {
position: fixed; position: fixed;
right: 0px; right: 0px;
...@@ -225,18 +240,18 @@ pre { ...@@ -225,18 +240,18 @@ pre {
} }
.custom-col-0{ .custom-col-0 {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
line-height: 31px; line-height: 31px;
width: 3%; width: 3%;
} }
.custom-col-1{ .custom-col-1 {
width: 38%; width: 39%;
} }
.custom-col-2{ .custom-col-2 {
text-align: center; text-align: center;
width: 17%; width: 17%;
margin-left: 1%; margin-left: 1%;
......
dashboardv2/public/js/templates/site/Statistics_tmpl.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
--> -->
<div class="panel-group server-stats-container statsContainer hide" id="accordion"> <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 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"> <h4 class="panel-title">
<a>Entities <span class="count">(0)</span></a> <a>Entities <span class="count">(0)</span></a>
</h4> </h4>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div> </div>
</div> </div>
<div id="collapse1" class="panel-collapse collapse in"> <div id="entityCountCollapse" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<table class="table stat-table entityTable" data-id="entity-card"> <table class="table stat-table entityTable" data-id="entity-card">
<tbody> <tbody>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="stats"> <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"> <h4 class="panel-title">
<a>Server Statistics </a> <a>Server Statistics </a>
</h4> </h4>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div> </div>
</div> </div>
<div id="collapse3" class="panel-collapse collapse in"> <div id="serverDetailcollapse" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card-container panel panel-primary"> <div class="card-container panel panel-primary">
...@@ -87,6 +87,62 @@ ...@@ -87,6 +87,62 @@
</div> </div>
</div> </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>
<div class="fontLoader-relative statsLoader show"> <div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv2/public/js/views/site/Statistics.js
...@@ -49,7 +49,13 @@ define(['require', ...@@ -49,7 +49,13 @@ define(['require',
notificationCard: "[data-id='notification-card']", notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']", statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']", 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 */ /** ui events hash */
events: function() {}, events: function() {},
...@@ -92,6 +98,7 @@ define(['require', ...@@ -92,6 +98,7 @@ define(['require',
var data = _.first(data.toJSON()); var data = _.first(data.toJSON());
that.renderStats({ valueObject: data.general.stats, dataObject: data.general }); that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data }); that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide'); that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show'); that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) { if (options && options.update) {
...@@ -141,10 +148,10 @@ define(['require', ...@@ -141,10 +148,10 @@ define(['require',
if (type === "active") { if (type === "active") {
activeEntityCount += intVal; activeEntityCount += intVal;
} }
if(type === "deleted"){ if (type === "deleted") {
deletedEntityCount += intVal; deletedEntityCount += intVal;
} }
if(type === "shell") { if (type === "shell") {
shellEntityCount += intVal shellEntityCount += intVal
} }
intVal = _.numberFormatWithComa(intVal) intVal = _.numberFormatWithComa(intVal)
...@@ -277,6 +284,50 @@ define(['require', ...@@ -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) { getValue: function(options) {
var value = options.value, var value = options.value,
type = options.type; type = options.type;
......
dashboardv3/public/css/scss/common.scss
...@@ -188,6 +188,20 @@ pre { ...@@ -188,6 +188,20 @@ pre {
} }
} }
.panel-body .memory-details{
pre {
&.code-block {
&.shrink {
height: 144px;
code {
height: 130px;
}
}
}
}
}
#accordion { #accordion {
.panel-default>.panel-heading { .panel-default>.panel-heading {
cursor: pointer; cursor: pointer;
...@@ -224,18 +238,18 @@ pre { ...@@ -224,18 +238,18 @@ pre {
} }
.custom-col-0{ .custom-col-0 {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
line-height: 31px; line-height: 31px;
width: 3%; width: 3%;
} }
.custom-col-1{ .custom-col-1 {
width: 38%; width: 39%;
} }
.custom-col-2{ .custom-col-2 {
text-align: center; text-align: center;
width: 17%; width: 17%;
margin-left: 1%; margin-left: 1%;
......
dashboardv3/public/js/templates/site/Statistics_tmpl.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
--> -->
<div class="panel-group server-stats-container statsContainer hide" id="accordion"> <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 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"> <h4 class="panel-title">
<a>Entities <span class="count">(0)</span></a> <a>Entities <span class="count">(0)</span></a>
</h4> </h4>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div> </div>
</div> </div>
<div id="collapse1" class="panel-collapse collapse in"> <div id="entityCountCollapse" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<table class="table stat-table entityTable" data-id="entity-card"> <table class="table stat-table entityTable" data-id="entity-card">
<tbody> <tbody>
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
</div> </div>
<div class="panel panel-default custom-panel expand_collapse_panel-icon" data-id="stats"> <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"> <h4 class="panel-title">
<a>Server Statistics </a> <a>Server Statistics </a>
</h4> </h4>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<button type="button" title="Collapse"><i class="ec-icon fa"></i></button> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button>
</div> </div>
</div> </div>
<div id="collapse3" class="panel-collapse collapse in"> <div id="serverDetailcollapse" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="card-container panel panel-primary"> <div class="card-container panel panel-primary">
...@@ -87,6 +87,63 @@ ...@@ -87,6 +87,63 @@
</div> </div>
</div> </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>
<div class="fontLoader-relative statsLoader show"> <div class="fontLoader-relative statsLoader show">
<i class="fa fa-refresh fa-spin-custom"></i> <i class="fa fa-refresh fa-spin-custom"></i>
......
dashboardv3/public/js/views/site/Statistics.js
...@@ -49,7 +49,11 @@ define(['require', ...@@ -49,7 +49,11 @@ define(['require',
notificationCard: "[data-id='notification-card']", notificationCard: "[data-id='notification-card']",
statsNotificationTable: "[data-id='stats-notification-table']", statsNotificationTable: "[data-id='stats-notification-table']",
entityCard: "[data-id='entity-card']", 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 */ /** ui events hash */
events: function() {}, events: function() {},
...@@ -92,6 +96,7 @@ define(['require', ...@@ -92,6 +96,7 @@ define(['require',
var data = _.first(data.toJSON()); var data = _.first(data.toJSON());
that.renderStats({ valueObject: data.general.stats, dataObject: data.general }); that.renderStats({ valueObject: data.general.stats, dataObject: data.general });
that.renderEntities({ data: data }); that.renderEntities({ data: data });
that.renderSystemDeatils({ data: data });
that.$('.statsContainer,.statsNotificationContainer').removeClass('hide'); that.$('.statsContainer,.statsNotificationContainer').removeClass('hide');
that.$('.statsLoader,.statsNotificationLoader').removeClass('show'); that.$('.statsLoader,.statsNotificationLoader').removeClass('show');
if (options && options.update) { if (options && options.update) {
...@@ -141,10 +146,10 @@ define(['require', ...@@ -141,10 +146,10 @@ define(['require',
if (type == "active") { if (type == "active") {
activeEntityCount += intVal; activeEntityCount += intVal;
} }
if(type == "deleted"){ if (type == "deleted") {
deletedEntityCount += intVal; deletedEntityCount += intVal;
} }
if(type == "shell") { if (type == "shell") {
shellEntityCount += intVal shellEntityCount += intVal
} }
intVal = _.numberFormatWithComa(intVal) intVal = _.numberFormatWithComa(intVal)
...@@ -277,6 +282,50 @@ define(['require', ...@@ -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) { getValue: function(options) {
var value = options.value, var value = options.value,
type = options.type; 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