Added charts for gauge- and counter-metrics

spring-boot-admin-server/src/main/webapp/public/scripts/controllers/controllers.js

@@ -64,6 +64,8 @@ angular.module('springBootAdmin')
   	.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
   		$scope.memoryData = [];
   		$scope.heapMemoryData = [];
+  		$scope.counterData = [];
+  		$scope.gaugeData = [];
   		
   		$scope.application = Application.query({id: $stateParams.id}, function(application) {
   			ApplicationDetails.getMetrics(application, function(application) {
@@ -77,6 +79,22 @@ angular.module('springBootAdmin')
   				$scope.heapMemoryData = [{ label: 'Free Heap', value : application.metrics["heap.free"] },
   				                     { label: 'Used Heap', value : application.metrics["heap.used"] }];
 
+  				
+  				//*** Extract data for Counter-Chart and Gauge-Chart
+  				$scope.counterData = [ { key : "value", values: [] } ];
+  				$scope.gaugeData = [ { key : "value", values: [] } ];
+  				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] });
+  					}
+
+  					var matchGauge = /gauge\.(.+)/.exec(metric);
+  					if ( matchGauge !== null) {
+  						$scope.gaugeData[0].values.push({ label : matchGauge[1], value : application.metrics[metric] });
+  					}
+  				}
+
   			});
   		});
   		
@@ -93,13 +111,26 @@ angular.module('springBootAdmin')
   		    };
   		}
   		
-  		var colorArray = ['#6db33f',  '#a5b2b9', '#ebf1e7', '#34302d' ];
+  		var colorArray = ['#6db33f',  '#a5b2b9', '#34302d' ];
   		$scope.colorFunction = function() {
   			return function(d, i) {
   		    	return colorArray[i % colorArray.length];
   		    };
   		}
   		
+  		$scope.intFormatFunction = function(){
+  		    return function(d) {
+  		        return d3.format('d')(d);
+  		    };
+  		}
+  		
+  		$scope.toolTipContentFunction = function(){
+  			return function(key, x, y, e, graph) {
+  				console.log(key, x, y, e, graph);
+  		    	return x + ': ' + y ;
+  			}
+  		}
+  		
   	})
   	.controller('detailsEnvCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
   		$scope.application = Application.query({id: $stateParams.id}, function(application) {

spring-boot-admin-server/src/main/webapp/public/styles/application.css

@@ -14,6 +14,10 @@ ul.download-links {
   margin-right: auto;
 }
 
+.nvd3 text, div.nvtooltip {
+	font-size: 14px;
+}
+
 ul.chart-legend {
     list-style: none;
 }
@@ -31,9 +35,6 @@ li.chart-2:before {
 	color: #a5b2b9;
 }
 li.chart-3:before {
-	color: #ebf1e7;
-}
-li.chart-4:before {
 	color: #34302d;
 }
 li.no-bullet:before {

spring-boot-admin-server/src/main/webapp/public/styles/main.css

@@ -12,7 +12,7 @@
 }
 
 .table tr.highlight > td {
-  background-color: #6db33f !important;
+  background-color: #a5b2b9 !important;
   font-weight: bold;
 }
 

spring-boot-admin-server/src/main/webapp/public/views/apps/details/metrics.html

@@ -44,6 +44,42 @@
 </table>
 
 <table class="table table-striped">
+	<thead>
+		<tr>
+			<th>Metrics</th>
+		</tr>
+	</thead>
+	<tbody>
+		<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()"
+									color="colorFunction()" 
+									tooltips="true" tooltipContent="toolTipContentFunction()"
+									showYAxis="true" yAxisTickFormat="intFormatFunction()">
+	    			</nvd3-discrete-bar-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()"
+									color="colorFunction()"
+									tooltips="true" tooltipContent="toolTipContentFunction()" 
+									showYAxis="true" yAxisTickFormat="intFormatFunction()">
+	    			</nvd3-discrete-bar-chart>
+    			</div>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<table class="table table-striped">
 	<col style="width:30%">
     <col style="width:auto">
 	<thead>