Skip to content

S
spring-boot-admin
Commit b5ecd215 by Johannes Stelzer
Options

Display errors (in case), new screenshots and minor UI changes

parent 3a1499dd
Showing with 155 additions and 134 deletions
README.md
......@@ -72,10 +72,20 @@ spring.boot.admin.url=http://localhost:8080
[](url "title")
<img src="https://raw.githubusercontent.com/codecentric/spring-boot-admin/master/screenshot.png">
##### Metrics
##### Details
[](url "title")
<img src="https://raw.githubusercontent.com/codecentric/spring-boot-admin/master/screenshot-metrics.png">
<img src="https://raw.githubusercontent.com/codecentric/spring-boot-admin/master/screenshot-details.png">
##### Logging
[](url "title")
<img src="https://raw.githubusercontent.com/codecentric/spring-boot-admin/master/screenshot-logging.png">
##### JMX
[](url "title")
<img src="https://raw.githubusercontent.com/codecentric/spring-boot-admin/master/screenshot-jmx.png">
#### Build
......
screenshot-details.png 0 → 100644
This diff was suppressed by a .gitattributes entry.
screenshot-jmx.png 0 → 100644
This diff was suppressed by a .gitattributes entry.
screenshot-logging.png 0 → 100644
This diff was suppressed by a .gitattributes entry.
screenshot-metrics.png deleted 100644 → 0
This diff was suppressed by a .gitattributes entry.
screenshot.png
This diff was suppressed by a .gitattributes entry.
spring-boot-admin-server/src/main/webapp/public/scripts/controllers/controllers.js
......@@ -18,22 +18,22 @@
angular.module('springBootAdmin')
.controller('overviewCtrl', ['$scope', '$location', '$interval', 'Applications', 'ApplicationOverview',
function ($scope, $location, $interval, Applications, ApplicationOverview) {
$scope.loadData = function() {
$scope.applications = Applications.query({}, function(applications) {
Applications.query(function(applications) {
for (var i in applications) {
var app = applications[i];
ApplicationOverview.getVersion(app);
ApplicationOverview.getHealth(app);
ApplicationOverview.getLogfile(app);
}
$scope.applications = applications;
});
}
$scope.loadData();
$scope.refresh = function(id) {
$scope.application = Application.query({id: id}, function(application) {
ApplicationOverview.refresh(application);
});
$scope.refresh = function(application) {
ApplicationOverview.refresh(application);
};
// reload site every 30 seconds
......@@ -48,11 +48,18 @@ angular.module('springBootAdmin')
}])
.controller('detailsCtrl', ['$scope', '$stateParams', '$interval', 'Application', 'ApplicationDetails', 'MetricsHelper',
function ($scope, $stateParams, $interval, Application, ApplicationDetails, MetricsHelper) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getInfo(application);
ApplicationDetails.getInfo(application).success(function(info) {
$scope.info = info;
}).error( function(error) {
$scope.error = error;
});
ApplicationDetails.getMetrics(application, function(application){
application.metrics["mem.used"] = application.metrics["mem"] - $scope.application.metrics["mem.free"];
ApplicationDetails.getMetrics(application).success( function(metrics) {
$scope.metrics = metrics;
$scope.metrics["mem.used"] = $scope.metrics["mem"] - $scope.metrics["mem.free"];
$scope.gcInfos = {};
$scope.datasources = {}
......@@ -61,7 +68,7 @@ angular.module('springBootAdmin')
return map[key] || (map[key] = factory());
}
MetricsHelper.find(application.metrics,
MetricsHelper.find(metrics,
[ /gc\.(.+)\.time/, /gc\.(.+)\.count/, /datasource\.(.+)\.active/, /datasource\.(.+)\.usage/ ],
[ function(metric, match, value) {
createOrGet($scope.gcInfos, match[1], function() {return {time: 0, count: 0};}).time = value;
......@@ -77,6 +84,8 @@ angular.module('springBootAdmin')
$scope.hasDatasources = true;
createOrGet($scope.datasources, match[1], function() {return {min: 0, max:0, active: 0, usage: 0};}).usage = value;
}]);
}).error( function(error) {
$scope.error = error;
});
});
......@@ -93,7 +102,7 @@ angular.module('springBootAdmin')
$scope.gaugeData = [];
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getMetrics(application, function(application) {
ApplicationDetails.getMetrics(application).success( function(metrics) {
//*** Extract data for Counter-Chart and Gauge-Chart
$scope.counterData = [ { key : "value", values: [] } ];
$scope.gaugeData = [ { key : "value", values: [] },
......@@ -102,7 +111,7 @@ angular.module('springBootAdmin')
{ key : "max", values: [] },
{ key : "count", values: [] } ];
MetricsHelper.find(application.metrics,
MetricsHelper.find(metrics,
[ /counter\.(.+)/, /gauge\.(.+)\.val/, /gauge\.(.+)\.avg/, /gauge\.(.+)\.min/, /gauge\.(.+)\.max/, /gauge\.(.+)\.count/, /gauge\.(.+)\.alpha/, /gauge\.(.+)/],
[ function (metric, match, value) { $scope.counterData[0].values.push([ match[1], value]); },
function (metric, match, value) { $scope.gaugeData[0].values.push([ match[1], value]); },
......@@ -121,6 +130,8 @@ angular.module('springBootAdmin')
}
}
}).error( function(error) {
$scope.error = error;
});
});
......@@ -153,19 +164,37 @@ angular.module('springBootAdmin')
.controller('detailsEnvCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails',
function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getEnv(application);
ApplicationDetails.getEnv(application).success(function(env) {
$scope.env = env;
}).error( function(error) {
$scope.error = error;
});
});
}])
.controller('detailsPropsCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails',
function ($scope, $stateParams, Application, ApplicationDetails) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getProps(application);
ApplicationDetails.getEnv(application).success(function(env) {
$scope.props = [];
for (var attr in env) {
if (attr.indexOf('[') != -1 && attr.indexOf('.properties]') != -1) {
$scope.props.push({ key : attr, value: env[attr] });
}
}
}).error( function(error) {
$scope.error = error;
});
});
}])
.controller('detailsClasspathCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationDetails', 'Abbreviator',
function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
$scope.application = Application.query({id: $stateParams.id}, function(application) {
ApplicationDetails.getClasspath(application);
ApplicationDetails.getEnv(application).success(function(env) {
var separator = env['systemProperties']['path.separator'];
$scope.classpath = env['systemProperties']['java.class.path'].split(separator);
}).error( function(error) {
$scope.error = error;
});
});
}])
.controller('loggingCtrl', ['$scope', '$stateParams', 'Application', 'ApplicationLogging',
......
spring-boot-admin-server/src/main/webapp/public/scripts/services/services.js
......@@ -70,39 +70,13 @@ angular.module('springBootAdmin.services', ['ngResource'])
}])
.service('ApplicationDetails', ['$http', function($http) {
this.getInfo = function(app) {
return $http.get(app.url + '/info').success(function(response) {
app.info = response;
});
return $http.get(app.url + '/info');
}
this.getMetrics = function(app, success) {
return $http.get(app.url + '/metrics').success(function(response) {
app.metrics = response;
success(app);
});
this.getMetrics = function(app) {
return $http.get(app.url + '/metrics');
}
this.getEnv = function(app) {
return $http.get(app.url + '/env').success(function(response) {
app.env = response;
});
}
this.getProps = function(app) {
return $http.get(app.url + '/env').success(function(response) {
app.props = [];
for (var attr in response) {
if (attr.indexOf('[') != -1 && attr.indexOf('.properties]') != -1) {
var prop = new Object();
prop.key = attr;
prop.value = response[attr];
app.props.push(prop);
}
}
});
}
this.getClasspath = function(app) {
return $http.get(app.url + '/env').success(function(response) {
var seperator = response['systemProperties']['path.separator'];
app.classpath = response['systemProperties']['java.class.path'].split(seperator);
});
return $http.get(app.url + '/env');
}
}])
.service('ApplicationLogging', ['$http' , 'Jolokia', function($http, jolokia) {
......
spring-boot-admin-server/src/main/webapp/public/views/apps/details.html
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div class="span6">
<table class="table">
<thead><tr><th>Application</th><th><small class="pull-right"><a href="{{ application.url }}/info">raw JSON</a></small></th></tr></thead>
<tbody>
<tr ng-repeat="(key, value) in application.info" >
<tr ng-repeat="(key, value) in info" >
<td>{{ key }}</td><td>{{ value }}</td>
</tr>
</tbody>
......@@ -11,45 +15,13 @@
<div class="span6">
<table class="table">
<thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
<tbody>
<tr>
<td>Uptime</td>
<td>{{ application.metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
</tr>
<tr>
<td>Available Processors</td>
<td>{{ application.metrics['processors'] }}</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>
<tr>
<td> Threads</td>
<td>{{ application.metrics['threads'] }} total / {{ application.metrics['threads.daemon'] }} daemon / {{ application.metrics['threads.peak'] }} peak </td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Memory</th></tr></thead>
<tbody>
<tr>
<td colspan="2">
<span>Total Memory ({{ application.metrics['mem.used'] / 1024 | number:2 }}M / {{ application.metrics['mem'] / 1024 | number:2 }}M)</span>
<span>Total Memory ({{ metrics['mem.used'] / 1024 | number:2 }}M / {{ metrics['mem'] / 1024 | number:2 }}M)</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ memPercentage = (application.metrics['mem.used'] / application.metrics['mem'] * 100 | number:0) }}%;"
<div class="bar" style="width:{{ memPercentage = (metrics['mem.used'] / metrics['mem'] * 100 | number:0) }}%;"
ng-class="{'bar-success': memPercentage < 75, 'bar-warning': memPercentage >= 75 && memPercentage < 95, 'bar-danger': memPercentage >= 95}">
{{memPercentage}}%
</div>
......@@ -58,9 +30,9 @@
</tr>
<tr>
<td colspan="2">
<span>Heap Memory ({{ application.metrics['heap.used'] / 1024 | number:2 }}M / {{ application.metrics['heap.committed'] / 1024 | number:2 }}M)</span>
<span>Heap Memory ({{ metrics['heap.used'] / 1024 | number:2 }}M / {{ metrics['heap.committed'] / 1024 | number:2 }}M)</span>
<div class="progress" style="margin-bottom: 0px;">
<div class="bar" style="width:{{ heapPercentage = (application.metrics['heap.used'] / application.metrics['heap.committed'] * 100 | number:0) }}%;"
<div class="bar" style="width:{{ heapPercentage = (metrics['heap.used'] / metrics['heap.committed'] * 100 | number:0) }}%;"
ng-class="{'bar-success': heapPercentage < 75, 'bar-warning': heapPercentage >= 75 && heapPercentage < 95, 'bar-danger': heapPercentage >= 95}">
{{heapPercentage}}%
</div>
......@@ -69,17 +41,49 @@
</tr>
<tr>
<td>Initial Heap (-Xms)</td>
<td>{{application.metrics['heap.init'] / 1024 | number:2}}M</td>
<td>{{metrics['heap.init'] / 1024 | number:2}}M</td>
</tr>
<tr>
<td>Maximum Heap (-Xmx)</td>
<td>{{application.metrics['heap'] / 1024 | number:2}}M</td>
<td>{{metrics['heap'] / 1024 | number:2}}M</td>
</tr>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th>JVM</th><th><small class="pull-right"><a href="{{ application.url }}/metrics">raw JSON</a></small></th></tr></thead>
<tbody>
<tr>
<td>Uptime</td>
<td>{{ metrics['uptime'] + ticks | timeInterval }} [d:h:m:s]</td>
</tr>
<tr>
<td>Available Processors</td>
<td>{{ metrics['processors'] }}</td>
</tr>
<tr>
<td>Current loaded Classes</td>
<td>{{ metrics['classes']}}</td>
</tr>
<tr>
<td> Total loaded Classes</td>
<td>{{ metrics['classes.loaded']}}</td>
</tr>
<tr>
<td> Unloaded Classes</td>
<td>{{ metrics['classes.unloaded']}}</td>
</tr>
<tr>
<td> Threads</td>
<td>{{ metrics['threads'] }} total / {{ metrics['threads.daemon'] }} daemon / {{ metrics['threads.peak'] }} peak </td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<table class="table">
<thead><tr><th colspan="2">Garbage Collection</th></tr></thead>
<tr ng-repeat-start="(name, value) in gcInfos track by name">
<td>{{name | capitalize}} GC Count</td>
......
spring-boot-admin-server/src/main/webapp/public/views/apps/details/classpath.html
......@@ -7,7 +7,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="element in application.classpath">
<tr ng-repeat="element in classpath">
<td style="text-wrap: none;">
{{ element }}
</td>
......
spring-boot-admin-server/src/main/webapp/public/views/apps/details/env.html
......@@ -8,7 +8,7 @@
</tr>
</thead>
<tbody>
<tr class="highlight" ng-repeat-start="(envkey, envvalue) in application.env">
<tr class="highlight" ng-repeat-start="(envkey, envvalue) in env">
<td colspan="2">{{ envkey }}</td>
</tr>
<tr ng-repeat-end ng-repeat="(key, value) in envvalue" >
......
spring-boot-admin-server/src/main/webapp/public/views/apps/details/metrics.html
<table class="table">
<thead>
<tr>
<th>Counters</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="center-block" style="width: 800px; height: {{ 75 + counterData[0].values.length * 20 }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="counterChart" nodata="not available"
data="counterData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()"
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
</nvd3-multi-bar-horizontal-chart>
</div>
</td>
</tr>
<table class="table" ng-if="counterData[0].values.length > 0">
<thead>
<tr>
<th>Counters</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="center-block" style="width: 800px; height: {{ 75 + counterData[0].values.length * 20 }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="counterChart" nodata="not available"
data="counterData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()"
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
</nvd3-multi-bar-horizontal-chart>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Gauges</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="center-block" style="width: 800px; height: {{ 75 + gaugeData[0].values.length * ( 10 + gaugeData.length * 10 ) }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="gaugesChart" nodata="not available"
data="gaugeData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()"
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
showLegend="{{ gaugeData.length > 1 ? 'true' : 'false' }} " legendColor="colorFunction()"
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
</nvd3-multi-bar-horizontal-chart>
</div>
</td>
</tr>
</tbody>
</table>
</table>
<table class="table" ng-if="gaugeData[0].values.length > 0">
<thead>
<tr>
<th>Gauges</th>
</tr>
</thead>
<tbody>
<tr>
<td> {{gaugeData.length}}
<div class="center-block" style="width: 800px; height: {{ 75 + gaugeData[0].values.length * ( gaugeData.length * 10 ) }}px; position:relative; overflow: hidden;">
<nvd3-multi-bar-horizontal-chart id="gaugesChart" nodata="not available"
data="gaugeData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()"
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
showLegend="{{ gaugeData.length > 1 ? 'true' : 'false' }} " legendColor="colorFunction()"
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
</nvd3-multi-bar-horizontal-chart>
</div>
</td>
</tr>
</tbody>
</table>
spring-boot-admin-server/src/main/webapp/public/views/apps/details/props.html
......@@ -8,7 +8,7 @@
</tr>
</thead>
<tbody>
<tr class="highlight" ng-repeat-start="prop in application.props">
<tr class="highlight" ng-repeat-start="prop in props">
<td colspan="2">{{ prop.key }}</td>
</tr>
<tr ng-repeat-end ng-repeat="(key, value) in prop.value" >
......
spring-boot-admin-server/src/main/webapp/public/views/overview.html
......@@ -3,6 +3,10 @@
</h2>
<div class="span12">
<table class="table table-striped">
<colgroup style="width: 40%;"/>
<colgroup style="width: 15%;"/>
<colgroup style="width: 10%;"/>
<colgroup style="width: 35%;"/>
<thead>
<tr>
<th>Application</th>
......
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