Skip to content

S
spring-boot-admin
Commit 62107078 by Dennis Schulte
Options

Merge pull request #5 from joshiste/master

Horizontal bar chart with logback-classic like abbreviated labels
parents 035949d1 57192fe1
Showing with 101 additions and 36 deletions
spring-boot-admin-server/src/main/webapp/public/scripts/controllers/controllers.js
......@@ -61,7 +61,7 @@ angular.module('springBootAdmin')
ApplicationDetails.getInfo(application);
});
})
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
$scope.memoryData = [];
$scope.heapMemoryData = [];
$scope.counterData = [];
......@@ -71,13 +71,13 @@ angular.module('springBootAdmin')
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"] }];
$scope.memoryData = [ ['Free Memory', application.metrics["mem.free"]],
['Used Memory', 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.heapMemoryData = [ ['Free Heap', application.metrics["heap.free"]],
['Used Heap', application.metrics["heap.used"]] ];
//*** Extract data for Counter-Chart and Gauge-Chart
......@@ -86,39 +86,32 @@ angular.module('springBootAdmin')
for (var metric in application.metrics) {
var matchCounter = /counter\.(.+)/.exec(metric);
if ( matchCounter !== null) {
$scope.counterData[0].values.push({ label : matchCounter[1], value : application.metrics[metric] });
$scope.counterData[0].values.push([ matchCounter[1], application.metrics[metric] ]);
}
var matchGauge = /gauge\.(.+)/.exec(metric);
if ( matchGauge !== null) {
$scope.gaugeData[0].values.push({ label : matchGauge[1], value : application.metrics[metric] });
$scope.gaugeData[0].values.push([ matchGauge[1], application.metrics[metric] ]);
}
}
});
});
$scope.xFunction = function(){
return function(d) {
return d.label;
};
}
$scope.yFunction = function(){
return function(d) {
return d.value;
};
}
var colorArray = ['#6db33f', '#a5b2b9', '#34302d' ];
var colorArray = ['#6db33f', '#a5b2b9', '#34302d' ];
$scope.colorFunction = function() {
return function(d, i) {
return colorArray[i % colorArray.length];
};
}
$scope.intFormatFunction = function(){
$scope.abbreviateFunction = function(targetLength, preserveLast, shortenThreshold){
return function(s) {
return Abbreviator.abbreviate(s, targetLength, preserveLast, shortenThreshold)
};
}
$scope.intFormatFunction = function(){
return function(d) {
return d3.format('d')(d);
};
......@@ -126,8 +119,7 @@ angular.module('springBootAdmin')
$scope.toolTipContentFunction = function(){
return function(key, x, y, e, graph) {
console.log(key, x, y, e, graph);
return x + ': ' + y ;
return e.point[0] + ': ' + e.point[1] ;
}
}
......
spring-boot-admin-server/src/main/webapp/public/scripts/services/services.js
......@@ -124,4 +124,73 @@ angular.module('springBootAdmin.services', ['ngResource'])
}
});
}
}])
.service('Abbreviator', [function() {
function _computeDotIndexes(fqName, preserveLast) {
var dotArray = [];
//iterate over String and find dots
var lastIndex = -1;
do {
lastIndex = fqName.indexOf('.', lastIndex + 1);
if (lastIndex !== -1) {
dotArray.push(lastIndex);
}
} while (lastIndex !== -1)
// remove dots to preserve more than the last element
for (var i = 0; i < preserveLast -1; i++ ) {
dotArray.pop();
}
return dotArray;
}
function _computeLengthArray(fqName, targetLength, dotArray, shortenThreshold) {
var lengthArray = [];
var toTrim = fqName.length - targetLength;
for (var i = 0; i < dotArray.length; i++) {
var previousDotPosition = -1;
if (i > 0) {
previousDotPosition = dotArray[i - 1];
}
var len = dotArray[i] - previousDotPosition - 1;
var newLen = (toTrim > 0 && len > shortenThreshold ? 1 : len);
toTrim -= (len - newLen);
lengthArray[i] = newLen + 1;
}
var lastDotIndex = dotArray.length - 1;
lengthArray[dotArray.length] = fqName.length - dotArray[lastDotIndex];
return lengthArray;
}
this.abbreviate = function(fqName, targetLength, preserveLast, shortenThreshold) {
if (fqName.length < targetLength) {
return fqName;
}
var dotIndexesArray = _computeDotIndexes(fqName, preserveLast);
if (dotIndexesArray.length === 0) {
return fqName;
}
var lengthArray = _computeLengthArray(fqName, targetLength, dotIndexesArray, shortenThreshold);
var result = "";
for (var i = 0; i <= dotIndexesArray.length; i++) {
if (i === 0 ) {
result += fqName.substr(0, lengthArray[i] -1);
} else {
result += fqName.substr(dotIndexesArray[i - 1], lengthArray[i]);
}
}
return result;
}
}]);
spring-boot-admin-server/src/main/webapp/public/views/apps/details/metrics.html
......@@ -12,7 +12,7 @@
<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()"
data="memoryData"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
......@@ -28,7 +28,7 @@
<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()"
data="heapMemoryData"
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
</nvd3-pie-chart>
</div>
......@@ -53,26 +53,30 @@
<tr>
<td>
<h1 style="text-align: center;">Counter</h1>
<div class="center-block" style="width: 800px; height: 300px; position:relative;">
<nvd3-discrete-bar-chart id="counterChart" nodata="not available"
data="counterData" x="xFunction()" y="yFunction()"
<div class="center-block" style="width: 800px; height: {{ 50 + counterData[0].values.length * 15 }}px; position:relative;">
<nvd3-multi-bar-horizontal-chart id="counterChart" nodata="not available"
data="counterData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()">
</nvd3-discrete-bar-chart>
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>
<tr>
<td>
<h1 style="text-align: center;">Gauge</h1>
<div class="center-block" style="width: 800px; height: 300px; position:relative;">
<nvd3-discrete-bar-chart id="gaugesChart" nodata="not available"
data="gaugeData" x="xFunction()" y="yFunction()"
<div class="center-block" style="width: 800px; height: {{ 50 + gaugeData[0].values.length * 15 }}px; position:relative;">
<nvd3-multi-bar-horizontal-chart id="gaugesChart" nodata="not available"
data="gaugeData"
color="colorFunction()"
tooltips="true" tooltipContent="toolTipContentFunction()"
showYAxis="true" yAxisTickFormat="intFormatFunction()">
</nvd3-discrete-bar-chart>
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>
......
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