Skip to content

S
spring-boot-admin
Commit 90ac76b7 by Joshi83
Options

nice pie charts for memory-metrics

parent 40783e7b
Showing with 163 additions and 16 deletions
pom.xml
......@@ -18,6 +18,9 @@
<jquery.version>1.11.0</jquery.version>
<angularjs.version>1.2.12</angularjs.version>
<angular-ui-router.version>0.2.10-1</angular-ui-router.version>
<angularjs-nvd3-directives.version>0.0.7-1</angularjs-nvd3-directives.version>
<d3js.version>3.4.1</d3js.version>
<nvd3.version>1.1.15-beta</nvd3.version>
</properties>
<dependencies>
<dependency>
......@@ -60,6 +63,21 @@
<artifactId>angular-ui-router</artifactId>
<version>${angular-ui-router.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>angularjs-nvd3-directives</artifactId>
<version>${angularjs-nvd3-directives.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>d3js</artifactId>
<version>${d3js.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>nvd3</artifactId>
<version>${nvd3.version}</version>
</dependency>
<!-- Test -->
<dependency>
......
src/main/webapp/public/index.html
......@@ -9,6 +9,7 @@
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.png" />
<link href="https://fonts.googleapis.com/css?family=Varela+Round|Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/${bootstrap.version}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/webjars/nvd3/${nvd3.version}/nv.d3.min.css" />
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
</head>
<body ng-app="springBootAdmin">
......@@ -60,6 +61,9 @@
<script src="/webjars/angularjs/${angularjs.version}/angular-resource.min.js"></script>
<script src="/webjars/angularjs/${angularjs.version}/angular-route.min.js"></script>
<script src="/webjars/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="/webjars/d3js/${d3js.version}/d3.js"></script>
<script src="/webjars/nvd3/${nvd3.version}/nv.d3.js"></script>
<script src="/webjars/angularjs-nvd3-directives/0.0.7/angularjs-nvd3-directives.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/controllers.js"></script>
<script src="/scripts/services/services.js"></script>
......
src/main/webapp/public/scripts/app.js
......@@ -19,7 +19,8 @@ angular.module('springBootAdmin', [
'ngResource',
'ngRoute',
'ui.router',
'springBootAdmin.services'
'springBootAdmin.services',
'nvd3ChartDirectives'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
......
src/main/webapp/public/scripts/controllers/controllers.js
......@@ -62,9 +62,44 @@ angular.module('springBootAdmin')
});
})
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.memoryData = [];
$scope.heapMemoryData = [];
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getMetrics(application);
ApplicationDetails.getMetrics(application, function(application) {
//*** Extract data for JVM-Memory-Chart
application.metrics["mem.used"] = application.metrics["mem"] - $scope.application.metrics["mem.free"];
$scope.memoryData = [{ label: 'Free Memory', value: application.metrics["mem.free"] },
{ label: 'Used Memory', value : application.metrics["mem.used"] }];
//*** Extract data for Heap-Memory-Chart
application.metrics["heap.free"] = application.metrics["heap"] - $scope.application.metrics["heap.used"];
$scope.heapMemoryData = [{ label: 'Free Heap', value : application.metrics["heap.free"] },
{ label: 'Used Heap', value : application.metrics["heap.used"] }];
});
});
$scope.xFunction = function(){
return function(d) {
return d.label;
};
}
$scope.yFunction = function(){
return function(d) {
return d.value;
};
}
var colorArray = ['#6db33f', '#a5b2b9', '#ebf1e7', '#34302d' ];
$scope.colorFunction = function() {
return function(d, i) {
return colorArray[i % colorArray.length];
};
}
})
.controller('detailsEnvCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
......
src/main/webapp/public/scripts/services/services.js
......@@ -74,9 +74,10 @@ angular.module('springBootAdmin.services', ['ngResource'])
app.info = response;
});
}
this.getMetrics = function(app) {
this.getMetrics = function(app, success) {
return $http.get(app.url + '/metrics').success(function(response) {
app.metrics = response;
success(app);
});
}
this.getEnv = function(app) {
......
src/main/webapp/public/styles/application.css
......@@ -7,3 +7,35 @@ ul.download-links {
list-style-type: none;
margin-left: 0;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
ul.chart-legend {
list-style: none;
}
ul.chart-legend li:before {
content: "• ";
font-size: 250%;
vertical-align: middle;
}
li.chart-1:before {
color: #6db33f;
}
li.chart-2:before {
color: #a5b2b9;
}
li.chart-3:before {
color: #ebf1e7;
}
li.chart-4:before {
color: #34302d;
}
li.no-bullet:before {
color: rgba(0,0,0, 0.0);
}
\ No newline at end of file
src/main/webapp/public/views/apps/details/env.html
......@@ -12,7 +12,7 @@
<td colspan="2">{{ envkey }}</td>
</tr>
<tr ng-repeat-end ng-repeat="(key, value) in envvalue" >
<td style="text-align: right; word-break: break-all;" >{{ key }}</td>
<td style="word-break: break-all;" >{{ key }}</td>
<td style="word-break: break-all;" >{{ value }}</td>
</tr>
</tbody>
......
src/main/webapp/public/views/apps/details/infos.html
......@@ -9,7 +9,7 @@
</thead>
<tbody>
<tr ng-repeat="(key, value) in application.info" >
<td style="text-align: right;" >{{ key }}</td>
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
</tbody>
......
src/main/webapp/public/views/apps/details/metrics.html
<table class="table table-striped">
<col style="width: 50%;" />
<col style="width: auto;" />
<thead>
<tr>
<th>Used Memory</th>
<th>Free Memory</th>
<th>Used Heap</th>
<th>Max Heap</th>
<th>Processors</th>
<th>Uptime <small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th>
<th colspan="2">Memory <small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ application.metrics['mem'] / 1024 | number:2 }} MB</td>
<td>{{ application.metrics['mem.free'] / 1024 | number:2 }} MB</td>
<td>{{ application.metrics['heap.used'] / 1024 | number:2 }} MB</td>
<td>{{ application.metrics['heap'] / 1024 | number:2 }} MB</td>
<td>
<h1 style="text-align: center;">JVM Memory</h1>
<div class="center-block" style="width: 400px; height: 200px;">
<nvd3-pie-chart id="memoryChart" nodata="not available"
data="memoryData" x="xFunction()" y="yFunction()"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
<ul class="chart-legend center-block" style="width: 200px;">
<li class="chart-1">Free Memory: {{ application.metrics['mem.free'] / 1024 | number:2 }} MB</li>
<li class="chart-2">Used Memory: {{ application.metrics['mem.used'] / 1024 | number:2 }} MB</li>
<li class="no-bullet"><b>Total Memory: {{ application.metrics['mem'] / 1024 | number:2 }} MB</b></li>
</ul>
</td>
<td>
<h1 style="text-align: center;">Heap Memory</h1>
<div class="center-block" style="width: 400px; height: 200px;">
<nvd3-pie-chart id="heapMemoryChart" nodata="not available"
data="heapMemoryData" x="xFunction()" y="yFunction()"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
<ul class="chart-legend center-block" style="width: 200px;">
<li class="chart-1">Free Heap: {{ application.metrics['heap.free'] / 1024 | number:2 }} MB</li>
<li class="chart-2">Used Heap: {{ application.metrics['heap.used'] / 1024 | number:2 }} MB</li>
<li class="no-bullet"><b>Max Heap: {{ application.metrics['heap'] / 1024 | number:2 }} MB</b></li>
</ul>
</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<col style="width:30%">
<col style="width:auto">
<thead>
<tr>
<th colspan="2">JVM Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Available Processors</td>
<td>{{ application.metrics['processors'] }}</td>
</tr>
<tr>
<td>Uptime</td>
<td>{{ application.metrics['uptime'] / 86400000 | floor | padZero }}:{{ application.metrics['uptime'] % 86400000 / 3600000 | floor | padZero }}:{{ application.metrics['uptime'] % 3600000 / 60000 | floor | padZero }}:{{ application.metrics['uptime'] % 60000 / 1000 | floor | padZero }} [d:h:m:s]</td>
</tr>
<tr>
<td>Current loaded Classes</td>
<td>{{ application.metrics['classes']}}</td>
</tr>
<tr>
<td> Total loaded Classes</td>
<td>{{ application.metrics['classes.loaded']}}</td>
</tr>
<tr>
<td> Unloaded Classes</td>
<td>{{ application.metrics['classes.unloaded']}}</td>
</tr>
</tbody>
</table>
\ No newline at end of file
src/main/webapp/public/views/apps/details/props.html
......@@ -12,7 +12,7 @@
<td colspan="2">{{ prop.key }}</td>
</tr>
<tr ng-repeat-end ng-repeat="(key, value) in prop.value" >
<td style="text-align: right; word-break: break-all;" >{{ key }}</td>
<td style="word-break: break-all;" >{{ key }}</td>
<td style="word-break: break-all;" >{{ value }}</td>
</tr>
</tbody>
......
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