Skip to content

S
spring-boot-admin
Commit 82d707e6 by coestre Committed by Johannes Edmeier
Options

Modify the metrics page to show up more values

With this commit all values from /metrics are shown and a option to filter these values is provided closes #264
parent 1430d941
Showing with 72 additions and 56 deletions
spring-boot-admin-server-ui/modules/applications-metrics/controllers/metricsCtrl.js
...@@ -18,11 +18,10 @@ ...@@ -18,11 +18,10 @@
module.exports = function ($scope, application) { module.exports = function ($scope, application) {
'ngInject'; 'ngInject';
$scope.counters = []; var metricData = {'gauge': []};
$scope.countersMax = 0; var metricDataMax = {'gauge': 0};
$scope.gauges = [];
$scope.gaugesMax = 0;
$scope.showRichGauges = false; $scope.showRichGauges = false;
$scope.metrics = [];
application.getMetrics().then( application.getMetrics().then(
function (response) { function (response) {
...@@ -40,78 +39,99 @@ module.exports = function ($scope, application) { ...@@ -40,78 +39,99 @@ module.exports = function ($scope, application) {
var find = function (metrics, regexes, callbacks) { var find = function (metrics, regexes, callbacks) {
for (var metric in metrics) { for (var metric in metrics) {
for (var i = 0; i < regexes.length; i++) { if(metrics.hasOwnProperty(metric)) {
var match = regexes[i].exec(metric); for (var i = 0; i < regexes.length; i++) {
if (match !== null) { var match = regexes[i].exec(metric);
callbacks[i](metric, match, metrics[metric]); if (match !== null) {
break; callbacks[i](metric, match, metrics[metric]);
break;
}
} }
} }
} }
for (var key in metricData) {
if(metricData.hasOwnProperty(key)) {
$scope.metrics.push({
name: key,
values: metricData[key],
max: metricDataMax[key] || 0
});
}
}
}; };
var regexes = [/^(?!gauge)([a-zA-Z0-9]+)\..*/gi, /(gauge\..+)\.val/, /(gauge\..+)\.avg/, /(gauge\..+)\.min/, /(gauge\..+)\.max/, /(gauge\..+)\.count/, /(gauge\..+)\.alpha/, /(gauge\..+)/];
var regexes = [/counter\..+/, /(gauge\..+)\.val/, /(gauge\..+)\.avg/, /(gauge\..+)\.min/, /(gauge\..+)\.max/, /(gauge\..+)\.count/, /(gauge\..+)\.alpha/, /(gauge\..+)/];
var callbacks = [ var callbacks = [
function (metric, match, value) { function (metric, match, value) {
$scope.counters.push({ if(typeof metricData[match[1]] === 'undefined'){
name: metric, metricData[match[1]] = [];
value: value }
}); if(typeof metricDataMax[match[1]] === 'undefined'){
if (value > $scope.countersMax) { metricDataMax[match[1]] = 0;
$scope.countersMax = value; }
if (match.length >= 2 && match[1] !== null) {
metricData[match[1]].push({
name: metric,
value: value
});
if (value > metricDataMax[match[1]]) {
metricDataMax[match[1]] = value;
}
} }
}, },
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
value: value value: value
}); });
$scope.showRichGauges = true; $scope.showRichGauges = true;
if (value > $scope.gaugesMax) { if (value > metricDataMax['gauge']) {
$scope.gaugesMax = value; metricDataMax['gauge'] = value;
} }
}, },
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
avg: value.toFixed(2) avg: value.toFixed(2)
}); });
}, },
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
min: value min: value
}); });
}, },
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
max: value max: value
}); });
if (value > $scope.gaugesMax) { if (value > metricDataMax['gauge']) {
$scope.gaugesMax = value; metricDataMax['gauge'] = value;
} }
}, },
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
count: value count: value
}); });
}, },
function () { /* NOP */ }, function () { /* NOP */
},
function (metric, match, value) { function (metric, match, value) {
merge($scope.gauges, { merge(metricData['gauge'], {
name: match[1], name: match[1],
value: value value: value
}); });
if (value > $scope.gaugesMax) { if (value > metricDataMax['gauge']) {
$scope.gaugesMax = value; metricDataMax['gauge'] = value;
} }
}]; }];
find(response.data, regexes, callbacks); find(response.data, regexes, callbacks);
} }
).catch(function (response) { ).catch(function (response) {
$scope.error = response.data; $scope.error = response.data;
......
spring-boot-admin-server-ui/modules/applications-metrics/views/metrics.html
<div class="container"> <div class="container">
<div class="alert alert-error" ng-if="error"> <div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }} <b>Error:</b> {{ error }}
</div> </div>
<sba-info-panel panel-title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*"> <div>
<table class="table" ng-if="counters.length > 0"> <input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter"/>
<tr ng-repeat="counter in counters"> </div>
<td> <sba-info-panel ng-repeat="metric in metrics | orderBy:'name'" panel-title="{{ metric.name }}"
<sba-simple-metric-bar for-metric="counter" global-max="countersMax"></sba-simple-metric-bar> raw="api/applications/{{ application.id }}/metrics/{{ metric.name }}.*"
</td> ng-show="!searchFilter || (metric.values | filter:searchFilter).length > 0">
</tr> <table class="table">
</table> <tr ng-if="showRichGauges" ng-repeat="m in metric.values | filter:searchFilter">
</sba-info-panel> <td>
<sba-info-panel panel-title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*"> <sba-rich-metric-bar for-metric="m" global-max="metric.max"></sba-rich-metric-bar>
<table class="table" ng-if="gauges.length > 0"> </td>
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges"> </tr>
<td> <tr ng-if="!showRichGauges" ng-repeat="m in metric.values | filter:searchFilter">
<sba-rich-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-rich-metric-bar> <td>
</td> <sba-simple-metric-bar for-metric="m" global-max="metric.max"></sba-simple-metric-bar>
</tr> </td>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges"> </tr>
<td> </table>
<sba-simple-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-simple-metric-bar> </sba-info-panel>
</td>
</tr>
</table>
</sba-info-panel>
</div> </div>
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