Merge pull request #5 from joshiste/master

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,31 +86,18 @@ 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' ];
   		$scope.colorFunction = function() {
   			return function(d, i) {
@@ -118,6 +105,12 @@ angular.module('springBootAdmin')
   		    };
   		}
   		
+		$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>