Skip to content

Commit 57192fe

Browse files
joshistejoshiste
joshiste
authored and
joshiste
committed
Horizontal bar chart with logback-classic like abbreviated labels
1 parent 1586a4f commit 57192fe

File tree

3 files changed

+101
-36
lines changed

3 files changed

+101
-36
lines changed

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

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ angular.module('springBootAdmin')
6161
ApplicationDetails.getInfo(application);
6262
});
6363
})
64-
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails) {
64+
.controller('detailsMetricsCtrl', function ($scope, $stateParams, Application, ApplicationDetails, Abbreviator) {
6565
$scope.memoryData = [];
6666
$scope.heapMemoryData = [];
6767
$scope.counterData = [];
@@ -71,13 +71,13 @@ angular.module('springBootAdmin')
7171
ApplicationDetails.getMetrics(application, function(application) {
7272
//*** Extract data for JVM-Memory-Chart
7373
application.metrics["mem.used"] = application.metrics["mem"] - $scope.application.metrics["mem.free"];
74-
$scope.memoryData = [{ label: 'Free Memory', value: application.metrics["mem.free"] },
75-
{ label: 'Used Memory', value : application.metrics["mem.used"] }];
74+
$scope.memoryData = [ ['Free Memory', application.metrics["mem.free"]],
75+
['Used Memory', application.metrics["mem.used"]] ];
7676

7777
//*** Extract data for Heap-Memory-Chart
7878
application.metrics["heap.free"] = application.metrics["heap"] - $scope.application.metrics["heap.used"];
79-
$scope.heapMemoryData = [{ label: 'Free Heap', value : application.metrics["heap.free"] },
80-
{ label: 'Used Heap', value : application.metrics["heap.used"] }];
79+
$scope.heapMemoryData = [ ['Free Heap', application.metrics["heap.free"]],
80+
['Used Heap', application.metrics["heap.used"]] ];
8181

8282

8383
//*** Extract data for Counter-Chart and Gauge-Chart
@@ -86,48 +86,40 @@ angular.module('springBootAdmin')
8686
for (var metric in application.metrics) {
8787
var matchCounter = /counter\.(.+)/.exec(metric);
8888
if ( matchCounter !== null) {
89-
$scope.counterData[0].values.push({ label : matchCounter[1], value : application.metrics[metric] });
89+
$scope.counterData[0].values.push([ matchCounter[1], application.metrics[metric] ]);
9090
}
9191

9292
var matchGauge = /gauge\.(.+)/.exec(metric);
9393
if ( matchGauge !== null) {
94-
$scope.gaugeData[0].values.push({ label : matchGauge[1], value : application.metrics[metric] });
94+
$scope.gaugeData[0].values.push([ matchGauge[1], application.metrics[metric] ]);
9595
}
9696
}
9797

9898
});
9999
});
100100

101-
102-
$scope.xFunction = function(){
103-
return function(d) {
104-
return d.label;
105-
};
106-
}
107-
108-
$scope.yFunction = function(){
109-
return function(d) {
110-
return d.value;
111-
};
112-
}
113-
114-
var colorArray = ['#6db33f', '#a5b2b9', '#34302d' ];
101+
var colorArray = ['#6db33f', '#a5b2b9', '#34302d' ];
115102
$scope.colorFunction = function() {
116103
return function(d, i) {
117104
return colorArray[i % colorArray.length];
118105
};
119106
}
120107

121-
$scope.intFormatFunction = function(){
108+
$scope.abbreviateFunction = function(targetLength, preserveLast, shortenThreshold){
109+
return function(s) {
110+
return Abbreviator.abbreviate(s, targetLength, preserveLast, shortenThreshold)
111+
};
112+
}
113+
114+
$scope.intFormatFunction = function(){
122115
return function(d) {
123116
return d3.format('d')(d);
124117
};
125118
}
126119

127120
$scope.toolTipContentFunction = function(){
128121
return function(key, x, y, e, graph) {
129-
console.log(key, x, y, e, graph);
130-
return x + ': ' + y ;
122+
return e.point[0] + ': ' + e.point[1] ;
131123
}
132124
}
133125

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,4 +124,73 @@ angular.module('springBootAdmin.services', ['ngResource'])
124124
}
125125
});
126126
}
127+
}])
128+
.service('Abbreviator', [function() {
129+
function _computeDotIndexes(fqName, preserveLast) {
130+
var dotArray = [];
131+
132+
//iterate over String and find dots
133+
var lastIndex = -1;
134+
do {
135+
lastIndex = fqName.indexOf('.', lastIndex + 1);
136+
if (lastIndex !== -1) {
137+
dotArray.push(lastIndex);
138+
}
139+
} while (lastIndex !== -1)
140+
141+
// remove dots to preserve more than the last element
142+
for (var i = 0; i < preserveLast -1; i++ ) {
143+
dotArray.pop();
144+
}
145+
146+
return dotArray;
147+
}
148+
149+
function _computeLengthArray(fqName, targetLength, dotArray, shortenThreshold) {
150+
var lengthArray = [];
151+
var toTrim = fqName.length - targetLength;
152+
153+
for (var i = 0; i < dotArray.length; i++) {
154+
var previousDotPosition = -1;
155+
if (i > 0) {
156+
previousDotPosition = dotArray[i - 1];
157+
}
158+
159+
var len = dotArray[i] - previousDotPosition - 1;
160+
var newLen = (toTrim > 0 && len > shortenThreshold ? 1 : len);
161+
162+
toTrim -= (len - newLen);
163+
lengthArray[i] = newLen + 1;
164+
}
165+
166+
var lastDotIndex = dotArray.length - 1;
167+
lengthArray[dotArray.length] = fqName.length - dotArray[lastDotIndex];
168+
169+
return lengthArray;
170+
}
171+
172+
this.abbreviate = function(fqName, targetLength, preserveLast, shortenThreshold) {
173+
if (fqName.length < targetLength) {
174+
return fqName;
175+
}
176+
177+
var dotIndexesArray = _computeDotIndexes(fqName, preserveLast);
178+
179+
if (dotIndexesArray.length === 0) {
180+
return fqName;
181+
}
182+
183+
var lengthArray = _computeLengthArray(fqName, targetLength, dotIndexesArray, shortenThreshold);
184+
185+
var result = "";
186+
for (var i = 0; i <= dotIndexesArray.length; i++) {
187+
if (i === 0 ) {
188+
result += fqName.substr(0, lengthArray[i] -1);
189+
} else {
190+
result += fqName.substr(dotIndexesArray[i - 1], lengthArray[i]);
191+
}
192+
}
193+
194+
return result;
195+
}
127196
}]);

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

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<h1 style="text-align: center;">JVM Memory</h1>
1313
<div class="center-block" style="width: 400px; height: 200px;">
1414
<nvd3-pie-chart id="memoryChart" nodata="not available"
15-
data="memoryData" x="xFunction()" y="yFunction()"
15+
data="memoryData"
1616
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
1717
</nvd3-pie-chart>
1818
</div>
@@ -28,7 +28,7 @@ <h1 style="text-align: center;">JVM Memory</h1>
2828
<h1 style="text-align: center;">Heap Memory</h1>
2929
<div class="center-block" style="width: 400px; height: 200px;">
3030
<nvd3-pie-chart id="heapMemoryChart" nodata="not available"
31-
data="heapMemoryData" x="xFunction()" y="yFunction()"
31+
data="heapMemoryData"
3232
color="colorFunction()" margin="{left:0,top:0,bottom:0,right:0}">
3333
</nvd3-pie-chart>
3434
</div>
@@ -53,26 +53,30 @@ <h1 style="text-align: center;">Heap Memory</h1>
5353
<tr>
5454
<td>
5555
<h1 style="text-align: center;">Counter</h1>
56-
<div class="center-block" style="width: 800px; height: 300px; position:relative;">
57-
<nvd3-discrete-bar-chart id="counterChart" nodata="not available"
58-
data="counterData" x="xFunction()" y="yFunction()"
56+
<div class="center-block" style="width: 800px; height: {{ 50 + counterData[0].values.length * 15 }}px; position:relative;">
57+
<nvd3-multi-bar-horizontal-chart id="counterChart" nodata="not available"
58+
data="counterData"
5959
color="colorFunction()"
6060
tooltips="true" tooltipContent="toolTipContentFunction()"
61-
showYAxis="true" yAxisTickFormat="intFormatFunction()">
62-
</nvd3-discrete-bar-chart>
61+
showYAxis="true" yAxisTickFormat="intFormatFunction()"
62+
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
63+
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
64+
</nvd3-multi-bar-horizontal-chart>
6365
</div>
6466
</td>
6567
</tr>
6668
<tr>
6769
<td>
6870
<h1 style="text-align: center;">Gauge</h1>
69-
<div class="center-block" style="width: 800px; height: 300px; position:relative;">
70-
<nvd3-discrete-bar-chart id="gaugesChart" nodata="not available"
71-
data="gaugeData" x="xFunction()" y="yFunction()"
71+
<div class="center-block" style="width: 800px; height: {{ 50 + gaugeData[0].values.length * 15 }}px; position:relative;">
72+
<nvd3-multi-bar-horizontal-chart id="gaugesChart" nodata="not available"
73+
data="gaugeData"
7274
color="colorFunction()"
7375
tooltips="true" tooltipContent="toolTipContentFunction()"
74-
showYAxis="true" yAxisTickFormat="intFormatFunction()">
75-
</nvd3-discrete-bar-chart>
76+
showYAxis="true" yAxisTickFormat="intFormatFunction()"
77+
showXAxis="true" xAxisTickFormat="abbreviateFunction(30, 1, 3)"
78+
margin="{ top: 25, left: 250, right: 25, bottom: 50}">
79+
</nvd3-multi-bar-horizontal-chart>
7680
</div>
7781
</td>
7882
</tr>

0 commit comments

Comments
 (0)